/* The standalone floor: readable game discovery inside BYTECADE's pixel frame. */
@font-face { font-family: Arcade; src: url('./fonts/press-start-2p.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
:root { color-scheme: dark; --ink: #080b18; --panel: #11182b; --line: #354361; --text: #f4f5ff; --muted: #bac6df; --yellow: #ffe55c; --pixel: Arcade, monospace; --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
* { box-sizing: border-box; }
html { background: var(--ink); scroll-padding-top: 24px; }
body { margin: 0; color: var(--text); font: 16px/1.5 var(--body); background: radial-gradient(ellipse at 50% 0, #19213e 0, transparent 60%), var(--ink); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
button, input, a { border-radius: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 2; top: 8px; left: 12px; padding: 12px 18px; color: var(--ink); background: var(--yellow); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.marquee { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1160px; min-height: 86px; margin: auto; border-bottom: 1px solid var(--line); }
.marquee-title { display: flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; color: #87eaff; font: 17px/1.4 var(--pixel); text-shadow: 2px 2px #283c7c; }
.marquee-title svg { width: 22px; height: 28px; color: var(--yellow); }
.marquee nav { display: flex; gap: 24px; align-items: center; }
.marquee nav a, #scanlines-toggle { display: inline-flex; align-items: center; gap: 8px; justify-content: center; min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--muted); font-size: 14px; text-underline-offset: 5px; }
#scanlines-toggle { text-decoration: underline; }
.marquee nav a:hover, #scanlines-toggle:hover { color: white; }
main { max-width: 1160px; margin: 0 auto; }
.lobby-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 26px 0 24px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #95e9c6; font: 10px/1.7 var(--pixel); }
.status-dot { width: 7px; height: 7px; background: #95e9c6; box-shadow: 0 0 12px #95e9c633; }
h1 { margin: 14px 0 16px; color: #86e8ff; font: 40px/1.25 var(--pixel); letter-spacing: 0; text-shadow: 0 3px #315cef, 0 6px #3930aa, 0 9px #1e1762; }
h1 span { color: var(--yellow); text-shadow: 0 3px #d87b31, 0 6px #ab365e, 0 9px #501c57; }
.hero-description { color: var(--text); font-size: 22px; font-weight: 650; }
.hero-footnote { margin-top: 5px; color: var(--muted); font-size: 15px; }
.free-play { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; padding: 13px 18px 11px; border: 3px double #627093; color: var(--yellow); font: 12px/1.8 var(--pixel); transform: rotate(3deg); }
.free-play span { grid-column: 1; }
.free-play i { grid-column: 2; grid-row: 1 / 3; align-self: center; font: normal 52px/.9 var(--body); }
.floor-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.floor-label { display: flex; align-items: baseline; gap: 14px; }
.floor-label h2 { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
#game-count { color: var(--muted); font-size: 14px; }
.game-search { display: flex; align-items: center; width: 300px; min-height: 46px; padding: 0 0 0 12px; background: #080d1d; border: 1px solid #617090; }
.game-search:focus-within { outline: 3px solid #fff; outline-offset: 3px; }
.game-search svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.game-search input { min-width: 0; width: 100%; min-height: 44px; padding: 10px; color: var(--text); background: none; border: 0; outline: none; font-size: 16px; }
.game-search input::placeholder { color: var(--muted); opacity: 1; }
.game-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
#clear-search { min-width: 44px; min-height: 44px; border: 0; color: var(--text); background: none; font-size: 28px; line-height: 1; }
#clear-search:hover { background: #273453; }
.cabinets { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; scroll-margin-top: 24px; }
.cabinet { min-width: 0; --accent: #ffd774; }
.cab-native-re { display: flex; flex-direction: column; }
.cab-native-re > .start { height: auto; flex: 1; }
.mechanics-resource { padding: 14px 18px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.mechanics-resource a { display: flex; align-items: center; min-height: 44px; color: var(--text); text-underline-offset: 3px; }
.cab-clockwork { --accent: #aae2c5; }
.cab-pendulum { --accent: #ffb48f; }
.cab-chain-reaction { --accent: #dbb6ff; }
.start { display: flex; height: 100%; flex-direction: column; color: inherit; background: var(--panel); border: 3px double #5c6e9d; text-decoration: none; transition: border-color .15s, background .15s; }
.start:hover { background: #172039; border-color: var(--accent); }
.start:focus-visible { outline-offset: 5px; }
.cabinet.selected .start { border-color: #7786a7; }
.cabinet:focus-within .start { border-color: var(--accent); }
.game-art { position: relative; overflow: hidden; aspect-ratio: 2.25; border-bottom: 1px solid #455273; background: #20283a; }
.game-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cab-pendulum .game-art img { object-position: center top; }
.game-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg,#0001 0 1px,transparent 1px 4px); }
.scanlines-off .game-art::after { display: none; }
.preview-label { position: absolute; bottom: 12px; left: 16px; padding: 5px 7px; z-index: 1; background: #080b18ed; color: #e1e7f8; font: 9px/1.5 var(--pixel); }
.game-number { position: absolute; top: 12px; right: 14px; padding: 4px 6px; background: #080b18e8; color: var(--accent); font: 11px/1.5 var(--pixel); }
.card-copy { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; border-top: 3px solid var(--accent); }
.game-genre { color: var(--accent); font: 10px/1.6 var(--pixel); }
.card-copy h3 { margin: 12px 0; color: var(--accent); font: 20px/1.5 var(--pixel); text-transform: uppercase; text-shadow: 2px 2px #070a18; }
.pitch { max-width: 48ch; color: #d1daee; font-size: 17px; line-height: 1.5; }
.card-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 23px; }
.control-hint { color: var(--muted); font-size: 14px; }
.play-control { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 12px 16px; background: var(--yellow); border: 1px solid #ffed8e; box-shadow: 3px 3px #050815; color: #151823; font-size: 15px; font-weight: 750; white-space: nowrap; }
.play-control span { font-size: 21px; line-height: 1; }
.start:hover .play-control { background: #fff097; }
.start:active .play-control { box-shadow: none; transform: translate(1px,1px); }
.empty-state { padding: 48px 20px; border: 1px solid var(--line); text-align: center; }
.empty-state h3 { font-size: 24px; }
.empty-state p { margin: 10px 0 20px; color: var(--muted); }
.empty-state button { min-height: 48px; padding: 10px 20px; color: #151823; background: var(--yellow); border: 1px solid #ffed8e; font-weight: 700; }
.floor-footnote { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 34px 0; color: var(--muted); font-size: 15px; }
.floor-footnote span { color: #d2adff; font-size: 25px; }
footer { display: flex; align-items: center; gap: 24px; max-width: 1160px; margin: 0 auto; padding: 24px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer > span { color: #87eaff; font: 10px/1.7 var(--pixel); }
footer a { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; text-underline-offset: 4px; }
@media (min-width:761px) {
  .lobby-hero { padding: 18px 0; }
  .lobby-hero .eyebrow { display: none; }
  h1 { margin: 10px 0 12px; }
}
@media (max-width:1220px) { .marquee, main, footer { margin-inline: 30px; } }
@media (max-width:760px) {
  .marquee, main, footer { margin-inline: 20px; }
  .marquee { min-height: 72px; gap: 12px; }
  .marquee-title { font-size: 13px; gap: 9px; }
  .marquee-title svg { width: 17px; height: 22px; }
  .marquee nav { gap: 14px; }
  .marquee nav a { display: none; }
  #scanlines-toggle { font-size: 13px; }
  .lobby-hero { padding: 22px 0 18px; }
  h1 { font-size: clamp(26px,7vw,34px); }
  .hero-description { font-size: 21px; }
  .hero-footnote { font-size: 14px; }
  .free-play { display: none; }
  .floor-heading { flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 0; margin-bottom: 16px; }
  .floor-label { justify-content: space-between; }
  .game-search { width: 100%; }
  .cabinets { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .game-art { aspect-ratio: 1.9; }
  .card-copy { padding: 20px; }
  .card-copy h3 { font-size: 18px; }
  .eyebrow, .game-genre, .preview-label { font-size: 11px; }
  .pitch { font-size: 16px; }
  .card-bottom { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 18px; }
  .play-control { flex: 1; }
  .floor-footnote { gap: 8px; font-size: 14px; }
  footer { flex-wrap: wrap; gap: 6px 16px; }
  footer > p { display: none; }
}
@media (max-width:380px) {
  .marquee, main, footer { margin-inline: 14px; }
  .marquee-title { font-size: 12px; }
  #scanlines-toggle { font-size: 12px; }
  h1 { font-size: 26px; }
  .card-copy { padding: 18px; }
  .game-genre { font-size: 11px; }
  .card-copy h3 { font-size: 16px; }
  .card-bottom { flex-direction: column; align-items: stretch; gap: 12px; }
  .control-hint { font-size: 14px; }
  .floor-footnote { font-size: 12px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition: none !important; } }

.cab-tidal-surf{--accent:#9bd9db}.cab-arcfield{--accent:#d7eab1}.cab-crawl{--accent:#c5c6b6}.cab-little-wilds{--accent:#d2e3a0}.cab-native-re{--accent:#c4e691}.cab-native-re .game-art img{object-position:center 35%}.cab-crawl .game-art img{object-position:center}

.cab-puddle{--accent:#bdd696}