:root{--deep:#083b66;--sea:#087fbd;--lagoon:#30c7d8;--foam:#b8ecf5;--white:#fff;--gold:#ffd34e;--green:#45c76f;--danger:#ff6b6b;--ink:#062a4a;--pad:6px;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);color:var(--white);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:800}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:linear-gradient(180deg, var(--lagoon) 0%, var(--sea) 35%, var(--deep) 100%);background-color:var(--deep);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}.app{height:100dvh;padding:calc(var(--safe-top) + 8px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 12px);flex-direction:column;align-items:center;display:flex}.hud{width:min(100%,480px);position:relative}.title{text-align:center;letter-spacing:.25em;opacity:.85;margin:0;font-size:14px;font-weight:900}.hud-row{grid-template-columns:1fr auto 1fr;align-items:center;margin-top:4px;display:grid}.stat{flex-direction:column;align-items:center;line-height:1.1;display:flex}.stat-label{opacity:.8;text-transform:uppercase;letter-spacing:.08em;font-size:12px}.stat-value{font-variant-numeric:tabular-nums;font-size:24px;font-weight:900}.clock{font-variant-numeric:tabular-nums;text-shadow:0 3px #062a4a59;background:#062a4a59;border-radius:20px;padding:4px 18px 8px;font-size:52px;font-weight:900;line-height:1}.clock-label{letter-spacing:.1em;text-transform:uppercase;text-align:center;opacity:.8;text-shadow:none;font-size:11px;display:block}.clock.warning{color:var(--danger);animation:1s ease-in-out infinite tick}@keyframes tick{50%{transform:scale(1.06)}}.stage{flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;min-height:0;padding:20px 0 8px;display:flex}.board{width:min(92vw,480px,100dvh - 250px);padding:var(--pad);background:#062a4a73;border-radius:18px;position:relative;box-shadow:inset 0 2px 10px #00000040}.board-area{touch-action:none;border-radius:12px;width:100%;position:relative;overflow:hidden}.cell-bg,.tile,.flash{pointer-events:none;position:absolute;top:0;left:0}.cell-bg:after{content:"";background:#b8ecf51a;border-radius:22%;position:absolute;inset:4%}.tile{will-change:transform}.tile-inner{border-radius:22%;position:absolute;inset:4%}.tile-art{transition:transform .2s ease-out,filter .2s;position:absolute;inset:4%}.tile-art svg{display:block;overflow:visible}.tile.mark-partial .tile-inner{box-shadow:inset 0 0 0 3px var(--white);background:#ffffff2e}.tile.mark-valid .tile-inner{box-shadow:inset 0 0 0 3px var(--green);background:#45c76f47}.tile.mark-invalid .tile-inner{box-shadow:inset 0 0 0 3px var(--danger);background:#ff6b6b40}.tile[class*=mark-] .tile-art{transform:scale(1.08)}.tile.hint .tile-inner{animation:1.2s ease-in-out infinite hint}@keyframes hint{0%,to{background:#ffd34e1a;box-shadow:inset 0 0 0 2px #ffd34e59}50%{background:#ffd34e59;box-shadow:inset 0 0 0 4px #ffd34e,0 0 14px #ffd34ecc}}.tile.golden .tile-inner{background:radial-gradient(circle at 50% 45%,#ffd34e8c,#ffd34e2e 70%);overflow:hidden;box-shadow:inset 0 0 0 2px #ffd34ee6}.tile.golden .tile-inner:after{content:"";pointer-events:none;background:linear-gradient(115deg,#0000 35%,#ffffff8c 50%,#0000 65%) 0 0/250% 100%;animation:2.4s ease-in-out infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{background-position:150% 0}to{background-position:-100% 0}}.golden-badge{color:var(--gold);text-shadow:0 1px 0 var(--ink);font-size:.9em;line-height:1;position:absolute;top:2%;left:6%}.tile.wild .tile-inner{background:#e86a9238}.float-golden{color:var(--gold);font-size:40px;top:20%}.float-whirl{color:var(--foam);font-size:46px;top:30%}.tile.whirl .tile-art{animation:1.6s linear infinite whirl-spin}@keyframes whirl-spin{to{rotate:360deg}}.float-wave{font-size:calc(40px * var(--grow,1));color:var(--foam);top:62%}.pips{justify-content:center;gap:3px;display:flex;position:absolute;bottom:2%;left:0;right:0}.pips span{aspect-ratio:1;background:#062a4a8c;border:1px solid #ffffff80;border-radius:50%;width:13%}.pips span.on{background:var(--gold);border-color:var(--gold)}.tile.near .tile-inner:before{content:"";background:radial-gradient(circle,#ffd34e8c 0%,#ffd34e00 70%);border-radius:26%;animation:.9s ease-in-out infinite near;position:absolute;inset:-6%}.tile.near .pips span.on{box-shadow:0 0 6px var(--gold)}@keyframes near{50%{opacity:.35;transform:scale(.9)}}.flash{background:radial-gradient(circle,#fffffff2 0%,#ffd34eb3 40%,#ffd34e00 70%);border-radius:50%;animation-name:flash;animation-timing-function:ease-out;animation-fill-mode:forwards;transform:translate(-50%,-50%)}@keyframes flash{0%{opacity:1;scale:.6}to{opacity:0;scale:4.5}}.trace{pointer-events:none;position:absolute;inset:0;overflow:visible}.trace polyline,.trace line{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.85}.trace circle{opacity:.95}.trace-partial polyline,.trace-partial line,.trace-empty line{stroke:var(--white)}.trace-partial circle,.trace-empty circle{fill:var(--white)}.trace-valid polyline,.trace-valid line{stroke:var(--green)}.trace-valid circle{fill:var(--green)}.trace-invalid polyline,.trace-invalid line{stroke:var(--danger)}.trace-invalid circle{fill:var(--danger)}.fx-layer{pointer-events:none;z-index:2;position:absolute}.fx-layer canvas{width:100%;height:100%;display:block}.ambient{pointer-events:none;z-index:-1;width:100%;height:100%;position:fixed;inset:0}.board-flash{pointer-events:none;animation-name:board-flash;animation-timing-function:ease-out;animation-fill-mode:forwards;position:absolute;inset:0}.board-flash-eat{background:radial-gradient(circle,#b8ecf5e6,#b8ecf533)}.board-flash-frenzy{background:radial-gradient(circle,#ffd34e,#ff6b6b8c)}.board-flash-whirl{background:radial-gradient(circle,#5fd3e633,#083b66e6)}@keyframes board-flash{0%{scale:1}15%{scale:1}to{opacity:0}}.floaters{inset:var(--pad);pointer-events:none;position:absolute}.floater{white-space:nowrap;text-shadow:0 2px 0 var(--ink), 0 0 8px #062a4a99;font-weight:900;animation-timing-function:ease-out;animation-fill-mode:forwards;position:absolute}.float-points{color:var(--gold);font-size:30px;animation-name:rise;transform:translate(-50%,-50%)}.float-mult{color:var(--white);font-size:18px}@keyframes rise{0%{opacity:1;translate:0;scale:.4}22%{scale:1.5}40%{scale:1.05}to{opacity:0;translate:0 -48px;scale:1}}.float-banner{animation-name:banner;left:50%;transform:translate(-50%,-50%)}.float-combo{color:var(--gold);font-size:44px;top:30%}.float-frenzy{color:var(--white);text-shadow:0 3px 0 var(--danger), 0 0 18px var(--gold), 0 0 32px var(--danger);font-size:66px;animation-name:frenzy-banner;top:50%}@keyframes frenzy-banner{0%{opacity:0;rotate:-12deg;scale:.3}20%{opacity:1;rotate:6deg;scale:1.45}40%{rotate:-3deg;scale:.95}75%{opacity:1;rotate:0deg;scale:1.05}to{opacity:0;scale:1.2}}.float-time{color:var(--green);font-size:26px;top:12%}.float-shuffle{color:var(--foam);font-size:26px;top:50%}@keyframes banner{0%{opacity:0;rotate:-6deg;scale:2.6}18%{opacity:1;rotate:2deg;scale:.85}34%{rotate:0deg;scale:1.12}72%{opacity:1;scale:1}to{opacity:0;scale:1.1}}.overlay.start-screen{color:var(--white);cursor:pointer;outline:none;flex-direction:column;justify-content:center;align-items:center;gap:14px}.start-mascot{width:120px;height:120px;animation:1.6s ease-in-out infinite start-bob}.start-mascot svg{width:100%;height:100%}.start-title{letter-spacing:.12em;text-shadow:0 3px 0 var(--ink);font-size:34px;font-weight:900}.start-tap{background:var(--gold);color:var(--ink);border:none;border-radius:18px;outline:none;margin-top:10px;padding:14px 28px;font-family:inherit;font-size:22px;font-weight:900;animation:1.1s ease-in-out infinite start-pulse;box-shadow:0 4px #c99a10}.start-ranking{color:var(--white);font:inherit;background:#062a4a73;border:2px solid #fff9;border-radius:16px;align-items:center;gap:8px;margin-top:6px;padding:10px 20px;font-size:17px;display:inline-flex}.sound-btn.ranking-btn{right:38px}@keyframes start-bob{50%{translate:0 -8px;rotate:-4deg}}@keyframes start-pulse{50%{scale:1.07}}.countdown{z-index:5;pointer-events:none;place-items:center;display:grid;position:fixed;inset:0}.countdown .count{color:var(--white);text-shadow:0 5px 0 var(--ink), 0 0 24px #ffd34ecc;font-size:120px;font-weight:900;animation:ease-out forwards count-pop}.countdown .count.go{color:var(--gold);text-shadow:0 4px 0 var(--danger), 0 0 22px var(--gold), 0 0 40px var(--danger);font-size:72px;animation:ease-out forwards frenzy-banner}@keyframes count-pop{0%{opacity:0;scale:2.4}25%{opacity:1;scale:.9}45%{scale:1.08}80%{opacity:1;scale:1}to{opacity:0;scale:.6}}.bottom{justify-content:space-between;align-items:center;gap:8px;width:min(100%,480px);display:flex}.round-btn{background:#062a4a66;border:2px solid #ffffff80;border-radius:50%;flex:none;place-items:center;width:48px;height:48px;font-size:22px;font-weight:900;display:grid}.round-btn:disabled{opacity:.35}.pause-icon{border-left:5px solid;border-right:5px solid;width:14px;height:16px}.food-chain{opacity:.85;background:#062a4a4d;border-radius:999px;align-items:center;gap:2px;margin:0;padding:4px 10px;list-style:none;display:flex}.food-chain li{align-items:center;gap:2px;display:flex}.chain-animal{flex-direction:column;align-items:center;width:30px;height:30px;display:flex}.arrow{opacity:.7;width:10px;height:10px}.arrow svg{display:block}.food-chain.large{opacity:1;background:#087fbd40;border-radius:16px;justify-content:center;margin:8px 0;padding:8px}.food-chain.large .chain-animal{width:min(56px,13vw);height:72px}.food-chain.large .chain-animal svg{height:min(56px,13vw)}.chain-name{font-size:11px}.overlay{padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10;background:#062a4a99;justify-content:center;align-items:flex-end;animation:.2s ease-out fade;display:flex;position:fixed;inset:0}@keyframes fade{0%{opacity:0}}.sheet{background:linear-gradient(180deg, var(--sea), var(--deep));text-align:center;border:2px solid #b8ecf559;border-radius:24px;width:min(100%,440px);max-height:100%;padding:20px 20px 16px;animation:.22s ease-out up;overflow-y:auto;box-shadow:0 10px 30px #00000059}@keyframes up{0%{transform:translateY(24px)}}.sheet h2{margin:0 0 6px;font-size:28px;font-weight:900}.sheet p{margin:0 0 14px;font-weight:600}.rules{text-align:left;margin:4px 0 14px;padding-left:20px;font-size:15px;font-weight:600;line-height:1.35}.rules li{margin-bottom:6px}.primary-btn{background:var(--gold);width:100%;min-height:56px;color:var(--ink);border:none;border-radius:18px;font-size:20px;font-weight:900;box-shadow:0 4px #c99a10}.primary-btn:active{transform:translateY(2px);box-shadow:0 2px #c99a10}.final-label{text-transform:uppercase;letter-spacing:.1em;opacity:.8;font-size:13px}.final-score{color:var(--gold);font-size:56px;font-weight:900;line-height:1.05}.new-best{background:var(--green);color:var(--ink);border-radius:999px;margin:4px 0;padding:2px 12px;font-weight:900;display:inline-block}.final-stats{text-align:left;grid-template-columns:1fr;gap:4px;margin:12px 0 16px;display:grid}.final-stats div{background:#062a4a59;border-radius:10px;justify-content:space-between;padding:6px 10px;display:flex}.final-stats dt{font-size:14px;font-weight:600}.final-stats dd{margin:0;font-weight:900}.leaderboard{text-align:left;background:#062a4a59;border-radius:14px;margin:12px 0 4px;padding:10px 12px}.leaderboard h3{text-transform:uppercase;letter-spacing:.08em;text-align:center;margin:0 0 6px;font-size:16px;font-weight:900}.lb-name label{margin-bottom:6px;font-size:14px;font-weight:700;display:block}.lb-name div{gap:8px;display:flex}.lb-name input{min-width:0;color:var(--ink);font:inherit;background:#fffffff2;border:2px solid #b8ecf580;border-radius:12px;flex:1;padding:10px 12px;font-size:16px}.lb-name button{background:var(--gold);color:var(--ink);font:inherit;border:none;border-radius:12px;padding:0 16px;font-weight:900}.lb-name button:disabled{opacity:.5}.lb-player,.lb-note,.lb-rank{text-align:center;margin:4px 0;font-size:14px;font-weight:700}.lb-rank{color:var(--gold);font-weight:900}.share-btn{border:2px solid var(--white);background:var(--green);width:100%;min-height:48px;color:var(--ink);font:inherit;border-radius:18px;justify-content:center;align-items:center;gap:8px;margin-bottom:10px;font-size:18px;font-weight:900;display:flex}.help-links{flex-wrap:wrap;justify-content:center;gap:18px;display:flex}.tutorial-overlay{align-items:center}.tutorial h2{margin-bottom:2px}.sheet .tutorial-goal{color:var(--gold);margin-bottom:10px;font-size:18px;font-weight:900}.tutorial-board{background:#062a4a73;border-radius:16px;margin:0 auto;position:relative}.tutorial-cell{padding:5px;transition:transform .22s,opacity .26s;position:absolute}.tutorial-cell .tile-art{background:#ffffff14;border-radius:12px;width:100%;height:100%;transition:box-shadow .15s,background .15s}.tutorial-cell .tile-art svg{width:100%;height:100%}.tutorial-cell.on .tile-art{box-shadow:inset 0 0 0 3px var(--green);background:#45c76f47}.tutorial-cell.gone{opacity:0;transform:scale(.2)}.tutorial-cell.chomp{animation:.42s ease-out tutorial-chomp}@keyframes tutorial-chomp{30%{transform:scale(1.4,.8)rotate(-8deg)}60%{transform:scale(.9,1.2)rotate(5deg)}}.tutorial-line{pointer-events:none;position:absolute;inset:0}.tutorial-line polyline{fill:none;stroke:var(--white);stroke-width:8px;stroke-linecap:round;stroke-linejoin:round;opacity:.7}.tutorial-finger{filter:drop-shadow(0 3px 2px #0006);font-size:40px;line-height:1;transition:transform .38s ease-in-out;position:absolute;top:0;left:0}.tutorial-points{color:var(--gold);text-shadow:0 2px 0 var(--ink);font-size:26px;font-weight:900;animation:.9s ease-out forwards rise;position:absolute;translate:-50% -50%}.sheet .tutorial-eats{margin:-4px 0 10px;font-size:15px;font-weight:700}.sheet .tutorial-chain{color:var(--foam);margin:10px 0 4px;font-size:14px;font-weight:800}.start-links{gap:18px;margin-top:4px;font-size:15px;display:flex}.sheet.feedback textarea{box-sizing:border-box;width:100%;color:var(--ink);font:inherit;resize:vertical;background:#fffffff2;border:2px solid #b8ecf580;border-radius:12px;margin-bottom:10px;padding:10px 12px;font-size:16px;font-weight:600}.sheet-close{margin:12px auto 0;display:block}.lb-error{color:#ffb3b3;margin:6px 0 0;font-size:14px;font-weight:700}.link-btn{color:var(--foam);font:inherit;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.lb-list{gap:3px;margin:6px 0 0;padding:0;list-style:none;display:grid}.lb-list li{border-radius:10px;align-items:center;gap:8px;padding:5px 8px;font-size:15px;display:flex}.lb-list li.me{outline:2px solid var(--gold);background:#ffd34e40}.lb-pos{text-align:right;opacity:.8;width:22px}.lb-who{text-overflow:ellipsis;white-space:nowrap;flex:1;font-weight:700;overflow:hidden}.lb-score{color:var(--gold);font-weight:900}.game-over .primary-btn{position:sticky;bottom:0}.sheet.game-over{padding-top:34px;position:relative;overflow:visible}.mascot{width:84px;height:84px;animation:.48s cubic-bezier(.3,1.6,.5,1) both mascot;position:absolute;top:-46px;left:50%;translate:-50%}@keyframes mascot{0%{opacity:0;rotate:-20deg;scale:.2}}.game-over .final-score{animation:.42s cubic-bezier(.3,1.5,.5,1) both pop-in}@keyframes pop-in{0%{opacity:0;scale:.6}}.game-over .new-best{animation:.38s cubic-bezier(.3,1.8,.5,1) .3s both pop-in}.game-over .final-stats div{animation:.3s ease-out both rise-in}@keyframes rise-in{0%{opacity:0;translate:0 10px}}.confetti{pointer-events:none;z-index:11;position:fixed;inset:0;overflow:hidden}.confetti span{border-radius:2px;width:8px;height:12px;animation-name:confetti;animation-timing-function:cubic-bezier(.3,.6,.6,1);animation-fill-mode:forwards;position:absolute;top:-12px}@keyframes confetti{to{translate:var(--drift) 70vh;rotate:var(--spin);opacity:0}}.sound-btn{z-index:1;background:#062a4a59;border:none;border-radius:50%;place-items:center;width:32px;height:32px;display:grid;position:absolute;top:-2px;right:0}.sound-btn.off{opacity:.6}.debug-btn{z-index:1;background:#062a4a59;border:none;border-radius:50%;width:32px;height:32px;font-size:18px;position:absolute;top:-2px;left:0}.sheet.debug{text-align:left;font-weight:600}.sheet.debug h2{text-align:center}.sheet.debug label{flex-direction:column;gap:4px;margin-bottom:10px;font-size:14px;display:flex}.sheet.debug input,.sheet.debug select,.sheet.debug textarea{font:inherit;color:var(--ink);background:var(--white);border:none;border-radius:10px;width:100%;min-width:0;padding:8px 10px;font-size:16px}.sheet.debug textarea{resize:vertical;-webkit-user-select:text;user-select:text;font-family:ui-monospace,Menlo,monospace}.sheet.debug small{opacity:.8;font-size:12px}.debug-row{gap:8px;display:flex}.debug-row button{background:#fff3;border:none;border-radius:10px;flex:none;padding:0 10px;font-size:13px}.debug-note{opacity:.85;font-size:13px;margin:0 0 10px!important}.debug-message{color:var(--gold);font-size:14px;margin:6px 0!important}.debug-actions{flex-direction:column;gap:8px;margin-top:4px;display:flex}.secondary-btn{background:0 0;border:2px solid #fff9;border-radius:16px;min-height:48px;font-size:17px;font-weight:800}.link-btn{opacity:.9;background:0 0;border:none;padding:6px 0;font-size:14px;text-decoration:underline}@media (prefers-reduced-motion:reduce){.fx-layer,.board-flash,.confetti,.ambient{display:none}.tile.whirl .tile-art,.clock.warning,.tile.hint .tile-inner,.tile.near .tile-inner:before,.tile.golden .tile-inner:after{animation:none}}