:root {
  --bg: #e7f0f6;
  --panel: #eef5f9;
  --panel-strong: #f5f9fc;
  --text: #263845;
  --muted: #708693;
  --line: rgba(83, 111, 128, 0.16);
  --path: #62df9f;
  --path-soft: rgba(98, 223, 159, 0.36);
  --portal: #8e71e8;
  --gold: #e9b84f;
  --danger: #d66e75;
  --shadow-dark: rgba(86, 112, 128, 0.24);
  --shadow-light: rgba(255, 255, 255, 0.9);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body, #app, #app * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}
img {
  -webkit-user-drag: none;
  user-drag: none;
}
html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none;
  background: #dce8ef; color: var(--text); font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
body { min-width: 280px; min-height: 300px; }
button, img, .tile, .board-shell { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
button:disabled, button[aria-disabled="true"], button[data-disabled="true"] { cursor: default; }
img { max-width: 100%; }
#app, #screen-root { width: 100%; height: 100%; overflow: hidden; }
#app { position: relative; }
#screen-root { display: flex; justify-content: center; align-items: stretch; }

.loading-screen, .fatal-card {
  width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: linear-gradient(145deg, #edf5f9, #dbe8f0); color: var(--text); text-align: center; padding: 24px;
}
.loading-logo { width: min(78vw, 430px); max-height: 38vh; object-fit: contain; }
.loading-progress { width: min(72vw, 360px); height: 14px; overflow: hidden; border-radius: 999px; background: rgba(85,111,128,.14); box-shadow: inset 2px 2px 5px rgba(86,112,128,.18), inset -2px -2px 5px rgba(255,255,255,.72); }
.loading-progress-fill { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #62df9f, #68c7ef, #8e71e8); transition: width .16s ease-out; }
.loading-status { margin: 0; color: var(--muted); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
#loading-percent { display: inline-block; min-width: 3.2em; text-align: right; color: var(--text); }

.screen {
  --theme-bg-a: #edf6fb; --theme-bg-b: #dceaf2; --theme-path: #62df9f; --theme-accent: #6ba9d6;
  position: relative; width: min(100vw, 160vh); height: 100%; min-height: 0; overflow: hidden; color: var(--text);
  padding: calc(12px + var(--safe-top)) calc(14px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(14px + var(--safe-left));
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.78), transparent 32%),
    linear-gradient(145deg, var(--theme-bg-a), var(--theme-bg-b));
  isolation: isolate;
}
.screen::before, .screen::after { content: ""; position: absolute; border-radius: 50%; filter: blur(1px); opacity: .4; pointer-events: none; z-index: -1; }
.screen::before { width: 28vmin; height: 28vmin; left: -8vmin; bottom: 8vmin; background: rgba(255,255,255,.58); }
.screen::after { width: 22vmin; height: 22vmin; right: -7vmin; top: 9vmin; background: color-mix(in srgb, var(--theme-path) 18%, transparent); }
.theme-ice { --theme-bg-a:#eef7fb; --theme-bg-b:#dbe9f2; --theme-path:#5bd8a2; --theme-accent:#78aee0; }
.theme-mint { --theme-bg-a:#ecf7f3; --theme-bg-b:#d9eee7; --theme-path:#58d9a1; --theme-accent:#47b99a; }
.theme-lavender { --theme-bg-a:#f2f0fb; --theme-bg-b:#e2ddf3; --theme-path:#74d7ba; --theme-accent:#8d77db; --portal:#8d77db; }
.theme-peach { --theme-bg-a:#fbf1eb; --theme-bg-b:#f0ddd4; --theme-path:#77d9ad; --theme-accent:#e69872; }
.theme-sunset { --theme-bg-a:#f9eee8; --theme-bg-b:#ead7d5; --theme-path:#79d7a5; --theme-accent:#e28183; }
.theme-night { --theme-bg-a:#273947; --theme-bg-b:#182b39; --theme-path:#73efc5; --theme-accent:#b09aff; --text:#edf8fb; --muted:#b7cbd4; --panel:#29404f; --panel-strong:#314b5b; --line:rgba(235,248,251,.13); --shadow-dark:rgba(5,15,23,.42); --shadow-light:rgba(96,127,143,.14); --portal:#b09aff; }

.btn, .icon-btn, .control-btn, .hud-pause, .toggle-btn, .small-pill, .seg, .chapter-card, .level-card {
  user-select: none; -webkit-user-select: none; touch-action: manipulation; color: var(--text);
}
.btn {
  min-height: 46px; padding: 12px 18px; border-radius: 18px; font-weight: 800; letter-spacing: .01em;
  background: linear-gradient(145deg, var(--panel-strong), var(--panel));
  box-shadow: 7px 7px 16px var(--shadow-dark), -7px -7px 16px var(--shadow-light);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.btn:active { transform: translateY(1px) scale(.985); box-shadow: inset 3px 3px 8px var(--shadow-dark), inset -3px -3px 8px var(--shadow-light); }
.btn-primary { color: #18362d; background: linear-gradient(145deg, color-mix(in srgb, var(--theme-path) 78%, white), color-mix(in srgb, var(--theme-path) 88%, #7dc8a8)); box-shadow: 7px 7px 16px var(--shadow-dark), -6px -6px 14px var(--shadow-light), inset 0 1px 0 rgba(255,255,255,.5); }
.theme-night .btn-primary { color:#102f29; }
.btn-secondary { background: linear-gradient(145deg, var(--panel-strong), var(--panel)); }
.btn-xl { min-height: 58px; border-radius: 22px; font-size: clamp(17px, 4.5vw, 21px); }
.btn-small { min-height: 38px; padding: 8px 12px; border-radius: 14px; font-size: 14px; }
.btn-ad { background: linear-gradient(145deg, #fff6db, #efe1b8); color:#5b4720; }
.btn-locked { opacity: .58; }
.wide { width: 100%; }
.text-btn { background: transparent; color: var(--muted); font-weight: 800; padding: 10px 14px; border-radius: 14px; }
.text-btn:active { background: rgba(80,105,120,.08); }
.text-btn.danger { color: var(--danger); }
.icon-btn { width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; background: var(--panel); box-shadow: 5px 5px 12px var(--shadow-dark), -5px -5px 12px var(--shadow-light); font-weight: 900; font-size: 20px; }
.settings-icon::before { content:""; width:18px; height:18px; border:3px solid currentColor; border-radius:50%; box-shadow:inset 0 0 0 4px transparent; opacity:.82; }
.settings-icon::after { content:""; position:absolute; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.82; }
.settings-icon { position:relative; }
.spark-amount { display: inline-flex; align-items:center; justify-content:center; gap:7px; height: 42px; min-width: 76px; padding:0 13px; border-radius:15px; background:rgba(255,255,255,.34); box-shadow: inset 2px 2px 5px rgba(88,113,127,.13), inset -2px -2px 6px rgba(255,255,255,.72); font-weight:900; }
.spark-symbol { color: var(--gold); text-shadow:0 1px 4px rgba(214,161,47,.25); }

.screen-header, .game-header { display:grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:52px; }
.screen-header h1 { margin:0; text-align:center; font-size:clamp(19px,5vw,26px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-spacer { width:44px; }
.panel { background: rgba(245,249,252,.64); border:1px solid rgba(255,255,255,.55); box-shadow: 10px 10px 28px var(--shadow-dark), -10px -10px 28px var(--shadow-light); border-radius:28px; }
.theme-night .panel { background:rgba(41,64,79,.72); border-color:rgba(255,255,255,.08); }
.scroll-region { overflow-y:auto; overflow-x:hidden; overflow-anchor:none; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; scrollbar-width:thin; scrollbar-color:rgba(90,120,136,.25) transparent; }
.scroll-region::-webkit-scrollbar { width:5px; }.scroll-region::-webkit-scrollbar-thumb { background:rgba(90,120,136,.25); border-radius:999px; }

/* Home */
.screen-home { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto auto; gap:12px; justify-items:center; }
.home-top { width:100%; justify-self:stretch; display:flex; justify-content:space-between; align-items:center; }
.home-hero { width:min(100%,760px); justify-self:center; align-self:center; display:grid; justify-items:center; gap:8px; text-align:center; padding:0 10px; }
.home-logo { width:min(78vw, 430px); max-height:22vh; object-fit:contain; }
.home-title{margin:0;font-size:clamp(24px,7vw,40px);letter-spacing:.02em}.home-subtitle { margin:0; max-width:540px; color:var(--muted); font-weight:650; font-size:clamp(13px,3.8vw,17px); line-height:1.35; }
.home-actions { width:min(100%, 520px); justify-self:center; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.home-actions .btn-primary { grid-column:1/-1; }
.home-footer { display:flex; justify-content:center; }

/* Chapters / levels */
.screen-chapters, .screen-levels, .screen-characters, .screen-settings { display:grid; grid-template-rows:auto minmax(0,1fr); gap:14px; }
.chapter-list { width:min(100%,760px); justify-self:center; padding:8px 9px 20px; display:grid; gap:14px; }
.chapter-card { width:100%; min-height:92px; display:grid; grid-template-columns:54px minmax(0,1fr) 64px; align-items:center; gap:10px; padding:14px 16px; border-radius:25px; text-align:left; color:var(--text); background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(230,240,246,.68)); box-shadow:8px 8px 18px var(--shadow-dark),-8px -8px 18px var(--shadow-light); }
.chapter-card.theme-night { background:linear-gradient(145deg,#324b5c,#233a49); }
.chapter-number { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; font-weight:950; background:rgba(255,255,255,.45); box-shadow:inset 2px 2px 4px rgba(80,100,115,.11),inset -2px -2px 4px rgba(255,255,255,.65); }
.chapter-info { min-width:0; display:grid; gap:5px; }.chapter-info strong{font-size:17px; letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}.chapter-info small{color:var(--muted);font-weight:700;}
.chapter-glyph { justify-self:end; font-size:36px; color:var(--theme-accent); font-weight:800; }
.chapter-locked { opacity:.45; filter:saturate(.5); }
.level-grid { width:min(100%,720px); justify-self:center; padding:10px 9px 26px; display:grid; grid-template-columns:repeat(4,1fr); gap:13px; align-content:start; }
.level-card { aspect-ratio:1; min-height:58px; border-radius:20px; position:relative; display:grid; place-items:center; background:linear-gradient(145deg,var(--panel-strong),var(--panel)); box-shadow:6px 6px 14px var(--shadow-dark),-6px -6px 14px var(--shadow-light); }
.level-index { font-size:20px; font-weight:950; }.level-locked{opacity:.38;box-shadow:inset 3px 3px 8px var(--shadow-dark),inset -3px -3px 8px var(--shadow-light)}.level-done{outline:2px solid color-mix(in srgb,var(--theme-path) 55%,transparent)}.level-perfect{outline:2px solid color-mix(in srgb,var(--gold) 75%,transparent)}
.perfect-dot,.done-dot,.lock-mark{position:absolute;right:7px;top:5px;font-size:14px;font-weight:950}.perfect-dot{color:var(--gold)}.done-dot{color:var(--theme-path)}.lock-mark{color:var(--muted)}

/* Characters */
.character-grid { width:min(100%,760px); justify-self:center; padding:8px 10px 24px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; align-content:start; }
.character-card { min-height:190px; padding:14px; display:grid; grid-template-rows:minmax(96px,1fr) auto auto; gap:8px; justify-items:center; border-radius:24px; background:linear-gradient(145deg,var(--panel-strong),var(--panel)); box-shadow:7px 7px 16px var(--shadow-dark),-7px -7px 16px var(--shadow-light); }
.character-card img { height:100px; width:100px; object-fit:contain; user-select:none; -webkit-user-select:none; pointer-events:none; }.character-card.selected{outline:3px solid color-mix(in srgb,var(--theme-path) 70%,transparent)}

/* Daily / endless / settings */
.screen-daily, .screen-endless { display:grid; grid-template-rows:auto minmax(0,1fr); gap:16px; }
.daily-card { width:min(100%,520px); max-height:560px; align-self:center; justify-self:center; padding:24px; text-align:center; display:grid; gap:18px; justify-items:center; }
.daily-date{font-weight:900;color:var(--muted);letter-spacing:.08em}.daily-orb,.result-orb{width:94px;height:94px;border-radius:50%;display:grid;place-items:center;font-size:38px;font-weight:950;background:linear-gradient(145deg,var(--panel-strong),var(--panel));box-shadow:8px 8px 18px var(--shadow-dark),-8px -8px 18px var(--shadow-light);color:var(--theme-accent)}
.daily-card h2{margin:0;font-size:18px}.daily-stats{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px}.daily-stats div{padding:12px;border-radius:18px;background:rgba(255,255,255,.28);display:grid;gap:3px}.daily-stats strong{font-size:24px}.daily-stats span{font-size:14px;color:var(--muted);font-weight:700}
.endless-grid { width:min(100%,760px); justify-self:center; align-self:center; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.endless-card { min-height:220px; padding:22px 16px; border-radius:26px; display:grid; align-content:center; justify-items:center; gap:18px; text-align:center; background:linear-gradient(145deg,var(--panel-strong),var(--panel)); box-shadow:8px 8px 20px var(--shadow-dark),-8px -8px 20px var(--shadow-light); }.endless-card strong{font-size:22px}.endless-card span{color:var(--muted);font-weight:700}.empty-state{width:min(100%,520px);justify-self:center;align-self:center;text-align:center;padding:28px;display:grid;gap:18px;justify-items:center}.large-lock{font-size:48px;color:var(--muted)}
.settings-list { width:min(100%,600px); justify-self:center; align-self:start; margin-top:16px; padding:16px; display:grid; gap:10px; }
.setting-row { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 10px; border-bottom:1px solid var(--line); font-weight:800; }.setting-row:last-of-type{border-bottom:0}.toggle-btn{min-width:76px;padding:9px 12px;border-radius:14px;background:rgba(105,130,145,.12);font-weight:900}.toggle-btn.active{background:color-mix(in srgb,var(--theme-path) 40%,transparent)}.segmented{display:flex;gap:6px}.seg{padding:8px 10px;border-radius:12px;background:rgba(105,130,145,.1);font-weight:800}.seg.active{background:color-mix(in srgb,var(--theme-path) 45%,transparent)}

/* Gameplay */
.screen-game { --path:var(--theme-path); display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:9px; align-items:stretch; justify-content:stretch; }
.game-header { grid-template-columns:44px minmax(0,1fr) auto auto; min-height:48px; }
.game-level-label { text-align:center; font-size:14px; letter-spacing:.055em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-count { min-width:72px; text-align:center; font-weight:950; font-variant-numeric:tabular-nums; }
.hud-pause { min-height:38px; padding:7px 11px; border-radius:13px; background:rgba(255,255,255,.34); box-shadow:3px 3px 8px var(--shadow-dark),-3px -3px 8px var(--shadow-light); font-size:14px; font-weight:900; text-transform:uppercase; }
.mechanic-tip { justify-self:center; max-width:640px; padding:7px 13px; border-radius:14px; background:rgba(255,255,255,.38); color:var(--muted); font-size:14px; font-weight:750; text-align:center; line-height:1.3; }
.board-host { min-height:0; display:grid; place-items:center; overflow:hidden; padding:2px; }
.board-shell {
  position:relative; width:min(94%, 62vh, 620px); max-height:100%; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.board-grid { position:absolute; inset:0; display:grid; grid-template-columns:repeat(var(--cols),1fr); grid-template-rows:repeat(var(--rows),1fr); gap:clamp(5px,1.2vmin,9px); }
.board-slot { min-width:0; min-height:0; display:grid; place-items:stretch; }
.void-slot { visibility:hidden; }
.tile { position:relative; min-width:0; min-height:0; border-radius:clamp(12px,2.7vmin,20px); background:linear-gradient(145deg,rgba(249,252,254,.88),rgba(220,233,241,.8)); box-shadow:5px 5px 11px var(--shadow-dark),-5px -5px 11px var(--shadow-light),inset 0 1px 0 rgba(255,255,255,.55); overflow:hidden; display:grid; place-items:center; transition:box-shadow .16s ease,transform .13s ease,background .18s ease; }
.theme-night .tile { background:linear-gradient(145deg,rgba(51,77,92,.96),rgba(35,57,71,.96)); }
.tile::after { content:""; position:absolute; inset:12%; border-radius:inherit; background:radial-gradient(circle, color-mix(in srgb,var(--path) 36%,transparent), transparent 68%); opacity:0; transform:scale(.75); transition:opacity .18s ease,transform .18s ease; }
.tile.visited { box-shadow:inset 4px 4px 9px color-mix(in srgb,var(--path) 24%,var(--shadow-dark)),inset -4px -4px 9px rgba(255,255,255,.62),0 0 16px var(--path-soft); }
.tile.visited::after { opacity:.85; transform:scale(1); }
.tile.current { outline:2px solid color-mix(in srgb,var(--path) 65%,white); outline-offset:-4px; }
.special-glyph { position:relative; z-index:2; font-weight:950; font-size:clamp(18px,5.5vmin,31px); text-shadow:0 1px 4px rgba(40,60,72,.12); }
.arrow-glyph{color:#547f9a}.portal-glyph{color:var(--portal);font-size:clamp(20px,6vmin,34px)}.checkpoint-glyph{width:56%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;color:#b56f53;border:2px solid currentColor;font-size:clamp(13px,4.6vmin,24px)}
.switch-glyph{position:relative;width:54%;height:36%;z-index:2}.switch-glyph i{position:absolute;left:8%;right:8%;top:50%;height:3px;border-radius:4px;background:#5b8e80;transform:rotate(-18deg)}.switch-glyph b{position:absolute;width:25%;aspect-ratio:1;border-radius:50%;background:#5b8e80;right:4%;top:-6%}
.gate-glyph{width:58%;height:55%;display:flex;gap:10%;align-items:stretch;justify-content:center;z-index:2}.gate-glyph i{width:16%;border-radius:999px;background:#7b8790;box-shadow:inset 1px 1px 2px rgba(255,255,255,.35)}.gate-tile.gate-locked::before{content:"";position:absolute;inset:13%;border:2px dashed rgba(94,108,117,.55);border-radius:14px;z-index:1}.gate-tile:not(.gate-locked) .gate-glyph{opacity:.25;transform:scale(.88)}
.goal-tile { background:linear-gradient(145deg,color-mix(in srgb,var(--portal) 16%,var(--panel-strong)),color-mix(in srgb,var(--portal) 10%,var(--panel))); }
.vortex{position:relative;width:62%;aspect-ratio:1;border-radius:50%;display:block;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--portal) 35%,transparent));}.vortex i{position:absolute;inset:0;border-radius:50%;border:3px solid color-mix(in srgb,var(--portal) 78%,white);border-right-color:transparent;animation:vortex 3.2s linear infinite}.vortex i:nth-child(2){inset:18%;animation-direction:reverse;animation-duration:2.4s}.vortex i:nth-child(3){inset:36%;background:color-mix(in srgb,var(--portal) 72%,white);border:0;animation:pulse 1.8s ease-in-out infinite}.goal-charged{box-shadow:0 0 22px color-mix(in srgb,var(--portal) 42%,transparent),5px 5px 11px var(--shadow-dark),-5px -5px 11px var(--shadow-light)}.goal-charged .vortex{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--portal) 65%,transparent))}
@keyframes vortex{to{transform:rotate(360deg)}}@keyframes pulse{50%{transform:scale(1.18);opacity:.72}}
.path-layer { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:4; }
.flow-path { fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.flow-path-base { stroke:var(--path); stroke-width:clamp(8px,2.5vmin,16px); opacity:.48; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--path) 58%,transparent)); }
.flow-path-shimmer { stroke:color-mix(in srgb,var(--path) 38%,white); stroke-width:clamp(3px,1vmin,6px); stroke-dasharray:9 14; animation:pathFlow 1.1s linear infinite; opacity:.88; }
@keyframes pathFlow{to{stroke-dashoffset:-23}}
.flowling { position:absolute; left:0; top:0; width:var(--char-size,48px); height:var(--char-size,48px); z-index:8; pointer-events:none; user-select:none; -webkit-user-select:none; transform:translate(calc(var(--char-x,0px) - 50%),calc(var(--char-y,0px) - 50%)); transform-origin:center bottom; transition:left .12s ease,top .12s ease,filter .15s ease; filter:drop-shadow(0 6px 6px rgba(47,70,82,.23)); }
.flowling-hop{animation:flowHop .175s ease-out}.teleporting{animation:teleportPop .24s ease}.victory-enter{animation:victoryEnter .55s ease-in forwards}
@keyframes flowHop{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes teleportPop{0%{transform:scale(.88);opacity:.35}58%{transform:scale(1.07);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes victoryEnter{0%{scale:1;opacity:1}65%{scale:.72;opacity:.9}100%{scale:.25;opacity:0;filter:blur(2px)}}
.tile-react{animation:tileReact .24s ease}.tile-invalid{animation:tileInvalid .22s ease}.board-invalid{animation:boardShake .22s ease}.hint-glow{animation:hintGlow 1.3s ease-in-out infinite!important;outline:3px solid var(--gold)!important;z-index:7}
@keyframes tileReact{50%{transform:scale(.94)}}@keyframes tileInvalid{25%,75%{transform:translateX(-2px)}50%{transform:translateX(3px)}}@keyframes boardShake{25%{transform:translateX(-3px)}70%{transform:translateX(2px)}}@keyframes hintGlow{0%,100%{box-shadow:5px 5px 11px var(--shadow-dark),-5px -5px 11px var(--shadow-light)}45%{box-shadow:0 0 24px rgba(226,179,72,.72),inset 0 0 16px rgba(255,239,183,.72)}}
.particle-burst{position:absolute;width:1px;height:1px;z-index:10;pointer-events:none}.particle-burst i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--path);animation:burst .78s ease-out forwards;--a:calc(var(--i) * 25.7deg);transform:rotate(var(--a)) translateX(0)}.particle-burst i:nth-child(3n){background:var(--portal)}.particle-burst i:nth-child(4n){background:var(--gold)}@keyframes burst{70%{opacity:1;transform:rotate(var(--a)) translateX(58px) scale(.8)}100%{opacity:0;transform:rotate(var(--a)) translateX(72px) scale(.2)}}
.game-controls { width:min(100%,600px); justify-self:center; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:1px 0 3px; }
.control-btn { min-height:48px; padding:9px 8px; border-radius:17px; background:linear-gradient(145deg,var(--panel-strong),var(--panel)); box-shadow:5px 5px 12px var(--shadow-dark),-5px -5px 12px var(--shadow-light); font-size:14px; font-weight:900; text-transform:uppercase; letter-spacing:.03em; }.control-btn:disabled,.control-btn[aria-disabled="true"]{opacity:.36}.hint-btn{box-shadow:5px 5px 12px var(--shadow-dark),-5px -5px 12px var(--shadow-light),inset 0 0 0 1px rgba(226,179,72,.25)}

/* Result */
.screen-result { display:grid; place-items:center; }
.result-card { width:min(100%,520px); padding:clamp(20px,5vw,34px); display:grid; gap:18px; justify-items:center; text-align:center; }
.result-card h1{margin:0;font-size:clamp(25px,7vw,38px)}.result-orb.perfect{color:var(--gold);box-shadow:0 0 28px rgba(229,181,73,.26),8px 8px 18px var(--shadow-dark),-8px -8px 18px var(--shadow-light)}
.reward-breakdown{width:100%;display:grid;gap:8px}.reward-row{display:flex;justify-content:space-between;gap:16px;padding:10px 13px;border-radius:15px;background:rgba(255,255,255,.26);font-size:14px}.result-actions{width:100%;display:grid;gap:10px}

/* Modal / toast */
.modal-backdrop { position:absolute; inset:0; z-index:40; display:grid; place-items:center; padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left)); background:rgba(35,51,61,.28); backdrop-filter:blur(5px); }
.modal-shell { width:min(100%,520px); max-height:100%; overflow:hidden; padding:22px; border-radius:28px; background:linear-gradient(145deg,#f1f7fa,#dfeaf0); color:#263845; box-shadow:14px 14px 36px rgba(48,70,83,.3),-9px -9px 30px rgba(255,255,255,.72); }
.pause-content{display:grid;gap:11px}.pause-content h2{margin:0 0 4px;text-align:center;font-size:28px}.pause-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.small-pill{min-height:38px;border-radius:13px;background:rgba(89,114,128,.11);font-size:14px;font-weight:800}
.howto-modal .modal-shell{overflow:auto;overscroll-behavior:contain;touch-action:pan-y}.howto-content{display:grid;gap:12px}.howto-content h2{margin:0;text-align:center}.how-intro,.calm-note{margin:0;color:#536b79;line-height:1.45}.how-section{padding:10px 12px;border-radius:17px;background:rgba(255,255,255,.34)}.how-section h3{margin:0 0 6px;font-size:15px}.how-section p{margin:5px 0;line-height:1.4;font-size:14px;color:#4b6574}
#toast-layer { position:absolute; inset:0; z-index:80; pointer-events:none; display:flex; align-items:flex-start; justify-content:center; padding:calc(72px + var(--safe-top)) 18px 18px; }
.toast { max-width:min(92vw,520px); padding:11px 15px; border-radius:16px; background:rgba(34,52,63,.92); color:white; font-size:14px; font-weight:750; text-align:center; box-shadow:0 8px 25px rgba(20,35,44,.25); opacity:0; transform:translateY(-8px); transition:.18s ease; align-self:flex-start; }.toast.show{opacity:1;transform:translateY(0)}


/* Stable gameplay placement even when the optional mechanic tip is hidden. */
.screen-game { grid-template-areas:"header" "tip" "board" "controls"; }
.screen-game .game-header { grid-area:header; }
.screen-game .mechanic-tip { grid-area:tip; }
.screen-game .board-host { grid-area:board; }
.screen-game .game-controls { grid-area:controls; }

@media (min-width: 620px) {
  .level-grid { grid-template-columns:repeat(5,1fr); }
  .character-grid { grid-template-columns:repeat(4,1fr); }
  .character-card{min-height:210px}
}

@media (max-height: 590px) and (orientation: portrait) {
  .screen { padding-top:calc(7px + var(--safe-top)); padding-bottom:calc(7px + var(--safe-bottom)); }
  .home-logo{max-height:16vh}.home-subtitle{font-size:14px}.home-actions{gap:8px}.btn-xl{min-height:50px}.btn{min-height:42px;padding:9px 14px}.home-footer{display:none}
  .screen-game{gap:5px}.game-header{min-height:42px}.mechanic-tip{font-size:14px;padding:5px 9px}.control-btn{min-height:42px}.board-shell{width:min(91%,60vh)}
}

@media (orientation: landscape) and (max-height: 520px) {
  .screen { padding:calc(7px + var(--safe-top)) calc(9px + var(--safe-right)) calc(7px + var(--safe-bottom)) calc(9px + var(--safe-left)); }
  .screen-game { grid-template-columns:minmax(0,1fr) minmax(210px,.68fr); grid-template-rows:auto auto minmax(0,1fr); grid-template-areas:"board header" "board tip" "board controls"; column-gap:12px; row-gap:6px; }
  .screen-game .board-host{grid-area:board}.screen-game .game-header{grid-area:header}.screen-game .mechanic-tip{grid-area:tip;align-self:start}.screen-game .game-controls{grid-area:controls;align-self:end;grid-template-columns:1fr;gap:7px;width:100%;padding-bottom:4px}
  .board-shell { width:min(96%, calc(100vh - var(--safe-top) - var(--safe-bottom) - 16px)); max-height:calc(100vh - var(--safe-top) - var(--safe-bottom) - 16px); }
  .game-header{grid-template-columns:44px minmax(0,1fr) auto;gap:7px}.game-header .hud-pause{display:none}.game-level-label{font-size:14px}.game-count{min-width:62px;font-size:14px}.icon-btn{width:44px;height:44px;border-radius:14px}.mechanic-tip{font-size:14px;padding:6px 8px}.game-controls .control-btn{min-height:52px;height:52px;border-radius:16px;padding:9px 10px;font-size:14px}
  .home-logo{max-height:20vh}.screen-home{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto}.home-top{grid-column:1/-1}.home-hero{grid-column:1;grid-row:2/4}.home-actions{grid-column:2;grid-row:2;align-self:center;grid-template-columns:1fr;max-width:360px}.home-actions .btn-primary{grid-column:auto}.home-footer{grid-column:2;grid-row:3}
  .daily-card{grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;max-width:680px;text-align:left}.daily-orb{grid-row:1/4;width:82px;height:82px}.daily-stats{max-width:330px}.daily-card .btn{grid-column:2}.endless-card{min-height:160px}.settings-list{margin-top:4px}.setting-row{min-height:48px}
}

@media (orientation: landscape) and (max-height: 390px) {
  .screen-game { grid-template-columns:minmax(0,1fr) minmax(200px,.64fr); }
  .board-shell { width:min(96%, calc(100vh - 12px)); max-height:calc(100vh - 12px); }
  .mechanic-tip{display:none}.screen-game{grid-template-rows:auto minmax(0,1fr);grid-template-areas:"board header" "board controls"}.game-controls .control-btn{min-height:48px;height:48px;padding:8px 10px;font-size:14px}.game-controls{gap:7px}
  .modal-shell{padding:14px;border-radius:20px}.pause-content{gap:7px}.pause-content h2{font-size:21px}.pause-content .btn{min-height:36px;padding:7px 10px}.pause-toggles{gap:5px}.small-pill{min-height:32px}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* DEV-GR-01R1 hint recovery */
.hint-rollback { animation: hintRollback 1.55s ease !important; outline: 3px solid #d66e75 !important; z-index: 7; }
.hint-undo-pulse { animation: hintUndoPulse 1.55s ease !important; outline: 3px solid #e9b84f; }
@keyframes hintRollback { 0%,100% { opacity:1 } 35%,70% { opacity:.48; box-shadow:0 0 22px rgba(214,110,117,.58) } }
@keyframes hintUndoPulse { 0%,100% { transform:scale(1) } 45% { transform:scale(1.06); box-shadow:0 0 24px rgba(233,184,79,.55) } }
/* Modern grid override for legacy inline/flex fallback sizing. */
@supports (display: grid) {
  .board-slot { width:auto !important; height:auto !important; }
  .tile { left:auto; top:auto; right:auto; bottom:auto; justify-content:normal; }
  /* Restore the original V1 level-select geometry when CSS Grid is available.
     legacy.css keeps fixed fallback sizes only for pre-Grid browsers. */
  .level-card { width:auto; height:auto; margin:0; aspect-ratio:1; }
  .vortex { height:auto; min-width:0; min-height:0; }
}

/* DEV-POLISH-01 — product polish, motion, trails, typography */
:root {
  --font-caption: 14px;
  --font-body: 16px;
  --font-button: 16px;
  --font-hud: 17px;
  --font-title: 26px;
  --font-result: 34px;
  --trail-highlight: #d9fff0;
  --trail-glow: rgba(98,223,159,.46);
  --trail-dash: 9 14;
  --trail-speed: 1.1s;
  --trail-base-opacity: .52;
  --trail-shimmer-opacity: .9;
}
.screen { font-size: var(--font-body); }
button, .btn, .text-btn, .toggle-btn, .seg, .small-pill, .control-btn, .hud-pause { font-size: var(--font-button); }
small, .chapter-info small, .trail-source, .daily-next-reward, .leaderboard-loading, .leaderboard-empty { font-size: var(--font-caption); }
.screen-header h1 { font-size: clamp(22px,4.2vw,30px); }
.home-title { font-size: clamp(28px,6vw,44px); }
.home-subtitle { font-size: clamp(16px,2.3vw,19px); }
.btn-small { min-height:42px; padding:9px 13px; font-size:14px; }
.perfect-dot,.done-dot,.lock-mark { font-size:14px; }
.daily-card h2 { font-size:20px; }
.daily-stats span { font-size:14px; }
.game-level-label { font-size:var(--font-hud); }
.game-count { font-size:var(--font-hud); }
.hud-pause { font-size:14px; }
.mechanic-tip { font-size:14px; line-height:1.35; }
.control-btn { font-size:15px; min-height:50px; }
.small-pill { font-size:14px; min-height:42px; }
.howto-content { font-size:16px; }
.how-section h3 { font-size:17px; }
.how-section p { font-size:15px; }
.toast { font-size:14px; }
.reward-row { font-size:16px; }
.result-card h1 { font-size:clamp(30px,7vw,42px); }

/* Home hierarchy with ranking + daily rewarded gift. */
.screen-home { grid-template-rows:auto minmax(0,1fr) auto auto auto; gap:10px; }
.home-hero { gap:6px; }
.home-logo { width:min(66vw,390px); max-height:20vh; }
.home-actions { width:min(100%,560px); gap:10px; }
.home-gift { width:min(100%,560px); min-height:58px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:9px 10px 9px 16px; border-radius:20px; background:linear-gradient(145deg,rgba(255,247,220,.86),rgba(238,226,190,.76)); box-shadow:5px 5px 13px var(--shadow-dark),-5px -5px 13px var(--shadow-light); color:#5b4720; }
.home-gift.claimed { opacity:.68; }
.home-gift-copy { min-width:0; display:grid; gap:2px; text-align:left; }
.home-gift-copy strong { font-size:15px; letter-spacing:.03em; }
.home-gift-copy span { font-size:16px; font-weight:900; }
.home-gift-btn { min-height:42px; padding:8px 12px; font-size:14px; box-shadow:none; }

/* Characters + Flow Trails. */
.screen-characters { grid-template-rows:auto auto minmax(0,1fr); }
.cosmetic-tabs, .leaderboard-tabs { width:min(100%,620px); justify-self:center; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:2px; }
.cosmetic-tabs .seg, .leaderboard-tabs .seg { min-height:44px; font-size:15px; }
.trail-grid { width:min(100%,760px); justify-self:center; padding:8px 10px 24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-content:start; }
.trail-card { min-height:190px; padding:14px; display:grid; grid-template-rows:auto auto auto auto; gap:8px; justify-items:stretch; align-content:start; border-radius:24px; background:linear-gradient(145deg,var(--panel-strong),var(--panel)); box-shadow:7px 7px 16px var(--shadow-dark),-7px -7px 16px var(--shadow-light); }
.trail-card.selected { outline:3px solid color-mix(in srgb,var(--theme-path) 70%,transparent); }
.trail-card.locked { opacity:.82; }
.trail-name { font-size:17px; text-align:center; }
.trail-source { color:var(--muted); font-weight:750; text-align:center; min-height:36px; }
.trail-preview { width:100%; height:64px; padding:6px 4px; border-radius:18px; background:rgba(255,255,255,.26); overflow:hidden; }
.trail-preview svg { width:100%; height:100%; overflow:visible; }
.trail-preview-base,.trail-preview-shimmer { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.trail-preview-base { stroke:var(--path); stroke-width:12; opacity:.55; filter:drop-shadow(0 0 5px var(--trail-glow)); }
.trail-preview-shimmer { stroke:var(--trail-highlight); stroke-width:4; stroke-dasharray:var(--trail-dash); animation:pathFlow var(--trail-speed) linear infinite; opacity:.92; }
.trail-preview-dot { fill:var(--path); filter:drop-shadow(0 0 4px var(--trail-glow)); }

/* Actual route inherits selected Trail style. */
.flow-path-base { stroke:var(--path); opacity:var(--trail-base-opacity); filter:drop-shadow(0 0 6px var(--trail-glow)); }
.flow-path-shimmer { stroke:var(--trail-highlight); stroke-dasharray:var(--trail-dash); animation-duration:var(--trail-speed); opacity:var(--trail-shimmer-opacity); }
.board-shell[data-trail="comet-dust"] .flow-path-shimmer { stroke-width:4px; }
.board-shell[data-trail="neon-wave"] .flow-path-base { stroke-width:clamp(10px,2.8vmin,18px); }
.board-shell[data-trail="starlight"] .flow-path-shimmer { filter:drop-shadow(0 0 5px rgba(255,255,255,.74)); }

/* Directional Squishy: anchor owns position, sprite owns decorative motion. */
.flowling-anchor { position:absolute; left:var(--char-x,0px); top:var(--char-y,0px); width:var(--char-size,48px); height:var(--char-size,48px); z-index:8; pointer-events:none; transform:translate(-50%,-50%); transition:left .115s ease-out,top .115s ease-out; will-change:left,top; }
.flowling { position:relative; left:auto; top:auto; width:100%; height:100%; z-index:auto; pointer-events:none; user-select:none; -webkit-user-select:none; transform:none; transform-origin:center bottom; transition:filter .15s ease; filter:drop-shadow(0 6px 6px rgba(47,70,82,.23)); will-change:transform; }
.flow-nudge-right { animation:flowNudgeRight 175ms cubic-bezier(.2,.72,.35,1); }
.flow-nudge-left { animation:flowNudgeLeft 175ms cubic-bezier(.2,.72,.35,1); }
.flow-nudge-up { animation:flowNudgeUp 175ms cubic-bezier(.2,.72,.35,1); }
.flow-nudge-down { animation:flowNudgeDown 175ms cubic-bezier(.2,.72,.35,1); }
.teleporting { animation:teleportPop 240ms ease; }
.victory-enter { animation:victoryEnter .55s ease-in forwards; }
@keyframes flowNudgeRight { 0%,100%{transform:translate3d(0,0,0) scale(1)} 46%{transform:translate3d(4px,0,0) scale(1.025,.985)} }
@keyframes flowNudgeLeft { 0%,100%{transform:translate3d(0,0,0) scale(1)} 46%{transform:translate3d(-4px,0,0) scale(1.025,.985)} }
@keyframes flowNudgeUp { 0%,100%{transform:translate3d(0,0,0) scale(1)} 46%{transform:translate3d(0,-4px,0) scale(.99,1.025)} }
@keyframes flowNudgeDown { 0%,100%{transform:translate3d(0,0,0) scale(1)} 46%{transform:translate3d(0,4px,0) scale(1.02,.99)} }
@keyframes teleportPop { 0%{transform:scale(.88);opacity:.35} 58%{transform:scale(1.07);opacity:1} 100%{transform:scale(1);opacity:1} }

/* Daily milestones. */
.daily-cycle { width:100%; display:grid; gap:9px; padding:12px; border-radius:18px; background:rgba(255,255,255,.25); }
.daily-cycle-title { font-size:16px; }
.daily-cycle-dots { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.daily-cycle-dot { width:30px; height:30px; justify-self:center; display:grid; place-items:center; border-radius:50%; font-size:14px; font-weight:900; color:var(--muted); background:rgba(112,134,147,.12); box-shadow:inset 2px 2px 5px rgba(80,100,112,.11),inset -2px -2px 5px rgba(255,255,255,.55); }
.daily-cycle-dot.done { color:#204d3f; background:color-mix(in srgb,var(--theme-path) 48%,white); }
.daily-cycle-dot.next { outline:2px solid var(--gold); }
.daily-next-reward { color:var(--muted); font-weight:800; }

/* Result rewards and chapter unlock. */
.result-card { max-height:100%; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }
.chapter-reward { width:100%; display:grid; gap:8px; justify-items:center; padding:13px; border-radius:20px; background:linear-gradient(145deg,rgba(255,250,227,.82),rgba(238,230,204,.62)); box-shadow:inset 0 0 0 1px rgba(233,184,79,.25),0 0 22px rgba(233,184,79,.14); animation:chapterUnlock 420ms ease-out; }
.chapter-complete-label { color:#7a5c22; font-size:18px; letter-spacing:.06em; }
.new-trail-label { color:var(--muted); font-size:14px; font-weight:850; text-transform:uppercase; letter-spacing:.04em; }
.chapter-reward h2 { margin:0; font-size:21px; }
.chapter-trail-preview { max-width:330px; }
.reward-double-btn { width:100%; min-height:60px; display:grid; gap:2px; place-content:center; }
.reward-double-btn strong { font-size:18px; }
.reward-double-btn span { font-size:14px; font-weight:800; opacity:.82; }
@keyframes chapterUnlock { from{transform:scale(.96);opacity:.35} to{transform:scale(1);opacity:1} }

/* Leaderboard. */
.screen-leaderboard { display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:12px; }
.leaderboard-card { width:min(100%,680px); min-height:0; justify-self:center; padding:16px; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:12px; }
.leaderboard-local,.leaderboard-own { display:grid; grid-template-columns:1fr auto 1fr auto; gap:10px; align-items:center; padding:11px 13px; border-radius:16px; background:rgba(255,255,255,.28); }
.leaderboard-local { grid-template-columns:1fr auto; }
.leaderboard-local strong,.leaderboard-own strong { font-size:20px; }
.leaderboard-list { min-height:0; overflow-y:auto; overscroll-behavior:contain; display:grid; align-content:start; gap:7px; }
.leaderboard-row { min-height:42px; display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:9px; align-items:center; padding:7px 10px; border-radius:14px; background:rgba(255,255,255,.2); }
.leaderboard-rank { color:var(--muted); }
.leaderboard-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.leaderboard-score { font-variant-numeric:tabular-nums; }
.leaderboard-auth { display:grid; gap:8px; }
.leaderboard-auth p { margin:0; color:var(--muted); line-height:1.4; text-align:center; font-size:14px; }
.leaderboard-loading,.leaderboard-empty { padding:24px;text-align:center;color:var(--muted); }

@media (min-width:620px) {
  .trail-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1100px) {
  :root { --font-body:18px; --font-button:17px; --font-hud:18px; --font-caption:15px; }
  .screen-header h1 { font-size:30px; }
  .home-subtitle { font-size:18px; }
  .control-btn { font-size:17px; }
  .level-index { font-size:22px; }
}

@media (max-height:590px) and (orientation:portrait) {
  .home-logo { max-height:14vh; }
  .home-subtitle { font-size:14px; line-height:1.25; }
  .home-actions { gap:7px; }
  .home-gift { min-height:50px; padding:6px 8px 6px 12px; }
  .btn { min-height:42px; padding:8px 12px; }
  .btn-xl { min-height:48px; }
  .mechanic-tip { font-size:14px; padding:5px 8px; }
  .control-btn { font-size:14px; min-height:44px; }
}

@media (orientation:landscape) and (max-height:520px) {
  .game-level-label { font-size:15px; }
  .game-count { font-size:16px; }
  .mechanic-tip { font-size:14px; }
  .game-controls .control-btn { font-size:15px; min-height:50px; height:50px; }
  .screen-home { grid-template-rows:auto minmax(0,1fr) auto; }
  .home-actions { gap:7px; }
  .home-gift { grid-column:2; grid-row:3; max-width:360px; min-height:46px; }
  .home-footer { display:none; }
  .daily-card { max-height:calc(100vh - 66px); overflow-y:auto; }
}
@media (orientation:landscape) and (max-height:390px) {
  .game-controls .control-btn { font-size:14px; min-height:46px; height:46px; }
  .small-pill { font-size:14px; min-height:36px; }
  .pause-content h2 { font-size:22px; }
}

/* DEV-POLISH-01 compact chapter-result spacing keeps both actions visible on 390x844. */
.result-card { gap:14px; }
.chapter-reward { gap:6px; padding:10px 12px; }
.chapter-reward .trail-preview { height:54px; }
@media (max-width:430px) and (min-height:760px){ .result-card{padding:16px 20px;gap:12px}.result-orb{width:82px;height:82px;font-size:34px}.reward-row{padding:8px 12px}.chapter-reward{gap:5px;padding:9px 11px}.chapter-reward h2{font-size:20px}.reward-double-btn{min-height:56px}.result-actions{gap:8px} }

/* DEV-UI-02R1 — unified responsive Squishies / Trails collection layout. */
.screen-characters {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
}

.cosmetic-tabs {
  width: min(100%, 680px);
  min-width: 0;
  justify-self: center;
}

.collection-scroll {
  width: 100%;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  justify-self: stretch;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scroll-padding-block: 20px calc(38px + var(--safe-bottom));
}

.collection-grid,
.character-grid,
.trail-grid {
  width: min(100%, 980px);
  min-width: 0;
  margin: 0 auto;
  padding: 20px 22px calc(38px + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  align-content: start;
  align-items: stretch;
  gap: 20px 14px;
  overflow: visible;
}

.collection-card,
.character-card,
.trail-card {
  width: 100%;
  min-width: 0;
  margin: 0;
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  padding: 13px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  gap: 10px;
  overflow: visible;
  transition: transform .14s ease, box-shadow .14s ease, outline-color .14s ease;
}

.flowling-card,
.character-card {
  height: 232px;
  min-height: 232px;
  grid-template-rows: 104px 28px 52px;
}

.trail-card {
  height: 260px;
  min-height: 260px;
  grid-template-rows: 68px 104px 52px;
}

.collection-card.selected,
.character-card.selected,
.trail-card.selected {
  outline: 3px solid color-mix(in srgb, var(--theme-path) 72%, transparent);
  outline-offset: 0;
}

.collection-card:focus-within {
  outline: 2px solid var(--ui-focus, #2F87FF);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .collection-card:hover {
    transform: translateY(-1px);
    box-shadow: -7px -7px 16px var(--ui-shadow-light, var(--shadow-light)), 8px 10px 20px var(--ui-shadow-dark, var(--shadow-dark));
  }
}

.collection-preview,
.collection-info,
.collection-action {
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.collection-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.flowling-preview {
  height: 104px;
}

.flowling-preview img,
.character-card img {
  width: 96px;
  height: 96px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  margin: 0;
  align-self: center;
  justify-self: center;
}

.collection-info {
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

.collection-title {
  width: 100%;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.2;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.flowling-info {
  min-height: 28px;
}

.flowling-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.trail-preview-wrap {
  height: 68px;
  padding: 0;
}

.trail-preview-wrap > .trail-preview,
.trail-card .trail-preview {
  width: 100%;
  height: 64px;
  min-height: 64px;
  margin: 0;
}

.trail-info {
  height: 104px;
  min-height: 104px;
  grid-template-rows: 48px 48px;
  gap: 8px;
  align-content: center;
}

.trail-name {
  min-height: 48px;
  display: grid;
  place-items: center;
  font-size: clamp(16px, 2.15vw, 18px);
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.trail-source,
.collection-subtitle {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: clamp(15px, 1.9vw, 16px);
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.collection-action {
  height: 52px;
  min-height: 52px;
  display: grid;
  align-items: stretch;
}

.collection-action-btn,
.collection-locked-status {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 52px;
  min-height: 52px;
  margin: 0;
  padding: 8px 9px;
  border-radius: 16px;
  font-size: clamp(15px, 1.9vw, 17px);
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.collection-action-btn:disabled,
.collection-action-btn[aria-disabled="true"] {
  opacity: 1;
  color: var(--ui-text-disabled, var(--muted));
}

.collection-locked-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ui-text-disabled, var(--muted));
  background: var(--ui-surface-inset, rgba(112, 134, 147, .1));
  box-shadow: inset 2px 2px 5px var(--ui-shadow-dark, var(--shadow-dark)), inset -2px -2px 5px var(--ui-shadow-light, var(--shadow-light));
}

.collection-lock-mark {
  position: relative;
  width: 15px;
  height: 12px;
  flex: 0 0 15px;
  border: 2px solid currentColor;
  border-radius: 4px;
  opacity: .8;
}
.collection-lock-mark::before {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: -9px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.trail-card.locked {
  opacity: 1;
}

.collection-card .btn:focus-visible,
.cosmetic-tabs .seg:focus-visible {
  outline: 2px solid var(--ui-focus, #2F87FF);
  outline-offset: 2px;
}

@media (min-width: 600px) {
  .collection-grid,
  .character-grid,
  .trail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 16px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .flowling-card,
  .character-card {
    height: 238px;
    min-height: 238px;
  }
  .trail-card {
    height: 266px;
    min-height: 266px;
  }
}

@media (min-width: 850px) {
  .collection-grid,
  .character-grid,
  .trail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 18px;
    padding: 24px 26px calc(40px + var(--safe-bottom));
  }
  .cosmetic-tabs {
    width: min(100%, 760px);
  }
  .flowling-card,
  .character-card {
    height: 246px;
    min-height: 246px;
    grid-template-rows: 112px 28px 52px;
  }
  .flowling-preview {
    height: 112px;
  }
  .flowling-preview img,
  .character-card img {
    width: 104px;
    height: 104px;
  }
  .trail-card {
    height: 270px;
    min-height: 270px;
  }
}

@media (orientation: landscape) and (max-height: 440px) {
  .screen-characters {
    gap: 8px;
  }
  .cosmetic-tabs .seg {
    min-height: 44px;
  }
  .collection-grid,
  .character-grid,
  .trail-grid {
    padding-top: 16px;
    padding-bottom: calc(30px + var(--safe-bottom));
    row-gap: 18px;
  }
}

/* DEV-UI-02R1 mobile fit refinement: preserve two columns without wrapping CTAs. */
.screen-characters {
  padding-left: calc(10px + var(--safe-left));
  padding-right: calc(10px + var(--safe-right));
}
.collection-grid,
.character-grid,
.trail-grid {
  padding-left: 18px;
  padding-right: 18px;
  column-gap: 10px;
}
.collection-card,
.character-card,
.trail-card {
  padding: 8px;
  gap: 8px;
}
.flowling-card,
.character-card {
  height: 224px;
  min-height: 224px;
  grid-template-rows: 100px 28px 52px;
}
.flowling-preview { height:100px; }
.flowling-preview img,
.character-card img { width:94px; height:94px; }
.trail-card {
  height: 254px;
  min-height: 254px;
  grid-template-rows: 64px 106px 52px;
}
.trail-preview-wrap { height:64px; }
.trail-preview-wrap > .trail-preview,
.trail-card .trail-preview { height:60px; min-height:60px; }
.trail-info { height:106px; min-height:106px; grid-template-rows:50px 48px; gap:8px; }
.collection-action-btn,
.collection-locked-status {
  padding-left:4px;
  padding-right:4px;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  overflow-wrap:normal;
}
@media (min-width:600px) {
  .screen-characters {
    padding-left: calc(14px + var(--safe-left));
    padding-right: calc(14px + var(--safe-right));
  }
  .collection-grid,
  .character-grid,
  .trail-grid { padding-left:24px; padding-right:24px; column-gap:16px; }
  .collection-card,
  .character-card,
  .trail-card { padding:11px; gap:9px; }
  .flowling-card,
  .character-card { height:238px; min-height:238px; grid-template-rows:104px 30px 52px; }
  .trail-card { height:266px; min-height:266px; grid-template-rows:68px 106px 52px; }
  .collection-action-btn,
  .collection-locked-status { font-size:16px; padding-left:8px; padding-right:8px; }
}
@media (min-width:850px) {
  .collection-grid,
  .character-grid,
  .trail-grid { padding-left:26px; padding-right:26px; column-gap:18px; }
  .collection-card,
  .character-card,
  .trail-card { padding:13px; gap:10px; }
  .flowling-card,
  .character-card { height:246px; min-height:246px; grid-template-rows:112px 28px 52px; }
  .trail-card { height:270px; min-height:270px; grid-template-rows:68px 104px 52px; }
  .collection-action-btn,
  .collection-locked-status { font-size:17px; padding-left:10px; padding-right:10px; }
}

/* Collection action sizing must outrank the global .btn typography/padding tokens. */
.collection-card .collection-action-btn {
  width:100%;
  min-width:0;
  max-width:100%;
  height:52px;
  min-height:52px;
  margin:0;
  padding:8px 4px;
  border-radius:16px;
  font-size:15px;
  line-height:1.15;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  letter-spacing:0;
}
@media (min-width:600px) {
  .collection-card .collection-action-btn { font-size:16px; padding-left:8px; padding-right:8px; }
}
@media (min-width:850px) {
  .collection-card .collection-action-btn { font-size:17px; padding-left:10px; padding-right:10px; }
}

/* Final DEV-UI-02R1 containment tuning. */
.collection-grid,
.character-grid,
.trail-grid { max-width:980px; }
.collection-card,
.character-card,
.trail-card { padding:6px; }
@media (min-width:600px) {
  .collection-card,
  .character-card,
  .trail-card { padding:9px; }
  .collection-card .collection-action-btn { font-size:15px; padding-left:5px; padding-right:5px; }
}
@media (min-width:850px) {
  .collection-card,
  .character-card,
  .trail-card { padding:13px; }
  .collection-card .collection-action-btn { font-size:17px; padding-left:10px; padding-right:10px; }
}

@media (max-width:599px) {
  .collection-scroll {
    width:calc(100% + 16px);
    margin-left:-8px;
    margin-right:-8px;
  }
}
@media (orientation:landscape) and (max-height:440px) {
  .collection-grid,
  .character-grid,
  .trail-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .collection-card .collection-action-btn {
    font-size:15px;
    padding-left:5px;
    padding-right:5px;
  }
}

/* DEV-UI-03 — unified global navigation, contextual gameplay navigation and system-pause polish. */
.unified-header {
  width:100%;
  display:grid;
  grid-template-columns:minmax(104px,auto) minmax(0,1fr) minmax(104px,auto);
  align-items:center;
  gap:10px;
  min-height:56px;
}
.nav-left,.nav-right { display:flex; align-items:center; gap:9px; min-width:0; }
.nav-left { justify-content:flex-start; }
.nav-right { justify-content:flex-end; }
.nav-title { margin:0; min-width:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-icon-btn { flex:0 0 auto; }
.nav-settings-btn.active { box-shadow:inset 3px 3px 8px var(--ui-shadow-dark),inset -3px -3px 8px var(--ui-shadow-light); color:var(--accent-blue); }
.nav-progress {
  min-height:44px;
  min-width:72px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  background:var(--ui-surface-raised);
  box-shadow:inset 2px 2px 5px var(--ui-shadow-dark),inset -2px -2px 6px var(--ui-shadow-light);
  color:var(--ui-text-primary);
  font-size:var(--font-hud-ui);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.game-header { grid-template-columns:minmax(104px,auto) minmax(0,1fr) minmax(158px,auto); }
.game-header .spark-amount { order:0; }
.game-header .nav-progress { order:1; }
.home-top { justify-content:flex-end; }
.home-footer { width:min(100%,520px); display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.home-footer .btn { width:100%; }
.result-top { width:100%; display:flex; justify-content:flex-end; align-items:center; }
.screen-result { grid-template-rows:auto minmax(0,1fr); gap:10px; place-items:stretch center; }
.result-card { align-self:center; }

/* Manual Pause is gone from gameplay. System Pause remains modal-only. */
.hud-pause { display:none !important; }
.game-controls { grid-template-columns:repeat(3,minmax(0,1fr)); }
.menu-control-btn { font-weight:700; }

/* DARK system Pause pills use the same dark secondary shadow language, without a white halo. */
[data-theme="dark"] .pause-toggles .small-pill {
  background:linear-gradient(145deg,var(--ui-surface),var(--ui-surface-raised));
  box-shadow:-3px -3px 8px rgba(38,54,79,.52),4px 5px 10px var(--ui-shadow-dark);
  color:var(--ui-text-primary);
}
[data-theme="dark"] .reward-double-btn .reward-double-extra {
  color:#F7F9FD;
  opacity:1;
}

@media (max-width:520px) {
  .unified-header { grid-template-columns:104px minmax(0,1fr) minmax(88px,auto); gap:7px; }
  .nav-left,.nav-right { gap:7px; }
  .unified-header .icon-btn { width:48px; height:48px; min-width:48px; min-height:48px; }
  .unified-header .spark-amount { min-width:70px; padding:0 9px; }
  .game-header { grid-template-columns:104px minmax(0,1fr) minmax(140px,auto); gap:6px; }
  .game-header .nav-right { gap:5px; }
  .game-header .spark-amount { min-width:62px; padding:0 7px; }
  .game-header .nav-progress { min-width:68px; padding:0 8px; }
  .game-header .game-level-label { font-size:clamp(15px,4.2vw,18px); }
}

@media (max-width:370px) {
  .unified-header { grid-template-columns:100px minmax(0,1fr) minmax(78px,auto); gap:5px; }
  .nav-left,.nav-right { gap:5px; }
  .unified-header .icon-btn { width:46px; height:46px; min-width:46px; min-height:46px; }
  .game-header { grid-template-columns:100px minmax(0,1fr) minmax(128px,auto); }
  .game-header .spark-amount { min-width:58px; padding:0 6px; }
  .game-header .nav-progress { min-width:64px; padding:0 6px; }
  .game-header .game-level-label { font-size:15px; }
}

@media (orientation:landscape) and (max-height:520px) {
  .screen-game { grid-template-columns:minmax(0,1fr) minmax(270px,.8fr); }
  .game-header { grid-template-columns:96px minmax(0,1fr) minmax(134px,auto); gap:5px; min-height:48px; }
  .game-header .nav-left,.game-header .nav-right { gap:4px; }
  .game-header .icon-btn { width:44px; height:44px; min-width:44px; min-height:44px; }
  .game-header .spark-amount { min-height:40px; min-width:58px; padding:0 6px; font-size:15px; }
  .game-header .nav-progress { min-height:40px; min-width:62px; padding:0 6px; font-size:15px; }
  .game-header .game-level-label { font-size:15px; }
  .game-controls { grid-template-columns:1fr; }
}

@media (orientation:landscape) and (max-height:390px) {
  .screen-game { grid-template-columns:minmax(0,1fr) minmax(260px,.78fr); }
  .game-header { grid-template-columns:92px minmax(0,1fr) minmax(126px,auto); }
  .game-header .icon-btn { width:42px; height:42px; min-width:42px; min-height:42px; }
  .game-header .spark-amount,.game-header .nav-progress { min-height:38px; font-size:15px; }
}
/* UI03 intrinsic-size guard: navigation headers must never be widened by content grids. */
.screen-endless,.endless-grid,.endless-card { min-width:0; }
.endless-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* DEV-UI-03 critical 360px header fit: preserve 44px touch targets while reserving the full LEVEL N title. */
@media (max-width:370px) {
  .game-header { grid-template-columns:92px minmax(0,1fr) minmax(120px,auto); gap:5px; }
  .game-header .nav-left,.game-header .nav-right { gap:4px; }
  .game-header .icon-btn { width:44px; height:44px; min-width:44px; min-height:44px; }
  .game-header .spark-amount { min-width:56px; padding-left:4px; padding-right:4px; gap:5px; }
  .game-header .nav-progress { min-width:60px; padding-left:4px; padding-right:4px; }
  .game-header .game-level-label { letter-spacing:0; }
}

/* SQUISHY-01 — Front-only Squishy presentation layer. Board geometry remains untouched. */
.home-brand-subtitle {
  margin: -4px 0 0;
  color: var(--ui-text-primary, var(--text));
  font-size: clamp(20px, 3.7vw, 28px);
  line-height: 1.1;
  font-weight: 850;
  letter-spacing: .01em;
}

.squishy-sprite {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center bottom;
}
.squishy-front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: center bottom;
}

/* Shared Front-only motion system. The anchor owns grid position; this wrapper owns decorative transforms. */
.squishy-sprite.flow-nudge-right { animation:squishyMoveRight 190ms cubic-bezier(.2,.72,.35,1); }
.squishy-sprite.flow-nudge-left { animation:squishyMoveLeft 190ms cubic-bezier(.2,.72,.35,1); }
.squishy-sprite.flow-nudge-up { animation:squishyMoveUp 190ms cubic-bezier(.2,.72,.35,1); }
.squishy-sprite.flow-nudge-down { animation:squishyMoveDown 190ms cubic-bezier(.2,.72,.35,1); }
@keyframes squishyMoveRight {
  0% { transform:translate3d(0,0,0) scale(.98,1.02); }
  48% { transform:translate3d(4px,0,0) scale(1.03,.98); }
  78% { transform:translate3d(1px,0,0) scale(.99,1.02); }
  100% { transform:translate3d(0,0,0) scale(1); }
}
@keyframes squishyMoveLeft {
  0% { transform:translate3d(0,0,0) scale(.98,1.02); }
  48% { transform:translate3d(-4px,0,0) scale(1.03,.98); }
  78% { transform:translate3d(-1px,0,0) scale(.99,1.02); }
  100% { transform:translate3d(0,0,0) scale(1); }
}
@keyframes squishyMoveUp {
  0% { transform:translate3d(0,0,0) scale(1.02,.98); }
  48% { transform:translate3d(0,-4px,0) scale(.98,1.03); }
  78% { transform:translate3d(0,-1px,0) scale(1.02,.99); }
  100% { transform:translate3d(0,0,0) scale(1); }
}
@keyframes squishyMoveDown {
  0% { transform:translate3d(0,0,0) scale(1.02,.98); }
  48% { transform:translate3d(0,4px,0) scale(.98,1.03); }
  78% { transform:translate3d(0,1px,0) scale(1.02,.99); }
  100% { transform:translate3d(0,0,0) scale(1); }
}
.squishy-sprite.squishy-idle-cycle {
  animation:squishyIdleReaction var(--squishy-idle-duration,560ms) cubic-bezier(.22,.72,.31,1);
}
@keyframes squishyIdleReaction {
  0% { transform:translate3d(0,0,0) scale(1); }
  21% { transform:translate3d(0,-2px,0) scale(.99,1.015); }
  48% { transform:translate3d(0,calc(var(--squishy-hop-height,4px) * -1),0) scale(.98,1.03); }
  75% { transform:translate3d(0,0,0) scale(1.03,.97); }
  88% { transform:translate3d(0,-1px,0) scale(.99,1.015); }
  100% { transform:translate3d(0,0,0) scale(1); }
}

@media (max-width: 420px) {
  .home-brand-subtitle { font-size:20px; }
}

/* Stage 5B moderation: keep Settings inside its own viewport on short landscape screens. */
.settings-list { min-height:0; max-height:100%; overflow-y:auto; overflow-x:hidden; overflow-anchor:none; overscroll-behavior:contain; }

/* STAGE5B-RC2 — mystery review reward / Mochi / Star Trail / RU home logo */
.home-logo-localized { width:min(88vw,560px); max-height:27vh; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(62,55,150,.16)); }
.home-logo-icon { width:min(44vw,240px); max-height:16vh; }
.home-review-mystery {
  width:min(100%,560px); display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"copy pair" "cta cta";
  gap:10px 14px; align-items:center; padding:12px 14px; border-radius:22px;
  background:linear-gradient(145deg,rgba(102,78,214,.16),rgba(79,203,235,.14));
  border:1px solid color-mix(in srgb,#8f7cff 28%,transparent);
  box-shadow:5px 7px 16px var(--shadow-dark),-5px -5px 14px var(--shadow-light);
}
.home-review-copy { grid-area:copy; min-width:0; display:grid; gap:2px; text-align:left; }
.home-review-title { font-size:14px; letter-spacing:.04em; color:var(--theme-accent); }
.home-review-lead { font-size:15px; font-weight:900; line-height:1.2; }
.home-review-sub { color:var(--muted); font-weight:700; line-height:1.2; }
.home-review-mystery .mystery-pair { grid-area:pair; }
.home-review-cta { grid-area:cta; width:100%; min-height:42px; font-weight:900; }

.mystery-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }
.mystery-pair.compact { width:126px; gap:6px; }
.mystery-item { min-width:0; display:grid; justify-items:center; gap:5px; }
.mystery-visual { position:relative; width:112px; height:88px; display:grid; place-items:center; overflow:hidden; border-radius:20px; background:radial-gradient(circle at 50% 45%,rgba(142,103,255,.28),rgba(33,26,86,.1) 68%,transparent); }
.mystery-pair.compact .mystery-visual { width:58px; height:50px; border-radius:14px; }
.mystery-squishy-visual img { width:100px; height:100px; object-fit:contain; filter:brightness(0) saturate(100%) opacity(.72) drop-shadow(0 0 9px rgba(140,92,255,.92)); transform:scale(.86); }
.mystery-pair.compact .mystery-squishy-visual img { width:58px; height:58px; }
.mystery-question, .collection-secret-question, .review-reward-question { position:absolute; inset:0; display:grid; place-items:center; font-weight:950; color:#fff; text-shadow:0 2px 9px rgba(47,26,109,.8); font-size:34px; }
.mystery-pair.compact .mystery-question { font-size:24px; }
.mystery-label { text-align:center; font-size:15px; letter-spacing:.055em; line-height:1.05; color:var(--muted); }
.mystery-pair.compact .mystery-label { display:none; }
.mystery-trail-band { width:78%; height:16px; border-radius:999px; background:linear-gradient(90deg,#58d8ff,#8e6cff,#63e4ff); box-shadow:0 0 12px rgba(80,205,255,.75),0 0 18px rgba(125,79,255,.55); filter:blur(2.2px); opacity:.72; transform:rotate(-8deg); }
.mystery-pair.compact .mystery-trail-band { height:10px; }

.review-offer-content,.review-auth-content,.review-reveal-content { display:grid; gap:13px; text-align:center; justify-items:center; }
.review-offer-content h2,.review-auth-content h2,.review-reveal-content h2,.review-reveal-content h3 { margin:0; }
.review-offer-kicker { font-size:34px; }
.review-offer-lead,.review-offer-sub,.review-offer-honest,.review-auth-content p,.review-thanks,.review-reveal-final p { margin:0; line-height:1.4; }
.review-offer-sub,.review-offer-honest,.review-thanks { color:var(--muted); }
.review-offer-actions { width:100%; display:grid; gap:9px; }
.review-offer-modal .modal-shell,.review-reveal-modal .modal-shell,.review-auth-modal .modal-shell { overflow:auto; overscroll-behavior:contain; }
.review-reveal-pair { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.review-reward-tile { min-width:0; padding:10px; border-radius:20px; background:color-mix(in srgb,var(--ui-surface-raised,#fff) 86%,#765cff 14%); box-shadow:inset 0 0 0 1px rgba(139,105,255,.16); display:grid; gap:6px; transition:transform .28s ease,box-shadow .28s ease; }
.review-reward-visual { position:relative; height:118px; display:grid; place-items:center; overflow:hidden; }
.review-reward-squishy img { width:112px; height:112px; object-fit:contain; filter:brightness(0) opacity(.72) blur(.8px) drop-shadow(0 0 8px rgba(135,90,255,.85)); transform:scale(.88); transition:filter .32s ease,transform .32s cubic-bezier(.2,.9,.2,1.25); }
.review-reward-tile .trail-preview { width:100%; min-height:78px; filter:blur(4px) brightness(.62); opacity:.5; transition:filter .32s ease,opacity .32s ease,transform .32s ease; }
.review-reward-tile.revealed { transform:translateY(-2px) scale(1.02); box-shadow:0 0 24px rgba(101,115,255,.26),inset 0 0 0 1px rgba(139,105,255,.25); }
.review-reward-squishy.revealed img { filter:drop-shadow(0 0 11px rgba(255,123,184,.36)); transform:scale(1); }
.review-reward-trail.revealed .trail-preview { filter:none; opacity:1; transform:scale(1.03); }
.review-reward-tile.revealed .review-reward-question { opacity:0; pointer-events:none; }
.review-reward-question { transition:opacity .22s ease; }
.review-reveal-final { opacity:0; transform:translateY(6px); pointer-events:none; display:grid; gap:10px; width:100%; transition:opacity .28s ease,transform .28s ease; }
.review-reveal-final.visible { opacity:1; transform:none; pointer-events:auto; }
.review-reveal-final.visible::before { content:"✦  ✨  ✦"; display:block; color:#8a6cff; font-size:20px; animation:reviewSparkle .8s ease both; }
@keyframes reviewSparkle { from{opacity:0;transform:scale(.7)} 55%{opacity:1;transform:scale(1.15)} to{transform:scale(1)} }

.secret-reward-card { border:1px solid color-mix(in srgb,#8d72ff 26%,transparent); }
.character-card.secret-reward-card { grid-template-rows:92px 44px 52px; }
.collection-secret-silhouette { filter:brightness(0) opacity(.7) drop-shadow(0 0 8px rgba(139,91,255,.82)); transform:scale(.9); }
.collection-secret-question { font-size:31px; }
.flowling-preview { position:relative; }
.collection-exclusive-badge { display:block; text-align:center; font-size:15px; line-height:1.1; color:#846ce8; font-weight:900; }
.collection-secret-trail { position:relative; width:100%; height:60px; display:grid; place-items:center; overflow:hidden; border-radius:16px; background:radial-gradient(circle,rgba(116,102,235,.18),transparent 70%); }
.collection-secret-trail .mystery-trail-band { width:72%; }
.trail-preview-star { fill:#fff2a8; font-size:15px; filter:drop-shadow(0 0 4px rgba(100,108,255,.8)); }
.board-shell[data-trail="star-trail"] .flow-path-base { filter:drop-shadow(0 0 8px rgba(89,216,255,.72)) drop-shadow(0 0 12px rgba(116,88,255,.42)); }
.board-shell[data-trail="star-trail"] .flow-path-shimmer { stroke-linecap:round; }

@media (max-width:599px) {
  .home-logo-localized { width:min(92vw,500px); max-height:23vh; }
  .home-review-mystery { grid-template-columns:minmax(0,1fr) 112px; padding:9px 10px; gap:7px 9px; }
  .home-review-title { font-size:15px; }.home-review-lead{font-size:15px}.home-review-sub{font-size:15px}.home-review-cta{font-size:15px;min-height:38px;padding:7px 9px}
  .mystery-pair.compact { width:108px; }.mystery-pair.compact .mystery-visual{width:50px;height:44px}
  .review-reveal-pair { gap:8px; }.review-reward-visual{height:96px}.review-reward-squishy img{width:94px;height:94px}
  .character-card.secret-reward-card { grid-template-rows:86px 46px 52px; }
}
@media (orientation:landscape) and (max-height:440px) {
  .home-logo-localized { max-height:31vh; width:min(42vw,420px); }
  .home-review-mystery { max-width:360px; grid-template-columns:minmax(0,1fr) 98px; padding:7px 9px; gap:5px 7px; }
  .home-review-sub { display:none; }.mystery-pair.compact{width:94px}.mystery-pair.compact .mystery-visual{width:44px;height:38px}.home-review-cta{min-height:34px;padding:5px 8px}
}

/* STAGE5B-RC2 responsive correction: the new mystery row must participate in Home layout. */
@media (max-width:599px) and (max-height:720px) and (orientation:portrait) {
  .screen-home { grid-template-rows:auto auto auto auto auto auto; gap:6px; align-content:start; }
  .home-hero { align-self:start; gap:3px; }
  .home-logo-localized { width:min(86vw,420px); max-height:18vh; }
  .home-subtitle { font-size:15px; line-height:1.15; }
  .home-actions { gap:6px; }
  .home-actions .btn { min-height:40px; padding:7px 10px; }
  .home-actions .btn-primary { min-height:46px; }
  .home-review-mystery { padding:7px 9px; gap:5px 8px; }
  .home-gift { min-height:46px; padding:5px 7px 5px 10px; }
  .home-footer .btn { min-height:38px; padding:6px 10px; }
}
@media (orientation:landscape) and (max-height:520px) {
  .screen-home { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto auto auto; gap:6px 10px; align-content:center; }
  .home-top { grid-column:1/-1; grid-row:1; }
  .home-hero { grid-column:1; grid-row:2/5; align-self:center; }
  .home-actions { grid-column:2; grid-row:2; align-self:start; grid-template-columns:1fr 1fr; max-width:390px; gap:6px; }
  .home-actions .btn-primary { grid-column:1/-1; }
  .home-actions .btn { min-height:38px; padding:6px 10px; }
  .home-actions .btn-primary { min-height:44px; }
  .home-review-mystery { grid-column:2; grid-row:3; align-self:center; width:min(100%,390px); max-width:390px; }
  .home-gift { grid-column:2; grid-row:4; width:min(100%,390px); max-width:390px; min-height:42px; }
  .home-footer { display:none; }
}
@media (orientation:landscape) and (max-height:520px) {
  .home-gift { padding:4px 6px 4px 10px; gap:8px; }
  .home-gift-copy strong { font-size:15px; }
  .home-gift-copy span { font-size:15px; }
  .home-gift-btn { min-height:34px; padding:5px 8px; font-size:15px; line-height:1.1; white-space:nowrap; }
}
@media (orientation:landscape) and (max-height:520px) {
  .screen-home { gap:4px 8px; }
  .screen-home .spark-amount { height:34px; min-height:34px; }
  .home-gift-btn { height:34px; min-height:34px; overflow:hidden; }
}

/* STAGE5B-RC2 collection containment: review-only CTA may wrap inside the fixed action row. */
.secret-reward-card .collection-action-btn {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  font-size: 15px;
  line-height: 1.08;
  padding: 5px 4px;
}
@media (min-width:600px) {
  .secret-reward-card .collection-action-btn { font-size: 15px; padding-left:5px; padding-right:5px; }
}
@media (min-width:850px) {
  .secret-reward-card .collection-action-btn { font-size: 15px; padding-left:6px; padding-right:6px; }
}

/* STAGE5B-RC2 short-portrait density: preserve >=15px text while keeping footer actions in viewport. */
@media (max-width:599px) and (max-height:720px) and (orientation:portrait) {
  .home-logo-localized { max-height:16vh; }
  .home-review-sub { display:none; }
  .home-review-mystery { padding:5px 8px; gap:4px 7px; }
  .home-footer .btn { min-height:36px; padding:4px 8px; }
}

/* STAGE5B-RC4 — first launch, non-selection, dev reset and release polish. */
#app,
#app * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}
#app input,
#app textarea,
#app select,
#app [contenteditable="true"] {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#app img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* RC4 startup branding blocker: first paint is new-brand skeleton, never legacy branding. */
.loading-brand {
  position: relative;
  width: min(78vw, 430px);
  aspect-ratio: 724 / 543;
  max-height: 38vh;
  flex: 0 1 auto;
}
.loading-logo,
.loading-logo-art,
.loading-logo-skeleton {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.loading-logo-art {
  display: block;
  object-fit: contain;
  opacity: 0;
  transition: opacity 180ms ease;
}
.loading-logo-skeleton {
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 180ms ease;
  animation: rc4SkeletonPulse 1.35s ease-in-out infinite;
}
.loading-logo-skeleton svg { width: 100%; height: 100%; overflow: visible; }
.loading-skeleton-cloud { fill: rgba(116, 91, 223, .30); }
.loading-skeleton-plaque { fill: rgba(88, 72, 196, .34); }
.loading-skeleton-star { fill: rgba(121, 216, 255, .48); }
html[data-theme="dark"] .loading-skeleton-cloud { fill: rgba(144, 122, 255, .30); }
html[data-theme="dark"] .loading-skeleton-plaque { fill: rgba(108, 91, 227, .32); }
.loading-brand.logo-ready .loading-logo-art { opacity: 1; }
.loading-brand.logo-ready .loading-logo-skeleton { opacity: 0; }
@keyframes rc4SkeletonPulse {
  0%,100% { opacity: .58; transform: scale(.985); }
  50% { opacity: .9; transform: scale(1); }
}
.boot-fatal-inline { width: min(92vw, 520px); margin-top: 4px; }

.home-subtitle-lines { display: grid; gap: 1px; }
.home-subtitle-lines span { display: block; white-space: nowrap; }

/* First-launch tutorial lives inside Board presentation geometry; .flowling-anchor position is untouched. */
.onboarding-arrow-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  overflow: visible;
}
.onboarding-arrow {
  position: absolute;
  height: 16px;
  transform-origin: left center;
  filter: drop-shadow(0 0 7px rgba(50, 216, 255, .92)) drop-shadow(0 0 12px rgba(77, 120, 255, .52));
  animation: onboardingArrowPulse 760ms ease-in-out infinite;
}
.onboarding-arrow-shaft {
  position: absolute;
  left: 0;
  right: 11px;
  top: 5px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(104,235,255,.68), #48d7ff 45%, #73a8ff);
  box-shadow: 0 0 8px rgba(72,216,255,.78);
}
.onboarding-arrow-head {
  position: absolute;
  right: 0;
  top: 1px;
  width: 14px;
  height: 14px;
  border-top: 6px solid #78dbff;
  border-right: 6px solid #78dbff;
  transform: rotate(45deg);
  border-radius: 2px;
}
.onboarding-tip {
  color: #198fbd;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(88,220,255,.25);
}
@keyframes onboardingArrowPulse {
  0%,100% { opacity: .76; margin-left: 0; }
  50% { opacity: 1; margin-left: 4px; }
}

.dev-settings-block {
  margin-top: 8px;
  padding: 12px;
  display: grid;
  gap: 8px;
  border: 1px dashed rgba(214, 83, 105, .6);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ui-surface-raised, #fff) 88%, #ff6f91 12%);
}
.dev-settings-title { color: #c43d5a; letter-spacing: .12em; font-size: 15px; }
.dev-reset-btn { color: #b82d4d; border-color: rgba(196,61,90,.35); }
.dev-reset-note { color: var(--muted); font-size: 15px; line-height: 1.3; }
.dev-reset-confirm { display: grid; gap: 12px; text-align: center; }
.dev-reset-confirm h2,.dev-reset-confirm p { margin: 0; }
.dev-reset-warning { color: #b82d4d; font-weight: 800; }
.dev-reset-actions { width: 100%; display: grid; gap: 8px; }
.btn-danger { color: #fff; background: linear-gradient(145deg,#e85e78,#c43d5a); }

.chapter-coming-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 118px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 86px minmax(0,1fr);
  align-items: center;
  gap: 14px;
  border-radius: 25px;
  background: linear-gradient(145deg, color-mix(in srgb,var(--ui-surface-raised,#fff) 84%,#a78cff 16%), color-mix(in srgb,var(--ui-surface,#eef4f8) 88%,#63d8ff 12%));
  border: 1px solid color-mix(in srgb,#8d72ff 30%,transparent);
  box-shadow: 8px 10px 20px var(--shadow-dark), -7px -7px 18px var(--shadow-light);
}
.chapter-coming-card::after {
  content: "";
  position: absolute;
  inset: -45% -20%;
  background: linear-gradient(110deg,transparent 38%,rgba(255,255,255,.32) 50%,transparent 62%);
  transform: translateX(-55%);
  animation: chapterComingGlow 4.8s ease-in-out infinite;
  pointer-events: none;
}
.chapter-coming-sparkles { font-size: 27px; text-align: center; filter: drop-shadow(0 0 8px rgba(125,103,255,.4)); }
.chapter-coming-copy { min-width: 0; display: grid; gap: 5px; }
.chapter-coming-title { font-size: clamp(18px,3.6vw,23px); color: var(--theme-accent); }
.chapter-coming-body,.chapter-coming-sub { font-size: 15px; line-height: 1.3; }
.chapter-coming-sub { color: var(--muted); font-weight: 700; }
@keyframes chapterComingGlow { 0%,55%{transform:translateX(-55%)} 78%,100%{transform:translateX(55%)} }

@media (max-width: 520px) {
  .loading-brand { width: min(86vw, 390px); max-height: 34vh; }
  .chapter-coming-card { grid-template-columns: 1fr; gap: 7px; text-align: center; padding: 16px; }
  .chapter-coming-sparkles { font-size: 23px; }
  .home-subtitle-lines span { white-space: nowrap; }
}
@media (orientation: landscape) and (max-height: 440px) {
  .loading-brand { width: min(44vw, 330px); max-height: 46vh; }
  .chapter-coming-card { min-height: 96px; grid-template-columns: 70px minmax(0,1fr); padding: 12px 14px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-logo-skeleton,.onboarding-arrow,.chapter-coming-card::after { animation: none; }
}
@media (max-width:599px) and (max-height:720px) and (orientation:portrait) {
  .home-subtitle-lines { display:grid; font-size:15px; line-height:1.12; gap:0; }
  .home-logo-localized { max-height:14vh; }
  .home-hero { gap:2px; }
}


/* STAGE5B-RC6 — Home hero responsive flow / geometry contract.
   Keep Logo -> 3-line subtitle -> Play in one natural primary stack. */
.screen-home {
  --home-primary-gap: 16px;
  --home-layout-gap: 8px;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: auto auto auto auto auto auto;
  gap: var(--home-layout-gap);
  align-content: center;
  justify-items: center;
}
.home-top { grid-column: 1; grid-row: 1; }
.home-primary {
  grid-column: 1;
  grid-row: 2;
  width: min(100%,760px);
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: var(--home-primary-gap);
}
.home-hero {
  width: 100%;
  align-self: auto;
  gap: 6px;
}
.home-logo-localized {
  width: min(88vw,560px);
  height: auto;
  max-height: 21vh;
  object-fit: contain;
}
.home-subtitle,
.home-subtitle-lines {
  display: grid;
  visibility: visible;
  font-size: clamp(15px,2.3vw,19px);
  line-height: 1.22;
}
.home-subtitle-lines span { display:block; white-space:nowrap; }
.home-play-btn {
  width: min(100%,560px);
  min-height: 56px;
}
.home-actions {
  grid-column: 1;
  grid-row: 3;
  width: min(100%,560px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.home-actions .btn-primary { grid-column: auto; }
.home-review-mystery { grid-column:1; grid-row:4; }
.home-gift { grid-column:1; grid-row:5; }
.home-footer { grid-column:1; grid-row:6; }

/* Short portrait: preserve all three subtitle lines and all Home controls inside the game viewport. */
@media (max-width:599px) and (max-height:720px) and (orientation:portrait) {
  .screen-home {
    --home-primary-gap: 12px;
    --home-layout-gap: 4px;
    align-content: start;
    padding-top: calc(6px + var(--safe-top));
    padding-bottom: calc(6px + var(--safe-bottom));
  }
  .screen-home .spark-amount { height:34px; min-height:34px; }
  .home-primary { gap: var(--home-primary-gap); }
  .home-hero { gap:2px; padding-left:6px; padding-right:6px; }
  .home-logo-localized { width:min(86vw,420px); max-height:14vh; }
  .home-subtitle,
  .home-subtitle-lines { display:grid; visibility:visible; font-size:15px; line-height:1.12; gap:0; }
  .home-play-btn { min-height:44px; padding:7px 10px; }
  .home-actions { gap:4px 6px; }
  .home-actions .btn { min-height:36px; padding:5px 8px; font-size:15px; }
  .home-review-mystery {
    width:min(100%,560px);
    min-height:0;
    grid-template-columns:minmax(0,1fr) 70px 92px;
    grid-template-areas:"copy pair cta";
    gap:4px 5px;
    padding:5px 7px;
  }
  .home-review-title,.home-review-lead { font-size:15px; line-height:1.08; }
  .home-review-sub { display:none; }
  .home-review-mystery .mystery-pair { width:68px; gap:2px; }
  .home-review-mystery .mystery-pair.compact .mystery-visual { width:33px; height:34px; }
  .home-review-mystery .mystery-pair.compact .mystery-squishy-visual img { width:40px; height:40px; }
  .home-review-mystery .mystery-pair.compact .mystery-question { font-size:20px; }
  .home-review-cta { min-height:38px; padding:4px 5px; font-size:15px; line-height:1.05; }
  .home-gift { min-height:44px; padding:4px 6px 4px 9px; gap:6px; }
  .home-gift-copy strong,.home-gift-copy span,.home-gift-btn { font-size:15px; }
  .home-gift-btn { min-height:34px; padding:4px 7px; line-height:1.05; }
  .home-footer { display:grid; gap:6px; }
  .home-footer .btn { min-height:36px; padding:4px 7px; font-size:15px; }
}

/* Height-constrained landscape / desktop: primary branding stays vertically ordered on the left;
   secondary Home controls use the right column instead of stealing height from the hero. */
@media (orientation:landscape) and (max-height:820px) and (min-width:800px) {
  .screen-home {
    --home-primary-gap: 14px;
    --home-layout-gap: 8px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    gap:var(--home-layout-gap) 14px;
    align-content:center;
  }
  .home-top { grid-column:1/-1; grid-row:1; }
  .home-primary { grid-column:1; grid-row:2/5; align-self:center; width:100%; }
  .home-hero { grid-column:auto; grid-row:auto; padding:0 8px; gap:6px; }
  .home-logo-localized { width:min(42vw,420px); max-height:31vh; }
  .home-subtitle,
  .home-subtitle-lines { display:grid; visibility:visible; font-size:clamp(15px,2vw,18px); line-height:1.18; }
  .home-play-btn { width:min(100%,390px); min-height:50px; }
  .home-actions { grid-column:2; grid-row:2; align-self:start; width:min(100%,390px); max-width:390px; gap:6px; }
  .home-actions .btn { min-height:40px; padding:6px 10px; }
  .home-review-mystery { grid-column:2; grid-row:3; align-self:center; width:min(100%,390px); max-width:390px; }
  .home-gift { grid-column:2; grid-row:4; width:min(100%,390px); max-width:390px; }
  .home-footer { display:none; }
}

@media (orientation:landscape) and (max-height:520px) and (min-width:800px) {
  .screen-home { --home-primary-gap:12px; --home-layout-gap:4px; gap:4px 8px; }
  .screen-home .spark-amount { height:34px; min-height:34px; }
  .home-logo-localized { max-height:29vh; }
  .home-subtitle,
  .home-subtitle-lines { font-size:15px; line-height:1.12; }
  .home-play-btn { min-height:44px; padding:6px 10px; }
  .home-actions { gap:4px 6px; }
  .home-actions .btn { min-height:36px; padding:5px 8px; font-size:15px; }
  .home-review-mystery { padding:5px 7px; gap:4px 6px; }
  .home-review-title,.home-review-lead,.home-review-sub,.home-review-cta { font-size:15px; }
  .home-review-sub { display:none; }
  .home-review-cta { min-height:36px; padding:4px 6px; }
  .home-gift { min-height:40px; padding:3px 6px 3px 9px; }
  .home-gift-copy strong,.home-gift-copy span,.home-gift-btn { font-size:15px; }
  .home-gift-btn { min-height:32px; height:auto; padding:4px 7px; }
}


/* Stage 6A: common Home top bar + progression/DEV QA states. */
.screen-home > .home-top {
  width:100%;
  min-height:56px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  justify-self:stretch;
}
.screen-home > .home-top .nav-left { min-width:48px; }
.screen-home > .home-top .nav-title { min-width:0; }
.screen-home > .home-top .spark-amount { min-height:44px; height:auto; }
.level-card.level-current {
  outline:3px solid #39b86a;
  outline-offset:1px;
  box-shadow:-4px -4px 10px var(--ui-shadow-light, var(--shadow-light)),5px 6px 12px var(--ui-shadow-dark, var(--shadow-dark)),0 0 0 4px rgba(57,184,106,.10);
}
.level-card.level-done, .level-card.level-perfect {
  outline:3px solid #e7a92f;
  outline-offset:1px;
}
.dev-complete-btn {
  position:static;
  z-index:auto;
  min-height:36px;
  max-width:210px;
  padding:6px 10px;
  border-radius:13px;
  font-size:15px;
  line-height:1.08;
  opacity:.88;
  justify-self:end;
  grid-column:3;
}
.dev-complete-btn[disabled], .dev-complete-btn[aria-disabled="true"] { opacity:.55; }
@media (max-width:619px) and (orientation:portrait) {
  .game-controls.has-dev-complete { row-gap:6px; }
  .game-controls.has-dev-complete .dev-complete-btn { min-width:72px; max-width:92px; min-height:34px; padding:4px 8px; }
}
@media (orientation:landscape) and (max-height:520px) {
  .game-controls.has-dev-complete .dev-complete-btn { grid-column:1; width:100%; max-width:none; min-height:40px; padding:4px 8px; }
}
@media (max-width:599px) and (max-height:720px) and (orientation:portrait) {
  .screen-home { padding-top:calc(12px + var(--safe-top)); }
  .screen-home > .home-top .spark-amount { min-height:44px; height:auto; }
}
@media (orientation:landscape) and (max-height:520px) and (min-width:800px) {
  .screen-home > .home-top .spark-amount { min-height:44px; height:auto; }
}

/* Stage 6A Home Top: pin the common header to the same safe-area geometry as internal screens,
   while reserving an identical 56px first grid track so the RC6 hero composition is unchanged. */
.screen-home { grid-template-rows:56px auto auto auto auto auto; }
.screen-home > .home-top {
  position:absolute;
  top:calc(12px + var(--safe-top));
  left:calc(14px + var(--safe-left));
  right:calc(14px + var(--safe-right));
  width:auto;
}
@media (max-height:590px) and (orientation:portrait) {
  .screen-home > .home-top { top:calc(7px + var(--safe-top)); }
}
@media (orientation:landscape) and (max-height:520px) {
  .screen-home > .home-top {
    top:calc(7px + var(--safe-top));
    left:calc(9px + var(--safe-left));
    right:calc(9px + var(--safe-right));
  }
}
.screen-home > .home-top { grid-column:auto; grid-row:auto; }
/* Stage 6A: on very short portrait viewports reserve the actual compact top-bar height,
   rather than the desktop 56px track, so the carried-forward RC6 secondary blocks retain their no-overlap contract. */
@media (max-height:590px) and (orientation:portrait) {
  .screen-home { grid-template-rows:44px auto auto auto auto auto; }
}
@media (max-height:590px) and (orientation:portrait) {
  .home-logo-localized { max-height:13vh; }
}
@media (max-height:590px) and (orientation:portrait) {
  .home-logo-localized { max-height:12.5vh; }
}

/* STAGE 6B — Keys / Ice / Rails. Added as board-local presentation only. */
.key-tile,.lock-tile,.ice-tile,.rail-tile{position:relative;overflow:hidden}
.key-glyph,.lock-glyph,.ice-glyph,.rail-glyph{position:absolute;inset:13%;display:block;pointer-events:none}
.key-tile{box-shadow:inset 0 0 0 2px rgba(255,190,58,.28),0 0 12px rgba(255,190,58,.18)}
.key-glyph i{position:absolute;width:38%;aspect-ratio:1;border:clamp(2px,.35vmin,4px) solid #f3b82f;border-radius:50%;left:7%;top:18%;box-shadow:0 0 8px rgba(255,196,66,.45)}
.key-glyph b{position:absolute;height:15%;width:55%;background:#f3b82f;border-radius:999px;left:36%;top:45%;transform:rotate(28deg);transform-origin:left center;box-shadow:0 0 6px rgba(255,196,66,.35)}
.key-glyph b:after{content:"";position:absolute;width:18%;height:90%;right:9%;top:45%;background:#f3b82f;border-radius:2px}
.key-collected .key-glyph{opacity:.16;transform:scale(.78)}
.lock-tile{box-shadow:inset 0 0 0 2px rgba(255,151,68,.28)}
.lock-glyph b{position:absolute;left:19%;right:19%;top:43%;bottom:10%;border-radius:18%;background:linear-gradient(145deg,#ffc857,#e99b31);box-shadow:0 2px 8px rgba(97,55,16,.25)}
.lock-glyph i{position:absolute;left:29%;right:29%;top:9%;height:48%;border:clamp(2px,.42vmin,4px) solid #d98b25;border-bottom:0;border-radius:999px 999px 0 0}
.lock-glyph b:after{content:"";position:absolute;width:16%;height:30%;left:42%;top:30%;border-radius:999px;background:rgba(90,52,14,.65)}
.lock-tile:not(.lock-locked) .lock-glyph i{transform:translateX(28%) rotate(26deg);transform-origin:right bottom;opacity:.78}
.lock-tile:not(.lock-locked){box-shadow:inset 0 0 0 2px rgba(91,209,153,.34),0 0 12px rgba(91,209,153,.16)}
.ice-tile{background:linear-gradient(145deg,rgba(214,247,255,.8),rgba(151,222,247,.52))!important;box-shadow:inset 0 0 0 2px rgba(128,216,247,.38),inset 5px 5px 12px rgba(255,255,255,.35)}
.ice-glyph:before,.ice-glyph:after,.ice-glyph i,.ice-glyph b{content:"";position:absolute;height:10%;border-radius:999px;background:rgba(255,255,255,.82);transform:rotate(-35deg)}
.ice-glyph:before{width:55%;left:2%;top:20%}.ice-glyph:after{width:36%;right:3%;bottom:20%}.ice-glyph i{width:26%;right:9%;top:8%}.ice-glyph b{width:44%;left:13%;bottom:10%}
.rail-tile{box-shadow:inset 0 0 0 2px rgba(119,130,159,.30);--rail-ink:#6f809f;--rail-highlight:rgba(255,255,255,.42)}
.rail-glyph-svg{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);z-index:2;display:block;overflow:visible;pointer-events:none;color:var(--rail-ink)}
.rail-glyph-svg path{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 0 var(--rail-highlight))}
.theme-night .rail-tile,.theme-dark .rail-tile,[data-theme="dark"] .rail-tile{--rail-ink:#9caed0;--rail-highlight:rgba(255,255,255,.18);box-shadow:inset 0 0 0 2px rgba(156,174,208,.30)}
.rail-tile.visited .rail-glyph-svg{opacity:.78}
.flowling.ice-glide{animation:flowIceGlide 280ms cubic-bezier(.2,.9,.2,1)}
@keyframes flowIceGlide{0%{transform:scaleX(1.05) scaleY(.92)}45%{transform:scaleX(.94) scaleY(1.08)}100%{transform:none}}

/* Stage 6C campaign completion and 20-chapter counter */
.chapter-total-counter { min-width:58px; height:42px; padding:0 10px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.34); font-weight:900; font-variant-numeric:tabular-nums; }
.campaign-complete { margin:10px 0 2px; padding:14px 16px; border-radius:20px; text-align:center; background:color-mix(in srgb, var(--theme-path) 15%, rgba(255,255,255,.34)); }
.campaign-complete-title { margin:0 0 6px; font-size:clamp(20px,5vw,26px); }
.campaign-complete-body { margin:0; color:var(--muted); font-weight:800; }
@media (orientation:landscape) and (max-height:520px) and (min-width:800px) { .screen-game { width:100vw; max-width:none; } }


/* Stage 6D final campaign celebration. Art lives in one replaceable slot. */
.final-celebration-modal { z-index:60; }
.final-celebration-modal .modal-shell { width:min(94vw,560px); max-height:min(92vh,760px); overflow:auto; overscroll-behavior:contain; padding:clamp(16px,4vw,26px); border-radius:30px; }
.final-celebration-content { display:grid; gap:14px; text-align:center; justify-items:center; }
.final-celebration-art-slot { position:relative; width:min(100%,460px); aspect-ratio:16/8.2; min-height:150px; overflow:hidden; border-radius:24px; background:radial-gradient(circle at 50% 64%,rgba(255,255,255,.92),rgba(255,244,196,.62) 38%,rgba(210,236,255,.36) 72%,transparent 73%),linear-gradient(145deg,rgba(255,255,255,.66),rgba(235,226,255,.48)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6); }
.final-celebration-squad { position:absolute; inset:8% 5% 2%; display:flex; align-items:end; justify-content:center; gap:0; }
.final-celebration-character { width:36%; height:90%; object-fit:contain; filter:drop-shadow(0 9px 9px rgba(52,70,88,.18)); pointer-events:none; }
.final-celebration-character.hero { z-index:3; width:42%; transform:translateY(2%); }
.final-celebration-character.side { z-index:2; width:32%; height:74%; }
.final-celebration-character.left { transform:translate(18%,8%) rotate(-5deg); }
.final-celebration-character.right { transform:translate(-18%,8%) rotate(5deg); }
.final-celebration-confetti { position:absolute; inset:0; pointer-events:none; }
.confetti-piece { position:absolute; width:8px; height:16px; border-radius:999px; left:calc(6% + (var(--confetti-i) * 6.7%)); top:calc(4% + ((var(--confetti-i) % 4) * 8%)); transform:rotate(calc((var(--confetti-i) * 31deg) - 70deg)); background:var(--gold); box-shadow:0 0 8px rgba(255,255,255,.55); }
.confetti-2,.confetti-6{background:#ec7d9d}.confetti-3,.confetti-7{background:#75cbe8}.confetti-4{background:#7cd6ab}.confetti-5{background:#a88be8}
.final-celebration-copy { display:grid; gap:8px; max-width:480px; }
.final-celebration-title { margin:0; font-size:clamp(25px,6vw,36px); line-height:1.08; }
.final-celebration-body { margin:0; color:var(--muted); font-weight:760; line-height:1.45; font-size:clamp(14px,3.6vw,17px); }
.final-celebration-actions { width:100%; display:grid; gap:9px; }
.final-celebration-primary { min-height:56px; box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-path) 30%,transparent),0 12px 28px color-mix(in srgb,var(--theme-path) 26%,transparent),6px 7px 16px var(--shadow-dark),-5px -5px 14px var(--shadow-light); }
.final-celebration-secondary { min-height:44px; }
@media (max-width:430px){ .final-celebration-modal .modal-shell{width:min(95vw,520px);padding:14px;border-radius:24px}.final-celebration-content{gap:11px}.final-celebration-art-slot{min-height:132px;border-radius:20px}.final-celebration-primary{min-height:52px;padding:10px 13px}.final-celebration-title{font-size:clamp(23px,7vw,31px)} }
@media (orientation:landscape) and (max-height:520px){ .final-celebration-modal .modal-shell{width:min(88vw,760px);max-height:94vh;padding:12px 16px}.final-celebration-content{grid-template-columns:minmax(190px,.9fr) minmax(270px,1.1fr);grid-template-areas:"art copy" "art actions";align-items:center;gap:8px 16px}.final-celebration-art-slot{grid-area:art;width:100%;min-height:126px;aspect-ratio:16/9}.final-celebration-copy{grid-area:copy}.final-celebration-actions{grid-area:actions}.final-celebration-title{font-size:clamp(21px,4.4vh,30px)}.final-celebration-body{font-size:13px;line-height:1.3}.final-celebration-primary{min-height:42px}.final-celebration-secondary{min-height:38px} }


/* Stage 6D R1 — public Draft interaction + short-height hardening */
html, body, #app, #screen-root, #app *, #screen-root * {
  user-select:none !important;
  -webkit-user-select:none !important;
  -moz-user-select:none !important;
  -ms-user-select:none !important;
  -webkit-touch-callout:none !important;
}
#app img, #screen-root img { -webkit-user-drag:none !important; user-drag:none !important; }
.pause-toggles { grid-template-columns:1fr !important; width:100%; }
.pause-sound-btn { width:100%; }
.home-scroll { display:contents; }
.daily-scroll { min-height:0; width:100%; display:grid; place-items:center; overflow:hidden; }
@media (max-height:667px) {
  .screen-home {
    display:block !important;
    padding:0 !important;
  }
  .screen-home > .home-top {
    position:absolute !important;
    top:calc(7px + var(--safe-top)) !important;
    left:calc(14px + var(--safe-left)) !important;
    right:calc(14px + var(--safe-right)) !important;
    bottom:auto !important;
    width:auto !important; min-height:44px; z-index:5;
  }
  .home-scroll {
    position:absolute;
    top:calc(57px + var(--safe-top));
    bottom:calc(6px + var(--safe-bottom));
    left:calc(14px + var(--safe-left));
    right:calc(14px + var(--safe-right));
    min-height:0; width:auto; max-width:none;
    display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:max-content; justify-items:center; align-content:start;
    gap:8px; padding:4px 6px calc(30px + var(--safe-bottom));
    overflow-y:auto; overflow-x:hidden; overflow-anchor:none; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y;
  }
  .home-scroll > .home-primary, .home-scroll > .home-actions, .home-scroll > .home-review-mystery, .home-scroll > .home-gift, .home-scroll > .home-footer {
    grid-column:1 !important; grid-row:auto !important; width:min(100%,520px); max-width:520px; align-self:auto !important;
  }
  .home-scroll .home-primary { display:grid; gap:10px; }
  .home-scroll .home-logo-localized { width:min(86vw,420px); max-height:150px; }
  .home-scroll .home-footer { display:grid !important; }
  .screen-daily { display:grid !important; grid-template-rows:auto minmax(0,1fr) !important; min-height:0; }
  .daily-scroll {
    min-height:0; width:100%; overflow-y:auto; overflow-x:hidden; overflow-anchor:none; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y;
    display:block; padding:4px 4px calc(14px + var(--safe-bottom));
  }
  .daily-scroll .daily-card { margin:0 auto; max-height:none !important; overflow:visible !important; }
}
@media (min-height:668px) {
  .home-scroll { display:contents; }
  .daily-scroll { overflow:hidden; }
}

/* =========================================================
   STAGE 6D R8 — MOBILE MENU SCROLL OWNERSHIP
   Home and Endless own their vertical scrolling. The document
   remains fixed/overflow-hidden for Yandex Games requirement 1.10.2.
   ========================================================= */

/* Endless always has an explicit content viewport; it only scrolls
   when its content is taller than the available game screen. */
.screen-endless {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:12px;
  min-height:0;
}
.endless-scroll {
  width:100%;
  min-width:0;
  min-height:0;
  align-self:stretch;
  justify-self:stretch;
  overflow-y:auto;
  overflow-x:hidden;
  overflow-anchor:none;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding:4px 2px calc(18px + var(--safe-bottom));
}
.endless-scroll .endless-grid { margin-inline:auto; }
.endless-card .btn { max-width:100%; box-sizing:border-box; }

@media (max-width:619px) and (orientation:portrait) {
  /* Home: keep the common top bar outside the scrolling content.
     A tall phone simply has no scroll range; a short phone scrolls
     this container, never the browser document. */
  .screen-home {
    display:block !important;
    min-height:0;
    padding:0 !important;
  }
  .screen-home > .home-top {
    position:absolute !important;
    top:calc(7px + var(--safe-top)) !important;
    left:calc(14px + var(--safe-left)) !important;
    right:calc(14px + var(--safe-right)) !important;
    bottom:auto !important;
    width:auto !important;
    min-height:44px;
    z-index:5;
  }
  .home-scroll {
    position:absolute;
    top:calc(59px + var(--safe-top));
    bottom:0;
    left:0;
    right:0;
    width:auto;
    min-width:0;
    min-height:0;
    max-width:none;
    display:grid !important;
    grid-template-columns:minmax(0,1fr);
    grid-auto-rows:max-content;
    justify-items:center;
    align-content:start;
    gap:10px;
    padding:6px calc(18px + var(--safe-right)) calc(28px + var(--safe-bottom)) calc(18px + var(--safe-left));
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overflow-anchor:none;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y !important;
    scroll-padding-bottom:calc(28px + var(--safe-bottom));
  }
  .home-scroll > .home-primary,
  .home-scroll > .home-actions,
  .home-scroll > .home-review-mystery,
  .home-scroll > .home-gift,
  .home-scroll > .home-footer {
    grid-column:1 !important;
    grid-row:auto !important;
    width:min(100%,520px);
    max-width:520px;
    min-width:0;
    align-self:auto !important;
  }
  /* R8 prefers reachability over the legacy short-height compression. */
  .home-scroll .home-primary { display:grid; gap:12px; }
  .home-scroll .home-hero { gap:4px; padding-inline:4px; }
  .home-scroll .home-logo-localized { width:min(88vw,420px); max-height:160px; }
  .home-scroll .home-subtitle,
  .home-scroll .home-subtitle-lines { font-size:15px; line-height:1.16; gap:1px; }
  .home-scroll .home-play-btn { min-height:46px; padding:8px 12px; }
  .home-scroll .home-actions { gap:8px; }
  .home-scroll .home-actions .btn { min-height:42px; padding:8px 10px; font-size:15px; }
  .home-scroll .home-review-mystery {
    grid-template-columns:minmax(0,1fr) 76px;
    grid-template-areas:"copy pair" "cta cta";
    gap:7px 8px;
    padding:9px 10px;
  }
  .home-scroll .home-review-sub { display:block; }
  .home-scroll .home-review-cta { min-height:42px; }
  .home-scroll .home-gift { min-height:54px; padding:7px 8px 7px 12px; gap:8px; }
  .home-scroll .home-gift-btn { min-height:40px; height:auto; padding:7px 9px; }
  .home-scroll .home-footer { display:grid !important; gap:8px; }
  .home-scroll .home-footer .btn { min-height:40px; }

  /* Endless: simple vertical list, never a carousel. */
  .screen-endless { gap:8px; }
  .screen-endless .screen-header h1 {
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.06;
    font-size:clamp(18px,5.5vw,24px);
  }
  .endless-scroll {
    padding:6px calc(4px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(4px + var(--safe-left));
  }
  .endless-grid {
    width:min(100%,420px);
    max-width:420px;
    grid-template-columns:minmax(0,1fr) !important;
    grid-auto-flow:row;
    gap:18px;
    align-content:start;
    align-self:start;
    padding:2px 0 4px;
  }
  .endless-card {
    width:100%;
    min-width:0;
    min-height:0;
    padding:18px 16px;
    gap:12px;
    overflow:visible;
  }
  .endless-card strong {
    max-width:100%;
    font-size:21px;
    line-height:1.15;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
  }
  .endless-card span {
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
  }
  .endless-card .btn {
    width:100%;
    min-width:0;
    margin:0;
  }
}

/* Desktop / roomy screens preserve the accepted R7 composition. */
@media (min-width:620px) {
  .endless-scroll { display:grid; place-items:center; }
}

/* R8 mobile Home width hardening: no hidden horizontal overflow and the
   Rewarded gift copy/CTA remain fully readable at 320px. */
@media (max-width:619px) and (orientation:portrait) {
  .home-scroll .home-review-mystery .mystery-pair.compact {
    width:76px;
    max-width:76px;
    gap:4px;
  }
  .home-scroll .home-review-mystery .mystery-pair.compact .mystery-visual {
    width:36px;
    height:38px;
  }
  .home-scroll .home-review-mystery .mystery-pair.compact .mystery-squishy-visual img {
    width:42px;
    height:42px;
  }
  .home-scroll .home-review-mystery .mystery-pair.compact .mystery-question { font-size:21px; }
  .home-scroll .home-gift {
    grid-template-columns:minmax(0,1fr);
    justify-items:stretch;
    text-align:center;
  }
  .home-scroll .home-gift-copy { text-align:center; justify-items:center; }
  .home-scroll .home-gift-btn { width:100%; min-width:0; }
}