/* Shared site chrome and game-page refinements. Native game art keeps its identity. */
html[data-portal-theme="light"] { color-scheme: light; --site-bg:#f4f7f9; --site-side:#fff; --site-surface:#fff; --site-raised:#eaf1f4; --site-text:#182337; --site-muted:#627184; --site-line:#e2e9ee; --site-accent:#087f92; --site-accent-soft:#e0f3f4; --site-shadow:0 12px 28px rgba(27,48,65,.08); }
html[data-portal-theme="dark"] { color-scheme: dark; --site-bg:#101827; --site-side:#121e30; --site-surface:#19263b; --site-raised:#213149; --site-text:#f4f7fc; --site-muted:#a9b7ca; --site-line:#2c3d55; --site-accent:#6ecad5; --site-accent-soft:#143e50; --site-shadow:0 12px 30px rgba(0,0,0,.18); }

/* Top chrome on playable game pages. */
.game-page .portal-header { position: relative; z-index: 20; width:100%; min-width:0; background:var(--site-side); border-color:var(--site-line); color:var(--site-text); }
.game-page .portal-header-in { width:100%; max-width: 1540px; min-width:0; min-height: 68px; gap: 12px 24px; padding: 10px 22px; }
.game-page .portal-logo { display: inline-flex; align-items:center; gap:8px; color:var(--site-text) !important; font-size: 1.07rem; white-space: nowrap; letter-spacing:-.025em; }
.game-page .portal-nav { gap: 4px 12px; }
.game-page .portal-nav a { color:var(--site-muted); border:0; border-radius:8px; padding:6px 9px; font-weight:650; }
.game-page .portal-nav a:hover { color:var(--site-text); background:var(--site-raised); }
.game-page .portal-nav a[aria-current="page"] { background:var(--site-accent-soft); color:var(--site-accent); }
.game-page .portal-search { flex-basis:190px; }
.game-page .portal-header-in > nav { min-width:0; max-width:100%; }
.game-page .portal-search input { background:var(--site-raised); color:var(--site-text); border-color:var(--site-line); border-radius:9px; }
.game-page .portal-search input::placeholder { color:var(--site-muted); }
.game-page .portal-results { background:var(--site-surface); border-color:var(--site-line); box-shadow:var(--site-shadow); }
.game-page .portal-results a { color:var(--site-text); }
.game-page .portal-results a:hover,.game-page .portal-results a:focus { background:var(--site-raised); }
.game-page .portal-results small,.game-page .portal-results .none { color:var(--site-muted); }
.game-page .home-theme-toggle { cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:6px 10px; border:1px solid var(--site-line); border-radius:9px; background:var(--site-surface); color:var(--site-text); font:inherit; font-size:.8rem; font-weight:700; white-space:nowrap; }
.game-page .home-theme-toggle:hover { background:var(--site-raised); }
.game-page .home-theme-icon { font-size:1.12rem; line-height:1; }
.game-page .portal-crumbs { max-width:1540px; padding:10px 22px; color:var(--site-muted); }
.game-page .portal-crumbs,.game-page .portal-info,.game-page .portal-footer { width:100%; align-self:stretch; }
.game-page .portal-crumbs a { color:var(--site-accent); }
.game-page .portal-crumbs li + li::before { color:var(--site-muted); }
.game-page .portal-h1 { max-width:1200px; color:var(--site-text); font-size:clamp(1.5rem,2.7vw,2.25rem); letter-spacing:-.03em; }
.game-page .portal-intro { color:var(--site-muted); line-height:1.65; }

/* Light presentation for games that use the shared color variables. */
html[data-portal-theme="light"] body.game-themeable { --bg:#f4f7f9; --panel:#fff; --line:#dce5eb; --text:#1c2b3d; --muted:#5e7184; color-scheme:light; }
body.game-themeable { background:var(--bg); }
body.game-themeable > main { width:min(100% - 24px, var(--game-frame-max, 1020px)); margin:12px auto 32px; padding:clamp(14px,2.4vw,26px); border:1px solid var(--site-line); border-radius:20px; background:var(--panel); box-shadow:var(--site-shadow); }
body.game-themeable > main > .portal-intro { order:20; width:100%; margin:12px 0 0; padding-top:13px; border-top:1px solid var(--site-line); font-size:.92rem; }
body.game-themeable > main h1 { line-height:1.2; letter-spacing:-.025em; }
body.game-themeable > main button:not(.cell):not(.tile):not(.pcard) { min-height:38px; transition:border-color .12s ease, box-shadow .12s ease; }
body.game-themeable > main button:not(:disabled):active { filter:brightness(.94); }
body.game-themeable > main button:focus-visible { outline:3px solid #eaa340; outline-offset:2px; }
body.game-themeable > main :is(canvas,.felt,#board,.grid) { max-width:100%; }
body.game-themeable > main :is(canvas,.felt,#board,.grid):not(.pcard) { box-shadow:0 12px 26px rgba(10,24,37,.14); }
body.game-themeable > main .help { line-height:1.55; }
html[data-portal-theme="light"] body.game-themeable #overlay { color:#f4f7fc; }
html[data-portal-theme="light"] body.game-themeable #overlay p { color:#b9c9d9; }

/* Game-specific settings and boards remain visually distinct, but gain clearer depth. */
body.game-themeable:has(#board .cell) #board { border-radius:12px; overflow:hidden; }
body.game-themeable:has(canvas) canvas { border:1px solid var(--site-line); }
html[data-portal-theme="light"] body.game-themeable .cell:not(.open):not([class*="c"]):not(.on):not(.lit) { filter:brightness(1.13); }
body.game-themeable .bar, body.game-themeable .hud { row-gap:10px; }

/* Reading content beneath every game. */
.game-page .portal-info { background:var(--site-bg); color:var(--site-text); border-top:1px solid var(--site-line); padding:20px 0 38px; }
.game-page .portal-info-in { max-width:1200px; }
.game-page .portal-info .portal-section { margin: 16px 0; padding:20px 23px; border:1px solid var(--site-line); border-radius:15px; background:var(--site-surface); box-shadow:var(--site-shadow); }
.game-page .portal-info .portal-section h2 { color:var(--site-text); font-size:1.35rem; letter-spacing:-.025em; }
.game-page .portal-info .portal-section h2::before { content:''; display:inline-block; width:5px; height:19px; margin-right:10px; border-radius:4px; background:var(--site-accent); vertical-align:-3px; }
.game-page .portal-info .portal-section h3 { color:var(--site-text); }
.game-page .portal-info .portal-section p,.game-page .portal-info .portal-section li { color:var(--site-muted); max-width:900px; line-height:1.65; }
.game-page .portal-info a { color:var(--site-accent); }
.game-page .portal-info-grid { max-width:none; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:10px; }
.game-page .portal-info-grid div { background:var(--site-raised); border-color:var(--site-line); padding:12px 14px; }
.game-page .portal-info-grid dt { color:var(--site-muted); }
.game-page .portal-info-grid dd { color:var(--site-text); }
.game-page .portal-info .portal-card { background:var(--site-surface); border-color:var(--site-line); box-shadow:var(--site-shadow); }
.game-page .portal-info .portal-card h3 a { color:var(--site-text); }
.game-page .portal-info .portal-card p { color:var(--site-muted); }
.game-page .portal-info .portal-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.game-page .portal-info .portal-faq details { max-width:none; background:var(--site-raised); border-color:var(--site-line); }
.game-page .portal-info .portal-faq summary { color:var(--site-text); }
.game-page .portal-info .portal-btn { background:var(--site-accent); color:#fff !important; border-radius:9px; }
.game-page .portal-info .portal-btn.alt { background:var(--site-raised); color:var(--site-text) !important; border-color:var(--site-line); }
.game-page .portal-footer { background:var(--site-side); border-color:var(--site-line); color:var(--site-muted); }
.game-page .portal-footer-in { max-width:1540px; }
.game-page .portal-footer strong { color:var(--site-text); }
.game-page .portal-footer a { color:var(--site-muted); }
.game-page .portal-footer a:hover { color:var(--site-accent); }
.game-page .portal-note { color:var(--site-muted); }
.game-page .portal-wrap :focus-visible { outline:3px solid #eaa340; outline-offset:2px; }

@media (max-width:950px) {
  .game-page .portal-header-in { gap:8px 12px; }
  .game-page .portal-header-in > nav { order:3; flex:0 0 100%; overflow-x:auto; scrollbar-width:none; }
  .game-page .portal-nav { flex-wrap:nowrap; width:max-content; }
  .game-page .portal-nav a { white-space:nowrap; }
  .game-page .portal-search { flex:1 1 150px; }
}
@media (max-width:640px) {
  .game-page .portal-header-in { padding:8px 12px; }
  .game-page .portal-logo { font-size:.9rem; }
  .game-page .portal-logo::before { width:29px; height:29px; }
  .game-page .portal-search { order:2; flex:1 1 100%; }
  .game-page .portal-header-in > nav { order:3; }
  .game-page .home-theme-toggle { order:1; min-height:34px; }
  .game-page .portal-crumbs { padding:7px 13px; }
  body.game-themeable > main { width:calc(100% - 16px); margin:8px auto 20px; padding:12px 8px; border-radius:15px; }
  .game-page .portal-info { padding:10px 0 24px; }
  .game-page .portal-info-in { padding:0 10px; }
  .game-page .portal-info .portal-section { padding:15px; }
  .game-page .portal-info .portal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  /* The word game's on-screen keyboard needs the full remaining phone height. */
  body.game-page:has(#kb) .portal-search, body.game-page:has(#kb) .portal-header-in > nav { display:none; }
  body.game-page:has(#kb) > main { min-height:0; }
  body.game-page:has(#kb) #grid { --t:min(52px, calc((100vw - 60px) / 5), calc((100dvh - 410px) / 6)); }
  body.game-page:has(#kb) .krow button { height:42px; }
}
@media (prefers-reduced-motion:reduce) {
  body.game-themeable > main button { transition:none; }
}
@media (max-width:640px) and (max-height:680px) {
  body.game-page:has(#kb) > main { gap:6px; padding:4px 8px 8px; }
  body.game-page:has(#kb) #grid { --t:min(36px, calc((100vw - 64px) / 5)); gap:4px; padding:5px; }
  body.game-page:has(#kb) #grid .row { gap:4px; }
  body.game-page:has(#kb) #kb { gap:4px; padding-bottom:3px; }
  body.game-page:has(#kb) .krow button { height:36px; }
}