/* Shared original-game chrome. Included only by the 19 games in this overhaul. */
html[data-original] { color-scheme: dark; background: #0d1019; }
html[data-original] body.game-page {
  --o-accent: #b8a4ff; --o-text: #f4f5fb; --o-muted: #aeb7cb;
  --t-bg: #0d1019; --t-text: #f4f5fb; --t-text-muted: #aeb7cb; --t-text-subtle: #9ba6be;
  --t-card-bg: #181e2b; --t-card-border: #30394d; --t-glass-bg: #181e2b; --t-glass-border: #30394d;
  min-height:100svh; padding:0 24px 36px; background:#0d1019!important; color:var(--o-text); font-family:'Poppins',system-ui,sans-serif;
}
html[data-original] body::before, html[data-original] body::after { display:none!important; }
body.game-page .game-nav { width:100%; max-width:1280px; min-height:66px; padding:12px 0; margin:0 auto 20px; gap:18px; border-bottom:1px solid #2a3244; flex-wrap:nowrap; z-index:11000; }
body.game-page .game-nav a { font:500 12px 'Poppins',system-ui,sans-serif; color:#c9cfe0; min-height:40px; }
body.game-page .game-nav a svg { width:16px; }
body.game-page .game-name { display:none; }
.original-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }
.original-actions button, body.game-page .game-nav .audio-toggle { position:static!important; transform:none!important; inset:auto!important; display:inline-flex; align-items:center; justify-content:center; min-height:40px; min-width:40px; width:auto; padding:8px 12px; margin:0; background:#1c2332; border:1px solid #364057; box-shadow:none; color:#edf0fa; border-radius:10px; font:600 11px 'Poppins',system-ui,sans-serif; }
.original-header { width:100%; max-width:1280px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:24px; }
.original-eyebrow { color:var(--o-accent); font-size:9px; letter-spacing:.15em; font-weight:700; margin-bottom:7px; }
.original-header h1 { font:700 clamp(22px,3vw,34px)/1.2 'Poppins',system-ui,sans-serif; letter-spacing:-.04em; margin:0; }
.original-header p { color:var(--o-muted); font-size:12px; margin:8px 0 0; }
.original-guide-link { color:var(--o-accent); font-size:11px; text-decoration:none; padding:12px 0; }
body.game-page .game-layout { width:100%; max-width:1280px; padding:0; gap:24px; }
body.game-page .game-main { min-width:0; }
body.game-page .game-rail { width:300px; flex:0 0 300px; gap:14px; }
body.game-page .rail-card { border:1px solid #30394d; border-radius:16px; background:#161c29; padding:18px; box-shadow:none; backdrop-filter:none; }
body.game-page :is(.rail-card-title,.setting-label,.stat-label,.score-label,.hud-stat-label) { font:600 9px/1.5 'Poppins',system-ui,sans-serif; letter-spacing:.11em; color:#aeb7cb; }
body.game-page :is(.rail-card .stat-value,.rail-card .score-value,.hud-stat-value) { text-shadow:none; font-family:'Poppins',system-ui,sans-serif; }
body.game-page :is(.setting-group,.action-btn,.help-toggle,.history-toggle) { border-radius:10px; box-shadow:none; backdrop-filter:none; }
body.game-page .setting-group { flex-wrap:wrap; background:#1b2232; border-color:#364158; }
body.game-page .setting-btn { min-height:36px; padding:7px 12px; font:600 11px 'Poppins',system-ui,sans-serif; border-radius:8px; color:#dce1ef; }
body.game-page .setting-btn.active { background:var(--o-accent); color:#141725; box-shadow:none; }
body.game-page :is(.action-btn,.help-toggle,.history-toggle,.tool-btn) { min-height:40px; font-family:'Poppins',system-ui,sans-serif; font-size:11px; }
body.game-page :is(.help-panel,.history-panel,.controls-hint) { font-family:'Poppins',system-ui,sans-serif; color:#bac4d8; font-size:12px; line-height:1.8; }
body.game-page :is(.help-toggle,.history-toggle) { color:#dce1ef; }
body.game-page :is(button,a,[tabindex]):focus-visible { outline:3px solid var(--o-accent); outline-offset:4px; }
body.game-page .overlay, body.game-page .game-over-overlay { background:rgba(9,13,23,.84); backdrop-filter:blur(8px); }
body.game-page :is(.overlay-box,.game-over-box) { border:1px solid #3c4660; background:#161d2c; border-radius:22px; box-shadow:0 24px 70px #0008; padding:28px; color:#f4f5fb; max-height:calc(100svh - 100px); overflow:auto; }
body.game-page :is(.overlay-title,.game-over-box h2) { font-family:'Poppins',system-ui,sans-serif; letter-spacing:-.035em; color:#f4f5fb; text-shadow:none; }
body.game-page :is(.overlay-btn-primary,.start-cta,.game-over-btn-primary) { background:var(--o-accent); color:#151925; box-shadow:none; border-radius:12px; font:700 14px 'Poppins',system-ui,sans-serif; letter-spacing:0; min-height:48px; padding:14px 28px; }
.original-welcome { max-width:330px; margin:0 auto 22px; }
.original-welcome img { display:block; width:76px; height:76px; object-fit:cover; border-radius:20px; margin:0 auto 16px; border:1px solid #ffffff30; }
.original-welcome h2 { font:700 26px/1.2 'Poppins',system-ui,sans-serif; letter-spacing:-.04em; color:#f4f5fb; margin:0 0 10px; }
.original-welcome p { color:#bec7dc; font:400 12px/1.8 'Poppins',system-ui,sans-serif; }
.original-dialog { position:fixed!important; margin:auto; border:1px solid #46526c; border-radius:24px; background:#161d2c; color:#f4f5fb; padding:28px; width:min(440px,calc(100vw - 32px)); max-height:calc(100svh - 48px); overflow:auto; z-index:20000; box-shadow:0 28px 100px #0008; }
.original-dialog::backdrop { background:#070b15b8; backdrop-filter:blur(5px); }
.original-dialog h2 { font:700 24px 'Poppins',system-ui,sans-serif; margin:0 0 20px; }
.original-dialog h3 { color:var(--o-accent); font:600 11px 'Poppins',system-ui,sans-serif; margin:22px 0 8px; text-transform:uppercase; letter-spacing:.12em; }
.original-dialog p { font:400 13px/1.8 'Poppins',system-ui,sans-serif; color:#c2ccde; }
.original-dialog button { min-height:44px; border:1px solid #47536d; border-radius:11px; background:#252e42; color:white; padding:10px 18px; margin-top:24px; font:600 12px 'Poppins',system-ui,sans-serif; }
.original-live { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
body.game-page #themeBar { display:none; }
@media(max-width:899px) {
  html[data-original] body.game-page{padding:0 14px 24px}
  body.game-page .game-nav{gap:12px;margin-bottom:16px;min-height:60px}
  body.game-page .game-nav a{font-size:10px;gap:5px}
  .original-actions{gap:5px} .original-actions button,body.game-page .game-nav .audio-toggle{padding:8px;min-width:36px;font-size:10px}
  body.game-page .game-nav .audio-toggle{width:38px;overflow:hidden;font-size:0}
  body.game-page .game-nav .audio-toggle svg{flex-shrink:0;width:17px}
  .original-header{padding-bottom:16px;gap:10px}.original-header p{font-size:11px}.original-guide-link{font-size:10px}
  body.game-page .game-layout{gap:16px;padding:0;flex-direction:column}
  body.game-page .game-rail{width:100%;flex-basis:auto;max-width:700px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.game-page .rail-card{padding:12px;min-width:0} body.game-page .rail-card:has(.settings-bar){grid-column:1/-1}
  body.game-page .game-rail .settings-bar{margin:0;max-width:none}
  body.game-page .game-main{width:100%}
  body.game-page .overlay,body.game-page .game-over-overlay{padding:76px 18px 20px;overflow:auto;align-items:center}
  .original-welcome img{width:62px;height:62px;margin-bottom:12px}.original-welcome{margin-bottom:18px}
  body.game-page .settings-bar.overlay-settings{gap:8px;margin-bottom:14px}
  body.game-page .setting-btn{min-height:36px;padding:7px 10px}
  body.game-page .overlay-box{padding:22px;max-width:100%;min-width:0}
  body.game-page .controls-hint{font-size:10px;line-height:1.6}
}
@media(prefers-reduced-motion:reduce) { html[data-original] *,html[data-original] *::before,html[data-original] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} }
/* Controls remain still so their hit targets never move under a pointer. */
html[data-original] body.game-page :is(.start-cta,.start-cta::before,.overlay-btn,.setting-btn,.action-btn) { animation:none!important; }
@media(max-width:899px) {
  body.game-page .game-rail { grid-template-columns:1fr; }
  body.game-page .rail-card:has(.settings-bar) { grid-column:auto; }
}
body.game-page .ht-overlay { background:rgba(9,13,23,.84); backdrop-filter:blur(8px); }
body.game-page .ht-overlay-box { border:1px solid #3c4660; background:#161d2c; border-radius:22px; color:#f4f5fb; box-shadow:0 24px 70px #0008; }
body.game-page .ht-overlay-title { font-family:'Poppins',system-ui,sans-serif; color:#f4f5fb; }
body.game-page .ht-overlay-sub { color:#c2cbde; }
body.game-page .seg { border-color:#3a455e; background:#1c2536; }
body.game-page .seg-btn { color:#c9d2e5; min-height:40px; font:600 11px 'Poppins',system-ui,sans-serif; }
body.game-page .seg-btn.active { color:#18201c; background:var(--o-accent); }
body.game-page .hud-strip { flex-wrap:wrap; }

body.game-page .ht-overlay-title { background:none; -webkit-text-fill-color:currentColor; }
body.game-page .ht-btn { min-height:44px; font-family:'Poppins',system-ui,sans-serif; letter-spacing:0; border-radius:11px; }
body.game-page .ht-btn-ghost, body.game-page .ht-btn-close { color:#e6ebf7; background:#252e42; border:1px solid #46536e; }
body.game-page .ht-btn-close { width:44px; height:44px; }
body.game-page .stat-cell { background:#1d273a; border-color:#39445c; }
body.game-page .stat-cell-num { color:#eef2fc; }
body.game-page .stat-cell-lbl { color:#b7c2d6; }
@media(pointer:coarse) { body.game-page .setting-btn { min-height:44px; } }
/* Keep essential actions accessible below the board on smaller screens. */
@media(max-width:899px) {
  body.game-page .game-rail .rail-card-setup { display:block; }
  body.game-page .game-rail .stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(66px,1fr)); gap:8px; }
  html[data-original="battleship"] #targetCol { order:-1; }
}
html[data-original="asteroids"] .action-bar { bottom:68px; }
/* Settings on start screens must receive touch input above the canvas. */
body.game-page .overlay.active .setting-btn { pointer-events:auto; }
body.game-page .game-over-overlay:not(.active) { visibility:hidden; }
body.game-page .game-over-overlay.active { visibility:visible; }
body.game-page .rail-card :is(.help-toggle,.history-toggle) { display:block; width:100%; min-height:44px; padding:10px 14px; text-align:left; color:#dce5f7; border:1px solid #3a4862; background:#1d2638; }
@media(max-width:480px) {
  html[data-original="sudoku"] .num-pad { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  html[data-original="sudoku"] .num-btn { min-height:44px; font-size:18px; }
}