/* /arcade: the main menu and the Arcade Floor, gold on navy in the lounge (arcade/references). Tokens only: the --lounge-* set swaps for light mode. */
.arc{position:relative;isolation:isolate;clip-path:inset(0);margin:-1.75rem calc(50% - 50vw) -4rem;padding:0 max(1rem,calc(50vw - 38rem)) 4rem;color:var(--lounge-ink)}
/* The lounge stays put while the menu and the floor scroll over it. */
.lib-lounge{position:fixed;inset:0;z-index:-1}
.lib-lounge img{width:100%;height:100%;object-fit:cover}
:where(.arc) a{color:inherit;text-decoration:none}
.arc :focus-visible{outline:.1875rem solid var(--lounge-gold);outline-offset:.1875rem}
.arc-chev{width:1.25em;height:1.25em;flex:none}

/* Title and section headings: live text in a gold (or, in the light lounge, navy) gradient. */
.arc-title,.arc-floor-title{margin:0;background:linear-gradient(180deg,var(--lounge-title-hi),var(--lounge-title-lo));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 .25rem .5rem var(--lounge-shade));font:800 clamp(2.5rem,6vw,4.75rem)/1 var(--font-display);letter-spacing:.08em;margin-right:-.08em;text-transform:uppercase}
.arc-mark{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem}
.arc-emblem{width:4.5rem;height:auto;filter:drop-shadow(0 0 1rem var(--x-f3c35a-a45))}
.arc-sub{margin:0;font:700 .75rem/1.4 var(--font-display);letter-spacing:.4em;margin-right:-.4em;text-transform:uppercase;color:var(--lounge-ink)}
.arc-rule{display:flex;align-items:center;gap:1rem;margin:0;font:700 1.375rem/1.2 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--lounge-ink)}
.arc-rule::before,.arc-rule::after{content:"";flex:1;height:.125rem;background:linear-gradient(90deg,transparent,var(--lounge-line))}
.arc-rule::after{background:linear-gradient(90deg,var(--lounge-line),transparent)}
.lib-offline{margin:.75rem 0 0;max-width:62ch}

/* The main menu: the title, a row of cabinets, the modes. */
.arc-menu{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;align-content:center;min-height:calc(100svh - 4rem);padding:2rem 0}
.arc-row{display:flex;align-items:flex-end;justify-content:center;max-width:36rem;width:100%;margin:0 auto}
.arc-row img{width:23%;height:auto;margin-inline:-1.2%;filter:drop-shadow(0 1rem 1rem var(--x-000000-a50))}
.arc-row img:nth-child(2){width:21.5%}
.arc-row img:nth-child(3){width:20%}
.arc-row img:nth-child(4){width:18.5%}
.arc-row img:nth-child(5){width:17%}
.arc-modes{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:28rem;margin:0 auto}
.arc-mode-list{list-style:none;margin:0;padding:0;display:grid;gap:.875rem}
.arc-mode,.lib-play,.arc-back,.lib-arrow{display:flex;align-items:center;gap:1rem;border:.125rem solid var(--lounge-gold-mid);border-radius:.75rem;background:var(--lounge-btn);color:var(--lounge-btn-ink);box-shadow:0 .5rem 1.25rem var(--x-000000-a40),inset 0 0 0 .0625rem var(--x-f3c35a-a20);transition:border-color .2s,box-shadow .2s,transform .2s var(--ease-out)}
.arc-mode{min-height:4.25rem;padding:.625rem 1.25rem}
.arc-ico{width:2rem;height:2rem;flex:none;color:var(--lounge-gold);padding-right:1rem;box-sizing:content-box;border-right:.0625rem solid var(--x-f3c35a-a50)}
.arc-mode-words{display:flex;flex-direction:column;flex:1;min-width:0}
.arc-mode-name{font:700 1.0625rem/1.2 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--lounge-cream)}
.arc-mode-note{font-size:.8125rem;line-height:1.35;color:var(--lounge-btn-ink)}
.arc-browse{align-self:center;display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 .5rem;border-bottom:.125rem solid var(--lounge-line);font:700 .9375rem/1 var(--font-display);letter-spacing:.24em;text-transform:uppercase}
.arc-back{justify-self:center;min-height:2.75rem;padding:0 1.5rem;gap:.5rem;font:700 .875rem/1 var(--font-display);letter-spacing:.24em;text-transform:uppercase}
.arc-back .arc-chev{transform:scaleX(-1)}
@media (hover:hover){
  .arc-mode:hover,.lib-play:hover,.arc-back:hover,.lib-arrow:hover{border-color:var(--lounge-gold);box-shadow:var(--lounge-glow),0 .5rem 1.25rem var(--x-000000-a40);transform:translateY(-.125rem)}
  .arc-browse:hover{border-color:var(--lounge-gold)}
}
@media (min-width:56rem),(orientation:landscape) and (min-width:40rem){
  .arc-menu{grid-template-columns:minmax(0,1fr) minmax(22rem,28rem);grid-template-areas:"mark mark" "row modes" "back back";column-gap:clamp(2rem,5vw,5rem)}
  .arc-mark{grid-area:mark}
  .arc-row{grid-area:row;max-width:none;align-self:end}
  .arc-modes{grid-area:modes;margin:0}
  .arc-back{grid-area:back}
}

