:root{--color-bg:#0f1115;--color-panel:#1a1d24;--color-border:#2e323c;--color-text:#e8e9ec;--color-text-dim:#9aa0ac;--color-accent:#4f8cff;--color-accent-hover:#6ea0ff;--color-danger:#ff5c5c;--color-success:#4fd67a;--hud-plate-top:#23262f;--hud-plate-bottom:#14151b;--hud-gold:#c9a441;--hud-gold-dim:#c9a44166;--hud-gold-bright:#f0cf6b;--hud-hp:#d1483f;--hud-mana:#4f8cff;--hud-ink:#f2ead5;--hud-ink-dim:#a9a496;--font-display:"Cinzel", "Iowan Old Style", Georgia, serif;--font-body:"Inter", system-ui, "Segoe UI", Roboto, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--color-text);background:var(--color-bg);font:16px/1.4 var(--font-body)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}button{font:inherit;cursor:pointer}.app-placeholder{flex-direction:column;justify-content:center;align-items:center;gap:.5rem;height:100%;display:flex}.menu,.lobby{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;max-width:320px;height:100%;margin:0 auto;display:flex}.menu label{flex-direction:column;gap:.25rem;width:100%;display:flex}.menu input,.lobby input{border:1px solid var(--color-border);background:var(--color-panel);color:var(--color-text);border-radius:4px;padding:.5rem}.menu button,.lobby button{border:1px solid var(--color-border);background:var(--color-panel);color:var(--color-text);border-radius:4px;padding:.5rem 1rem}.menu button:hover:not(:disabled),.lobby button:hover:not(:disabled){border-color:var(--color-accent)}.menu button:disabled{opacity:.5;cursor:default}.join-row{gap:.5rem;width:100%;display:flex}.badge-local{color:var(--color-text-dim);border:1px dashed var(--color-border);border-radius:4px;padding:.5rem;font-size:.85rem}.error{color:var(--color-danger)}.room-code{font-family:var(--font-display);letter-spacing:.35rem;color:var(--hud-gold-bright);text-shadow:0 0 18px #c9a44159;font-size:2.5rem;font-weight:700}.lobby h1,.menu h1{font-family:var(--font-display);letter-spacing:.06rem}.lobby-actions{gap:.5rem;display:flex}.copy-feedback{min-height:1.2rem;color:var(--color-success);font-size:.85rem}.resume-link{border:1px solid var(--hud-gold-dim);background:linear-gradient(155deg, var(--hud-plate-top), var(--hud-plate-bottom));width:100%;color:var(--hud-ink);border-radius:4px;padding:.6rem 1rem}.resume-link:hover:not(:disabled){border-color:var(--hud-gold)}.resume-code{font-family:var(--font-display);color:var(--hud-gold-bright);letter-spacing:.08rem}.game-screen-text{max-width:720px;margin:0 auto;padding:1rem}.game-screen-text ul{padding-left:1rem}.game-screen-text li{margin-bottom:.25rem}.game-screen{background:#05060a;position:fixed;inset:0;overflow:hidden}.game-canvas{display:block}.hud-layer{pointer-events:none;font-family:var(--font-body);position:absolute;inset:0}.hud-layer>*{pointer-events:auto}.hud-plate{background:linear-gradient(155deg, var(--hud-plate-top), var(--hud-plate-bottom));border:1px solid #0009;border-radius:4px;flex-direction:column;gap:.35rem;min-width:190px;padding:.55rem .8rem;transition:box-shadow .25s,border-color .25s;display:flex;position:absolute;left:clamp(.6rem,2vw,1.4rem);box-shadow:0 10px 24px #00000080,inset 0 1px #ffffff0d}.hud-plate:before,.hud-plate:after{content:"";border:2px solid var(--hud-gold-dim);width:12px;height:12px;transition:border-color .25s;position:absolute}.hud-plate:before{border-bottom:none;border-right:none;top:-2px;left:-2px}.hud-plate:after{border-top:none;border-left:none;bottom:-2px;right:-2px}.hud-plate.is-active{box-shadow:0 10px 24px #00000080, 0 0 0 1px var(--hud-gold-dim), inset 0 1px 0 #ffffff14}.hud-plate.is-active:before,.hud-plate.is-active:after{border-color:var(--hud-gold)}.hud-plate--top{top:clamp(.6rem,2vw,1.4rem)}.hud-plate--bottom{bottom:clamp(.6rem,2vw,1.4rem)}.hud-plate-row{align-items:center;gap:.5rem;display:flex}.hud-name{font-family:var(--font-display);letter-spacing:.04rem;color:var(--hud-ink);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;font-weight:600;overflow:hidden}.hud-turn-dot{background:var(--hud-gold-bright);width:7px;height:7px;box-shadow:0 0 8px 2px var(--hud-gold-bright);border-radius:50%;animation:1.4s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.35}}.hp-token{background:radial-gradient(circle at 35% 30%, #ef6a5f, var(--hud-hp) 70%);clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);flex:none;justify-content:center;align-items:center;width:26px;height:26px;display:inline-flex;box-shadow:0 0 6px #d1483f99}.hp-value{font-family:var(--font-body);color:#1a0906;font-size:.75rem;font-weight:800}.mana-crystals{flex-wrap:wrap;align-items:center;gap:3px;display:inline-flex}.mana-crystal{clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);background:#262a34;width:9px;height:9px;box-shadow:inset 0 0 0 1px #ffffff0f}.mana-crystal.filled{background:radial-gradient(circle at 35% 30%, #a9c8ff, var(--hud-mana) 75%);box-shadow:0 0 5px 1px #4f8cffbf}.mana-label{font-variant-numeric:tabular-nums;color:var(--hud-ink-dim);margin-left:.15rem;font-size:.75rem}.hud-deck{color:var(--hud-ink-dim);white-space:nowrap;margin-left:auto;font-size:.7rem}.room-badge{background:linear-gradient(155deg, var(--hud-plate-top), var(--hud-plate-bottom));border:1px solid var(--hud-gold-dim);color:var(--hud-ink);font-family:var(--font-body);border-radius:4px;align-items:center;gap:.4rem;padding:.35rem .6rem;display:flex;position:absolute;top:clamp(.6rem,2vw,1.4rem);right:clamp(.6rem,2vw,1.4rem);box-shadow:0 6px 16px #0006}.room-badge:hover{border-color:var(--hud-gold)}.room-badge-label{letter-spacing:.08rem;text-transform:uppercase;color:var(--hud-ink-dim);font-size:.6rem}.room-badge-code{font-family:var(--font-display);letter-spacing:.12rem;color:var(--hud-gold-bright);font-size:.85rem;font-weight:700}.room-badge-hint{color:var(--hud-ink-dim);font-size:.65rem}.room-badge.is-copied .room-badge-hint{color:var(--color-success)}.leave-button{background:linear-gradient(155deg, var(--hud-plate-top), var(--hud-plate-bottom));color:var(--hud-ink-dim);font-family:var(--font-body);border:1px solid #0009;border-radius:4px;align-items:center;gap:.4rem;padding:.35rem .6rem;font-size:.75rem;font-weight:600;transition:color .2s,border-color .2s;display:flex;position:absolute;top:calc(clamp(.6rem,2vw,1.4rem) + 2.9rem);right:clamp(.6rem,2vw,1.4rem);box-shadow:0 6px 16px #0006}.leave-button svg{flex:none;width:15px;height:15px}.leave-button:hover{color:var(--hud-hp);border-color:#d1483f80}.abandon-notice{background:linear-gradient(155deg, var(--hud-plate-top), var(--hud-plate-bottom));border:1px solid var(--hud-hp);max-width:min(70vw,420px);color:var(--hud-ink);text-align:center;pointer-events:none;border-radius:4px;padding:.5rem 1.2rem;font-size:.85rem;position:absolute;top:clamp(.6rem,2vw,1.4rem);left:50%;transform:translate(-50%);box-shadow:0 6px 18px #00000080}.turn-banner{background:linear-gradient(155deg, var(--hud-plate-top), var(--hud-plate-bottom));clip-path:polygon(4% 0%,96% 0%,100% 50%,96% 100%,4% 100%,0% 50%);border-top:1px solid var(--hud-gold-dim);border-bottom:1px solid var(--hud-gold-dim);font-family:var(--font-display);letter-spacing:.05rem;color:var(--hud-ink);pointer-events:none;padding:.45rem 2rem;font-size:.85rem;animation:1.6s forwards turn-banner-fade;position:absolute;top:clamp(3.4rem,8vw,4.5rem);left:50%;transform:translate(-50%)}.turn-banner.mine{color:var(--hud-gold-bright)}@keyframes turn-banner-fade{0%{opacity:0;transform:translate(-50%,-8px)}15%{opacity:1;transform:translate(-50%)}80%{opacity:1}to{opacity:0}}.end-turn{min-width:128px;min-height:48px;color:var(--hud-ink-dim);font-family:var(--font-display);letter-spacing:.08rem;text-transform:uppercase;background:linear-gradient(155deg,#2a2e38,#16181e);border:1px solid #0009;border-radius:999px;padding:0 1.2rem;font-size:.8rem;font-weight:600;transition:box-shadow .2s,color .2s,transform .1s;position:absolute;bottom:clamp(.6rem,2vw,1.4rem);right:clamp(.6rem,2vw,1.4rem);box-shadow:0 10px 20px #00000080,inset 0 1px #ffffff0d}.end-turn.is-ready{color:var(--hud-gold-bright);box-shadow:0 10px 20px #00000080, 0 0 0 2px var(--hud-gold), 0 0 18px #c9a44173}.end-turn.is-ready:hover{transform:translateY(-1px)}.end-turn:disabled{cursor:default;opacity:.6}.hint{text-align:center;color:var(--hud-ink-dim);white-space:nowrap;pointer-events:none;font-size:.78rem;position:absolute;bottom:calc(clamp(.6rem,2vw,1.4rem) + 4.4rem);left:50%;transform:translate(-50%)}@media (width<=640px){.hud-plate{min-width:150px;padding:.4rem .6rem}.hud-deck{display:none}.hint{white-space:normal;max-width:90vw;font-size:.7rem}.end-turn{min-width:96px;min-height:44px;font-size:.7rem}.abandon-notice{max-width:80vw;padding:.4rem .8rem;font-size:.72rem}.leave-button span{display:none}}.end-overlay{background:radial-gradient(#0a0b0fbf,#05060af2);flex-direction:column;justify-content:center;align-items:center;gap:1.4rem;display:flex;position:absolute;inset:0}.end-title{font-family:var(--font-display);letter-spacing:.08rem;margin:0;font-size:clamp(2.2rem,6vw,3.5rem)}.end-title.win{color:var(--hud-gold-bright);text-shadow:0 0 30px #c9a44180}.end-title.lose{color:var(--hud-hp);text-shadow:0 0 30px #d1483f66}.end-actions{gap:.75rem;display:flex}.hud-button{border:1px solid var(--color-border);background:var(--color-panel);color:var(--color-text);font-family:var(--font-body);border-radius:4px;padding:.6rem 1.4rem;font-weight:600}.hud-button:hover{border-color:var(--hud-gold-dim)}.hud-button--gold{border-color:var(--hud-gold);color:var(--hud-gold-bright)}@media (prefers-reduced-motion:reduce){.turn-banner{opacity:1;animation:none}.hud-turn-dot{animation:none}}