:root{--ink: #0b0e1d;--night: #101735;--red: #d43d2e;--red-deep: #8e2431;--cream: #f4e5c4;--mustard: #eaa93b;--slab: "Rockwell Extra Bold", "Rockwell", "Roboto Slab", "American Typewriter", "Courier New", Georgia, serif;--serif: "Didot", "Bodoni 72", "Bodoni MT", "Hoefler Text", Georgia, "Times New Roman", serif;color-scheme:dark}html,body{background:var(--ink);color:var(--cream);font-family:var(--slab)}.stage{background:var(--night)}.stage>canvas{z-index:0}.hud,.title,.card,.pause{position:absolute;inset:0;pointer-events:none;z-index:2}.hud{bottom:auto;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(14px + var(--safe-t)) calc(14px + var(--safe-r)) 0 calc(14px + var(--safe-l))}.chip{pointer-events:auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#0b0e1d8c;border:1.5px solid rgba(244,229,196,.55);color:var(--cream);box-shadow:inset 0 0 0 3px #0b0e1d80;text-decoration:none;transition:transform .15s ease,background .2s}.chip:active{transform:scale(.92);background:#d43d2e99}.chip svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.chip .spk{fill:currentColor;stroke-width:1.5}.mute .x{display:none}.mute[aria-pressed=true] .x{display:inline}.mute[aria-pressed=true] .wave{display:none}.score{font-size:52px;line-height:1;font-weight:900;letter-spacing:.02em;color:var(--cream);text-shadow:3px 3px 0 var(--red),5px 5px 0 rgba(11,14,29,.85);margin-top:2px;transition:opacity .3s ease;font-variant-numeric:tabular-nums}.score.hide{opacity:0}.score.bump{animation:bump .45s cubic-bezier(.2,1.6,.4,1)}@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.35) rotate(-4deg)}to{transform:scale(1)}}.title{display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(64px + var(--safe-t)) 20px 0;transition:opacity .45s ease,transform .45s ease}.title.gone{opacity:0;transform:translateY(-24px)}.title .bill{margin:0;font:italic 600 13px/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--mustard)}.title h1{margin:8px 0 4px;font-weight:900;font-size:clamp(54px,17vw,84px);line-height:.88;letter-spacing:.01em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;transform:rotate(-3deg)}.title .h1a{color:var(--cream);text-shadow:3px 3px 0 var(--red),6px 6px 0 var(--ink)}.title .h1b{color:var(--red);text-shadow:3px 3px 0 var(--cream),6px 6px 0 var(--ink);margin-left:.6em}.title .tag{margin:10px 0 0;font:italic 16px/1.2 var(--serif);color:var(--cream);opacity:.9}.title .go{margin:0;position:absolute;left:0;right:0;bottom:calc(18% + var(--safe-b));font-size:15px;letter-spacing:.28em;text-transform:uppercase;color:var(--cream);display:flex;align-items:center;justify-content:center;gap:10px;animation:breathe 1.8s ease-in-out infinite}.title .go .dot{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px #f4e5c4b3}@keyframes breathe{50%{opacity:.55;transform:scale(.97)}}.card{display:flex;justify-content:center;align-items:flex-start;padding:calc(max(44px,9vh) + var(--safe-t)) 24px 0}.ticket{position:relative;width:min(300px,82vw);padding:34px 22px 20px;text-align:center;color:var(--ink);background:radial-gradient(circle at 0 50%,transparent 13px,var(--cream) 14px) left / 51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 13px,var(--cream) 14px) right / 51% 100% no-repeat;filter:drop-shadow(5px 6px 0 var(--red-deep)) drop-shadow(0 18px 30px rgba(0,0,0,.45));transform:rotate(-2deg);animation:ticketIn .55s cubic-bezier(.2,1.4,.4,1) both}.ticket:before{content:"";position:absolute;inset:8px;border:2px dashed rgba(142,36,49,.55);border-radius:4px;pointer-events:none}@keyframes ticketIn{0%{transform:translateY(40px) rotate(6deg) scale(.85);opacity:0}}.ticket p{margin:0}.ticket .lbl{font:italic 600 13px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--red-deep)}.ticket .big{font-size:88px;line-height:1;font-weight:900;margin:4px 0 2px;color:var(--red);text-shadow:3px 3px 0 var(--ink);font-variant-numeric:tabular-nums}.ticket .best{font-size:16px;letter-spacing:.14em;text-transform:uppercase}.ticket .best b{font-size:22px;margin-left:6px}.ticket .again{margin-top:16px;padding-top:12px;border-top:2px solid rgba(11,14,29,.2);font-size:13px;letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink)}.ticket .again svg{width:20px;height:20px;fill:none;stroke:var(--red);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:spin 2.4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.ticket .ribbon{position:absolute;top:-16px;left:50%;transform:translate(-50%) rotate(-4deg);white-space:nowrap;background:var(--mustard);color:var(--ink);font-size:15px;letter-spacing:.2em;text-transform:uppercase;padding:7px 16px;box-shadow:3px 3px 0 var(--ink);animation:pop .6s .35s cubic-bezier(.2,1.8,.4,1) both}@keyframes pop{0%{transform:translate(-50%) rotate(-4deg) scale(0)}}.toast{position:absolute;z-index:2;pointer-events:none;left:50%;top:calc(112px + var(--safe-t));margin:0;white-space:nowrap;background:var(--mustard);color:var(--ink);font-size:15px;letter-spacing:.2em;text-transform:uppercase;padding:7px 16px;box-shadow:3px 3px 0 var(--ink),6px 6px 0 var(--red-deep);transform:translate(-50%) rotate(-3deg);animation:toastIn 2s cubic-bezier(.2,1.6,.4,1) both}@keyframes toastIn{0%{transform:translate(-50%) rotate(-3deg) scale(0);opacity:0}15%{transform:translate(-50%) rotate(-3deg) scale(1);opacity:1}85%{opacity:1}to{transform:translate(-50%) rotate(-3deg) translateY(-8px);opacity:0}}.pause{display:grid;place-items:center;background:#0b0e1d99;text-align:center}.pause p{font-size:28px;letter-spacing:.2em;text-transform:uppercase;margin:0}.pause small{font:italic 15px/2 var(--serif);letter-spacing:.1em;text-transform:none}@media(prefers-reduced-motion:reduce){.title .go,.ticket .again svg{animation:none}.ticket,.ticket .ribbon,.score.bump{animation-duration:.01s}.toast{animation:none}}@media(min-aspect-ratio:1/1.95){.title{padding-top:calc(54px + var(--safe-t))}.title h1{flex-direction:row;font-size:clamp(40px,12.5vw,58px);gap:.08em;transform:rotate(-2deg)}.stage .title h1{font-size:min(12.5vw,58px,7vh)}.title .h1b{margin-left:0}.title .tag{margin-top:6px;font-size:14px}}
