:root{--bg-1: #FFF6F0;--bg-2: #FFE9DC;--ink: #2A2438;--ink-soft: #6B6478;--card: #FFFFFF;--line: #F2DECF;--pink: #FF6B9D;--peach: #FFB088;--sun: #FFD166;--mint: #6BD4B5;--sky: #7CC8E0;--violet: #B299E0;--board-bg: #F7E2D1;--board-cell: #F0D2BA;--shadow-soft: 0 6px 0 0 #F0CDB2, 0 14px 30px -10px rgba(180,110,70,.25)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Nunito,SF Pro Rounded,system-ui,-apple-system,sans-serif;color:var(--ink);background:radial-gradient(1200px 800px at 80% -10%,#FFE0CE 0%,transparent 60%),radial-gradient(900px 700px at -10% 110%,#FFE3F0 0%,transparent 55%),linear-gradient(180deg,var(--bg-1),var(--bg-2));background-attachment:fixed;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}button{font-family:inherit;cursor:pointer;touch-action:manipulation}.bg-bubbles{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.bg-bubble{position:absolute;border-radius:50%;filter:blur(2px);opacity:.55;animation:float-y 14s ease-in-out infinite}@keyframes float-y{0%,to{transform:translateY(0) translate(0)}50%{transform:translateY(-22px) translate(10px)}}.app{position:relative;z-index:1;min-height:100vh;min-height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;padding:max(28px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}.shell{width:100%;max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}.shell>*{min-width:0}.stats-row>*{min-width:0}@media (max-width: 900px){.shell{grid-template-columns:1fr;gap:22px}.app{padding:max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}}.brand-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:14px}.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1}.brand-text{min-width:0}.brand-title{white-space:nowrap}.brand-row{flex-wrap:wrap}.brand-logo{width:44px;height:44px;flex-shrink:0;background:linear-gradient(135deg,var(--pink),var(--peach) 50%,var(--sun));border-radius:14px;box-shadow:0 6px #e89e7c,0 12px 24px -10px #00000040;display:grid;place-items:center;color:#fff;font-weight:900;font-size:18px;letter-spacing:.5px;transform:rotate(-4deg)}.brand-title{font-size:clamp(20px,6vw,28px);font-weight:900;letter-spacing:-.02em;background:linear-gradient(90deg,var(--ink),#6E3D5A);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-sub{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}.dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px #6bd4b540;animation:pulse 1.6s ease-in-out infinite}.dot.idle{background:var(--ink-soft);box-shadow:0 0 0 4px #6b64782e;animation:none}.dot.over{background:var(--pink);box-shadow:0 0 0 4px #ff6b9d40;animation:none}.brand-sub{line-height:1.4}.brand-row .brand-sub{white-space:normal;max-width:100%}@keyframes pulse{0%,to{box-shadow:0 0 0 4px #6bd4b540}50%{box-shadow:0 0 0 8px #6bd4b50d}}.stats-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}.stat-card{background:var(--card);border-radius:18px;padding:14px 18px 16px;box-shadow:0 4px 0 var(--line),0 10px 24px -14px #b46e4633;position:relative;overflow:hidden;border:2px solid #FFEEDD}.stat-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent, var(--pink))}.stat-label{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase;margin-bottom:4px}.stat-value{font-size:32px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}.stat-value.big{font-size:clamp(24px,8.5vw,40px)}.board-wrap{width:100%;max-width:580px;margin:0 auto;position:relative}.board-frame{background:var(--board-bg);border-radius:22px;display:inline-block;max-width:100%;overflow:hidden;box-shadow:inset 0 -6px #0000000f,0 8px #e5c0a6,0 24px 40px -16px #b46e464d;position:relative;border:3px solid #FFE7D0}.board-wrap{text-align:center}.cell{background:var(--board-cell);border-radius:14px;box-shadow:inset 0 3px #0000000d}.tiles-layer{position:absolute;pointer-events:none}.tile{position:absolute;top:0;left:0;border-radius:14px;display:grid;place-items:center;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .18s ease,color .18s ease,box-shadow .18s ease;will-change:transform;-webkit-user-select:none;user-select:none}.tile-text{display:inline-block;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}@keyframes spawn-pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1)}}.tile.tile-spawn .tile-text{animation:spawn-pop .32s cubic-bezier(.34,1.56,.64,1)}@keyframes merge-pop{0%{transform:scale(1)}35%{transform:scale(1.28)}60%{transform:scale(.94)}to{transform:scale(1)}}.tile.tile-merge .tile-text{animation:merge-pop .32s cubic-bezier(.34,1.56,.64,1)}.tile.tile-merge{filter:brightness(1.06)}.tile.tile-ominous{background:radial-gradient(ellipse 90% 80% at 30% 25%,#a20022,#6b0019,#39000e 55%,#020001);background:radial-gradient(ellipse 90% 80% at 30% 25%,color(xyz 0.17 0.075 0.01),color(xyz 0.083 0.029 0.001),color(xyz 0.032 0.007 -0.001) 55%,color(xyz 0.002 0 -0));color:#fff;text-shadow:0 0 8px oklch(.55 .3 18 / .85),0 1px 0 oklch(.06 0 0);box-shadow:0 6px #1a0005,0 10px 28px -6px #890024bf,inset 0 0 14px #000,inset 0 0 4px #890024;box-shadow:0 6px oklch(.14 .18 10),0 10px 28px -6px oklch(.4 .3 18 / .75),inset 0 0 14px #000,inset 0 0 4px oklch(.4 .28 18);animation:ominous-breath 2.6s ease-in-out infinite;position:absolute}@keyframes ominous-breath{0%,to{filter:drop-shadow(0 0 4px oklch(.4 .3 18 / .45))}50%{filter:drop-shadow(0 0 14px oklch(.55 .32 18 / .85))}}@property --evil-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.tile.tile-evil{--evil-angle: 0deg;background:conic-gradient(from var(--evil-angle),oklch(.45 .3 0) 0deg,oklch(.18 .18 320) 72deg,oklch(.05 .02 0) 144deg,oklch(.5 .3 28) 216deg,oklch(.2 .22 290) 288deg,oklch(.45 .3 0) 360deg);color:#fff;text-shadow:0 0 10px oklch(.55 .35 0),0 0 2px oklch(.95 .3 50),0 1px 0 oklch(.05 0 0);box-shadow:0 6px #0c0003,0 14px 32px -8px #850044d9,0 0 24px -4px #9a00b599,inset 0 0 18px #000,inset 0 0 4px #d60400;box-shadow:0 6px oklch(.1 .18 0),0 14px 32px -8px oklch(.4 .32 0 / .85),0 0 24px -4px oklch(.5 .3 320 / .6),inset 0 0 18px #000,inset 0 0 4px oklch(.55 .3 30);animation:evil-rotate 5.5s linear infinite,evil-flicker 3.2s steps(1,end) infinite,evil-throb 1.8s ease-in-out infinite;position:absolute}@keyframes evil-rotate{to{--evil-angle: 360deg}}@keyframes evil-flicker{0%,18%,22%,60%,64%,to{opacity:1}20%,62%{opacity:.78}21%,63%{opacity:.92}}@keyframes evil-throb{0%,to{filter:drop-shadow(0 0 6px oklch(.45 .32 0 / .55))}50%{filter:drop-shadow(0 0 18px oklch(.55 .35 350 / .85)) hue-rotate(15deg)}}@media (prefers-reduced-motion: reduce){.bg-bubble,.dot{animation:none}.confetti{animation:none;opacity:0}.shake{animation:none}.pp-btn.is-playing .pp-glyph svg rect{animation:none}.pp-btn.is-loading .pp-glyph svg{animation:none}.tile.tile-ominous{animation:none}.tile.tile-evil{animation:evil-rotate 18s linear infinite}.tile.tile-spawn .tile-text,.tile.tile-merge .tile-text,.dir-arrow{animation-duration:.01ms}}@media (hover: none) and (pointer: coarse){.bg-bubbles,.dir-flash-board{display:none}}button:focus-visible,[role=button]:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:inherit}@keyframes shake{0%,to{transform:translate(0)}10%{transform:translate(-6px,2px) rotate(-.4deg)}20%{transform:translate(5px,-3px) rotate(.4deg)}30%{transform:translate(-4px,4px) rotate(-.3deg)}40%{transform:translate(4px,-2px) rotate(.2deg)}50%{transform:translate(-3px,1px)}60%{transform:translate(3px,2px)}70%{transform:translate(-2px,-2px)}80%{transform:translate(2px,1px)}90%{transform:translate(-1px,-1px)}}.shake{animation:shake .48s cubic-bezier(.36,.07,.19,.97)}.panel{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}@media (max-width: 900px){.panel{position:static}}.card{background:var(--card);border-radius:22px;padding:18px 18px 20px;box-shadow:0 6px 0 var(--line),0 16px 30px -16px #b46e4633;border:2px solid #FFEEDD}.card-title{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase;margin:0 0 12px}.pp-btn{display:inline-flex;align-items:center;gap:12px;width:100%;padding:16px 22px;border:none;border-radius:18px;background:linear-gradient(180deg,var(--pink),#E85B8B);color:#fff;font-size:19px;font-weight:900;letter-spacing:.01em;box-shadow:0 6px #c84775,0 14px 28px -10px #e85b8b8c;transform:translateY(0);transition:transform .12s ease,box-shadow .12s ease,background .2s ease}@media (hover: hover){.pp-btn:hover{transform:translateY(-2px);box-shadow:0 8px #c84775,0 18px 32px -10px #e85b8b99}}.pp-btn:active{transform:translateY(3px);box-shadow:0 3px #c84775,0 8px 18px -8px #e85b8b80}.pp-btn.is-playing{background:linear-gradient(180deg,var(--mint),#45BC97);box-shadow:0 6px #379b7b,0 14px 28px -10px #45bc978c}.pp-btn.is-loading{background:linear-gradient(180deg,#c8b6be,#b59ca9);box-shadow:0 6px #978391,0 12px 22px -10px #97839173;cursor:progress}.pp-btn:disabled,.pp-btn[aria-disabled=true]{cursor:progress}.pp-btn.is-loading .pp-glyph svg{animation:pp-spin 1s linear infinite;transform-origin:50% 50%}@keyframes pp-spin{to{transform:rotate(360deg)}}@media (hover: hover){.pp-btn.is-playing:hover{box-shadow:0 8px #379b7b,0 18px 32px -10px #45bc9799}}.pp-btn.is-playing:active{box-shadow:0 3px #379b7b,0 8px 18px -8px #45bc9780}.pp-glyph{display:inline-grid;place-items:center}.pp-label{line-height:1}.pp-btn.is-playing .pp-glyph svg rect{animation:pulse-bar 1.2s ease-in-out infinite}@keyframes pulse-bar{0%,to{transform:scaleY(1);transform-origin:center}50%{transform:scaleY(.7)}}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:none;border-radius:14px;background:#fff1e2;color:var(--ink);box-shadow:0 4px #f0dcc4;transition:transform .12s ease,box-shadow .12s ease,background .16s ease}@media (hover: hover){.icon-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px #f0dcc4;background:#ffe6cf}}.icon-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #f0dcc4}.icon-btn:disabled{opacity:.4;cursor:not-allowed}.btn-row{display:flex;gap:10px;margin-top:12px}.step-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;border:none;border-radius:14px;background:linear-gradient(180deg,#fff,#fff1e2);color:var(--ink);font-weight:900;font-size:14px;letter-spacing:.02em;box-shadow:0 4px #f0dcc4,inset 0 0 0 2px #ffe0c5;transition:transform .12s ease,box-shadow .12s ease,background .16s ease}@media (hover: hover){.step-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px #f0dcc4,inset 0 0 0 2px var(--peach);background:linear-gradient(180deg,#fff,#ffe6cf)}}.step-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #f0dcc4,inset 0 0 0 2px var(--peach)}.step-btn:disabled{opacity:.45;cursor:not-allowed}.step-btn svg{color:var(--pink)}.control-block+.control-block{margin-top:16px}.control-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}.control-label{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase;white-space:nowrap;flex-shrink:0}.control-value{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;min-width:0}.control-value .unit{font-size:11px;color:var(--ink-soft);font-weight:700;margin-left:2px}.slider-wrap{display:flex;align-items:center;gap:10px}.slider-icon{font-size:18px;opacity:.85}.speed-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--mint),var(--sun) var(--pct, 50%),#F0DCC4 var(--pct, 50%));outline:none}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--pink);box-shadow:0 3px #c84775,0 6px 14px -4px #e85b8b80;cursor:grab;transition:transform .12s ease}.speed-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}.speed-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--pink);box-shadow:0 3px #c84775;cursor:grab}@media (hover: none) and (pointer: coarse){.speed-slider::-webkit-slider-thumb{width:44px;height:44px}.speed-slider::-moz-range-thumb{width:44px;height:44px}}.pip-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.pip{position:relative;height:44px;border:none;border-radius:12px;background:#fff1e2;color:var(--ink-soft);font-weight:900;font-size:16px;box-shadow:0 3px #f0dcc4;transition:transform .12s ease,background .2s ease,color .2s ease,box-shadow .12s ease;overflow:hidden}.pip:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,var(--peach),var(--pink));opacity:0;transition:opacity .2s ease;z-index:0}.pip.on:after{opacity:1}.pip.on{color:#fff;box-shadow:0 3px #c84775}.pip.current{transform:translateY(-3px);box-shadow:0 6px #c84775,0 10px 20px -8px #e85b8b80}.pip-num{position:relative;z-index:1}@media (hover: hover){.pip:hover:not(.on){background:#ffe6cf}}.meta-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#fff1e2;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--ink-soft);border:1.5px solid #F0DCC4}.meta-pill .num{color:var(--ink);font-variant-numeric:tabular-nums}.hint-row{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-soft)}.kbd{display:inline-block;padding:3px 7px;background:#fff;border:1.5px solid #F0DCC4;border-bottom-width:3px;border-radius:6px;font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;font-weight:700;color:var(--ink)}@media (hover: none) and (pointer: coarse){.hint.hint-key{display:none}}.credits-links{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.credits-links a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;color:var(--ink-soft);transition:color .16s ease,background .16s ease,transform .12s ease;touch-action:manipulation}@media (hover: hover){.credits-links a:hover{color:var(--ink);background:#ffe6cf;transform:translateY(-1px)}}.credits-links a:active{transform:translateY(1px)}@media (hover: none) and (pointer: coarse){.credits-links a{width:44px;height:44px}}.load-consent-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:var(--pink);color:#fff;border:none;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 2px #c84775;touch-action:manipulation}.dir-flash-board{position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px;pointer-events:none;z-index:25;--c: 255, 107, 157}.dir-flash-board.by-user{--c: 124, 200, 224}.dir-arrow{position:absolute;color:rgb(var(--c));filter:drop-shadow(0 2px 6px rgba(var(--c),.45));opacity:0;animation-delay:calc(var(--i) * 50ms);animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.34,1.56,.64,1);animation-duration:.54s}.dir-flash-board.dir-up .dir-arrow{animation-name:dir-up;top:-68px}.dir-flash-board.dir-up .dir-arrow:nth-child(1){left:16%}.dir-flash-board.dir-up .dir-arrow:nth-child(2){left:calc(50% - 30px)}.dir-flash-board.dir-up .dir-arrow:nth-child(3){right:16%}.dir-flash-board.dir-down .dir-arrow{animation-name:dir-down;bottom:-68px}.dir-flash-board.dir-down .dir-arrow svg{transform:rotate(180deg)}.dir-flash-board.dir-down .dir-arrow:nth-child(1){left:16%}.dir-flash-board.dir-down .dir-arrow:nth-child(2){left:calc(50% - 30px)}.dir-flash-board.dir-down .dir-arrow:nth-child(3){right:16%}.dir-flash-board.dir-left .dir-arrow{animation-name:dir-left;left:-68px}.dir-flash-board.dir-left .dir-arrow svg{transform:rotate(-90deg)}.dir-flash-board.dir-left .dir-arrow:nth-child(1){top:16%}.dir-flash-board.dir-left .dir-arrow:nth-child(2){top:calc(50% - 30px)}.dir-flash-board.dir-left .dir-arrow:nth-child(3){bottom:16%}.dir-flash-board.dir-right .dir-arrow{animation-name:dir-right;right:-68px}.dir-flash-board.dir-right .dir-arrow svg{transform:rotate(90deg)}.dir-flash-board.dir-right .dir-arrow:nth-child(1){top:16%}.dir-flash-board.dir-right .dir-arrow:nth-child(2){top:calc(50% - 30px)}.dir-flash-board.dir-right .dir-arrow:nth-child(3){bottom:16%}@keyframes dir-up{0%{opacity:0;translate:0 22px}35%{opacity:1;translate:0 0}to{opacity:0;translate:0 -14px}}@keyframes dir-down{0%{opacity:0;translate:0 -22px}35%{opacity:1;translate:0 0}to{opacity:0;translate:0 14px}}@keyframes dir-left{0%{opacity:0;translate:22px 0}35%{opacity:1;translate:0 0}to{opacity:0;translate:-14px 0}}@keyframes dir-right{0%{opacity:0;translate:-22px 0}35%{opacity:1;translate:0 0}to{opacity:0;translate:14px 0}}.confetti-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:100;overflow:hidden}.confetti{position:absolute;top:-8vh;top:-8svh;display:block;border-radius:2px;animation-name:confetti-fall;animation-timing-function:cubic-bezier(.2,.7,.4,1);animation-fill-mode:forwards;transform-origin:center}.confetti.circle{border-radius:50%}@keyframes confetti-fall{0%{transform:translate(0) rotate(0) scale(.6);opacity:0}8%{opacity:1;transform:translateY(2vh) rotate(20deg) scale(1)}to{transform:translate(calc(sin(var(--ang))*12vh),calc(var(--dist) * 1vh)) rotate(var(--rot)) scale(1);opacity:0}}