/* Page shell and two-column arcade layout. */
    * { box-sizing: border-box; }
    html { min-height: 100%; overflow-x: hidden; overscroll-behavior-x: none; overscroll-behavior-y: auto; background: #000; }
    body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; overflow-x: hidden; overscroll-behavior-x: none; overscroll-behavior-y: auto; background: radial-gradient(ellipse at 50% 115%, #142450 0, #070c20 38%, #02040c 72%, #000 100%); color: #d9f7c8; font: 16px "Trebuchet MS", system-ui, sans-serif; }
    body::before, body::after { content: ''; position: fixed; z-index: 0; inset: 0; pointer-events: none; }
    body::before {
      background-image:
        radial-gradient(circle, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle, #8ff7ff 0 1px, transparent 1.7px),
        radial-gradient(circle, #fff 0 1.5px, transparent 2px),
        radial-gradient(circle, #b9c8ff 0 .7px, transparent 1.2px);
      background-position: 17px 23px, 71px 44px, 132px 91px, 39px 118px;
      background-size: 113px 127px, 173px 149px, 251px 227px, 79px 83px;
      opacity: .7;
      animation: starTwinkle 5s ease-in-out infinite alternate;
    }
    body::after {
      background:
        radial-gradient(ellipse at 13% 25%, #284d9a26 0, transparent 28%),
        radial-gradient(ellipse at 88% 72%, #8f2ab524 0, transparent 30%),
        radial-gradient(circle at 72% 15%, #fff 0 1px, transparent 2px),
        radial-gradient(circle at 28% 78%, #fff58a 0 1px, transparent 2px);
      opacity: .85;
    }
    html.iphone-device,
    html.iphone-device body {
      touch-action: pan-x pan-y;
      -webkit-text-size-adjust: 100%;
    }
    html.iphone-device button,
    html.iphone-device input,
    html.iphone-device [role="button"] {
      touch-action: manipulation;
    }
    html.iphone-device canvas,
    html.iphone-device .touch-game-controls {
      touch-action: none;
    }
    main { position: relative; z-index: 1; width: min(96vw, 1080px); text-align: center; }
    .arcade-layout { display: grid; grid-template-columns: minmax(0, 600px) minmax(390px, 1fr); gap: 28px; align-items: start; }
    .game-column { min-width: 0; }
    h1 { margin: 0 0 8px; letter-spacing: .2em; color: #ecffff; text-shadow: 0 0 4px #fff, 0 0 10px #5ff, 0 0 24px #00d9ff, 0 0 42px #00d9ff; animation: neonFlicker 5s infinite; }
    .game-subtitle { margin: -4px 0 14px; color: #ff5dcb; font: 800 18px ui-monospace, monospace; letter-spacing: .28em; text-shadow: 0 0 6px #fff, 0 0 13px #ff5dcb, 0 0 24px #b84dff; animation: warpPulse 1.5s ease-in-out infinite alternate; }
    .game-subtitle[hidden] { display: none; }
    .title {
  margin: 0 0 14px;
  transform: none;
}

.game-logo {
  display: block;
  width: min(340px, 80vw);
  height: auto;
  margin: 0 auto;
}
    .game-logo {
  display: block;
  width: min(500px, 90vw);
  height: auto;
  margin: 0 auto 12px;
}
    /* Score bar and persistent records panel. */
    .game-panel[hidden] { display: none; }
    #warp-exit { display: none; }
    .cheat-code-box { position: absolute; z-index: 2; right: calc(50% + 300px); top: 50px; display: grid; grid-template-columns: 1fr 78px; gap: 8px; width: 330px; margin: 0; padding: 13px; border: 2px solid #ff5dcb; border-radius: 8px; background: #090716; color: #eaffff; text-align: center; box-shadow: 0 0 18px #ff5dcb55, inset 0 0 12px #b84dff22; }
    .cheat-code-box h2 { grid-column: 1 / -1; margin: 0 0 2px; color: #ff83dd; font: 800 14px ui-monospace, monospace; letter-spacing: .12em; text-shadow: 0 0 8px #ff5dcb; }
    .cheat-code-box input { width: 100%; padding: 8px; border: 1px solid #00d9ff; border-radius: 4px; outline: none; background: #020712; color: #fff; font: 700 13px ui-monospace, monospace; box-shadow: inset 0 0 8px #00d9ff33; }
    .cheat-code-box input:focus { box-shadow: 0 0 10px #00d9ff, inset 0 0 8px #00d9ff33; }
    @media (max-width: 600px) and (hover: none) and (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}
    .cheat-code-box button { width: 100%; margin: 0; padding: 7px 4px; border: 1px solid #00d9ff; background: #101d35; color: #8ff7ff; font: 800 11px ui-monospace, monospace; }
    .cheat-code-note { grid-column: 1 / -1; margin: 1px 0 0; color: #fff58a; font: 10px/1.35 ui-monospace, monospace; text-shadow: none; }
    .cheat-code-status { grid-column: 1 / -1; min-height: 13px; margin: -2px 0 0; color: #ff83dd; font: 800 10px ui-monospace, monospace; text-shadow: 0 0 6px #ff5dcb; }
    .bar { display: flex; justify-content: space-between; margin: 10px 2px 35px; transform: translateY(25px); color: #eaffff; letter-spacing: .06em; text-shadow: 0 0 6px #00d9ff, 0 0 14px #00d9ff88; }
    .bar b { color: #fff; text-shadow: 0 0 5px #fff, 0 0 14px #b84dff; }
    .bar b.warp-score-pulse { animation: warpScorePulse .35s ease-in-out 3 alternate; }
    .warp-bonus-status { height: 18px; margin: -5px 0 2px; color: transparent; font: 800 12px ui-monospace, monospace; letter-spacing: .18em; transition: color .18s, text-shadow .18s; }
    .warp-bonus-status.active { color: #ff83dd; text-shadow: 0 0 6px #fff, 0 0 14px #ff5dcb, 0 0 24px #00d9ff; }
    .game-note.note-flash {
      color: #fff58a;
      text-shadow: 0 0 6px #fff, 0 0 14px #ffb300, 0 0 24px #00d9ff;
      animation: gameNoteFlash .55s steps(2, end) infinite;
    }
    .game-note-slot { display: contents; }
    html.iphone-device .game-note-slot {
      position: relative;
      display: block;
      width: 100%;
      height: 40px;
      margin: -5px 0 2px;
    }
    html.iphone-device .game-note-slot > .game-note {
      position: absolute;
      z-index: 2;
      inset: 0;
      display: grid;
      width: 100%;
      height: 40px;
      margin: 0;
      place-items: center;
      line-height: 1.15;
    }
    html.iphone-device .game-note-slot > .game-note:empty {
      pointer-events: none;
    }
    html.iphone-device .game-note-slot > .game-actions {
      position: absolute;
      z-index: 1;
      inset: 0;
      display: flex;
      width: 100%;
      height: 40px;
      margin: 0;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    html.iphone-device .game-note-slot > .game-actions > [hidden] {
      display: none !important;
    }
    html.iphone-device .game-note-slot > .game-actions > button:not([hidden]) {
      flex: 1 1 0;
      min-width: 0;
      min-height: 32px;
      margin: 0;
      padding: 6px 2px;
      font-size: clamp(8px, 2.7vw, 11px);
      line-height: 1;
      white-space: nowrap;
    }
    html.iphone-device .game-note-slot > .game-note:not(:empty) + .game-actions {
      visibility: hidden;
      pointer-events: none;
    }
    .records-panel { position: relative; left: 150px; top: -50px; margin-top: 25px; padding: 18px; border: 3px solid #b84dff; border-radius: 10px; background: linear-gradient(180deg, #100c24, #050711); box-shadow: 0 0 24px #b84dff55, inset 0 0 18px #00d9ff12; color: #eaffff; }
    .records-panel h2 { margin: 0 0 14px; color: #fff; font-size: 25px; letter-spacing: .14em; text-shadow: 0 0 6px #fff, 0 0 15px #b84dff, 0 0 28px #00d9ff; }
    .solo-tier-picker { display:flex; align-items:end; gap:8px; margin:-5px 0 13px; min-height:54px; }.solo-tier-picker button { display:grid; justify-items:center; gap:3px; min-width:48px; border:0; padding:0; background:transparent; color:#9cb0c9; font:800 8px ui-monospace,monospace; cursor:pointer; }.solo-tier-medal { display:block; width:35px; height:35px; background:url('../medals/tier-medals-v1.png') 0 center/300% auto no-repeat; filter:brightness(.82); }.solo-tier-medal.silver { background-position:50% center; }.solo-tier-medal.bronze { background-position:100% center; }.solo-tier-medal.overall { display:grid; place-items:center; border:2px solid #58e9ff; border-radius:50%; background:none; color:#58e9ff; font-size:22px; text-shadow:0 0 9px #58e9ff; }.solo-tier-picker button.active { color:#fff; text-shadow:0 0 8px #58e9ff; }.solo-tier-picker button.active .solo-tier-medal { transform:scale(1.1); filter:none; }.solo-tier-picker button.selected-tier { order:-1; min-width:80px; }.solo-tier-picker button.selected-tier .solo-tier-medal { width:52px; height:52px; }.solo-tier-picker button.selected-tier .solo-tier-medal.overall { font-size:32px; }
    .player-name { display: flex; gap: 9px; align-items: center; justify-content: center; margin-bottom: 15px; color: #8ff7ff; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
    .player-name input { width: 130px; padding: 8px 9px; border: 2px solid #00d9ff; border-radius: 4px; outline: none; background: #020712; color: #fff; font: 700 16px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 0 9px #00d9ff33; }
    .player-name input:focus { box-shadow: 0 0 12px #00d9ff, inset 0 0 9px #00d9ff33; }
    .player-name { position: relative; }
    .player-name select[hidden] { display: none; }
    .selected-country-flag { display: grid; box-sizing: border-box; width: 42px; height: 30px; margin: 0; padding: 2px; overflow: hidden; place-items: center; border: 2px solid #00d9ff; border-radius: 4px; background: #020712; font: 24px/1 system-ui, sans-serif; box-shadow: inset 0 0 9px #00d9ff33; cursor: pointer; }
    .selected-country-flag:hover, .selected-country-flag:focus { background: #07152a; box-shadow: 0 0 12px #00d9ff, inset 0 0 9px #00d9ff33; }
    .selected-country-flag img { display: block; width: 100%; height: 100%; border: 0; object-fit: fill; box-shadow: 0 0 7px #00d9ff77; }
    .country-menu { position: absolute; z-index: 30; top: calc(100% + 5px); right: 42px; width: 235px; max-height: 310px; padding: 5px; overflow-y: auto; border: 2px solid #00d9ff; border-radius: 6px; background: #030817f8; box-shadow: 0 0 20px #00d9ffaa; }
    .country-menu[hidden] { display: none; }
    .country-option { display: grid; width: 100%; grid-template-columns: 38px 1fr; align-items: center; gap: 9px; margin: 0; padding: 7px 8px; border: 0; border-radius: 3px; background: transparent; color: #eaffff; text-align: left; font: 700 12px ui-monospace, monospace; }
    .country-option:hover, .country-option.active { background: #17304d; color: #fff58a; }
    .country-option .country-option-flag { display: grid; box-sizing: border-box; width: 34px; height: 23px; overflow: hidden; place-items: center; border: 1px solid #ffffff88; font: 22px/1 system-ui, sans-serif; }
    .country-option img { display: block; width: 100%; height: 100%; border: 0; object-fit: fill; }
    .player-name > #save-player-name { margin: 0; padding: 8px 12px; border: 1px solid #00d9ff; background: #143a46; color: #fff; box-shadow: 0 0 8px #00d9ff66; }
    .player-name > #save-player-name:disabled { cursor: not-allowed; opacity: .35; background: #17202a; box-shadow: none; }
    button.demo-press { transform: translateY(2px) scale(.97); filter: brightness(1.65); box-shadow: 0 0 16px #fff58acc !important; }
    .player-name.needs-name { animation: namePromptFlash .55s ease-in-out infinite alternate; }
    .player-name.needs-name input { border-color: #fff58a; }
    .records-panel.score-entry-deferred .player-name { pointer-events: none; opacity: .42; filter: grayscale(.4); }
    .game-canvas-wrap { position:relative; display:table; max-width:100%; margin:0 auto; }
    .solo-gameover-choices { position:absolute; z-index:8; bottom:8%; left:50%; width:min(92%, 450px); box-sizing:border-box; margin:0; padding:11px 14px 13px; border:2px solid #fff58a; border-radius:8px; background:linear-gradient(135deg,#130d1feF,#071929f2); color:#fff; text-align:center; transform:translateX(-50%); box-shadow:0 0 18px #ffb30088,inset 0 0 16px #00d9ff22; }
    .solo-gameover-choices[hidden] { display: none; }
    .solo-gameover-choices strong { display: block; color: #fff58a; font: 900 17px/1 ui-monospace, monospace; letter-spacing: .13em; text-shadow: 0 0 10px #ffb300; }
    .solo-gameover-choices p { margin: 7px 0 10px; color: #8ff7ff; font: 700 11px/1.2 ui-monospace, monospace; letter-spacing: .1em; }
    .solo-gameover-choice-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
    .solo-gameover-choice-actions button { min-width: 145px; margin: 0; border: 1px solid #00d9ff; background: #102844; color: #eaffff; font: 800 12px ui-monospace, monospace; letter-spacing: .06em; box-shadow: 0 0 10px #00d9ff55; }
    #solo-revive-choice { border-color: #9dff4d; color: #d8ffae; background: #18391d; box-shadow: 0 0 11px #9dff4d66; }
    #solo-revive-choice.watch-ad-option { display:inline-flex; align-items:center; justify-content:center; gap:9px; }
    #solo-revive-choice[hidden] { display:none !important; }
    #solo-revive-choice.watch-ad-option::before { content:""; width:38px; height:28px; flex:0 0 38px; background:url('../icons/watch-ad-clapperboard.svg') center/contain no-repeat; filter:drop-shadow(0 0 4px #9dff4d88); }
    #solo-quit-choice { border-color: #ff75cb; color: #ffd0ee; background: #37152d; box-shadow: 0 0 11px #ff5dcb55; }
    .unsaved-confirm { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; background: #000b; }
    .unsaved-confirm[hidden] { display: none; }
    .unsaved-confirm-box { width: min(430px, 88vw); padding: 22px; border: 3px solid #ff5dcb; border-radius: 10px; background: #090716; color: #fff; box-shadow: 0 0 28px #ff5dcb99, inset 0 0 18px #00d9ff22; }
    .unsaved-confirm-box p { margin: 0 0 16px; color: #fff; font: 800 17px/1.45 ui-monospace, monospace; text-shadow: 0 0 8px #ff5dcb; }
    .unsaved-confirm-actions { display: flex; justify-content: center; gap: 12px; }
    .unsaved-confirm-actions button { min-width: 100px; margin: 0; border: 1px solid #00d9ff; background: #101d35; color: #8ff7ff; }
    .demo-status { position: fixed; z-index: 15; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 9px 18px; border: 2px solid #fff58a; border-radius: 5px; background: #090716; color: #fff58a; font: 800 13px ui-monospace, monospace; letter-spacing: .12em; text-shadow: 0 0 8px #ffb300; box-shadow: 0 0 18px #ffb30088; animation: demoStatusPulse .75s ease-in-out infinite alternate; }
    .demo-status[hidden] { display: none; }
    .record-status { min-height: 16px; margin: -7px 0 10px; color: #fff58a; font: 700 11px ui-monospace, monospace; letter-spacing: .08em; }
    .score-share-prompt { margin:-3px 0 10px; padding:9px; border:1px solid #26dff4; border-radius:7px; background:#071629; color:#c8fbff; text-align:center; font:800 10px ui-monospace,monospace; letter-spacing:.08em; box-shadow:0 0 12px #00d9ff33; }
    .score-share-prompt > div { display:flex; gap:7px; margin-top:8px; }
    .score-share-prompt button { flex:1; padding:7px 6px; border:1px solid #31e4f6; border-radius:5px; background:#0b2940; color:#d9ffff; font:800 10px ui-monospace,monospace; letter-spacing:.06em; cursor:pointer; }
    .score-share-prompt button:last-child { border-color:#8268a8; background:#171025; color:#dfd2ff; }
    .records-table-wrap { height: 410px; min-height: 410px; overflow-x: auto; overflow-y: auto; overscroll-behavior-x: contain; scrollbar-color: #00d9ff #091126; scrollbar-width: thin; }
    .records-table { width: 100%; min-width: 670px; border-collapse: collapse; table-layout: fixed; font: 11px ui-monospace, "SFMono-Regular", monospace; }
    .records-table th { padding: 7px 3px; border-bottom: 2px solid #00d9ff; color: #ff5dcb; letter-spacing: .06em; text-shadow: 0 0 7px #ff5dcb; }
    .records-table td { padding: 6px 3px; border-bottom: 1px solid #243456; color: #dffcff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .records-table .player-name-cell > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .records-table .player-name-cell.name-overflow { position: relative; overflow: visible; cursor: pointer; }
    .records-table .player-name-cell.name-overflow::after { position: absolute; z-index: 20; left: 0; top: calc(100% + 3px); max-width: min(240px, 72vw); padding: 6px 8px; border: 1px solid #00d9ff; border-radius: 4px; background: #050711f5; color: #fff; font: 700 11px ui-monospace, monospace; line-height: 1.2; white-space: normal; content: attr(data-full-name); opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity .12s, transform .12s; box-shadow: 0 0 12px #00d9ff88; }
    .records-table .player-name-cell.name-overflow:hover::after, .records-table .player-name-cell.name-overflow:focus-visible::after, .records-table .player-name-cell.name-overflow.show-full-name::after { opacity: 1; transform: translateY(0); }
    .records-table .flag-cell { position: relative; padding: 2px 1px; font: 22px/1.15 system-ui, sans-serif; overflow: visible; text-overflow: clip; cursor: default; }
    .records-table .flag-cell img { display: block; width: 30px; height: 20px; margin: auto; border: 1px solid #ffffff88; object-fit: cover; box-shadow: 0 0 5px #00d9ff66; }
    .records-table .flag-cell::after { position: absolute; z-index: 12; left: 34px; top: 50%; padding: 6px 9px; border: 1px solid #00d9ff; border-radius: 4px; background: #050711f5; color: #fff; font: 700 11px ui-monospace, monospace; white-space: nowrap; content: attr(data-country); opacity: 0; pointer-events: none; transform: translate(4px, -50%); transition: opacity .12s, transform .12s; box-shadow: 0 0 12px #00d9ff88; }
    .records-table .flag-cell:hover::after { opacity: 1; transform: translate(0, -50%); }
    .records-table .latest-rank img { width: 24px; height: 16px; margin: 0 4px -3px 0; border: 1px solid #ffffff88; object-fit: cover; }
    .records-table tr:first-child td { color: #fff58a; text-shadow: 0 0 7px #ffb300; }
    .records-table tbody tr.recent-record td { color: #ff83dd; background: #ff5dcb16; text-shadow: 0 0 8px #ff5dcb; }
    .records-table tbody tr.latest-rank td { padding: 10px 4px 4px; border-top: 2px solid #b84dff; border-bottom: 0; color: #8ff7ff; background: transparent; text-align: center; white-space: normal; text-shadow: 0 0 7px #00d9ff; }
    .records-table tbody tr.recent-flash td { animation: recentScoreFlash .45s steps(2, end) infinite; }
    .records-table .rank { width: 42px; } .records-table .flag { width: 34px; } .records-table .name { width: 96px; } .records-table .score { width: 52px; } .records-table .time { width: 58px; } .records-table .kills { width: 43px; } .records-table .warps { width: 46px; } .records-table .revives { width: 58px; } .records-table .date { width: 68px; } .records-table .submitted { width: 78px; }
    .empty-records { padding: 65px 10px; color: #7086a8; font: 13px ui-monospace, monospace; letter-spacing: .08em; }
    .record-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 14px; }
    .record-filters button { margin: 0; padding: 8px 3px; border: 1px solid #00d9ff; background: #091126; color: #83f4ff; font: 700 11px ui-monospace, monospace; text-transform: uppercase; }
    .record-filters button.active { background: #b84dff; color: #fff; box-shadow: 0 0 12px #b84dff; }
    /* Legacy file-to-sound-version transfer is superseded by shared record sync. */
    #transfer-records { display: none !important; }
    .records-file-link { display: block; margin-top: 10px; color: #8ff7ff; font: 700 10px ui-monospace, monospace; letter-spacing: .08em; }
    /* Hover and keyboard-focus help card; raised slightly to clear the tilted 3D board. */
    .read-me { position: relative; display: inline-block; margin-top: 4px; transform: translateY(-8px); }
    .read-me[hidden] { display: none; }
    .read-me-trigger { padding: 9px 20px; border: 2px solid #fff58a; border-radius: 4px; background: #241b05; color: #fff58a; font: 800 13px ui-monospace, monospace; letter-spacing: .16em; text-shadow: 0 0 7px #ffb300; box-shadow: 0 0 12px #ffb30066, inset 0 0 10px #ffb30022; cursor: help; }
    .read-me-card { position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 16px); width: min(430px, 86vw); padding: 16px 18px; border: 2px solid #00d9ff; border-radius: 7px; background: #050a16f5; color: #dffcff; text-align: left; opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .16s, transform .16s, visibility .16s; box-shadow: 0 0 22px #00d9ff77, inset 0 0 16px #b84dff22; pointer-events: none; }
    .read-me:hover .read-me-card, .read-me:focus-within .read-me-card { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
    .read-me-card h3 { margin: 0 0 10px; color: #ff5dcb; text-align: center; font: 800 16px ui-monospace, monospace; letter-spacing: .08em; text-shadow: 0 0 8px #ff5dcb; }
    .read-me-card p { margin: 7px 0; color: #dffcff; font: 12px/1.45 ui-monospace, monospace; text-shadow: none; }
    /* Game board styling; the 3D mode uses perspective and a neon cyan frame. */
    canvas { width: 100%; aspect-ratio: 1; display: block; border: 4px solid #75c1f0; background: #182118; image-rendering: pixelated; touch-action: none; overscroll-behavior: contain; }
    /* Before a run begins, the board is a selector/start surface within a
       scrollable page. Keep vertical page panning available there. */
    body:not(.mobile-player-run) canvas { touch-action: pan-y; }
    /* The pre-game selector and post-game page must always be able to scroll,
       even if a browser restores a stale class from a previous play session. */
    html:not(.mobile-player-run),
    body:not(.mobile-player-run) {
      height: auto;
      overflow-y: auto;
      overscroll-behavior-y: auto;
      touch-action: pan-x pan-y;
    }
    /* Chrome's touch emulation (and some Android WebViews) can fail to pan a
       tall CSS-grid body even when its overflow is auto. The idle selector is
       an ordinary document: use the root scroller and keep main centred. */
    @media (hover: none), (pointer: coarse) {
      html:not(.mobile-player-run) {
        height: auto;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
      }
      body:not(.mobile-player-run) {
        display: block;
        min-height: 100dvh;
        overflow: visible;
      }
      body:not(.mobile-player-run) main {
        margin-right: auto;
        margin-left: auto;
      }
    }
    canvas.three-d { width: 600px; max-width: 100%; margin: 25px 0 40px; border-color: #28e7ff; border-radius: 10px; transform: perspective(900px) rotateX(12deg); transform-origin: center; box-shadow: 0 28px 45px #000b, 0 0 28px #28e7ff66; }
    canvas.warp-border-pulse { animation: warpBorderPulse .38s ease-in-out 3 alternate; }
    /* PSP-style touch controls are mounted in the game and shown during player or demo runs. */
    .touch-game-controls { display: none; }
    button { margin-top: 14px; padding: 10px 20px; border: 0; border-radius: 6px; background: #8fd14f; color: #10150f; font-weight: 700; cursor: pointer; }
    button:hover { background: #b3ed78; }
    .music-volume { display: inline-flex; align-items: center; gap: 7px; color: #8ff7ff; font: 800 11px ui-monospace, monospace; white-space: nowrap; }
    .music-volume input { width: 110px; height: 18px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
    .music-volume input::-webkit-slider-runnable-track { height: 7px; border: 1px solid #55eaff; border-radius: 10px; background: linear-gradient(90deg, #00d9ff, #b84dff); box-shadow: 0 0 7px #00d9ffaa, inset 0 0 3px #050711; }
    .music-volume input::-webkit-slider-thumb { width: 17px; height: 17px; margin-top: -6px; border: 2px solid #fff; border-radius: 50%; -webkit-appearance: none; background: #b84dff; box-shadow: 0 0 9px #b84dff, 0 0 4px #fff; }
    .music-volume input::-moz-range-track { height: 7px; border: 1px solid #55eaff; border-radius: 10px; background: linear-gradient(90deg, #00d9ff, #b84dff); box-shadow: 0 0 7px #00d9ffaa, inset 0 0 3px #050711; }
    .music-volume input::-moz-range-thumb { width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; background: #b84dff; box-shadow: 0 0 9px #b84dff, 0 0 4px #fff; }
    .music-volume input:focus-visible { outline: 2px solid #fff58a; outline-offset: 3px; border-radius: 8px; }
    p { color: #c8e8d3; text-shadow: 0 0 7px #8fd14f77; }
    /* Optional live input display for stream viewers. */
    .streamer-tools { width: min(100%, 500px); margin: 14px auto 4px; padding: 10px 12px; border: 1px solid #00d9ff66; border-radius: 8px; background: #050a16cc; box-shadow: inset 0 0 14px #00d9ff12; }
    html.android-app-shell .streamer-tools { display: none !important; }
    .streamer-toggle { display: inline-flex; align-items: center; gap: 9px; color: #8ff7ff; font: 800 11px ui-monospace, monospace; letter-spacing: .09em; cursor: pointer; }
    .streamer-toggle input { position: absolute; opacity: 0; pointer-events: none; }
    .toggle-track { position: relative; width: 42px; height: 22px; border: 1px solid #52627a; border-radius: 20px; background: #182034; box-shadow: inset 0 0 7px #000; transition: .2s; }
    .toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #8994a5; transition: .2s; }
    .streamer-toggle input:checked + .toggle-track { border-color: #00d9ff; background: #07394a; box-shadow: 0 0 10px #00d9ff88, inset 0 0 7px #00d9ff44; }
    .streamer-toggle input:checked + .toggle-track::after { left: 23px; background: #ecffff; box-shadow: 0 0 8px #00d9ff; }
    .streamer-toggle input:focus-visible + .toggle-track { outline: 2px solid #fff58a; outline-offset: 3px; }
    .input-display { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #00d9ff33; }
    .input-display[hidden] { display: none; }
    .input-role { margin-bottom: 6px; color: #ff83dd; font: 800 10px ui-monospace, monospace; letter-spacing: .13em; text-shadow: 0 0 7px #ff5dcb; }
    .key-grid { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(2, 27px); gap: 4px; justify-content: center; }
    .input-key { display: grid; place-items: center; border: 1px solid #52627a; border-radius: 4px; background: linear-gradient(#202b40, #0b1020); color: #9faec4; font: 800 13px ui-monospace, monospace; box-shadow: 0 3px 0 #02040a, inset 0 0 6px #fff0; transition: color .08s, border-color .08s, background .08s, box-shadow .08s, transform .08s; }
    .key-up, .key-w { grid-column: 2; }
    .key-left, .key-a { grid-column: 1; grid-row: 2; }
    .key-down, .key-s { grid-column: 2; grid-row: 2; }
    .key-right, .key-d { grid-column: 3; grid-row: 2; }
    .input-key.active { border-color: #fff58a; background: #0e7187; color: #fff; transform: translateY(2px); box-shadow: 0 1px 0 #02040a, 0 0 8px #fff, 0 0 18px #00d9ff, inset 0 0 8px #fff58a88; }
    .input-key.released { animation: inputRelease .22s ease-out; }
    .space-key { grid-column: 1 / -1; width: min(230px, 82%); height: 28px; margin: 3px auto 0; font-size: 10px; letter-spacing: .14em; }
    @keyframes inputRelease { from { border-color: #fff58a; color: #fff; box-shadow: 0 0 15px #00d9ff; } }
    /* Independent title effects keep the main neon flicker and WARP pulse visually distinct. */
    @keyframes neonFlicker {
      0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
      20%, 24%, 55% { opacity: .78; }
    }
    @keyframes warpPulse {
      from { color: #ff83dd; text-shadow: 0 0 4px #fff, 0 0 9px #ff5dcb, 0 0 16px #b84dff; filter: brightness(.9); }
      to { color: #fff0fb; text-shadow: 0 0 7px #fff, 0 0 18px #ff5dcb, 0 0 34px #b84dff, 0 0 48px #00d9ff88; filter: brightness(1.3); }
    }
    @keyframes recentScoreFlash {
      50% { color: #fff; background: #ff5dcb55; text-shadow: 0 0 7px #fff, 0 0 18px #ff5dcb; }
    }
    @keyframes warpScorePulse {
      to { color: #ff83dd; text-shadow: 0 0 7px #fff, 0 0 18px #ff5dcb, 0 0 28px #00d9ff; transform: scale(1.18); }
    }
    @keyframes warpBorderPulse {
      to { border-color: #ff5dcb; box-shadow: 0 28px 45px #000b, 0 0 18px #fff, 0 0 45px #ff5dcb, 0 0 65px #00d9ff; }
    }
    @keyframes starTwinkle {
      from { opacity: .48; filter: brightness(.85); }
      to { opacity: .82; filter: brightness(1.2); }
    }
    @keyframes namePromptFlash {
      from { opacity: .55; filter: brightness(.8); }
      to { opacity: 1; filter: brightness(1.45); text-shadow: 0 0 12px #fff58a; }
    }
    @keyframes demoStatusPulse { to { filter: brightness(1.35); box-shadow: 0 0 28px #ffb300bb; } }
    @keyframes gameNoteFlash {
      50% { color: #8ff7ff; opacity: .28; text-shadow: 0 0 5px #00d9ff; }
    }
    /* JavaScript measures the real fullscreen viewport and supplies the scale. */
    html.game-fullscreen,
    body.game-fullscreen {
      width: 100%;
      height: 100%;
      overflow: hidden;
      overscroll-behavior: none;
    }
    body.game-fullscreen { place-items: start center; }
    body.game-fullscreen main { transform-origin: top center; }
    body.game-fullscreen .arcade-layout { grid-template-columns: 600px minmax(390px, 1fr); gap: 20px; align-items: stretch; }
    body.game-fullscreen .game-column { display: flex; flex-direction: column; }
    body.game-fullscreen .bar { flex: 0 0 auto; margin: 25px 2px 0; transform: none; }
    body.game-fullscreen .warp-bonus-status { flex: 0 0 var(--score-board-gap, 15px); height: var(--score-board-gap, 15px); margin: 0; line-height: var(--score-board-gap, 15px); }
    body.game-fullscreen canvas.three-d { flex: 0 0 auto; width: 600px; margin: 0 0 var(--board-streamer-gap, 15px); }
    body.game-fullscreen .records-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; margin-top: 0; overflow: hidden; }
    body.game-fullscreen .records-table-wrap { flex: 1 1 0; width: 100%; height: 0; min-height: 0; overflow-x: auto; overflow-y: auto; }
    body.game-fullscreen .records-panel .game-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 11px; }
    body.game-fullscreen .records-panel .game-actions button { margin: 0; padding: 8px 13px; }
    body.game-fullscreen .streamer-tools { flex: 0 0 auto; width: 100%; max-width: 600px; margin: 0 auto 4px; padding: 13px 16px; }
    body.game-fullscreen .key-grid { grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(2, 31px); gap: 5px; }
    body.game-fullscreen .space-key { width: 70%; height: 32px; }
    body.game-fullscreen #controls-help, body.game-fullscreen .read-me { display: none; }
    /* Narrow-screen overrides belong last so desktop positioning cannot override them. */
    @media (max-width: 920px) {
      main { width: min(94vw, 560px); }
      .arcade-layout { grid-template-columns: 1fr; }
      .records-panel { left: 0; top: 0; margin-top: 0; }
      main .cheat-code-box { position: static; width: min(100%, 330px); margin: 12px 0; }
      body.game-fullscreen {
        height: 100vh;
        height: 100dvh;
        place-items: start center;
        overflow: hidden;
      }
      body.game-fullscreen main { width: min(94vw, 560px); transform: none !important; }
      body.game-fullscreen .arcade-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
      body.game-fullscreen .game-column { width: 100%; }
      body.game-fullscreen canvas.three-d { width: 100%; max-width: 100%; }
      body.game-fullscreen .records-panel { width: 100%; height: auto; min-height: 0; overflow: visible; }
      body.game-fullscreen .records-table-wrap { width: 100%; height: 410px; min-height: 0; }
      body.game-fullscreen .streamer-tools { width: 100%; max-width: 100%; }
    }
    @media (max-width: 540px) {
      html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
      main, .game-panel, .arcade-layout, .game-column, .records-panel { max-width: 100%; }
      .records-panel { width: 100%; min-width: 0; padding: 12px 6px; box-sizing: border-box; overflow-x: hidden; }
      .records-table-wrap { display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
      .records-table { width: 670px; min-width: 670px; font-size: 11px; }
      .records-table th { padding: 7px 3px; letter-spacing: .06em; }
      .records-table td { padding: 6px 3px; }
      .records-table .rank { width: 42px; }
      .records-table .flag { width: 34px; }
      .records-table .name { width: 96px; }
      .records-table .score { width: 52px; }
      .records-table .time { width: 58px; }
      .records-table .kills { width: 43px; }
      .records-table .warps { width: 46px; }
      .records-table .revives { width: 58px; }
      .records-table .date { width: 68px; }
      .records-table .submitted { width: 78px; }
      .records-table .flag-cell img { width: 30px; height: 20px; }
    }
    /* Give the portrait touch layout a little more breathing room below the title. */
    @media (hover: none) and (pointer: coarse) and (orientation: portrait) {
      main .cheat-code-box {
        position: static;
        width: min(100%, 330px);
        margin: 27px auto 12px;
        transform: none;
      }
    }
    /* The desktop records offset extends beyond an iPad's landscape viewport. */
    @media (hover: none) and (pointer: coarse) and (orientation: landscape) {
      .records-panel { left: 0; }
    }
    @media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-device-width: 600px) {
      .cheat-code-box { transform: translateX(65px); }
      .records-panel { left: 25px; top: 35px; }
      .records-table-wrap { height: 660px; min-height: 660px; }
    }
    /*
      A mobile player or demo run is a fixed play surface: score first, then a
      precise board gap. The normal document flow returns when the run ends.
    */
    @media (hover: none), (pointer: coarse) {
      html.mobile-player-run {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
      }
      body.mobile-player-run {
        position: fixed;
        inset: 0;
        display: block;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
      }
      body.mobile-player-run main {
        width: min(94vw, 560px);
        height: 100%;
        margin: 0 auto;
        overflow: visible;
        transform: none !important;
      }
      body.mobile-player-run .title,
      body.mobile-player-run .cheat-code-box {
        display: none;
      }
      body.mobile-player-run .arcade-layout,
      body.mobile-player-run.game-fullscreen .arcade-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        align-items: start;
      }
      body.mobile-player-run .game-column {
        display: block;
        width: 100%;
        min-width: 0;
      }
      body.mobile-player-run .bar,
      body.mobile-player-run.game-fullscreen .bar {
        min-height: 20px;
        margin: max(8px, env(safe-area-inset-top)) 2px 0;
        transform: none;
      }
      body.mobile-player-run .warp-bonus-status,
      body.mobile-player-run.game-fullscreen .warp-bonus-status {
        display: grid;
        width: 100%;
        height: 40px;
        margin: 0;
        place-items: center;
        line-height: 1;
      }
      body.mobile-player-run canvas.three-d,
      body.mobile-player-run.game-fullscreen canvas.three-d {
        display: block;
        width: min(94vw, 560px, calc(100dvh - 270px));
        max-width: 100%;
        margin: 0 auto;
        flex: none;
      }
      body.mobile-player-run .touch-game-controls {
        --touch-pad-size: clamp(104px, 31vw, 156px);
        --touch-stick-size: clamp(72px, 22vw, 108px);
        --touch-fire-size: clamp(96px, 25vw, 120px);
        --touch-control-gap: clamp(5px, 1.8vw, 14px);
        display: grid;
        grid-template-columns: var(--touch-pad-size) var(--touch-fire-size) var(--touch-stick-size);
        width: 100%;
        min-height: calc(var(--touch-pad-size) + 26px);
        padding:
          8px
          max(8px, env(safe-area-inset-right))
          max(8px, env(safe-area-inset-bottom))
          max(8px, env(safe-area-inset-left));
        align-items: start;
        justify-content: space-between;
        column-gap: var(--touch-control-gap);
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
      }
      .touch-control-stack {
        display: grid;
        flex: 0 0 auto;
        justify-items: center;
        gap: 8px;
      }
      .touch-control-logo {
        align-self: start;
        width: var(--touch-fire-size);
        min-height: 48px;
        height: auto;
        margin-top: 10px;
        padding: 5px 0;
        object-fit: contain;
        filter: drop-shadow(0 0 8px #00d9ff99);
        cursor: pointer;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
      }
      .touch-dpad,
      .touch-face-buttons {
        position: relative;
        width: var(--touch-pad-size);
        height: var(--touch-pad-size);
      }
      .touch-dpad {
        --touch-dpad-size: var(--touch-pad-size);
        width: var(--touch-dpad-size);
        height: var(--touch-dpad-size);
        filter: drop-shadow(0 0 7px #27e7ff55);
        margin-top: 10px;
      }
      .touch-dpad-button {
        position: absolute;
        display: grid;
        width: 34%;
        height: 34%;
        margin: 0;
        padding: 0;
        place-items: center;
        border: 1px solid #73eaff;
        border-radius: 5px;
        background: linear-gradient(#1d2941ee, #080d1aee);
        box-shadow: inset 0 0 10px #27e7ff27, 0 0 0 2px #07101e;
        touch-action: none;
      }
      .touch-dpad-button::after {
        width: 0;
        height: 0;
        content: "";
        border: calc(var(--touch-dpad-size) * .052) solid transparent;
        opacity: .72;
      }
      .touch-dpad-button::before {
        position: absolute;
        inset: -5px;
        content: "";
      }
      .touch-dpad-button.up { top: 0; left: 33%; }
      .touch-dpad-button.right { top: 33%; right: 0; }
      .touch-dpad-button.down { bottom: 0; left: 33%; }
      .touch-dpad-button.left { top: 33%; left: 0; }
      .touch-dpad-button.up::after { border-bottom-color: #bff9ff; transform: translateY(-28%); }
      .touch-dpad-button.right::after { border-left-color: #bff9ff; transform: translateX(28%); }
      .touch-dpad-button.down::after { border-top-color: #bff9ff; transform: translateY(28%); }
      .touch-dpad-button.left::after { border-right-color: #bff9ff; transform: translateX(-28%); }
      .touch-dpad-center {
        position: absolute;
        top: 33%;
        left: 33%;
        width: 34%;
        height: 34%;
        border-radius: 4px;
        background: #0b1222;
        box-shadow: inset 0 0 12px #27e7ff22;
      }
      .touch-face-buttons {
        filter: drop-shadow(0 0 8px #ff55da55);
      }
      .touch-face-button {
        position: absolute;
        width: 34%;
        height: 34%;
        margin: 0;
        padding: 0;
        border: 2px solid #ff8be7;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #3b3255, #0b0c18 68%);
        box-shadow: inset 0 0 9px #ff55da40, 0 0 7px #ff55da55;
        touch-action: none;
      }
      .touch-face-button:nth-child(1) { top: 0; left: 33%; }
      .touch-face-button:nth-child(2) { top: 33%; right: 0; }
      .touch-face-button:nth-child(3) { bottom: 0; left: 33%; }
      .touch-face-button:nth-child(4) { top: 33%; left: 0; }
      .touch-dpad-button.active,
      .touch-face-button.active {
        filter: brightness(1.8);
        transform: scale(.91);
        box-shadow: inset 0 0 14px #fff8, 0 0 17px #fff;
      }
      .touch-joystick {
        position: relative;
        width: var(--touch-stick-size);
        height: var(--touch-stick-size);
        margin-top: 10px;
        border: 1px solid #27e7ff8c;
        border-radius: 50%;
        background: repeating-radial-gradient(circle, transparent 0 13%, #27e7ff13 14% 15%), #06101de8;
        box-shadow: 0 0 12px #27e7ff42, inset 0 0 16px #000;
        touch-action: none;
      }
      .touch-control-logo.active {
        transform: scale(.94);
        filter: brightness(1.55) drop-shadow(0 0 13px #fff);
      }
      .touch-warp-label {
        position: relative;
        top: 15px;
        color: #8ff7ff;
        font: 800 10px ui-monospace, monospace;
        letter-spacing: .12em;
        text-shadow: 0 0 7px #00d9ff;
      }
      .touch-joystick.active {
        box-shadow: 0 0 19px #27e7ffaa, inset 0 0 16px #000;
      }
      .touch-stick-knob {
        position: absolute;
        top: 20%;
        left: 20%;
        width: 60%;
        height: 60%;
        border: 2px solid #efa9ff;
        border-radius: 50%;
        background: radial-gradient(circle at 36% 28%, #4a435b, #10111a 65%);
        box-shadow: 0 4px 9px #000b, 0 0 8px #ff55da87, inset 0 0 7px #fff2;
        pointer-events: none;
        will-change: transform;
      }
      body.mobile-player-run .records-panel,
      body.mobile-player-run.game-fullscreen .records-panel {
        display: none;
      }
    }
    @media (hover: none) and (orientation: landscape) and (max-height: 520px),
           (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
      body.mobile-player-run .bar,
      body.mobile-player-run.game-fullscreen .bar {
        margin-top: max(4px, env(safe-area-inset-top));
      }
      body.mobile-player-run .warp-bonus-status,
      body.mobile-player-run.game-fullscreen .warp-bonus-status {
        height: 22px;
      }
      body.mobile-player-run canvas.three-d,
      body.mobile-player-run.game-fullscreen canvas.three-d {
        width: min(94vw, 500px, calc(100dvh - 170px));
      }
      body.mobile-player-run .touch-game-controls {
        --touch-pad-size: clamp(88px, 26dvh, 116px);
        --touch-stick-size: clamp(64px, 19dvh, 84px);
        --touch-fire-size: clamp(58px, 17dvh, 78px);
        --touch-control-gap: clamp(4px, 1vw, 9px);
        min-height: 0;
        padding-top: 4px;
      }
      body.mobile-player-run .touch-dpad,
      body.mobile-player-run .touch-joystick,
      body.mobile-player-run .touch-control-logo {
        margin-top: 4px;
      }
      body.mobile-player-run .touch-warp-label { font-size: 8px; }
    }
    @media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 700px) {
      body.mobile-player-run main {
        width: min(94vw, 560px);
      }
      body.mobile-player-run .warp-bonus-status,
      body.mobile-player-run.game-fullscreen .warp-bonus-status {
        height: 20px;
      }
      body.mobile-player-run canvas.three-d,
      body.mobile-player-run.game-fullscreen canvas.three-d {
        width: min(500px, calc(100dvh - 180px));
      }
      body.mobile-player-run .touch-game-controls {
        --touch-pad-size: clamp(100px, 20dvh, 136px);
        --touch-stick-size: clamp(72px, 15dvh, 98px);
        --touch-fire-size: clamp(66px, 14dvh, 90px);
        min-height: 0;
        padding-top: 6px;
      }
      body.mobile-player-run .arcade-layout,
      body.mobile-player-run.game-fullscreen .arcade-layout {
        grid-template-columns: minmax(0, 1fr);
      }
    }
body.mobile-player-run .touch-dpad-button:hover {
  background: linear-gradient(#1d2941ee, #080d1aee);
}

body.mobile-player-run .touch-dpad-button.active {
  background: #fff58a;
}

html.iphone-device body.mobile-player-run .touch-game-controls {
  --touch-stick-size: clamp(70px, 21vw, 104px);
  padding-right: max(8px, env(safe-area-inset-right));
  padding-left: max(8px, env(safe-area-inset-left));
}

html.iphone-device body.mobile-player-run .touch-joystick {
  margin-top: 10px;
}

/*
  iPad play controls stay attached to the physical screen corners in portrait
  and landscape, whether or not the browser Fullscreen API is active.
*/
html.ipad-device body.mobile-player-run .touch-game-controls,
html.ipad-device body.mobile-player-run.game-fullscreen .touch-game-controls {
  --touch-pad-size: clamp(112px, 17vmin, 148px);
  --touch-stick-size: clamp(78px, 12vmin, 108px);
  --touch-fire-size: clamp(76px, 12vmin, 104px);
  position: fixed;
  z-index: 14;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100vw;
  height: auto;
  min-height: calc(
    var(--touch-pad-size) +
    38px +
    max(12px, env(safe-area-inset-bottom)) +
    1cm
  );
  margin: 0;
  padding:
    0
    max(18px, env(safe-area-inset-right))
    calc(max(12px, env(safe-area-inset-bottom)) + 1cm)
    max(18px, env(safe-area-inset-left));
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}

html.ipad-device body.mobile-player-run .touch-game-controls > *,
html.ipad-device body.mobile-player-run.game-fullscreen .touch-game-controls > * {
  pointer-events: auto;
}

html.ipad-device body.mobile-player-run .touch-dpad,
html.ipad-device body.mobile-player-run .touch-joystick,
html.ipad-device body.mobile-player-run.game-fullscreen .touch-dpad,
html.ipad-device body.mobile-player-run.game-fullscreen .touch-joystick {
  margin-top: 0;
}

html.ipad-device body.mobile-player-run .touch-control-logo,
html.ipad-device body.mobile-player-run.game-fullscreen .touch-control-logo {
  align-self: flex-end;
  width: var(--touch-fire-size);
  min-height: 48px;
  margin: 0 10px 5px;
}

/* iPad has direct touch controls, so these desktop-oriented controls stay hidden. */
html.ipad-device .music-volume,
html.ipad-device #swap-controls {
  display: none !important;
}

/* iPad portrait: the records return as soon as the active run ends. */
@media (orientation: portrait) {
  html.ipad-device body.mobile-player-run .touch-game-controls,
  html.ipad-device body.mobile-player-run.game-fullscreen .touch-game-controls {
    min-height: calc(
      var(--touch-pad-size) +
      38px +
      max(12px, env(safe-area-inset-bottom)) +
      1cm +
      50px
    );
    padding-bottom: calc(
      max(12px, env(safe-area-inset-bottom)) +
      1cm +
      50px
    );
  }

  html.ipad-device body.mobile-player-run .records-panel,
  html.ipad-device body.mobile-player-run.game-fullscreen .records-panel {
    display: none;
  }

  html.ipad-device body.mobile-player-run .touch-control-logo,
  html.ipad-device body.mobile-player-run.game-fullscreen .touch-control-logo {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: calc(
      max(12px, env(safe-area-inset-bottom)) +
      1cm +
      50px +
      var(--touch-pad-size) +
      42px
    );
    margin: 0;
  }
}

/* iPad landscape: stack WarpStrike above the bottom-right warp joystick. */
@media (orientation: landscape) {
  html.ipad-device body.mobile-player-run .touch-control-logo,
  html.ipad-device body.mobile-player-run.game-fullscreen .touch-control-logo {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: calc(
      max(12px, env(safe-area-inset-bottom)) +
      1cm +
      var(--touch-pad-size) +
      42px
    );
    width: var(--touch-fire-size);
    margin: 0;
  }
}

/* Desktop pages must remain normally scrollable before and after a game.
   Fullscreen and real mobile runs keep their dedicated scroll locks above. */
@media (hover: hover) and (pointer: fine) {
  html:not(.game-fullscreen):not(.mobile-player-run),
  body:not(.game-fullscreen):not(.mobile-player-run) {
    overflow-y: auto;
    overscroll-behavior-y: auto;
    touch-action: auto;
  }
}

/* Share and store badges use the familiar compact black storefront treatment. */
.platform-actions {
  position: absolute;
  z-index: 3;
  top: 285px;
  right: calc(100% + 18px);
  display: flex;
  width: 172px;
  flex-direction: column;
  gap: 7px;
}
.platform-button {
  display: grid;
  width: 100%;
  min-height: 50px;
  grid-template-columns: 35px 1fr;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 9px;
  border: 1px solid #758197;
  border-radius: 8px;
  background: linear-gradient(180deg, #171b24, #03050a);
  color: #fff;
  text-align: left;
  box-shadow: 0 0 12px #00d9ff35, inset 0 1px #ffffff22;
}
.platform-button:hover,
.platform-button:focus-visible {
  border-color: #8ff7ff;
  background: linear-gradient(180deg, #24334a, #070b13);
  box-shadow: 0 0 15px #00d9ff77, inset 0 1px #ffffff2a;
}
.platform-button[aria-disabled="true"] {
  cursor: default;
}
.platform-button[aria-disabled="true"]:hover {
  border-color: #758197;
  background: linear-gradient(180deg, #171b24, #03050a);
  box-shadow: 0 0 12px #00d9ff35, inset 0 1px #ffffff22;
}
.platform-icon {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
}
.platform-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.05;
}
.platform-copy strong {
  color: #fff;
  font: 700 15px/1.05 system-ui, sans-serif;
  white-space: nowrap;
}
.platform-copy small {
  margin-bottom: 3px;
  color: #d7dce5;
  font: 700 8px/1 ui-monospace, monospace;
  letter-spacing: .03em;
  white-space: nowrap;
}
.share-icon::before {
  width: 10px;
  height: 10px;
  border: 2px solid #8ff7ff;
  border-radius: 50%;
  content: "";
  box-shadow: 15px -8px 0 -2px #08111d, 15px -8px 0 0 #8ff7ff, 15px 8px 0 -2px #08111d, 15px 8px 0 0 #8ff7ff;
}
.share-icon::after {
  position: absolute;
  width: 17px;
  height: 14px;
  border-top: 2px solid #8ff7ff;
  border-bottom: 2px solid #8ff7ff;
  content: "";
  transform: translateX(5px) skewY(-28deg);
}
.apple-icon {
  color: #fff;
  font: 31px/1 -apple-system, BlinkMacSystemFont, sans-serif;
}
.play-icon {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid #52d68a;
  filter: drop-shadow(-5px -3px 0 #42a5f5) drop-shadow(-3px 5px 0 #ffd34e);
}
.share-feedback {
  min-height: 12px;
  color: #fff58a;
  font: 700 9px ui-monospace, monospace;
  text-align: center;
}

/* Desktop: a clean 60px column gap, with the badges beside the game board. */
@media (hover: hover) and (pointer: fine) and (min-width: 921px) {
  main {
    width: min(92vw, 1160px);
  }
  .game-panel {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr) 172px;
    align-items: center;
    gap: 12px 24px;
  }
  .title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .game-logo {
    width: min(500px, 100%);
    margin: 0 auto;
  }
  .platform-actions {
    position: static;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    width: 172px;
  }
  .arcade-layout {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 560px) minmax(390px, 1fr);
    gap: 60px;
  }
  .records-panel {
    left: 0;
    top: 0;
    margin-top: 104px;
  }
  .cheat-code-box {
    position: static;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 290px;
    margin: 0;
    transform: none;
  }
  body.game-fullscreen .game-panel {
    display: block;
  }
  body.game-fullscreen .title,
  body.game-fullscreen .cheat-code-box,
  body.game-fullscreen .platform-actions {
    display: none;
  }
  body.game-fullscreen .arcade-layout {
    grid-template-columns: 600px minmax(390px, 1fr);
    gap: 60px;
  }
  body.game-fullscreen .records-panel {
    left: 0;
    top: 0;
    margin-top: 0;
  }
}

/* iPad portrait: badges and cheat panel form one tight row below the logo. */
html.ipad-device body:not(.mobile-player-run) {
  display: block;
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}
html.ipad-device body:not(.mobile-player-run) main {
  margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom));
}

@media (orientation: portrait) {
  html.ipad-device main {
    width: min(96vw, 720px);
  }
  html.ipad-device .game-panel {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 174px minmax(0, 330px) minmax(0, 1fr);
    gap: 10px 12px;
  }
  html.ipad-device .title {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  html.ipad-device .platform-actions {
    position: static;
    grid-column: 2;
    grid-row: 2;
    width: 174px;
    gap: 5px;
  }
  html.ipad-device .cheat-code-box,
  html.ipad-device main .cheat-code-box {
    position: static;
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    width: 330px;
    margin: 0;
    transform: none;
  }
  html.ipad-device .arcade-layout {
    grid-column: 1 / -1;
    width: 100%;
    gap: 16px;
  }
  html.ipad-device .game-column {
    width: min(100%, 560px);
    margin: 0 auto;
  }
  html.ipad-device .records-panel {
    width: 100%;
    left: 0;
    top: 0;
    margin-top: 0;
  }
}

/* iPad landscape: badges, logo and cheat panel share the top row. */
@media (orientation: landscape) {
  html.ipad-device main {
    width: min(97vw, 1000px);
  }
  html.ipad-device .game-panel {
    display: grid;
    grid-template-columns: 170px minmax(290px, 1fr) 300px;
    align-items: center;
    gap: 8px 12px;
  }
  html.ipad-device .platform-actions {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 170px;
    gap: 5px;
  }
  html.ipad-device .title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  html.ipad-device .game-logo {
    width: min(340px, 100%);
    margin-bottom: 0;
  }
  html.ipad-device .cheat-code-box,
  html.ipad-device main .cheat-code-box {
    position: static;
    grid-column: 3;
    grid-row: 1;
    width: 300px;
    margin: 0;
    transform: none;
  }
  html.ipad-device .arcade-layout {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 560px) minmax(360px, 1fr);
    gap: 16px;
  }
  html.ipad-device .records-panel {
    left: 40px;
    top: 0;
    margin-top: 0;
  }
  html.ipad-device body.game-fullscreen .records-panel {
    left: 150px;
  }
  html.ipad-device .records-table-wrap {
    height: 500px;
    min-height: 500px;
  }
}

/* iPhone: the three compact buttons sit horizontally above the cheat box. */
@media (max-width: 600px) {
  html.iphone-device .game-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  html.iphone-device .title,
  html.iphone-device .platform-actions,
  html.iphone-device .cheat-code-box,
  html.iphone-device .arcade-layout {
    grid-column: 1;
  }
  html.iphone-device .title {
    grid-row: 1;
    margin-bottom: 0;
  }
  html.iphone-device .platform-actions {
    position: static;
    display: grid;
    width: 100%;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  html.iphone-device .platform-button {
    min-height: 62px;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 5px 2px;
    text-align: center;
  }
  html.iphone-device .platform-icon {
    width: 27px;
    height: 27px;
    margin: auto;
    transform: scale(.8);
  }
  html.iphone-device .platform-copy strong {
    font-size: clamp(9px, 3vw, 12px);
  }
  html.iphone-device .platform-copy small {
    overflow: hidden;
    font-size: clamp(5px, 1.7vw, 7px);
    text-overflow: ellipsis;
  }
  html.iphone-device .share-feedback {
    position: absolute;
    left: 0;
    width: 100%;
    transform: translateY(64px);
  }
  html.iphone-device .cheat-code-box,
  html.iphone-device main .cheat-code-box {
    position: static;
    grid-row: 3;
    width: min(100%, 330px);
    margin: 0 auto;
    transform: none;
  }
  html.iphone-device .arcade-layout {
    grid-row: 4;
    gap: 12px;
  }
}

body.mobile-player-run .platform-actions {
  display: none;
}

/* Keep the longer leaderboard title inside the existing one-line heading slot. */
.records-panel h2 {
  height: 30px;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.site-footer {
  margin: 22px 0 16px;
  font: 700 12px ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-footer a {
  color: #8ff7ff;
  text-decoration: none;
  text-shadow: 0 0 7px #00d9ff;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #fff58a;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Shared native/mobile layout corrections (iOS and Android).
   Portrait follows Challenge's in-flow board/controller composition; tablet
   landscape keeps Solo's corner controls and grants the board a larger,
   collision-free centre lane. */
@media (orientation: portrait) and (pointer: coarse) {
  html.phone-device body.mobile-player-run .touch-game-controls,
  html.tablet-device body.mobile-player-run .touch-game-controls,
  html.phone-device body.mobile-player-run.game-fullscreen .touch-game-controls,
  html.tablet-device body.mobile-player-run.game-fullscreen .touch-game-controls {
    position: relative !important;
    inset: auto !important;
    display: grid;
    grid-template-columns: var(--touch-pad-size) var(--touch-fire-size) var(--touch-stick-size);
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 8px auto 0;
    padding: 0 max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    align-items: start;
    justify-content: space-between;
    pointer-events: auto;
  }
  html.phone-device body.mobile-player-run .touch-control-logo,
  html.tablet-device body.mobile-player-run .touch-control-logo,
  html.phone-device body.mobile-player-run.game-fullscreen .touch-control-logo,
  html.tablet-device body.mobile-player-run.game-fullscreen .touch-control-logo {
    position: static;
    inset: auto;
    align-self: center;
    margin: 0;
  }
  html.phone-device body.mobile-player-run canvas.three-d,
  html.phone-device body.mobile-player-run.game-fullscreen canvas.three-d {
    width: min(94vw, 500px, calc(100dvh - 285px));
  }
  html.tablet-device body.mobile-player-run main,
  html.tablet-device body.mobile-player-run.game-fullscreen main {
    width: min(94vw, 760px);
    max-width: 760px;
  }
  html.tablet-device body.mobile-player-run canvas.three-d,
  html.tablet-device body.mobile-player-run.game-fullscreen canvas.three-d {
    width: min(86vw, 620px, calc(100dvh - 300px));
    max-width: 620px;
  }
  html.tablet-device body.mobile-player-run .touch-game-controls,
  html.tablet-device body.mobile-player-run.game-fullscreen .touch-game-controls {
    margin-top: 22px;
  }
}

/* Native tablet setup screens must use tablet width, not the phone-sized
   342px shell inherited from the original Android handset layout. */
@media (min-width: 700px) and (orientation: portrait) and (pointer: coarse) {
  html.tablet-device.android-app-shell main,
  html.tablet-device.ios-app-shell main {
    width: min(94vw, 760px);
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
  }
  html.tablet-device.android-app-shell .game-panel,
  html.tablet-device.ios-app-shell .game-panel {
    width: 100%;
    max-width: none;
  }
  html.tablet-device.android-app-shell canvas.three-d,
  html.tablet-device.ios-app-shell canvas.three-d {
    width: min(100%, 620px);
    max-width: 620px;
  }
  html.tablet-device .cheat-code-box,
  html.tablet-device main .cheat-code-box {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
  }
}

@media (orientation: landscape) and (min-width: 700px) and (pointer: coarse) {
  html.tablet-device body.mobile-player-run main,
  html.tablet-device body.mobile-player-run.game-fullscreen main {
    width: min(98vw, 620px);
    max-width: 620px;
  }
  html.tablet-device body.mobile-player-run canvas.three-d,
  html.tablet-device body.mobile-player-run.game-fullscreen canvas.three-d {
    width: min(560px, calc(100dvh - 115px), calc(100vw - 380px));
    max-width: 560px;
  }
}

/* Phones use the full Challenge-style controller. The streamer visualiser is
   reserved for layouts where a physical keyboard is practical. */
html.phone-device .streamer-tools { display:none !important; }
@media (max-width:860px) and (pointer:coarse) {
  html.phone-device body.mobile-player-run .touch-game-controls {
    --touch-pad-size:clamp(132px,36vw,168px);
    --touch-fire-size:clamp(92px,25vw,118px);
    --touch-stick-size:clamp(96px,25vw,116px);
    --touch-control-gap:clamp(4px,1.4vw,10px);
    min-height:0;
    padding:0 2px 3px;
    align-items:center;
  }
  html.phone-device body.mobile-player-run .touch-control-stack { gap:5px; }
  html.phone-device body.mobile-player-run .touch-dpad,
  html.phone-device body.mobile-player-run .touch-joystick { margin-top:0; }
  html.phone-device body.mobile-player-run .touch-control-logo {
    align-self:center;
    min-height:0;
    margin:0;
    padding:3px;
  }
  html.phone-device body.mobile-player-run .touch-stick-knob {
    top:14%;
    left:14%;
    width:72%;
    height:72%;
  }
}

/* G5 / small Android phones: Solo intentionally uses the same in-flow,
   three-part controller and fixed default dimensions as Challenge. This keeps
   every control below the board instead of overlaying its bottom cells. */
@media (max-width:390px) and (max-height:720px) and (pointer:coarse) {
  html.android-app-shell body.mobile-player-run main { padding-top:4px; }
  html.android-app-shell body.mobile-player-run .bar,
  html.android-app-shell body.mobile-player-run.game-fullscreen .bar { margin:4px 2px 0; }
  html.android-app-shell body.mobile-player-run .warp-bonus-status,
  html.android-app-shell body.mobile-player-run.game-fullscreen .warp-bonus-status { height:4px; }
  html.android-app-shell body.mobile-player-run .game-actions { margin-bottom:4px; }
  html.android-app-shell body.mobile-player-run .touch-game-controls {
    --touch-pad-size:clamp(124px,35vw,138px);
    --touch-stick-size:clamp(90px,24vw,100px);
    --touch-fire-size:clamp(86px,24vw,100px);
    --touch-control-gap:clamp(4px,1.4vw,10px);
    position:relative;
    right:auto;
    bottom:auto;
    left:auto;
    display:grid;
    grid-template-columns:var(--touch-pad-size) var(--touch-fire-size) var(--touch-stick-size);
    width:100%;
    min-height:0;
    margin:8px auto 0;
    padding:0 2px 3px;
    align-items:center;
    justify-content:space-between;
    column-gap:var(--touch-control-gap);
  }
  html.android-app-shell body.mobile-player-run canvas.three-d,
  html.android-app-shell body.mobile-player-run.game-fullscreen canvas.three-d { width:min(100% - 4px,500px); }
  html.android-app-shell body.mobile-player-run .touch-dpad,
  html.android-app-shell body.mobile-player-run .touch-joystick,
  html.android-app-shell body.mobile-player-run .touch-control-logo { margin-top:0; }
  html.android-app-shell body.mobile-player-run .touch-control-logo { align-self:center; min-height:0; padding:3px; }
  html.android-app-shell body.mobile-player-run .touch-stick-knob { top:14%; left:14%; width:72%; height:72%; }
}
@media (max-width:390px) and (pointer:coarse) {
  html.phone-device body.mobile-player-run .touch-game-controls {
    --touch-pad-size:clamp(124px,35vw,138px);
    --touch-stick-size:clamp(90px,24vw,100px);
    --touch-fire-size:clamp(86px,24vw,100px);
  }
}

/* A phone run is a self-contained play screen: keep footer navigation out of
   the touch area, and give the two live controls a little more breathing room. */
@media (max-width:860px) and (pointer:coarse) {
  html.phone-device body.mobile-player-run .site-footer { display:none !important; }
  html.phone-device body.mobile-player-run .touch-dpad,
  html.phone-device body.mobile-player-run .touch-joystick { transform:translateY(15px); }
}

/* iPad and Android tablet landscape keep both the grid and input display clear
   of the physical controls. They move together to the right. */
@media (orientation:landscape) and (min-width:700px) and (pointer:coarse) {
  html.tablet-device body.mobile-player-run .streamer-tools {
    position:fixed;
    z-index:15;
    top:24vh;
    left:calc(50% + 1vw);
    width:min(32vw,520px);
    max-height:calc(100dvh - 300px);
    margin:0;
    overflow:auto;
  }

  html.tablet-device body.mobile-player-run .game-canvas-wrap,
  html.tablet-device body.mobile-player-run.game-fullscreen .game-canvas-wrap {
    transform:translateX(calc(3vw + 20px));
  }

  /* The display moves by the same amount as the grid and remains on its
     right-hand side, without covering the board or action buttons. */
  html.tablet-device body.mobile-player-run .streamer-tools {
    left:calc(50% + 8vw + 20px);
  }

  /* Fullscreen only: move the grid 200px left.  The input display and every
     touch control retain their regular landscape positions. */
  html.tablet-device body.mobile-player-run.game-fullscreen .game-canvas-wrap {
    transform:translateX(calc(3vw - 180px));
  }
}

.streamer-panel-controls { display:none; }
@media (min-width:700px) and (pointer:coarse) {
  html.tablet-device.android-app-shell .streamer-tools { display:block !important; }
  html.tablet-device .streamer-panel-controls { display:flex; gap:6px; margin:-2px 0 9px; align-items:center; justify-content:flex-end; }
  html.tablet-device .streamer-panel-controls button { min-width:34px; min-height:30px; margin:0; padding:5px 8px; border:1px solid #46eaff99; border-radius:6px; background:#0a1a31; color:#bff9ff; font:900 10px/1 ui-monospace,monospace; }
  html.tablet-device .streamer-panel-controls .streamer-move-handle { margin-right:auto; cursor:grab; touch-action:none; }
  html.tablet-device body.mobile-player-run .streamer-tools.tablet-adjustable { position:fixed; z-index:40; top:var(--streamer-panel-y,12vh); left:var(--streamer-panel-x,calc(100vw - 360px)); width:420px; max-width:none; max-height:70dvh; margin:0; overflow:auto; transform:scale(var(--streamer-panel-scale,.78)); transform-origin:top left; touch-action:pan-y; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) main { width:min(94vw,960px); max-width:960px; margin:0 auto; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .game-panel { display:grid; width:100%; grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:14px 20px; align-items:center; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .title { grid-column:1; grid-row:1; margin:0; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .platform-actions { display:none; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .cheat-code-box,
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) main .cheat-code-box { position:static; grid-column:2; grid-row:1; width:100%; margin:0; transform:none; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .arcade-layout { grid-column:1/-1; grid-row:2; width:100%; grid-template-columns:minmax(0,580px) minmax(300px,1fr); gap:20px; align-items:start; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .game-column { width:100%; margin:0; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .records-panel { position:static; width:100%; margin:86px 0 0; }
  html.tablet-device body.solo-result-visible main { width:min(94vw,760px); max-width:760px; margin:0 auto; }
  html.tablet-device body.solo-result-visible .game-panel { display:block; width:100%; }
  html.tablet-device body.solo-result-visible .title,
  html.tablet-device body.solo-result-visible .platform-actions,
  html.tablet-device body.solo-result-visible .cheat-code-box,
  html.tablet-device body.solo-result-visible .records-panel,
  html.tablet-device body.solo-result-visible .touch-game-controls,
  html.tablet-device body.solo-result-visible .streamer-tools,
  html.tablet-device body.solo-result-visible #controls-help,
  html.tablet-device body.solo-result-visible .read-me,
  html.tablet-device body.solo-result-visible .site-footer { display:none !important; }
  html.tablet-device body.solo-result-visible .arcade-layout { display:block; width:100%; }
  html.tablet-device body.solo-result-visible .game-column { width:min(100%,640px); margin:0 auto; }
  html.tablet-device body.solo-result-visible canvas.three-d { width:min(100%,620px,72dvh); margin:10px auto 18px; }
  html.tablet-device body.solo-result-visible .ai-match-recap { width:min(100%,620px); margin:14px auto; }
}
@media (min-width:700px) and (orientation:portrait) and (pointer:coarse) {
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) main { width:min(94vw,760px); }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .game-panel { grid-template-columns:1fr; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .title,
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .cheat-code-box,
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) main .cheat-code-box,
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .arcade-layout { grid-column:1; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .title { grid-row:1; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .cheat-code-box,
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) main .cheat-code-box { grid-row:2; width:min(100%,430px); justify-self:center; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .arcade-layout { grid-row:3; grid-template-columns:1fr; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .game-column { width:min(100%,620px); margin:0 auto; }
  html.tablet-device body:not(.mobile-player-run):not(.solo-result-visible) .records-panel { width:min(100%,680px); margin:0 auto; }
}