:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text);
  --page: #151026;
  --text: #fbf6ff;
  --muted: #c9b9dd;
  --accent: #e4c6ff;
  --gold: #ffda98;
  --mint: #a6f1d4;
  --rose: #ffb0c5;
  --rim: #6d5087;
  --line: #4d3a65;
  --panel: #271c39;
  --well: #1a1328;
  --raised: #3d2c52;
  --active: #5b3977;
  --cell: #342748;
  --cell-deep: #281d39;
  --mark: #b17aef;
  --mark-light: #f2d6ff;
  --mark-ink: #361756;
  --scene: radial-gradient(ellipse 530px 390px at 67% 0%, #3b225c, transparent), radial-gradient(ellipse 390px 430px at 18% 68%, #271c41, transparent);
  --banner: radial-gradient(ellipse at 84% 15%, #7948aa, transparent 63%), linear-gradient(105deg, #30204b, #442860);
  --hint-glow: #785344;
  --shuffle-glow: #365c61;
  --hammer-glow: #714063;
  --shadow: #0e091a60;
  --piece-shadow: #070818a0;
}
:root[data-theme="coast"] {
  color-scheme: light;
  --page: #fcf4e5;
  --text: #183e40;
  --muted: #3e5e5e;
  --accent: #176d74;
  --gold: #8b480c;
  --mint: #176450;
  --rose: #9b355f;
  --rim: #92b2a6;
  --line: #c3cdb8;
  --panel: #fff9eb;
  --well: #ddd5b8;
  --raised: #f0ead4;
  --active: #c4ede0;
  --cell: #fff8de;
  --cell-deep: #ede3c7;
  --mark: #49b8ac;
  --mark-light: #d4f5da;
  --mark-ink: #165b5c;
  --scene: radial-gradient(ellipse 660px 410px at 69% 0%, #b7e9df, transparent), radial-gradient(ellipse 530px 450px at 18% 85%, #ffe3ab, transparent);
  --banner: linear-gradient(110deg, #fff0c8 14%, #d9f3e1 58%, #8fded8);
  --hint-glow: #ffe0a0;
  --shuffle-glow: #b4eee0;
  --hammer-glow: #ffd5cb;
  --shadow: #70552f2b;
  --piece-shadow: #825b5740;
}
:root[data-theme="orbit"] {
  --page: #08162e;
  --text: #f0f8ff;
  --muted: #b7c8e9;
  --accent: #a5e8ff;
  --gold: #ffd9a4;
  --mint: #b7f3bc;
  --rose: #ffafd8;
  --rim: #4c6b9d;
  --line: #304a75;
  --panel: #13233e;
  --well: #0a142b;
  --raised: #1e3559;
  --active: #2d4a75;
  --cell: #213758;
  --cell-deep: #13243f;
  --mark: #6a9af1;
  --mark-light: #d2f4ff;
  --mark-ink: #132e61;
  --scene: radial-gradient(ellipse 630px 410px at 74% 0%, #273a74, transparent), radial-gradient(ellipse 420px 440px at 16% 80%, #1b2c5e, transparent);
  --banner: radial-gradient(ellipse at 77% 13%, #454893, transparent 64%), linear-gradient(110deg, #102449, #152d55);
  --hint-glow: #67574b;
  --shuffle-glow: #2d5b65;
  --hammer-glow: #614976;
  --shadow: #03091680;
  --piece-shadow: #040b20b0;
}
:root[data-theme="newyear"] {
  --page: #09242e;
  --text: #f1fdff;
  --muted: #b7dce5;
  --accent: #b2f4fa;
  --gold: #ffde9a;
  --mint: #a5efcc;
  --rose: #ffb8d1;
  --rim: #527d8e;
  --line: #365c6c;
  --panel: #142f3e;
  --well: #0c2430;
  --raised: #224654;
  --active: #315e6e;
  --cell: #244654;
  --cell-deep: #172f40;
  --mark: #73c4d5;
  --mark-light: #d4f7ff;
  --mark-ink: #1b4557;
  --scene: radial-gradient(ellipse 580px 370px at 68% 0%, #23616c, transparent), radial-gradient(ellipse 460px 430px at 17% 80%, #1c404d, transparent);
  --banner: radial-gradient(ellipse at 79% 15%, #386981, transparent 67%), linear-gradient(108deg, #142f44, #194658);
  --hint-glow: #635545;
  --shuffle-glow: #275c59;
  --hammer-glow: #63485f;
}
:root[data-theme="christmas"] {
  --page: #321822;
  --text: #fff5e8;
  --muted: #e4c9bf;
  --accent: #ffe0ae;
  --gold: #ffda94;
  --mint: #bfe5b6;
  --rose: #ffc1ce;
  --rim: #a07164;
  --line: #714d49;
  --panel: #42232e;
  --well: #2d1825;
  --raised: #623c41;
  --active: #784c48;
  --cell: #593340;
  --cell-deep: #412633;
  --mark: #dc916b;
  --mark-light: #fff0c9;
  --mark-ink: #5b3037;
  --scene: radial-gradient(ellipse 580px 370px at 68% 0%, #764349, transparent), radial-gradient(ellipse 460px 430px at 17% 80%, #50322f, transparent);
  --banner: radial-gradient(ellipse at 83% 34%, #a26454, transparent 66%), linear-gradient(105deg, #4e2b3a, #713f41);
  --hint-glow: #7e5c43;
  --shuffle-glow: #435947;
  --hammer-glow: #763d55;
}
:root[data-theme="halloween"] {
  --page: #23152c;
  --text: #fff4ef;
  --muted: #d7bfd7;
  --accent: #efd0ff;
  --gold: #ffc98e;
  --mint: #cceba9;
  --rose: #ffb3c4;
  --rim: #896183;
  --line: #5f4265;
  --panel: #31203d;
  --well: #21152c;
  --raised: #4b3155;
  --active: #663f66;
  --cell: #412c4b;
  --cell-deep: #2d203b;
  --mark: #f1a372;
  --mark-light: #ffe0ad;
  --mark-ink: #613647;
  --scene: radial-gradient(ellipse 580px 370px at 68% 0%, #624058, transparent), radial-gradient(ellipse 460px 430px at 17% 80%, #3f254e, transparent);
  --banner: radial-gradient(ellipse at 82% 21%, #82596a, transparent 64%), linear-gradient(105deg, #382445, #532e4e);
  --hint-glow: #754b40;
  --shuffle-glow: #465a49;
  --hammer-glow: #714256;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--scene);
}
.shell {
  max-width: 500px;
  min-height: 100dvh;
  margin: auto;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
}
.top, .brand, .tabs, .actions, footer { display: flex; align-items: center; }
.top, footer { justify-content: space-between; gap: 12px; }
.brand { gap: 10px; font-weight: 850; font-size: 21px; letter-spacing: -.05em; line-height: 1; }
.brand-tag { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .025em; }
.mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--mark-light);
  border-radius: 12px;
  color: var(--mark-ink);
  background: linear-gradient(145deg, var(--mark-light), var(--mark));
  box-shadow: 0 3px 0 var(--rim), 0 6px 20px var(--shadow);
}
.badge { color: var(--muted); font-weight: 750; font-size: 9px; letter-spacing: .10em; }
.top-tools { display: flex; align-items: center; gap: 8px; }
.theme-picker { position: relative; z-index: 5; }
.theme-picker summary { display: flex; gap: 5px; align-items: center; min-height: 35px; padding: 0 8px; cursor: pointer; list-style: none; border: 1px solid var(--rim); border-radius: 11px; background: var(--panel); font-size: 12px; font-weight: 800; }
.theme-picker summary::-webkit-details-marker { display: none; }
.theme-swatch { width: 11px; height: 11px; border: 1px solid var(--mark-light); border-radius: 50%; background: var(--mark); }
.theme-menu { position: absolute; top: calc(100% + 7px); right: 0; width: min(278px, calc(100vw - 28px)); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; border: 1px solid var(--rim); border-radius: 15px; background: var(--panel); box-shadow: 0 13px 32px var(--shadow); }
.theme-menu-title { margin: 0 0 7px; padding: 0 2px; font-size: 11px; font-weight: 800; color: var(--muted); }
.theme-options + .theme-menu-title { margin-top: 11px; }
.theme-options { display: grid; gap: 5px; }
.theme-option { display: grid; grid-template-columns: 38px minmax(0, 1fr) 14px; gap: 8px; align-items: center; padding: 5px; border: 1px solid var(--line); border-radius: 10px; text-align: left; background: var(--raised); color: var(--text); }
.theme-option[aria-pressed="true"] { border-color: var(--mark); }
.theme-option strong, .theme-option small { display: block; }
.theme-option strong { font-size: 12px; }
.theme-option small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.theme-preview { display: grid; place-items: center; aspect-ratio: 1; border-radius: 7px; background: linear-gradient(145deg, #624287, #28183d); }
.theme-preview svg { width: 30px; height: 30px; }
[data-theme-option="coast"] .theme-preview { background: linear-gradient(145deg, #fff2cd, #96dccc); }
[data-theme-option="orbit"] .theme-preview { background: linear-gradient(145deg, #34568f, #101e3e); }
[data-theme-option="newyear"] .theme-preview { background: linear-gradient(145deg, #426e83, #173447); }
[data-theme-option="christmas"] .theme-preview { background: linear-gradient(145deg, #885345, #4a2936); }
[data-theme-option="halloween"] .theme-preview { background: linear-gradient(145deg, #6d456a, #33223f); }
.theme-check { visibility: hidden; color: var(--mint); font-weight: 850; }
.theme-option[aria-pressed="true"] .theme-check { visibility: visible; }
.piece-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.tabs { margin-top: 13px; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--well); }
button { font: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { cursor: default; opacity: .5; }
.tabs button { flex: 1; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); min-height: 36px; padding: 0 3px; font-size: clamp(10px, 3vw, 12px); font-weight: 750; white-space: nowrap; }
.tabs button span { margin-right: 2px; color: var(--accent); }
.tabs [aria-pressed=true] { background: linear-gradient(180deg, var(--active), var(--raised)); border-color: var(--rim); color: var(--text); }
.screen { padding-top: 14px; }
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 12px 14px;
  min-height: 92px;
  border: 1px solid var(--rim);
  border-radius: 18px;
  background: var(--banner);
  box-shadow: inset 0 1px #ffffff19, 0 7px 18px var(--shadow);
}
.hero-art { position: absolute; right: 0; bottom: 0; width: min(50%, 216px); z-index: -1; }
[data-theme="coast"] .hero-art { width: min(53%, 240px); }
.eyebrow { margin: 0 0 5px; color: var(--gold); font-weight: 850; font-size: 10px; letter-spacing: .13em; }
h1 { margin: 0; font-size: clamp(29px, 8vw, 41px); line-height: 1.02; letter-spacing: -.055em; }
.intro { margin: 6px 0 14px; color: var(--muted); font-size: 14px; }
.hero .intro { margin-bottom: 0; font-size: 12px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 8px 0; }
.stat { padding: 6px 9px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.stat span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; }
.stat strong { font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-score strong { color: var(--accent); }
.stat-moves strong { color: var(--mint); }
.stat-best strong { color: var(--gold); }
.field { padding: 7px; border: 1px solid var(--rim); border-radius: 18px; background: linear-gradient(160deg, var(--raised), var(--panel)); box-shadow: 0 9px 24px var(--shadow), inset 0 1px #ffffff12; }
.goal { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; padding: 2px 5px 8px; font-size: 11px; font-weight: 700; color: var(--muted); }
.goal strong { color: var(--gold); font-variant-numeric: tabular-nums; }
progress { appearance: none; grid-column: 1 / -1; width: 100%; height: 5px; border: 0; border-radius: 99px; overflow: hidden; background: var(--well); }
progress::-webkit-progress-bar { background: var(--well); }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--mark), var(--gold)); border-radius: 99px; transition: width .25s; }
progress::-moz-progress-bar { background: linear-gradient(90deg, var(--mark), var(--gold)); border-radius: 99px; }
.board {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(3px, 1vw, 5px);
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--well);
  touch-action: none;
  user-select: none;
}
.tile { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 23%; background: linear-gradient(155deg, var(--cell), var(--cell-deep)); box-shadow: inset 0 -2px var(--shadow); transition: background .12s, opacity .12s, transform .12s; }
.tile svg { width: 92%; height: 92%; overflow: visible; filter: drop-shadow(0 2px 1px var(--piece-shadow)); pointer-events: none; }
.tile.selected { background: var(--active); outline: 2px solid var(--accent); z-index: 1; }
.tile.hinted { background: var(--hint-glow); outline: 2px dashed var(--gold); z-index: 1; }
.tile.pop { opacity: .18; transform: scale(.65); }
.board.aiming { border-color: var(--rose); box-shadow: 0 0 0 2px var(--hammer-glow); }
.aiming .tile { cursor: crosshair; }
.shuffling .tile { opacity: .38; transform: rotate(10deg) scale(.84); }
.tools-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; margin: 13px 0 6px; }
.tools-heading h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.tools-heading > span { color: var(--muted); font-size: 10px; }
.boosters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.booster {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 62px;
  padding: 4px 2px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: radial-gradient(ellipse at 50% 0%, var(--glow), transparent 86%), var(--panel);
  color: var(--text);
  font-size: clamp(9px, 2.9vw, 12px);
  font-weight: 750;
  box-shadow: inset 0 1px #ffffff17, 0 3px 0 var(--shadow);
}
.booster svg { width: 22px; height: 22px; fill: none; stroke: var(--tool-color); stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.booster small { position: absolute; top: 4px; right: 4px; min-width: 17px; padding: 1px 3px; border-radius: 99px; background: var(--well); color: var(--tool-color); font-size: 10px; }
.booster.hint { --tool-color: var(--gold); --glow: var(--hint-glow); }
.booster.shuffle { --tool-color: var(--mint); --glow: var(--shuffle-glow); }
.booster.hammer { --tool-color: var(--rose); --glow: var(--hammer-glow); }
.booster[aria-pressed=true] { border-color: var(--rose); box-shadow: inset 0 0 0 1px var(--rose); }
.notice { min-height: 29px; margin: 9px 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.actions { gap: 8px; }
.actions > button { flex: 1; }
.secondary { min-height: 38px; padding: 7px 11px; border-radius: 11px; font-size: 12px; font-weight: 800; color: var(--text); border: 1px solid var(--rim); background: var(--raised); }
.lab-link { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; margin-top: 9px; border: 1px solid var(--line); border-radius: 13px; text-align: left; background: linear-gradient(110deg, var(--raised), var(--panel)); color: var(--text); }
.lab-icon { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: var(--active); color: var(--accent); }
.lab-link strong, .lab-link small { display: block; }
.lab-link strong { font-size: 13px; }
.lab-link small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.lab-arrow { color: var(--accent); }
footer { margin-top: 13px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.puzzle, .ranking li { background: linear-gradient(145deg, var(--raised), var(--panel)); border: 1px solid var(--line); border-radius: 16px; }
.puzzle { padding: 13px; }
.pattern, .answers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; }
.pattern { margin-bottom: 13px; }
.pattern span { display: grid; place-items: center; padding: 12px 2px; border-radius: 9px; background: var(--raised); border: 1px solid var(--line); font-weight: 850; font-size: 19px; }
.pattern span:last-child { color: var(--gold); background: var(--active); }
.answers .correct { border-color: var(--mint); color: var(--mint); opacity: 1; }
.ranking { list-style: none; padding: 0; display: grid; gap: 7px; }
.ranking li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 12px; }
.rank-number { color: var(--gold); font-weight: 800; }
.rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 720px) {
  .shell { max-width: 820px; padding-inline: 20px; }
  #play { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 38%); column-gap: 12px; align-items: start; }
  .hero, .stats { grid-column: 1 / -1; }
  .control-deck { padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
  .tools-heading { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .tile, progress::-webkit-progress-value { transition: none; } }

:root[data-theme="aurora"] {
  --page: #071d26;
  --text: #edfff9;
  --muted: #b5dcd7;
  --accent: #a6ffdf;
  --gold: #f2d1ff;
  --mint: #a0ffcb;
  --rim: #4e8c88;
  --line: #34615f;
  --panel: #11343b;
  --well: #0a222b;
  --raised: #21464e;
  --active: #2c6263;
  --cell: #224752;
  --cell-deep: #132d39;
  --mark: #76e2c0;
  --mark-light: #e6ffee;
  --mark-ink: #144e4a;
  --scene: radial-gradient(ellipse 660px 400px at 68% 0%, #225e55, transparent), radial-gradient(ellipse 470px 390px at 15% 85%, #2d2e61, transparent);
  --banner: radial-gradient(ellipse at 78% 22%, #40776f, transparent 67%), linear-gradient(110deg, #15313e, #31345d);
}
:root[data-theme="gold"] {
  --page: #241719;
  --text: #fff5df;
  --muted: #dec7ad;
  --accent: #ffdf97;
  --gold: #ffda8a;
  --mint: #c4e5b1;
  --rim: #9b7555;
  --line: #6a4d40;
  --panel: #38262b;
  --well: #251a23;
  --raised: #523940;
  --active: #6e4b45;
  --cell: #49333b;
  --cell-deep: #322530;
  --mark: #dbaa5e;
  --mark-light: #fff0bb;
  --mark-ink: #5a3b29;
  --scene: radial-gradient(ellipse 660px 400px at 68% 0%, #66483a, transparent), radial-gradient(ellipse 470px 390px at 15% 85%, #463046, transparent);
  --banner: radial-gradient(ellipse at 78% 22%, #946443, transparent 67%), linear-gradient(110deg, #402d3d, #624140);
}
[data-theme="aurora"] .hero-art path:nth-child(-n+2) {
  transform-origin: center;
  animation: aurora-drift 7s ease-in-out infinite alternate;
}
[data-theme="aurora"] .hero-art path:nth-child(2) { animation-delay: -3s; }
@keyframes aurora-drift { to { transform: translateY(5px) skewY(-3deg); opacity: .35; } }
[data-theme="gold"] .hero-art circle { animation: palace-moon 4s ease-in-out infinite alternate; }
@keyframes palace-moon { to { opacity: .83; } }
[data-theme-option="aurora"] .theme-preview { background: linear-gradient(145deg, #398373, #24214e); }
[data-theme-option="gold"] .theme-preview { background: linear-gradient(145deg, #a27448, #412c3f); }
#premium-options { margin-top: 7px; }
.theme-shop-link { width: 100%; margin-top: 8px; }

.board-stage { position: relative; }
.effect-layer { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 2; }
.board-stage .effect-layer { border-radius: 13px; }
.effect-burst { position: absolute; inset: 0; }
.effect-particle {
  position: absolute;
  font-size: var(--size);
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 0 7px var(--ink), 0 1px 2px #1117;
  opacity: 0;
  animation: particle-flight var(--life) var(--delay) cubic-bezier(.11,.58,.24,1) forwards;
}
[data-effect="newyear"] .effect-particle { text-shadow: 0 0 4px #fff, 0 0 11px var(--ink), 0 0 17px var(--ink); }
[data-effect="christmas"] .effect-particle { animation-timing-function: cubic-bezier(.21,.46,.55,1); }
[data-effect="coast"] .effect-particle { text-shadow: 0 1px 1px #146472, 0 0 4px var(--ink); }
[data-deluxe="true"] .effect-particle { text-shadow: 0 0 4px #fff, 0 0 13px var(--ink); }
.effect-wave { position: absolute; width: 64px; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 0 13px var(--ink), inset 0 0 13px var(--ink); animation: effect-wave .62s ease-out forwards; }
[data-deluxe="true"] .effect-wave { border: 4px double var(--ink); width: 92px; }
.effect-combo {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid #fff0bd;
  border-radius: 100px;
  background: #241b35eb;
  color: #fff0bd;
  font-size: clamp(13px, 4vw, 19px);
  font-weight: 950;
  letter-spacing: .08em;
  box-shadow: 0 3px 17px #0a051c9c;
  animation: combo-pop .82s ease-out both;
}
@keyframes particle-flight {
  0% { transform: translate(-50%, -50%) scale(.45); opacity: 0; }
  12% { opacity: 1; }
  52% { opacity: .94; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(66deg) scale(.45); opacity: 0; }
}
@keyframes effect-wave {
  from { transform: translate(-50%, -50%) scale(.25); opacity: .9; }
  to { transform: translate(-50%, -50%) scale(3.35); opacity: 0; }
}
@keyframes combo-pop {
  0% { transform: translate(-50%, -50%) scale(.7); opacity: 0; }
  16% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  32%, 70% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -68%); opacity: 0; }
}

.shop-hero { position: relative; isolation: isolate; overflow: hidden; padding: 16px; border: 1px solid var(--rim); border-radius: 18px; background: var(--banner); }
.shop-hero .intro { max-width: 86%; margin-bottom: 0; }
.shop-emblem { position: absolute; z-index: -1; right: 10px; top: 1px; font-size: 108px; line-height: 1; color: var(--gold); opacity: .23; }
.shop-status { min-height: 18px; }
.shop-status { position: sticky; top: 0; z-index: 3; padding: 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.shop-items { display: grid; gap: 11px; }
.shop-card { min-width: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.shop-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 88px;
  padding: 12px 7px;
  background: radial-gradient(ellipse at 50% 0%, #91669c, transparent 72%), linear-gradient(120deg, #302248, #233554);
}
.shop-preview[data-preview="aurora"] { background: radial-gradient(ellipse at 63% -18%, #5dba9d, transparent 73%), linear-gradient(120deg, #123840, #443466); }
.shop-preview[data-preview="gold"] { background: radial-gradient(ellipse at 63% -18%, #a87649, transparent 73%), linear-gradient(120deg, #342339, #603b42); }
.shop-samples { display: flex; justify-content: center; align-items: center; gap: 4px; }
.shop-samples svg { width: clamp(28px, 9vw, 44px); height: auto; filter: drop-shadow(0 4px 5px #1710228a); }
.shop-copy { padding: 11px; }
.shop-meta { display: flex; justify-content: space-between; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.shop-price { white-space: nowrap; color: var(--gold); font-size: 13px; }
.shop-copy h2 { margin: 4px 0 0; font-size: 18px; line-height: 1.15; }
.shop-copy p { min-height: 2.7em; margin: 5px 0 8px; font-size: 12px; line-height: 1.35; color: var(--muted); }
.shop-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.shop-actions button { flex: 1 1 auto; }
.shop-buy { border-color: var(--mark); }
.shop-footer .secondary { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; }
@media (min-width: 720px) {
  .shop-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .tabs button span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .effect-combo, [data-theme="aurora"] .hero-art path:nth-child(-n+2), [data-theme="gold"] .hero-art circle { animation: none; }
}

/* Keep the complete game inside Telegram's visible viewport. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.shell {
  display: flex;
  flex-direction: column;
  height: var(--tg-viewport-stable-height, 100dvh);
  min-height: 0;
  padding: max(8px, env(safe-area-inset-top)) 10px max(6px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.top, .tabs, footer { flex: none; }
.top { min-height: 32px; }
.mark { width: 30px; height: 30px; border-radius: 10px; }
.brand { font-size: 19px; gap: 8px; }
.brand-tag { font-size: 9px; margin-top: 3px; }
.theme-picker summary { min-height: 30px; }
.tabs { margin-top: 7px; padding: 3px; }
.tabs button { min-height: 32px; }
.screen { flex: 1; min-height: 0; padding-top: 7px; overflow-y: auto; overscroll-behavior: contain; }
#play { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 6px; overflow: hidden; align-items: stretch; }
#play .hero { min-height: 0; padding: 6px 11px; border-radius: 13px; }
#play .hero .eyebrow { display: none; }
#play h1 { font-size: 26px; }
#play .hero .intro { margin-top: 3px; font-size: 10px; }
#play .stats { grid-column: auto; margin: 0; gap: 6px; }
#play .stat { padding: 4px 8px; }
#play .stat strong { font-size: 20px; }
#play .field { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 5px; border-radius: 14px; }
#play .goal { flex: none; padding: 0 4px 5px; font-size: 10px; gap: 3px 6px; }
#play .board-stage { flex: 1; min-width: 0; min-height: 0; width: 100%; display: grid; place-items: center; }
#play .board { width: var(--board-edge, 100%); height: var(--board-edge, auto); aspect-ratio: 1; grid-template-rows: repeat(7, minmax(0, 1fr)); padding: 4px; gap: clamp(2px, .7vw, 4px); }
#play .tile { aspect-ratio: auto; min-height: 0; }
.control-deck { min-width: 0; }
.tools-heading { margin: 0 0 4px; }
.tools-heading h2 { font-size: 11px; }
.tools-heading > span { font-size: 9px; }
.booster { min-height: 43px; gap: 1px; font-size: 10px; border-radius: 10px; }
.booster svg { width: 17px; height: 17px; }
.booster small { top: 2px; right: 3px; font-size: 9px; }
#play .notice { min-height: 28px; margin: 4px 0; font-size: 11px; line-height: 1.25; }
#play .actions .secondary { min-height: 31px; padding: 5px 8px; font-size: 11px; }
#play .lab-link { display: none; }
footer { margin-top: 5px; padding-top: 4px; font-size: 9px; }
@media (min-width: 720px) {
  #play { grid-template-columns: minmax(0, 1fr) minmax(220px, 36%); grid-template-rows: auto auto minmax(0, 1fr); }
  #play .hero, #play .stats { grid-column: 1 / -1; }
  #play .control-deck { align-self: start; }
}
@media (max-height: 600px) {
  .shell { padding-top: max(5px, env(safe-area-inset-top)); padding-bottom: max(5px, env(safe-area-inset-bottom)); }
  .brand-tag, footer { display: none; }
  .top { min-height: 29px; }
  .tabs { margin-top: 5px; }
  .tabs button { min-height: 29px; }
  #play { gap: 4px; padding-top: 5px; }
  #play .hero { padding-block: 4px; }
  #play h1 { font-size: 20px; }
  #play .hero .intro { display: none; }
  #play .stat { padding-block: 3px; }
  #play .stat strong { font-size: 17px; }
  .tools-heading { display: none; }
  .booster { min-height: 40px; }
}
@media (max-height: 700px) {
  #play .hero { display: none; }
  #play { grid-template-rows: auto minmax(0, 1fr) auto; }
}
@media (min-width: 720px) and (max-height: 700px) {
  #play { grid-template-rows: auto minmax(0, 1fr); }
}
@media (orientation: landscape) and (min-width: 560px) and (max-height: 600px) {
  #play { grid-template-columns: minmax(0, 1fr) minmax(195px, 36%); grid-template-rows: auto minmax(0, 1fr); column-gap: 9px; }
  #play .hero { display: none; }
  #play .stats { grid-column: 1 / -1; }
  #play .control-deck { align-self: start; }
}

.share-game { min-width:30px; min-height:30px; padding:0; border:1px solid var(--rim); border-radius:10px; background:var(--panel); color:var(--accent); font-size:20px; }
.campaign-hero { position:relative; overflow:hidden; padding:17px; border:1px solid var(--rim); border-radius:19px; background:var(--banner); }
.campaign-hero::after { content:'✦'; position:absolute; right:-5px; top:-23px; color:var(--accent); opacity:.13; font-size:150px; pointer-events:none; }
.campaign-hero h1 { font-size:36px; }
.campaign-hero>p:not(.eyebrow) { font-size:12px; color:var(--muted); margin:7px 0 14px; }
.campaign-progress { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; }
.campaign-progress strong { color:var(--gold); font-size:19px; }
.campaign-progress span { color:var(--muted); }
.campaign-hero progress { margin-top:9px; height:6px; }
.campaign-primary { min-height:38px; padding:8px 13px; border:1px solid var(--mark-light); border-radius:12px; background:linear-gradient(160deg,var(--mark-light),var(--mark)); color:var(--mark-ink); font-size:12px; font-weight:850; box-shadow:0 3px 0 var(--shadow); }
#camp-continue { width:100%; }
.campaign-wallet { display:flex; flex-wrap:wrap; gap:5px; margin:12px 0; }
.campaign-wallet span { padding:6px 8px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--muted); font-size:10px; }
.campaign-map { display:grid; gap:10px; padding-bottom:8px; }
.campaign-chapter { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:linear-gradient(135deg,var(--panel),var(--well)); }
.campaign-chapter>summary { display:flex; align-items:center; gap:10px; min-height:66px; padding:12px; list-style:none; cursor:pointer; }
.campaign-chapter>summary::-webkit-details-marker { display:none; }
.chapter-symbol { display:grid; place-items:center; flex:none; width:39px; height:39px; border:1px solid var(--rim); border-radius:13px; background:var(--active); color:var(--gold); font-size:24px; }
.campaign-chapter small,.campaign-chapter strong { display:block; }
.campaign-chapter summary small { margin-bottom:4px; color:var(--muted); font-size:9px; letter-spacing:.1em; }
.campaign-chapter summary strong { font-size:14px; }
.chapter-count { margin-left:auto; font-size:11px; color:var(--muted); }
.level-path { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px 9px; padding:10px 14px 20px; background:radial-gradient(ellipse at 50% 10%,var(--raised),transparent 75%); }
.level-node { display:grid; place-content:center; gap:3px; justify-self:center; width:min(100%,49px); aspect-ratio:1; border:1px solid var(--rim); border-radius:17px; background:var(--raised); color:var(--text); box-shadow:0 4px 0 var(--shadow); }
.level-node strong { font-size:17px; line-height:1; }
.level-node small { color:var(--gold); font-size:8px; letter-spacing:-.03em; }
.level-node:nth-child(10n+6),.level-node:nth-child(10n+7),.level-node:nth-child(10n+8),.level-node:nth-child(10n+9),.level-node:nth-child(10n+10) { transform:translateX(6px); }
.level-node:disabled { opacity:.32; box-shadow:none; }
.level-node[data-current="true"] { outline:2px solid var(--gold); outline-offset:3px; background:var(--active); }
.level-node[data-complete="true"] { border-color:var(--mint); }
.level-node[data-boss="true"] { border-radius:50%; border-color:var(--gold); }
.campaign-fair-note { margin:9px 3px 16px; color:var(--muted); font-size:11px; line-height:1.5; }
#campaign.playing { display:flex; flex-direction:column; overflow:hidden; }
#camp-run { display:grid; grid-template-rows:auto auto auto minmax(0,1fr) auto auto; gap:6px; flex:1; height:100%; min-height:0; }
.camp-toolbar { display:flex; justify-content:space-between; align-items:center; gap:7px; }
.camp-toolbar>div { flex:1; text-align:center; }
.camp-toolbar strong,.camp-toolbar small { display:block; }
.camp-toolbar strong { font-size:14px; }
.camp-toolbar small { margin-top:2px; font-size:10px; color:var(--muted); }
.camp-toolbar .secondary { min-height:31px; padding:5px 9px; font-size:11px; }
.camp-goals { display:flex; gap:5px; }
.camp-goal { display:flex; align-items:center; justify-content:center; gap:5px; flex:1; min-width:0; padding:5px 3px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.camp-goal svg { width:19px; height:19px; flex:none; }
.camp-goal strong { font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.camp-goal-symbol { color:var(--gold); font-size:18px; }
.camp-goal[data-done="true"] { border-color:var(--mint); color:var(--mint); }
.camp-stats { display:flex; align-items:center; gap:14px; padding-inline:3px; font-size:11px; color:var(--muted); }
.camp-stats strong { font-size:17px; color:var(--text); margin-left:3px; }
#camp-ice-guide { margin-left:auto; font-size:9px; }
.camp-field { display:flex; min-height:0; min-width:0; padding:5px; border:1px solid var(--rim); border-radius:15px; background:linear-gradient(145deg,var(--raised),var(--panel)); }
.camp-board-stage { position:relative; display:grid; place-items:center; flex:1; min-height:0; min-width:0; width:100%; }
#camp-board { width:var(--board-edge,100%); height:var(--board-edge,auto); aspect-ratio:1; grid-template-rows:repeat(7,minmax(0,1fr)); padding:4px; gap:clamp(2px,.7vw,4px); }
#camp-board .tile { position:relative; aspect-ratio:auto; min-height:0; }
.tile[data-ice="1"],.tile[data-ice="2"] { border-color:#a7eaff; box-shadow:inset 0 0 0 2px #b6eaff55,inset 0 0 12px #95dbff88; }
.tile[data-ice="2"] { box-shadow:inset 0 0 0 3px #d2f5ff88,inset 0 0 17px #95dbffbb; }
.tile[data-ice="1"]::after,.tile[data-ice="2"]::after { content:'❄'; position:absolute; top:0; right:1px; color:#effdff; font-size:11px; line-height:1; text-shadow:0 1px 3px #092a50; pointer-events:none; }
.tile[data-ice="2"]::after { content:'❄²'; }
.camp-controls { min-width:0; }
.camp-controls .notice { margin:5px 1px 0; min-height:27px; font-size:11px; line-height:1.25; }
.camp-controls .booster { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:10px; padding:9px 4px; }
.camp-outcome { display:grid; gap:5px; padding:9px; border:1px solid var(--rim); border-radius:13px; background:var(--panel); }
.camp-outcome>strong { color:var(--gold); font-size:14px; }
.camp-outcome>span { font-size:10px; color:var(--muted); line-height:1.3; }
.camp-outcome>div { display:flex; gap:5px; }
.camp-outcome button { flex:1; min-height:31px; padding:5px; font-size:10px; }
.shop-wallet { margin:0 0 10px; color:var(--muted); font-size:11px; line-height:1.5; }
.pack-item { display:grid; text-align:center; gap:4px; padding:6px; color:#fff2d2; }
.pack-item strong { font-size:27px; line-height:1; }
.pack-item small { font-size:9px; }
@media (min-width:720px) {
  .campaign-map { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .campaign-hero { padding:20px; }
}
@media (max-height:600px) {
  #camp-run { gap:4px; }
  .camp-toolbar .secondary { min-height:27px; }
  .camp-toolbar strong { font-size:12px; }
  .camp-toolbar small { font-size:9px; }
  .camp-goal { padding:3px; }
  .camp-goal svg { width:16px; height:16px; }
  .camp-goal strong { font-size:10px; }
  .camp-stats strong { font-size:15px; }
  .camp-controls .booster { min-height:34px; padding:6px 3px; }
  .camp-outcome { padding:6px; gap:4px; }
}

:root[data-performance="light"] .tile svg { filter:none; }
:root[data-performance="light"] .tile { box-shadow:none; transition:opacity .08s,transform .08s; }
:root[data-performance="light"] .hero-art path,:root[data-performance="light"] .hero-art circle { animation:none; }
:root[data-performance="light"] .effect-combo { animation:none; box-shadow:none; }
:root[data-performance="light"] .tile[data-ice="1"],:root[data-performance="light"] .tile[data-ice="2"] { box-shadow:inset 0 0 0 1px #a7eaff88; }
#light-mode[aria-pressed="true"] { border-color:var(--mint);color:var(--mint); }