*{box-sizing:border-box}:root{--hud-pad: clamp(8px, 2.5vw, 16px);--meter-w: clamp(128px, 34vw, 300px);--card-w: clamp(128px, 40vw, 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}canvas{touch-action:none;display:block}.stage{position:fixed;inset:0;background:#070a12;overflow:hidden}.viewport{position:absolute;inset:0}.viewport>div{height:100%}.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{background:linear-gradient(180deg,#111a2bd9,#0b1120d9);border:1px solid #1f2c44;border-radius:10px;padding:clamp(6px,1.6vw,9px) clamp(8px,2.2vw,12px);width:var(--meter-w);transition:border-color .2s,box-shadow .2s}.meter-right{margin-left:auto;text-align:right}.meter-active{border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f655,0 6px 22px #3b82f622}.meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.meter-right .meter-head{flex-direction:row-reverse}.meter-name{font-weight:800;letter-spacing:.16em;font-size:clamp(.68rem,2vw,.82rem)}.meter-value{font-weight:800;font-size:clamp(.9rem,3vw,1.15rem);color:#7dd3fc;display:inline-flex;align-items:baseline;gap:5px}.meter-recoveries{font-size:.62rem;font-weight:700;letter-spacing:.02em;color:#4ade80}.meter-bar{height:7px;border-radius:99px;background:#1d2740;overflow:hidden;margin:6px 0}.meter-bar>i{display:block;height:100%;background:linear-gradient(90deg,#3b82f6,#a855f7);transition:width .35s cubic-bezier(.2,.9,.2,1)}.meter-right .meter-bar{transform:scaleX(-1)}.meter-hype{display:flex;gap:3px;align-items:center;font-size:clamp(.72rem,2.4vw,.9rem);flex-wrap:wrap}.meter-right .meter-hype{flex-direction:row-reverse}.flame{filter:grayscale(1);opacity:.28}.flame.on{filter:none;opacity:1}.meter-ready{margin:0 6px;font-size:.6rem;font-weight:800;letter-spacing:.1em;color:#fbbf24;animation:pulse 1s infinite}.meter-final{margin-top:5px;font-size:clamp(.58rem,1.8vw,.68rem);letter-spacing:.06em;color:#93a3bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}.hud-answering{font-size:clamp(.62rem,2.2vw,.72rem);letter-spacing:.06em;color:#9fb3d1;max-width:38ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud-banner{font-size:clamp(1.05rem,4.4vw,1.5rem);font-weight:900;letter-spacing:.1em;color:#c9d8ee;text-shadow:0 2px 18px #000}.hud-banner.urgent{color:#fff;animation:pulse .7s infinite}.timer{width:min(210px,60vw);height:6px;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}}.callouts{display:flex;flex-direction:column;align-items:center;gap:6px;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(.2,1.5,.4,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(96px,26vw,126px);flex:0 0 auto;display:flex;flex-direction:column;gap:5px;text-align:left;padding:clamp(8px,2vw,11px);border-radius:12px;border:1px solid #24324b;background:linear-gradient(180deg,#131c2ef2,#0c1322f2);color:#e6edf7;cursor:default;opacity:.42;transition:transform .16s cubic-bezier(.2,1.4,.4,1),opacity .16s,border-color .16s,box-shadow .16s}.card-live{opacity:1;cursor:pointer;border-color:var(--accent);box-shadow:0 8px 26px #0009}.card-live:hover{transform:translateY(-9px) scale(1.03)}.card-top{display:flex;justify-content:space-between;align-items:center}.card-kind{font-size:.6rem;font-weight:800;letter-spacing:.1em;color:var(--accent)}.card-aura{font-size:.95rem;font-weight:900;color:#7dd3fc}.card-name{font-size:clamp(.82rem,2.6vw,.98rem);font-weight:800;line-height:1.15}.card-blurb{font-size:clamp(.62rem,2vw,.72rem);color:#a3b4cd;flex:1}.card-foot{font-size:.54rem;letter-spacing:.08em;color:#6b7f9e;text-transform:uppercase}.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.final{animation:pulse 1s infinite}.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;background:linear-gradient(90deg,#a855f7,#7dd3fc);-webkit-background-clip:text;background-clip:text;color:transparent}.endcard p{margin:0 0 16px;color:#9fb3d1;font-size:.85rem}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}@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){.hand-track{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;padding:2px 6px 6px;margin:0 -6px;-webkit-overflow-scrolling:touch}.hand-track::-webkit-scrollbar{display:none}.card{scroll-snap-align:center}}@media (max-height: 440px){.hud{gap:4px}.meter{padding:4px 8px}.meter-final{display:none}.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{min-height:400px;border:1px solid #b8c5d0;border-radius:8px;overflow:hidden}main .canvas>div{height:100%}