/* The Arcade Floor: the strip, the carousel of cabinets, the pitch and Play, the dots and the keys. */
.arc-floor{display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:3rem 0 1rem;scroll-margin-top:4.5rem}
.arc-floor-title{width:100%;display:flex;align-items:center;gap:1.5rem;font-size:clamp(2rem,4.6vw,3.5rem);letter-spacing:.16em}
.arc-floor-title::before,.arc-floor-title::after{content:"";flex:1;height:.125rem;background:linear-gradient(90deg,transparent,var(--lounge-line))}
.arc-floor-title::after{background:linear-gradient(90deg,var(--lounge-line),transparent)}
.lib-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem 1.25rem}
.lib-filter{display:flex;border:.125rem solid var(--lounge-gold-mid);border-radius:.75rem;background:var(--lounge-btn);overflow:hidden}
.lib-seg{min-height:2.75rem;padding:0 1.125rem;border:0;background:none;color:var(--lounge-btn-ink);font:700 .8125rem/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.lib-seg+.lib-seg{border-left:.0625rem solid var(--x-f3c35a-a40)}
.lib-seg[aria-pressed="true"]{background:linear-gradient(180deg,var(--lounge-gold),var(--lounge-gold-mid));color:var(--lounge-navy)}
.lib-count{margin:0;font:700 .8125rem/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--lounge-ink)}

.lib-carousel{--cab:min(13rem,34vh);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.5rem;width:100%}
.lib-arrow{justify-content:center;width:3rem;height:3.5rem;padding:0;cursor:pointer}
.lib-arrow[data-step="-1"] .arc-chev{transform:scaleX(-1)}
.lib-track{position:relative;display:flex;align-items:flex-end;gap:.25rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,var(--x-000000) 6%,var(--x-000000) 94%,transparent);mask-image:linear-gradient(90deg,transparent,var(--x-000000) 6%,var(--x-000000) 94%,transparent);padding:calc(var(--cab) * .5) calc(50% - var(--cab) / 2) 1rem;overscroll-behavior-x:contain}
.lib-track::-webkit-scrollbar{display:none}
.lib-grid{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:.25rem}
.lib-section{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding-right:1.25rem;margin-right:1rem;border-right:.0625rem dashed var(--lounge-line)}
.lib-section[hidden],.lib-item[hidden]{display:none}
.lib-section h3{margin:0;font:700 .75rem/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--lounge-ink)}
.lib-item{flex:none;width:var(--cab);scroll-snap-align:center}
.lib-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-top:.25rem;border-radius:.75rem}
.lib-cab{position:relative;display:block;width:100%;container-type:inline-size;transform-origin:50% 100%;filter:brightness(.72) saturate(.85);transition:transform .35s var(--ease-out),filter .35s}
.lib-cab-art{position:relative;display:block;width:100%;height:auto}
.lib-glow{position:absolute;left:-35%;top:-12%;width:170%;height:auto;opacity:0;transition:opacity .35s}
/* Live text on the cabinet's blank marquee, and the tournament's trophy on the blank cabinet's screen. */
.lib-cab .marquee-title{position:absolute;left:11%;right:4%;top:3%;height:7.4%;display:grid;place-items:center;margin:0;font:800 8.4cqw/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--lounge-navy);text-shadow:0 .0625rem 0 var(--x-fff6e4-a55);white-space:nowrap}
.lib-screen{position:absolute;left:30%;top:15%;width:48%;height:24%;object-fit:contain}
.lib-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem}
.arc .tag{color:var(--lounge-ink);border-color:var(--lounge-line);background:var(--lounge-shade)}
.lib-item.is-selected{position:relative;z-index:1}
.lib-item.is-selected .lib-cab{transform:scale(1.3);filter:none}
.lib-item.is-selected .lib-glow{opacity:1}
.lib-item.is-selected .lib-chips{visibility:hidden}
@media (hover:hover){.lib-item:not(.is-selected) .lib-card:hover .lib-cab{filter:brightness(.9)}}
@media (prefers-reduced-motion:reduce){.lib-cab,.lib-glow{transition:none}}

