@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500&family=Prata&display=swap');

:root {
  color-scheme: dark;
  --ink: #effff8;
  --muted: rgba(219, 244, 235, .64);
  --line: rgba(221, 255, 244, .2);
  --glass: rgba(3, 23, 29, .72);
  --glow: #b4efcf;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #031a21; }
body { color: var(--ink); font-family: Manrope, sans-serif; font-weight: 300; }
button, input { font: inherit; }
button { color: inherit; }
#world { display: block; width: 100%; height: 100%; outline: none; touch-action: none; image-rendering: pixelated; }

.water-glass {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 52% -18%, transparent 0 32px, rgba(120, 238, 225, .018) 34px 36px, transparent 40px 67px),
    radial-gradient(ellipse at 52% -15%, rgba(132, 242, 219, .2), transparent 52%),
    radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(0, 13, 21, .46) 115%);
  background-size: 110% 110%, 100% 100%, 100% 100%;
  animation: water-breathe 9s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

.water-glass::before,
.water-glass::after {
  content: "";
  position: absolute;
  inset: -8%;
  opacity: .25;
  background: repeating-linear-gradient(112deg, transparent 0 9%, rgba(163, 255, 234, .025) 10%, transparent 12% 21%);
  animation: current-drift 16s linear infinite;
}
.water-glass::after { opacity: .14; transform: rotate(90deg) scale(1.2); animation-duration: 23s; animation-direction: reverse; }

@keyframes water-breathe {
  from { background-position: -2% -1%, 0 0, 0 0; filter: hue-rotate(-3deg); }
  to { background-position: 3% 2%, 0 0, 0 0; filter: hue-rotate(4deg); }
}
@keyframes current-drift { to { translate: 9% 4%; } }

.overlay { position: fixed; inset: 0; transition: opacity .7s ease, visibility .7s; }
.hidden { opacity: 0 !important; visibility: hidden; pointer-events: none !important; }
.menu {
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, rgba(2, 17, 23, .6), rgba(2, 24, 29, .06) 55%, rgba(1, 14, 20, .2));
}
.menu-copy { width: min(82vw, 640px); text-align: center; transform: translateY(-2vh); }
.eyebrow { margin: 0 0 13px; color: var(--glow); font-size: 10px; letter-spacing: .38em; text-transform: uppercase; }
h1 { margin: 0; font: 400 clamp(72px, 13vw, 176px)/.9 Prata, serif; letter-spacing: .055em; text-shadow: 0 8px 60px rgba(0, 0, 0, .28); }
.intro { margin: 28px auto 37px; color: rgba(239, 255, 248, .76); font-size: clamp(12px, 1.2vw, 15px); line-height: 1.85; letter-spacing: .08em; }
.fish-picker { display: flex; align-items: center; justify-content: center; gap: 5px; margin: -17px 0 25px; }
.fish-picker span { margin-right: 7px; color: rgba(219, 244, 235, .42); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }
.fish-picker button { padding: 6px 9px; border: 1px solid transparent; border-radius: 20px; background: transparent; color: rgba(219, 244, 235, .55); font-size: 8px; letter-spacing: .08em; }
.fish-picker button:hover { color: white; }
.fish-picker button.active { border-color: rgba(211, 255, 238, .3); background: rgba(211, 255, 238, .09); color: white; }
.menu-actions { display: flex; align-items: center; justify-content: center; gap: 30px; }
button { border: 0; cursor: pointer; }
.primary {
  min-width: 170px;
  padding: 13px 25px;
  border: 1px solid rgba(218, 255, 241, .48);
  border-radius: 100px;
  background: rgba(211, 255, 237, .1);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  transition: background .25s, border-color .25s, transform .25s;
}
.primary:hover { background: rgba(211, 255, 237, .2); border-color: rgba(224, 255, 244, .8); transform: translateY(-1px); }
.text-button, .settings-link, .panel-button { background: none; color: var(--muted); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; transition: color .25s; }
.text-button:hover, .settings-link:hover, .panel-button:hover { color: white; }
.settings-link { margin-top: 32px; padding: 8px; font-size: 9px; }
.menu-note { position: absolute; right: 32px; bottom: 25px; margin: 0; color: rgba(222, 247, 238, .38); font-size: 8px; letter-spacing: .26em; text-transform: uppercase; }

