@font-face{font-family:Shoulders;src:url('/calendar/fonts/big-shoulders.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Hanken;src:url('/calendar/fonts/hanken-grotesk.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{--ink:#050608;--paper:#e8e4dc;--muted:#9a9a94;--amber:#ffa94d;--cyan:#6fd8ff;--line:rgba(232,228,220,.16);--display:Shoulders,'Arial Narrow',Impact,sans-serif;--body:Hanken,Arial,sans-serif;--gutter:clamp(18px,4vw,80px);--scorebar:44px}
*{box-sizing:border-box}
html{background:var(--ink);color-scheme:dark}
body{margin:0;min-height:100vh;padding-top:var(--scorebar);color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:-60px;z-index:100;padding:11px 16px;background:var(--amber);color:var(--ink);font-weight:700;text-decoration:none}
.skip-link:focus{top:calc(var(--scorebar) + 8px)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.eyebrow{margin:0;font:600 11px var(--body);letter-spacing:.22em;color:var(--amber)}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 9px var(--amber)}

/* The hall: the last frame of the film is the room. */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--ink) url('/arcade/assets/lounge-hall.jpg') center bottom/cover no-repeat;filter:blur(7px) brightness(.5) saturate(1.1);transform:scale(1.06)}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#050608e6 0%,#05060880 38%,#050608c9 100%)}

/* Intro film */
.intro{position:fixed;inset:0;z-index:80;background:#000;opacity:1;transition:opacity .9s ease,visibility .9s}
.intro[hidden]{display:none}
.intro.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0000004d 0,#0000 22%,#0000 70%,#00000099 100%);pointer-events:none}
.intro-controls{position:absolute;right:max(var(--gutter),env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom));display:flex;gap:10px}
.intro-button{min-height:44px;padding:0 22px;border:1px solid #e8e4dc66;border-radius:40px;background:#050608a6;backdrop-filter:blur(8px);font:600 11px var(--body);letter-spacing:.16em;text-transform:uppercase;transition:background .2s,border-color .2s}
.intro-button:hover{background:#050608e6;border-color:var(--amber)}
html.lounge-intro,html.lounge-intro body{overflow:hidden}
html:not(.lounge-intro) .intro:not(.is-leaving){display:none}
html.lounge-intro .intro[hidden]{display:block}
/* The film plays alone: the ticker and header wait for the hall. */
html.lounge-intro .score-ticker,html.lounge-intro .site-header{visibility:hidden}

/* Header and footer */
.site-header{position:fixed;top:var(--scorebar);left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gutter)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-mark{font:800 34px/1 var(--display);letter-spacing:.02em;text-decoration:none}
.brand-mark span{font-size:.4em;vertical-align:top;color:var(--amber)}
.brand-label{font:600 10px var(--body);letter-spacing:.24em;color:var(--muted)}
.replay{min-height:44px;padding:0 20px;border:1px solid var(--line);border-radius:40px;background:#050608a6;font:600 10px var(--body);letter-spacing:.16em;text-transform:uppercase}
.replay:hover{border-color:var(--amber)}
.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:26px var(--gutter) 34px;border-top:1px solid var(--line);font:600 10px var(--body);letter-spacing:.18em;color:var(--muted)}
.site-footer .brand-mark{font-size:26px;color:var(--paper)}
.motion-toggle{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:none}
.motion-toggle:hover{border-color:var(--amber)}
.toggle-icon{display:inline-block;width:11px;height:11px;border-left:3.5px solid currentColor;border-right:3.5px solid currentColor;vertical-align:middle}
[aria-pressed=true]>.toggle-icon{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}

/* Hall title */
main{padding:calc(76px + 1.5vw) var(--gutter) 56px;outline:0}
.hall-title{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 18px;max-width:var(--floor-w);margin:0 auto clamp(22px,3vh,40px)}
.hall-title h1{margin:0;font:800 clamp(44px,5.4vw,84px)/.9 var(--display);letter-spacing:.02em;text-transform:uppercase;text-shadow:0 0 50px #ffa94d33}
.hall-title .eyebrow{color:var(--muted);padding-bottom:.5em}

/* Cabinets: ten in the hall, two rows of five, sized so the whole hall fits the first screen on desktop.
   A cabinet is about 1.52 times as tall as it is wide and the chrome above it is about 215px; the max-width below solves for two rows in the viewport. */
main{--col-gap:clamp(14px,2vw,30px);--row-gap:clamp(26px,3.6vh,48px);--floor-w:min(var(--floor-cap,1320px),max(700px,calc((100svh - 215px - var(--row-gap)) / 3.04 * 5 + var(--col-gap) * 4)))}
.floor{list-style:none;margin:0 auto;padding:0;max-width:var(--floor-w);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--row-gap) var(--col-gap)}
.cab{position:relative;min-width:0;container-type:inline-size}
.cab::after{content:"";position:absolute;left:4%;right:4%;bottom:-16px;height:24px;background:radial-gradient(ellipse at center,#6fd8ff2e,#0000 70%);filter:blur(5px);pointer-events:none}
.cab-body{position:relative;display:flex;flex-direction:column;padding:0 5.5cqi;border-radius:3.5cqi 3.5cqi 2cqi 2cqi;background:linear-gradient(90deg,#0b0c0f,#16191f 14%,#101217 50%,#16191f 86%,#0b0c0f);border:1px solid #ffa94d66;box-shadow:inset 0 0 0 1px #000000a6,0 18px 40px #000000b3,0 0 26px #ffa94d14;transition:border-color .25s,box-shadow .25s,transform .25s}
/* Side trim, as on the cabinets in the film. */
.cab-body::before,.cab-body::after{content:"";position:absolute;top:16%;bottom:12%;width:1.5px;background:linear-gradient(180deg,#0000,#ffa94d99 20%,#ffa94d99 80%,#0000);pointer-events:none}
.cab-body::before{left:2cqi}.cab-body::after{right:2cqi}
.cab-marquee{position:relative;display:grid;place-items:center;aspect-ratio:3.6/1;margin:0 -5.5cqi 3.5cqi;border-radius:3.5cqi 3.5cqi 0 0;background:radial-gradient(ellipse at 50% 60%,#3a2410,#120c06 75%);border-bottom:1px solid #ffa94d73;box-shadow:inset 0 0 24px #ffa94d40,0 0 20px #ffa94d26;overflow:hidden}
.cab-marquee::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ffffff14,#0000 45%);pointer-events:none}
.cab-marquee span{padding:0 4cqi;text-align:center;font:800 14.5cqi/1 var(--display);letter-spacing:.06em;color:#ffe2b8;text-shadow:0 0 1.6cqi #ffa94d,0 0 7cqi #ff7a1a99;text-transform:uppercase;white-space:nowrap}
/* Idle marquees are unlit glass. */
.cab-idle .cab-marquee{background:radial-gradient(ellipse at 50% 60%,#17120c,#0a0806 75%);box-shadow:inset 0 0 18px #00000080;border-bottom-color:#ffa94d2e}
.cab-idle .cab-marquee span{color:#ffa94d47;text-shadow:none;letter-spacing:.14em}
.cab-screen{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:2.5cqi;background:#02070a;border:2.4cqi solid #050608;box-shadow:inset 0 0 0 1px #6fd8ff40,0 0 0 1px #ffffff12,0 0 22px #6fd8ff26;isolation:isolate}
.cab-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s}
.cab-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0000002e 2px 3px),radial-gradient(ellipse at 50% 40%,#0000 55%,#0000007a 100%),linear-gradient(160deg,#ffffff12,#0000 40%)}
a.cab-screen:hover img,a.cab-screen:focus-visible img{transform:scale(1.05);filter:brightness(1.12) saturate(1.08)}
a.cab-screen:focus-visible{outline-offset:3px}
.cab:has(a.cab-screen:hover) .cab-body,.cab:has(a:focus-visible) .cab-body{border-color:#ffa94dcc;box-shadow:inset 0 0 0 1px #000000a6,0 22px 46px #000000b3,0 0 38px #ffa94d40}
.cab:has(a.cab-screen:hover) .cab-marquee span{color:#fff1db;text-shadow:0 0 2cqi #ffb769,0 0 9cqi #ff7a1acc}
.cab-idle .cab-screen{background:radial-gradient(ellipse at 50% 50%,#04101a,#010306 80%)}
/* The signature is a mask, so each bounce can repaint it in a new colour. */
.sig{position:absolute;left:0;top:0;width:52%;aspect-ratio:900/335;background:var(--sig,#6fd8ff);-webkit-mask:url('/hq/signature.svg') center/contain no-repeat;mask:url('/hq/signature.svg') center/contain no-repeat;filter:drop-shadow(0 0 5px var(--sig,#6fd8ff));transition:background-color .35s;will-change:transform}
/* Control panel juts out past the cabinet, as a real deck does. */
.cab-deck{position:relative;display:flex;align-items:center;justify-content:center;gap:4.5cqi;height:15cqi;margin:4cqi -8.5cqi 0;padding-top:2cqi;background:linear-gradient(180deg,#2a2e36,#15171c 38%,#0b0c10);clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);border-bottom:1px solid #000}
.cab-deck .stick{position:relative;width:2.2cqi;height:6cqi;margin-right:5cqi;background:#3a3f48;border-radius:1cqi}
.cab-deck .stick::before{content:"";position:absolute;left:50%;top:-3.4cqi;width:6cqi;height:6cqi;margin-left:-3cqi;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8f80,#8f1f14)}
.cab-deck .btn{width:5.6cqi;height:5.6cqi;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3,#0000 55%),#2a2f38;border:1px solid #ffa94d66}
.cab-deck .btn:nth-of-type(2){background:radial-gradient(circle at 35% 30%,#fff5,#0000 55%),#c99a26}
.cab-deck .btn:nth-of-type(3){background:radial-gradient(circle at 35% 30%,#fff5,#0000 55%),#1f86b0}
.cab-base{position:relative;display:grid;place-items:center;min-height:30cqi;margin:0 -5.5cqi;padding:4cqi 4cqi 5cqi;background:linear-gradient(180deg,#0c0d11,#040405);border-radius:0 0 2cqi 2cqi}
/* Idle cabinets keep a coin door instead of a High Score button. */
.cab-idle .cab-base::before{content:"";width:30cqi;height:15cqi;border-radius:1.5cqi;border:1px solid #ffffff1a;background:linear-gradient(90deg,#0000 24%,#ffa94d40 24% 27%,#0000 27% 73%,#ffa94d40 73% 76%,#0000 76%) center 38%/100% 34% no-repeat,#0a0b0e}
.cab-score{display:inline-flex;align-items:center;justify-content:center;min-height:44px;width:100%;max-width:190px;padding:0 3cqi;border:1px solid #6fd8ff8c;border-radius:30px;font:700 clamp(10px,6cqi,13px) var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:#c4efff;background:#6fd8ff12;box-shadow:0 0 14px #6fd8ff26;transition:background .2s,box-shadow .2s,color .2s}
.cab-score:hover{background:#6fd8ff30;box-shadow:0 0 22px #6fd8ff66;color:#fff}

/* Power on: when the film hands over, the screens light up left to right. */
@keyframes power-on{0%,30%{opacity:0;filter:brightness(2.4)}60%{opacity:1;filter:brightness(1.8)}100%{opacity:1;filter:none}}
@keyframes scan-line{0%{opacity:1;transform:scaleX(0)}35%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
.cab-screen::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;z-index:2;background:#dff6ff;box-shadow:0 0 12px #6fd8ff;opacity:0;pointer-events:none}
@keyframes marquee-on{0%,20%{opacity:.15}30%{opacity:.9}38%{opacity:.3}55%,100%{opacity:1}}
.hall-on .cab-screen>*{animation:power-on .8s ease-out both;animation-delay:calc(var(--i,0) * 70ms + 120ms)}
.hall-on .cab-screen::before{animation:scan-line .55s ease-out both;animation-delay:calc(var(--i,0) * 70ms + 60ms)}
.hall-on .cab-marquee span{animation:marquee-on .9s steps(1,end) both;animation-delay:calc(var(--i,0) * 70ms)}

/* High score dialog */
dialog{width:min(480px,calc(100vw - 28px));max-height:calc(100svh - 40px);padding:26px 26px 28px;border:1px solid #ffa94d73;border-radius:18px;background:#0a0c10;color:var(--paper);box-shadow:0 30px 90px #000}
dialog::backdrop{background:#000000b8;backdrop-filter:blur(5px)}
.scores-top{display:flex;align-items:center;justify-content:space-between}
#close-scores{display:grid;place-items:center;width:44px;height:44px;margin:-8px -10px 0 0;border:0;background:none}
#close-scores svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
dialog h2{margin:6px 0 4px;font:800 clamp(38px,8vw,56px)/.95 var(--display);text-transform:uppercase;letter-spacing:.02em}
.scores-unit{margin:0 0 18px;font-size:12px;letter-spacing:.06em;color:var(--muted)}
.board-body ol{list-style:none;margin:0;padding:0}
.board-body li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.board-body li.skel{height:56px;background:linear-gradient(90deg,#ffffff08,#ffffff14,#ffffff08);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:6px}
@keyframes shimmer{to{background-position:-200% 0}}
.rank{font:700 13px var(--body);color:var(--amber);letter-spacing:.08em}
.who{display:grid;min-width:0}.who b{font-size:clamp(20px,3vw,26px);font-weight:800;line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}
.score{font:800 22px var(--display);letter-spacing:.04em;text-align:right}.score small{display:block;font:500 10px var(--body);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.note{margin:6px 0 4px;color:var(--muted);line-height:1.6}
.note a{color:var(--cyan)}
.board-retry{margin-left:12px;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:30px;background:none}
.play-button{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:22px;border-radius:40px;background:var(--amber);color:var(--ink);font:700 12px var(--body);letter-spacing:.18em;text-transform:uppercase;text-decoration:none}
.play-button:hover{background:#ffbd73}
.offline-note{text-align:center;color:var(--muted)}

/* Live ticker */
.score-ticker{position:fixed;inset:0 0 auto;height:var(--scorebar);z-index:90;display:flex;align-items:stretch;background:#0b0e13;color:var(--paper);border-bottom:1px solid #ffa94d59;overflow:hidden}
.score-ticker-label{position:relative;z-index:1;display:flex;flex-shrink:0;align-items:center;gap:9px;padding:0 19px;font:750 10px var(--body);letter-spacing:.14em;background:var(--amber);color:var(--ink);text-decoration:none;white-space:nowrap}
.score-ticker-label .live-dot{background:var(--ink);box-shadow:none;width:5px;height:5px}
.score-ticker-label:hover{text-decoration:underline;text-underline-offset:3px}
.score-ticker-window{min-width:0;flex:1;overflow:hidden;display:flex;align-items:center}
.score-ticker-track{display:flex;width:max-content;align-items:center;flex-shrink:0}
.score-ticker.has-scores .score-ticker-track{animation:score-scroll var(--ticker-duration,55s) linear infinite}
.score-ticker-group{display:flex;flex-shrink:0;align-items:center;gap:32px;min-width:calc(100vw - 230px);padding-right:32px}
.score-ticker-entry{display:block;white-space:nowrap;font:600 14px/1.4 var(--body);letter-spacing:.01em}
.score-ticker-divider{width:5px;height:5px;border-radius:50%;background:var(--amber)}
.score-ticker-message{display:block;padding:0 25px;font-size:12px;line-height:1.4;white-space:nowrap;color:var(--muted)}
.score-ticker-toggle{flex-shrink:0;position:relative;z-index:1;width:44px;border:0;border-left:1px solid #ffa94d40;background:#0b0e13;color:var(--paper)}
.score-ticker-toggle:hover{background:#171b22}
.score-ticker-toggle:focus-visible,.score-ticker-label:focus-visible{outline:2px solid var(--paper);outline-offset:-5px}
.score-ticker.is-paused .score-ticker-track,.motion-paused .score-ticker-track{animation:none;transform:none}
.score-ticker.is-paused .score-ticker-group:nth-child(2),.motion-paused .score-ticker-group:nth-child(2){display:none}
.score-ticker.is-paused .score-ticker-window,.motion-paused .score-ticker-window{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ffa94d55 transparent}
@keyframes score-scroll{to{transform:translateX(-50%)}}
@media(hover:hover){.score-ticker:hover .score-ticker-track{animation-play-state:paused}}

@media(max-width:1020px),(orientation:portrait){main{--floor-w:1320px;padding-top:calc(96px + 2vw)}.floor{grid-template-columns:repeat(3,minmax(0,1fr))}.hall-title{flex-direction:column;align-items:center;text-align:center}.hall-title .eyebrow{padding:0}}
@media(max-width:640px){
  :root{--scorebar:40px}
  .score-ticker-label{font-size:8px;letter-spacing:.06em;padding:0 11px;gap:6px}
  .score-ticker-entry{font-size:12px}.score-ticker-group{gap:22px;padding-right:22px;min-width:calc(100vw - 165px)}
  .score-ticker-message{font-size:11px;padding:0 15px}.score-ticker-toggle{width:40px}
  .brand-label{display:none}
  .floor{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cab-score{letter-spacing:.12em}
  .intro-controls{left:var(--gutter);right:var(--gutter);justify-content:space-between}
}
@media(min-width:1900px){:root{--scorebar:52px}.score-ticker-label{font-size:12px;padding-inline:26px}.score-ticker-entry{font-size:17px}.score-ticker-toggle{width:52px}main{--floor-cap:1560px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.score-ticker.has-scores .score-ticker-track{transform:none}.score-ticker-group:nth-child(2){display:none}.score-ticker-window{overflow-x:auto;scrollbar-width:thin}}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
.motion-paused .cab-screen>*,.motion-paused .cab-screen::before,.motion-paused .cab-marquee span{animation:none!important}