:root{
  --bg:#141021; --bg2:#1e1633; --card:#241b3d; --ink:#f2ecff; --dim:#b9a8e0;
  --mana:#4fc3ff; --hp:#ff5d6c; --gold:#ffcf5d; --green:#5dff9d; --purple:#9d6bff;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{background:radial-gradient(1200px 800px at 50% -10%, #2b1f4d 0%, var(--bg) 60%) fixed, var(--bg);
  color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; min-height:100vh;
  display:flex; flex-direction:column;}
#app{flex:1; max-width:640px; width:100%; margin:0 auto; padding:16px 14px 24px;}
#foot{text-align:center; color:var(--dim); font-size:12px; padding:10px; opacity:.8;}
h1{font-size:30px; margin:6px 0 2px; letter-spacing:.5px;}
h1 .bolt{color:var(--mana);}
.sub{color:var(--dim); margin:0 0 16px; font-size:14px;}
.panel{background:var(--bg2); border:1px solid #3a2c63; border-radius:14px; padding:14px; margin-bottom:12px;}
.panel h2{margin:0 0 10px; font-size:17px;}
label{display:block; font-size:13px; color:var(--dim); margin:10px 0 4px;}
input[type=text],input[type=number],select,textarea{width:100%; background:#120d20; border:1px solid #3a2c63;
  color:var(--ink); border-radius:10px; padding:10px; font-size:15px;}
textarea{min-height:56px; resize:vertical;}
.btn{display:block; width:100%; border:none; border-radius:12px; padding:13px; font-size:16px; font-weight:700;
  margin:8px 0; cursor:pointer; color:#141021; background:linear-gradient(135deg,var(--mana),#7a8bff);}
.btn.gold{background:linear-gradient(135deg,var(--gold),#ff9d5d);}
.btn.red{background:linear-gradient(135deg,#ff5d6c,#c22a4a); color:#fff;}
.btn.ghost{background:#241b3d; color:var(--ink); border:1px solid #3a2c63;}
.btn.small{padding:8px 10px; font-size:14px; width:auto; display:inline-block; margin:4px 6px 4px 0;}
.btn:disabled{opacity:.4;}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.pname{display:flex; gap:8px; margin-bottom:8px;}
.pname input{flex:1;}
.pname button{flex:0 0 auto;}
.hint{font-size:12.5px; color:var(--dim); line-height:1.5;}
.bar{height:10px; background:#0e0a1a; border-radius:6px; overflow:hidden; margin-top:4px;}
.bar > div{height:100%; border-radius:6px;}
.hpbar{background:linear-gradient(90deg,#ff5d6c,#ff8d5d);}
.manabar{background:linear-gradient(90deg,#4fc3ff,#7a8bff);}
.opp{background:var(--card); border:1px solid #3a2c63; border-radius:12px; padding:10px 12px; margin-bottom:8px;}
.opp.dead{opacity:.45;}
.opp .nm{font-weight:700; font-size:15px;}
.opp .stats{font-size:13px; color:var(--dim); margin-top:2px;}
.opp .tags{font-size:12px; margin-top:4px;}
.tag{display:inline-block; background:#3a2c63; border-radius:8px; padding:2px 8px; margin:2px 4px 2px 0; font-size:12px;}
.tag.hex{background:#5a2c3a;}
.tag.ward{background:#2c4a5a;}
.hand{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0;}
.card{background:linear-gradient(160deg,#2d2148,#1d1530); border:1px solid #4a3a78; border-radius:14px;
  padding:10px; min-height:118px; display:flex; flex-direction:column; cursor:pointer; position:relative;}
.card.sel{border-color:var(--gold); box-shadow:0 0 0 2px var(--gold);}
.card .cn{font-weight:700; font-size:14px; margin-bottom:2px;}
.card .ct{font-size:11px; color:var(--gold); text-transform:uppercase; letter-spacing:.6px;}
.card .ce{font-size:12.5px; color:var(--dim); margin-top:6px; flex:1; line-height:1.4;}
.card .cc{position:absolute; top:8px; right:10px; background:#0e0a1a; border:1px solid var(--mana);
  color:var(--mana); font-weight:700; font-size:13px; border-radius:9px; padding:2px 8px;}
.card .cc.free{border-color:var(--green); color:var(--green);}
.card.artifact{border-color:var(--purple);}
.card.hexcard{border-color:#c22a4a;}
.turnbanner{background:linear-gradient(135deg,#3a2c63,#241b3d); border:1px solid var(--gold); border-radius:14px;
  padding:12px; margin-bottom:12px; text-align:center;}
.turnbanner .who{font-size:20px; font-weight:800;}
.turnbanner .ph{font-size:13px; color:var(--dim);}
.log{background:#0e0a1a; border:1px solid #2a2145; border-radius:12px; padding:10px; font-size:13px;
  max-height:150px; overflow-y:auto; margin-top:12px;}
.log div{margin-bottom:4px; color:var(--dim);}
.log div b{color:var(--ink);}
.bigwin{text-align:center; padding:30px 10px;}
.bigwin .t{font-size:34px; margin-bottom:8px;}
.deckrow{display:flex; justify-content:space-between; align-items:center; background:var(--card);
  border:1px solid #3a2c63; border-radius:10px; padding:10px 12px; margin-bottom:8px;}
.deckrow.active{border-color:var(--gold);}
.deckrow .dn{font-weight:700;}
.deckrow .dc{font-size:12px; color:var(--dim);}
.edgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.note{background:#2a2145; border-left:3px solid var(--gold); padding:10px 12px; border-radius:0 10px 10px 0;
  font-size:13px; color:var(--dim); margin:12px 0; line-height:1.5;}
.kv{display:flex; justify-content:space-between; font-size:14px; padding:3px 0;}
.targetpick .btn{margin:6px 0;}