*{box-sizing:border-box}:root{--hud-pad: clamp(8px, 2.5vw, 16px);--meter-w: clamp(142px, 29vw, 250px);--card-w: clamp(128px, 27vw, 172px);--callout-size: clamp(1.05rem, 4.5vw, 1.7rem);--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px)}body{margin:0;background:#070a12;color:#e6edf7;font:16px/1.35 Segoe UI,system-ui,sans-serif;overflow:hidden}button{border:1px solid #8192a3;border-radius:6px;background:#fff;padding:9px 12px;font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #fff;outline-offset:3px}canvas{touch-action:none;display:block}.stage{position:fixed;inset:0;background:#070a12;overflow:hidden}.viewport{position:absolute;inset:0}.viewport>div{height:100%}.webgl-status{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:var(--hud-pad);background:#070a12dd;color:#cbd5e1;text-align:center}.boot{display:grid;place-items:center;height:100%;color:#8fa3c8;letter-spacing:.18em;font-size:.9rem;padding:0 var(--hud-pad)}.hud{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;padding:max(var(--hud-pad),var(--safe-t)) max(var(--hud-pad),var(--safe-r)) max(var(--hud-pad),var(--safe-b)) max(var(--hud-pad),var(--safe-l));gap:8px;font-variant-numeric:tabular-nums}.hud>*{pointer-events:auto}.hud-top{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(6px,2vw,12px);align-items:start}.meter{width:var(--meter-w);padding:3px 1px;color:#aebdd3;transition:color .2s}.meter-right{margin-left:auto;text-align:right}.meter-active{color:#fff}.meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:5px}.meter-right .meter-head{flex-direction:row-reverse}.meter-name{font-weight:800;letter-spacing:.14em;font-size:clamp(.62rem,1.8vw,.76rem)}.meter-value{font-weight:900;font-size:clamp(.84rem,2.6vw,1rem);color:#7dd3fc;display:inline-flex;align-items:center;gap:3px}.meter-value svg{width:13px;height:13px}.meter-value small{display:none}.meter-hype{display:flex;align-items:center;gap:2px;color:#fbbf24;font-size:clamp(.62rem,1.8vw,.72rem);font-weight:800;white-space:nowrap}.meter-hype svg{width:12px;height:12px}.meter-bottom{display:flex;align-items:center;margin-top:3px;min-width:0}.meter-right .meter-bottom{justify-content:flex-end}.meter-final{min-width:0;display:flex;align-items:center;gap:4px;padding:0;border:0;background:transparent;color:#8292aa;font-size:clamp(.5rem,1.5vw,.61rem);letter-spacing:.04em;white-space:nowrap;overflow:hidden}.meter-final svg{width:13px;height:13px;flex:0 0 auto}.meter-final span{overflow:hidden;text-overflow:ellipsis}.meter-final strong{color:#fff;font-size:.52rem;letter-spacing:.08em}button.meter-final{min-height:48px;padding:5px 0;color:#fff;cursor:pointer;font-weight:900;text-decoration:underline;text-decoration-color:#a855f7;text-underline-offset:4px;animation:finalReady .6s cubic-bezier(.16,1,.3,1) both}button.meter-final:hover{color:#d8b4fe}.hud-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}.hud-cue{max-width:min(80vw,360px);color:#dbeafe;font-size:clamp(.62rem,1.9vw,.78rem);font-weight:900;letter-spacing:.07em;line-height:1.2;text-shadow:0 2px 14px #000}.hud-cue.urgent{color:#fff}.timer{width:min(124px,42vw);height:4px;border-radius:99px;background:#1d2740;overflow:hidden}.timer-fill{height:100%;background:linear-gradient(90deg,#fbbf24,#ef4444);transform-origin:left center}.flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,#ffffff55,transparent 60%);opacity:0}@keyframes flash{0%{opacity:1}to{opacity:0}}.speedlines{position:absolute;inset:-15%;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 0deg,#e6edf7 0deg 1.1deg,transparent 1.1deg 9deg)}@keyframes speedlines{0%{opacity:0;transform:scale(1.5)}18%{opacity:.5}to{opacity:0;transform:scale(.94)}}.callouts{display:flex;flex-direction:column;align-items:center;pointer-events:none}.callout{--dx:0;transform:translate(var(--dx));font-weight:900;letter-spacing:.08em;font-size:var(--callout-size);text-shadow:0 3px 22px #000;animation:pop .25s cubic-bezier(.16,1,.3,1),calloutFade .5s 2.1s forwards}.callout.side-left{--dx:clamp(-140px,-18vw,-60px)}.callout.side-right{--dx:clamp(60px,18vw,140px)}.tone-aura{color:#7dd3fc}.tone-counter{color:#fbbf24}.tone-fail{color:#f87171}.tone-final{color:#c084fc}.tone-combo{color:#4ade80}.tone-info{color:#cbd5e1}.hand{display:flex;flex-direction:column;gap:8px;align-items:center}.hand-track{display:flex;gap:10px;justify-content:center;width:100%}.card{width:var(--card-w);min-height:clamp(92px,22vw,112px);flex:0 0 auto;display:flex;flex-direction:column;gap:5px;text-align:left;padding:clamp(7px,1.7vw,9px);border-radius:12px;border:1px solid transparent;background:#0b1120cc;color:#e6edf7;cursor:default;opacity:.42;transition:transform .16s cubic-bezier(.16,1,.3,1),opacity .16s,border-color .16s,box-shadow .16s}.card-playable{opacity:1;cursor:pointer;border-color:var(--accent);box-shadow:0 8px 24px #0008}.card-playable:hover{transform:translateY(-7px) scale(1.02)}.card-playable:focus-visible{transform:translateY(-5px)}.card-reserved{opacity:.72}.card-unavailable{opacity:.42}.card-top{display:flex;justify-content:space-between;align-items:center;gap:4px}.card-kind{display:flex;align-items:center;gap:3px;min-width:0;font-size:.49rem;font-weight:800;letter-spacing:.06em;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-kind b{font-size:.62rem;font-weight:700;color:#aebdd3}.card-kind svg{width:11px;height:11px;flex:0 0 auto}.card-yields{display:flex;align-items:center;gap:5px}.card-yield{display:flex;align-items:center;gap:2px;font-size:.7rem;font-weight:900;color:#7dd3fc}.card-yield svg{width:12px;height:12px}.card-yield-hype{color:#fbbf24}.card-name{font-size:clamp(.76rem,2.2vw,.91rem);font-weight:800;line-height:1.12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-detail{margin-top:auto;display:flex;align-items:center;gap:3px;color:#a7f3d0;font-size:.5rem;font-weight:900;letter-spacing:.04em;line-height:1.1}.card-risk{color:#fca5a5}.card-state{color:#d8b4fe}.card-detail svg{width:11px;height:11px}.hand-side{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.primary{border:none;border-radius:10px;padding:9px 16px;min-height:48px;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;font-weight:900;letter-spacing:.1em;background:linear-gradient(135deg,#a855f7,#3b82f6);color:#fff;box-shadow:0 8px 26px #a855f755}.primary small{font-weight:600;letter-spacing:.03em;opacity:.85;font-size:.62rem}.ghost{background:#0d1524cc;border:1px solid #2c3b57;color:#b9c8de;font-size:.72rem;letter-spacing:.1em;padding:8px 14px;min-height:48px;display:inline-flex;align-items:center;border-radius:8px}.endcard{margin:auto;text-align:center;width:min(92vw,420px);background:#0b1120e8;border:1px solid #263349;border-radius:16px;padding:clamp(18px,4vw,26px) clamp(20px,5vw,34px);box-shadow:0 20px 70px #000a}.endcard h2{margin:0 0 6px;font-size:clamp(1.5rem,6vw,2.1rem);letter-spacing:.1em;color:#d8b4fe}.endcard p{margin:0 0 16px;color:#9fb3d1;font-size:.85rem}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@keyframes finalReady{0%{transform:scale(.82);opacity:.4}to{transform:scale(1);opacity:1}}@keyframes calloutFade{to{opacity:0;transform:translate(var(--dx)) translateY(-16px) scale(.92)}}@keyframes pop{0%{transform:translate(var(--dx)) scale(.55);opacity:0}to{transform:translate(var(--dx)) scale(1);opacity:1}}@media (max-width: 700px){:root{--card-w:auto}.hud-top{grid-template-columns:1fr 1fr}.hud-center{grid-column:1/-1;grid-row:2}.meter{width:100%}.hud-cue{max-width:88vw}.hand-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0}.card{width:auto;min-width:0;min-height:148px;flex:1 1 0;padding:8px}.card-kind{font-size:.43rem;gap:2px}.card-kind svg{width:9px;height:9px}.card-kind b{font-size:.5rem}.card-yields{gap:2px}.card-yield{font-size:.61rem}.card-yield svg{width:10px;height:10px}.card-name{font-size:clamp(.68rem,3.1vw,.82rem)}.card-detail{font-size:.43rem}}@media (max-height: 440px){.hud{gap:4px}button.meter-final{min-height:48px}.hand{gap:4px}}main{min-height:100vh;padding:20px;display:grid;grid-template-rows:auto auto auto 1fr;gap:12px;background:#f5f7fa;color:#17212b;overflow:auto}main h1{margin:0;font-size:1.5rem}main p{margin:.3rem 0}main .controls{display:flex;gap:8px;flex-wrap:wrap}main .hud{position:static;display:block;background:#e4ebf1;padding:9px;border-radius:6px;color:#17212b;inset:auto;pointer-events:auto}main .canvas{position:relative;min-height:400px;border:1px solid #b8c5d0;border-radius:8px;overflow:hidden}main .canvas>div{height:100%}