:root{color-scheme:light;--bg-0: oklch(97% .022 95);--bg-1: oklch(95% .04 70);--bg-2: oklch(93% .055 40);--surface: oklch(99.5% .008 95 / .8);--surface-strong: oklch(100% 0 0 / .93);--line: oklch(72% .07 45 / .4);--text: oklch(36% .06 40);--text-dim: oklch(56% .05 42);--accent: oklch(74% .15 25);--accent-2: oklch(80% .12 215);--accent-3: oklch(83% .15 88);--candy-coral: oklch(80% .13 25);--candy-sky: oklch(83% .11 215);--candy-mint: oklch(86% .11 160);--candy-lemon: oklch(90% .13 95);--candy-grape: oklch(80% .1 300);--candy-berry: oklch(78% .13 345);--candy-gold: oklch(85% .15 88);--badge-bg: hsl(45 60% 98%);--tile-1: hsl(205 70% 76%);--tile-2: hsl(35 55% 74%);--tile-3: hsl(330 55% 86%);--tile-4: hsl(140 50% 76%);--tile-5: hsl(50 85% 80%);--tile-6: hsl(345 60% 84%);--tile-7: hsl(45 90% 72%);--ink-1: hsl(222 60% 30%);--ink-2: hsl(28 60% 28%);--ink-3: hsl(335 55% 34%);--ink-4: hsl(150 55% 27%);--ink-5: hsl(38 70% 30%);--ink-6: hsl(345 58% 32%);--ink-7: hsl(40 70% 30%);--font-display: "Baloo 2", system-ui, -apple-system, sans-serif;--font-ui: "Zen Maru Gothic", "Baloo 2", system-ui, -apple-system, sans-serif;--text-xs: clamp(.7rem, .66rem + .2vw, .8rem);--text-sm: clamp(.82rem, .78rem + .2vw, .95rem);--text-md: clamp(1rem, .94rem + .3vw, 1.15rem);--text-lg: clamp(1.4rem, 1.2rem + 1vw, 2rem);--text-xl: clamp(2rem, 1.4rem + 3vw, 3.4rem);--text-score: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);--space-1: .35rem;--space-2: .6rem;--space-3: 1rem;--space-4: 1.6rem;--space-5: 2.6rem;--radius-sm: .7rem;--radius-md: 1.1rem;--radius-lg: 1.7rem;--radius-pill: 999px;--dur-fast: .14s;--dur-normal: .28s;--dur-slow: .52s;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--shadow-soft: 0 2px 6px oklch(55% .08 40 / .14), 0 10px 24px oklch(55% .08 40 / .16);--shadow-pop: 0 4px 0 oklch(72% .1 45 / .32), 0 12px 28px oklch(55% .1 35 / .2);--shadow-inset: inset 0 2px 3px oklch(100% 0 0 / .6), inset 0 -3px 6px oklch(60% .08 40 / .12);--glow-accent: var(--shadow-soft);--glow-pink: var(--shadow-soft);--glow-gold: 0 2px 12px oklch(85% .15 88 / .55)}@font-face{font-family:"Baloo 2";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/baloo-2-latin-700.woff2) format("woff2")}@font-face{font-family:"Baloo 2";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/baloo-2-latin-800.woff2) format("woff2")}@font-face{font-family:Zen Maru Gothic;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/zen-maru-gothic-jp-500.woff2) format("woff2")}*,*:before,*:after{box-sizing:border-box;margin:0}html,body{height:100%}body{min-height:100svh;font-family:var(--font-ui);color:var(--text);background:linear-gradient(180deg,#fffefa57,#fffafc1f 46%,#fafdff5c),url(/assets/bg-candy.webp) center top / cover no-repeat,linear-gradient(165deg,var(--bg-1),var(--bg-2));background-attachment:fixed;display:grid;place-items:center;padding:clamp(.5rem,2vw,2rem);overflow:hidden}body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(hsl(0 0% 100% / .5) 2px,transparent 2.5px);background-size:34px 34px;opacity:.28}.game{position:relative;z-index:1;display:grid;gap:clamp(.45rem,1.2vw,1.4rem);grid-template-areas:"title" "hud" "stage" "touch";grid-template-columns:1fr;width:100%;max-width:560px}.game__title{grid-area:title;display:flex;align-items:center;justify-content:center;gap:.3em;font-family:var(--font-display);font-weight:800;letter-spacing:.01em;font-size:clamp(1.8rem,1.2rem + 2.4vw,2.6rem);line-height:1;-webkit-text-stroke:3px #fffdf7;paint-order:stroke fill;text-shadow:var(--shadow-pop)}.game__emblem{width:auto;height:1.5em;flex:none;filter:drop-shadow(0 3px 5px hsl(40 80% 45% / .35));animation:emblem-wobble 4s var(--ease-in-out) infinite}@keyframes emblem-wobble{0%,to{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.06)}}.game__title b{color:var(--accent-3)}.game__title span{color:var(--accent-2)}.sound-toggle{position:absolute;top:0;right:0;z-index:4;width:2.5rem;height:2.5rem;display:grid;place-items:center;font-size:1.15rem;line-height:1;color:var(--accent);background:var(--surface-strong);border:3px solid #fffdf7;border-radius:var(--radius-pill);box-shadow:var(--shadow-soft);cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform var(--dur-fast) var(--ease-bounce),box-shadow var(--dur-fast) var(--ease-out-expo)}.sound-toggle:hover{transform:translateY(-2px) scale(1.08) rotate(-3deg)}.sound-toggle:active{transform:translateY(1px) scale(.94);box-shadow:0 1px 4px #d6a35c4d}.sound-toggle:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}.sound-toggle__off{display:none}.sound-toggle[aria-pressed=true]{color:var(--text-dim)}.sound-toggle[aria-pressed=true] .sound-toggle__on{display:none}.sound-toggle[aria-pressed=true] .sound-toggle__off{display:block}.game__stage{grid-area:stage;position:relative;display:grid;place-items:center;justify-self:center;min-width:0}.board{display:block;border-radius:var(--radius-lg);background:#ffffff8c;box-shadow:inset 0 0 0 4px #fffdf7,0 0 0 4px #f8d8aa,var(--shadow-pop);touch-action:none}.hud{grid-area:hud;display:flex;flex-direction:row;align-items:stretch;gap:var(--space-2);width:100%}.stat{background:var(--surface-strong);border:3px solid #fffdf7;border-radius:var(--radius-md);padding:.2rem var(--space-2);display:flex;flex-direction:column;justify-content:center;gap:.05rem;box-shadow:var(--shadow-soft)}.stat__label{font-size:var(--text-xs);letter-spacing:.04em;color:var(--text-dim)}.stat__value{font-family:var(--font-display);font-weight:700;font-size:var(--text-md);font-variant-numeric:tabular-nums}.stat--chain .stat__value{color:#cf3080}.stat--merge .stat__value{color:#277cb9}.next{order:1;margin-left:auto;background:var(--surface-strong);border:3px solid #fffdf7;border-radius:var(--radius-md);padding:.15rem var(--space-2);display:flex;flex-direction:column;align-items:center;gap:.05rem;box-shadow:var(--shadow-soft)}.next__label{font-size:var(--text-xs);letter-spacing:.04em;color:var(--text-dim)}.next canvas{display:block;width:60px;height:30px}.topline{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0 var(--space-1)}.topline__total{font-family:var(--font-display);font-weight:800;font-size:var(--text-score);font-variant-numeric:tabular-nums;color:#dd442c;text-shadow:0 2px 0 #fffdf7}.topline__level{font-size:var(--text-sm);color:var(--text-dim);letter-spacing:.02em}.topline__level b{color:var(--accent-2);font-family:var(--font-display);font-size:var(--text-md)}.touch{grid-area:touch;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2);padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--space-2))}.touch button{font:inherit;font-size:1.4rem;color:var(--accent);background:var(--surface-strong);border:3px solid #fffdf7;border-radius:var(--radius-md);padding:.6rem 0;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;box-shadow:var(--shadow-soft);transition:transform var(--dur-fast) var(--ease-bounce),box-shadow var(--dur-fast) var(--ease-out-expo)}.touch button:active{transform:translateY(2px) scale(.94);box-shadow:0 1px 4px #d6a35c4d}@media(hover:hover)and (pointer:fine)and (min-width:760px){.touch{display:none}}.overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:var(--space-4);border-radius:var(--radius-lg);background:#fffbebd1;backdrop-filter:blur(8px);gap:var(--space-3);opacity:1;transition:opacity var(--dur-normal) var(--ease-out-expo)}.overlay[hidden]{display:none}.overlay__inner{display:grid;gap:var(--space-3);justify-items:center}.overlay__mascot{width:clamp(116px,54%,196px);height:auto;margin-bottom:calc(-1 * var(--space-2));filter:drop-shadow(0 8px 14px hsl(330 45% 58% / .32));animation:mascot-bob 3.2s var(--ease-in-out) infinite}.overlay__mascot--over{width:clamp(108px,46%,168px);animation:mascot-sink 3.6s var(--ease-in-out) infinite}@keyframes mascot-bob{0%,to{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}@keyframes mascot-sink{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(5px) scale(.985)}}.overlay__heading{font-family:var(--font-display);font-weight:800;letter-spacing:.01em;font-size:var(--text-xl);line-height:1;color:var(--accent-2);-webkit-text-stroke:3px #fffdf7;paint-order:stroke fill;text-shadow:var(--shadow-pop)}.overlay__heading--over{color:var(--accent)}.overlay__sub{color:var(--text);font-size:var(--text-sm);max-width:28ch;line-height:1.7}.overlay__score{font-family:var(--font-display);font-weight:800;font-size:var(--text-score);color:#c4871c;text-shadow:0 2px 0 #fffdf7;font-variant-numeric:tabular-nums}.btn{font:inherit;font-family:var(--font-display);font-weight:800;letter-spacing:.02em;color:#fff;background:linear-gradient(160deg,var(--candy-coral),var(--accent));border:3px solid #fffdf7;border-radius:var(--radius-pill);padding:.7rem 2.2rem;cursor:pointer;box-shadow:var(--shadow-pop);transition:transform var(--dur-fast) var(--ease-bounce),box-shadow var(--dur-fast) var(--ease-out-expo)}.btn:hover{transform:translateY(-3px) scale(1.05) rotate(-1deg);box-shadow:0 8px #e06e5259,0 16px 32px #d94a2647}.btn:active{transform:translateY(1px) scale(.97)}.btn:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}.hint{font-size:var(--text-xs);color:var(--text-dim);letter-spacing:.02em;line-height:1.8}.hint kbd{font-family:var(--font-display);font-weight:700;background:#fffdf7;border:2px solid var(--line);border-radius:.5rem;padding:.05rem .4rem;color:var(--text)}.fx{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.fx__popup{font-family:var(--font-display);font-weight:800;text-align:center;opacity:0;transform:scale(.6)}.fx__popup--show{animation:popup .9s var(--ease-bounce) forwards}.fx__popup .fx__chain{display:block;font-size:var(--text-xl);color:#dd408f;-webkit-text-stroke:2.5px #fffdf7;paint-order:stroke fill}.fx__popup .fx__gain{display:block;font-size:var(--text-lg);color:#d38e17;-webkit-text-stroke:2px #fffdf7;paint-order:stroke fill}@keyframes popup{0%{opacity:0;transform:scale(.4) translateY(10px)}30%{opacity:1;transform:scale(1.25) translateY(0)}55%{transform:scale(.95)}72%{transform:scale(1.06)}to{opacity:0;transform:scale(1) translateY(-26px)}}.board--shake{animation:wiggle .36s var(--ease-in-out)}@keyframes wiggle{0%,to{transform:rotate(0) scale(1)}25%{transform:rotate(-1.6deg) scale(1.02)}50%{transform:rotate(1.6deg) scale(1.01)}75%{transform:rotate(-1deg) scale(1.02)}}.board--shake-strong{animation:wiggle-strong .48s var(--ease-bounce)}@keyframes wiggle-strong{0%,to{transform:rotate(0) scale(1)}18%{transform:rotate(-3deg) scale(1.04)}38%{transform:rotate(3deg) scale(1.05)}58%{transform:rotate(-2.4deg) scale(1.03)}78%{transform:rotate(1.6deg) scale(1.02)}}.fx__popup--merge .fx__gain{color:#2982c2;font-size:var(--text-md)}@media(prefers-reduced-motion:reduce){body:before{display:none}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}@media(max-width:759px){.hud{flex-wrap:wrap;gap:var(--space-1);align-items:center}.topline__total{font-size:var(--text-lg)}.topline__level{white-space:nowrap}.stat__label,.next__label{font-size:.6rem;white-space:nowrap}.stat__value{font-size:var(--text-sm)}}@media(min-width:760px){.game{grid-template-areas:"title title" "stage hud" "stage touch";grid-template-columns:auto 1fr;align-items:start;max-width:860px}.game__title{justify-content:flex-start}.hud{display:grid;grid-template-columns:1fr 1fr;align-content:start;height:100%}.next{order:0;margin-left:0;grid-column:1 / -1;flex-direction:row;justify-content:center;gap:var(--space-3);padding:var(--space-2) var(--space-3)}.next canvas{width:96px;height:46px}.topline{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:baseline;gap:var(--space-3)}.stat{padding:var(--space-2)}}