:root{--bg:#0d1117;--surface-1:#161b22;--surface-2:#1b212b;--surface-3:#232b37;--border:#2a313c;--border-strong:#3a4350;--text:#d6dde6;--text-dim:#8a95a3;--text-faint:#58616e;--p1:#4a93d4;--p1-bright:#a9d6ff;--p1-bg:#163149;--p1-border:#3d7eb0;--p2:#d65750;--p2-bright:#ffb0aa;--p2-bg:#45191a;--p2-border:#b8453f;--accent:#f0c23c;--accent-bg:#332a0c;--move:#3a9d44;--move-bg:#173d1d;--danger:#c43c2f;--danger-bg:#3a1310;--attack-range:#4a1714;--can-act-glow:#52cc708c;--radius:10px;--radius-sm:5px;--shadow-1:0 1px 3px #00000073;--shadow-2:0 8px 28px #0000008c;--space:8px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:radial-gradient(ellipse 120% 80% at 50% -10%, #16202c 0%, var(--bg) 60%);color:var(--text);-webkit-font-smoothing:antialiased;background-attachment:fixed;font-family:system-ui,-apple-system,Segoe UI,sans-serif}#root{width:100%}.board{flex-shrink:0;position:relative}.board--busy .cell{cursor:progress!important}.cell{cursor:pointer;clip-path:polygon(50% 3px,calc(100% - 3px) 25%,calc(100% - 3px) 75%,50% calc(100% - 3px),3px 75%,3px 25%);touch-action:none;background:linear-gradient(155deg,#242c38 0%,#1a212b 100%);justify-content:center;align-items:center;transition:background .18s,filter .13s;display:flex;position:absolute}.cell--attack-range{background:var(--attack-range)!important}.cell--move{background:var(--move-bg)!important}.cell--attack-target{cursor:crosshair;background:var(--danger)!important}.cell--selected{background:#34404e!important}.cell--terrain{cursor:default;font-size:calc(var(--hex-size) * .56);-webkit-user-select:none;user-select:none;background:#15110c}.cell--terrain:after{content:"🪨"}.cell:not(.cell--terrain):hover{filter:brightness(1.3)}.unit{width:calc(var(--hex-size) * 1.25);height:calc(var(--hex-size) * 1.25);-webkit-user-select:none;user-select:none;border:2px solid #0000;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;font-size:11px;display:flex;position:relative}.unit--p1{background:radial-gradient(circle at 50% 35%, #235581 0%, var(--p1-bg) 100%);border-color:var(--p1-border);color:var(--p1-bright)}.unit--p2{background:radial-gradient(circle at 50% 35%, #7a2722 0%, var(--p2-bg) 100%);border-color:var(--p2-border);color:var(--p2-bright)}.unit--selected{border-color:#fff;box-shadow:0 0 7px #ffffff8c}.unit--can-act{box-shadow:0 0 6px 2px var(--can-act-glow)}.unit--dragging{opacity:.35}.unit-glyph{font-size:calc(var(--hex-size) * .56);line-height:1}.unit img.unit-glyph{width:calc(var(--hex-size) * 1.05);height:calc(var(--hex-size) * 1.05);object-fit:contain}.unit-hp{font-size:calc(max(7px, var(--hex-size) * .28));opacity:.85;margin-top:1px}.unit-buff{font-size:calc(max(6px, var(--hex-size) * .24));line-height:1;position:absolute;top:1px;right:2px}.unit-buff--buff{filter:drop-shadow(0 0 3px var(--accent))}.unit-buff--debuff{filter:drop-shadow(0 0 3px var(--p2))}.card{--card-accent:var(--border-strong);--card-glow:#ffffff26;border:1px solid var(--card-accent);background:linear-gradient(180deg, var(--surface-3) 0%, var(--surface-1) 100%);width:clamp(64px,17vw,84px);color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;animation:.32s cubic-bezier(.2,.8,.3,1) backwards card-deal;animation-delay:calc(var(--i,0) * 55ms);border-radius:9px;flex-direction:column;align-items:stretch;gap:5px;padding:6px 6px 7px;transition:transform .1s,box-shadow .1s,border-color .1s;display:flex;position:relative;box-shadow:inset 0 1px #ffffff0a,0 2px 6px #00000059}.card:before{content:"";background:var(--card-accent);border-radius:9px 9px 0 0;height:3px;position:absolute;inset:0 0 auto}.card:hover:not(:disabled){border-color:var(--card-accent);box-shadow:0 6px 16px -6px var(--card-glow), 0 0 0 1px var(--card-accent);transform:translateY(-4px)}.card--active{border-color:var(--card-accent);box-shadow:0 0 0 2px var(--card-accent), 0 8px 20px -6px var(--card-glow);transform:translateY(-6px)}.card:disabled{opacity:.5;cursor:not-allowed}.card-cost{background:radial-gradient(circle at 35% 30%, #ffe28a 0%, var(--accent) 70%);color:#221a02;z-index:2;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;font-weight:800;display:flex;position:absolute;top:-6px;left:-6px;box-shadow:0 1px 3px #0006}.card--unaffordable .card-cost{background:radial-gradient(circle at 35% 30%, #ffb3ad 0%, var(--p2) 70%);color:#2a0d0b}.card-art{aspect-ratio:1;background:repeating-linear-gradient(45deg, #ffffff05 0 6px, transparent 6px 12px), var(--surface-2);border:1px solid var(--border);border-radius:6px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.card-art-img.art--placeholder{font-size:clamp(22px,7vw,32px);line-height:1}.card-art img.card-art-img{object-fit:cover;width:100%;height:100%}.card-name{text-align:center;letter-spacing:.01em;font-size:10px;font-weight:700;line-height:1.1}.card--damage{--card-accent:#d65750;--card-glow:#d657508c}.card--aoe{--card-accent:#e8923c;--card-glow:#e8923c8c}.card--spawn{--card-accent:#4a93d4;--card-glow:#4a93d48c}.card--buff{--card-accent:#f0c23c;--card-glow:#f0c23c8c}.card--heal{--card-accent:#5fb878;--card-glow:#5fb8788c}.card--debuff{--card-accent:#a779d6;--card-glow:#a779d68c}@keyframes card-deal{0%{opacity:0;transform:translateY(14px)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.card{animation:none}}.start-screen{flex-direction:column;justify-content:flex-start;align-items:center;gap:24px;min-height:100dvh;padding:80px 24px 24px;display:flex}.start-logo{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:380px;max-width:90vw;margin-bottom:8px}.start-name-input{color:#ddd;text-align:center;background:#1a2a3a;border:2px solid #4a8abf;border-radius:6px;outline:none;width:220px;padding:10px 16px;font-size:18px}.start-name-input:focus{border-color:#7ab8f0}.start-name-input:disabled{opacity:.5}.start-error{color:#f07a7a;text-align:center;max-width:280px;margin:0;font-size:14px}.start-form{flex-direction:column;align-items:center;gap:16px;display:flex}.start-code-input{color:#ddd;text-align:center;letter-spacing:.2em;background:#1e1e1e;border:2px solid #666;border-radius:6px;outline:none;width:160px;padding:10px 16px;font-family:monospace;font-size:22px}.start-code-input:focus{border-color:#888}.start-code-input:disabled{opacity:.5}.start-code-input::placeholder{letter-spacing:normal;font-family:inherit;font-size:20px}.start-actions{flex-direction:column;align-items:center;gap:12px;display:flex}.start-btn{color:#ddd;cursor:pointer;letter-spacing:1px;background:#2a2a2a;border:1px solid #666;border-radius:6px;width:200px;padding:12px 40px;font-size:16px;font-weight:600}.start-btn:hover:not(:disabled){background:#3a3a3a;border-color:#888}.start-btn:disabled{opacity:.5;cursor:not-allowed}.start-btn--secondary{color:#aaa;background:0 0;border-color:#444}.start-btn--secondary:hover:not(:disabled){color:#ddd;background:#222;border-color:#666}.start-back{color:#666;cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:13px;text-decoration:underline}.start-back:hover:not(:disabled){color:#aaa}.my-games{flex-direction:column;gap:6px;width:100%;max-width:480px;margin-top:8px;display:flex}.my-games-title{letter-spacing:1.5px;text-transform:uppercase;color:#555;padding-bottom:4px;font-size:11px;font-weight:600}.my-game-row{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;align-items:center;gap:10px;padding:10px 14px;transition:border-color .15s;display:flex}.my-game-row--your-turn{border-color:#2a4a2a}.my-game-row--your-turn:hover{border-color:#3a6a3a}.my-game-row:not(.my-game-row--your-turn):hover{border-color:#3a3a3a}.my-game-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.my-game-code{letter-spacing:.15em;color:#ccc;font-family:monospace;font-size:15px;font-weight:600}.my-game-opp{color:#666;white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.my-game-badge{letter-spacing:.5px;white-space:nowrap;border-radius:20px;flex-shrink:0;padding:3px 8px;font-size:11px;font-weight:600}.my-game-badge--your-turn{color:#6dcf6d;background:#1a3a1a;border:1px solid #2a5a2a}.my-game-badge--active{color:#7a8acf;background:#1a1a2a;border:1px solid #2a2a4a}.my-game-badge--waiting{color:#aa6;background:#2a2a1a;border:1px solid #4a4a2a}.my-game-actions{flex-shrink:0;gap:6px;display:flex}.my-game-btn{cursor:pointer;border:1px solid #0000;border-radius:5px;padding:5px 12px;font-size:12px;font-weight:500;transition:background .1s,border-color .1s}.my-game-btn--rejoin{color:#8ae08a;background:#1e3a1e;border-color:#2a5a2a}.my-game-btn--rejoin:hover{background:#264826;border-color:#4a8a4a}.my-game-btn--forfeit{color:#666;background:0 0;border-color:#333}.my-game-btn--forfeit:hover{color:#c07070;border-color:#8a3a3a}.my-game-btn--confirm{color:#f08080;background:#3a1a1a;border-color:#8a3a3a}.my-game-btn--confirm:hover{background:#501a1a}.my-game-btn--cancel{color:#666;background:0 0;border-color:#333}.my-game-btn--cancel:hover{color:#aaa;border-color:#555}.lobby{text-align:center;flex-direction:column;justify-content:flex-start;align-items:center;gap:2rem;min-height:100dvh;padding:80px 2rem 2rem;display:flex}.lobby-logo{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:320px;max-width:85vw}.lobby-body{flex-direction:column;align-items:center;gap:1rem;display:flex}.lobby-label{color:#888;letter-spacing:.5px;margin:0;font-size:14px}.lobby-code{letter-spacing:.4em;color:#ddd;background:#1a1a1a;border:2px solid #555;border-radius:8px;padding:.4rem 1.2rem;font-family:monospace;font-size:3rem;font-weight:700}.lobby-copy-btn{letter-spacing:.5px;color:#ddd;cursor:pointer;background:#2a2a2a;border:1px solid #666;border-radius:6px;padding:10px 28px;font-size:14px;font-weight:600}.lobby-copy-btn:hover{background:#3a3a3a;border-color:#888}.lobby-status{color:#888;margin:.5rem 0 0;font-size:14px}.lobby-status--joined{color:#6abf69}.lobby-leave{opacity:.5;color:#aaa;cursor:pointer;background:0 0;border:1px solid #555;border-radius:6px;margin-top:1rem;padding:8px 20px;font-size:13px}.lobby-leave:hover{opacity:1}.loading{min-height:100vh;color:var(--text-faint);letter-spacing:.08em;flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:14px;display:flex}.loading-logo{opacity:.6;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:260px;max-width:80vw;margin-bottom:8px}.loading-dots{gap:6px;display:flex}.loading-dots span{background:var(--text-faint);border-radius:50%;width:8px;height:8px;animation:.9s ease-in-out infinite loading-pulse;display:block}.loading-dots span:nth-child(2){animation-delay:.18s}.loading-dots span:nth-child(3){animation-delay:.36s}@keyframes loading-pulse{0%,80%,to{opacity:.2;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}.app{flex-direction:column;align-items:center;gap:16px;min-height:100vh;padding:24px;display:flex}.app--narrow{gap:8px;padding:8px}.app--narrow .game-layout{grid-template-columns:1fr;justify-items:stretch;gap:8px}.app--narrow .center-column{align-items:center;width:100%}.app--narrow .left-panel{justify-content:center}.app--narrow .right-panel{display:none}.app--narrow .board-wrap{padding:8px}.app--narrow .hud{flex-wrap:wrap;gap:6px 10px;min-height:0;padding:7px 10px}.app--narrow .turn-indicator{padding:4px 10px;font-size:14px}.app--narrow .match-players{gap:5px;font-size:12px}.app--narrow .hud-actions{flex-wrap:wrap;gap:6px;width:100%;margin-left:0}.app--narrow button{padding:6px 11px;font-size:13px}.app--narrow .left-panel .unit-info{width:100%;max-width:320px;min-height:0}.app--narrow .hand-panel,.app--narrow .hand-panel-head,.app--narrow .log{max-width:480px;margin-left:auto;margin-right:auto}.app--narrow .log{max-height:96px}.app--narrow .hand-cards{justify-content:center}.match-players{align-items:center;gap:7px;font-size:13px;display:flex}.mp{font-weight:600}.mp--p1{color:var(--p1)}.mp--p2{color:var(--p2)}.mp-you{opacity:.6;font-size:11px;font-weight:400}.mp-vs{color:var(--text-faint);font-size:11px;font-weight:400}.hud{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:1100px;min-height:48px;box-shadow:var(--shadow-1);align-items:center;gap:14px;padding:8px 14px;display:flex}.turn-indicator{border-radius:var(--radius-sm);letter-spacing:.01em;padding:6px 14px;font-size:17px;font-weight:700}.turn-indicator.p1{background:var(--p1-bg);color:var(--p1-bright);border:1px solid var(--p1-border);box-shadow:0 0 0 1px var(--p1-bg), 0 0 14px -4px var(--p1)}.turn-indicator.p2{background:var(--p2-bg);color:var(--p2-bright);border:1px solid var(--p2-border);box-shadow:0 0 0 1px var(--p2-bg), 0 0 14px -4px var(--p2)}.ultra-prompt{color:var(--accent);align-items:center;gap:8px;font-size:14px;display:flex}.cancel-ability-btn{border-color:var(--border-strong);color:var(--text-dim);padding:2px 8px;font-size:12px}.cancel-ability-btn:hover{background:var(--p2-bg);border-color:var(--p2);color:var(--p2-bright)}.hud-actions{align-items:center;gap:8px;margin-left:auto;display:flex}button{border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-3);color:var(--text);cursor:pointer;padding:7px 14px;font-size:14px;font-weight:500;transition:background .13s,border-color .13s,color .13s}button:hover{background:#2c3542;border-color:#475160}button:disabled{opacity:.4;cursor:not-allowed}.end-turn-btn{background:var(--p1-bg);border-color:var(--p1-border);color:var(--p1-bright);font-weight:600}.end-turn-btn:hover{border-color:var(--p1);background:#1d3f5c}.ability-btn{border-color:var(--accent);color:var(--accent);font-weight:600}.ability-btn:hover{background:var(--accent-bg);border-color:var(--accent)}.forfeit-btn{color:var(--text-dim);background:0 0;border-color:#0000}.lobby-btn{color:var(--text-faint);background:0 0;border-color:#0000;font-size:13px}.lobby-btn:hover{background:var(--surface-3);border-color:var(--border);color:var(--text-dim)}.forfeit-btn:hover{background:var(--p2-bg);border-color:var(--p2-border);color:var(--p2-bright)}.forfeit-btn--confirm{border-color:var(--p2-border);color:var(--p2-bright);background:var(--p2-bg)}.forfeit-btn--confirm:hover{border-color:var(--p2);color:#ff9088;background:#581d1d}.forfeit-btn--cancel{border-color:var(--border);color:var(--text-dim);background:0 0}.forfeit-btn--cancel:hover{border-color:var(--border-strong);color:var(--text);background:var(--surface-3)}.action-pending{vertical-align:middle;align-items:center;gap:6px;margin-left:8px;animation:.18s ease-out pending-fade-in;display:inline-flex}.action-pending-text{letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);font-size:.72em}.action-pending-dots{align-items:center;gap:4px;display:inline-flex}.action-pending-dots span{background:var(--text-dim);opacity:.4;border-radius:50%;width:5px;height:5px;animation:1.1s ease-in-out infinite dot-bounce;display:block}.action-pending-dots span:nth-child(2){animation-delay:.18s}.action-pending-dots span:nth-child(3){animation-delay:.36s}@keyframes pending-fade-in{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes dot-bounce{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}.winner-banner{background:var(--surface-1);border:1px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow-2), 0 0 40px -10px var(--accent);color:var(--accent);flex-direction:column;align-items:center;gap:12px;padding:28px 40px;font-size:24px;font-weight:700;display:flex}.winner-sub{color:var(--text-dim);font-size:14px;font-weight:400}.game-layout{grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr);align-items:start;gap:16px;width:100%;display:grid}.left-panel{justify-content:flex-end;display:flex}.center-column{flex-direction:column;gap:12px;width:min-content;display:flex}.board-wrap{border-radius:var(--radius);background:radial-gradient(ellipse 90% 70% at 50% 0%, #202a37 0%, var(--surface-2) 70%);border:1px solid var(--border-strong);box-shadow:var(--shadow-2), inset 0 0 50px #00000073;padding:12px;position:relative}.drag-ghost{--hex-size:30px;z-index:300;pointer-events:none;filter:drop-shadow(0 6px 10px #0009);position:fixed;transform:translate(-50%,-50%)scale(1.1)}.game-code-watermark{color:#ffffff2e;letter-spacing:.12em;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:100;font-family:ui-monospace,monospace;font-size:11px;position:fixed;top:10px;right:14px}.action-error-toast{color:#fff;cursor:pointer;z-index:200;background:#b42828f2;border-radius:6px;max-width:90vw;padding:10px 16px;font-size:13px;animation:.18s ease-out toast-in;position:fixed;top:14px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0006}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}.winner-overlay{z-index:10;background:#000000bf;border-radius:6px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.unit-info{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-1);width:120px;box-shadow:var(--shadow-1);flex-direction:column;gap:8px;min-height:130px;padding:12px;font-size:12px;display:flex}.unit-info--empty{color:var(--text-faint);text-align:center;justify-content:center;align-items:center;font-style:italic}.unit-info--p1{border-color:var(--p1-border)}.unit-info--p2{border-color:var(--p2-border)}.unit-info-header{align-items:center;gap:6px;display:flex}.unit-info-glyph{font-size:20px;line-height:1}.unit-info-name{text-transform:capitalize;font-size:13px;font-weight:600}.unit-info-hp-bar{background:var(--surface-3);border-radius:2px;height:4px;overflow:hidden}.unit-info-hp-fill{border-radius:2px;height:100%;transition:width .15s}.unit-info--p1 .unit-info-hp-fill{background:var(--p1)}.unit-info--p2 .unit-info-hp-fill{background:var(--p2)}.unit-info-stats{grid-template-columns:auto 1fr;gap:4px 10px;display:grid}.stat-label{color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;align-self:center;font-size:10px}.stat-val{color:var(--text);font-size:12px;font-weight:600}.log{scrollbar-width:thin;scrollbar-color:var(--border-strong) var(--surface-1);flex-direction:column;gap:3px;max-height:168px;font-size:13px;display:flex;overflow-y:auto}.log::-webkit-scrollbar{width:6px}.log::-webkit-scrollbar-track{background:var(--surface-1);border-radius:3px}.log::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}.log-entry{border-radius:var(--radius-sm);background:var(--surface-1);border-left:3px solid var(--border-strong);opacity:.85;align-items:center;gap:8px;padding:4px 10px;display:flex}.log-entry--p1{border-left-color:var(--p1)}.log-entry--p2{border-left-color:var(--p2)}.log-entry:first-child{opacity:1}.log-attacker{font-weight:600}.log-arrow{color:var(--text-faint);font-size:11px}.log-defender{color:var(--text-dim)}.log-damage{color:var(--p2-bright);margin-left:auto;font-weight:700}.log-heal{color:#5cc98f;margin-left:auto;font-weight:700}.log-killed{font-size:15px}.mp-energy,.mp-hand{color:var(--accent);margin-left:5px;font-size:12px;font-weight:700}.mp-hand{color:var(--text-dim)}.hand-panel{flex-direction:column;gap:6px;width:100%;display:flex}.hand-panel-head{text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);justify-content:space-between;align-items:center;font-size:11px;display:flex}.deck-count{font-weight:600}.hand-cards{flex-wrap:wrap;align-items:flex-end;gap:10px;padding:8px 8px 4px;display:flex}.hand-empty{color:var(--text-faint);padding:6px 0;font-size:12px}