/* Visual layer only: no game canvas sizing, input positioning or state rules. */
body.arcade-theme {
  --bg: #0d0b18;
  --panel: #191628;
  --panel2: #211d34;
  --line: #3a334f;
  --muted: #b1a9c6;
  --primary: #9370ff;
  --cyan: #70efce;
  --gold: #ffd478;
  background: radial-gradient(ellipse at 10% 0%, #4e23632b, transparent 45%), radial-gradient(ellipse at 95% 25%, #173d4929, transparent 40%), #0d0b18;
}
.arcade-theme .topbar {
  background: #100d1dea;
  border-bottom-color: #6d4d8f66;
  box-shadow: 0 1px 0 #f3a6ff0d;
}
.arcade-theme .brand { color: #ffdc91; text-shadow: 0 0 20px #ffbc502a; }
.arcade-theme :is(button, a, input, textarea, select):focus-visible { outline: 3px solid #ffdc91; outline-offset: 4px; }
.arcade-theme .eyebrow { color: #b4a0ef; font-family: ui-monospace, "Cascadia Code", monospace; font-size: 11px; letter-spacing: .15em; }
.arcade-theme .panel { border-color: #433954; background: linear-gradient(145deg, #201b31, #141321); box-shadow: 0 5px 0 #080711, 0 16px 40px #0003; }
.arcade-theme button.primary, .arcade-theme a.primary { background: #9875fa; color: #100b21; box-shadow: 0 4px 0 #503380, inset 0 1px 0 #ffffff55; }
.arcade-theme button.accent { background: #80edc8; color: #10241f; box-shadow: 0 4px 0 #287962, inset 0 1px 0 #ffffff77; }
.arcade-theme button:active:not(:disabled) { transform: translateY(2px); }
.arcade-theme :is(input, textarea, select) { border-color: #4b405f; background-color: #100f1c; color: #f3f5ff; }
.arcade-theme input:focus { border-color: #b69aff; box-shadow: 0 0 0 3px #b69aff20; }
.arcade-theme .ghost:hover:not(:disabled) { background: #ffffff08; border-color: #aa92d4; }

/* The arcade entrance. Decorative cabinet is deliberately non-interactive. */
.arcade-home .home-page { padding-top: 26px; }
.arcade-home .home-hero {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(230px, .8fr); align-items: center;
  gap: 32px; margin: 0 0 38px; padding: 34px 38px;
  border: 1px solid #6c4c8266; border-radius: 22px;
  background: radial-gradient(ellipse at 85% 60%, #87409738, transparent 55%), linear-gradient(115deg, #20172d, #141522);
  box-shadow: inset 0 1px 0 #ffffff0b, 0 6px 0 #080610;
}
.arcade-home .home-hero::after { width: 400px; height: 180px; right: -30px; bottom: -100px; border-radius: 50%; border-color: #ad6bdf33; pointer-events: none; }
.arcade-hero-copy { position: relative; z-index: 1; }
.arcade-home .home-hero h1 { max-width: 600px; margin: 13px 0 17px; font-size: clamp(32px, 4.1vw, 48px); line-height: 1.22; letter-spacing: -.055em; word-break: keep-all; }
.arcade-home .home-hero .arcade-hero-copy > p:not(.eyebrow) { max-width: 480px; color: #c8bfd7; font-size: 14px; line-height: 1.85; word-break: keep-all; }
.arcade-home .home-trust { gap: 8px; margin-top: 22px; }
.arcade-home .home-trust span { color: #f2d9a4; border: 1px solid #94754855; border-radius: 6px; background: #ffd47808; }
.arcade-open { display: inline-flex; align-items: center; gap: 8px; color: #8aedcc; font: 700 10px ui-monospace, monospace; letter-spacing: .15em; margin-bottom: 12px; }
.arcade-open::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #80edc8; box-shadow: 0 0 10px #80edc866; }
.arcade-cabinet { position: relative; width: min(100%, 246px); justify-self: center; padding: 11px 12px 16px; border: 2px solid #9d6ac0; border-radius: 14px 14px 8px 8px; background: linear-gradient(110deg, #3e2955, #22172e); box-shadow: 7px 7px 0 #080810, 0 0 50px #b961e01c; transform: rotate(3deg); }
.cabinet-sign { padding: 10px 2px; text-align: center; border: 1px solid #b177ab; border-radius: 5px; background: #21152b; color: #ffe4a5; font: 900 19px ui-monospace, monospace; letter-spacing: .16em; text-shadow: 0 0 12px #ffc07555; }
.cabinet-sign span { color: #eaa4ef; }
.cabinet-screen { overflow: hidden; margin-top: 10px; padding: 12px 10px 9px; border: 7px solid #100f1c; border-radius: 10px; background: #141329; box-shadow: inset 0 0 0 1px #7a568e; text-align: center; }
.cabinet-screen small { color: #bfa4dc; font: 8px ui-monospace, monospace; letter-spacing: .13em; }
.cabinet-screen img { width: 100%; height: 96px; object-fit: contain; display: block; }
.cabinet-screen b { color: #82ebce; font: 700 12px ui-monospace, monospace; letter-spacing: .05em; }
.cabinet-controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 15px 10px 2px; }
.cabinet-controls i { margin-right: auto; width: 17px; height: 17px; border-radius: 50%; background: #ed87a8; box-shadow: 0 4px 0 #8a4464, 0 7px 0 4px #15111f; }
.cabinet-controls span { width: 12px; height: 12px; border-radius: 50%; background: #ffd478; box-shadow: 0 3px 0 #92703e; }
.cabinet-controls span:last-child { background: #80edc8; box-shadow: 0 3px 0 #3c8e75; }

/* Four playable cabinets. Titles and descriptions remain actual HTML text. */
.arcade-home .home-solo { margin: 34px 0 42px; }
.arcade-home .section-title { gap: 12px; flex-wrap: wrap; }
.arcade-home .section-title h2 { margin: 5px 0 9px; font-size: 23px; letter-spacing: -.04em; }
.arcade-home .home-solo > .muted { max-width: 770px; font-size: 13px; line-height: 1.8; }
.arcade-home .solo-game-grid { gap: 16px; margin-top: 22px; }
.arcade-home .solo-game-card {
  --cabinet-color: #80edc8;
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 256px;
  padding: 14px 12px 12px; border: 1px solid var(--cabinet-color); border-radius: 12px 12px 7px 7px;
  background: linear-gradient(145deg, #262135, #151221); box-shadow: 0 6px 0 #080710, inset 0 0 0 4px #ffffff03;
}
.arcade-home .solo-platform { --cabinet-color: #bf9eff; }
.arcade-home .solo-falling { --cabinet-color: #ffba78; }
.arcade-home .solo-laser { --cabinet-color: #ff96b2; }
.arcade-home .solo-game-card > strong { order: 2; display: block; width: 100%; height: 114px; margin: 12px 0 13px; overflow: hidden; border: 5px solid #080b14; border-radius: 7px; background: #101322; }
.arcade-home .solo-game-card > strong img { width: 100%; height: 100%; display: block; object-fit: cover; }
.arcade-home .solo-game-card > span { order: 1; text-align: center; }
.arcade-home .solo-game-card b { font-size: 15px; color: var(--cabinet-color); font-weight: 850; text-shadow: 0 0 16px #ffffff14; }
.arcade-home .solo-game-card small { font: 10px ui-monospace, monospace; color: #c2b8d2; margin-top: 6px; }
.arcade-home .solo-game-card > i { order: 3; padding: 9px; text-align: center; color: #100e18; background: var(--cabinet-color); border-radius: 5px; font: 800 11px ui-monospace, monospace; letter-spacing: .035em; box-shadow: 0 3px 0 #0007; }
.arcade-home .solo-game-card::after { content: ''; order: 4; width: 23px; height: 4px; margin: 12px auto 0; border: 1px solid #746585; border-radius: 2px; background: #080610; }
@media(hover:hover) {
  .arcade-home .solo-game-card:hover { transform: translateY(-5px); border-color: var(--cabinet-color); box-shadow: 0 9px 0 #080710, 0 0 24px #a47cf51a; }
  .arcade-home .solo-game-card:hover > strong { border-color: #242139; }
}
.arcade-home .home-quick-guide { background: #171420; border-style: dashed; border-color: #655174; border-radius: 9px; }
.arcade-home .home-quick-guide > strong { color: #ffda98; font-size: 13px; }
.arcade-home .category-card { border-radius: 12px; background: linear-gradient(130deg, #211b31, #151320); box-shadow: 0 4px 0 #080710; }
.arcade-home .category-card > strong { color: #b59ce76b; }
.arcade-home .category-card h2 { font-size: 18px; }
.arcade-home .home-game { border-radius: 10px; box-shadow: 0 4px 0 #080710; }
.arcade-home .home-game > strong { color: #c6a6ff; }
.arcade-home .home-game:hover { border-color: #aa88e0; }
.arcade-home .home-intro, .arcade-home .home-faq { color: #b8afc9; }
.arcade-home .home-faq h2, .arcade-home .home-intro h2 { color: #eee7fc; }
.arcade-home .home-public-rooms { border-top: 2px solid #80edc8; }

/* High-score board; row order and displayed scores still come from the API. */
.arcade-theme .home-rankings { border: 1px solid #816b49; border-top: 3px solid #ffd478; border-radius: 13px; background: radial-gradient(ellipse at 95% 0%, #ffd4780b, transparent 50%), #15131f; }
.arcade-theme .home-rankings .eyebrow { color: #ffda91; }
.arcade-theme .ranking-list { padding: 7px; border-radius: 9px; background: #0b0c15; }
.arcade-theme .ranking-list:empty { padding: 0; }
.arcade-theme .ranking-list li { border: 0; border-bottom: 1px dashed #393249; border-radius: 3px; background: #14121f; font-size: 13px; }
.arcade-theme .ranking-list li:first-child { background: #ffd4780e; border-left: 3px solid #ffd478; }
.arcade-theme .ranking-list .score { color: #ffdc91; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.arcade-theme .ranking-list .rank { font-family: ui-monospace, monospace; }
.arcade-theme .ranking-periods { border: 1px solid #3e354e; background: #0d0c16; border-radius: 7px; }
.arcade-theme .ranking-games button.active, .arcade-theme .ranking-periods button.active { color: #ffe3a4; background: #ffd47812; border-color: #c6a260; }
.arcade-theme #my-ranking { border: 1px dashed #786148; border-radius: 8px; background: #ffd47808; color: #ffe1a4; padding: 16px 12px; line-height: 1.7; }

/* Waiting room and account screens share the cabinet frame, not its geometry. */
.arcade-theme .room-code-box { border: 1px solid #ad8a57; border-radius: 8px; background: #15121e; box-shadow: 0 4px 0 #080710; }
.arcade-theme .room-code-box strong { color: #ffdc91; font-family: ui-monospace, monospace; text-shadow: 0 0 16px #ffc85725; }
.arcade-theme .game-picker { border-color: #685080; background: linear-gradient(135deg, #211a32, #15131f); box-shadow: 0 5px 0 #080710; }
.arcade-theme .game-choice { border-radius: 8px; border-color: #453553; background: #14101e; }
.arcade-theme .game-choice.selected { border-color: #80edc8; background: #80edc80c; box-shadow: inset 0 -3px 0 #80edc8; }
.arcade-theme .player-list li { margin-top: 8px; padding: 12px; border: 1px solid #44374f; border-radius: 9px; background: #0e0e19; }
.arcade-theme .player-list .avatar { flex-shrink: 0; border-radius: 8px; color: #e2d2ff; border: 1px solid #80609b; background: #362549; }
.arcade-theme .player-list .name { min-width: 0; overflow-wrap: anywhere; }
.arcade-theme .state.ready { color: #8cf5d2; border: 1px solid #80edc855; background: #80edc80c; border-radius: 5px; }
.arcade-theme .lobby-actions { border-top: 3px solid #80edc8; }
.arcade-theme .account-panel { border: 1px solid #8c68ae; border-top: 3px solid #c3a0ff; border-radius: 14px; box-shadow: 0 8px 0 #080710, 0 25px 80px #0008; }
.arcade-theme .account-tabs { background: #100e1b; border: 1px solid #4e3b60; border-radius: 7px; }
.arcade-theme .account-tabs button.active { color: #e5d5ff; background: #a879ff22; }
.arcade-theme .account-panel h2 { color: #f2e8ff; letter-spacing: -.04em; }
.arcade-theme .result-panel { border: 1px solid #b99455; border-top: 3px solid #ffd478; border-radius: 15px; background: radial-gradient(ellipse at 50% 0%, #ffd47813, transparent 55%), #191423; }
.arcade-theme .result-panel > .eyebrow { color: #ffe0a0; letter-spacing: .2em; }
.arcade-theme .rank-list li:first-child { border-radius: 8px; background: #ffd4780a; }
.arcade-theme .official-record-result { border-style: dashed; border-color: #80edc866; background: #80edc808; }
.arcade-theme .result-actions { gap: 12px; }
.arcade-theme .result-actions a { display: flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 10px; font-size: 13px; }
.arcade-theme .game-header { border-bottom-color: #70518b66; background: #110e1c; }
.arcade-theme .site-footer { border-top-color: #342a43; }

@media(max-width: 800px) {
  .arcade-home .home-hero { grid-template-columns: minmax(0, 1fr) 190px; padding: 28px; gap: 20px; }
  .arcade-cabinet { width: 185px; padding: 8px; }
  .cabinet-sign { font-size: 14px; }
  .cabinet-screen { border-width: 5px; padding: 10px 4px; }
  .cabinet-screen img { height: 72px; }
  .cabinet-screen small { font-size: 6px; }
  .cabinet-screen b { font-size: 10px; }
  .arcade-home .home-hero h1 { font-size: 35px; }
}
@media(max-width: 560px) {
  .arcade-home .home-page { padding-top: 18px; }
  .arcade-home .home-hero { display: block; padding: 25px 22px; margin-bottom: 28px; border-radius: 15px; }
  .arcade-home .arcade-cabinet { display: none; }
  .arcade-home .home-hero h1 { font-size: 34px; max-width: 360px; }
  .arcade-home .home-hero .arcade-hero-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.8; }
  .arcade-open { margin-bottom: 4px; }
  .arcade-home .home-trust { margin-top: 17px; gap: 6px; }
  .arcade-home .home-trust span { padding: 5px 7px; font-size: 10px; }
  .arcade-home .home-solo { margin: 28px 0 32px; }
  .arcade-home .section-title h2 { font-size: 21px; }
  .arcade-home .solo-game-grid { gap: 13px 11px; margin-top: 16px; }
  .arcade-home .solo-game-card { min-height: 213px; padding: 12px 9px 9px; }
  .arcade-home .solo-game-card b { font-size: 13px; }
  .arcade-home .solo-game-card small { font-size: 9px; }
  .arcade-home .solo-game-card > strong { height: 89px; margin: 10px 0; border-width: 4px; }
  .arcade-home .solo-game-card > i { padding: 9px 3px; font-size: 10px; }
  .arcade-home .home-rankings > .section-title { align-items: flex-start; }
  .arcade-theme .player-list li { padding: 10px 7px; gap: 8px; }
  .arcade-theme .player-list .name { font-size: 13px; }
  .arcade-theme .result-actions a { min-height: 44px; }
  .arcade-theme .ranking-games { margin-right: 0; }
}
@media(prefers-reduced-motion:reduce) {
  .arcade-theme :is(button, a) { transition: none; }
  .arcade-home .solo-game-card:hover { transform: none; }
}
.low-power-mode .arcade-cabinet, .low-power-mode .arcade-theme .panel { box-shadow: none; }

/* Five record games retain readable cards on tablet and phone. */
@media (min-width: 1100px) { .arcade-home .solo-game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.arcade-home .solo-blast { --cabinet-color: #ffc857; }