:root{--bg: #0b1020;--panel: rgba(12, 16, 28, .88);--gold: #f0c14a;--mana: #5ec8ff;--hp-enemy: #e74c3c;--hp-ally: #3ddc84;--text: #f4f1ea;--muted: #9aa3b5;--accent: #ff6b3d;--card-w: clamp(56px, 16vw, 72px);--card-h: clamp(76px, 22vw, 96px);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--vvh: 100dvh;--vvw: 100dvw;font-family:Segoe UI,system-ui,-apple-system,sans-serif}@supports not (height: 100dvh){:root{--vvh: 100vh;--vvw: 100vw}}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;height:var(--vvh);max-height:var(--vvh);background:var(--bg);color:var(--text);overflow:hidden;overscroll-behavior:none;touch-action:none}#app{width:100%;height:100%;height:var(--vvh);max-height:var(--vvh);display:flex;align-items:stretch;justify-content:center;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);background:radial-gradient(ellipse at 50% 20%,#1a2744 0%,transparent 55%),linear-gradient(180deg,#0b1020,#14101a)}#game-shell{position:relative;display:flex;flex-direction:column;width:100%;height:100%;max-width:min(480px,100%);max-height:100%;background:#0a0e18;border-radius:0;overflow:hidden;box-shadow:none}@media(min-width:520px)and (min-height:700px){#app{align-items:center;justify-content:center;padding:max(12px,var(--safe-top)) max(12px,var(--safe-right)) max(12px,var(--safe-bottom)) max(12px,var(--safe-left))}#game-shell{width:min(100%,calc(var(--vvh) * 9 / 16));height:min(var(--vvh) - 24px,calc(100% - 24px),calc(min(100%,var(--vvw)) * 16 / 9));max-width:420px;max-height:calc(var(--vvh) - 24px);border-radius:12px;box-shadow:0 20px 60px #0000008c,0 0 0 1px #ffffff0f}}#viewport{position:relative;flex:1 1 auto;min-height:0;width:100%;background:#000}#game-canvas{display:block;width:100%;height:100%;touch-action:none}#hud-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}#bottom-chrome{flex:0 0 auto;width:100%;background:linear-gradient(180deg,#121826,#0a0e18);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -8px 24px #00000073;z-index:8;padding-bottom:max(4px,env(safe-area-inset-bottom,0px))}#menus{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:30}#menus .menu-screen,#menus .loading-screen{pointer-events:auto}.top-bars{position:absolute;top:max(8px,env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:6px;z-index:5}.bar-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-shadow:0 1px 2px #000}.bar-row label{width:64px;flex-shrink:0;opacity:.95;font-size:11px;letter-spacing:.02em}.bar-row.enemy-row label{color:#ff8a7a}.bar-row.ally-row label{color:#7dffb2}.bar-track{flex:1;height:12px;background:#00000073;border-radius:99px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}.bar-fill{height:100%;width:100%;transform-origin:left center;transition:transform .12s linear}.bar-fill.enemy{background:linear-gradient(90deg,#c0392b,#ff6b5a)}.bar-fill.ally{background:linear-gradient(90deg,#1e8f4e,#3ddc84)}.timer-chip{position:absolute;top:calc(max(8px,env(safe-area-inset-top,0px)) + 48px);left:50%;transform:translate(-50%);background:var(--panel);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;letter-spacing:.04em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:5}.level-chip{position:absolute;top:calc(max(8px,env(safe-area-inset-top,0px)) + 76px);left:50%;transform:translate(-50%);background:#00000073;border:1px solid rgba(255,200,120,.25);border-radius:999px;padding:3px 10px;font-size:10px;font-weight:700;color:#ffd89a;letter-spacing:.06em;text-transform:uppercase;z-index:5;pointer-events:none}.level-chip.hidden{display:none}.mute-btn{position:absolute;top:max(8px,env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:#080c16bf;color:#fff;font-size:16px;cursor:pointer;pointer-events:auto;z-index:12;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 12px #00000059}.mute-btn:hover{border-color:#ffc87873;filter:brightness(1.1)}.mute-btn.is-muted{opacity:.85}.menu-mute{z-index:40;pointer-events:auto}.bottom-ui{position:relative;left:auto;right:auto;bottom:auto;padding:10px 10px 14px;background:transparent;pointer-events:none;z-index:6}.mana-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:0 4px;pointer-events:none}.mana-label{font-size:13px;font-weight:800;color:var(--mana);min-width:48px}.mana-track{flex:1;height:14px;border-radius:99px;background:#001e32b3;border:1px solid rgba(94,200,255,.35);overflow:hidden;position:relative}.mana-fill{height:100%;background:linear-gradient(90deg,#1a6fa8,#5ec8ff);transform-origin:left center;transition:transform .08s linear}.mana-track.full .mana-fill{animation:manaPulse .8s ease-in-out infinite}.mana-track.double{border-color:#ffc850bf;box-shadow:0 0 12px #ffb42859}.mana-track.double .mana-fill{background:linear-gradient(90deg,#c47a10,#ffd56a)}.play-pulse{animation:playPulse .18s ease-out}@keyframes playPulse{0%{filter:brightness(1)}40%{filter:brightness(1.35)}to{filter:brightness(1)}}@keyframes manaPulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.35)}}.hand-row{display:flex;gap:6px;align-items:flex-end;justify-content:center;pointer-events:auto;position:relative;overflow:hidden;max-width:100%;padding:0 4px;flex-wrap:nowrap}.card{width:var(--card-w);height:var(--card-h);min-width:0;flex:0 0 var(--card-w);border-radius:12px;border:2px solid rgba(255,255,255,.28);background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.22),transparent 55%),linear-gradient(180deg,#ffffff24,#0006),var(--card-color, #444);box-shadow:0 8px 18px #00000080,inset 0 1px #ffffff2e;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:14px 4px 6px;gap:2px;cursor:grab;position:relative;overflow:hidden;transition:transform .12s ease,opacity .12s ease,filter .12s ease;touch-action:none}.card:active{cursor:grabbing}.card.disabled{opacity:.4;filter:grayscale(.5);cursor:not-allowed}.card.glow,.card.selected{box-shadow:0 0 0 2px #ffe08a,0 0 18px #ffc83cd9;z-index:2}.card.glow{animation:cardGlow .9s ease-in-out infinite}.card.dragging-source{opacity:.35;transform:scale(.92);filter:grayscale(.3);pointer-events:none;animation:none}@keyframes cardGlow{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.card .cost{position:absolute;top:-8px;left:-6px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9fe3ff,#1d6fa5 70%);border:2px solid #dff6ff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;color:#041018}.card .emoji{font-size:clamp(20px,5.5vw,28px);line-height:1;margin-top:4px;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}.card .name{font-size:clamp(8px,2.4vw,10px);font-weight:800;text-align:center;line-height:1.15;text-shadow:0 1px 2px #000;width:100%;max-width:100%;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.card .blurb{font-size:clamp(7px,2vw,9px);opacity:.8;text-align:center;width:100%;max-width:100%;padding:0 3px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.next-card{flex:0 0 auto;width:clamp(40px,11vw,48px)!important;height:clamp(54px,16vw,64px)!important;margin-left:2px}.next-card{width:48px;height:64px;border-radius:8px;border:1px dashed rgba(255,255,255,.25);background:#00000059;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:var(--muted);margin-left:4px;pointer-events:none}.next-card .emoji{font-size:18px;margin-bottom:2px}.drag-ghost{position:fixed;width:var(--card-w);height:var(--card-h);border-radius:12px;border:2px solid #fff;pointer-events:none;z-index:10000;opacity:.95;transform:translate(-50%,-60%) scale(1.05);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 4px 10px;font-size:28px;box-shadow:0 16px 36px #0000008c,0 0 0 2px #ffdc7859;background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.22),transparent 55%),linear-gradient(180deg,#ffffff24,#0006),var(--card-color, #444);color:#fff;text-shadow:0 1px 2px #000}.drag-ghost .cost{position:absolute;top:-8px;left:-6px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9fe3ff,#1d6fa5 70%);border:2px solid #dff6ff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;color:#041018}.drag-ghost .emoji{font-size:30px;margin-top:12px}.drag-ghost .name{font-size:10px;font-weight:800;text-align:center}.drop-hint{position:absolute;left:50%;bottom:38%;transform:translate(-50%);background:#000000a6;border:1px solid rgba(255,220,120,.5);color:#ffe08a;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;z-index:7;pointer-events:none;animation:bounce 1s ease-in-out infinite;max-width:80%;text-align:center}.drop-hint.hidden{display:none}@keyframes bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-8px)}}.menu-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;background:radial-gradient(ellipse at 50% 30%,rgba(80,30,20,.45),transparent 55%),#080a12eb;pointer-events:auto;z-index:20;text-align:center}.menu-screen.hidden{display:none}.logo-badge{font-size:10px;font-weight:800;letter-spacing:.18em;color:#ffb07a;margin-bottom:8px;opacity:.9}.logo{font-size:30px;font-weight:900;letter-spacing:.02em;margin:0 0 4px;background:linear-gradient(180deg,#ffe9b0,#ff6b3d 70%,#e03a20);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 10px rgba(255,80,40,.4))}.tagline{color:var(--muted);font-size:13px;margin:0 0 22px;font-style:italic}.level-list{width:100%;display:flex;flex-direction:column;gap:10px;margin-bottom:18px}.level-btn{width:100%;text-align:left;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#ffffff14,#00000040);color:var(--text);border-radius:12px;padding:12px 14px;cursor:pointer;transition:transform .1s ease,border-color .1s ease}.level-btn:hover:not(:disabled){transform:translateY(-1px);border-color:#ffb45080}.level-btn:disabled{opacity:.4;cursor:not-allowed}.level-btn .title{font-weight:800;font-size:15px}.level-btn .sub{font-size:11px;color:var(--muted);margin-top:2px}.level-btn .stars{margin-top:4px;color:#ffd56a;letter-spacing:2px}.btn-primary{border:none;background:linear-gradient(180deg,#ff8a4c,#e04a20);color:#fff;font-weight:800;font-size:15px;padding:12px 28px;border-radius:999px;cursor:pointer;box-shadow:0 8px 20px #e04a2066}.btn-primary:hover{filter:brightness(1.08)}.btn-ghost{margin-top:10px;border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--text);font-weight:700;padding:10px 20px;border-radius:999px;cursor:pointer}.result-stars{font-size:36px;letter-spacing:6px;margin:8px 0 16px;color:#ffd56a;min-height:44px}.result-title{font-size:26px;font-weight:900;margin:0 0 6px}.result-sub{color:var(--muted);font-size:13px;margin:0 0 18px}.loading-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b1020;z-index:50;pointer-events:auto;gap:12px}.loading-screen.hidden{display:none}.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:absolute;top:30%;left:50%;transform:translate(-50%) scale(.92);background:linear-gradient(180deg,#28140ae6,#000000d9);border:1px solid rgba(255,180,80,.45);color:#fff;padding:12px 18px;border-radius:12px;font-weight:900;font-size:15px;letter-spacing:.04em;z-index:15;pointer-events:none;opacity:0;transition:opacity .18s ease,transform .18s ease;text-shadow:0 2px 8px rgba(0,0,0,.6);box-shadow:0 10px 28px #00000073}.toast.show{opacity:1;transform:translate(-50%) scale(1)}