:root{--ink: #f6f3ea;--muted: #a7adb7;--panel: rgba(18, 19, 24, .74);--panel-strong: rgba(20, 21, 27, .9);--line: rgba(246, 243, 234, .16);--mint: #5ff0c8;--coral: #ff6b6b;--gold: #ffd166;--sky: #80c7ff;--violet: #b78cff;--charcoal: #111216;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--ink);background:var(--charcoal)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px}button,input,select{color:inherit;font:inherit}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0}a{color:inherit}#game-shell{position:relative;width:100vw;height:100vh;overflow:hidden;background:radial-gradient(circle at 16% 14%,rgba(95,240,200,.18),transparent 28%),radial-gradient(circle at 86% 78%,rgba(255,209,102,.13),transparent 24%),linear-gradient(145deg,#121318,#191922 48%,#101115)}#game-root{position:absolute;top:0;right:0;bottom:0;left:0}#game-root canvas{display:block}.hud{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;transition:opacity .16s ease}#game-shell[data-ui=main] .hud,#game-shell[data-ui=main] .touch-controls,#game-shell[data-ui=pause] .touch-controls,#game-shell[data-ui=gameover] .touch-controls{pointer-events:none;opacity:0;visibility:hidden}.hud-cluster{pointer-events:none;position:absolute;display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 18px 44px #00000038;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.score-cluster{top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));gap:14px;min-height:58px;padding:10px 14px}.metric{display:grid;gap:2px;min-width:56px}.metric-label,.speed-row span,.section-heading,.field-label{color:var(--muted);font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.metric strong{font-size:1.24rem;line-height:1}.fish-count{grid-template-columns:16px auto;align-items:center;min-width:44px}.fish-dot{width:14px;height:10px;border-radius:999px 70% 70% 999px;background:var(--gold);box-shadow:0 0 14px #ffd1668c}.tempo-cluster{top:max(16px,env(safe-area-inset-top));left:50%;width:min(310px,calc(100vw - 32px));min-height:64px;padding:10px 12px;transform:translate(-50%);flex-direction:column;gap:8px}.judge{min-height:18px;color:var(--mint);font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.judge[data-tone=danger]{color:var(--coral)}.judge[data-tone=bonus]{color:var(--gold)}.judge[data-tone=clean]{color:var(--sky)}.time-rail{width:100%;height:8px;overflow:hidden;border-radius:999px;background:#f6f3ea21}.time-fill{width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mint),var(--gold),var(--coral),var(--violet));box-shadow:0 0 18px #5ff0c859;transform-origin:left center;transition:transform 90ms linear}.speed-row{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-weight:800}.speed-row strong,.speed-row #combo{color:var(--ink)}.icon-button{pointer-events:auto;position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));display:grid;width:48px;height:48px;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.home-button{right:max(74px,calc(env(safe-area-inset-right) + 74px));text-decoration:none}.icon-button:active,.home-link:active,.move-button:active,.jump-button:active,.primary-button:active,.secondary-button:active,.character-card:active{transform:translateY(1px) scale(.99)}.icon-button:focus-visible,.home-link:focus-visible{outline:0;box-shadow:0 0 0 3px #5ff0c833}.pause-bars{position:relative;width:16px;height:19px}.pause-bars:before,.pause-bars:after{position:absolute;top:0;width:5px;height:19px;border-radius:3px;background:var(--ink);content:""}.pause-bars:before{left:0}.pause-bars:after{right:0}.pause-button[data-paused=true] .pause-bars{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid var(--ink)}.pause-button[data-paused=true] .pause-bars:before,.pause-button[data-paused=true] .pause-bars:after{display:none}.home-mark{position:relative;display:inline-block;width:18px;height:16px;flex:0 0 auto}.home-mark:before,.home-mark:after{position:absolute;content:""}.home-mark:before{right:2px;bottom:1px;left:2px;height:9px;border:2px solid var(--ink);border-top:0;border-radius:2px}.home-mark:after{top:1px;left:3px;width:11px;height:11px;border-top:2px solid var(--ink);border-left:2px solid var(--ink);border-radius:2px 0 0;transform:rotate(45deg)}.center-panel{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:clamp(14px,3vw,28px);opacity:0;transition:opacity .16s ease}.center-panel[data-visible=true]{pointer-events:auto;opacity:1}.center-panel:not([data-visible=true]) .shell-modal{visibility:hidden}.shell-modal{display:grid;width:min(920px,calc(100vw - 28px));max-width:100%;max-height:calc(100vh - 28px);overflow:auto;overflow-x:hidden;gap:14px;border:1px solid var(--line);border-radius:8px;padding:clamp(16px,2.3vw,22px);background:linear-gradient(135deg,rgba(95,240,200,.12),transparent 34%),linear-gradient(315deg,rgba(255,107,107,.12),transparent 38%),var(--panel-strong);box-shadow:0 28px 80px #00000061;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.modal-head{display:flex;align-items:start;justify-content:space-between;gap:16px}.modal-kicker{margin:0 0 6px;color:var(--mint);font-size:.76rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.modal-head h1{margin:0;font-size:clamp(2.2rem,6vw,4rem);line-height:.9}.modal-actions{display:flex;align-items:end;gap:10px}.home-link{display:inline-flex;min-height:40px;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:0 12px;background:#f6f3ea14;color:var(--ink);font-size:.72rem;font-weight:900;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}.language-picker{display:grid;min-width:150px;gap:7px;color:var(--muted);font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.language-picker select,#player-id{width:100%;min-height:40px;border:1px solid var(--line);border-radius:8px;background-color:#f6f3ea14;color:var(--ink);outline:0}.language-picker select{-webkit-appearance:none;-moz-appearance:none;appearance:none;color-scheme:dark;padding:0 12px;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 11px) 50%;background-repeat:no-repeat;background-size:6px 6px,6px 6px}.language-picker select option{background-color:#18191f;color:var(--ink)}.language-picker select:focus,#player-id:focus{border-color:#5ff0c8d6;box-shadow:0 0 0 3px #5ff0c81f}#player-id{padding:0 14px;font-size:1.18rem;font-weight:900;letter-spacing:0;text-transform:none}.menu-view{display:grid;grid-template-columns:minmax(280px,1fr) minmax(250px,.78fr);gap:14px}.menu-view[hidden]{display:none}.profile-column,.leaderboard-panel,.panel-block{min-width:0}.profile-column{display:grid;gap:12px}.panel-block,.leaderboard-panel{border:1px solid var(--line);border-radius:8px;padding:12px;background:#f6f3ea0f}.leaderboard-panel{display:grid;grid-template-rows:auto minmax(0,1fr);max-height:min(520px,calc(100vh - 220px))}.section-heading{margin-bottom:8px}.field-label{margin-bottom:-6px}.character-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.character-card{display:grid;min-height:92px;gap:8px;place-items:center;border:1px solid var(--line);border-radius:8px;background:#1213187a;cursor:pointer}.character-card strong{max-width:100%;overflow:hidden;font-size:.82rem;text-overflow:ellipsis;white-space:nowrap}.character-card[data-selected=true]{border-color:#5ff0c8d6;background:#5ff0c821;box-shadow:inset 0 0 0 1px #5ff0c82e}.cat-token{position:relative;display:block;width:44px;height:39px;border-radius:50% 50% 46% 46%;background:#fff8e8;box-shadow:0 10px 24px #0000003d}.cat-token:before,.cat-token:after{position:absolute;top:-8px;width:18px;height:18px;clip-path:polygon(50% 0,0 100%,100% 100%);background:inherit;content:""}.cat-token:before{left:7px}.cat-token:after{right:7px}.cat-mochi{background:#fff8e8}.cat-midnight{background:#293044}.cat-calico{background:linear-gradient(135deg,#fff8e8 0,#fff8e8 40%,#f28f45 41%,#f28f45 64%,#2d2630 65%)}.cat-spark{background:linear-gradient(135deg,#c9fff1,#8bb8ff 50%,#f1d2ff)}.settings-block{display:grid;gap:10px}.switch-row{display:flex;min-height:35px;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid rgba(246,243,234,.08);color:var(--ink);font-weight:800}.switch-row:first-of-type{border-top:0}.setting-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:48px;height:28px;flex:0 0 auto;border:1px solid rgba(246,243,234,.2);border-radius:999px;background:#121318eb;cursor:pointer;outline:0;transition:background .14s ease,border-color .14s ease,box-shadow .14s ease}.setting-toggle:after{position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;background:var(--ink);box-shadow:0 3px 8px #00000047;content:"";transition:transform .14s ease}.setting-toggle:checked{border-color:#5ff0c8e6;background:linear-gradient(135deg,var(--mint),var(--gold))}.setting-toggle:checked:after{transform:translate(20px);background:#101115}.setting-toggle:focus-visible{box-shadow:0 0 0 3px #5ff0c82e}.guide-panel{grid-column:1 / -1;display:grid;gap:10px}.guide-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.guide-step{display:grid;min-height:62px;align-content:center;gap:6px;border:1px solid rgba(246,243,234,.12);border-radius:8px;padding:10px;background:#12131875}.guide-step-key{color:var(--gold);font-size:.7rem;font-weight:950;letter-spacing:0;text-transform:uppercase}.guide-step span:last-child{overflow-wrap:anywhere;color:var(--ink);font-size:.78rem;font-weight:850;line-height:1.15}.leaderboard-list{display:grid;max-height:clamp(230px,44vh,470px);overflow-y:auto;overscroll-behavior:contain;gap:6px;margin:0;padding:0 6px 0 0;list-style:none;scrollbar-color:rgba(95,240,200,.58) rgba(246,243,234,.08);scrollbar-width:thin}.leaderboard-list li{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto minmax(74px,auto);min-height:32px;align-items:center;gap:8px;border-bottom:1px solid rgba(246,243,234,.08);font-weight:850}.leaderboard-list li:last-child{border-bottom:0}.leaderboard-list li[data-local=true]{color:var(--mint)}.leaderboard-name{overflow:hidden;color:var(--ink);text-overflow:ellipsis;white-space:nowrap}.leaderboard-score{color:var(--gold)}.leaderboard-time{color:var(--muted);font-size:.68rem;font-weight:850;text-align:right;white-space:nowrap}.leaderboard-country{display:inline-flex;min-width:68px;max-width:82px;align-items:center;justify-content:center;gap:5px;overflow:hidden;border:1px solid rgba(246,243,234,.14);border-radius:999px;padding:3px 7px;color:var(--sky);font-size:.72rem;line-height:1;text-overflow:ellipsis;white-space:nowrap}.leaderboard-flag{width:18px;height:13px;flex:0 0 auto;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px #f6f3ea2e}.menu-action{grid-column:1 / -1;justify-self:stretch}.primary-button,.secondary-button{min-height:46px;border-radius:8px;cursor:pointer;font-weight:950}.primary-button{background:linear-gradient(135deg,var(--mint),var(--gold));color:#101115;box-shadow:0 14px 32px #5ff0c838}.secondary-button{border:1px solid var(--line);background:#f6f3ea14}.compact-view{grid-template-columns:1fr;justify-items:stretch}.modal-score{min-height:24px;margin:0;color:var(--muted);font-weight:800;text-align:center}.action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.compact-settings{width:min(420px,100%);justify-self:center}.mini-board{width:min(440px,100%);max-height:min(42vh,330px);justify-self:center}.touch-controls{pointer-events:none;position:absolute;z-index:12;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));display:grid;grid-template-columns:minmax(76px,1fr) minmax(74px,.72fr) minmax(76px,1fr);gap:18px;max-width:560px;margin-left:auto;transition:opacity .16s ease}.move-button,.jump-button{pointer-events:auto;display:grid;width:100%;height:clamp(72px,16vw,104px);place-items:center;border:1px solid var(--line);border-radius:8px;background:#f6f3ea14;box-shadow:inset 0 0 0 1px #ffffff0a;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.move-button span,.jump-button span{color:var(--ink);font-size:clamp(3.4rem,12vw,5.4rem);font-weight:900;line-height:.72}.jump-button span{font-size:clamp(2.6rem,9vw,4.3rem)}.move-button[data-next=true]{border-color:#5ff0c8bd;background:#5ff0c824;box-shadow:0 0 28px #5ff0c824,inset 0 0 0 1px #5ff0c82e}.jump-button[data-next=true]{border-color:#ff6b6be6;background:#ff6b6b2e;box-shadow:0 0 30px #ff6b6b33,inset 0 0 0 1px #ffd16638}@media(min-width:880px){.touch-controls{left:auto;width:520px}}@media(max-width:740px){.shell-modal{width:calc(100vw - 20px);max-height:calc(100vh - 20px)}.modal-head,.menu-view,.action-grid{grid-template-columns:1fr}.modal-head{display:grid}.character-grid,.guide-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-action{order:3}.leaderboard-panel{order:4;max-height:none}.guide-panel{order:2}.score-cluster{gap:10px;min-height:50px;padding:8px 10px}.metric{min-width:44px}.metric strong{font-size:1.02rem}.tempo-cluster{top:82px;min-height:58px}.icon-button{width:44px;height:44px}}@media(max-width:520px){.leaderboard-list li{grid-template-columns:24px minmax(0,1fr) auto;align-items:start;gap:4px 7px;padding:6px 0}.leaderboard-country{grid-column:2;grid-row:2;justify-self:start}.leaderboard-score{grid-column:3;grid-row:1;justify-self:end}.leaderboard-time{grid-column:3;grid-row:2;justify-self:end;font-size:.62rem}}@media(max-width:460px){.shell-modal{width:min(360px,calc(100vw - 20px));padding:14px}.touch-controls{gap:10px}.move-button,.jump-button{height:76px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}