*{box-sizing:border-box;margin:0;padding:0}
body{background:#120b1e;color:#e9e2f5;font-family:Georgia,'Times New Roman',serif;min-height:100vh;display:flex;flex-direction:column}
#app{flex:1;max-width:960px;width:100%;margin:0 auto;padding:16px}
footer{text-align:center;padding:12px;font-size:12px;color:#8b7bb3;border-top:1px solid #2c2140}
h1{font-size:44px;text-align:center;color:#fbbf24;letter-spacing:2px;margin:28px 0 4px;text-shadow:0 2px 12px #7c3aed}
.subtitle{text-align:center;color:#a78bfa;margin-bottom:28px;font-style:italic}
h2{color:#fbbf24;margin:12px 0}
h3{color:#c4b5fd;margin:10px 0 6px}
.screen{display:flex;flex-direction:column;align-items:center;gap:12px}
button{font-family:inherit;font-size:16px;background:#7c3aed;color:#fff;border:2px solid #a78bfa;border-radius:10px;padding:12px 22px;cursor:pointer;min-height:48px}
button:hover{background:#8b5cf6}
button:disabled{opacity:.4;cursor:default}
button.danger{background:#7f1d1d;border-color:#ef4444}
button.ghost{background:transparent;border-color:#6d5a96;color:#c4b5fd}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:10px 0}
input[type=text]{font-family:inherit;font-size:16px;background:#1f1533;color:#e9e2f5;border:2px solid #6d5a96;border-radius:8px;padding:10px;width:100%;max-width:320px}
label{color:#c4b5fd;font-size:14px}
.field{display:flex;flex-direction:column;gap:4px;align-items:center;width:100%}
.note{max-width:560px;text-align:center;color:#a78bfa;font-size:14px;line-height:1.5}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;background:#1f1533;border:2px solid #4c3a75;border-radius:12px;padding:10px 14px;margin-bottom:12px;width:100%}
.topbar .stat{font-size:15px}
.hpbar{height:14px;background:#3b1f2b;border-radius:7px;overflow:hidden;min-width:120px;flex:1;max-width:280px}
.hpbar>div{height:100%;background:linear-gradient(90deg,#ef4444,#f97316);transition:width .3s}
.manabar{height:10px;background:#1e2a4a;border-radius:5px;overflow:hidden;min-width:80px}
.manabar>div{height:100%;background:linear-gradient(90deg,#38bdf8,#818cf8)}
.roomlabel{width:100%;text-align:center;color:#fbbf24;font-size:18px;margin:6px 0}
.cards{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.card{background:#241a3d;border:2px solid #6d5a96;border-radius:12px;padding:10px;width:158px;min-height:150px;display:flex;flex-direction:column;gap:6px;cursor:default;position:relative}
.card .cname{font-weight:bold;color:#fbbf24;font-size:15px}
.card .ctype{font-size:11px;color:#a78bfa;text-transform:uppercase;letter-spacing:1px}
.card .ctext{font-size:13px;color:#d8cdf0;line-height:1.35;flex:1}
.card .cstats{font-size:13px;color:#fca5a5}
.card .ccost{position:absolute;top:6px;right:8px;background:#7c3aed;color:#fff;font-size:13px;font-weight:bold;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.card.hand{cursor:pointer}
.card.hand:hover{border-color:#fbbf24}
.card.selected{border-color:#fbbf24;box-shadow:0 0 12px #fbbf24}
.card.targetable{cursor:pointer;border-color:#38bdf8;box-shadow:0 0 10px #38bdf8}
.card.dead{opacity:.35}
.log{background:#0d0817;border:1px solid #2c2140;border-radius:10px;padding:10px;max-height:180px;overflow-y:auto;width:100%;font-size:13px;line-height:1.5;margin-top:12px}
.log div{margin-bottom:3px;color:#b8a9d9}
.turnbanner{width:100%;text-align:center;font-size:20px;color:#fbbf24;margin:4px 0}
.manaline{display:flex;align-items:center;gap:8px;font-size:15px}
.histrow{background:#1f1533;border:1px solid #4c3a75;border-radius:8px;padding:8px 12px;width:100%;max-width:560px;font-size:14px}
.big{font-size:26px;color:#fbbf24;text-align:center;margin:16px 0}
@media (max-width:600px){.card{width:44vw;min-height:140px}h1{font-size:34px}}