/* Bundled fonts (SIL Open Font License 1.1, see dm-sans-OFL.txt and space-grotesk-OFL.txt).
   Variable weight 400-700, split into latin and latin-ext (č, š, ž) subsets. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(dm-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(dm-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(space-grotesk-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(space-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  color-scheme: dark;
  --bg: #39236f;
  --surface: #563888;
  --surface-2: #6a459e;
  --line: #9775c2;
  --text: #fff7ff;
  --muted: #ddcdef;
  --blue: #72f3e3;
  --orange: #ffd075;
  --danger: #f08f86;
  --floor: #e6dcff;
  --floor-line: #cbb9ed;
  --wall-a: #ad73ee;
  --wall-b: #7048bf;
  --wall-line: #c8a1ff;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --tap: 48px;
  font-size: 16px;
}
:root.high-contrast {
  --muted: #c4ced8;
  --line: #7d8b99;
  --floor: #10161c;
  --floor-line: #2a3440;
  --wall-a: #8494a6;
  --wall-b: #6c7c8e;
  --wall-line: #b5c3d1;
  --blue: #b8ecff;
  --orange: #ffbf86;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 95% 5%, #ee8cb955 0, transparent 48%), radial-gradient(ellipse at 0% 90%, #39cccd55 0, transparent 55%), linear-gradient(145deg, #66369c, #39236f 55%, #214f79);
  color: var(--text);
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
#app { height: 100%; max-width: 560px; margin: 0 auto; position: relative; }

/* ---- Base controls ------------------------------------------------------ */
button {
  font: inherit;
  font-size: 0.95rem;
  color: inherit;
  cursor: pointer;
  min-height: var(--tap);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  padding: 10px 16px;
  transition: background .15s, transform .15s, border-color .15s;
}
@media (hover: hover) { button:hover { background: var(--surface-2); } }
button:active { transform: scale(.97); }
button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
button:disabled { opacity: .35; cursor: default; transform: none; }
button.primary { background: var(--blue); border-color: var(--blue); color: #14222c; font-weight: 700; }
@media (hover: hover) { button.primary:hover { background: #c0ecfc; } }
button.danger { color: var(--danger); border-color: #6b3d3a; background: transparent; }
button.danger.big { background: var(--danger); color: #2a1210; border-color: var(--danger); font-weight: 700; }
button.big { min-height: 60px; font-size: 1.1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
button.big small { font-size: .75rem; font-weight: 500; opacity: .75; }
button.icon { width: var(--tap); height: var(--tap); padding: 0; display: grid; place-items: center; font-size: 1.1rem; background: transparent; }

h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; }
h1:focus, h2:focus { outline: none; }
.eyebrow { font-size: .65rem; letter-spacing: 2px; font-weight: 700; color: var(--muted); }
.muted { color: var(--muted); }
.blue { color: var(--blue); }
.orange { color: var(--orange); }

/* ---- Screens ------------------------------------------------------------ */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px; }
.screen[hidden] { display: none !important; }
.screen.entering { animation: screen-in .28s cubic-bezier(.2,.8,.3,1); }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } }

.bar { display: grid; grid-template-columns: var(--tap) 1fr auto; align-items: center; gap: 8px; margin-bottom: 8px; }
.bar h2 { font-size: 1.35rem; }
.bar-stat { color: var(--orange); font-weight: 700; font-size: .95rem; min-width: var(--tap); text-align: right; }
.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 24px; }

/* Menu */
#screen-menu { justify-content: space-between; padding: 24px 20px; }
.menu-hero { margin-top: 6vh; }
.menu-hero h1 { font-size: clamp(3.2rem, 15vw, 5.6rem); line-height: 1; letter-spacing: -.06em; margin: 16px 0; }
.menu-hero h1 em { font-style: normal; color: var(--blue); }
.tagline { color: #e3d1f4; font-size: 1.05rem; line-height: 1.5; max-width: 22em; }
.menu-actions { display: flex; flex-direction: column; gap: 10px; }
.menu-row { display: flex; gap: 10px; }
.menu-row > button { flex: 1; }
.menu-foot { text-align: center; font-size: .75rem; color: var(--muted); margin: 12px 0 0; }

/* Level select */
.world { margin: 12px 0 24px; }
.world-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.world-head h3 { font-size: 1.1rem; }
.world-head span { color: var(--muted); font-size: .8rem; }
.world.locked .grid { opacity: .45; }
.lock-note { font-size: .85rem; color: var(--orange); margin: -4px 0 12px; }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.level-btn { aspect-ratio: 1; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 16px; font-family: var(--display); font-size: 1.2rem; }
.level-btn .mini-stars { font-size: .6rem; letter-spacing: 1px; color: var(--orange); font-family: var(--body); min-height: 1em; }
.level-btn.done { border-color: #4f7d6f; }
.level-btn.current { border-color: var(--blue); box-shadow: 0 0 0 2px #9ed8ed40; }
.level-btn.locked { color: var(--muted); }
.level-btn:disabled { opacity: .6; }

/* Stats and achievements */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: var(--surface); border: 1px solid #9775c266; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.stat span { font-size: .75rem; color: var(--muted); }
.stat strong { font-family: var(--display); font-size: 1.25rem; font-weight: 500; }
.achievements { display: flex; flex-direction: column; gap: 8px; }
.achievement { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid #9775c266; opacity: .55; }
.achievement.unlocked { opacity: 1; border-color: #6b5a33; background: #7c4c7555; }
.achievement .badge { font-size: 1.4rem; }
.achievement strong { display: block; }
.achievement small { color: var(--muted); }
.world-head h3 small { font-family: var(--body); font-size: .7rem; color: var(--muted); font-weight: 600; margin-left: 6px; letter-spacing: .5px; }
.toolbar .count { display: inline-block; min-width: 1.4em; padding: 1px 5px; border-radius: 8px; background: #2c3a47; font-size: .7rem; color: var(--blue); }

/* Toast */
#toast { position: fixed; inset: auto; margin: 0; border: 0; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px); background: #f3eadb; color: #1b1a17; padding: 12px 18px; border-radius: 14px; font-weight: 600; font-size: .9rem; box-shadow: 0 10px 30px #0008; animation: toast-in .3s cubic-bezier(.2,.8,.3,1); text-align: center; }
#toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* Settings */
.group { font-size: .7rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-family: var(--body); font-weight: 700; margin: 22px 0 8px; }
.switch { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #9775c266; border-radius: 0; padding: 12px 2px; min-height: 56px; }
.switch::after { content: ''; flex: none; width: 46px; height: 28px; border-radius: 14px; background: #3a4552 radial-gradient(circle at 14px 50%, #c9d2da 9px, transparent 10px); transition: background .2s; }
.switch[aria-checked="true"]::after { background: var(--blue) radial-gradient(circle at 32px 50%, #14222c 9px, transparent 10px); }
.switch[hidden] { display: none; }
#reset-progress { width: 100%; margin-top: 4px; }
.error-row { margin-top: 10px; }
.error-row[hidden] { display: none; }
.select-row { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 2px; border-bottom: 1px solid #9775c266; }
.select-row[hidden], [data-native-only][hidden] { display: none !important; }
.select-row select { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-height: 40px; }
.fineprint.left { text-align: left; margin: 8px 0 0; }
.fineprint { font-size: .75rem; color: var(--muted); text-align: center; margin-top: 28px; }

/* How to play */
.howto p { font-size: 1rem; line-height: 1.6; color: #c9d1d8; margin: 0 0 16px; }
.howto button { width: 100%; margin-top: 8px; }
.sample { display: inline-block; width: 22px; height: 22px; border-radius: 6px; vertical-align: -5px; margin-right: 6px; }
.player-sample { background: var(--blue); }
.crate-sample { background: var(--orange); }

/* ---- Play screen ------------------------------------------------------- */
#screen-play {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "head" "goal" "board" "status" "tools" "dpad";
  gap: 6px;
  padding-top: 8px;
}
.play-head { grid-area: head; display: grid; grid-template-columns: var(--tap) 1fr auto; align-items: center; gap: 8px; }
.play-title { min-width: 0; }
.play-title h2 { font-size: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.counter { text-align: right; padding-right: 4px; }
.counter strong { display: block; font-family: var(--display); font-size: 1.8rem; font-weight: 500; line-height: 1; }
.counter span { font-size: .55rem; letter-spacing: 1.5px; color: var(--muted); }
#goal { grid-area: goal; margin: 0 0 0 56px; font-size: .75rem; color: var(--muted); }
.board-area { grid-area: board; container-type: size; display: grid; place-items: center; min-height: 0; }
.board-wrap { position: relative; width: min(100cqw, 100cqh); aspect-ratio: 1; }
#status { grid-area: status; min-height: 2.6em; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .9rem; color: #edddfa; margin: 2px 0 0; line-height: 1.3; }
#status.coach { color: var(--blue); font-weight: 600; }
#status.warn { color: var(--orange); font-weight: 600; }
#undo.pulse { border-color: var(--orange); color: var(--orange); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px #efad7830; } }
/* Visible only to screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr-only:focus { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal; }
.toolbar { grid-area: tools; display: flex; gap: 8px; }
.toolbar button { flex: 1; font-size: .85rem; padding: 8px 4px; }
.toolbar button span { margin-right: 4px; }
.dpad { grid-area: dpad; display: flex; justify-content: center; align-items: center; gap: 8px; }
.dpad[hidden] { display: none; }
.dpad > div { display: flex; flex-direction: column; gap: 8px; }
.dpad button { width: 64px; height: 52px; font-size: 1.3rem; background: var(--surface-2); }

/* Board */
#board { position: absolute; inset: 0; background: #4f3483; border: 2px solid #bb94ee; border-radius: 18px; box-shadow: 0 20px 60px #0004; overflow: hidden; touch-action: none; container-type: size; }
.cell { position: absolute; width: 14.2857%; height: 14.2857%; padding: 3px; }
.tile { height: 100%; border-radius: 8px; background: var(--floor); border: 1px solid var(--floor-line); }
.wall .tile { background: linear-gradient(135deg, var(--wall-a), var(--wall-b)); border-color: var(--wall-line); box-shadow: inset 0 2px #ffffff10, 0 2px 0 #0005; }
.target { position: absolute; inset: 14%; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: clamp(14px, 6cqmin, 28px); transition: background .2s, box-shadow .2s; }
.exit .target { color: var(--blue); border: 1px dashed #739fb0; background: #9ed8ed12; }
.switch-cell .target { color: var(--orange); border: 1px dashed #ac7c54; background: #efad7810; }
.switch-cell.activated .target { box-shadow: 0 0 25px #efad7860; background: #efad7830; border-style: solid; }
.exit.activated .target { box-shadow: 0 0 25px #9ed8ed40; background: #9ed8ed25; border-style: solid; }
.piece { position: absolute; width: 11.5%; height: 11.5%; margin: 1.39%; border-radius: 22%; display: flex; align-items: center; justify-content: center; z-index: 2; transition-property: left, top; transition-timing-function: cubic-bezier(.22,.65,.3,1); box-shadow: 0 5px 10px #0005; }
.player { background: linear-gradient(145deg, #bde9f7, #88c6df); }
.player::before, .player::after { content: ''; width: 9%; height: 16%; min-width: 3px; border-radius: 4px; background: #294757; margin: 0 8%; }
.crate { background: linear-gradient(135deg, #f6c69e, #df9661); border: 3px solid #f9d6b466; }
.crate::before { content: '×'; color: #815334; font-size: 4.5cqmin; border: 1px solid #a06b42; border-radius: 4px; width: 75%; height: 75%; display: flex; align-items: center; justify-content: center; }
.particle { position: absolute; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; z-index: 3; }

/* Mechanics */
.mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(14px, 6.5cqmin, 30px); pointer-events: none; }
.oneway .tile { background: linear-gradient(135deg, #22303c, #1b2630); border-color: #3a5262; }
.oneway .mark { color: #7fb4c9; }
.door .tile { background: repeating-linear-gradient(90deg, #8a6a4a 0 5px, #5d4632 5px 10px); border-color: #a07c58; transition: opacity .25s, background .25s; }
.door.open .tile { background: var(--floor); border: 1px dashed #a07c58; opacity: .8; }
.teleport .tile { background: radial-gradient(circle, #3b2f5a 0 35%, var(--floor) 70%); border-color: #6d5aa8; }
.teleport .mark { color: #b9a6ff; font-size: clamp(18px, 9cqmin, 40px); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fragile .tile { background:
    linear-gradient(35deg, transparent 46%, #0b1015 47% 50%, transparent 51%),
    linear-gradient(-60deg, transparent 56%, #0b1015 57% 59%, transparent 60%),
    #2a2a24; border-color: #5b5640; }
.fragile.broken .tile { background: radial-gradient(circle, #000 0 45%, #06090c 75%); border-color: #11161c; box-shadow: inset 0 4px 10px #000; }
.mark-sample { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #22303c; color: #b9d6e2; vertical-align: -5px; margin-right: 6px; font-size: .85rem; }
.door-sample { background: repeating-linear-gradient(90deg, #8a6a4a 0 4px, #5d4632 4px 8px); }
.fragile-sample { background: linear-gradient(35deg, transparent 45%, #0b1015 46% 52%, transparent 53%), #2a2a24; }
:root.high-contrast .door .tile { background: repeating-linear-gradient(90deg, #d8a878 0 5px, #6b4c30 5px 10px); }
:root.high-contrast .teleport .mark { color: #e3d9ff; }

/* Tutorial swipe hint */
#hand { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: #ffffff30; border: 2px solid #ffffffb0; box-shadow: 0 0 0 6px #ffffff15; pointer-events: none; z-index: 5; }
#hand[hidden] { display: none; }
#hand.dir-0 { animation: swipe-up 1.4s ease-in-out infinite; }
#hand.dir-1 { animation: swipe-right 1.4s ease-in-out infinite; }
#hand.dir-2 { animation: swipe-down 1.4s ease-in-out infinite; }
#hand.dir-3 { animation: swipe-left 1.4s ease-in-out infinite; }
@keyframes swipe-up { 0%, 15% { transform: translateY(40px); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(-40px); opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
@keyframes swipe-down { 0%, 15% { transform: translateY(-40px); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateY(40px); opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
@keyframes swipe-left { 0%, 15% { transform: translateX(40px); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateX(-40px); opacity: 1; } 100% { transform: translateX(-40px); opacity: 0; } }
@keyframes swipe-right { 0%, 15% { transform: translateX(-40px); opacity: 0; } 30% { opacity: 1; } 80% { transform: translateX(40px); opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } }

/* ---- Dialogs ----------------------------------------------------------- */
dialog { width: min(92vw, 400px); border: 1px solid #3c4855; border-radius: 22px; background: linear-gradient(150deg, #684093, #362768); color: var(--text); padding: 28px 22px 22px; text-align: center; overflow: hidden; }
dialog[open] { display: flex; flex-direction: column; gap: 10px; animation: dialog-in .25s cubic-bezier(.2,.8,.3,1); }
dialog::backdrop { background: #070b10b8; backdrop-filter: blur(4px); }
@keyframes dialog-in { from { opacity: 0; transform: scale(.94); } }
dialog h2 { font-size: 1.6rem; margin: 4px 0; }
dialog p { color: #e3d1f4; margin: 0 0 8px; line-height: 1.5; }
dialog button { position: relative; z-index: 2; }
.win-icon { font-size: 2.8rem; color: var(--blue); line-height: 1; }
#stars { font-size: 2rem; letter-spacing: 6px; color: #3b4652; }
#stars span.on { color: #efc580; display: inline-block; animation: star-pop .4s cubic-bezier(.3,1.6,.5,1) backwards; }
#stars span.on:nth-child(2) { animation-delay: .15s; }
#stars span.on:nth-child(3) { animation-delay: .3s; }
@keyframes star-pop { from { transform: scale(0) rotate(-40deg); } }
.confetti { position: absolute; pointer-events: none; left: var(--x); top: -12px; width: 6px; height: 12px; border-radius: 2px; animation: fall 1.5s ease-in forwards; transform: rotate(var(--r)); z-index: 1; }
@keyframes fall { to { top: 100%; transform: translateX(20px) rotate(600deg); opacity: 0; } }

/* ---- Landscape and large screens -------------------------------------- */
@media (min-aspect-ratio: 5/4) and (min-width: 600px) {
  #app { max-width: 1100px; }
  #screen-play {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas: "board head" "board goal" "board status" "board tools" "board dpad";
    column-gap: 28px;
    padding: 16px 24px;
  }
  #goal { margin-left: 0; }
  .toolbar { flex-direction: column; }
  #screen-menu { flex-direction: row; align-items: center; gap: 48px; }
  .menu-hero { margin: 0; flex: 1; }
  .menu-actions { width: 340px; }
  .menu-foot { display: none; }
  .scroll { max-width: 640px; width: 100%; margin: 0 auto; }
}
@media (max-height: 640px) and (max-aspect-ratio: 5/4) {
  #goal { display: none; }
  .counter strong { font-size: 1.4rem; }
  #status { min-height: 2em; font-size: .8rem; }
}

/* ---- Reduced motion ---------------------------------------------------- */
:root.reduce-motion *, :root.reduce-motion *::before, :root.reduce-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Candy-garden palette: pale paths, raised violet walls, mint and mango pieces. */
#app::before, #app::after { content: ''; position: absolute; pointer-events: none; z-index: -1; border-radius: 28%; transform: rotate(-18deg); border: 2px solid #ffffff12; }
#app::before { width: 170px; height: 170px; top: 7%; right: -35px; background: linear-gradient(135deg, #f8a7d82a, #ac81f520); }
#app::after { width: 110px; height: 110px; bottom: 12%; left: -25px; background: linear-gradient(135deg, #7cffe32a, #4ac7dd15); transform: rotate(20deg); }
#app { isolation: isolate; overflow: hidden; }
button { box-shadow: inset 0 1px #ffffff16, 0 3px 0 #28184d40; }
button.primary { background: linear-gradient(135deg, #a3ffdb, #61e5db); border-color: #b9ffee; box-shadow: 0 5px 0 #168b8b, 0 10px 28px #43e4cf25; }
button.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #168b8b; }
.menu-hero h1 em { color: #83ffe7; text-shadow: 0 5px 0 #321c6166; }
.menu-row > button { background: linear-gradient(135deg, #8753b0, #603990); }
#menu-daily { background: linear-gradient(135deg, #a25291, #75408f); }
#board { box-shadow: 0 8px 0 #33205b, 0 18px 45px #23104760, inset 0 0 0 5px #ffffff0c; }
.tile { background: linear-gradient(145deg, #f0e9ff, var(--floor)); box-shadow: inset 0 1px #fff9; }
.cell:nth-child(2n):not(.wall):not(.door):not(.oneway):not(.teleport):not(.fragile) .tile { background: linear-gradient(145deg, #e4e7ff, #d9d9fa); }
.wall .tile { box-shadow: inset 0 3px #ffffff35, inset 0 -4px #47257944, 0 3px 0 #30195766; }
.player { background: linear-gradient(145deg, #baffdf, #36d9cf); border: 2px solid #d5fff5; box-shadow: inset 0 -4px #15999544, 0 4px 0 #177d87, 0 6px 12px #2e185d55; }
.player::before, .player::after { background: #155765; }
.crate { background: linear-gradient(135deg, #ffe6a0, #ffab62); border-color: #fff0bc; box-shadow: inset 0 -4px #df763444, 0 4px 0 #b7683e, 0 6px 12px #2e185d55; }
.crate::before { color: #985223; border-color: #cf8246; }
.exit .target { color: #086a71; border: 2px dashed #199a9d; background: #5ceac54a; font-weight: 700; }
.switch-cell .target { color: #94501b; border: 2px dashed #cc7b32; background: #ffd27866; font-weight: 700; }
.exit.activated .target { color: #07565d; background: #69f6cf99; box-shadow: 0 0 18px #4effc5aa; }
.switch-cell.activated .target { color: #79410e; background: #ffcb62bb; box-shadow: 0 0 18px #ffc65e99; }
.oneway .tile { background: linear-gradient(135deg, #b7e8ff, #8ccfee); border-color: #4f9fc9; }
.oneway .mark { color: #245b8c; }
.teleport .tile { background: radial-gradient(circle, #bc78e9 0 35%, #e6ceff 75%); border-color: #a167dc; }
.teleport .mark { color: #6233a5; }
.fragile:not(.broken) .tile { background: linear-gradient(35deg, transparent 46%, #b37443 47% 50%, transparent 51%), linear-gradient(-60deg, transparent 56%, #b37443 57% 59%, transparent 60%), #f6d099; border-color: #cf9b5e; }
.dpad button { background: linear-gradient(145deg, #9863c8, #69429f); border-color: #b78adf; }
.toolbar .count { background: #37215d; }
.level-btn { background: linear-gradient(145deg, #8154b5, #59388d); }
.level-btn.done { background: linear-gradient(145deg, #327f86, #326073); border-color: #77e2c4; }
.level-btn.current { border-color: #86ffe2; box-shadow: 0 0 0 2px #86ffe250; }
#stars { color: #a88ac1; }
#stars span.on { color: #ffda78; text-shadow: 0 3px 0 #b2753966; }
:root.high-contrast { --muted: #f5eaff; --line: #dac4ff; --floor: #fbf6ff; --floor-line: #c0a7e0; --wall-a: #703cc2; --wall-b: #4b2387; --wall-line: #bd94f4; --blue: #a5ffed; --orange: #ffe3a0; }
:root.high-contrast .tile { background: var(--floor); }
:root.high-contrast .wall .tile { background: linear-gradient(135deg, var(--wall-a), var(--wall-b)); }
:root.high-contrast .cell:nth-child(2n):not(.wall):not(.door):not(.oneway):not(.teleport):not(.fragile) .tile { background: var(--floor); }

/* Each puzzle gets a stable environment palette; gameplay symbols keep their colors. */
:root {
  --sky-a: #66369c; --sky-b: #39236f; --sky-c: #214f79;
  --glow-a: #ee8cb955; --glow-b: #39cccd55;
  --path-a: #f0e9ff; --path-b: #e6dcff; --path-c: #e4e7ff; --path-d: #d9d9fa;
  --board-bg: #4f3483; --board-rim: #bb94ee;
  --wall-a: #ad73ee; --wall-b: #7048bf; --wall-line: #c8a1ff;
  --control-a: #9863c8; --control-b: #69429f;
}
:root[data-palette="ocean"] {
  --sky-a: #176d9b; --sky-b: #164375; --sky-c: #2b387b;
  --glow-a: #70e4ff66; --glow-b: #65bcff44;
  --path-a: #e0f7ff; --path-b: #c5e9fa; --path-c: #def0ff; --path-d: #c5ddf7;
  --board-bg: #225989; --board-rim: #79c9f4;
  --wall-a: #5cb9f0; --wall-b: #2674b9; --wall-line: #92d7ff;
  --control-a: #398cb7; --control-b: #245d91;
}
:root[data-palette="rose"] {
  --sky-a: #a43f79; --sky-b: #702b64; --sky-c: #4d367f;
  --glow-a: #ffb7c955; --glow-b: #da8be755;
  --path-a: #fff0f5; --path-b: #f6d5e7; --path-c: #ffe5ec; --path-d: #f2c7dc;
  --board-bg: #883d76; --board-rim: #f3a7ce;
  --wall-a: #f58fb9; --wall-b: #bf4e92; --wall-line: #ffc0dc;
  --control-a: #bf6098; --control-b: #883b76;
}
:root[data-palette="forest"] {
  --sky-a: #28785e; --sky-b: #20534e; --sky-c: #244b72;
  --glow-a: #b1e98644; --glow-b: #5ee8c044;
  --path-a: #f1f7da; --path-b: #dceabf; --path-c: #eaf2d2; --path-d: #cfdfad;
  --board-bg: #36694f; --board-rim: #a2d99a;
  --wall-a: #9ac879; --wall-b: #548849; --wall-line: #c1e6a8;
  --control-a: #4a9579; --control-b: #316c60;
}
:root[data-palette="sunset"] {
  --sky-a: #a34e53; --sky-b: #78364e; --sky-c: #593f78;
  --glow-a: #ffc66c66; --glow-b: #f88d9155;
  --path-a: #fff1d9; --path-b: #f8dfbf; --path-c: #ffe7d1; --path-d: #f6d3b7;
  --board-bg: #96534f; --board-rim: #f9bf91;
  --wall-a: #f3ac7b; --wall-b: #ca735b; --wall-line: #ffd3a8;
  --control-a: #b86a70; --control-b: #854b67;
}
:root[data-palette="glacier"] {
  --sky-a: #397fa2; --sky-b: #315879; --sky-c: #4d4889;
  --glow-a: #c6f6ff66; --glow-b: #b0c0ff55;
  --path-a: #f1ffff; --path-b: #daedf7; --path-c: #f1f1ff; --path-d: #dce1fa;
  --board-bg: #426f91; --board-rim: #c4e7ff;
  --wall-a: #adceed; --wall-b: #728ecb; --wall-line: #d6edff;
  --control-a: #6498bb; --control-b: #4c6b9d;
}
:root[data-palette="berry"] {
  --sky-a: #764799; --sky-b: #512d79; --sky-c: #862e6c;
  --glow-a: #ee97f655; --glow-b: #ff9fce44;
  --path-a: #fbe9ff; --path-b: #eed4f8; --path-c: #f8e1f0; --path-d: #e6c5e8;
  --board-bg: #6d3a83; --board-rim: #e6a2ef;
  --wall-a: #da83df; --wall-b: #9d49b0; --wall-line: #f3b6f7;
  --control-a: #a15fb9; --control-b: #733f91;
}
:root[data-palette="lagoon"] {
  --sky-a: #177a83; --sky-b: #205369; --sky-c: #314b86;
  --glow-a: #7cf4d455; --glow-b: #70c5fa55;
  --path-a: #e1fff1; --path-b: #c3eadf; --path-c: #dff7ef; --path-d: #badee0;
  --board-bg: #306e75; --board-rim: #86dfd2;
  --wall-a: #70c8bb; --wall-b: #35919c; --wall-line: #a2eadb;
  --control-a: #368e9e; --control-b: #2e697e;
}
body { background: radial-gradient(ellipse at 95% 5%, var(--glow-a) 0, transparent 48%), radial-gradient(ellipse at 0% 90%, var(--glow-b) 0, transparent 55%), linear-gradient(145deg, var(--sky-a), var(--sky-b) 55%, var(--sky-c)); }
#board { background: var(--board-bg); border-color: var(--board-rim); }
.tile { background: linear-gradient(145deg, var(--path-a), var(--path-b)); border-color: var(--path-d); }
.cell:nth-child(2n):not(.wall):not(.door):not(.oneway):not(.teleport):not(.fragile) .tile { background: linear-gradient(145deg, var(--path-c), var(--path-d)); }
.wall .tile { background: linear-gradient(135deg, var(--wall-a), var(--wall-b)); border-color: var(--wall-line); }
.toolbar button, .dpad button { background: linear-gradient(145deg, var(--control-a), var(--control-b)); border-color: var(--board-rim); }
:root.high-contrast[data-palette] { --wall-a: #703cc2; --wall-b: #4b2387; --wall-line: #bd94f4; --path-a: #fbf6ff; --path-b: #fbf6ff; --path-c: #fbf6ff; --path-d: #c0a7e0; }
/* Preserve the high-contrast floor and mechanic markings over environment colors. */
:root.high-contrast .tile { background: var(--floor); }
:root.high-contrast .cell:nth-child(2n):not(.wall):not(.door):not(.oneway):not(.teleport):not(.fragile) .tile { background: var(--floor); }
:root.high-contrast .wall .tile { background: linear-gradient(135deg, var(--wall-a), var(--wall-b)); }

/* ---- Full game purchase ------------------------------------------------ */
.unlock-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 6px; text-align: left; }
.unlock-worlds span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #ffffff14; font-size: .85rem; }
.unlock-worlds .mark-sample { font-style: normal; margin: 0; }
.unlock-note { font-size: .85rem; color: var(--orange); }
.unlock-note[hidden] { display: none; }
.purchase-row { display: flex; flex-direction: column; gap: 10px; }
.purchase-row span { color: var(--muted); }
.purchase-row button[hidden] { display: none; }
.lock-buy { width: 100%; margin: -2px 0 12px; }