:root {
  color-scheme: dark;
  --deep: #062831;
  --ink: #dcece7;
  --muted: #91aca9;
  --glass: rgba(7, 42, 50, .78);
  --glass-strong: rgba(5, 31, 38, .95);
  --line: rgba(192, 226, 216, .14);
  --seafoam: #9fd7c8;
  --coral: #e6a47e;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--deep); color: var(--ink); -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { color: inherit; }

.game-shell { position: relative; width: 100%; height: 100%; height: 100dvh; overflow: hidden; isolation: isolate; }
#water { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: default; }

.topbar {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center;
  justify-content: space-between; padding: max(15px, env(safe-area-inset-top)) max(17px, env(safe-area-inset-right)) 12px max(17px, env(safe-area-inset-left)); pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; pointer-events: auto; }
.brand-mark { position: relative; display: block; width: 39px; height: 22px; border-radius: 65% 46% 49% 66%; background: var(--seafoam); transform: rotate(-4deg); box-shadow: inset -7px 0 rgba(16, 72, 76, .3); }
.brand-mark::before { position: absolute; right: -10px; top: 3px; width: 15px; height: 16px; content: ""; background: var(--seafoam); clip-path: polygon(0 50%,100% 0,78% 50%,100% 100%); }
.brand-mark::after { position: absolute; left: 7px; top: 6px; width: 4px; height: 4px; border-radius: 50%; content: ""; background: #092e35; }
.brand-mark i { position: absolute; left: 17px; top: 2px; width: 2px; height: 18px; border-radius: 50%; background: rgba(7, 49, 55, .3); transform: rotate(22deg); }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy b { font-size: 16px; letter-spacing: .2em; }
.brand-copy small { margin-top: 3px; color: var(--muted); font: 8px/1 system-ui, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.top-actions { display: flex; gap: 8px; align-items: center; pointer-events: auto; }
.scales { display: flex; align-items: center; gap: 7px; min-height: 39px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); backdrop-filter: blur(12px); box-shadow: 0 7px 22px rgba(0,0,0,.12); }
.scales i { width: 12px; height: 17px; border-radius: 90% 15% 90% 15%; background: linear-gradient(145deg,#e5c485,#aa8763); transform: rotate(38deg); }
.scales strong { min-width: 1.2em; font-size: 12px; font-variant-numeric: tabular-nums; }
.icon-button, .close-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--glass); box-shadow: 0 7px 22px rgba(0,0,0,.12); cursor: pointer; backdrop-filter: blur(12px); }
.icon-button { font-size: 21px; transform: rotate(90deg); }

.toolbar {
  position: absolute; z-index: 5; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  width: min(510px, calc(100% - 24px)); padding: 5px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); box-shadow: 0 14px 40px rgba(0,0,0,.2); backdrop-filter: blur(15px); transform: translateX(-50%);
}
.tool-button { min-width: 0; height: 54px; padding: 6px 11px; border: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 9px; background: transparent; cursor: pointer; }
.tool-button:hover, .tool-button[aria-pressed="true"] { background: rgba(153, 211, 197, .11); }
.tool-button > span:last-child { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.tool-button b { font-size: 11px; letter-spacing: .05em; }
.tool-button small { overflow: hidden; max-width: 95px; margin-top: 3px; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.tool-icon { position: relative; display: block; flex: 0 0 26px; width: 26px; height: 26px; }
.school-icon i { position: absolute; width: 12px; height: 7px; border-radius: 70% 50%; background: var(--seafoam); }
.school-icon i::after { position: absolute; right: -4px; top: 1px; width: 5px; height: 5px; content: ""; background: inherit; clip-path: polygon(0 50%,100% 0,100% 100%); }
.school-icon i:nth-child(1) { top: 2px; left: 2px; }.school-icon i:nth-child(2) { top: 10px; right: 1px; transform: scale(.8); }.school-icon i:nth-child(3) { bottom: 1px; left: 3px; transform: scale(.65); }
.focus-icon { border: 1.5px solid var(--seafoam); border-radius: 50%; opacity: .9; }
.focus-icon::before, .focus-icon::after { position: absolute; left: 50%; top: 50%; content: ""; background: var(--seafoam); transform: translate(-50%,-50%); }
.focus-icon::before { width: 6px; height: 1px; }.focus-icon::after { width: 1px; height: 6px; }
.sound-icon::before, .sound-icon::after, .sound-icon i { position: absolute; left: 2px; right: 2px; height: 5px; border-top: 1.5px solid var(--seafoam); border-radius: 50%; content: ""; }
.sound-icon::before { top: 5px; }.sound-icon i { top: 11px; }.sound-icon::after { top: 17px; }

.hint, .toast, .invite { position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); border-radius: 999px; white-space: nowrap; }
.hint { bottom: max(84px, calc(env(safe-area-inset-bottom) + 75px)); padding: 7px 12px; background: rgba(4,31,37,.68); color: #bfd5cf; font-size: 9px; letter-spacing: .05em; pointer-events: none; opacity: 1; transition: opacity 1s; }
.hint.faded { opacity: 0; }
.toast { top: max(68px, calc(env(safe-area-inset-top) + 54px)); padding: 8px 13px; background: rgba(4,29,34,.9); color: var(--ink); font-size: 10px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; transform: translate(-50%,-7px); }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.invite { top: max(72px, calc(env(safe-area-inset-top) + 58px)); padding: 9px 14px; border: 1px solid rgba(169,222,207,.18); background: var(--glass); color: #bde4d7; font-size: 10px; cursor: pointer; backdrop-filter: blur(12px); }
.invite span { margin-right: 5px; }
.show-ui { position: absolute; z-index: 7; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(5,35,41,.58); color: rgba(220,236,231,.55); font-size: 8px; font-weight: 700; letter-spacing: .1em; cursor: pointer; }

.game-ui { transition: opacity .5s, transform .5s; }
.ui-hidden .game-ui { opacity: 0; pointer-events: none; }

.overlay { position: fixed; z-index: 20; inset: 0; display: grid; place-items: end center; padding: 18px; background: rgba(2,17,21,.5); backdrop-filter: blur(6px); }
.overlay[hidden] { display: none; }
.panel { width: min(470px, 100%); max-height: min(650px, calc(100dvh - 36px)); overflow: auto; overscroll-behavior: contain; padding: 21px; border: 1px solid var(--line); border-radius: 24px; background: var(--glass-strong); box-shadow: 0 24px 75px rgba(0,0,0,.38); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.panel-head small, .section-label { color: #80b9ab; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.panel h1 { margin: 3px 0 0; font: 600 25px/1.05 Georgia, serif; letter-spacing: -.03em; }
.close-button { flex: 0 0 auto; width: 38px; height: 38px; font-size: 22px; box-shadow: none; }
.school-rows, .upgrade-rows { display: grid; gap: 7px; }
.purchase-row, .upgrade-row { display: grid; grid-template-columns: 41px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 9px; border: 1px solid rgba(197,226,219,.08); border-radius: 14px; background: rgba(155,207,194,.045); }
.fish-swatch { position: relative; width: 36px; height: 18px; border-radius: 65% 47% 49% 67%; background: var(--fish-color); }
.fish-swatch::after { position: absolute; right: -8px; top: 2px; width: 11px; height: 14px; content: ""; background: var(--fish-color); clip-path: polygon(0 50%,100% 0,76% 50%,100% 100%); }
.fish-swatch::before { position: absolute; left: 7px; top: 5px; z-index: 1; width: 3px; height: 3px; border-radius: 50%; content: ""; background: #092e35; }
.fish-swatch.medium { transform: scale(.85); }.fish-swatch.tiny { transform: scale(.7); }.fish-swatch.chunky { height: 22px; }
.row-copy { min-width: 0; }
.row-copy b { display: block; font-size: 12px; }.row-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.25; }
.buy-button { min-width: 76px; padding: 9px 10px; border: 1px solid rgba(163,214,201,.15); border-radius: 10px; background: rgba(151,206,192,.1); color: #d3e9e3; font-size: 9px; font-weight: 800; cursor: pointer; }
.buy-button:disabled { opacity: .34; cursor: default; }
.section-label { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; }
.section-label::after { flex: 1; height: 1px; content: ""; background: var(--line); }
.upgrade-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(160,211,199,.14); border-radius: 50%; color: var(--seafoam); font: 18px Georgia, serif; }
.panel-note { margin: 16px 5px 0; color: var(--muted); font-size: 9px; line-height: 1.45; text-align: center; }
.ambience-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ambience-option { display: flex; align-items: center; gap: 11px; min-height: 60px; padding: 10px 12px; border: 1px solid rgba(178,220,211,.1); border-radius: 14px; background: rgba(142,199,185,.04); text-align: left; cursor: pointer; }
.ambience-option.active { border-color: rgba(159,215,200,.38); background: rgba(142,199,185,.12); }
.ambience-option > i { width: 24px; color: var(--seafoam); font: normal 20px Georgia,serif; text-align: center; }
.ambience-option span { display: flex; flex-direction: column; }.ambience-option b { font-size: 11px; }.ambience-option small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.volume-row { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; margin-top: 15px; }
.volume-row label { color: var(--muted); font-size: 9px; }.volume-row input { width: 100%; accent-color: var(--seafoam); }
.mute-button { min-width: 76px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(153,211,197,.08); font-size: 9px; cursor: pointer; }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid rgba(178,226,214,.7); outline-offset: 3px; }

@media (min-width: 650px) { .overlay { place-items: center; } }
@media (max-width: 530px) {
  .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .brand-copy small { display: none; }.brand-copy b { font-size: 14px; }.brand-mark { width: 34px; height: 19px; }
  .toolbar { width: calc(100% - 16px); bottom: max(8px, env(safe-area-inset-bottom)); }
  .tool-button { height: 57px; padding: 5px 4px; flex-direction: column; gap: 3px; }
  .tool-button > span:last-child { align-items: center; }.tool-button small { display: none; }.tool-icon { flex-basis: 24px; height: 24px; transform: scale(.85); }
  .hint { bottom: max(77px, calc(env(safe-area-inset-bottom) + 69px)); }
  .overlay { padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .panel { max-height: calc(100dvh - 16px - env(safe-area-inset-bottom)); padding: 18px; border-radius: 21px; }
  .ambience-options { grid-template-columns: 1fr; }
  .purchase-row, .upgrade-row { grid-template-columns: 34px minmax(0,1fr) auto; gap: 8px; padding: 8px; }
  .fish-swatch { transform-origin: left center; }.fish-swatch.tiny { transform: scale(.62); }.fish-swatch.medium { transform: scale(.76); }.fish-swatch.chunky { transform: scale(.88); }
  .buy-button { min-width: 67px; padding: 9px 7px; }
}
@media (prefers-reduced-motion: reduce) { .game-ui, .hint, .toast { transition-duration: .01ms; } }