.hud { position: fixed; inset: 0; pointer-events: none; transition: opacity .7s; }
.mode-mark { position: absolute; left: 27px; top: 25px; color: rgba(227, 250, 241, .55); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; }
.mode-mark span { display: inline-block; width: 5px; height: 5px; margin: 0 9px 1px 0; border-radius: 50%; background: #b7efd1; box-shadow: 0 0 12px #b7efd1; }
.icon-button { position: absolute; top: 19px; right: 22px; display: flex; gap: 4px; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(3, 28, 33, .22); pointer-events: auto; backdrop-filter: blur(5px); }
.icon-button i { width: 2px; height: 9px; background: rgba(238, 255, 249, .75); }
.controls { position: absolute; bottom: 24px; left: 50%; display: flex; gap: 25px; padding: 10px 17px; border: 1px solid rgba(230, 255, 247, .09); border-radius: 100px; background: rgba(2, 23, 29, .18); color: rgba(223, 247, 239, .5); font-size: 8px; letter-spacing: .09em; transform: translateX(-50%); transition: opacity 1.7s; backdrop-filter: blur(5px); white-space: nowrap; }
.controls b { color: rgba(240, 255, 250, .88); font-weight: 500; }
.controls.faded { opacity: 0; }
.saver-hint { position: fixed; bottom: 25px; left: 50%; opacity: 0; pointer-events: none; color: rgba(235, 255, 249, .55); font-size: 9px; letter-spacing: .15em; transform: translateX(-50%); transition: opacity .6s; }
.saver-hint.visible { opacity: 1; }

.panel-overlay { display: grid; place-items: center; background: rgba(1, 15, 21, .48); backdrop-filter: blur(13px); }
.panel { width: min(88vw, 350px); padding: 40px 35px 35px; border: 1px solid rgba(215, 255, 241, .16); background: linear-gradient(145deg, rgba(6, 41, 46, .82), rgba(3, 22, 28, .87)); box-shadow: 0 28px 100px rgba(0, 0, 0, .35); text-align: center; }
.panel h2, .error h2 { margin: 0 0 30px; font: 400 31px Prata, serif; letter-spacing: .04em; }
.full { width: 100%; margin: 0 0 9px; }
.panel-button { width: 100%; padding: 12px; }
.setting-row { display: flex; justify-content: space-between; margin: 22px 0 10px; color: var(--muted); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.quality-title { margin-top: 29px; }
input[type="range"] { width: 100%; height: 2px; margin: 4px 0 10px; appearance: none; background: rgba(226, 255, 245, .2); accent-color: var(--glow); }
input[type="range"]::-webkit-slider-thumb { width: 12px; height: 12px; border-radius: 50%; appearance: none; background: #dffbef; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 30px; }
.segmented button { padding: 10px 4px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.segmented button.active { background: rgba(199, 246, 226, .16); color: white; border-color: rgba(211, 255, 238, .42); }

.loading { display: grid; place-items: center; background: #031a21; text-align: center; z-index: 10; }
.loading-ring { display: block; width: 33px; height: 33px; margin: auto; border: 1px solid transparent; border-top-color: rgba(207, 255, 237, .7); border-radius: 50%; animation: spin 1.5s linear infinite; }
.loading p { color: var(--muted); font-size: 9px; letter-spacing: .27em; text-transform: uppercase; }
@keyframes spin { to { transform: rotate(360deg); } }
.error { display: grid; place-items: center; padding: 28px; background: #061b21; text-align: center; z-index: 20; }
.error > div { max-width: 500px; }
.error p:not(.eyebrow) { margin: -12px 0 28px; color: var(--muted); line-height: 1.6; }

@media (max-width: 650px) {
  .intro br { display: none; }
  .menu-actions { flex-direction: column; gap: 20px; }
  .controls { bottom: 17px; gap: 12px; }
  .controls span:nth-child(2), .controls span:nth-child(4) { display: none; }
  .menu-note { right: 20px; bottom: 17px; }
  .fish-picker { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }