/* DEV-UI-01 — global LIGHT/DARK application shell.
   Gameplay geometry remains owned by R5 src/styles.css / Board.js. */


/* Legacy-safe direct-color fallback. Modern browsers override this section with tokens below.
   This keeps LIGHT/DARK usable when CSS custom properties/clamp/color-mix are unavailable. */
html[data-theme="light"],html[data-theme="light"] body{background:#F6F9FC;color:#102A39}
html[data-theme="dark"],html[data-theme="dark"] body{background:#0E1424;color:#E7ECF6}
html[data-theme="light"] .screen{background:#F6F9FC;color:#102A39;font-size:17px}
html[data-theme="dark"] .screen{background:#0E1424;color:#E7ECF6;font-size:17px}
html[data-theme="light"] .panel,html[data-theme="light"] .modal-shell,html[data-theme="light"] .settings-list,html[data-theme="light"] .daily-card,html[data-theme="light"] .endless-card,html[data-theme="light"] .character-card,html[data-theme="light"] .trail-card,html[data-theme="light"] .leaderboard-card{background:#FFFFFF;color:#102A39}
html[data-theme="dark"] .panel,html[data-theme="dark"] .modal-shell,html[data-theme="dark"] .settings-list,html[data-theme="dark"] .daily-card,html[data-theme="dark"] .endless-card,html[data-theme="dark"] .character-card,html[data-theme="dark"] .trail-card,html[data-theme="dark"] .leaderboard-card{background:#151E2E;color:#E7ECF6}
html[data-theme="light"] .btn,html[data-theme="light"] .icon-btn,html[data-theme="light"] .control-btn,html[data-theme="light"] .hud-pause,html[data-theme="light"] .toggle-btn,html[data-theme="light"] .small-pill,html[data-theme="light"] .seg,html[data-theme="light"] .chapter-card,html[data-theme="light"] .level-card{background:#F1F4F8;color:#102A39}
html[data-theme="dark"] .btn,html[data-theme="dark"] .icon-btn,html[data-theme="dark"] .control-btn,html[data-theme="dark"] .hud-pause,html[data-theme="dark"] .toggle-btn,html[data-theme="dark"] .small-pill,html[data-theme="dark"] .seg,html[data-theme="dark"] .chapter-card,html[data-theme="dark"] .level-card{background:#1B263B;color:#E7ECF6}
html[data-theme="light"] .btn-primary{background:#2E7CF6;color:#fff}html[data-theme="dark"] .btn-primary{background:#2A61E8;color:#fff}
html[data-theme="light"] .btn-ad{background:#F5B52A;color:#5B4720}html[data-theme="dark"] .btn-ad{background:#E8A926;color:#2A2110}
html[data-theme="light"] .btn{font-size:18px}html[data-theme="dark"] .btn{font-size:18px}
html[data-theme="light"] .btn-primary,html[data-theme="dark"] .btn-primary{font-size:20px}
html[data-theme="light"] .screen-header h1,html[data-theme="dark"] .screen-header h1{font-size:30px}
html[data-theme="light"] .game-level-label,html[data-theme="light"] .game-count,html[data-theme="dark"] .game-level-label,html[data-theme="dark"] .game-count{font-size:18px}
html[data-theme="light"] .mechanic-tip,html[data-theme="light"] .control-btn,html[data-theme="light"] .hud-pause,html[data-theme="dark"] .mechanic-tip,html[data-theme="dark"] .control-btn,html[data-theme="dark"] .hud-pause{font-size:15px}
html[data-theme="light"] .modal-backdrop{background:rgba(36,52,71,.34)}html[data-theme="dark"] .modal-backdrop{background:rgba(5,11,20,.58)}
html[data-theme="dark"] .screen-game{background:#111A2A}html[data-theme="dark"] .screen-game .tile{background:#1A2638;box-shadow:5px 5px 11px #060B14,-5px -5px 11px #26364A}html[data-theme="dark"] .screen-game .tile.visited{background:#223044}html[data-theme="dark"] .screen-game .tile.current{outline-color:#79B8FF}

:root,
[data-theme="light"] {
  --ui-bg: #F6F9FC;
  --ui-surface: #FFFFFF;
  --ui-surface-raised: #F1F4F8;
  --ui-surface-inset: #E8EEF3;
  --ui-text-primary: #102A39;
  --ui-text-secondary: #687C93;
  --ui-text-disabled: #A6B0BF;
  --ui-shadow-light: rgba(255,255,255,.88);
  --ui-shadow-dark: rgba(199,212,222,.62);
  --ui-focus: #2F87FF;
  --ui-overlay: rgba(36,52,71,.34);
  --ui-scroll-track: rgba(220,229,236,.42);
  --ui-scroll-thumb: rgba(142,162,180,.65);
  --accent-blue: #4DA3FF;
  --accent-purple: #8B6CFF;
  --accent-green: #4CD3BE;
  --accent-orange: #F6A84C;
  --accent-red: #F2667E;
  --accent-master: #65708C;
  --reward-gold: #FFC84D;
  --success: #36C993;
  --error: #EA6271;
  --font-caption-ui: clamp(15px, 1.2vw, 16px);
  --font-secondary-ui: clamp(16px, 1.4vw, 18px);
  --font-body-ui: clamp(17px, 1.55vw, 19px);
  --font-card-title-ui: clamp(19px, 1.7vw, 21px);
  --font-button-secondary-ui: clamp(18px, 1.7vw, 20px);
  --font-button-primary-ui: clamp(20px, 1.9vw, 22px);
  --font-hud-ui: clamp(18px, 1.7vw, 20px);
  --font-popup-title-ui: clamp(26px, 2.7vw, 32px);
  --font-screen-title-ui: clamp(30px, 3vw, 36px);
  --font-result-title-ui: clamp(38px, 3.7vw, 44px);
}

[data-theme="dark"] {
  --ui-bg: #0E1424;
  --ui-surface: #151E2E;
  --ui-surface-raised: #1B263B;
  --ui-surface-inset: #0B1220;
  --ui-text-primary: #E7ECF6;
  --ui-text-secondary: #A9B4C8;
  --ui-text-disabled: #6F7A8C;
  --ui-shadow-light: rgba(38,54,79,.85);
  --ui-shadow-dark: rgba(5,10,18,.72);
  --ui-focus: #79B8FF;
  --ui-overlay: rgba(5,11,20,.58);
  --ui-scroll-track: rgba(10,16,32,.35);
  --ui-scroll-thumb: rgba(101,117,143,.72);
  --accent-blue: #4DA3FF;
  --accent-purple: #B26CFF;
  --accent-green: #62E6A6;
  --accent-orange: #FF9F45;
  --accent-red: #FF5E78;
  --accent-master: #7F8BCE;
  --reward-gold: #FFD461;
  --success: #62E6A6;
  --error: #FF6B7D;
  /* Existing production variable aliases needed by gameplay + older UI. */
  --text: #E7ECF6;
  --muted: #A9B4C8;
  --panel: #151E2E;
  --panel-strong: #1B263B;
  --line: rgba(169,180,200,.18);
  --shadow-light: rgba(38,54,79,.78);
  --shadow-dark: rgba(5,10,18,.72);
  --gold: #FFD461;
  --danger: #FF6B7D;
}

[data-theme="light"] { --text:var(--ui-text-primary); --muted:var(--ui-text-secondary); --gold:var(--reward-gold); --danger:var(--error); }
html, body { background: var(--ui-bg); color: var(--ui-text-primary); }
body, button { color: var(--ui-text-primary); }

/* Chapter theme classes become accent-only. They never choose global LIGHT/DARK. */
.theme-ice { --theme-accent:#4DA3FF; }
.theme-mint { --theme-accent:#4CD3BE; }
.theme-lavender { --theme-accent:#8B6CFF; --portal:#8B6CFF; }
.theme-peach { --theme-accent:#F6A84C; }
.theme-sunset { --theme-accent:#F2667E; }
[data-theme="light"] .theme-night {
  --theme-accent:#65708C; --text:#102A39; --muted:#687C93; --panel:#eef5f9; --panel-strong:#f5f9fc;
  --line:rgba(83,111,128,.16); --shadow-dark:rgba(86,112,128,.24); --shadow-light:rgba(255,255,255,.9); --portal:#8d77db;
}
[data-theme="dark"] .theme-night { --theme-accent:#7F8BCE; --portal:#B26CFF; }

.screen {
  color: var(--ui-text-primary);
  font-size: var(--font-body-ui);
  background:
    radial-gradient(circle at 15% 15%, rgba(77,163,255,.055), transparent 32%),
    linear-gradient(145deg, var(--ui-bg), var(--ui-surface-raised));
}
[data-theme="dark"] .screen {
  background:
    radial-gradient(circle at 15% 15%, rgba(77,163,255,.09), transparent 32%),
    linear-gradient(145deg, #0E1424, #111A2A);
}
.screen::before { background: color-mix(in srgb, var(--ui-surface) 55%, transparent); opacity:.3; }
.screen::after { background: color-mix(in srgb, var(--theme-accent) 13%, transparent); opacity:.34; }
.loading-screen, .fatal-card { background:linear-gradient(145deg,var(--ui-bg),var(--ui-surface-raised)); color:var(--ui-text-primary); }
.loading-screen p { color:var(--ui-text-secondary); font-size:var(--font-secondary-ui); }

/* Shared component system */
.btn, .icon-btn, .control-btn, .hud-pause, .toggle-btn, .small-pill, .seg, .chapter-card, .level-card {
  color:var(--ui-text-primary);
}
.btn {
  min-height:52px; padding:12px 24px; border-radius:18px; font-size:var(--font-button-secondary-ui); font-weight:600;
  background:linear-gradient(145deg,var(--ui-surface),var(--ui-surface-raised));
  box-shadow:-4px -4px 10px var(--ui-shadow-light),5px 6px 12px var(--ui-shadow-dark);
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
.btn-xl, .btn-primary { min-height:56px; }
.btn-primary { color:#fff; font-size:var(--font-button-primary-ui); background:linear-gradient(145deg,#67B8FF,#2E7CF6); box-shadow:-4px -4px 10px var(--ui-shadow-light),5px 6px 12px var(--ui-shadow-dark); }
[data-theme="dark"] .btn-primary { background:linear-gradient(145deg,#4A8BFF,#2A61E8); color:#fff; }
.btn-secondary { background:linear-gradient(145deg,var(--ui-surface),var(--ui-surface-raised)); }
.btn-tertiary { min-height:48px; border-radius:16px; background:var(--ui-surface-raised); color:var(--ui-text-secondary); box-shadow:-3px -3px 8px var(--ui-shadow-light),4px 5px 10px var(--ui-shadow-dark); }
.btn-ad { color:#5B4720; background:linear-gradient(145deg,#FFD667,#F5B52A); }
[data-theme="dark"] .btn-ad { color:#2A2110; background:linear-gradient(145deg,#FFD86A,#E8A926); }
.btn:hover:not(:disabled):not([aria-disabled="true"]), .icon-btn:hover:not(:disabled):not([aria-disabled="true"]), .chapter-card:hover:not(:disabled):not([aria-disabled="true"]), .level-card:hover:not(:disabled):not([aria-disabled="true"]), .seg:hover:not(:disabled):not([aria-disabled="true"]) { transform:translateY(-1px); }
.btn:active:not(:disabled):not([aria-disabled="true"]), .icon-btn:active:not(:disabled):not([aria-disabled="true"]), .chapter-card:active:not(:disabled):not([aria-disabled="true"]), .level-card:active:not(:disabled):not([aria-disabled="true"]), .seg:active:not(:disabled):not([aria-disabled="true"]) { transform:translateY(1px); box-shadow:inset 3px 3px 8px var(--ui-shadow-dark), inset -3px -3px 8px var(--ui-shadow-light); }
button:focus-visible, .btn:focus-visible, .chapter-card:focus-visible, .level-card:focus-visible, .seg:focus-visible { outline:2px solid var(--ui-focus); outline-offset:2px; box-shadow:0 0 0 2px var(--ui-bg),0 0 12px color-mix(in srgb,var(--ui-focus) 22%,transparent); }
button:disabled, button[aria-disabled="true"] { color:var(--ui-text-disabled); opacity:1; }
.icon-btn { width:48px; height:48px; min-width:48px; min-height:48px; border-radius:16px; background:var(--ui-surface-raised); box-shadow:-4px -4px 10px var(--ui-shadow-light),5px 6px 12px var(--ui-shadow-dark); font-size:22px; }
.spark-amount { min-height:44px; height:auto; font-size:var(--font-secondary-ui); color:var(--ui-text-primary); background:var(--ui-surface-raised); box-shadow:inset 2px 2px 5px var(--ui-shadow-dark),inset -2px -2px 6px var(--ui-shadow-light); }
.spark-symbol { color:var(--reward-gold); }

.screen-header, .game-header { min-height:56px; }
.screen-header h1 { color:var(--ui-text-primary); font-size:var(--font-screen-title-ui); line-height:1.17; }
.panel { color:var(--ui-text-primary); background:var(--ui-surface); border:1px solid color-mix(in srgb,var(--ui-shadow-light) 40%,transparent); box-shadow:-6px -6px 14px var(--ui-shadow-light),8px 10px 18px var(--ui-shadow-dark); }
.theme-night .panel { background:var(--ui-surface); border-color:color-mix(in srgb,var(--ui-shadow-light) 28%,transparent); }

/* Scroll viewport -> safe padded content. */
.scroll-region { scrollbar-width:thin; scrollbar-color:var(--ui-scroll-thumb) var(--ui-scroll-track); }
.scroll-region::-webkit-scrollbar { width:6px; }
.scroll-region::-webkit-scrollbar-track { background:var(--ui-scroll-track); border-radius:999px; }
.scroll-region::-webkit-scrollbar-thumb { background:var(--ui-scroll-thumb); border-radius:999px; min-height:36px; }
.chapter-scroll, .level-scroll { width:min(100%,808px); min-height:0; justify-self:center; overflow-y:auto; overflow-x:hidden; overflow-anchor:none; overscroll-behavior:contain; }
.chapter-list { width:100%; padding:24px 24px 28px; }
.level-grid { width:100%; padding:24px 24px 28px; }
.chapter-card { color:var(--ui-text-primary); background:linear-gradient(145deg,var(--ui-surface),var(--ui-surface-raised)); box-shadow:-6px -6px 14px var(--ui-shadow-light),8px 10px 18px var(--ui-shadow-dark); }
.chapter-card.theme-night { background:linear-gradient(145deg,var(--ui-surface),var(--ui-surface-raised)); }
.chapter-number { background:var(--ui-surface-inset); box-shadow:inset 3px 3px 8px var(--ui-shadow-dark),inset -3px -3px 8px var(--ui-shadow-light); }
.chapter-info strong { font-size:var(--font-card-title-ui); }
.chapter-info small { color:var(--ui-text-secondary); font-size:var(--font-caption-ui); }
.chapter-glyph { color:var(--theme-accent); }
.chapter-locked { opacity:1; filter:none; color:var(--ui-text-disabled); background:var(--ui-surface-raised); }
.chapter-locked .chapter-info strong,.chapter-locked .chapter-info small,.chapter-locked .chapter-glyph { color:var(--ui-text-disabled); }
.level-card { background:linear-gradient(145deg,var(--ui-surface),var(--ui-surface-raised)); box-shadow:-4px -4px 10px var(--ui-shadow-light),5px 6px 12px var(--ui-shadow-dark); }
.level-index { font-size:clamp(20px,2vw,24px); }
.level-locked { opacity:1; color:var(--ui-text-disabled); background:var(--ui-surface-inset); box-shadow:inset 3px 3px 8px var(--ui-shadow-dark),inset -3px -3px 8px var(--ui-shadow-light); }
.perfect-dot,.done-dot,.lock-mark { font-size:15px; }
.lock-mark { color:var(--ui-text-disabled); }

/* Home */
.home-title { color:var(--ui-text-primary); font-size:clamp(30px,5vw,44px); line-height:1.15; }
.home-subtitle { color:var(--ui-text-secondary); font-size:var(--font-secondary-ui); }
.home-howto-btn { min-width:180px; }
.home-gift { background:linear-gradient(145deg,color-mix(in srgb,var(--reward-gold) 28%,var(--ui-surface)),color-mix(in srgb,var(--reward-gold) 18%,var(--ui-surface-raised))); color:var(--ui-text-primary); box-shadow:-4px -4px 10px var(--ui-shadow-light),5px 6px 12px var(--ui-shadow-dark); }
.home-gift-copy strong { font-size:var(--font-caption-ui); }
.home-gift-copy span { font-size:var(--font-secondary-ui); }
.home-gift-btn { min-height:48px; font-size:var(--font-caption-ui); }
.home-gift.claimed { opacity:1; color:var(--ui-text-disabled); }

/* Daily + Endless use only global theme. */
.daily-date { color:var(--ui-text-secondary); font-size:var(--font-caption-ui); }
.daily-card h2 { font-size:var(--font-card-title-ui); }
.daily-stats div,.daily-cycle { background:var(--ui-surface-raised); }
.daily-stats span { font-size:var(--font-caption-ui); color:var(--ui-text-secondary); }
.daily-cycle-title,.daily-next-reward { font-size:var(--font-secondary-ui); color:var(--ui-text-secondary); }
.daily-cycle-dot { width:32px; height:32px; font-size:15px; color:var(--ui-text-secondary); background:var(--ui-surface-inset); box-shadow:inset 2px 2px 5px var(--ui-shadow-dark),inset -2px -2px 5px var(--ui-shadow-light); }
.daily-cycle-dot.done { color:var(--ui-text-primary); background:color-mix(in srgb,var(--success) 30%,var(--ui-surface)); }
.daily-cycle-dot.next { outline-color:var(--reward-gold); }
.daily-orb,.result-orb { background:linear-gradient(145deg,var(--ui-surface),var(--ui-surface-raised)); box-shadow:-6px -6px 14px var(--ui-shadow-light),8px 10px 18px var(--ui-shadow-dark); color:var(--accent-purple); }
.endless-card { background:linear-gradient(145deg,var(--ui-surface),var(--ui-surface-raised)); box-shadow:-6px -6px 14px var(--ui-shadow-light),8px 10px 18px var(--ui-shadow-dark); }
.endless-card strong { font-size:var(--font-card-title-ui); }
.endless-card span { color:var(--ui-text-secondary); font-size:var(--font-secondary-ui); }
.endless-relax { border-top:3px solid var(--accent-green); }
.endless-normal { border-top:3px solid var(--accent-blue); }
.endless-hard { border-top:3px solid var(--accent-red); }

/* Settings + segmented theme control. */
.settings-list { background:var(--ui-surface); }
.setting-row { min-height:70px; font-size:var(--font-body-ui); border-color:color-mix(in srgb,var(--ui-text-secondary) 18%,transparent); }
.toggle-btn { min-height:48px; min-width:84px; font-size:var(--font-secondary-ui); color:var(--ui-text-primary); background:var(--ui-surface-inset); box-shadow:inset 2px 2px 5px var(--ui-shadow-dark),inset -2px -2px 5px var(--ui-shadow-light); }
.toggle-btn.active { background:color-mix(in srgb,var(--accent-blue) 20%,var(--ui-surface)); }
.segmented { background:var(--ui-surface-inset); padding:4px; border-radius:18px; gap:4px; }
.seg { min-height:44px; padding:9px 14px; border-radius:15px; background:transparent; color:var(--ui-text-secondary); font-size:var(--font-caption-ui); font-weight:600; box-shadow:none; }
.seg.active { color:var(--ui-text-primary); background:var(--ui-surface); box-shadow:inset 0 0 0 2px var(--accent-blue),-2px -2px 6px var(--ui-shadow-light),3px 4px 8px var(--ui-shadow-dark); }
.theme-selector { width:min(292px,54vw); height:52px; }
.theme-selector .seg { flex:1 1 0; min-height:44px; }

/* Cosmetic/leaderboard cards share global surfaces. */
.character-card,.trail-card,.leaderboard-card { background:linear-gradient(145deg,var(--ui-surface),var(--ui-surface-raised)); box-shadow:-6px -6px 14px var(--ui-shadow-light),7px 9px 18px var(--ui-shadow-dark); color:var(--ui-text-primary); }
.trail-source,.leaderboard-rank,.leaderboard-auth p,.leaderboard-loading,.leaderboard-empty { color:var(--ui-text-secondary); font-size:var(--font-caption-ui); }
.trail-preview,.leaderboard-local,.leaderboard-own,.leaderboard-row { background:var(--ui-surface-raised); }
.leaderboard-name,.leaderboard-score { font-size:var(--font-secondary-ui); }
.cosmetic-tabs .seg,.leaderboard-tabs .seg { font-size:var(--font-secondary-ui); min-height:48px; }

/* Result / rewarded UI */
.result-card h1 { font-size:var(--font-result-title-ui); color:var(--ui-text-primary); }
.reward-row { background:var(--ui-surface-raised); font-size:var(--font-body-ui); }
.chapter-reward { background:linear-gradient(145deg,color-mix(in srgb,var(--reward-gold) 18%,var(--ui-surface)),var(--ui-surface-raised)); color:var(--ui-text-primary); }
.chapter-complete-label { color:var(--reward-gold); font-size:var(--font-card-title-ui); }
.new-trail-label,.reward-double-btn span { font-size:var(--font-caption-ui); color:var(--ui-text-secondary); }
.reward-double-btn strong { font-size:var(--font-button-secondary-ui); }

/* Modal / Pause / How To Play */
.modal-backdrop { background:var(--ui-overlay); backdrop-filter:blur(2px); }
.modal-shell { color:var(--ui-text-primary); background:linear-gradient(145deg,var(--ui-surface),var(--ui-surface-raised)); box-shadow:-10px -10px 24px var(--ui-shadow-light),12px 16px 32px var(--ui-shadow-dark); }
.pause-content h2,.howto-content h2 { color:var(--ui-text-primary); font-size:var(--font-popup-title-ui); }
.pause-content { gap:12px; }
.pause-menu-btn { color:var(--ui-text-primary); }
.small-pill { min-height:44px; font-size:var(--font-caption-ui); color:var(--ui-text-primary); background:var(--ui-surface-inset); }
.howto-content { font-size:var(--font-body-ui); }
.how-intro,.calm-note,.how-section p { color:var(--ui-text-secondary); }
.how-section { background:var(--ui-surface-raised); }
.how-section h3 { font-size:var(--font-card-title-ui); }
.how-section p { font-size:var(--font-secondary-ui); }
.toast { font-size:var(--font-caption-ui); background:color-mix(in srgb,var(--ui-text-primary) 92%,transparent); color:var(--ui-bg); }

/* Gameplay chrome typography updates; Board geometry untouched. */
.game-level-label,.game-count { font-size:var(--font-hud-ui); color:var(--ui-text-primary); }
.hud-pause { min-height:48px; font-size:15px; color:var(--ui-text-primary); background:var(--ui-surface-raised); box-shadow:-3px -3px 8px var(--ui-shadow-light),4px 5px 10px var(--ui-shadow-dark); }
.mechanic-tip { font-size:15px; color:var(--ui-text-secondary); background:color-mix(in srgb,var(--ui-surface) 72%,transparent); }
.control-btn { min-height:52px; font-size:15px; color:var(--ui-text-primary); background:linear-gradient(145deg,var(--ui-surface),var(--ui-surface-raised)); box-shadow:-4px -4px 10px var(--ui-shadow-light),5px 6px 12px var(--ui-shadow-dark); }
.control-btn:disabled, .control-btn[aria-disabled="true"] { color:var(--ui-text-disabled); opacity:1; }

/* Protected gameplay: LIGHT explicitly restores R5 material values. */
[data-theme="light"] .screen-game .tile {
  background:linear-gradient(145deg,rgba(249,252,254,.88),rgba(220,233,241,.8));
  box-shadow:5px 5px 11px rgba(86,112,128,.24),-5px -5px 11px rgba(255,255,255,.9),inset 0 1px 0 rgba(255,255,255,.55);
}
[data-theme="light"] .screen-game .tile.visited { box-shadow:inset 4px 4px 9px color-mix(in srgb,var(--path) 24%,rgba(86,112,128,.24)),inset -4px -4px 9px rgba(255,255,255,.62),0 0 16px var(--path-soft); }
[data-theme="light"] .screen-game .goal-charged { box-shadow:0 0 22px color-mix(in srgb,var(--portal) 42%,transparent),5px 5px 11px rgba(86,112,128,.24),-5px -5px 11px rgba(255,255,255,.9); }

/* DARK board adaptation is color/contrast only. No geometry/stroke/asset override. */
[data-theme="dark"] .screen-game { background:linear-gradient(145deg,#0E1424,#111A2A); }
[data-theme="dark"] .screen-game .tile { background:linear-gradient(145deg,#1A2638,#172233); box-shadow:5px 5px 11px #060B14,-5px -5px 11px #26364A,inset 0 1px 0 rgba(38,54,74,.55); }
[data-theme="dark"] .screen-game .tile.visited { background:#223044; box-shadow:inset 4px 4px 9px #060B14,inset -4px -4px 9px #26364A,0 0 16px var(--path-soft); }
[data-theme="dark"] .screen-game .tile.current { outline-color:#79B8FF; }
[data-theme="dark"] .screen-game .goal-tile { background:linear-gradient(145deg,color-mix(in srgb,var(--portal) 18%,#1A2638),color-mix(in srgb,var(--portal) 11%,#121C2B)); }
[data-theme="dark"] .screen-game .goal-charged { box-shadow:0 0 24px color-mix(in srgb,var(--portal) 46%,transparent),5px 5px 11px #060B14,-5px -5px 11px #26364A; }
[data-theme="dark"] .screen-game .vortex { filter:drop-shadow(0 0 8px color-mix(in srgb,var(--portal) 38%,transparent)); }
[data-theme="dark"] .screen-game .goal-charged .vortex { filter:drop-shadow(0 0 13px color-mix(in srgb,var(--portal) 68%,transparent)); }
[data-theme="dark"] .screen-game .flowling { filter:drop-shadow(0 6px 7px rgba(5,10,18,.52)) drop-shadow(0 0 1px rgba(231,236,246,.12)); }

@media (min-width:1100px) {
  .theme-selector { max-width:360px; width:360px; height:56px; }
  .theme-selector .seg { min-height:48px; }
}

@media (max-height:590px) and (orientation:portrait) {
  .btn { min-height:48px; padding:9px 16px; }
  .btn-primary,.btn-xl { min-height:50px; }
  .btn-tertiary { min-height:46px; }
  .home-subtitle { font-size:15px; }
  .home-gift { min-height:52px; }
  .home-gift-btn { min-height:46px; font-size:15px; }
  .mechanic-tip,.control-btn,.hud-pause { font-size:15px; }
}

@media (orientation:landscape) and (max-height:520px) {
  .game-level-label,.game-count,.mechanic-tip,.game-controls .control-btn { font-size:15px; }
  .game-controls .control-btn { min-height:50px; height:50px; }
  .screen-header h1 { font-size:clamp(24px,3vw,30px); }
  .setting-row { min-height:54px; }
  .btn { min-height:48px; }
}

@media (orientation:landscape) and (max-height:390px) {
  .game-controls .control-btn { font-size:15px; min-height:46px; height:46px; }
  .small-pill { font-size:15px; min-height:36px; }
  .pause-content h2 { font-size:24px; }
  .pause-content .btn { min-height:42px; font-size:15px; }
}
.screen-daily { --theme-accent:var(--accent-purple); }
.screen-endless { --theme-accent:var(--accent-blue); }

/* Chapter titles may wrap at the approved larger type size instead of degrading into ellipsis. */
.chapter-info strong { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.12; letter-spacing:.02em; }

/* DEV-UI-03 gameplay header title must remain compact enough for Back+Settings and Sparks+progress. */
.game-header .nav-title.game-level-label {
  font-size:16px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.02em;
}
@media (max-width:430px), (orientation:landscape) and (max-height:520px) {
  .game-header .nav-title.game-level-label { font-size:15px; }
}

/* STAGE5B-RC2 compact Home gift CTA in short landscape after mystery-card insertion. */
@media (orientation:landscape) and (max-height:520px) {
  html[data-theme="light"] .screen-home .home-gift-btn,
  html[data-theme="dark"] .screen-home .home-gift-btn {
    height:34px; min-height:34px; padding:5px 8px; font-size:15px; line-height:1.1; white-space:nowrap;
  }
}

/* STAGE5B-RC6 — final Home density overrides live in the last-loaded theme sheet. */
@media (max-width:599px) and (max-height:720px) and (orientation:portrait) {
  .screen-home .home-actions .btn {
    min-height:36px;
    padding:4px 7px;
    font-size:15px;
    line-height:1.05;
  }
  .screen-home .home-review-mystery {
    grid-template-columns:minmax(0,1fr) 68px;
    grid-template-areas:"copy pair" "cta cta";
    gap:3px 5px;
    padding:4px 7px;
  }
  .screen-home .home-review-cta {
    min-height:36px;
    padding:4px 6px;
    font-size:15px;
    line-height:1.05;
  }
  .screen-home .home-gift { min-height:44px; }
  .screen-home .home-gift-btn {
    min-height:34px;
    height:auto;
    padding:4px 7px;
    font-size:15px;
    line-height:1.05;
  }
  .screen-home .home-footer .btn {
    min-height:36px;
    padding:4px 7px;
    font-size:15px;
    line-height:1.05;
  }
}

@media (orientation:landscape) and (max-height:820px) and (min-width:800px) {
  .screen-home .home-actions .btn { min-height:40px; padding:6px 10px; }
}

@media (orientation:landscape) and (max-height:520px) and (min-width:800px) {
  .screen-home .home-actions .btn {
    min-height:36px;
    padding:4px 7px;
    font-size:15px;
    line-height:1.05;
  }
  .screen-home .home-review-cta {
    min-height:34px;
    padding:4px 6px;
    font-size:15px;
    line-height:1.05;
  }
  .screen-home .home-gift { min-height:40px; }
}