.lib-pitch{margin:0;max-width:34ch;min-height:2.9em;text-align:center;font-size:1.125rem;line-height:1.45;font-weight:600;color:var(--lounge-ink)}
.lib-play{justify-content:center;min-height:3.75rem;min-width:min(100%,24rem);padding:0 2.5rem;font:700 1.25rem/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase;box-shadow:var(--lounge-glow),0 .5rem 1.25rem var(--x-000000-a40)}
.lib-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.lib-dot{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:.25rem;border:.0625rem solid var(--x-f3c35a-a40);border-radius:.5rem;background:var(--lounge-btn);cursor:pointer}
.lib-dot :is(img,svg){width:100%;height:100%;object-fit:contain;opacity:.6;color:var(--lounge-gold)}
.lib-dot[aria-current="true"]{border:.125rem solid var(--lounge-gold);box-shadow:var(--lounge-glow)}
.lib-dot[aria-current="true"] :is(img,svg){opacity:1}
.lib-dot[hidden]{display:none}
.lib-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;margin:0;font:700 .75rem/1 var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--lounge-ink)}
.lib-keys span{display:inline-flex;align-items:center;gap:.375rem}
.lib-keys span+span{padding-left:1.5rem;border-left:.0625rem solid var(--lounge-line)}
.lib-keys kbd{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .375rem;border:.0625rem solid var(--lounge-gold-mid);border-radius:.25rem;background:var(--lounge-btn);color:var(--lounge-btn-ink);font:inherit;letter-spacing:.06em}
@media (hover:none){.lib-keys{display:none}}

@media (max-width:43.75rem){
  .arc{padding-bottom:3rem}
  .arc-menu{min-height:0;padding-top:1rem}
  .arc-title{font-size:clamp(2.25rem,11vw,3rem)}
  .arc-sub{font-size:.625rem;letter-spacing:.24em;margin-right:-.24em}
  .arc-mode{min-height:3.5rem}
  .arc-ico{width:1.5rem;height:1.5rem;padding-right:.75rem}
  .lib-carousel{--cab:min(42vw,34vh)}
  .lib-item.is-selected .lib-cab{transform:scale(1.18)}
  .lib-arrow{width:2.75rem}
  .lib-seg{padding:0 .75rem;letter-spacing:.08em;white-space:nowrap}
  .lib-play{font-size:1rem;padding:0 1.25rem}
}
/* A phone held sideways: the modes beside the cabinets and a smaller title, so they share the first screen. */
@media (orientation:landscape) and (max-height:31rem){
  .arc-menu{min-height:0;padding-block:1rem;row-gap:.75rem}
  .arc-emblem{width:2.5rem}
  .arc-title{font-size:2.25rem}
  .arc-mode{min-height:3rem;padding-block:.25rem}
  .arc-mode-note{display:none}
  .arc-modes,.arc-mode-list{gap:.5rem}
  .arc-floor{padding-top:1.5rem;gap:.75rem}
}