:root {
  color-scheme: dark;
  font-family: "Space Grotesk", "Trebuchet MS", system-ui, sans-serif;
  background: #090316;
  color: #fff6e7;
  --ink: #100527;
  --panel: rgba(22, 7, 53, .92);
  --panel-edge: rgba(142, 93, 255, .56);
  --violet: #8b5cff;
  --pink: #ff4eae;
  --cyan: #51f5ff;
  --lime: #bcff55;
  --gold: #ffd65c;
  --muted: #bcaed5;
  --danger: #ff6d74;
  --arcade-background: url("/web/assets/neon-bingo-arcade-background-man.png");
}
:root[data-arcade-background="woman"] { --arcade-background: url("/web/assets/neon-bingo-arcade-background.png"); }

* { box-sizing: border-box; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background-color: #090316;
  background-image:
    radial-gradient(circle at 8% 8%, rgba(255, 78, 174, .20), transparent 30rem),
    radial-gradient(circle at 87% 15%, rgba(81, 245, 255, .16), transparent 29rem),
    var(--arcade-background);
  background-position: center, center, center;
  background-size: auto, auto, cover;
  background-attachment: fixed, fixed, fixed;
}
body::before, body::after { content: ""; position: fixed; pointer-events: none; inset: 0; z-index: -1; }
body::before { opacity: .33; background-image: linear-gradient(rgba(128, 90, 255, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(128, 90, 255, .15) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(transparent 2%, black 75%); }
body::after { background: transparent; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .48; filter: grayscale(.3); }
button[hidden], [hidden] { display: none !important; }

.scanlines { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: .12; background: repeating-linear-gradient(0deg, rgba(255,255,255,.1) 0, rgba(255,255,255,.1) 1px, transparent 1px, transparent 4px); mix-blend-mode: overlay; }
.app-shell { width: min(1360px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 48px; }
@media (min-width: 1100px) { .app-shell { width: min(1040px, calc(100% - 48px)); margin: 0 auto 0 clamp(24px, 5vw, 92px); } }
.marquee, .panel { border: 1px solid var(--panel-edge); box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 18px 52px rgba(0,0,0,.32); }
.marquee { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; position: relative; min-height: 148px; padding: 21px 28px; overflow: hidden; background: linear-gradient(105deg, rgba(52, 20, 111, .95), rgba(17, 6, 44, .9) 54%, rgba(0, 79, 101, .72)); border-radius: 18px 18px 8px 8px; }
.marquee::before { content: ""; position: absolute; z-index: 0; inset: 0 0 4px auto; width: min(49%, 670px); pointer-events: none; opacity: .93; background-image: linear-gradient(90deg, rgba(23, 6, 53, .96), transparent 38%), var(--arcade-background); background-repeat: no-repeat; background-position: center, right -20px top -2px; background-size: 100% 100%, 660px auto; filter: saturate(1.12) contrast(1.05); }
.marquee::after { content: ""; position: absolute; inset: auto -8% 0; height: 4px; background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan), var(--violet), var(--pink)); box-shadow: 0 0 15px var(--cyan); }
.brand-mark { display: grid; gap: 2px; position: relative; z-index: 1; width: 62px; }
.brand-mark span { display: grid; place-items: center; height: 20px; color: #1b0730; font: 16px/1 "Black Ops One", Impact, sans-serif; background: var(--gold); border: 2px solid #fff6bd; border-radius: 50%; box-shadow: 0 0 12px var(--gold); }
.brand-mark span:nth-child(2n) { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.brand-copy { position: relative; z-index: 1; }
.eyebrow, .panel-label { margin: 0; color: var(--cyan); font: 500 11px/1.3 "DM Mono", monospace; letter-spacing: .13em; }
.signal { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: pulse 1.4s infinite; }
.marquee h1 { margin: 4px 0 3px; color: #fff9df; font: clamp(31px, 5.4vw, 63px)/.96 "Black Ops One", Impact, sans-serif; letter-spacing: .025em; text-shadow: 0 3px 0 #4c1d7d, 0 0 20px var(--pink); }
.marquee h1 em { color: var(--cyan); font-style: normal; text-shadow: 0 3px 0 #08556e, 0 0 23px var(--cyan); }
.subtitle { margin: 0; color: var(--muted); font-size: 14px; }
.coin-slot { display: grid; place-items: center; position: relative; z-index: 1; width: 82px; aspect-ratio: 1; border: 2px solid var(--gold); border-radius: 13px; color: var(--gold); background: rgba(14, 6, 37, .7); box-shadow: 0 0 24px rgba(255,214,92,.22), inset 0 0 18px rgba(255,214,92,.12); transform: rotate(3deg); }
.coin-slot span { font: 10px "DM Mono", monospace; letter-spacing: .1em; }.coin-slot strong { margin-top: -5px; font: 20px "Black Ops One", Impact, sans-serif; }

.screen { margin-top: 17px; }.lobby-layout { display: grid; grid-template-columns: minmax(215px, .82fr) minmax(310px, 1fr) minmax(260px, .88fr); align-items: stretch; gap: 15px; }
.panel { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(40, 14, 86, .93), var(--panel)); border-radius: 10px; }
.panel::before { content: ""; position: absolute; top: 0; right: 0; width: 92px; height: 3px; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.lobby-intro, .room-builder, .room-list-panel { padding: 24px; }
.lobby-intro { background: linear-gradient(155deg, rgba(28, 101, 130, .73), rgba(25, 8, 55, .95)); }
h2 { margin: 6px 0 12px; font: 700 clamp(21px, 2.2vw, 29px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -.04em; }
.lobby-intro > p:not(.panel-label) { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.55; }.field-label { display: block; margin: 15px 0 7px; color: #f8e6ae; font: 500 11px "DM Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.arcade-input { width: 100%; min-height: 45px; padding: 9px 12px; color: #fff9ea; background: rgba(6, 2, 20, .68); border: 1px solid rgba(160, 126, 255, .66); border-radius: 6px; box-shadow: inset 0 1px 12px rgba(0,0,0,.35); }.arcade-input::placeholder { color: #9383ae; }.arcade-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(81,245,255,.14), inset 0 1px 12px rgba(0,0,0,.35); }
.cabinet-note { display: flex; gap: 8px; margin-top: 24px; padding: 12px 0 0; color: #d0c5e1; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; line-height: 1.45; }.cabinet-note span { color: var(--gold); }
.quick-play { display: flex; width: 100%; margin-top: 15px; }.quick-play b { color: #246519; font-size: 9px; }
.panel-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.credit-display { white-space: nowrap; padding: 4px 6px; color: var(--lime); font: 11px "DM Mono", monospace; border: 1px solid rgba(188,255,85,.5); border-radius: 3px; background: rgba(61, 94, 33, .25); }
.toggle-row { display: flex; align-items: center; gap: 9px; margin: 16px 0 20px; color: #d3c6e8; font-size: 13px; cursor: pointer; }.toggle-row input { position: absolute; opacity: 0; }.toggle-art { position: relative; display: inline-block; width: 32px; height: 18px; border-radius: 12px; background: #33234f; border: 1px solid #6e5a90; transition: .15s; }.toggle-art::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #a497bd; transition: .15s; }.toggle-row input:checked + .toggle-art { background: #4a7540; border-color: var(--lime); box-shadow: 0 0 10px rgba(188,255,85,.3); }.toggle-row input:checked + .toggle-art::after { left: 17px; background: var(--lime); }
.arcade-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 9px 15px; color: #12052b; font: 700 12px "DM Mono", monospace; letter-spacing: .07em; border: 1px solid transparent; border-radius: 5px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 4px 0 rgba(0,0,0,.24); transition: transform .12s, filter .12s; }.arcade-button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.11); }.arcade-button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(0,0,0,.2); }.primary { width: 100%; background: linear-gradient(#d7ff80, #89db3f); border-color: #e8ffad; }.secondary { color: #fff8e4; background: linear-gradient(#5d54af, #30236d); border-color: #9c8bfa; }.danger { color: #fff4ea; background: linear-gradient(#bd596f, #782542); border-color: #ff9aa5; }.compact { min-height: 35px; padding: 6px 10px; font-size: 10px; }.call { width: 100%; color: #26041b; background: linear-gradient(#ffaad8, #fa4eaa); border-color: #ffd1e9; box-shadow: inset 0 -3px 0 rgba(121,5,61,.28), 0 0 20px rgba(255,78,174,.28); }
.join-divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 18px 0 1px; color: #87799e; font: 10px "DM Mono", monospace; letter-spacing: .11em; }.join-divider::before, .join-divider::after { content: ""; height: 1px; background: rgba(255,255,255,.15); }.join-fields { display: grid; grid-template-columns: 1fr auto; gap: 8px; }.code-input { font-family: "DM Mono", monospace; letter-spacing: .15em; text-transform: uppercase; }.icon-button { display: grid; place-items: center; width: 30px; aspect-ratio: 1; color: var(--cyan); background: transparent; border: 1px solid rgba(81,245,255,.5); border-radius: 4px; font-size: 19px; }.icon-button:hover { background: rgba(81,245,255,.12); }
.room-list { display: grid; gap: 7px; min-height: 214px; max-height: 300px; margin: 14px 0 11px; padding: 0; overflow-y: auto; list-style: none; }.room-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; background: rgba(9, 3, 27, .55); border: 1px solid rgba(163,125,255,.26); border-radius: 5px; }.room-list li:hover { border-color: var(--cyan); background: rgba(35, 17, 73, .72); }.room-name { overflow: hidden; color: #fff9e8; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.room-meta { display: block; margin-top: 2px; color: #b4a6ca; font: 10px "DM Mono", monospace; }.room-list button { min-height: 31px; padding: 5px 8px; color: var(--cyan); font: 700 10px "DM Mono", monospace; background: rgba(81,245,255,.08); border: 1px solid rgba(81,245,255,.5); border-radius: 3px; }.status-line, .round-status { min-height: 18px; color: var(--lime); font: 11px/1.4 "DM Mono", monospace; }.status-line:not(:empty)::before { content: "▸ "; color: var(--cyan); }

.game-layout { display: grid; gap: 14px; margin-top: 17px; }.room-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 17px; }.room-header h2 { margin: 3px 0 0; font-size: 22px; }.room-code-display { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font: 10px "DM Mono", monospace; letter-spacing: .08em; }.room-code-display strong { color: var(--gold); font-size: 16px; letter-spacing: .12em; }.room-code-display button { color: var(--cyan); font: 10px "DM Mono", monospace; background: transparent; border: 0; }.room-code-display button:hover { color: #fff; }
.players-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.player-chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; background: rgba(18, 6, 46, .74); border: 1px solid rgba(153,116,249,.42); border-radius: 5px; }.player-chip.you { border-color: var(--cyan); box-shadow: inset 0 0 11px rgba(81,245,255,.1); }.player-chip.winner { border-color: var(--gold); box-shadow: 0 0 13px rgba(255,214,92,.2); }.player-light { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #695a83; }.player-light.online { background: var(--lime); box-shadow: 0 0 9px var(--lime); }.player-info { min-width: 0; }.player-name { overflow: hidden; color: #fef7e5; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.player-role { display: block; overflow: hidden; color: #a99abf; font: 9px "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }.player-role.ready { color: var(--lime); }
.round-layout { display: grid; grid-template-columns: minmax(215px, .78fr) minmax(330px, 1.12fr) minmax(215px, .78fr); gap: 14px; align-items: start; }.call-console, .card-console, .called-console { min-height: 495px; padding: 18px; }.console-topline { display: flex; justify-content: space-between; color: var(--cyan); font: 10px "DM Mono", monospace; letter-spacing: .1em; }.console-topline span:last-child { color: var(--muted); }.call-orb { display: grid; place-items: center; position: relative; width: min(205px, 74vw); aspect-ratio: 1; margin: 28px auto 19px; border: 7px solid #fef9de; border-radius: 50%; color: #fffce9; background: radial-gradient(circle at 35% 24%, #ffb1db 0 3%, #fa4eae 16%, #a41e76 61%, #411141 100%); box-shadow: inset -13px -16px 27px rgba(40,0,40,.4), inset 10px 11px 19px rgba(255,255,255,.16), 0 0 0 5px #52175b, 0 0 31px rgba(255,78,174,.75); }.call-orb::before { content: attr(data-letter); position: absolute; top: 14px; left: 22px; color: rgba(255,255,255,.83); font: 30px "Black Ops One", Impact, sans-serif; }.call-orb span { margin-top: 13px; font: 76px/.8 "Black Ops One", Impact, sans-serif; letter-spacing: -.06em; text-shadow: 0 4px 0 rgba(105,0,75,.6); }.call-orb.waiting { background: radial-gradient(circle at 35% 24%, #a9fbff 0 3%, #3fc1d1 17%, #126074 61%, #092640 100%); box-shadow: inset -13px -16px 27px rgba(0,15,46,.4), inset 10px 11px 19px rgba(255,255,255,.16), 0 0 0 5px #11546e, 0 0 31px rgba(81,245,255,.5); }.call-caption { min-height: 40px; margin: 0 0 14px; color: #d4c8e6; text-align: center; font-size: 13px; line-height: 1.45; }.call-controls { display: grid; gap: 9px; }.round-status { min-height: 32px; margin: 11px 0 0; text-align: center; }
.card-console { background: linear-gradient(155deg, rgba(41, 16, 90, .96), rgba(8, 36, 78, .87)); }.card-console-top { display: flex; align-items: start; justify-content: space-between; }.card-console h2 { margin-bottom: 0; }.line-count { padding: 5px 8px; color: var(--gold); font: 10px "DM Mono", monospace; border: 1px solid rgba(255,214,92,.6); border-radius: 3px; }.bingo-card-shell { margin-top: 18px; padding: 8px; background: #08041d; border: 2px solid #f6da78; border-radius: 7px; box-shadow: 0 0 0 3px #643d8e, 0 0 25px rgba(255,214,92,.17); }.bingo-columns, .bingo-card { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }.bingo-columns { margin-bottom: 4px; }.bingo-columns span { display: grid; place-items: center; min-height: 31px; color: #1d0735; font: 24px/.8 "Black Ops One", Impact, sans-serif; background: linear-gradient(#fff1a9, #e6af48); border-radius: 3px; }.bingo-card button { position: relative; aspect-ratio: 1; min-width: 0; color: #faf4df; font: clamp(19px, 3.1vw, 31px)/1 "Black Ops One", Impact, sans-serif; background: linear-gradient(145deg, #372065, #1c1040); border: 1px solid rgba(179,147,255,.45); border-radius: 3px; text-shadow: 0 2px 0 #0a0318; transition: .12s; }.bingo-card button:hover:not(:disabled) { transform: scale(1.04); z-index: 1; border-color: var(--cyan); }.bingo-card button.called:not(.marked) { color: #fffdd8; border-color: var(--cyan); box-shadow: inset 0 0 17px rgba(81,245,255,.2), 0 0 10px rgba(81,245,255,.28); }.bingo-card button.marked { color: #321526; background: linear-gradient(145deg, #f9e682, #ef9b4b); border-color: #fff3ba; text-shadow: none; }.bingo-card button.marked::after { content: "✦"; position: absolute; right: 3px; bottom: 1px; color: #e83d93; font-size: clamp(11px, 2vw, 19px); text-shadow: 0 0 4px #fff; }.bingo-card button.free { color: #17253b; background: linear-gradient(145deg, #abfbff, #51bed5); border-color: #e7ffff; font-size: clamp(10px, 1.6vw, 15px); letter-spacing: .03em; text-shadow: none; }.bingo-card button:disabled { opacity: 1; }.card-hint { margin: 14px 0 0; color: #c4b8dc; text-align: center; font-size: 12px; }
.called-console { background: linear-gradient(155deg, rgba(63, 18, 78, .84), rgba(13, 7, 37, .94)); }.called-console h2 { margin-bottom: 0; }.called-tray { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin-top: 19px; }.called-ball { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; color: #200c37; font: clamp(13px, 1.6vw, 19px) "Black Ops One", Impact, sans-serif; background: radial-gradient(circle at 34% 26%, #ffffdb, #ffd95b 38%, #d18221 100%); border: 1px solid #fff0a8; border-radius: 50%; box-shadow: inset -3px -4px 7px rgba(74,25,0,.28), 0 2px 6px rgba(0,0,0,.25); }.called-ball.latest { color: #fff9ec; background: radial-gradient(circle at 34% 26%, #ffd2eb, #ff5fb3 37%, #a72173 100%); box-shadow: inset -3px -4px 7px rgba(74,0,48,.28), 0 0 13px var(--pink); transform: scale(1.08); }.called-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 140px; color: #998cae; text-align: center; font: 12px/1.5 "DM Mono", monospace; border: 1px dashed rgba(166,130,255,.4); border-radius: 6px; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 10; max-width: min(410px, calc(100% - 36px)); padding: 13px 16px; color: #fff9ea; background: #2b1456; border: 1px solid var(--cyan); border-radius: 7px; box-shadow: 0 9px 34px rgba(0,0,0,.43), 0 0 20px rgba(81,245,255,.18); font-size: 13px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; }.toast.show { opacity: 1; transform: translateY(0); }.toast.error { border-color: var(--danger); }
.round-result { display: grid; position: fixed; z-index: 20; inset: 0; place-items: center; padding: 20px; background: rgba(5, 1, 19, .74); backdrop-filter: blur(7px); }
.round-result[hidden] { display: none; }
.round-result-card { width: min(100%, 510px); padding: clamp(26px, 5vw, 44px); text-align: center; background: linear-gradient(145deg, rgba(65, 26, 124, .98), rgba(15, 7, 48, .99)); border: 2px solid var(--gold); border-radius: 16px; box-shadow: 0 0 0 7px rgba(255,214,92,.12), 0 24px 70px rgba(0,0,0,.55), 0 0 55px rgba(255,214,92,.28); animation: result-arrive .28s ease-out both; }
.round-result.runner-up .round-result-card { border-color: var(--cyan); box-shadow: 0 0 0 7px rgba(81,245,255,.10), 0 24px 70px rgba(0,0,0,.55), 0 0 55px rgba(81,245,255,.22); }
.round-result.draw .round-result-card { border-color: #a99abf; box-shadow: 0 0 0 7px rgba(169,154,191,.10), 0 24px 70px rgba(0,0,0,.55); }
.result-trophy { display: grid; place-items: center; width: 67px; height: 67px; margin: 0 auto 16px; color: #42200a; font: 37px/1 "Black Ops One", Impact, sans-serif; background: radial-gradient(circle at 35% 27%, #fffbd1, var(--gold) 52%, #cf8526); border: 2px solid #fff3ad; border-radius: 50%; box-shadow: inset -7px -8px 13px rgba(92,46,0,.22), 0 0 24px rgba(255,214,92,.58); }
.round-result.runner-up .result-trophy { color: #08344e; background: radial-gradient(circle at 35% 27%, #e9ffff, var(--cyan) 52%, #2299bd); border-color: #caffff; box-shadow: inset -7px -8px 13px rgba(0,51,77,.18), 0 0 24px rgba(81,245,255,.5); }
.round-result.draw .result-trophy { color: #2b2240; background: radial-gradient(circle at 35% 27%, #f1eafa, #b6a8ca 52%, #725f8c); border-color: #e6ddf0; box-shadow: none; }
.round-result h2 { margin: 0; color: #fff9df; font: clamp(34px, 8vw, 58px)/.95 "Black Ops One", Impact, sans-serif; letter-spacing: .03em; text-shadow: 0 3px 0 #4c1d7d, 0 0 22px var(--pink); }
.round-result.winner h2 { color: var(--gold); text-shadow: 0 3px 0 #8a4611, 0 0 26px var(--gold); }.round-result.runner-up h2 { color: var(--cyan); text-shadow: 0 3px 0 #08556e, 0 0 26px var(--cyan); }
.result-detail { max-width: 380px; margin: 17px auto 8px; color: #eee6fa; font-size: 15px; line-height: 1.55; }.result-rematch-status { min-height: 19px; margin: 0 0 18px; color: var(--lime); font: 11px/1.45 "DM Mono", monospace; }.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.result-actions .arcade-button { width: 100%; }
@keyframes result-arrive { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { opacity: .25; box-shadow: none; } }
@media (max-width: 1040px) { .lobby-layout { grid-template-columns: minmax(250px, .8fr) minmax(320px, 1.1fr); }.room-list-panel { grid-column: 1 / -1; }.room-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 195px; }.round-layout { grid-template-columns: minmax(220px, .78fr) minmax(330px, 1.15fr); }.called-console { grid-column: 1 / -1; min-height: auto; }.called-tray { grid-template-columns: repeat(12, minmax(0, 1fr)); }.called-empty { min-height: 70px; } }
@media (max-width: 720px) { body { background-attachment: scroll, scroll, scroll; background-position: center, center, 62% center; }.app-shell { width: min(100% - 18px, 600px); padding-top: 10px; }.marquee { grid-template-columns: auto 1fr; min-height: 118px; padding: 17px 15px; gap: 13px; border-radius: 11px 11px 5px 5px; }.marquee::before { display: none; }.brand-mark { width: 43px; }.brand-mark span { height: 16px; font-size: 12px; }.coin-slot { display: none; }.marquee h1 { font-size: clamp(30px, 11vw, 49px); }.subtitle { font-size: 12px; }.lobby-layout, .round-layout { grid-template-columns: 1fr; }.room-list-panel { grid-column: auto; }.room-list { grid-template-columns: 1fr; }.room-header { flex-wrap: wrap; gap: 9px; }.room-code-display { order: 3; width: 100%; margin-left: 0; }.players-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }.call-console, .card-console, .called-console { min-height: auto; }.call-orb { width: min(186px, 60vw); margin: 18px auto 14px; }.called-console { grid-column: auto; }.called-tray { grid-template-columns: repeat(8, minmax(0, 1fr)); }.lobby-intro, .room-builder, .room-list-panel { padding: 18px; } }
@media (max-width: 420px) { .marquee h1 { font-size: 32px; }.eyebrow { font-size: 9px; }.bingo-card button { font-size: 20px; }.called-tray { grid-template-columns: repeat(6, minmax(0, 1fr)); }.room-header h2 { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Shared five-page cabinet navigation, following the sibling multiplayer layout. */
.site-nav { grid-column: 1 / -1; position: relative; z-index: 2; margin: 2px -12px -14px; }
.nav-menu { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid rgba(176, 143, 255, .44); border-radius: 6px; overflow: hidden; background: rgba(7, 2, 23, .66); }
.nav-menu a { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 11px; color: #d7c8ef; text-decoration: none; border-right: 1px solid rgba(176, 143, 255, .3); transition: .15s; }
.nav-menu a:last-child { border-right: 0; }
.nav-menu a:hover { color: #fff; background: rgba(81, 245, 255, .12); }
.nav-menu a[aria-current="page"] { color: #171027; background: linear-gradient(135deg, var(--cyan), #9bd8ff); box-shadow: inset 0 -3px 0 rgba(3, 68, 86, .35); }
.nav-icon { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; color: var(--cyan); font-size: 16px; border: 1px solid rgba(81, 245, 255, .46); border-radius: 4px; }
.nav-menu a[aria-current="page"] .nav-icon { color: #0c4055; border-color: rgba(12, 64, 85, .35); }
.nav-copy { display: grid; min-width: 0; }
.nav-label { overflow: hidden; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.nav-code { overflow: hidden; margin-top: 1px; font: 8px/1.2 "DM Mono", monospace; letter-spacing: .07em; opacity: .72; text-overflow: ellipsis; white-space: nowrap; }

.single-page-grid, .profile-layout { display: grid; gap: 15px; margin-top: 17px; }
.single-page-grid { grid-template-columns: minmax(0, 760px); }
.profile-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
.content-panel { min-height: 280px; padding: 25px; }
.content-panel > .arcade-button { margin-top: 18px; }
.link-button { text-decoration: none; }
.empty-state { max-width: 660px; margin-top: 17px; padding: 28px; }
.empty-state p:not(.panel-label) { max-width: 520px; color: var(--muted); line-height: 1.55; }

.leaderboard-list { display: grid; gap: 8px; margin: 22px 0 12px; padding: 0; list-style: none; }
.leaderboard-list li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 13px; background: rgba(9, 3, 27, .56); border: 1px solid rgba(163, 125, 255, .28); border-radius: 5px; }
.leaderboard-list li:first-child { border-color: rgba(255, 214, 92, .78); box-shadow: inset 0 0 16px rgba(255, 214, 92, .09); }
.rank-place { color: var(--gold); font: 700 16px "DM Mono", monospace; }.rank-name { overflow: hidden; color: #fff9e8; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.rank-wins { color: var(--lime); }.rank-games { color: var(--muted); }
.rank-wins, .rank-games { font: 10px "DM Mono", monospace; letter-spacing: .06em; white-space: nowrap; }

.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 21px 0 0; }
.profile-stats div { padding: 14px 10px; text-align: center; background: rgba(9, 3, 27, .56); border: 1px solid rgba(163, 125, 255, .28); border-radius: 5px; }
.profile-stats dt { color: var(--muted); font: 9px "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }.profile-stats dd { margin: 8px 0 0; color: var(--gold); font: 800 27px/1 "Black Ops One", Impact, sans-serif; }
.rules-list { display: grid; gap: 10px; margin: 22px 0; padding: 0; list-style: none; counter-reset: rules; }.rules-list li { display: grid; grid-template-columns: 35px minmax(0, 1fr); column-gap: 12px; padding: 12px; background: rgba(9, 3, 27, .56); border: 1px solid rgba(163, 125, 255, .28); border-radius: 5px; }.rules-list li::before { content: counter(rules, decimal-leading-zero); counter-increment: rules; grid-row: span 2; color: var(--cyan); font: 700 12px "DM Mono", monospace; }.rules-list strong { color: #fff9e8; }.rules-list span { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.45; }.rules-note { color: #d9cae8; font-size: 12px; line-height: 1.5; }

@media (max-width: 720px) {
  .site-nav { margin: 1px -8px -10px; }.nav-menu { grid-template-columns: repeat(5, 1fr); }.nav-menu a { justify-content: center; min-height: 47px; padding: 7px 3px; }.nav-copy { display: none; }.nav-icon { width: 27px; height: 27px; }
  .profile-layout { grid-template-columns: 1fr; }.content-panel { min-height: 0; padding: 20px; }.leaderboard-list li { grid-template-columns: 37px minmax(0, 1fr); gap: 7px 10px; }.rank-wins { grid-column: 2; }.rank-games { grid-column: 2; }.profile-stats { gap: 6px; }.profile-stats div { padding: 11px 4px; }.profile-stats dd { font-size: 22px; }
}