/* lobby2 (Opus run #66, 2026-11-10): two parent-switched arcade fronts on the sitting-scale dock.
   Only applies under html.lobby2 (set by ?lobby=dock / ?lobby=stroll). With no param the Nov 8 lobby is untouched.
   Shell art: assets/shack/cabinets/cabinet-shell-tight.png = cabinet-shell.png with its transparent gutters cropped
   (x 198..1162, y 132..1982 of 1360x2048). Same pixels, aspect locked, never stretched. */
html.lobby2 .dock-cabinet { aspect-ratio: 964 / 1850; container-type: inline-size; border-radius: 0; -webkit-tap-highlight-color: transparent; }
html.lobby2 .dock-machine { width: 100%; height: 100%; object-fit: contain; }
html.lobby2 .dock-marquee { left: 14.73%; top: 4.157%; width: 70.539%; height: 5.757%; font-size: 7.4cqw; letter-spacing: .01em; padding: 0 3%; }
html.lobby2 .dock-glass { left: 14.448%; top: 15.005%; width: 71.104%; height: 23.58%; border-radius: 2.4%; }
html.lobby2 .dock-play { left: 14.73%; top: 52.644%; width: 70.539%; height: 5.203%; font-size: 6.6cqw; letter-spacing: .06em; }
html.lobby2 .dock-cabinet.is-lit { filter: drop-shadow(0 0 16px #ffd27acc) brightness(1.12); }
html.lobby2 .dock-cabinet.is-lit .dock-play { color: #5a2e00; text-shadow: 0 0 8px #fff4c8; }
html.lobby2:not(.lobby2-ready) .dock-cabinets { visibility: hidden; }

/* ---------- A. Walk-Up Dock (dockfix 2026-11-10, lb1110g) ----------
   Alex t1834/t1835: one continuous pier, a real hero to scroll back up to, a different cabinet per game,
   hover = scale up + attract loop, no stools, an arcade runner rug under every row. Everything here is lobby-dock only. */
html.lobby-dock .hero { height: max(540px, min(92vh, calc(100vw * 941 / 1672))); height: max(540px, min(92svh, calc(100vw * 941 / 1672))); min-height: 0; margin-bottom: 0; background: linear-gradient(180deg, #152038 0%, #1a1628 55%, #24161c 82%, #2a1814 100%); }
html.lobby-dock .hero-img { object-fit: cover; object-position: 50% 62%; }
html.lobby-dock .hero-stage { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,.6) 92%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,.6) 92%, transparent 100%); }
html.lobby-dock .hero::after { height: 90px; background: linear-gradient(0deg, #2a1814 0%, rgba(42,24,20,.55) 45%, transparent 100%); }
html.lobby-dock .hero-copy { margin: clamp(5.5rem, 14vh, 8.5rem) 0 clamp(4.5rem, 12vh, 7.5rem); width: min(42rem, 56vw); }
html.lobby-dock .hero-copy h1 { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
html.lobby-dock .hero-copy .where { display: none; }

/* one pier: a single seamless plank tile repeats behind the whole section, all rows, all widths (no cover-scaled photo) */
html.lobby-dock .arcade-shack.dock-size-pier {
  margin-top: 0; padding: 34px 10px 72px;
  background-color: #3a2416;
  background-image:
    linear-gradient(180deg, rgba(30,16,10,0) 0, rgba(30,16,10,0) 1px),
    linear-gradient(0deg, #121018 0, rgba(18,16,24,0) 120px),
    linear-gradient(90deg, rgba(14,8,6,.55) 0, rgba(14,8,6,0) 14%, rgba(14,8,6,0) 86%, rgba(14,8,6,.55) 100%),
    radial-gradient(ellipse 60% 900px at 50% 0, rgba(255,176,84,.16), rgba(255,176,84,0) 70%),
    linear-gradient(rgba(30,16,10,.34), rgba(30,16,10,.34)),
    url("assets/shack/dock-planks.jpg?v=lb1110g");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-size: auto, auto, auto, auto, auto, 560px auto;
  background-position: 0 0, 0 100%, 0 0, 50% 0, 0 0, 50% calc(-1 * var(--lobby2-hero-h, 0px));
}
html.lobby-dock .arcade-shack.dock-size-pier::before, html.lobby-dock .arcade-shack.dock-size-pier::after { display: none; }

/* the machines: one per game, same family (navy + brass), no stools. Art 584x1152 + an 88-unit walnut plinth = 584x1240 */
html.lobby-dock .dock-cabinets { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 1068px); gap: 88px clamp(14px, 2.2vw, 26px); isolation: isolate; }
html.lobby-dock .dock-cabinet { aspect-ratio: 584 / 1240; border-radius: 0; z-index: 1; transform-origin: 50% 92%; transition: transform .28s cubic-bezier(.2,.8,.25,1), filter .28s ease; filter: drop-shadow(0 10px 8px rgba(10,6,6,.55)); will-change: transform; }
html.lobby-dock .dock-cabinet .dock-machine { position: absolute; left: 0; top: 0; width: 100%; height: 92.903%; object-fit: fill; }
html.lobby-dock .dock-cabinet .dock-marquee { position: absolute; width: 1px; height: 1px; left: 0; top: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
html.lobby-dock .dock-cabinet .dock-glass { left: 17.8%; top: 17.26%; width: 64.7%; height: 24.52%; border-radius: 3.2% / 4.5%; background: transparent; overflow: hidden; }
html.lobby-dock .dock-cabinet .dock-glass > img { opacity: 0; }
html.lobby-dock .dock-glass video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; background: #071026; }
html.lobby-dock .dock-cabinet.is-playing .dock-glass video { opacity: 1; }
html.lobby-dock .dock-plinth { position: absolute; left: 1.2%; width: 97.6%; top: 91.6%; height: 8.4%; border-radius: 3px 3px 6px 6px; background: linear-gradient(180deg, #e2b062 0, #a8732c 7%, #6a3f1f 9%, #5a331a 40%, #45260f 100%); box-shadow: inset 0 0 0 1px rgba(255,214,150,.25), inset 0 -6px 10px rgba(0,0,0,.35), 0 6px 10px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
html.lobby-dock .dock-plate { display: flex; align-items: center; gap: 3cqw; max-width: 92%; padding: 1.1cqw 3.4cqw; border-radius: 1.6cqw; background: linear-gradient(180deg, #fbe9c4, #e9c88f); box-shadow: inset 0 0 0 .5cqw #9a6a2c, 0 1px 2px rgba(0,0,0,.5); color: #3b2210; font: 900 6.4cqw/1 var(--font-body, "Nunito", system-ui, sans-serif); letter-spacing: .02em; white-space: nowrap; }
html.lobby-dock .dock-cabinet .dock-play { position: static; width: auto; height: auto; display: inline-flex; padding: .7cqw 2.2cqw; border-radius: 99px; background: #b8322a; color: #fff3d6; font-size: 4.6cqw; letter-spacing: .06em; box-shadow: inset 0 -1px 0 rgba(0,0,0,.3); }
html.lobby-dock .dock-cabinet:hover { filter: drop-shadow(0 10px 8px rgba(10,6,6,.55)); }
html.lobby-dock .dock-cabinet.is-hot { transform: scale(1.12); z-index: 5; filter: drop-shadow(0 0 18px rgba(255,206,120,.55)) drop-shadow(0 16px 14px rgba(10,6,6,.6)); }
html.lobby-dock .dock-cabinet.is-lit { filter: drop-shadow(0 0 22px #ffd27add) brightness(1.1); }
html.lobby-dock .dock-cabinet.is-lit .dock-play { background: #ffd27a; color: #5a2e00; }
html.lobby-dock .dock-cabinet:focus-visible { outline: 3px solid #ffe2a2; outline-offset: 4px; }

/* arcade runner rug: one continuous runner under each row of machines (positioned by lobby2.js) */
html.lobby-dock .dock-rug { position: absolute; z-index: 0; pointer-events: none; border-radius: 10px; transform: perspective(700px) rotateX(38deg); transform-origin: 50% 0;
  background: linear-gradient(rgba(255,200,120,.06), rgba(0,0,0,.18)), url("assets/shack/dock-rug.jpg?v=lb1110g") 50% 0 / 260px auto repeat;
  box-shadow: inset 0 0 0 4px #2a1a3a, inset 0 0 0 7px #d6a04c, inset 0 0 0 9px #2a1a3a, inset 0 0 0 11px #7c2f3a, 0 14px 18px rgba(8,4,4,.55); }
html.lobby-dock .dock-rug::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -7px; height: 8px; background: repeating-linear-gradient(90deg, #e8c98e 0 2px, transparent 2px 6px); opacity: .75; border-radius: 0 0 4px 4px; }

.lobby2-more-cue { display: none; }
html.lobby-dock .lobby2-more-cue { display: flex; justify-content: center; margin: 30px auto 0; position: relative; z-index: 2; }
html.lobby-dock .lobby2-more-cue a { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem .45rem .6rem; border-radius: 999px; color: #fbe7b8; font: 800 .95rem/1 var(--font-body, "Nunito", system-ui, sans-serif); background: rgba(14,22,40,.62); box-shadow: inset 0 0 0 1.5px rgba(255,220,160,.35); text-decoration: none; }
html.lobby-dock .lobby2-more-cue img { width: 22px; height: auto; }
.dock-more { display: none; }
html.lobby-dock .dock-more { display: block; position: relative; z-index: 2; padding: 30px 0 0; background: none; }
html.lobby-dock .dock-more-head { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 6px 0 22px; color: #fbe7b8; font: 900 1.25rem/1 var(--font-display, var(--font-body, "Nunito")), system-ui, sans-serif; letter-spacing: .02em; }
html.lobby-dock .dock-more-head img { width: 30px; height: auto; }
html.lobby-dock .dock-more-head::before, html.lobby-dock .dock-more-head::after { content: ""; width: 60px; height: 2px; background: linear-gradient(90deg, transparent, #f3bd74); }
html.lobby-dock .dock-more-head::after { transform: scaleX(-1); }
html.lobby-dock .optional-close { background: #121018; margin: 0; }
@media (min-width: 701px) and (max-width: 1100px) {
  html.lobby-dock .arcade-shack.dock-size-pier { padding-inline: 4px; }
  html.lobby-dock .dock-cabinets { gap: 66px 12px; }
  html.lobby-dock .hero-copy { width: min(40rem, 70vw); }
}
@media (max-width: 700px) {
  html.lobby-dock .hero { height: max(560px, 78svh); }
  html.lobby-dock .hero-img { object-position: 62% 60%; }
  html.lobby-dock .hero-copy { width: 100%; max-width: none; margin: 88px 0 56px; padding: 0 22px; }
  html.lobby-dock .hero-copy h1 { font-size: 32px; }
  html.lobby-dock .arcade-shack.dock-size-pier { padding: 22px 6px 48px; background-size: auto, auto, auto, auto, auto, 380px auto; }
  html.lobby-dock .dock-cabinets { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 572px); gap: 46px 10px; }
  html.lobby-dock .dock-cabinet.is-hot { transform: scale(1.07); }
  html.lobby-dock .dock-rug { border-radius: 7px; transform: perspective(500px) rotateX(36deg); background-size: auto, 150px auto; }
}
@media (prefers-reduced-motion: reduce) {
  html.lobby-dock .dock-cabinet { transition: none; }
  html.lobby-dock .dock-cabinet.is-hot { transform: none; }
  html.lobby-dock .dock-glass video { display: none; }
}

/* ---------- B. The Stroll ---------- */
html.lobby-stroll .hero, html.lobby-stroll .dock-size-pier { display: none; }
.stroll { display: none; }
html.lobby-stroll .stroll { position: relative; display: grid; grid-template-rows: auto 1fr auto; height: 100vh; height: 100svh; min-height: 560px; padding-top: var(--lobby2-nav, 56px); box-sizing: border-box; overflow: hidden; color: #f6efe3;
  background: linear-gradient(180deg, #0b1430 0%, rgba(11,20,48,.78) 22%, rgba(18,18,40,.35) 48%, rgba(42,24,20,.15) 70%, rgba(42,24,20,.55) 100%), #2a1814 url("assets/boardwalk-continue.jpg?v=3s") 50% 34% / cover no-repeat; }
/* pier night: boardwalk-continue only (no painted cabinets behind the one on stage) */
.stroll-head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 10px clamp(14px, 3vw, 40px) 4px; }
.stroll-head h1 { margin: 0; font-size: clamp(1.15rem, 2.1vw, 1.7rem); line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.stroll-head h1 span { white-space: nowrap; }
.stroll-head .stroll-dad { margin: .2rem 0 0; font-size: .82rem; font-weight: 700; opacity: .8; }
html.lobby-stroll .stroll-head .lpa-radio { position: relative; right: auto; bottom: auto; flex: 0 0 auto; }
.stroll-stage { position: relative; z-index: 2; min-height: 0; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stroll-stage:focus-visible { box-shadow: inset 0 0 0 3px #ffe2a299; }
.stroll-track { position: absolute; inset: 0; }
.stroll-slot { position: absolute; top: 0; left: 0; transform-origin: 50% 100%; transition: transform .38s cubic-bezier(.2,.7,.2,1), filter .38s ease, opacity .38s ease; will-change: transform; }
.stroll-slot.is-drag { transition: none; }
.stroll-slot .dock-cabinet { width: 100%; filter: drop-shadow(0 10px 8px #100b0c77); }
.stroll-slot.is-side .dock-cabinet { pointer-events: auto; }
.stroll-slot.is-on .dock-play { font-size: 8.2cqw; }
.stroll-slot.is-on .dock-cabinet { filter: drop-shadow(0 0 18px #f3bd7455) drop-shadow(0 10px 8px #100b0c77); }
.stroll-new { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fbe7b8; font: 900 1rem/1 var(--font-body, "Nunito"), system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; transition: transform .38s cubic-bezier(.2,.7,.2,1), opacity .38s ease; }
.stroll-new img { width: 34px; height: auto; filter: drop-shadow(0 0 10px #ffcf7a); }
.stroll-arrow { position: absolute; z-index: 5; top: 44%; width: 54px; height: 54px; margin-top: -27px; border: 0; border-radius: 50%; cursor: pointer; color: #2a1a0c; font: 900 30px/1 system-ui, sans-serif; background: radial-gradient(circle at 50% 38%, #fff3cf, #f0c46a 70%, #c98c3a); box-shadow: 0 0 0 2px #7a4a1c, 0 0 16px #ffcf7a88, 0 6px 14px #0008; }
.stroll-arrow[disabled] { opacity: .3; cursor: default; box-shadow: 0 0 0 2px #7a4a1c; }
.stroll-arrow:focus-visible { outline: 3px solid #ffe2a2; outline-offset: 3px; }
.stroll-arrow.prev { left: max(10px, calc(50% - var(--stroll-w, 320px) / 2 - 78px)); }
.stroll-arrow.next { right: max(10px, calc(50% - var(--stroll-w, 320px) / 2 - 78px)); }
.stroll-dots { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px max(12px, env(safe-area-inset-bottom)); }
.stroll-dot { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.stroll-dot i { width: 11px; height: 11px; border-radius: 50%; background: #f6efe355; box-shadow: 0 0 0 1.5px #f6efe399; transition: transform .2s ease, background .2s ease; }
.stroll-dot[aria-current="true"] i { background: #ffd27a; box-shadow: 0 0 10px #ffcf7a, 0 0 0 1.5px #fff2c8; transform: scale(1.35); }
.stroll-dot:focus-visible { outline: 2px solid #ffe2a2; border-radius: 50%; }
.stroll-dots .stroll-dots-new { color: #fbe7b8; font: 900 .7rem/1 var(--font-body, "Nunito"), system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 0 4px; display: inline-flex; align-items: center; gap: 3px; }
.stroll-dots .stroll-dots-new img { width: 12px; height: auto; }
.lobby2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) {
  .stroll-head { padding: 6px 12px 2px; }
  .stroll-head h1 { font-size: 1.05rem; }
  .stroll-head .stroll-dad { display: none; }
  html.lobby-stroll .stroll-head .lpa-radio { padding: .25rem .6rem .25rem .3rem; }
  html.lobby-stroll .stroll-head .lpa-radio-set { width: 38px; height: 33px; }
  .stroll-arrow { width: 44px; height: 44px; font-size: 24px; top: calc(100% + 1px); margin-top: 0; }
  .stroll-arrow.prev { left: 8px; } .stroll-arrow.next { right: 8px; }
  .stroll-dot { width: 26px; height: 30px; }
  .stroll-dots { gap: 0; padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) { .stroll-slot, .stroll-new { transition: none; } }

/* tiny parent-only switch (footer bar), only in lobby2 modes */
.lobby2-switch { display: none; }
html.lobby2 .lobby2-switch { display: inline; font-size: 11px; opacity: .7; margin-left: .8rem; }
html.lobby2 .lobby2-switch a { text-decoration: underline; margin: 0 .2rem; }
html.lobby2 .lobby2-switch a[aria-current="true"] { font-weight: 800; text-decoration: none; }

/* ---------- Arcade Radio (Alex t1837 design), Dock front ----------
   Skin only: every size is in cqw of the radio's own width, so it stays crisp and proportional at any size.
   Palette: teal body, cream type, orange accents, burlap grille, navy display + shelf. */
html.lobby-dock .hero .lpa-radio { display: none; }
.ar-radio { display: none; }

/* ---------- dockfix2 (Opus #68): one walk from the water into the shack ----------
   The hero paints the same plank tile, same phase, under its picture; the picture dissolves into those boards
   and the pier section continues them with no band. */
html.lobby-dock .hero-img { content: url("assets/pier-lobby-hero-nostools.webp?v=lb1110m"); }
html.lobby-dock .hero {
  background-color: #3a2416;
  background-image: linear-gradient(90deg, rgba(14,8,6,.55) 0, rgba(14,8,6,0) 14%, rgba(14,8,6,0) 86%, rgba(14,8,6,.55) 100%),
    radial-gradient(ellipse 60% 900px at 50% 100%, rgba(255,176,84,.16), rgba(255,176,84,0) 70%),
    linear-gradient(rgba(30,16,10,.34), rgba(30,16,10,.34)), url("assets/shack/dock-planks.jpg?v=lb1110g");
  background-repeat: no-repeat, no-repeat, repeat, repeat; background-size: auto, auto, auto, 560px auto; background-position: 0 0, 0 0, 0 0, 50% 0;
}
html.lobby-dock .hero-stage { background: transparent; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,.55) 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0,0,0,.55) 90%, transparent 100%); }
html.lobby-dock .hero::after { display: none; }
@media (max-width: 700px) { html.lobby-dock .hero { background-size: auto, auto, auto, 380px auto; } }
/* the copy shade and the old lip stop before the boards, so the hero's last rows ARE the pier's first rows */
html.lobby-dock .hero-shade { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 94%); mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 94%); }

/* Sound pill + Top live in the header chrome (moved there by lobby2.js), never over the radio or a machine */
html.lobby-dock .lobby2-chrome { display: flex; align-items: center; gap: 8px; margin-left: 14px; flex: 0 0 auto; pointer-events: auto; }
html.lobby-dock .lobby2-chrome .lpa-mute { position: static; height: 32px; box-shadow: 0 2px 0 #b48a52; }
html.lobby-dock .lobby2-chrome .back-top { position: static; padding: 0 .7rem; height: 32px; box-shadow: none; transition: opacity .2s ease; }
html.lobby-dock .lobby2-chrome:not(.is-scrolled) .back-top { opacity: 0; pointer-events: none; visibility: hidden; }
@media (max-width: 1100px) {   /* tablet + phone: brand and sound share row 1, the links get their own row 2 (nothing covered) */
  html.lobby-dock .site-nav { flex-wrap: wrap; row-gap: 4px; }
  html.lobby-dock .site-nav .brand { order: 0; flex: 1 1 auto; }
  html.lobby-dock .lobby2-chrome { order: 1; margin-left: 8px; }
  html.lobby-dock .site-nav > nav { order: 2; flex: 1 1 100%; }
  html.lobby-dock .site-nav .nav-links { flex-wrap: wrap; }
  html.lobby-dock .site-nav .nav-links a { white-space: nowrap; }
}
@media (max-width: 700px) {
  html.lobby-dock .lobby2-chrome { gap: 6px; }
  html.lobby-dock .lobby2-chrome .lpa-mute > span:not(.sw) { display: none; }
  html.lobby-dock .lobby2-chrome .lpa-mute { height: 30px; padding: 0 .3rem 0 .45rem; }
  html.lobby-dock .lobby2-chrome .back-top { height: 30px; width: 34px; padding: 0; justify-content: center; font-size: 0 !important; }
  html.lobby-dock .lobby2-chrome .back-top::before { content: "\2191"; font-size: 16px; }
}

/* ---------- Arcade Radio v2 (Opus radio rebuild, 11/11): a painted body with live controls set into its wells ----------
   One transparent painting (assets/shack/radio-body.webp, 1600x1360) scales across breakpoints; every live control is
   positioned in % of that painting and sized in cqw of the radio's own width, so the HTML always lands in the recess.
   Playing life is exactly two things: the lighthouse lamp + a soft beam over the burlap, and the lit Play cap (grille breathes 2-3%). */
html.lobby-dock .ar-radio {
  --ar-cream: #f6e6c2; --ar-cream-d: #d9c095; --ar-gold: #c9973f; --ar-gold-l: #f1cf7e; --ar-orange: #ee7d22; --ar-navy: #101a33; --ar-amber: #ffb347;
  display: block; position: relative; z-index: 6; width: min(420px, 86%); margin: 6px auto 12px; aspect-ratio: 1600 / 1360;
  container-type: inline-size; font-family: var(--font-body, "Nunito", system-ui, sans-serif);
  background: url("assets/shack/radio-body.webp?v=rd1111a") 0 0 / 100% 100% no-repeat;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.ar-radio *, .ar-radio *::before, .ar-radio *::after { box-sizing: border-box; }
/* laptop: on its shelf on the deck foreground, just left of the shack (never over a cabinet or the shack), whole radio above the fold */
html.lobby-dock .ar-radio.ar-on-deck {
  --ar-w: clamp(320px, 26.5vw, 360px);
  position: absolute; width: var(--ar-w); margin: 0;
  left: calc(59% - var(--ar-w) - 14px);
  top: calc(100vh - var(--lobby2-hero-h, 720px) - var(--ar-w) * .85 - 4px);
  top: calc(100svh - var(--lobby2-hero-h, 720px) - var(--ar-w) * .85 - 4px);
}
html.lobby-dock #arcade:has(> .ar-radio.ar-on-deck) { padding-top: max(34px, calc(100svh - var(--lobby2-hero-h, 720px) + 30px)); }

/* the wells: grille (left) and the navy recess (right), in % of the painting */
.ar-grille { position: absolute; left: 15.2%; top: 28.4%; width: 28.1%; height: 46.4%; border-radius: 3.2cqw; overflow: hidden; pointer-events: none; }
.ar-well { position: absolute; left: 45.9%; top: 27.3%; width: 42.8%; height: 45.6%; border-radius: 2.6cqw; }

/* ---- lighthouse life (over the embroidered lighthouse; lamp at 52% / 33% of the grille) ---- */
.ar-lamp, .ar-beam, .ar-breathe { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }   /* plain alpha (no blend modes: Chrome drops blended layers when they stop animating) */
.ar-lamp { background: radial-gradient(circle at 52% 33%, rgba(255,248,214,.95) 0, rgba(255,214,130,.62) 2.2cqw, rgba(255,170,70,.22) 5cqw, rgba(255,150,60,0) 10cqw); }
@property --ar-a { syntax: "<angle>"; inherits: false; initial-value: 60deg; }
.ar-beam { --ar-a: 60deg; filter: blur(.5cqw);
  background: conic-gradient(from var(--ar-a) at 52% 33%, rgba(255,226,160,0) 0deg, rgba(255,226,160,.32) 9deg, rgba(255,238,196,.45) 14deg, rgba(255,226,160,.3) 19deg, rgba(255,226,160,0) 30deg, rgba(255,226,160,0) 360deg);
  -webkit-mask-image: radial-gradient(circle at 52% 33%, #000 0, rgba(0,0,0,.85) 8cqw, rgba(0,0,0,0) 30cqw); mask-image: radial-gradient(circle at 52% 33%, #000 0, rgba(0,0,0,.85) 8cqw, rgba(0,0,0,0) 30cqw); }
.ar-breathe { background: radial-gradient(ellipse at 52% 40%, rgba(255,214,150,.16), rgba(255,190,110,.05) 75%); }
.ar-radio.is-playing .ar-lamp { opacity: 1; animation: ar-lamp 2.4s ease-in-out infinite alternate; }
.ar-radio.is-playing .ar-beam { opacity: 1; animation: ar-sweep 6s linear infinite; }
.ar-radio.is-playing .ar-breathe { opacity: .5; animation: ar-breathe 2.6s ease-in-out infinite alternate; }
@keyframes ar-sweep { from { --ar-a: -20deg; } to { --ar-a: 340deg; } }
@keyframes ar-lamp { from { filter: brightness(.92); } to { filter: brightness(1.08); } }
@keyframes ar-breathe { from { opacity: .32; } to { opacity: .62; } }

/* ---- inset amber LCD ---- */
.ar-title { position: absolute; left: 2.4cqw; right: 2.4cqw; top: 1.9cqw; height: 7.4cqw; display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.8cqw;
  border-radius: 1.3cqw; overflow: hidden; color: #c58a3c;
  background: radial-gradient(ellipse at 50% 40%, #2a1a08 0, #170e05 70%), #170e05;
  box-shadow: inset 0 .5cqw 1cqw rgba(0,0,0,.85), inset 0 -.25cqw .3cqw rgba(255,190,110,.12), 0 .3cqw 0 rgba(255,255,255,.08), 0 0 0 .45cqw #0a0f1f, 0 0 0 .7cqw rgba(201,151,63,.55); }
.ar-title::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, rgba(0,0,0,0) 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .8 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(170deg, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 38%); }
.ar-note { flex: 0 0 auto; font-size: 3.4cqw; line-height: 1; opacity: .8; }
.ar-title-clip { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.ar-title-txt { display: inline-block; font: 800 3.5cqw/1 "Courier New", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 0 .6cqw rgba(255,160,60,.35); }
.ar-radio.is-playing .ar-title { color: var(--ar-amber); }
.ar-radio.is-playing .ar-title-txt { text-shadow: 0 0 .5cqw rgba(255,170,70,.85), 0 0 1.6cqw rgba(255,140,40,.45); }
.ar-radio.is-long .ar-title-txt { animation: ar-marq 9s ease-in-out infinite alternate; }
.ar-radio.is-dj .ar-title-txt { animation: ar-marq-dj 8s linear infinite; padding-left: 100%; }
@keyframes ar-marq { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(var(--ar-scroll, 0)); } }
@keyframes ar-marq-dj { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---- caps: Prev / Play / Next ---- */
.ar-ctrls { position: absolute; left: 0; right: 0; top: 11.2cqw; height: 13.2cqw; display: flex; align-items: center; justify-content: center; gap: 3.2cqw; }
.ar-radio button { -webkit-appearance: none; appearance: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ar-radio button::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }   /* >= 44 px hit target */
.ar-radio button svg { display: block; fill: currentColor; stroke: currentColor; }
.ar-btn { width: 9.6cqw; height: 9.6cqw; border-radius: 50%; color: #3a2a18;
  background: radial-gradient(circle at 36% 28%, #fffaf0 0, var(--ar-cream) 34%, var(--ar-cream-d) 78%, #b99b6b 100%);
  box-shadow: 0 0 0 .55cqw var(--ar-gold), 0 0 0 .8cqw #6b4a1c, inset 0 .35cqw .2cqw rgba(255,255,255,.75), inset 0 -.5cqw .6cqw rgba(120,86,40,.45), 0 .9cqw 0 .8cqw #0a0f1f, 0 1.3cqw 1.2cqw .8cqw rgba(0,0,0,.55);
  transition: transform .08s ease, box-shadow .08s ease; }
.ar-btn svg { width: 46%; height: 46%; }
.ar-btn:active, .ar-btn.is-press { transform: translateY(.55cqw);
  box-shadow: 0 0 0 .55cqw var(--ar-gold), 0 0 0 .8cqw #6b4a1c, inset 0 .5cqw .8cqw rgba(110,78,36,.6), inset 0 -.2cqw .2cqw rgba(255,255,255,.4), 0 .3cqw 0 .8cqw #0a0f1f, 0 .5cqw .6cqw .8cqw rgba(0,0,0,.5); }
.ar-play { width: 13.2cqw; height: 13.2cqw; border-radius: 50%; color: #fff6e6;
  background: radial-gradient(circle at 35% 26%, #ffe3c0 0, #ffad5e 14%, var(--ar-orange) 42%, #c2560f 82%, #8f3a08 100%);
  box-shadow: 0 0 0 .6cqw var(--ar-gold), 0 0 0 .9cqw #6b4a1c, inset 0 .45cqw .3cqw rgba(255,255,255,.55), inset 0 -.8cqw 1cqw rgba(110,40,4,.55), 0 1.1cqw 0 .9cqw #0a0f1f, 0 1.6cqw 1.6cqw .9cqw rgba(0,0,0,.55);
  transition: transform .08s ease, box-shadow .3s ease, filter .3s ease; }
.ar-play::before { content: ""; position: absolute; left: 20%; top: 9%; width: 46%; height: 26%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); transform: rotate(-18deg); pointer-events: none; }
.ar-play i { display: inline-flex; font-style: normal; width: 42%; height: 42%; filter: drop-shadow(0 .2cqw 0 rgba(120,40,0,.55)); }
.ar-play i svg { width: 100%; height: 100%; }
.ar-play .ar-i-play { margin-left: 8%; }
.ar-play .ar-i-pause, .ar-radio.is-playing .ar-play .ar-i-play { display: none; } .ar-radio.is-playing .ar-play .ar-i-pause { display: inline-flex; }
.ar-play-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ar-play:active { transform: translateY(.6cqw); }
.ar-radio.is-playing .ar-play { color: #fffaf0; background: radial-gradient(circle at 40% 32%, #ffe0ad 0, #ffa850 20%, #f57f22 55%, #c95812 88%, #96400c 100%);
  box-shadow: 0 0 0 .6cqw var(--ar-gold-l), 0 0 0 .9cqw #6b4a1c, inset 0 .4cqw .4cqw rgba(255,255,255,.6), inset 0 -.6cqw 1cqw rgba(140,50,6,.5), 0 1.1cqw 0 .9cqw #0a0f1f, 0 0 4.5cqw 1.8cqw rgba(255,165,60,.7), 0 0 10cqw 3.5cqw rgba(255,130,40,.35); }
.ar-radio.is-playing .ar-play i { filter: drop-shadow(0 .25cqw .2cqw rgba(110,36,0,.75)); }

/* ---- bottom row: Songs station-card plate + volume knob ---- */
.ar-songs { position: absolute; left: 2.4cqw; top: 26.4cqw; width: 22.6cqw; height: 10.6cqw; flex-direction: column; gap: .4cqw; border-radius: 1.4cqw; color: #2b2116;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%), repeating-linear-gradient(180deg, rgba(120,90,50,0) 0 2.2cqw, rgba(120,90,50,.16) 2.2cqw 2.35cqw), var(--ar-cream);
  box-shadow: 0 0 0 .45cqw var(--ar-gold), 0 0 0 .7cqw #6b4a1c, inset 0 -.4cqw .5cqw rgba(120,86,40,.35), 0 .8cqw 0 .7cqw #0a0f1f, 0 1.1cqw 1cqw .7cqw rgba(0,0,0,.5);
  transition: transform .08s ease; }
.ar-songs span { font: 900 3.5cqw/1 var(--font-display, "Fredoka", "Nunito", system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.ar-songs small { font: 800 2.1cqw/1 var(--font-body, "Nunito", system-ui, sans-serif); letter-spacing: .14em; color: #a2531a; text-transform: uppercase; }
.ar-songs:active, .ar-radio.is-list .ar-songs { transform: translateY(.45cqw); }
.ar-knob { position: absolute; right: 3.2cqw; top: 24.2cqw; width: max(44px, 13.2cqw); height: max(44px, 13.2cqw); border-radius: 50%;
  background: radial-gradient(circle, #0a0f1f 62%, rgba(10,15,31,0) 72%); }
.ar-knob::before { content: ""; position: absolute; inset: -1.2cqw; border-radius: 50%; pointer-events: none;   /* gold scale dots around the knob */
  background: conic-gradient(from -135deg, var(--ar-gold-l) 0 1.5deg, transparent 1.5deg 27deg, var(--ar-gold-l) 27deg 28.5deg, transparent 28.5deg 54deg, var(--ar-gold-l) 54deg 55.5deg, transparent 55.5deg 81deg, var(--ar-gold-l) 81deg 82.5deg, transparent 82.5deg 108deg, var(--ar-gold-l) 108deg 109.5deg, transparent 109.5deg 135deg, var(--ar-gold-l) 135deg 136.5deg, transparent 136.5deg 162deg, var(--ar-gold-l) 162deg 163.5deg, transparent 163.5deg 189deg, var(--ar-gold-l) 189deg 190.5deg, transparent 190.5deg 216deg, var(--ar-gold-l) 216deg 217.5deg, transparent 217.5deg 243deg, var(--ar-gold-l) 243deg 244.5deg, transparent 244.5deg 270deg, var(--ar-gold-l) 270deg 271.5deg, transparent 271.5deg 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 61%, #000 63%, #000 70%, transparent 72%); mask-image: radial-gradient(circle, transparent 61%, #000 63%, #000 70%, transparent 72%); opacity: .8; }
.ar-spk { position: absolute !important; inset: 0; width: 100%; height: 100%; border-radius: 50%; color: #4a3520; touch-action: none; cursor: grab;
  background: radial-gradient(circle at 38% 30%, #fffdf6 0, var(--ar-cream) 38%, var(--ar-cream-d) 76%, #a98a5a 100%);
  box-shadow: 0 0 0 .4cqw #8d6a33, inset 0 .4cqw .3cqw rgba(255,255,255,.8), inset 0 -.7cqw .9cqw rgba(110,78,36,.5), 0 .9cqw 0 .3cqw #070b17, 0 1.4cqw 1.4cqw .3cqw rgba(0,0,0,.6); }
.ar-spk:active { cursor: grabbing; }
.ar-spk .ar-ridge { position: absolute; inset: 6%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(120,90,50,.22) 0 4deg, rgba(255,255,255,0) 4deg 12deg);
  -webkit-mask-image: radial-gradient(circle, transparent 74%, #000 78%); mask-image: radial-gradient(circle, transparent 74%, #000 78%); }
.ar-spk .ar-tick { position: absolute; inset: 0; transform: rotate(var(--ar-rot, 135deg)); pointer-events: none; transition: transform .12s ease; }
.ar-spk .ar-tick::before { content: ""; position: absolute; left: 50%; top: 7%; width: 13%; height: 22%; margin-left: -6.5%; border-radius: 2cqw; background: linear-gradient(180deg, #ffe7a4, var(--ar-gold) 60%, #8a5f1e); box-shadow: 0 .15cqw .2cqw rgba(60,30,0,.5); }
.ar-spk > svg { width: 38%; height: 38%; position: relative; }
.ar-spk .ar-x { display: none; } .ar-radio.is-muted .ar-spk .ar-x { display: inline; } .ar-radio.is-muted .ar-spk .ar-w1, .ar-radio.is-muted .ar-spk .ar-w2 { display: none; }
.ar-radio.is-muted .ar-spk { color: #b2471a; }
.ar-slider { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }   /* the real control (keyboard + AT); the cap drives it by pointer */
.ar-knob:has(.ar-slider:focus-visible) .ar-spk, .ar-radio button:focus-visible, .ar-list li:focus-visible { outline: 3px solid #ffe2a2; outline-offset: 3px; }

/* ---- Songs menu: a paper station list with a navy header ---- */
.ar-list { position: absolute; z-index: 20; right: 6%; bottom: 30%; width: max(240px, 66cqw); max-height: min(70vh, 460px); overflow: auto; margin: 0; padding: 0 0 6px; list-style: none;
  border-radius: 12px; background: #fbf2dc; color: #1d2236; box-shadow: 0 0 0 3px var(--ar-gold), 0 0 0 5px #3d2a12, 0 18px 40px rgba(0,0,0,.55); }
.ar-list[hidden] { display: none; }
.ar-list::before { content: "Arcade Radio \00B7  Songs"; display: block; position: sticky; top: 0; padding: 10px 16px; background: var(--ar-navy); color: var(--ar-cream); font: 800 12px/1.2 var(--font-body, "Nunito", system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
.ar-list li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; font: 700 15px/1.2 var(--font-body, "Nunito", system-ui, sans-serif); cursor: pointer; border-bottom: 1px dashed rgba(29,34,54,.14); }
.ar-list li:hover { background: #f3e2bd; }
.ar-list li.is-cur { color: #b4500f; font-weight: 900; }
.ar-li-mark { width: 14px; flex: 0 0 auto; color: var(--ar-orange); }
@media (max-width: 1100px) { html.lobby-dock .ar-list { bottom: auto; top: 70%; right: 4%; } }

@media (prefers-reduced-motion: reduce) {
  .ar-radio.is-playing .ar-beam, .ar-radio.is-playing .ar-lamp, .ar-radio.is-playing .ar-breathe, .ar-radio.is-long .ar-title-txt, .ar-radio.is-dj .ar-title-txt { animation: none; }
  .ar-radio.is-dj .ar-title-txt { padding-left: 0; }
  .ar-title-clip { text-overflow: ellipsis; }
  .ar-btn, .ar-play, .ar-songs, .ar-spk .ar-tick { transition: none; }
}
/* phone: nudge the hero crop right so no sliver of the painted wordmark's "E" shows at the left edge */
@media (max-width: 700px) { html.lobby-dock .hero-img { object-position: 72% 60%; } }