/* Gumdrop Grid. Glossy toy-confectionery UI over painted candy lands. */

@font-face { font-family: "Lilita One"; src: url("assets/fonts/lilita-one.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Nunito"; font-weight: 600; src: url("assets/fonts/nunito-600.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito"; font-weight: 800; src: url("assets/fonts/nunito-800.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito"; font-weight: 900; src: url("assets/fonts/nunito-900.woff2") format("woff2"); font-display: swap; }

:root {
  /* The game keeps one art-directed palette; backgrounds are paintings. */
  --ink: #4a1d3a;
  --ink-soft: #8a5470;
  --cream: #fff7ee;
  --cream-2: #ffe9f1;
  --berry: #ff4f8f;
  --berry-deep: #c41f5d;
  --berry-lip: #8e1243;
  --mint: #3fd6a4;
  --mint-lip: #17845f;
  --sky: #59b8ff;
  --sky-lip: #2463b8;
  --sun: #ffc93c;
  --sun-deep: #f59b00;
  --tile-a: rgba(255, 255, 255, 0.26);
  --tile-b: rgba(255, 255, 255, 0.16);
  --shadow: 0 14px 34px rgba(60, 10, 50, 0.35);
  --display: "Lilita One", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
  --body: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif;
  --safe-t: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-bottom);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: #3b1d4a;
  color: var(--ink);
  font: 600 16px/1.4 var(--body);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; animation: screenIn 0.35s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: scale(1.02); } }

.star { display: inline-block; width: 1em; height: 1em; background: rgba(255, 255, 255, 0.45); clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 98%, 50% 77%, 20% 98%, 30% 60%, 0 38%, 38% 35%); }
.star.on { background: linear-gradient(180deg, #fff3a6, var(--sun) 45%, var(--sun-deep)); }

/* ---------- Buttons ---------- */
.jbtn {
  --top: var(--berry); --bot: var(--berry-deep); --lip: var(--berry-lip);
  position: relative; border: 0; cursor: pointer; color: #fff;
  font: 400 22px/1 var(--display); letter-spacing: 0.5px;
  padding: 14px 26px 16px; border-radius: 22px;
  background: linear-gradient(180deg, var(--top), var(--bot));
  box-shadow: 0 6px 0 var(--lip), 0 12px 20px rgba(60, 10, 50, 0.35), inset 0 -4px 0 rgba(0, 0, 0, 0.08);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.jbtn::before { content: ""; position: absolute; left: 10%; right: 10%; top: 5px; height: 38%; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); pointer-events: none; }
.jbtn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--lip), 0 4px 10px rgba(60, 10, 50, 0.3); }
.jbtn-mint { --top: #6ff0c4; --bot: var(--mint); --lip: var(--mint-lip); }
.jbtn-sky { --top: #8fd2ff; --bot: var(--sky); --lip: var(--sky-lip); }
.jbtn-sun { --top: #ffe27a; --bot: var(--sun-deep); --lip: #b46c00; }
.jbtn-plain { --top: #fff; --bot: #f3e2ea; --lip: #cfa8bb; color: var(--ink); text-shadow: none; }
.jbtn-big { font-size: 34px; padding: 18px 64px 22px; border-radius: 30px; }
.jbtn:focus-visible, .rbtn:focus-visible, .node:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }

.rbtn {
  width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; cursor: pointer; flex: none;
  display: grid; place-items: center; color: #fff; padding: 0;
  background: radial-gradient(circle at 35% 30%, #ff9cc2, var(--berry) 55%, var(--berry-deep));
  box-shadow: 0 4px 0 var(--berry-lip), 0 8px 14px rgba(60, 10, 50, 0.35);
}
.rbtn svg { width: 24px; height: 24px; fill: currentColor; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2)); }
.rbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--berry-lip); }
.rbtn-coach { background: radial-gradient(circle at 35% 30%, #fff1a8, var(--sun) 55%, var(--sun-deep)); box-shadow: 0 4px 0 #b46c00, 0 8px 14px rgba(60, 10, 50, 0.35); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 4px 0 #b46c00, 0 0 22px 4px rgba(255, 220, 90, 0.8); } }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 247, 238, 0.94); border: 3px solid #fff; box-shadow: 0 4px 0 rgba(120, 40, 80, 0.35); font: 400 17px/1 var(--display); color: var(--ink); white-space: nowrap; }
.pill .star { font-size: 18px; }

/* ---------- Title ---------- */
.title-bg { position: absolute; inset: 0; background: url("assets/bg/title.webp") center / cover no-repeat, #f6b3cf; }
@media (min-aspect-ratio: 4/5) { .title-bg { background-image: url("assets/bg/title-wide.webp"); } }
.title-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 60% at 50% 35%, transparent 40%, rgba(60, 15, 60, 0.35)); }
.floaters { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.floaters .floater { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 6px 8px rgba(60, 10, 50, 0.3)); }
.title-inner { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--safe-t) + 4vh) 16px calc(var(--safe-b) + 6vh); }
.logo { display: flex; flex-direction: column; align-items: center; animation: logoIn 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes logoIn { from { transform: translateY(-40px) scale(0.6); opacity: 0; } }
.logo-emblem { width: min(46vw, 230px); height: auto; margin-bottom: -6%; filter: drop-shadow(0 10px 16px rgba(80, 10, 60, 0.4)); animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1.5deg); } }
.wordmark { margin: 0; display: flex; flex-direction: column; align-items: center; font: 400 clamp(56px, 17vw, 96px)/0.9 var(--display); letter-spacing: 1px; }
.wordmark span { color: #fff; text-shadow: 0 4px 0 var(--berry-deep), 0 8px 0 var(--berry-lip), 0 14px 22px rgba(70, 10, 50, 0.45); }
.wordmark span:last-child { font-size: 0.78em; text-shadow: 0 4px 0 #1d7cc9, 0 8px 0 #10518f, 0 14px 22px rgba(10, 30, 70, 0.45); }
.tagline { margin: 14px 0 0; padding: 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.78); font-weight: 800; color: var(--ink); font-size: 15px; text-align: center; animation: fadeUp 0.6s 0.5s both; }
@keyframes fadeUp { from { transform: translateY(14px); opacity: 0; } }
.title-actions { display: flex; flex-direction: column; align-items: center; gap: 22px; animation: fadeUp 0.6s 0.7s both; }
.title-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.title-row .jbtn { font-size: 18px; padding: 12px 20px 14px; }
#btn-play { animation: pulse 1.8s ease-in-out 1.6s infinite; }
@keyframes pulse { 50% { transform: scale(1.05); } }

/* ---------- Map ---------- */
.map { background: #fbe3ee; }
.map::before { content: ""; position: absolute; inset: -40px; background: url("assets/bg/title.webp") center / cover no-repeat; filter: blur(18px) saturate(1.15); opacity: 0.85; }
.map-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.map-scroll::-webkit-scrollbar { display: none; }
.map-stack { position: relative; width: min(100%, 780px); margin: 0 auto; box-shadow: 0 0 60px rgba(60, 10, 50, 0.4); }
.world { position: relative; width: 100%; aspect-ratio: 9 / 24; background: center / cover no-repeat; }
.world-banner { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); padding: 8px 20px 10px; border-radius: 16px; background: linear-gradient(180deg, #fff, var(--cream-2)); border: 3px solid #fff; box-shadow: 0 5px 0 rgba(140, 40, 90, 0.45), 0 10px 18px rgba(60, 10, 50, 0.3); text-align: center; white-space: nowrap; z-index: 2; }
.world-banner b { display: block; font: 400 22px/1 var(--display); color: var(--berry-deep); }
.world-banner small { font-weight: 800; font-size: 13px; color: var(--ink-soft); }
.world.locked { filter: saturate(0.4) brightness(0.88); }
.map-path { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; overflow: visible; z-index: 1; }
.map-path path { fill: none; stroke-linecap: round; stroke-dasharray: 0 17; }
.map-path .trail-shadow { stroke: rgba(110, 30, 70, 0.55); stroke-width: 14; transform: translateY(3px); }
.map-path .trail { stroke: #fff; stroke-width: 10; }
.map-path .trail-done { stroke: #ffc93c; stroke-width: 10; }
.nodes { position: absolute; left: 0; top: 0; width: 100%; z-index: 2; pointer-events: none; }
.node {
  position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; cursor: pointer; pointer-events: auto;
  border: 4px solid #fff; font: 400 22px/1 var(--display); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  background: radial-gradient(circle at 35% 28%, #ffa8cb, var(--berry) 55%, var(--berry-deep));
  box-shadow: 0 5px 0 var(--berry-lip), 0 10px 16px rgba(60, 10, 50, 0.4);
  display: grid; place-items: center; padding: 0;
}
.node.done { background: radial-gradient(circle at 35% 28%, #bff7e3, var(--mint) 55%, #149a6c); box-shadow: 0 5px 0 var(--mint-lip), 0 10px 16px rgba(60, 10, 50, 0.4); }
.node.locked { background: radial-gradient(circle at 35% 28%, #fff, #d9c8d2 60%, #b9a2b0); color: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 0 #8f7484; cursor: default; }
.node.current { width: 68px; height: 68px; margin: -34px 0 0 -34px; animation: nodePulse 1.4s ease-in-out infinite; }
.node.hard:not(.locked)::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, 0.9); }
@keyframes nodePulse { 50% { transform: scale(1.1); } }
.node-stars { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); display: flex; font-size: 17px; }
.node-stars .star:nth-child(2) { transform: translateY(-5px); }
.node-stars .star { filter: drop-shadow(0 1px 0 rgba(120, 50, 0, 0.6)); }
.token { position: absolute; width: 60px; height: 60px; margin: -90px 0 0 -30px; z-index: 3; pointer-events: none; transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1), top 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.token img { width: 100%; height: 100%; animation: hop 1s ease-in-out infinite; filter: drop-shadow(0 8px 6px rgba(60, 10, 50, 0.4)); }
@keyframes hop { 50% { transform: translateY(-10px) scaleY(1.04); } }
.map-bar { position: absolute; z-index: 5; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: calc(var(--safe-t) + 10px) 12px 10px; pointer-events: none; }
.map-bar > * { pointer-events: auto; }
.map-bar #map-world { flex: 1 1 auto; min-width: 0; justify-content: center; overflow: hidden; text-overflow: ellipsis; font-size: 15px; padding: 8px 10px; }
.map-bar .pill-star { padding: 8px 10px; font-size: 15px; }

/* ---------- Game ---------- */
.game-bg { position: absolute; inset: 0; background: center / cover no-repeat #6b3b72; }
.game-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 55%, rgba(40, 10, 50, 0.25), rgba(40, 10, 50, 0.05)); }
.hud { position: relative; display: flex; align-items: center; gap: 10px; padding: calc(var(--safe-t) + 10px) 12px 6px; max-width: 640px; width: 100%; margin: 0 auto; }
.hud-moves { flex: none; width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 4px solid #fff; background: radial-gradient(circle at 35% 28%, #9fd8ff, var(--sky) 55%, #2b78d0); box-shadow: 0 5px 0 var(--sky-lip), 0 10px 18px rgba(20, 30, 80, 0.35); color: #fff; }
.hud-moves.low { background: radial-gradient(circle at 35% 28%, #ffb0c9, var(--berry) 55%, var(--berry-deep)); box-shadow: 0 5px 0 var(--berry-lip); animation: nodePulse 0.8s ease-in-out infinite; }
.hud-label { font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.92; }
.hud-big { font: 400 32px/1 var(--display); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); font-variant-numeric: tabular-nums; }
.hud-score { flex: 1; min-width: 0; padding: 8px 14px 10px; border-radius: 20px; background: rgba(255, 247, 238, 0.95); border: 3px solid #fff; box-shadow: 0 5px 0 rgba(140, 40, 90, 0.4), 0 10px 18px rgba(60, 10, 50, 0.25); }
.hud-score-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; color: var(--ink-soft); }
.hud-num { font: 400 24px/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.starbar { position: relative; height: 12px; border-radius: 99px; background: #f0d4e2; margin-top: 8px; box-shadow: inset 0 2px 3px rgba(120, 40, 80, 0.25); }
.starbar-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(180deg, #ffe589, var(--sun-deep)); transition: width 0.35s ease; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6); }
.starbar .star { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: #e2bfd1; transition: transform 0.2s; }
.starbar .star.on { background: linear-gradient(180deg, #fff3a6, var(--sun) 45%, var(--sun-deep)); transform: scale(1.2); filter: drop-shadow(0 1px 0 rgba(150, 70, 0, 0.6)); }

.goals { position: relative; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px auto 0; padding: 0 12px; max-width: 640px; }
.goal { display: flex; align-items: center; gap: 6px; padding: 4px 14px 4px 6px; border-radius: 999px; background: rgba(255, 247, 238, 0.95); border: 3px solid #fff; box-shadow: 0 4px 0 rgba(140, 40, 90, 0.35); font: 400 20px/1 var(--display); font-variant-numeric: tabular-nums; }
.goal-icon { width: 34px; height: 34px; display: grid; }
.goal-icon img, .goal-icon svg { width: 100%; height: 100%; object-fit: contain; }
.goal.done { background: linear-gradient(180deg, #d7ffe9, #9ff0c9); }
.goal.done .goal-text::after { content: ""; display: inline-block; width: 14px; height: 8px; margin-left: 6px; border: solid var(--mint-lip); border-width: 0 0 4px 4px; transform: translateY(-4px) rotate(-45deg); }
.goal.bump { animation: bump 0.3s ease-out; }
@keyframes bump { 40% { transform: scale(1.18); } }

.board-wrap { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px 10px calc(var(--safe-b) + 14px); }
.board-frame { position: relative; padding: 8px; border-radius: 26px; background: rgba(46, 14, 60, 0.5); border: 3px solid rgba(255, 255, 255, 0.55); box-shadow: 0 16px 40px rgba(40, 5, 40, 0.45), inset 0 0 24px rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.board-wrap.shake .board-frame { animation: shake 0.35s ease-out; }
@keyframes shake { 20% { transform: translate(-5px, 3px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, -2px); } 80% { transform: translate(2px, 2px); } }
.board { --cell: 40px; position: relative; width: calc(var(--cell) * var(--cols)); height: calc(var(--cell) * var(--rows)); touch-action: none; isolation: isolate; }
.tiles, .pieces, .over, .fx { position: absolute; inset: 0; }
.pieces, .over, .fx { pointer-events: none; }
.tiles { z-index: 0; } .pieces { z-index: 1; } .over { z-index: 2; } .fx { z-index: 3; }
.tile { position: absolute; width: var(--cell); height: var(--cell); transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell))); background: var(--tile-a); }
.tile.alt { background: var(--tile-b); }
.tile.void { background: transparent !important; }
.tile.e-t.e-l { border-top-left-radius: 14px; } .tile.e-t.e-r { border-top-right-radius: 14px; }
.tile.e-b.e-l { border-bottom-left-radius: 14px; } .tile.e-b.e-r { border-bottom-right-radius: 14px; }
.tile .jelly { position: absolute; inset: 3%; display: none; border-radius: 22%; background: url("assets/pieces/jelly1.webp") center / contain no-repeat; box-shadow: inset 0 0 0 2px rgba(255, 140, 200, 0.95), 0 0 8px rgba(255, 90, 170, 0.6); }
.tile[data-jelly="2"] .jelly { background-image: url("assets/pieces/jelly2.webp"); }
.tile[data-jelly="1"] .jelly, .tile[data-jelly="2"] .jelly { display: block; }

.piece { position: absolute; width: var(--cell); height: var(--cell); padding: calc(var(--cell) * 0.04); transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell))); transition-property: transform; transition-timing-function: cubic-bezier(0.32, 0.9, 0.45, 1.12); will-change: transform; }
.piece > .pc { width: 100%; height: 100%; display: block; transform-origin: 50% 85%; }
.piece img.pc { object-fit: contain; filter: drop-shadow(0 3px 2px rgba(40, 5, 40, 0.35)); }
.piece.sp-bomb > .pc { animation: burstGlow 1.6s ease-in-out infinite; }
.piece.sp-colorbomb > .pc { animation: spin 6s linear infinite; }
@keyframes burstGlow { 50% { filter: drop-shadow(0 0 7px rgba(255, 220, 120, 0.95)) drop-shadow(0 3px 2px rgba(40, 5, 40, 0.35)); transform: scale(1.04); } }
@keyframes spin { to { transform: rotate(360deg); } }
.piece.land > .pc { animation: land 0.22s ease-out; }
@keyframes land { 40% { transform: scale(1.1, 0.86); } 70% { transform: scale(0.96, 1.05); } }
.piece.pop > .pc { animation: pop 0.22s ease-in forwards; }
.piece.morph > .pc { animation: morph 0.28s ease-out; }
.piece.selected > .pc { animation: sel 0.7s ease-in-out infinite; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #fff); }
.piece.hint > .pc { animation: wiggle 1s ease-in-out infinite; filter: drop-shadow(0 0 8px #fff8b0); }
.piece.tutor-glow > .pc { animation: sel 0.9s ease-in-out infinite; filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 4px #fff); }
@keyframes pop { 40% { transform: scale(1.25); } to { transform: scale(0.1); opacity: 0; } }
@keyframes morph { 0% { transform: scale(0.5) rotate(-20deg); } 60% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1); } }
@keyframes sel { 50% { transform: scale(1.12); } }
@keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 15% { transform: rotate(-12deg) scale(1.1); } 30% { transform: rotate(12deg) scale(1.1); } 45% { transform: rotate(-6deg); } }

.ov { position: absolute; width: var(--cell); height: var(--cell); transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell))); }
.ov > span { position: absolute; inset: 2%; display: none; background: center / contain no-repeat; }
.ov[data-frost="1"] .frost { display: block; background-image: url("assets/pieces/frost1.webp"); }
.ov[data-frost="2"] .frost { display: block; background-image: url("assets/pieces/frost2.webp"); }
.ov.locked .lock { display: block; inset: -2%; background-image: url("assets/pieces/lock.webp"); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }

/* Effects */
.fx-canvas { position: absolute; left: -40px; top: -40px; width: calc(100% + 80px); height: calc(100% + 80px); pointer-events: none; z-index: 4; }
.fx-item { position: absolute; pointer-events: none; }
.fx-item.beam-h { left: 0; right: 0; top: calc(var(--r) * var(--cell) + var(--cell) * 0.28); height: calc(var(--cell) * 0.44); background: linear-gradient(90deg, transparent, #fff 20%, #fff7b0 50%, #fff 80%, transparent); border-radius: 99px; animation: beam-h 0.45s ease-out forwards; box-shadow: 0 0 22px #fff, 0 0 40px #ffd34f; }
.fx-item.beam-v { top: 0; bottom: 0; left: calc(var(--c) * var(--cell) + var(--cell) * 0.28); width: calc(var(--cell) * 0.44); background: linear-gradient(180deg, transparent, #fff 20%, #fff7b0 50%, #fff 80%, transparent); border-radius: 99px; animation: beam-v 0.45s ease-out forwards; box-shadow: 0 0 22px #fff, 0 0 40px #ffd34f; }
.fx-item.beam-x { inset: 0; background:
  linear-gradient(90deg, transparent, #fff, transparent) 0 calc(var(--r) * var(--cell) + var(--cell) * 0.28) / 100% calc(var(--cell) * 0.44) no-repeat,
  linear-gradient(180deg, transparent, #fff, transparent) calc(var(--c) * var(--cell) + var(--cell) * 0.28) 0 / calc(var(--cell) * 0.44) 100% no-repeat;
  animation: fade 0.5s ease-out forwards; }
.fx-item.beam-x.wide { background:
  linear-gradient(90deg, transparent, #fff, transparent) 0 calc((var(--r) - 1) * var(--cell)) / 100% calc(var(--cell) * 3) no-repeat,
  linear-gradient(180deg, transparent, #fff, transparent) calc((var(--c) - 1) * var(--cell)) 0 / calc(var(--cell) * 3) 100% no-repeat; }
.fx-item.ring { left: calc((var(--c) - 1) * var(--cell)); top: calc((var(--r) - 1) * var(--cell)); width: calc(var(--cell) * 3); height: calc(var(--cell) * 3); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 210, 120, 0.6) 40%, transparent 70%); animation: ring 0.5s ease-out forwards; }
.fx-item.ring.big { left: calc((var(--c) - 2) * var(--cell)); top: calc((var(--r) - 2) * var(--cell)); width: calc(var(--cell) * 5); height: calc(var(--cell) * 5); }
.fx-item.flash { inset: -10px; border-radius: 20px; background: radial-gradient(circle at calc((var(--c) + 0.5) * var(--cell) + 10px) calc((var(--r) + 0.5) * var(--cell) + 10px), #fff, rgba(255, 180, 230, 0.6) 30%, transparent 75%); animation: fade 0.6s ease-out forwards; }
.fx-item.seek { left: calc(var(--fc) * var(--cell) + var(--cell) * 0.25); top: calc(var(--fr) * var(--cell) + var(--cell) * 0.25); width: calc(var(--cell) * 0.5); height: calc(var(--cell) * 0.5); border-radius: 50%; background: radial-gradient(circle, #fff, #ffe27a 60%, transparent 70%); box-shadow: 0 0 16px #fff; animation: seek 0.42s ease-in forwards; }
@keyframes beam-h { from { transform: scaleX(0.1); opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
@keyframes beam-v { from { transform: scaleY(0.1); opacity: 1; } to { transform: scaleY(1); opacity: 0; } }
@keyframes ring { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.1); opacity: 0; } }
@keyframes fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes seek { to { transform: translate(calc((var(--c) - var(--fc)) * var(--cell)), calc((var(--r) - var(--fr)) * var(--cell))); opacity: 0.3; } }

.popups { position: absolute; inset: 8px; pointer-events: none; z-index: 5; }
.popup { position: absolute; transform: translate(-50%, -50%); font: 400 26px/1 var(--display); color: #fff; text-shadow: 0 2px 0 var(--pc, var(--berry-deep)), 0 0 8px rgba(0, 0, 0, 0.35); animation: popup 0.9s ease-out forwards; white-space: nowrap; }
@keyframes popup { 0% { transform: translate(-50%, -30%) scale(0.5); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -150%) scale(1); opacity: 0; } }

.banner { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font: 400 clamp(40px, 13vw, 76px)/1 var(--display); color: #fff; letter-spacing: 1px; pointer-events: none; white-space: nowrap; z-index: 6;
  text-shadow: 0 4px 0 var(--berry-deep), 0 8px 0 var(--berry-lip), 0 14px 24px rgba(70, 10, 50, 0.5); }
.banner.small { font-size: clamp(22px, 6vw, 34px); top: 50%; }
.banner.show { animation: banner 0.6s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes banner { from { transform: translate(-50%, -50%) scale(0.3) rotate(-8deg); opacity: 0; } }

.coach-bubble { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 18px); transform: translateX(-50%); width: min(92%, 420px); padding: 12px 16px; border-radius: 18px; background: #fffbe8; border: 3px solid #fff; box-shadow: 0 6px 0 #d9a92e, 0 12px 22px rgba(60, 10, 50, 0.35); font-weight: 800; color: var(--ink); z-index: 7; animation: fadeUp 0.3s ease-out; }
.coach-bubble b { display: block; font: 400 15px/1.2 var(--display); color: var(--sun-deep); font-weight: 400; }

.tutor { position: absolute; inset: 8px; pointer-events: none; z-index: 6; }
.tutor-hand { position: absolute; width: 46px; height: 46px; left: var(--hx); top: var(--hy); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 40%, rgba(255, 255, 255, 0.4) 42% 60%, transparent 62%);
  box-shadow: 0 0 0 4px rgba(255, 79, 143, 0.9), 0 0 24px #fff; animation: tutor 1.6s ease-in-out infinite; }
@keyframes tutor { 0%, 15% { transform: translate(-50%, -50%) scale(1); opacity: 0; } 25% { opacity: 1; } 70% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.9); opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))); opacity: 0; } }

/* ---------- Sheet (modal) ---------- */
.sheet { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: calc(var(--safe-t) + 34px) 16px calc(var(--safe-b) + 16px); background: rgba(40, 8, 45, 0.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.sheet-card { position: relative; min-width: 0; width: min(420px, 100%); max-height: 100%; display: flex; flex-direction: column; border-radius: 30px; background: linear-gradient(180deg, var(--cream), var(--cream-2)); border: 5px solid #fff; box-shadow: 0 8px 0 rgba(150, 50, 100, 0.45), var(--shadow); padding: 40px 20px 20px; animation: cardIn 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes cardIn { from { transform: translateY(40px) scale(0.85); opacity: 0; } }
.sheet-ribbon { position: absolute; left: 50%; top: -28px; transform: translateX(-50%); max-width: 92%; padding: 12px 26px 14px; border-radius: 18px; text-align: center; background: linear-gradient(180deg, #ff86b3, var(--berry) 50%, var(--berry-deep)); border: 4px solid #fff; box-shadow: 0 5px 0 var(--berry-lip), 0 10px 18px rgba(60, 10, 50, 0.35); }
.sheet-ribbon h2 { margin: 0; color: #fff; font: 400 26px/1 var(--display); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-body { overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; }
.sheet-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
.sheet-actions:empty { display: none; }
.sheet-actions .jbtn { flex: 1 1 40%; font-size: 20px; padding: 12px 14px 14px; }
.sheet-actions .jbtn.wide { flex-basis: 100%; }
.sheet .sub { text-align: center; color: var(--ink-soft); font-weight: 800; margin: 0 0 10px; }
.big-stars { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin: 10px 0 10px; font-size: 64px; }
.big-stars .star:nth-child(2) { font-size: 80px; margin-bottom: 14px; }
.big-stars .star { background: #ecd3df; animation: starIn 0.5s calc(var(--k) * 0.25s + 0.2s) both cubic-bezier(0.2, 1.6, 0.4, 1); }
.big-stars .star.on { background: linear-gradient(180deg, #fff3a6, var(--sun) 45%, var(--sun-deep)); filter: drop-shadow(0 3px 0 #b46c00) drop-shadow(0 0 12px rgba(255, 210, 80, 0.8)); }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
.score-big { text-align: center; font: 400 40px/1 var(--display); color: var(--berry-deep); margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.goal-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; padding: 0; list-style: none; }
.goal-row .goal { box-shadow: 0 3px 0 rgba(140, 40, 90, 0.25); }
.facts { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.fact { padding: 6px 12px; border-radius: 12px; background: #fff; font-weight: 900; font-size: 14px; color: var(--ink-soft); }
.fact b { color: var(--ink); font: 400 18px/1 var(--display); margin-left: 4px; }
.tips { margin: 12px 0 0; padding: 12px 14px; border-radius: 18px; background: #fffbe8; border: 3px dashed #f2cf62; }
.tips h3 { margin: 0 0 6px; font: 400 18px/1.2 var(--display); color: var(--sun-deep); }
.tips ul { margin: 0; padding-left: 20px; }
.tips li { margin: 6px 0; font-weight: 700; line-height: 1.35; }
.intro-card { display: flex; gap: 14px; align-items: center; margin: 4px 0; }
.intro-card img { width: 76px; height: 76px; flex: none; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(60, 10, 50, 0.3)); }
.intro-card p { margin: 0; font-weight: 800; line-height: 1.35; }

/* Settings */
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 2px dashed #f3d2e1; font-weight: 900; }
.setting:last-child { border-bottom: 0; }
.setting input[type="range"] { width: 52%; accent-color: var(--berry); }
.setting select { font: inherit; padding: 6px 10px; border-radius: 10px; border: 2px solid #f0c6da; background: #fff; color: var(--ink); }
.toggle { appearance: none; -webkit-appearance: none; width: 56px; height: 32px; border-radius: 99px; background: #e5c9d6; position: relative; cursor: pointer; transition: background 0.2s; flex: none; margin: 0; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
.toggle:checked { background: var(--mint); }
.toggle:checked::after { transform: translateX(24px); }
.linkish { background: none; border: 0; padding: 0; font-weight: 900; color: var(--berry-deep); text-decoration: underline; cursor: pointer; }
.credits { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 10px 0 0; }

/* How to play */
.howto { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: none; }
.howto::-webkit-scrollbar { display: none; }
.howto-card { flex: 0 0 100%; scroll-snap-align: center; background: #fff; border-radius: 20px; padding: 16px; text-align: center; box-shadow: inset 0 0 0 3px #fbe1ec; }
.howto-card h3 { margin: 0 0 8px; font: 400 22px/1.1 var(--display); color: var(--berry-deep); }
.howto-card .row { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 6px 0 10px; min-height: 64px; }
.howto-card .row img { width: 54px; height: 54px; object-fit: contain; }
.howto-card .row .arrow { font: 400 28px/1 var(--display); color: var(--ink-soft); padding: 0 6px; }
.howto-card p { margin: 0; font-weight: 800; }
.dots { display: flex; justify-content: center; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #f0c6da; }
.dots i.on { background: var(--berry); }

@media (max-width: 360px) {
  .hud-moves { width: 64px; height: 64px; }
  .hud-big { font-size: 26px; }
  .node { width: 50px; height: 50px; margin: -25px 0 0 -25px; font-size: 19px; }
  .jbtn-big { font-size: 28px; padding: 14px 48px 18px; }
  .sheet-ribbon h2 { font-size: 22px; }
}

/* Gleam: a light sweep across buttons and panels every few seconds, so the
   game always feels alive. Each element gets a random --gleam-delay from JS. */
.rbtn, .pill, .hud-score { position: relative; }
.jbtn, .rbtn, .pill, .sheet-ribbon, .hud-score, .world-banner { overflow: hidden; }
.jbtn::after, .rbtn::after, .pill::after, .sheet-ribbon::after, .hud-score::after, .world-banner::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%);
  transform: skewX(-20deg);
  animation: gleam var(--gleam-cycle, 7s) ease-in-out var(--gleam-delay, 0s) infinite;
}
.rbtn::after { --gleam-cycle: 8.5s; }
.pill::after, .world-banner::after { --gleam-cycle: 9.5s; }
.sheet-ribbon::after { --gleam-cycle: 5.5s; }
.hud-score::after { --gleam-cycle: 11s; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.65) 50%, transparent 80%); }
@keyframes gleam { 0%, 84% { left: -70%; } 100% { left: 140%; } }

/* Tablets: scale the chrome up so it is not lost on a big screen. */
@media (min-width: 700px) and (min-height: 900px) {
  .sheet-card { zoom: 1.3; }
  .hud, .goals { zoom: 1.25; }
  .map-bar, .title-actions { zoom: 1.2; }
}

/* Motion setting: html.reduce-motion forces it off; html.motion-on overrides the OS preference. */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
@media (prefers-reduced-motion: reduce) {
  :root:not(.motion-on) *, :root:not(.motion-on) *::before, :root:not(.motion-on) *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}