:root{
    --bg:#f4f6f8;--surface:#ffffff;--muted:#666;--accent:#2b6cb0;
    --white:#f7fafc;--blue:#bee3f8;--black:#e2e8f0;--red:#fed7d7;--green:#c6f6d5;
}
html,body{height:100%;overflow:hidden}

body{font-family:Inter,Segoe UI,Arial,sans-serif;margin:0;background:var(--bg);color:#111}
h1{margin:0 0 12px;font-weight:700}
.hidden{display:none}
#zones{display:flex;gap:24px;flex-wrap:wrap;flex-direction:column}
.player{flex:1;padding:12px;border:1px solid #e6e9ee;background:var(--surface);border-radius:8px;min-width:260px}
.hand{position:relative;display:block;margin-top:20px;height:150px}
.hand .card{position:absolute;padding:8px;border:1px solid rgba(0,0,0,0.06);border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);width:120px;height:180px;cursor:pointer;box-shadow:0 6px 18px rgba(17,24,39,0.04), 0 0 0 1.5px rgba(0,0,0,0.85);transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .12s ease;bottom:0;left:50%;transform-origin:50% 100%}
.hand .card:hover{transform:translateX(-50%) translateY(-12px) rotate(var(--hover-rot,0deg)) scale(1.06);box-shadow:0 18px 40px rgba(17,24,39,0.12);z-index:10000}
.card{transition:all .18s cubic-bezier(.2,.9,.2,1);box-shadow:0 6px 18px rgba(17,24,39,0.04), 0 0 0 1.5px rgba(0,0,0,0.85)}
.card.dragging{opacity:0.85;transform:scale(1.05);box-shadow:0 20px 50px rgba(0,0,0,0.2);z-index:10001}
.floating{position:fixed;pointer-events:none;z-index:9999;transition:transform .22s ease,opacity .18s ease}
.card .title{font-weight:700;font-size:13px;color:#0f172a}
.card .meta{font-size:12px;color:var(--muted);margin-top:6px}
.card .art{height:110px;background:linear-gradient(135deg,#eee,#f7f7f7);border-radius:6px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
.art.white{background:linear-gradient(180deg,#fff,#f7f7f9);color:#222}
.art.blue{background:linear-gradient(180deg,#cfeefd,#b6e0ff)}
.art.black{background:linear-gradient(180deg,#dfe7ee,#c7d2e0);color:#222}
.art.red{background:linear-gradient(180deg,#ffd7d7,#ffc6c6);color:#3a0000}
.art.green{background:linear-gradient(180deg,#dfffe6,#c6f7d9);color:#08310b}
.card .cost{position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.08);padding:4px 6px;border-radius:6px;font-weight:700}
.card{position:relative}
.type-line{font-size:11px;color:var(--muted);margin-top:6px}
.pt-box{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,0.06);padding:4px 6px;border-radius:6px;font-weight:700}

/* MTG-like frame tweaks */
.card .frame{border-radius:10px;overflow:hidden;border:1px solid rgba(0,0,0,0.08)}
.card .art img{width:100%;height:110px;object-fit:cover}
.card .art svg{width:100%;height:110px;object-fit:cover;display:block}
.card .body{padding:8px}
.controls{display:flex;gap:8px}
.battlefield{min-height:80px;border:1px dashed #e2e8f0;padding:8px;margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.battlefield .card{min-width:140px}

/* color accents for decks */
.deck-white .card{border-color:#f1f5f9;background:var(--white)}
.deck-blue .card{border-color:#bee3f8;background:linear-gradient(180deg,#ebf8ff,#e6f3ff)}
.deck-black .card{border-color:#cbd5e1;background:linear-gradient(180deg,#f8fafc,#eef2f7)}
.deck-red .card{border-color:#fed7d7;background:linear-gradient(180deg,#fff5f5,#fff0f0)}
.deck-green .card{border-color:#c6f6d5;background:linear-gradient(180deg,#f0fff4,#e6fff0)}

/* selected card */
.card.selected{outline:2px solid var(--accent);box-shadow:0 12px 36px rgba(43,108,176,0.12)}

/* responsive */
@media (max-width:800px){
    #zones{flex-direction:column}
    .hand{height:120px}
    .hand .card{min-width:90px}
}
.battlefield{min-height:60px;border:1px dashed #ccc;padding:6px;margin-top:8px}
#controls{margin-top:12px}
#log{position:fixed;left:16px;top:16px;width:260px;bottom:16px;background:#fff;padding:12px;border:1px solid #eee;border-radius:8px;overflow:auto}

main{margin-left:304px;padding:16px;height:100vh;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;overflow:hidden}

/* ensure game area fits vertically without page scroll */
#game{flex:1;overflow:auto;padding-right:12px}

#zones{display:flex;gap:24px;flex-wrap:wrap;flex-direction:column;flex:1;overflow:auto}
#difficultyControl{margin-top:8px;display:flex;align-items:center;gap:8px}
#diffRange{width:140px}
#diffLabel{font-weight:600}
body {
    font-family: Arial, sans-serif;
    background-color: #1b35aa;
}
.battlefield .card{transition:transform .18s ease,opacity .18s ease}
#controls button{padding:8px 12px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:#fff;cursor:pointer}
#controls button:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,0.06)}

.log-entry{font-size:13px;padding:6px 0;border-bottom:1px dashed rgba(0,0,0,0.03)}

.battlefield.highlight{box-shadow:0 8px 30px rgba(43,108,176,0.12);border-color:var(--accent)}
.card.deal-anim{animation:card-deal .28s ease}
@keyframes card-deal{from{transform:translateY(-16px) scale(0.92);opacity:0}to{transform:none;opacity:1}}