:root{color-scheme:dark;--void: #0a0714;--void-lift: #160f28;--cream: #f6f0ff;--muted: #9b90bd;--glow: #8f7ad6;--display: "Grandstander", system-ui, sans-serif;--body: "Nunito", system-ui, sans-serif;--radius: 16px;--radius-lg: 26px;--accent: #c4562f;--accent-deep: #8f3a1d;--on-accent: #ffffff;--card-display: var(--display)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:radial-gradient(120% 70% at 50% 8%,var(--void-lift) 0%,var(--void) 62%),var(--void);color:var(--cream);font-family:var(--body);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--glow);outline-offset:3px}#app{height:100dvh;display:flex;flex-direction:column;align-items:center;max-width:30rem;margin:0 auto;padding:0 .9rem env(safe-area-inset-bottom)}.brand{width:100%;text-align:center;padding:1.1rem 0 .2rem;flex:none}.brand__name{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,7.5vw,2.3rem);letter-spacing:-.015em;line-height:1}.brand__name em{font-style:normal;color:var(--glow)}.brand__line{margin:.3rem 0 0;font-size:.82rem;color:var(--muted)}.stage{position:relative;width:100%;flex:1 1 auto;min-height:0;touch-action:pan-y;cursor:grab}.stage--held{cursor:grabbing}.stage canvas{display:block;width:100%;height:100%}.hint{position:absolute;left:50%;bottom:.1rem;transform:translate(-50%);font-size:.76rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;pointer-events:none;transition:opacity .4s ease}.hint--gone{opacity:0}.card{width:100%;flex:none;display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:.2rem 0 .5rem;min-height:11.4rem}.card__name{margin:0;width:100%;font-family:var(--card-display);font-size:clamp(1.45rem,6.6vw,2rem);line-height:1.05;text-align:center;color:var(--cream)}.card__line{margin:0;font-size:.92rem;color:var(--muted);text-align:center;width:100%;max-width:22rem;min-height:2.4em;text-wrap:balance}.card__state{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);min-height:1.1em}.card--fade .card__name,.card--fade .card__line,.card--fade .card__state{opacity:0}.card__name,.card__line,.card__state{transition:opacity .15s ease}.play{display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:var(--radius);padding:.78rem 1.9rem;font-family:var(--display);font-weight:800;font-size:1.04rem;letter-spacing:.01em;background:var(--accent);color:var(--on-accent);box-shadow:0 4px 0 var(--accent-deep);cursor:pointer;text-decoration:none;transition:transform 90ms ease,box-shadow 90ms ease,background .22s ease}.play:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep)}.play--off{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 2px #3a3156;cursor:default}.play--off:active{transform:none;box-shadow:inset 0 0 0 2px #3a3156}.rail{display:flex;align-items:center;gap:.55rem;padding:.1rem 0 .9rem;flex:none}.pip{width:.62rem;height:.62rem;padding:0;border:0;border-radius:50%;background:#3a3156;cursor:pointer;transition:background .2s ease,transform .2s ease}.pip--on{transform:scale(1.35)}.pip--soon{box-shadow:inset 0 0 0 2px #3a3156;background:transparent}.pip--soon.pip--on{background:transparent}@media (max-height: 700px){.brand{padding:.6rem 0 .1rem}.brand__line{font-size:.76rem}.card{min-height:9.6rem;gap:.3rem}.card__line{min-height:1.3em;font-size:.86rem}.play{padding:.62rem 1.6rem}.rail{padding:0 0 .6rem}}@media (prefers-reduced-motion: reduce){.pip,.play,.hint,.card__name,.card__line,.card__state{transition:none}}.legal{flex:none;display:flex;justify-content:center;gap:1.2rem;padding:.2rem 0 calc(.6rem + env(safe-area-inset-bottom));font-size:.72rem}.legal a{color:var(--muted);text-decoration:none}