:root {
 color-scheme: light;
 --canvas: #d9f4fc;
 --surface: #fff5e9;
 --surface-2: #ffe7ef;
 --border: #efb7cc;
 --border-strong: #cf77a0;
 --ink: #713253;
 --muted: #885470;
 --accent: #c92d72;
 --accent-hover: #b82768;
 --accent-ink: #ffffff;
 --accent-text: #b52969;
 --accent-soft: #ffe0ec;
 --accent-strong: #b12466;
 --accent-border: #df82a8;
 --success: #a4efd0;
 --success-ink: #123d2f;
 --success-soft: #17392f;
 --success-strong: #a4efd0;
 --warning: #ffe2a0;
 --warning-ink: #49300a;
 --warning-soft: #3b2e1b;
 --warning-strong: #ffe2a0;
 --danger: #dc3472;
 --danger-ink: #ffffff;
 --danger-soft: #ffe1eb;
 --danger-strong: #b81c54;
 --chart-1: #ff668e;
 --chart-2: #59c6ff;
 --chart-3: #ffcf58;
 --chart-4: #62e3b1;
 --chart-5: #b68aff;
 --chart-6: #ffa05d;
 --font-display: 'Outfit', system-ui, sans-serif;
 --font-body: 'Outfit', system-ui, sans-serif;
 --font-sans: 'Outfit', system-ui, sans-serif;
 --font-mono: 'Geist Mono', monospace;
 --display-weight: 800;
 --display-tracking: -0.045em;
 --eyebrow-tracking: 0.12em;
 --radius-btn: 999px;
 --radius-card: 24px;
 --radius-input: 12px;
 --border-w: 1px;
 --border-strong-w: 1px;
 --shadow-card: 0 6px 0 #dc9ab8,0 14px 24px rgba(85,40,65,.13);
 --shadow-raised: 0 10px 0 #d98daf,0 20px 50px rgba(61,34,77,.25);
 --shadow-btn: 0 6px 0 #b83271,0 8px 16px rgba(110,40,75,.2);
 --card-pad: 1.5rem;
 --caps: none;
 --caps-tracking: .04em;
 --btn-weight: 700;
 --measure: 65ch;
 --x-bg-glow: #362352;
 --x-board: #713f85;
 --x-cell: #91649d;
 --x-jelly: #dc92e0;
 --x-gold: #d38a1c;
 --x-candy-highlight: #ffffff;
 --x-candy-shadow: #48244b;
 --x-gradient: linear-gradient(180deg,#c5effc,#fce8ed);
 --x-frost: #ffffff;
 --x-land-veil: rgba(255,241,240,.12);
 --x-frost-shadow: #ca79a3;
 --x-wafer: #ffdc83;
 --x-wafer-edge: #e8a94b;
 --x-stop: #f77bb0;
 --x-stop-dark: #d84987;
 --x-lock: #bb99bd;
 --x-lock-dark: #99799f;
}

html[data-theme="dark"] {
 color-scheme: dark;
 --canvas: #45315f;
 --surface: #674571;
 --surface-2: #795083;
 --border: #ce92bd;
 --border-strong: #f3c0dc;
 --ink: #fff4e2;
 --muted: #efd2e3;
 --accent: #f588b6;
 --accent-hover: #ffa7cc;
 --accent-ink: #612646;
 --accent-text: #ffd2e6;
 --accent-soft: #83517a;
 --accent-strong: #ffe0eb;
 --accent-border: #e6a6c6;
 --success: #a4efd0;
 --success-ink: #123d2f;
 --success-soft: #17392f;
 --success-strong: #a4efd0;
 --warning: #ffe2a0;
 --warning-ink: #49300a;
 --warning-soft: #3b2e1b;
 --warning-strong: #ffe2a0;
 --danger: #ffacc8;
 --danger-ink: #4c1228;
 --danger-soft: #432039;
 --danger-strong: #ffacc8;
 --chart-1: #ff668e;
 --chart-2: #59c6ff;
 --chart-3: #ffcf58;
 --chart-4: #62e3b1;
 --chart-5: #b68aff;
 --chart-6: #ffa05d;
 --font-display: 'Outfit', system-ui, sans-serif;
 --font-body: 'Outfit', system-ui, sans-serif;
 --font-sans: 'Outfit', system-ui, sans-serif;
 --font-mono: 'Geist Mono', monospace;
 --display-weight: 800;
 --display-tracking: -.045em;
 --eyebrow-tracking: .12em;
 --radius-btn: 999px;
 --radius-card: 24px;
 --radius-input: 12px;
 --border-w: 1px;
 --border-strong-w: 1px;
 --shadow-card: 0 6px 0 #583362,0 14px 24px rgba(25,15,45,.2);
 --shadow-raised: 0 10px 0 #583362,0 20px 50px rgba(25,15,45,.3);
 --shadow-btn: 0 6px 0 #a62d65,0 8px 16px rgba(25,15,45,.25);
 --card-pad: 1.5rem;
 --caps: none;
 --caps-tracking: .04em;
 --btn-weight: 700;
 --measure: 65ch;
 --x-bg-glow: #362352;
 --x-board: #58346e;
 --x-cell: #7d4b90;
 --x-jelly: #bd77cc;
 --x-gold: #ffe087;
 --x-candy-highlight: #ffffff;
 --x-candy-shadow: #48244b;
 --x-gradient: linear-gradient(180deg,#45315f,#74567e);
 --x-frost: #fff0f7;
 --x-land-veil: rgba(56,30,90,.45);
 --x-frost-shadow: #684474;
 --x-wafer: #ffdc83;
 --x-wafer-edge: #bb8040;
 --x-stop: #f77bb0;
 --x-stop-dark: #c64078;
 --x-lock: #b9a5c6;
 --x-lock-dark: #8f729c;
}

html[data-theme="light"] {
 color-scheme: light;
 --canvas: #d9f4fc;
 --surface: #fff5e9;
 --surface-2: #ffe7ef;
 --border: #efb7cc;
 --border-strong: #cf77a0;
 --ink: #713253;
 --muted: #885470;
 --accent: #c92d72;
 --accent-hover: #b82768;
 --accent-ink: #ffffff;
 --accent-text: #b52969;
 --accent-soft: #ffe0ec;
 --accent-strong: #b12466;
 --accent-border: #df82a8;
 --success: #146e51;
 --success-ink: #ffffff;
 --success-soft: #dff6ec;
 --success-strong: #146e51;
 --warning: #855b0d;
 --warning-ink: #ffffff;
 --warning-soft: #fff0c9;
 --warning-strong: #74500a;
 --danger: #dc3472;
 --danger-ink: #ffffff;
 --danger-soft: #ffe1eb;
 --danger-strong: #b81c54;
 --chart-1: #ff668e;
 --chart-2: #59c6ff;
 --chart-3: #ffcf58;
 --chart-4: #62e3b1;
 --chart-5: #b68aff;
 --chart-6: #ffa05d;
 --font-display: 'Outfit', system-ui, sans-serif;
 --font-body: 'Outfit', system-ui, sans-serif;
 --font-sans: 'Outfit', system-ui, sans-serif;
 --font-mono: 'Geist Mono', monospace;
 --display-weight: 800;
 --display-tracking: -.045em;
 --eyebrow-tracking: .12em;
 --radius-btn: 999px;
 --radius-card: 24px;
 --radius-input: 12px;
 --border-w: 1px;
 --border-strong-w: 1px;
 --shadow-card: 0 6px 0 #dc9ab8,0 14px 24px rgba(85,40,65,.13);
 --shadow-raised: 0 10px 0 #d98daf,0 20px 50px rgba(61,34,77,.25);
 --shadow-btn: 0 6px 0 #b83271,0 8px 16px rgba(110,40,75,.2);
 --card-pad: 1.5rem;
 --caps: none;
 --caps-tracking: .04em;
 --btn-weight: 700;
 --measure: 65ch;
 --x-bg-glow: #ddc5f5;
 --x-board: #713f85;
 --x-cell: #91649d;
 --x-jelly: #dc92e0;
 --x-gold: #d38a1c;
 --x-candy-highlight: #ffffff;
 --x-candy-shadow: #48244b;
 --x-gradient: linear-gradient(180deg,#c5effc,#fce8ed);
 --x-frost: #ffffff;
 --x-land-veil: rgba(255,241,240,.12);
 --x-frost-shadow: #ca79a3;
 --x-wafer: #ffdc83;
 --x-wafer-edge: #e8a94b;
 --x-stop: #f77bb0;
 --x-stop-dark: #d84987;
 --x-lock: #bb99bd;
 --x-lock-dark: #99799f;
}

.sweet-body {background:var(--x-gradient);color:var(--ink);font-family:var(--font-body);min-height:100vh;overflow-x:hidden}
.sweet-body::before {content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 35%,color-mix(in srgb,var(--x-bg-glow) 75%,transparent),transparent 55%);z-index:-1}
.sweet-shell {max-width:1440px;margin:auto;padding:0 3rem}
.sweet-nav {height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.sweet-brand {display:flex;align-items:center;gap:.75rem;border:0;background:transparent;color:var(--ink);cursor:pointer;text-align:left;font-size:1.8rem;font-weight:800;letter-spacing:-.08em;line-height:1}
.sweet-brand>.icon {width:40px;height:40px;color:var(--accent-text);transform:rotate(-20deg)}
.brand-accent {color:var(--accent-text)}
.sweet-brand small {display:block;font-size:.55rem;letter-spacing:.22em;color:var(--muted);margin-top:.5rem;font-weight:500}
.sweet-nav-right {display:flex;align-items:center;gap:.75rem}
.sweet-icon {display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--muted);cursor:pointer;transition:transform .2s,background .2s}
.sweet-icon:hover {background:var(--surface-2);color:var(--ink);transform:translateY(-2px)}
.sweet-icon .icon {width:18px;height:18px}
.life-display {display:flex;gap:.35rem;color:var(--danger);padding-right:.5rem}
.life-display .icon {width:22px;height:22px;fill:currentColor}
.life-display .empty-heart {fill:transparent;color:var(--muted);opacity:.5}
.life-timer {font-family:var(--font-mono);font-size:.7rem;min-width:0;color:var(--muted)}
.home-screen {display:grid;grid-template-columns:1.1fr 1fr;align-items:center;min-height:calc(100vh - 160px);gap:2rem;padding:3rem 0}
.sweet-pill {display:inline-block;padding:.5rem .85rem;border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--accent-strong);border-radius:999px;font-size:.65rem;letter-spacing:.13em;font-weight:600}
.home-copy h1 {font-size:clamp(3rem,5.3vw,5.8rem);line-height:1.05;letter-spacing:-.055em;font-weight:800;margin:1.5rem 0}
.home-copy h1 span {color:var(--accent-text)}
.home-copy>p {color:var(--muted);font-size:1.1rem;max-width:380px;line-height:1.6}
.home-actions {display:flex;gap:.75rem;margin:2rem 0}
.sweet-button {display:inline-flex;align-items:center;justify-content:center;gap:.75rem;border:1px solid transparent;border-radius:999px;background:var(--accent);color:var(--accent-ink);padding:.9rem 1.5rem;font:700 1rem var(--font-body);cursor:pointer;box-shadow:var(--shadow-btn);transition:transform .18s,background .18s}
.sweet-button:hover {transform:translateY(-3px);background:var(--accent-hover)}
.sweet-button:active {transform:translateY(1px)}
.sweet-button.secondary {background:var(--surface);border-color:var(--border);color:var(--ink);box-shadow:none}
.sweet-button.secondary:hover {background:var(--surface-2)}
.sweet-button.danger {background:var(--danger);color:var(--danger-ink)}
.sweet-button:disabled {opacity:.45;cursor:not-allowed;transform:none}
.sweet-button .icon {width:18px;height:18px}
.home-records {display:flex;gap:2rem;margin-top:2.5rem}
.home-records>div {display:flex;align-items:center;gap:.8rem}
.home-records .icon {width:24px;height:24px;color:var(--x-gold)}
.home-records span {font-size:.6rem;color:var(--muted);letter-spacing:.12em}
.home-records strong {display:block;font-size:1.35rem;letter-spacing:-.03em;color:var(--ink);margin-top:.35rem}
.home-copy .home-note {font-size:.75rem;margin-top:2rem;opacity:.8}
.home-visual {position:relative;display:flex;align-items:center;justify-content:center;min-height:440px}
.orbit {position:absolute;width:400px;height:400px;border:1px solid var(--border);border-radius:50%;opacity:.7;transform:rotate(-25deg)}
.orbit-two {width:460px;height:250px;transform:rotate(25deg)}
.candy-showcase {display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;transform:rotate(-10deg);position:relative;z-index:1;width:320px}
.showcase-piece {display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid var(--border);border-radius:24px;background:color-mix(in srgb,var(--surface-2) 75%,transparent);box-shadow:var(--shadow-card);animation:float-candy 6s ease-in-out infinite}
.showcase-piece svg {width:82%;height:82%;filter:drop-shadow(0 8px 6px rgba(0,0,0,.3))}
.showcase-piece:nth-child(2n) {animation-delay:-2s}
.showcase-piece:nth-child(3n) {animation-delay:-4s}
.showcase-label {position:absolute;bottom:0;display:flex;gap:.75rem;align-items:center;font-size:.65rem;letter-spacing:.16em;color:var(--muted)}
.showcase-label .icon {color:var(--x-gold);width:18px}
.sweet-footer {display:flex;justify-content:space-between;align-items:center;height:60px;border-top:1px solid var(--border);color:var(--muted);font-size:.7rem}
.sweet-footer button {display:flex;align-items:center;gap:.25rem;border:0;background:none;color:var(--muted);cursor:pointer}
.sweet-footer .icon {width:14px;height:14px}
.game-head,.map-head {display:flex;align-items:center;justify-content:space-between;padding:1.5rem 0}
.game-head h1,.map-head h1 {font-size:1.7rem;letter-spacing:-.04em;margin:0;font-weight:700}
.game-head p,.map-head p {color:var(--muted);font-size:.8rem;margin:.35rem 0 0}
.game-tools {display:flex;gap:.5rem}
.game-layout {display:grid;grid-template-columns:190px minmax(0,520px) 190px;justify-content:center;gap:1.5rem;align-items:start;padding-bottom:1.5rem}
.game-panel {background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:1.25rem}
.panel-label {font-size:.6rem;letter-spacing:.14em;font-weight:600;color:var(--muted);margin:0 0 .5rem}
.score-number {font-size:2.35rem;letter-spacing:-.06em;font-weight:700;line-height:1.15}
.score-best {margin-top:.8rem;font-size:.7rem;color:var(--muted)}
.score-stars {display:flex;gap:.35rem;color:var(--x-gold);margin:1rem 0 .7rem}
.score-stars .icon {width:23px;height:23px}
.star-filled {fill:currentColor}
.sweet-star path {fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .2s}
.sweet-star.star-filled path,.sweet-star.earned path {fill:currentColor;stroke:currentColor}
.sweet-star.star-unlocked {animation:star-pop .5s cubic-bezier(.2,.8,.3,1.3)}
.sweet-heart path {fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.life-display .sweet-heart:not(.empty-heart) path {fill:currentColor}
.star-caption {font-size:.65rem;color:var(--muted);margin-top:.65rem;line-height:1.5}
.result-star-caption {font-size:.8rem!important;margin:0 0 .75rem!important;color:var(--warning-strong)!important}
.sweet-volume {width:140px;accent-color:var(--accent);cursor:pointer}
.sound-preview {margin-top:1rem;width:100%;font-size:.85rem}
.progress-track {height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.progress-fill {height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
.moves-box {text-align:center;padding:1.25rem 0;border-top:1px solid var(--border);margin-top:1.25rem}
.moves-number {font-size:3rem;color:var(--accent-text);font-weight:800;line-height:1.1}
.moves-box.low .moves-number {color:var(--danger-strong)}
.goal-item {padding:1rem 0;border-bottom:1px solid var(--border)}
.goal-item:last-child {border-bottom:0;padding-bottom:0}
.goal-top {display:flex;align-items:center;gap:.5rem;font-size:.8rem;margin-bottom:.55rem}
.goal-top svg {width:25px;height:25px}
.goal-count {display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-bottom:.5rem}
.goal-done {color:var(--success-strong)}
.board-frame {padding:12px;border:1px solid var(--accent-border);border-radius:26px;background:var(--x-board);box-shadow:0 0 70px color-mix(in srgb,var(--accent) 8%,transparent),var(--shadow-raised);position:relative}
#game-canvas {width:100%;aspect-ratio:1;border-radius:17px;overflow:hidden;touch-action:none;outline:none}
#game-canvas canvas {display:block!important;width:100%!important;height:100%!important}
#game-canvas:focus-visible {outline:3px solid var(--accent);outline-offset:5px}
.board-bottom {display:flex;justify-content:space-between;align-items:center;margin:.75rem .25rem;color:var(--muted);font-size:.7rem;gap:.75rem}
.board-bottom button {background:none;border:0;color:var(--accent-text);display:flex;gap:.3rem;align-items:center;cursor:pointer}
.board-bottom .icon {width:14px;height:14px}
.combo-display {text-align:center;font-size:1.15rem;color:var(--accent-text);min-height:1.7rem;font-weight:700}
.tip-panel {margin-top:1rem;color:var(--muted);font-size:.75rem;line-height:1.6}
.tip-panel h3 {color:var(--ink);font-size:.9rem;margin-bottom:.5rem}
.tip-pieces {display:flex;gap:.5rem;margin:.5rem 0}
.tip-pieces svg {width:38px;height:38px}
.map-screen {padding-bottom:2rem}
.level-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem}
.level-tile {background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:1.2rem;text-align:left;color:var(--ink);cursor:pointer;position:relative;transition:transform .2s,border-color .2s}
.level-tile:hover:not(:disabled) {transform:translateY(-4px);border-color:var(--accent)}
.level-tile.current {border-color:var(--accent);background:var(--accent-soft)}
.level-tile:disabled {opacity:.45;cursor:not-allowed}
.level-num {font-size:2rem;font-weight:800;letter-spacing:-.06em}
.level-name {display:block;font-size:.8rem;margin:.2rem 0 .75rem;color:var(--muted)}
.level-tile .level-stars {display:flex;gap:.2rem;color:var(--x-gold)}
.level-stars .icon {width:16px;height:16px}
.level-lock {position:absolute;right:1rem;top:1.2rem;width:17px;height:17px;color:var(--muted)}
.map-summary {display:flex;gap:1.5rem;color:var(--muted);font-size:.8rem;margin-bottom:1.5rem}
.map-summary strong {color:var(--ink)}
.sweet-overlay {position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:50;padding:1.5rem}
.sweet-overlay[hidden],.sweet-toast[hidden] {display:none}
.sweet-dialog {width:100%;max-width:460px;max-height:85vh;overflow:auto;position:relative;background:var(--surface);border:1px solid var(--accent-border);border-radius:28px;padding:2rem;box-shadow:var(--shadow-raised)}
.sweet-dialog h2 {font-size:2rem;letter-spacing:-.045em;font-weight:800;margin:.75rem 0}
.sweet-dialog p {color:var(--muted);line-height:1.6;font-size:.9rem}
.dialog-close {position:absolute;right:1rem;top:1rem}
.dialog-emblem {width:55px;height:55px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-strong)}
.dialog-emblem .icon {width:28px;height:28px}
.dialog-actions {display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}
.dialog-actions .sweet-button {width:100%}
.result-dialog {text-align:center}
.result-dialog .dialog-emblem {margin:auto}
.result-score {font-size:3.5rem;font-weight:800;letter-spacing:-.06em;margin:.5rem 0}
.result-stars {display:flex;justify-content:center;gap:.75rem;color:var(--x-gold);margin:1rem 0}
.result-stars .icon {width:44px;height:44px}
.result-stars .earned {animation:star-pop .6s cubic-bezier(.2,.8,.3,1.3) both;fill:currentColor}
.result-stars .earned:nth-child(2) {animation-delay:.2s}
.result-stars .earned:nth-child(3) {animation-delay:.4s}
.result-meta {display:flex;justify-content:center;gap:1rem;margin:.75rem 0;color:var(--muted);font-size:.8rem}
.new-best {display:inline-block;color:var(--warning-strong);background:var(--warning-soft);padding:.3rem .7rem;border-radius:999px;font-size:.75rem;font-weight:600}
.settings-row {display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--border);gap:1rem}
.settings-row small {display:block;color:var(--muted);font-size:.7rem;margin-top:.2rem}
.sweet-switch {appearance:none;width:46px;height:26px;flex-shrink:0;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:999px;cursor:pointer;position:relative}
.sweet-switch::after {content:"";position:absolute;width:18px;height:18px;border-radius:50%;top:3px;left:3px;background:var(--muted);transition:transform .2s}
.sweet-switch:checked {background:var(--accent)}
.sweet-switch:checked::after {background:var(--accent-ink);transform:translateX(19px)}
.help-step {display:flex;gap:.75rem;align-items:flex-start;margin:1rem 0}
.help-step>span {background:var(--accent-soft);color:var(--accent-strong);border-radius:50%;width:27px;height:27px;flex-shrink:0;text-align:center;font-size:.8rem;line-height:27px;font-weight:700}
.help-step p {margin:0}
.sweet-toast {position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);padding:.8rem 1.25rem;background:var(--surface-2);color:var(--ink);border:1px solid var(--accent-border);border-radius:999px;z-index:80;font-size:.8rem;max-width:90vw;box-shadow:var(--shadow-card)}
.sweet-storage-note {font-size:.75rem!important;margin-top:1.25rem}
.sweet-dialog .level-preview-goals {text-align:left}
.sweet-button:focus-visible,.sweet-icon:focus-visible,.level-tile:focus-visible,.sweet-switch:focus-visible,.sweet-brand:focus-visible {outline:3px solid var(--accent-text);outline-offset:4px}
@keyframes float-candy {0%,100% {transform:translateY(0)}50% {transform:translateY(-12px)}}
@keyframes star-pop {from {transform:scale(.3) rotate(-25deg)}to {transform:scale(1) rotate(0)}}
html.reduced-motion *, .sweet-body.reduce-motion * {animation:none!important;transition:none!important}
@media(max-height:820px) and (min-width:1000px) {.sweet-nav{height:80px}.game-head{padding:1rem 0}.game-layout{grid-template-columns:180px minmax(0,460px) 180px}.home-screen{min-height:calc(100vh - 140px)}.sweet-shell{padding:0 2.5rem}.home-copy h1{font-size:4.5rem}}
@media(max-width:1050px) {.game-layout{grid-template-columns:150px minmax(0,480px);gap:1rem}.game-layout>.right-panel{display:none}.home-visual{min-height:360px}.orbit{width:300px;height:300px}.orbit-two{width:350px;height:210px}.candy-showcase{width:270px}.home-copy h1{font-size:3.8rem}.sweet-shell{padding:0 1.5rem}.home-actions{flex-direction:column;align-items:flex-start}.level-grid{gap:.75rem}}
@media(max-width:700px) {.sweet-shell{padding:0 1rem}.sweet-nav{height:80px}.sweet-nav-right{gap:.35rem}.sweet-brand{font-size:1.35rem}.sweet-brand>.icon{width:28px;height:28px}.sweet-icon{width:34px;height:34px}.life-display .icon{width:15px;height:15px}.life-display{gap:.15rem}.life-timer{display:none}.home-screen{grid-template-columns:1fr;padding:2rem 0;gap:1rem}.home-copy h1{font-size:3.5rem}.home-visual{min-height:340px}.home-actions{flex-direction:column;align-items:stretch}.home-records{gap:1.5rem}.sweet-footer>span:last-child{display:none}.game-layout{grid-template-columns:1fr}.game-panel.left-panel{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem}.left-panel .score-block{grid-column:1}.moves-box{grid-column:2;grid-row:1;margin:0;padding:0;border:0;align-self:center}.left-panel .goals-block{grid-column:1/-1;display:flex;gap:1rem}.goals-block .panel-label{display:none}.goals-block .goal-item{flex:1;padding:0;border:0}.score-stars{margin:.4rem 0}.score-best{margin-top:.3rem}.score-number{font-size:1.8rem}.moves-number{font-size:2.5rem}.game-head h1{font-size:1.4rem}.game-head{gap:1rem}.game-head p{font-size:.65rem}.game-tools{gap:.3rem}.level-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.level-tile{padding:.75rem}.level-num{font-size:1.5rem}.level-name{font-size:.65rem}.level-lock{right:.5rem;top:.8rem}.map-summary{flex-direction:column;gap:.5rem}.sweet-dialog{padding:1.5rem}.sweet-overlay{padding:1rem}}
/* Five worlds, earned tools, and the victory ceremony. */
.world-section {grid-column:1/-1;padding:1.5rem;border:1px solid var(--border);border-radius:24px;background:var(--surface)}
.world-section h2 {display:flex;gap:.6rem;align-items:center;font-size:1.4rem;margin:0}
.world-section h2 .icon {width:24px;height:24px;color:var(--chart-4)}
.world-section h2 small {margin-left:auto;color:var(--muted);font-size:.75rem;font-weight:400}
.world-section>p {color:var(--muted);font-size:.85rem;margin:.7rem 0 1.3rem}
.world-1 h2 .icon {color:var(--chart-2)} .world-2 h2 .icon {color:var(--chart-2)} .world-3 h2 .icon {color:var(--chart-6)} .world-4 h2 .icon {color:var(--chart-5)}
.sweet-body[data-world="0"]::before {background:radial-gradient(ellipse at 70% 40%,color-mix(in srgb,var(--chart-4) 14%,transparent),transparent 65%)}
.sweet-body[data-world="1"]::before {background:radial-gradient(ellipse at 70% 40%,color-mix(in srgb,var(--chart-2) 18%,transparent),transparent 65%)}
.sweet-body[data-world="2"]::before {background:radial-gradient(ellipse at 70% 40%,color-mix(in srgb,var(--chart-2) 25%,transparent),transparent 65%)}
.sweet-body[data-world="3"]::before {background:radial-gradient(ellipse at 70% 40%,color-mix(in srgb,var(--chart-6) 20%,transparent),transparent 65%)}
.sweet-body[data-world="4"]::before {background:radial-gradient(ellipse at 70% 40%,color-mix(in srgb,var(--chart-5) 25%,transparent),transparent 65%)}
.booster-bar {display:flex;justify-content:center;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.booster-button {display:flex;align-items:center;gap:.4rem;padding:.6rem .75rem;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:14px;font:500 .8rem var(--font-body);cursor:pointer;transition:transform .2s,border-color .2s}
.booster-button .icon {width:16px;height:16px;color:var(--accent-text)}
.booster-button strong {background:var(--accent-soft);color:var(--accent-text);border-radius:6px;padding:.1rem .4rem}
.booster-button:hover {transform:translateY(-2px);border-color:var(--accent)} .booster-button.active {border-color:var(--accent);background:var(--accent-soft)} .booster-button:disabled {opacity:.4;cursor:not-allowed}
.stats-grid {display:grid;grid-template-columns:1fr 1fr;gap:.6rem;text-align:left;margin:1.5rem 0}
.stats-grid>div {background:var(--surface-2);padding:.8rem;border-radius:12px} .stats-grid small {display:block;color:var(--muted)} .stats-grid strong {display:block;font-size:1.4rem;margin-top:.3rem}
.result-stars .reveal-star {opacity:.15;transform:scale(.65)} .result-stars .celebrated {opacity:1;transform:scale(1);animation:starCelebrate .55s ease both}
@keyframes starCelebrate {0%{transform:scale(.3) rotate(-25deg)}60%{transform:scale(1.35) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
.reduce-motion .result-stars .reveal-star {opacity:1;transform:none} .reduce-motion .celebrated {animation:none}
.game-head h1 {margin-top:.6rem}.goals-block .goal-item {margin-top:.7rem}.goal-item .goal-count {font-size:.7rem}
@media(max-width:700px){.world-section {padding:1rem}.world-section h2 {flex-wrap:wrap}.world-section h2 small {margin-left:0}.home-actions {flex-wrap:wrap}.booster-button {font-size:.7rem;padding:.6rem}.stats-grid {gap:.4rem}}
@media(prefers-reduced-motion:reduce){.result-stars .reveal-star {opacity:1;transform:none}.result-stars .celebrated {animation:none}}
@media(max-width:1050px) and (min-width:701px){.game-layout>.right-panel{display:block;grid-column:1/-1}.right-panel .goals-block #goal-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.right-panel>.tip-panel{display:none}}
@media(max-width:700px){.game-layout>.right-panel{display:block}.right-panel>.tip-panel{display:none}.right-panel #goal-list{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.right-panel .goal-item{border:0}}
/* Candyland: illustrated scenery, frosting frames and a winding adventure trail. */
.sweet-body {background:linear-gradient(var(--x-land-veil),var(--x-land-veil)),url('/candyland-art') center center / cover fixed; background-color:var(--canvas)}
.sweet-body::before,.sweet-body[data-world]::before {display:none}
.sweet-shell {max-width:1360px;padding:0 2.5rem}
.sweet-nav {height:88px;border-bottom:0;gap:1rem}
.sweet-brand {font-size:2rem;color:var(--accent-text);filter:drop-shadow(0 2px 0 var(--x-frost));letter-spacing:-.065em}
.sweet-brand>.icon {color:var(--accent);width:45px;height:45px}.sweet-brand small {color:var(--ink);font-weight:800;letter-spacing:.12em}
.sweet-nav-right {padding:.55rem .7rem;border:3px solid var(--x-frost);border-radius:999px;background:var(--surface);box-shadow:0 4px 0 var(--x-frost-shadow)}
.sweet-icon {background:var(--surface-2);color:var(--accent-text);border:2px solid var(--border);box-shadow:0 2px 0 var(--x-frost-shadow)}
.sweet-pill {font-size:.65rem;background:var(--surface);border:2px solid var(--x-frost);color:var(--accent-text);box-shadow:0 3px 0 var(--x-frost-shadow)}
.sweet-button {font-size:1rem;border:3px solid var(--x-frost);box-shadow:var(--shadow-btn);background:linear-gradient(180deg,var(--accent),var(--accent-hover));padding:.8rem 1.5rem;font-weight:800}
.sweet-button.secondary {background:var(--surface);color:var(--ink);border-color:var(--x-frost);box-shadow:0 4px 0 var(--x-frost-shadow)}
.sweet-button:hover {transform:translateY(-3px)}.sweet-button:active {transform:translateY(3px);box-shadow:0 1px 0 var(--x-frost-shadow)}
.candy-home {position:relative;min-height:calc(100vh - 155px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem 0 3rem}
.candy-home-title h1 {font-size:clamp(5rem,9vw,8rem);font-weight:900;letter-spacing:-.08em;line-height:.95;margin:1.3rem 0;color:var(--x-stop);-webkit-text-stroke:3px var(--x-frost);text-shadow:0 8px 0 var(--x-stop-dark),0 12px 20px var(--x-candy-shadow);transform:rotate(-5deg)}
.candy-home-title h1 span {display:block;color:var(--x-wafer);text-shadow:0 8px 0 var(--x-wafer-edge),0 12px 20px var(--x-candy-shadow)}
.candy-home-title>p {display:inline-block;background:var(--surface);border-radius:999px;padding:.5rem 1.2rem;font-weight:700;color:var(--ink);margin:1.3rem 0}
.home-play {display:flex;flex-direction:column;align-items:center;gap:1rem;background:color-mix(in srgb,var(--surface) 90%,transparent);border:5px solid var(--x-frost);padding:1.7rem 2rem 1.1rem;border-radius:40px;box-shadow:var(--shadow-card)}
.play-button {min-width:280px;font-size:1.3rem;padding:.9rem 2rem}.play-button .icon {width:24px;height:24px;fill:currentColor}
.candy-home-tools {display:flex;gap:.75rem}.candy-home-tools .sweet-button {font-size:.8rem;padding:.55rem .8rem}
.home-records {margin:.7rem 0 .3rem;gap:2.5rem;text-align:left}.home-records strong {font-size:1rem}.home-records span {font-weight:700;color:var(--muted)}
.floating-treat {position:absolute;width:110px;height:110px;filter:drop-shadow(0 14px 15px var(--x-frost-shadow));animation:candyFloat 4s ease-in-out infinite;pointer-events:none}
.treat-a {left:21%;top:28%;transform:rotate(-20deg)}.treat-b {right:19%;top:36%;animation-delay:-1.5s}.treat-c {left:25%;bottom:15%;width:75px;animation-delay:-2.5s}
@keyframes candyFloat {0%,100%{translate:0 0;rotate:-10deg}50%{translate:0 -18px;rotate:8deg}}
.sweet-footer {border:0;color:var(--ink);font-weight:700;font-size:.7rem;padding:1rem 0;text-shadow:0 1px 0 var(--x-frost)}
.map-head {padding:1.5rem 1.8rem;margin:1rem 0;background:color-mix(in srgb,var(--surface) 94%,transparent);border:4px solid var(--x-frost);border-radius:30px;box-shadow:var(--shadow-card)}
.map-head h1 {font-size:2.4rem;margin:.6rem 0}.map-head p {color:var(--muted);font-weight:600}
.map-summary {justify-content:center;gap:2rem;background:var(--surface);border:3px solid var(--x-frost);width:max-content;max-width:100%;margin:1.5rem auto;border-radius:999px;padding:.6rem 1.5rem;font-weight:700;box-shadow:0 4px 0 var(--x-frost-shadow)}
.map-summary>span {display:flex;align-items:center;gap:.5rem}.map-summary .icon {width:19px;height:19px;color:var(--x-gold);fill:var(--x-gold)}
.candy-worlds {display:flex;flex-direction:column;gap:2rem;padding:0 0 2rem}
.world-section {position:relative;border:5px solid var(--x-frost);border-radius:44px;padding:1.4rem 1.2rem .8rem;background:linear-gradient(color-mix(in srgb,var(--surface) 16%,transparent),color-mix(in srgb,var(--surface) 45%,transparent)),url('/candyland-art') center 60% / cover;box-shadow:var(--shadow-card);overflow:hidden}
.world-1 {background-position:center,45% 75%}.world-2 {background-position:center,85% 25%}.world-3 {background-position:center,100% 70%}.world-4 {background-position:center,85% 20%}
.world-sign {display:inline-block;background:var(--surface);border:3px solid var(--x-frost);border-radius:22px;padding:.6rem 1.2rem;box-shadow:0 4px 0 var(--x-frost-shadow);position:relative;z-index:2}
.world-sign h2 {font-size:1.4rem;margin:0}.world-sign p {margin:.3rem 0 0;font-size:.75rem;color:var(--muted);font-weight:600}
.level-trail {height:280px;position:relative;width:100%;margin-top:-15px}
.trail-road {position:absolute;inset:0;width:100%;height:100%;overflow:visible}.trail-road path {fill:none;stroke-linecap:round;stroke-linejoin:round}.road-edge {stroke:var(--x-wafer-edge);stroke-width:38}.road-filling {stroke:var(--x-wafer);stroke-width:29}.road-dots {stroke:var(--x-frost);stroke-width:3;stroke-dasharray:6 10}
.level-stop {position:absolute;left:var(--stop-x);top:var(--stop-y);translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:.15rem;width:150px;background:none;border:0;color:var(--ink);cursor:pointer;z-index:3}
.stop-number {display:flex;align-items:center;justify-content:center;width:82px;height:82px;flex-shrink:0;border:5px solid var(--x-frost);background:radial-gradient(circle at 40% 20%,var(--x-frost),var(--x-stop) 40%,var(--accent) 90%);border-radius:50%;box-shadow:0 7px 0 var(--x-stop-dark),0 10px 14px color-mix(in srgb,var(--x-candy-shadow) 25%,transparent);font-size:2rem;font-weight:900;color:var(--accent-ink);text-shadow:0 2px 0 var(--x-stop-dark);transition:transform .18s}
.level-stop:hover .stop-number {transform:scale(1.1) rotate(-5deg)}.level-stop:disabled {cursor:default}.level-stop:disabled .stop-number {background:linear-gradient(140deg,var(--x-lock),var(--x-lock-dark));box-shadow:0 5px 0 var(--x-lock-dark);font-size:1.5rem}.stop-number>.icon {width:17px;height:17px;margin-right:.2rem}
.level-stop .level-stars {display:flex;gap:.1rem;margin-top:.4rem;filter:drop-shadow(0 1px 0 var(--x-frost))}.level-stop .level-stars .icon {width:19px;height:19px;color:var(--x-gold);stroke:var(--x-gold)}
.level-stop .level-name {font-size:.7rem;letter-spacing:0;background:var(--surface);border-radius:999px;padding:.15rem .5rem;font-weight:800;color:var(--ink);max-width:140px}
.you-are-here {position:absolute;top:-25px;color:var(--accent-ink);background:var(--accent);border:2px solid var(--x-frost);padding:.2rem .75rem;border-radius:999px;font-size:.65rem;font-weight:900;animation:trailBounce 1.6s ease-in-out infinite}
@keyframes trailBounce {50%{transform:translateY(-5px)}}.world-reward {display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.7rem;font-weight:800;color:var(--ink);background:var(--surface);border-radius:999px;padding:.4rem .6rem;width:max-content;max-width:100%;margin:0 auto}.world-reward .icon {width:16px;height:16px;color:var(--accent-text)}
.game-head {background:color-mix(in srgb,var(--surface) 94%,transparent);padding:1rem 1.5rem;border:4px solid var(--x-frost);border-radius:28px;margin:.7rem 0 1.5rem;box-shadow:var(--shadow-card)}
.game-head h1 {font-weight:900}.game-head p {color:var(--muted);font-weight:600}.game-panel {border:4px solid var(--x-frost);border-radius:30px;background:var(--surface);box-shadow:var(--shadow-card)}
.board-frame {background:var(--x-board);border:7px solid var(--x-frost);border-radius:34px;box-shadow:0 7px 0 var(--x-frost-shadow),0 15px 30px color-mix(in srgb,var(--x-candy-shadow) 20%,transparent);padding:10px}
.score-number {font-size:2.8rem;color:var(--accent-text);font-weight:900}.moves-number {color:var(--accent-text);font-weight:900}.panel-label {letter-spacing:.06em;font-weight:900;color:var(--muted)}
.board-bottom {background:var(--surface);border:2px solid var(--x-frost);border-radius:999px;padding:.5rem .75rem;margin:.7rem 0;color:var(--ink);font-weight:600;font-size:.7rem}
.booster-button {border:3px solid var(--x-frost);background:var(--surface);box-shadow:0 4px 0 var(--x-frost-shadow);border-radius:18px;font-weight:700;padding:.65rem .8rem}
.combo-display {color:var(--accent-text);margin-top:.7rem;background:var(--surface);border-radius:999px;width:max-content;max-width:100%;padding:.3rem 1rem;margin-left:auto;margin-right:auto;font-size:.9rem;box-shadow:0 3px 0 var(--x-frost-shadow)}
.sweet-dialog {background:var(--surface);border:6px solid var(--x-frost);border-radius:40px;box-shadow:var(--shadow-raised)}.sweet-dialog h2 {color:var(--accent-text)}.sweet-overlay {background:color-mix(in srgb,var(--x-candy-shadow) 45%,transparent)}
.sweet-toast {border:3px solid var(--x-frost);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card);font-weight:700}
.reduce-motion .floating-treat,.reduce-motion .you-are-here {animation:none}
@media(max-height:820px) and (min-width:1000px){.sweet-nav{height:70px}.game-head{padding:.6rem 1rem;margin:.4rem 0 1rem}.game-layout{grid-template-columns:170px minmax(0,440px) 190px}.candy-home-title h1{font-size:5.8rem}.home-play{padding:1rem 1.5rem}.candy-home-title>p{margin:1rem 0}}
@media(max-width:700px){.sweet-shell{padding:0 .75rem}.sweet-nav{height:75px}.sweet-brand{font-size:1.6rem}.sweet-brand small{font-size:.45rem}.sweet-nav-right{gap:.4rem;padding:.3rem}.sweet-icon{width:30px;height:30px}.candy-home-title h1{font-size:5.5rem}.candy-home-title>p{font-size:.8rem}.home-play{padding:1.3rem}.floating-treat{width:60px;height:60px}.treat-a{left:0;top:28%}.treat-b{right:0;top:30%}.treat-c{display:none}.map-head{padding:1rem;gap:.5rem}.map-head h1{font-size:1.7rem}.map-head .sweet-button{padding:.5rem}.map-summary{font-size:.75rem;gap:.5rem;flex-direction:row}.world-section{padding:1rem .4rem .7rem;border-radius:30px}.level-trail{height:280px}.stop-number{width:50px;height:50px;font-size:1.3rem;border-width:3px}.level-stop{width:70px}.level-stop .level-name{font-size:.5rem;padding:.2rem}.level-stop .level-stars .icon{width:12px;height:12px}.level-stop:disabled .stop-number{font-size:1rem}.stop-number>.icon{width:12px}.world-sign h2{font-size:1.1rem}.world-reward{font-size:.55rem}.game-head{padding:.65rem;margin-bottom:1rem}.game-panel{border-width:3px}.board-frame{border-width:5px;padding:5px}.board-bottom{font-size:.6rem}.booster-button{padding:.5rem;font-size:.65rem}.game-layout{gap:1rem}.sweet-footer{font-size:.55rem}}
@media(prefers-reduced-motion:reduce){.floating-treat,.you-are-here{animation:none}}

.stop-number {color:var(--ink);text-shadow:0 1px 0 var(--x-frost)}
/* Each five-level world has its own original landscape. */
.world-0 {background-image:linear-gradient(color-mix(in srgb,var(--surface) 16%,transparent),color-mix(in srgb,var(--surface) 45%,transparent)),url('/candyland-world/0');background-position:center,center 60%}
.world-1 {background-image:linear-gradient(color-mix(in srgb,var(--surface) 16%,transparent),color-mix(in srgb,var(--surface) 45%,transparent)),url('/candyland-world/1');background-position:center,center 65%}
.world-2 {background-image:linear-gradient(color-mix(in srgb,var(--surface) 16%,transparent),color-mix(in srgb,var(--surface) 45%,transparent)),url('/candyland-world/2');background-position:center,center 65%}
.world-3 {background-image:linear-gradient(color-mix(in srgb,var(--surface) 16%,transparent),color-mix(in srgb,var(--surface) 45%,transparent)),url('/candyland-world/3');background-position:center,center 65%}
.world-4 {background-image:linear-gradient(color-mix(in srgb,var(--surface) 16%,transparent),color-mix(in srgb,var(--surface) 45%,transparent)),url('/candyland-world/4');background-position:center,center 65%}
.sweet-body[data-screen="game"][data-world="0"] {background-image:linear-gradient(var(--x-land-veil),var(--x-land-veil)),url('/candyland-world/0')}
.sweet-body[data-screen="game"][data-world="1"] {background-image:linear-gradient(var(--x-land-veil),var(--x-land-veil)),url('/candyland-world/1')}
.sweet-body[data-screen="game"][data-world="2"] {background-image:linear-gradient(var(--x-land-veil),var(--x-land-veil)),url('/candyland-world/2')}
.sweet-body[data-screen="game"][data-world="3"] {background-image:linear-gradient(var(--x-land-veil),var(--x-land-veil)),url('/candyland-world/3')}
.sweet-body[data-screen="game"][data-world="4"] {background-image:linear-gradient(var(--x-land-veil),var(--x-land-veil)),url('/candyland-world/4')}