:root{--water-1: #25c2ee;--water-2: #0596cf;--water-3: #0d7fbd;--water-deep: #0b5288;--water-ink: #052c53;--glass: rgba(7, 47, 84, .52);--glass-strong: rgba(6, 38, 70, .78);--glass-edge: rgba(190, 240, 255, .34);--glass-hi: rgba(255, 255, 255, .16);--text: #f2fbff;--text-dim: rgba(226, 246, 255, .76);--text-faint: rgba(210, 240, 255, .6);--accent: #ffd977;--accent-ink: #4a3000;--coral: #ff8f6b;--radius-lg: 20px;--radius-md: 14px;--radius-pill: 999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--shadow-panel: 0 18px 48px rgba(2, 26, 52, .38), 0 2px 0 rgba(255, 255, 255, .12) inset;--ease-out: cubic-bezier(.22, .9, .3, 1);--font-display: "Fredoka", "Nunito", system-ui, sans-serif;--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif}.app[data-light=night]{--glass: rgba(4, 12, 38, .6);--glass-strong: rgba(3, 9, 30, .84);--glass-edge: rgba(150, 190, 255, .26);--text: #e6efff;--text-dim: rgba(206, 224, 255, .74);--text-faint: rgba(186, 208, 246, .58);--shadow-panel: 0 18px 48px rgba(0, 4, 20, .55), 0 2px 0 rgba(180, 214, 255, .1) inset}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--water-ink);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overscroll-behavior:none}#root{height:100%}.app{position:relative;width:100%;height:100%;overflow:hidden}.tank{cursor:grab;position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation;cursor:crosshair}.tank:focus-visible{outline:3px solid var(--accent);outline-offset:-6px}.hud{position:absolute;inset:0;pointer-events:none;padding:max(var(--space-4),env(safe-area-inset-top)) var(--space-4) var(--space-4);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-4)}.hud__top,.hud__bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}.hud__bottom{align-items:flex-end}.hud>*>*{pointer-events:auto}.panel{background:var(--glass);border:1px solid var(--glass-edge);border-radius:var(--radius-lg);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:var(--shadow-panel)}.brand{padding:var(--space-3) var(--space-4);max-width:min(30ch,62vw);animation:rise-in .52s var(--ease-out) both}.brand__title{font-family:var(--font-display);font-weight:600;font-size:clamp(19px,2.4vw,25px);letter-spacing:.005em;margin:0;line-height:1.1}.brand__sub{margin:3px 0 0;font-size:12.5px;color:var(--text-dim);line-height:1.35}.stats{display:flex;gap:var(--space-1);padding:var(--space-2);animation:rise-in .52s var(--ease-out) 80ms both}.stat{min-width:62px;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);text-align:center}.stat__value{display:block;font-family:var(--font-display);font-weight:600;font-size:18px;font-variant-numeric:tabular-nums;line-height:1.15}.stat__label{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint)}.stat+.stat{box-shadow:-1px 0 #bef0ff29;border-radius:0 var(--radius-md) var(--radius-md) 0}.hint{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);max-width:40ch;animation:rise-in .62s var(--ease-out) .22s both}.hint__mark{flex:0 0 auto;width:30px;height:30px;border-radius:var(--radius-pill);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--font-display);font-size:15px;font-weight:700}.hint__text{font-size:13.5px;line-height:1.4;color:var(--text-dim)}.hint__text strong{color:var(--text);font-weight:700}.controls{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);flex-wrap:wrap;animation:rise-in .52s var(--ease-out) .14s both}.btn{appearance:none;border:1px solid transparent;background:#ffffff1a;color:var(--text);font-family:var(--font-body);font-size:13.5px;font-weight:700;padding:9px 15px;border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background-color .18s var(--ease-out),transform .18s var(--ease-out),border-color .18s var(--ease-out),color .18s var(--ease-out)}.btn:hover{background:#ffffff2e;border-color:var(--glass-edge)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn--primary{background:var(--accent);color:var(--accent-ink);border-color:#ffffff80}.btn--primary:hover{background:#ffe49a}.btn--on{background:#25c2ee6b;border-color:var(--glass-edge)}.btn__dot{width:7px;height:7px;border-radius:var(--radius-pill);background:currentColor;opacity:.65}.segmented{display:inline-flex;padding:3px;gap:2px;border-radius:var(--radius-pill);background:#03203c6b}.segmented__btn{appearance:none;border:0;background:transparent;color:var(--text-dim);font-family:var(--font-body);font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:var(--radius-pill);cursor:pointer;transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}.segmented__btn[aria-pressed=true]{background:#fff3;color:var(--text)}.segmented__btn:hover{color:var(--text)}.segmented__btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.icon-toggle{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 12px 6px 8px;border-radius:var(--radius-pill);background:#03203c6b;border:1px solid transparent;color:var(--text-dim);font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:color .2s var(--ease-out),border-color .2s var(--ease-out),background .32s var(--ease-out)}.icon-toggle:hover{color:var(--text);border-color:var(--glass-edge)}.icon-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-toggle__glyph{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:15px;line-height:1;color:var(--accent)}.icon-toggle[aria-pressed=true]{color:var(--text);background:#020e2899}.icon-toggle[aria-pressed=true] .icon-toggle__glyph{color:#cfe0ff;text-shadow:0 0 10px rgba(160,200,255,.85)}.sound-toggle{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 12px 6px 6px;border-radius:var(--radius-pill);background:#03203c6b;border:1px solid transparent;color:var(--text-dim);font-size:12.5px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}.sound-toggle:hover{color:var(--text);border-color:var(--glass-edge)}.sound-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sound-toggle__bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px;width:18px}.sound-toggle__bars i{display:block;width:3px;border-radius:2px;background:currentColor;height:5px}.sound-toggle[aria-pressed=true] .sound-toggle__bars i{animation:eq 1.1s ease-in-out infinite;background:var(--accent)}.sound-toggle__bars i:nth-child(2){animation-delay:.14s}.sound-toggle__bars i:nth-child(3){animation-delay:.28s}.guide{border:1px solid var(--glass-edge);border-radius:var(--radius-lg);background:var(--glass-strong);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);color:var(--text);padding:0;width:min(760px,calc(100vw - 32px));max-height:min(78vh,720px);box-shadow:var(--shadow-panel);overflow:hidden}.guide::backdrop{background:#02162c73;backdrop-filter:blur(2px)}.guide__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-bottom:1px solid rgba(190,240,255,.18)}.guide__title{font-family:var(--font-display);font-size:21px;font-weight:600;margin:0}.guide__count{font-size:12.5px;color:var(--text-dim);font-variant-numeric:tabular-nums}.guide__body{padding:var(--space-5);overflow:auto;max-height:62vh}.guide__group+.guide__group{margin-top:var(--space-5)}.guide__group-title{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin:0 0 var(--space-3)}.guide__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}.guide__item{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);padding:9px 12px;border-radius:var(--radius-md);background:#ffffff12;border:1px solid rgba(190,240,255,.14)}.guide__name{font-weight:700;font-size:13.5px}.guide__size{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:var(--radius-pill);background:#ffd97724;border:1px solid rgba(255,217,119,.28);color:var(--accent);font-size:10.5px;font-weight:700;letter-spacing:.02em;vertical-align:1px}.guide__note{display:block;font-size:11.5px;color:var(--text-dim);font-weight:400;margin-top:2px;line-height:1.35}.guide__badge{flex:0 0 auto;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}.guide__close{appearance:none;border:1px solid var(--glass-edge);background:#ffffff1a;color:var(--text);border-radius:var(--radius-pill);padding:7px 14px;font-family:var(--font-body);font-weight:700;font-size:13px;cursor:pointer;transition:background-color .18s var(--ease-out)}.guide__close:hover{background:#fff3}.guide__close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.notice{position:absolute;left:50%;top:max(var(--space-5),env(safe-area-inset-top));transform:translate(-50%);padding:9px 18px;border-radius:var(--radius-pill);background:var(--glass-strong);border:1px solid var(--glass-edge);color:var(--text);font-size:13px;font-weight:700;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);pointer-events:none;animation:notice-life 2.4s var(--ease-out) both}.hover-chip{padding:7px 14px;border-radius:var(--radius-pill);background:#03203c80;border:1px solid var(--glass-edge);font-size:12.5px;font-weight:700;color:var(--text);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes notice-life{0%{opacity:0;transform:translate(-50%,-8px)}12%,78%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-6px)}}@keyframes eq{0%,to{height:5px}50%{height:14px}}@media(max-width:720px){.hud{padding:max(var(--space-3),env(safe-area-inset-top)) var(--space-3) var(--space-3);gap:var(--space-2)}.brand{padding:var(--space-2) var(--space-3)}.brand__sub{display:none}.stats{padding:4px}.stat{min-width:48px;padding:2px var(--space-2)}.stat__value{font-size:16px}.stats .stat:nth-child(3){display:none}.controls{width:100%;justify-content:center;gap:6px;padding:6px}.btn,.sound-toggle{font-size:12.5px;padding:8px 12px}.segmented__btn{padding:6px 10px}.hint{max-width:100%;padding:var(--space-2) var(--space-3)}.hint__text{font-size:12.5px}.hint__mark{width:26px;height:26px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.tank{cursor:grab;cursor:default}}