:root{--color-bg: oklch(17% .02 65);--color-bg-deep: oklch(11% .015 65);--color-bg-lift: oklch(23% .025 65);--color-ink: oklch(94% .03 85);--color-muted: oklch(70% .035 80);--color-line: oklch(34% .03 70);--color-accent: oklch(60% .23 29);--color-accent-hi: oklch(78% .16 32);--color-accent-lo: oklch(42% .2 29);--color-accent-rim: oklch(30% .14 29);--color-ok: oklch(68% .19 148);--color-ok-hi: oklch(84% .15 150);--color-ok-lo: oklch(46% .15 148);--color-ok-rim: oklch(32% .1 148);--color-dark-cap: oklch(30% .02 65);--color-dark-cap-hi: oklch(40% .025 65);--color-dark-cap-lo: oklch(20% .02 65);--color-dark-cap-rim: oklch(12% .015 65);--color-housing: oklch(31% .02 65);--color-housing-lo: oklch(15% .015 65);--color-warn: oklch(82% .16 82);--color-focus: oklch(88% .12 92);--color-paper: oklch(95% .03 85);--color-paper-ink: oklch(18% .02 65);--color-paper-bezel-hi: oklch(84% .02 85);--color-paper-bezel-lo: oklch(72% .03 85);--shadow-ink: oklch(0% 0 0 / .65);--shadow-soft: oklch(0% 0 0 / .35);--gloss: oklch(100% 0 0 / .42);--gloss-dim: oklch(100% 0 0 / .14);--font-display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;--font-body: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;--text-sm: .875rem;--text-md: 1.05rem;--text-lg: 1.35rem;--text-xl: clamp(1.7rem, 6.5vw, 2.15rem);--text-2xl: clamp(2.6rem, 12vw, 3.6rem);--text-score: clamp(5.5rem, 30vw, 8rem);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--ease-out: cubic-bezier(.2, .8, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--dur-press: 70ms;--dur-fast: .15s;--tap-size: 200px;--tap-bezel: 9px;--tap-travel: 14px;--radius-pill: 999px;--radius-card: 20px}*{box-sizing:border-box}html,body{margin:0;min-height:100dvh;overflow-x:clip}body{background:radial-gradient(70% 45% at 50% 0%,var(--color-bg-lift),transparent 70%),radial-gradient(120% 80% at 50% 100%,var(--color-bg-deep),transparent 60%),var(--color-bg);color:var(--color-ink);font-family:var(--font-body);font-weight:500;-webkit-font-smoothing:antialiased}#app{max-width:480px;min-height:100dvh;margin:0 auto;padding:var(--space-4) var(--space-4) var(--space-6);padding-bottom:max(var(--space-6),env(safe-area-inset-bottom));display:flex;flex-direction:column}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;line-height:.95;letter-spacing:-.045em;margin:12vh 0 var(--space-2);overflow-wrap:anywhere;min-width:0}.tag,.rekod,.err,.roast,.prompt,.counter{margin:0 0 var(--space-2);color:var(--color-muted)}.tag{font-size:var(--text-md)}.rekod{display:inline-block;align-self:flex-start;padding:5px 12px;border:1.5px solid var(--color-line);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:800;letter-spacing:.02em;color:var(--color-ink);margin-top:var(--space-2)}.rekod:empty{display:none}.rekod.baru{border-color:var(--color-accent);background:var(--color-accent);color:var(--color-ink)}.err{color:var(--color-accent-hi);min-height:1.2em;font-weight:800}.tap{--cap: var(--color-accent);--cap-hi: var(--color-accent-hi);--cap-lo: var(--color-accent-lo);--cap-rim: var(--color-accent-rim);--cap-ink: var(--color-ink);--cap-gloss: var(--gloss);--r: 50%;--cap-r: 50%;position:relative;appearance:none;border:0;padding:0;width:var(--tap-size);height:var(--tap-size);min-width:var(--tap-size);min-height:var(--tap-size);margin-top:var(--tap-travel);border-radius:var(--r);color:var(--cap-ink);font-family:var(--font-display);font-weight:800;font-size:var(--text-lg);line-height:1.1;letter-spacing:.01em;cursor:pointer;background:radial-gradient(circle at 50% 40%,var(--color-housing),var(--color-housing-lo) 85%);box-shadow:inset 0 2px #ffffff12,inset 0 -3px 6px var(--shadow-ink),0 22px 34px -10px var(--shadow-ink)}.tap:before{content:"";position:absolute;inset:var(--tap-bezel);border-radius:var(--cap-r);background:radial-gradient(70% 42% at 50% 16%,var(--cap-gloss),transparent 72%),radial-gradient(circle at 50% 36%,var(--cap-hi) 0%,var(--cap) 48%,var(--cap-lo) 100%);box-shadow:0 var(--tap-travel) 0 var(--cap-rim),0 var(--tap-travel) 0 2px var(--shadow-soft),inset 0 -5px 10px #00000038,inset 0 2px 2px #ffffff59;translate:0 calc(-1 * var(--tap-travel));transition:translate var(--dur-press) var(--ease-out),box-shadow var(--dur-press) var(--ease-out),filter var(--dur-fast) var(--ease-out)}.tap .lbl{position:relative;display:block;padding:0 var(--space-6);translate:0 calc(-1 * var(--tap-travel));text-shadow:0 2px 0 oklch(0% 0 0 / .3);transition:translate var(--dur-press) var(--ease-out)}@media(hover:hover){.tap:hover:before{filter:brightness(1.07) saturate(1.05)}}.tap:focus-visible{outline:3px solid var(--color-focus);outline-offset:6px}.tap:active:before,.tap.done:before{translate:0 0;box-shadow:0 0 0 var(--cap-rim),0 0 0 2px var(--shadow-soft),inset 0 6px 14px #00000073,inset 0 1px 1px #ffffff26}.tap:active .lbl,.tap.done .lbl{translate:0 0}.tap.done{cursor:default}.tap.done:before{filter:saturate(.25) brightness(.7)}.tap.done .lbl{opacity:.45}.tap:disabled{cursor:not-allowed;filter:saturate(.3);opacity:.6}.mula{margin-top:auto;margin-bottom:8vh;align-self:center}.mula:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--color-accent);opacity:0;z-index:-1;animation:pulse 2s var(--ease-out) infinite}.stage:has(.tap:nth-of-type(2)) .tap{--tap-size: 132px;--tap-bezel: 7px;--tap-travel: 10px;font-size:.95rem}.stage.column .tap{--tap-size: 116px;--tap-bezel: 6px;--tap-travel: 9px;font-size:.9rem}.tap.with-animals .lbl{font-size:1.3rem;line-height:1.35;white-space:pre-line;letter-spacing:.02em;padding:0 var(--space-3)}.animals{--cap: var(--color-dark-cap);--cap-hi: var(--color-dark-cap-hi);--cap-lo: var(--color-dark-cap-lo);--cap-rim: var(--color-dark-cap-rim);--cap-gloss: var(--gloss-dim);--r: 32px;--cap-r: 24px;--tap-travel: 10px;width:min(92%,300px);height:auto;min-width:0;min-height:160px;max-width:100%;display:flex;align-items:center;justify-content:center}.animals .lbl{padding:var(--space-6) var(--space-4);line-height:1.5;font-size:2rem;letter-spacing:.1em;white-space:normal;text-shadow:none}.spider{--cap: var(--color-dark-cap);--cap-hi: var(--color-dark-cap-hi);--cap-lo: var(--color-dark-cap-lo);--cap-rim: var(--color-dark-cap-rim);--cap-gloss: var(--gloss-dim)}.spider .lbl{font-size:4.5rem;line-height:1;text-shadow:none}.moving{position:absolute;margin-top:0}.win-cta{--cap: var(--color-ok);--cap-hi: var(--color-ok-hi);--cap-lo: var(--color-ok-lo);--cap-rim: var(--color-ok-rim);--cap-ink: var(--color-paper);--tap-size: 150px;--tap-bezel: 7px;--tap-travel: 10px;font-size:.9rem;margin-top:calc(var(--tap-travel) + var(--space-3));background:radial-gradient(circle at 50% 40%,var(--color-paper-bezel-hi),var(--color-paper-bezel-lo) 85%);box-shadow:inset 0 2px #ffffff80,inset 0 -3px 6px #00000040,0 18px 28px -10px #00000059}.play{flex:1;display:flex;flex-direction:column;min-height:0}.play.kejut{padding:0}.prompt{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--color-ink);min-height:2.3em;margin:6vh 0 var(--space-4);overflow-wrap:anywhere}.timer{position:relative;height:12px;background:var(--color-bg-lift);border-radius:var(--radius-pill);margin-bottom:var(--space-3);overflow:hidden;box-shadow:inset 0 1px 3px var(--shadow-soft)}.timer:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--color-accent) 0%,var(--color-warn) 45%,var(--color-ok) 100%)}.timer:before{content:"";position:absolute;top:0;right:0;bottom:0;width:calc(100% - var(--t, 100%));background:var(--color-bg-lift);z-index:1}.timer[data-left="2"],.timer[data-left="1"]{animation:blink .5s steps(2,jump-none) infinite}.counter{font-family:var(--font-display);font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--color-ink);min-height:1.2em}.stage{position:relative;flex:1;min-height:42vh;margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:var(--space-4);padding-bottom:8vh}.stage.column{flex-direction:column;flex-wrap:nowrap;align-items:center}.stage.wrap{flex-wrap:wrap}.fake-win{background:var(--color-paper);color:var(--color-paper-ink);padding:var(--space-8) var(--space-6) var(--space-6);border-radius:var(--radius-card);width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;box-shadow:0 24px 40px -16px var(--shadow-ink)}.fake-win h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0 0 var(--space-2)}.jumpscare{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:20}.jumpscare img{width:100%;height:100%;object-fit:cover}.mati .roast{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--color-ink);margin:10vh 0 var(--space-6);overflow-wrap:anywhere}.mati .score{display:flex;align-items:baseline;gap:var(--space-2);margin:0 0 var(--space-3);color:var(--color-ink);line-height:1}.mati .score .num{font-family:var(--font-display);font-size:var(--text-score);font-weight:800;letter-spacing:-.06em;line-height:.9;font-variant-numeric:tabular-nums}.mati .score .unit{font-size:var(--text-lg);font-weight:800;color:var(--color-muted)}.shares{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}.share{appearance:none;background:transparent;color:var(--color-ink);border:1.5px solid var(--color-line);font:inherit;font-weight:800;font-size:var(--text-sm);letter-spacing:.02em;padding:11px 18px;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}@media(hover:hover){.share:hover{border-color:var(--color-ink);background:var(--color-bg-lift)}}.share:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}.share:active{background:var(--color-bg-lift)}.taunt{position:fixed;inset:-20%;display:grid;place-items:center;background:#150e06e0;font-family:var(--font-display);font-size:clamp(2.2rem,10vw,3.2rem);font-weight:800;letter-spacing:-.03em;color:var(--color-accent-hi);rotate:-4deg;z-index:10}.toast{position:fixed;bottom:max(var(--space-6),env(safe-area-inset-bottom));left:50%;translate:-50% 0;background:var(--color-ink);color:var(--color-bg);font-weight:800;padding:10px 16px;border-radius:var(--radius-pill);z-index:30;box-shadow:0 10px 24px -8px var(--shadow-ink)}@keyframes pulse{0%{opacity:.7;scale:1}70%{opacity:0;scale:1.28}to{opacity:0;scale:1.28}}@keyframes blink{0%{opacity:1}to{opacity:.35}}@media(prefers-reduced-motion:reduce){.mula:after{animation:none}.timer[data-left="2"],.timer[data-left="1"]{animation:none}.tap:before,.tap .lbl,.share{transition:none}}@media(max-width:340px){:root{--tap-size: 156px;--tap-travel: 12px}.stage:has(.tap:nth-of-type(2)) .tap{--tap-size: 116px}.animals{min-height:140px}.animals .lbl{font-size:1.5rem}}