@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Roboto:wght@400;500;700;900&display=swap');

:root {
  --bg: #03131e;
  --bg2: #061d2a;
  --panel: linear-gradient(180deg, rgba(8,36,50,.95), rgba(4,19,29,.97));
  --panel-soft: linear-gradient(180deg, rgba(12,45,61,.88), rgba(4,17,26,.96));
  --edge: rgba(78, 187, 213, .4);
  --edge-soft: rgba(78, 187, 213, .16);
  --orange: #f7aa2d;
  --orange-soft: #ffcf73;
  --teal: #58d5d0;
  --green: #79ef8f;
  --purple: #c56cf1;
  --copy: #d6e1e8;
  --muted: #89a2ad;
  --danger: #ff6a6a;
  --shadow: 0 18px 34px rgba(0, 0, 0, .38);
  --radius: 28px;
  --radius-sm: 18px;
  --font-display: 'Bangers', Impact, fantasy;
  --font-body: 'Roboto', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at top, rgba(17, 69, 90, .45), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(17, 36, 83, .35), transparent 22%),
    linear-gradient(180deg, #021018, #04131d 28%, #03111a 100%);
  color: var(--copy);
  font-family: var(--font-body);
  min-height: 100vh;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 14% 24%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    radial-gradient(circle at 73% 10%, rgba(255,255,255,.06) 0 2px, transparent 3px),
    radial-gradient(circle at 89% 40%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    linear-gradient(90deg, transparent, rgba(68, 210, 224, .06), transparent);
  opacity: .45;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

.display, h1, h2, h3, .display-font, .brand-big, .section-title, .fish-title, .metric-number, .timer-value, .action-title, .nav-label {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .04em;
}
.muted { color: var(--muted); }
.lead { color: #b7cad4; line-height: 1.65; }
.page-shell, .app-shell { width: min(1120px, calc(100% - 24px)); margin: 0 auto; }
.topbar { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: rgba(2, 12, 18, .72); border-bottom: 1px solid rgba(89, 212, 226, .1); }
.topbar-inner { width: min(1120px, calc(100% - 24px)); margin: 0 auto; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand-small { font-size: .84rem; letter-spacing: .22em; text-transform: uppercase; color: var(--teal); font-weight: 900; }
.brand-big { font-size: clamp(2.5rem, 7vw, 4.8rem); line-height: .9; margin: 8px 0 0; color: #f4ebdc; text-shadow: 0 5px 0 rgba(0,0,0,.35); }
.brand-big .accent { color: var(--orange); }
.nav-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nav-link { padding: 10px 16px; border-radius: 999px; background: rgba(8,26,36,.7); border: 1px solid rgba(89, 212, 226, .16); color: #d9e5ea; font-weight: 700; }
.nav-link.active, .nav-link:hover { border-color: rgba(247,170,45,.45); }
.nav-link.cta { background: linear-gradient(180deg, rgba(15,67,86,.92), rgba(7,37,47,.96)); }
.nav-link.beta { background: linear-gradient(180deg, rgba(42,29,67,.92), rgba(18,14,35,.96)); }

.hero-section { padding: 38px 0 20px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 26px; align-items: center; }
.panel, .card, .tank-shell, .metric-card, .cta-card, .faq-item, .builder-card, .roster-card, .achievement-card, .info-card {
  background: var(--panel);
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
}
.hero-visual { padding: 18px; }
.hero-visual img { border-radius: 26px; border: 1px solid rgba(88, 213, 208, .2); }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 14px 18px; border-radius: 18px; font-weight: 800;
  background: linear-gradient(180deg, rgba(14,50,63,.96), rgba(6,27,39,.98));
  color: #f0f8fb; border: 1px solid rgba(84, 204, 223, .2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 18px rgba(0,0,0,.24);
}
.btn.primary { background: linear-gradient(180deg, rgba(36,194,211,.92), rgba(12,114,132,.95)); color: #072431; }
.btn.secondary { background: linear-gradient(180deg, rgba(255,185,72,.95), rgba(186,105,24,.96)); color: #25130a; }
.btn.ghost { background: rgba(7,24,35,.75); }
.btn.small { padding: 10px 14px; border-radius: 14px; }

.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 22px; }
.feature-card { padding: 22px; background: rgba(5, 21, 31, .72); border-radius: 24px; border: 1px solid rgba(89, 212, 226, .12); }
.feature-card h3 { margin: 12px 0 8px; font-size: 1.25rem; font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; }
.feature-card p { margin: 0; color: #b8c9d1; line-height: 1.6; }
.feature-card .icon-wrap { width: 68px; aspect-ratio: 1; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(11,49,65,.95), rgba(6,25,35,.95)); border: 1px solid rgba(89,212,226,.14); }
.section-block { padding: 26px 0 0; }
.section-title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0; color: #f3efe5; }
.section-title small { display: block; font-family: var(--font-body); font-size: .9rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-top: 6px; }

.app-shell { padding: 26px 0 120px; }
.beta-banner { margin: 0 0 16px; padding: 12px 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(61,31,84,.92), rgba(25,15,41,.98)); border: 1px solid rgba(203,127,255,.2); font-weight: 700; }
.app-header { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.header-actions { display: flex; gap: 14px; align-items: stretch; }
.juan-panel { display: flex; align-items: center; gap: 14px; padding: 14px 18px; min-width: 280px; border-radius: 24px; background: linear-gradient(180deg, rgba(11,37,52,.95), rgba(6,22,34,.98)); border: 1px solid rgba(89, 212, 226, .15); box-shadow: var(--shadow); }
.juan-thumb { width: 74px; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.06); flex: 0 0 auto; }
.juan-copy .mini { font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; color: #adbbc4; font-weight: 900; }
.juan-copy strong { display: block; font-size: 2rem; line-height: .9; color: #fff6ea; font-family: var(--font-display); }
.settings-btn { width: 76px; aspect-ratio: 1; border-radius: 22px; background: linear-gradient(180deg, rgba(8,33,46,.95), rgba(4,20,29,.98)); border: 1px solid rgba(89,212,226,.16); color: #f1f9fc; font-size: 1.8rem; box-shadow: var(--shadow); cursor: pointer; }

.tank-shell { margin-top: 18px; padding: 18px; background: linear-gradient(180deg, rgba(8,36,50,.96), rgba(4,18,28,.98)); }
.tank-stage {
  position: relative; overflow: hidden; min-height: 430px; padding: 18px; border-radius: 28px;
  border: 1px solid rgba(90, 210, 225, .2);
  background:
    radial-gradient(circle at 22% 14%, rgba(255,255,255,.16), transparent 14%),
    radial-gradient(circle at 84% 24%, rgba(255,255,255,.09), transparent 22%),
    linear-gradient(180deg, rgba(95,164,191,.95), rgba(16,77,102,.92) 36%, rgba(10,49,69,.96) 76%, rgba(13,19,20,.98) 77%, rgba(56,56,44,.96) 100%);
  box-shadow: inset 0 18px 40px rgba(255,255,255,.08), inset 0 -20px 55px rgba(0,0,0,.35);
}
.tank-stage::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 82% 30%, rgba(255,255,255,.24) 0 6px, transparent 7px),
    radial-gradient(circle at 75% 45%, rgba(255,255,255,.17) 0 4px, transparent 5px),
    radial-gradient(circle at 80% 50%, rgba(255,255,255,.18) 0 4px, transparent 5px),
    linear-gradient(110deg, transparent 22%, rgba(255,255,255,.1) 28%, rgba(255,255,255,.06) 33%, transparent 38%);
  pointer-events: none;
}
.tank-algae { position: absolute; inset: 0; background:
    radial-gradient(circle at 8% 95%, rgba(58,131,29,.65), transparent 24%),
    radial-gradient(circle at 97% 82%, rgba(80,148,38,.55), transparent 18%),
    radial-gradient(circle at 92% 8%, rgba(110,161,32,.4), transparent 16%);
  opacity: .65; mix-blend-mode: screen; pointer-events: none; transition: opacity .25s ease; }
.tank-gravel { position: absolute; left: 0; right: 0; bottom: 0; height: 105px; background:
    radial-gradient(circle at 8% 20%, rgba(181,165,118,.9) 0 12px, transparent 13px),
    radial-gradient(circle at 16% 48%, rgba(176,165,129,.86) 0 13px, transparent 14px),
    radial-gradient(circle at 28% 22%, rgba(174,152,110,.82) 0 11px, transparent 12px),
    radial-gradient(circle at 41% 18%, rgba(190,176,133,.86) 0 13px, transparent 14px),
    radial-gradient(circle at 56% 44%, rgba(165,148,108,.8) 0 12px, transparent 13px),
    radial-gradient(circle at 72% 24%, rgba(182,166,123,.84) 0 11px, transparent 12px),
    radial-gradient(circle at 85% 48%, rgba(160,143,104,.8) 0 12px, transparent 13px),
    linear-gradient(180deg, rgba(56,58,49,.75), rgba(48,48,41,.95));
  opacity: .95;
}
.tank-plants span { position: absolute; bottom: 78px; width: 18px; border-radius: 40px 40px 4px 4px; transform-origin: bottom center; background: linear-gradient(180deg, #4ad95e, #3b8d33); filter: drop-shadow(0 0 10px rgba(124,255,150,.18)); animation: sway 4.5s ease-in-out infinite; }
.tank-plants span:nth-child(1) { left: 6%; height: 110px; animation-delay: .3s; }
.tank-plants span:nth-child(2) { left: 10%; height: 86px; animation-delay: .9s; }
.tank-plants span:nth-child(3) { left: 18%; height: 130px; animation-delay: .5s; }
.tank-plants span:nth-child(4) { right: 16%; height: 98px; animation-delay: 1.2s; }
.tank-plants span:nth-child(5) { right: 9%; height: 126px; animation-delay: .7s; }
@keyframes sway { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }

.tank-top, .tank-bottom { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 900; border: 1px solid rgba(255,255,255,.06); background: rgba(7,35,47,.7); }
.pill.green { color: #d5ffd9; box-shadow: inset 0 0 0 1px rgba(121,239,143,.16); }
.pill.orange { color: #ffe0aa; box-shadow: inset 0 0 0 1px rgba(247,170,45,.18); }
.filter-card { margin-left: auto; max-width: 215px; padding: 16px 18px; border-radius: 26px; background: rgba(4, 22, 34, .8); border: 1px solid rgba(89,212,226,.14); }
.filter-card .label, .panel-kicker, .metric-title, .sub-kicker { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: #b7c7cf; font-weight: 900; }
.filter-card .progress-num { font-size: 4rem; line-height: .85; color: #f1f8fc; font-family: var(--font-display); }
.bar { margin-top: 12px; height: 18px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #46e5ff, #45b7ff); box-shadow: 0 0 20px rgba(68,201,255,.3); width: 0; transition: width .25s ease; }
.bar.green > span { background: linear-gradient(90deg, #8cf06d, #58d36c); }
.bar.orange > span { background: linear-gradient(90deg, #ffb34f, #e7892f); }

.tank-meta { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr auto; gap: 12px; align-items: end; padding-top: 12px; }
.identity-wrap { max-width: 390px; }
.fish-title { font-size: clamp(2.3rem, 7vw, 4.2rem); line-height: .82; margin: 8px 0 8px; color: #eff1ec; text-shadow: 0 4px 0 rgba(0,0,0,.18); }
.attitude-block { display: flex; gap: 16px; align-items: flex-start; }
.attitude-word { font-size: clamp(1.6rem, 5vw, 3rem); line-height: .9; color: var(--orange); }
.quote-card { margin-top: 14px; background: rgba(5, 19, 28, .65); border: 1px solid rgba(89,212,226,.1); padding: 14px 16px; border-radius: 22px; max-width: 330px; }
.quote-card p { margin: 6px 0 0; font-size: 1.25rem; font-weight: 900; line-height: 1.35; color: #f7f5ee; }
.mood-bubble { display: flex; align-items: center; gap: 10px; align-self: end; background: rgba(4, 19, 28, .75); border: 1px solid rgba(89,212,226,.1); padding: 14px 16px; border-radius: 22px; max-width: 270px; }
.mood-bubble strong { color: var(--orange); font-size: 1.25rem; }

.filter-machine { position: absolute; right: 28px; top: 122px; width: 130px; height: 230px; border-radius: 32px 32px 18px 18px; border: 1px solid rgba(85,218,232,.18); background: linear-gradient(180deg, rgba(36,54,65,.88), rgba(14,19,27,.96)); box-shadow: inset 0 0 35px rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.28); }
.filter-machine::before, .filter-machine::after { content:''; position:absolute; left:50%; transform:translateX(-50%); width: 70px; border-radius: 18px; }
.filter-machine::before { top: 18px; height: 46px; background: rgba(13,29,39,.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.filter-machine::after { top: 74px; height: 84px; background: linear-gradient(180deg, rgba(61,227,249,.3), rgba(40,120,184,.28)); box-shadow: inset 0 0 0 1px rgba(68,212,245,.2); }
.filter-machine .heart-monitor { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:70px; height:46px; border-radius:14px; background:rgba(14,28,36,.8); border:1px solid rgba(85,212,228,.12); display:grid; place-items:center; color:#74f0a8; font-size:1.35rem; }
.filter-stream { position:absolute; right:123px; top: 170px; width: 120px; height: 86px; border-radius: 50%; filter: blur(.2px); opacity: .8; background: radial-gradient(circle at left center, rgba(255,255,255,.85), rgba(66,232,255,.65) 25%, rgba(44,158,241,.38) 70%, transparent 71%); transform: rotate(-12deg); }
.filter-stream::before, .filter-stream::after { content:''; position:absolute; inset:0; background: repeating-radial-gradient(circle at 8% 50%, rgba(255,255,255,.25) 0 8px, rgba(0,0,0,0) 9px 16px); mix-blend-mode: screen; opacity: .42; }

.fish-view { position: absolute; left: 50%; top: 56%; transform: translate(-40%, -46%); width: 310px; height: 240px; z-index: 3; filter: drop-shadow(0 14px 20px rgba(0,0,0,.28)); }
.fish-layer { position: absolute; inset: 0; object-fit: contain; pointer-events: none; }
.fish-face-fill { position: absolute; border-radius: 50%; background: rgba(222, 215, 193, .8); filter: saturate(1.04) brightness(1.03); box-shadow: inset 0 0 20px rgba(255,255,255,.12); }
.fish-view.idle { animation: floaty 4.4s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.fish-note { position:absolute; right: 118px; bottom: 22px; z-index: 2; max-width: 220px; padding: 13px 14px; border-radius: 20px; background: rgba(6,24,35,.78); border: 1px solid rgba(89,212,226,.1); font-weight: 700; }

.action-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.action-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-height: 98px; border-radius: 24px; background: linear-gradient(180deg, rgba(8,29,41,.96), rgba(4,18,28,.98)); border: 1px solid rgba(89,212,226,.14); box-shadow: var(--shadow); cursor: pointer; }
.action-card:nth-child(1) { box-shadow: inset 0 0 0 1px rgba(247,170,45,.35), var(--shadow); }
.action-card:nth-child(2) { box-shadow: inset 0 0 0 1px rgba(121,239,143,.3), var(--shadow); }
.action-card:nth-child(3) { box-shadow: inset 0 0 0 1px rgba(87,198,255,.3), var(--shadow); }
.action-card:nth-child(4) { box-shadow: inset 0 0 0 1px rgba(197,108,241,.34), var(--shadow); }
.action-card img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); }
.action-title { font-size: 2rem; color: #f4efe4; line-height: .84; }
.action-sub { margin-top: 6px; font-size: 1.05rem; color: #cfdbdf; font-weight: 700; }
.notice-bar { margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(6,22,32,.85); border: 1px solid rgba(89,212,226,.1); font-weight: 700; }
.notice-bar.success { box-shadow: inset 0 0 0 1px rgba(121,239,143,.18); }
.notice-bar.error { box-shadow: inset 0 0 0 1px rgba(255,106,106,.18); }
.notice-bar.warn { box-shadow: inset 0 0 0 1px rgba(247,170,45,.18); }

.metrics-grid, .two-col-grid, .footer-section-grid { display: grid; gap: 14px; margin-top: 14px; }
.metrics-grid { grid-template-columns: repeat(3, 1fr); }
.metric-card { padding: 18px 20px; }
.metric-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.metric-number { font-size: clamp(2.8rem, 7vw, 4.6rem); line-height: .85; margin-top: 8px; color: #e8f6ef; }
.metric-number.orange { color: #ffbf54; }
.metric-number.blue { color: #69ebff; }
.metric-note { margin-top: 6px; color: #b5c8d1; font-size: 1.05rem; }

.two-col-grid { grid-template-columns: 1.2fr .8fr; }
.timer-card, .log-card { padding: 22px; }
.timer-hero { display: grid; grid-template-columns: auto 170px 1fr; gap: 18px; align-items: center; }
.timer-value { font-size: clamp(4rem, 12vw, 8rem); line-height: .8; color: #f9f5e9; }
.timer-play { width: 160px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(89,212,226,.2); display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, rgba(95,244,255,.9), rgba(17,107,136,.94) 60%, rgba(4,24,34,.98)); box-shadow: inset 0 0 40px rgba(255,255,255,.18), 0 14px 30px rgba(0,0,0,.25); cursor: pointer; font-size: 4rem; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chip { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(89,212,226,.12); background: rgba(7,24,35,.84); font-weight: 800; }
.timer-side { border-radius: 24px; border: 1px solid rgba(89,212,226,.1); background: rgba(5,22,32,.65); padding: 20px; min-height: 170px; }
.timer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.log-list { display: grid; gap: 10px; margin-top: 18px; }
.log-item { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: 18px; background: rgba(7,24,35,.6); border: 1px solid rgba(89,212,226,.1); }
.log-item .icon { width: 46px; aspect-ratio: 1; border-radius: 14px; background: rgba(10,40,54,.8); display: grid; place-items: center; font-size: 1.35rem; }
.log-item strong { display: block; }
.log-item small { color: var(--muted); }

.footer-section-grid { grid-template-columns: 1.1fr .9fr; }
.collect-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.collect-card, .boneyard-card { padding: 18px; }
.collect-item { padding: 14px; border-radius: 22px; background: rgba(5,20,29,.72); border: 1px solid rgba(89,212,226,.1); text-align: center; }
.collect-item img { margin: 0 auto 8px; width: 92px; height: 92px; object-fit: contain; }
.collect-item .rarity { font-size: .9rem; font-weight: 800; color: var(--muted); }
.boneyard-hero { border-radius: 24px; overflow: hidden; border: 1px solid rgba(197,108,241,.18); background: linear-gradient(180deg, rgba(28,16,42,.92), rgba(8,7,19,.98)); }
.boneyard-hero img { width: 100%; height: 220px; object-fit: cover; }
.boneyard-hero .copy { padding: 16px; }

.ach-strip { margin-top: 14px; display: grid; grid-template-columns: 220px 1fr 240px; gap: 14px; }
.streak-box, .nextup-box, .achievement-card { padding: 18px; }
.streak-box .num { font-size: 4rem; line-height: .8; color: var(--orange); font-family: var(--font-display); }
.ach-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ach-badge { padding: 12px; border-radius: 22px; text-align: center; background: rgba(5,20,29,.72); border: 1px solid rgba(89,212,226,.1); }
.ach-badge img { width: 76px; height: 76px; object-fit: contain; margin: 0 auto 8px; }
.ach-badge.locked { opacity: .48; filter: grayscale(.7); }

.builder-grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.builder-card { padding: 18px; }
.builder-preview { position: relative; min-height: 280px; border-radius: 26px; border: 1px solid rgba(89,212,226,.12); background: linear-gradient(180deg, rgba(8,34,46,.86), rgba(3,17,25,.96)); overflow: hidden; }
.builder-preview .fish-view { left: 50%; top: 58%; transform: translate(-50%, -50%); width: 340px; height: 250px; }
.option-group { margin-top: 14px; }
.option-group h4 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: .04em; }
.option-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.option-btn { width: 78px; height: 78px; padding: 6px; border-radius: 18px; border: 1px solid rgba(89,212,226,.12); background: rgba(6,23,33,.86); cursor: pointer; display: grid; place-items: center; }
.option-btn img { max-width: 100%; max-height: 100%; object-fit: contain; }
.option-btn.active { box-shadow: inset 0 0 0 2px rgba(247,170,45,.55), 0 0 0 1px rgba(247,170,45,.2); }
.builder-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.character-list { display: grid; gap: 12px; }
.character-item { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(6,21,32,.72); border: 1px solid rgba(89,212,226,.1); }
.character-thumb { position: relative; width: 100px; height: 74px; overflow: hidden; }
.character-thumb .fish-view { width: 100px; height: 74px; inset: 0; position: relative; transform: none; left: auto; top: auto; }
.character-item strong { display: block; font-size: 1.1rem; }

.roster-showcase { margin-top: 14px; display: grid; gap: 14px; }
.roster-showcase .show-card { border-radius: 26px; overflow: hidden; border: 1px solid rgba(89,212,226,.16); background: rgba(5,20,29,.7); }

.app-footer { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(1120px, calc(100% - 24px)); padding: 12px 16px; z-index: 40; display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; border-radius: 28px; background: rgba(2,12,18,.92); border: 1px solid rgba(89,212,226,.14); box-shadow: 0 12px 38px rgba(0,0,0,.34); backdrop-filter: blur(12px); }
.nav-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; border-radius: 18px; color: #d5e1e7; cursor: pointer; border: 1px solid transparent; background: transparent; }
.nav-btn.active { background: linear-gradient(180deg, rgba(11,44,59,.92), rgba(5,25,37,.96)); border-color: rgba(89,212,226,.14); }
.nav-btn .nav-icon { font-size: 1.35rem; }
.nav-label { font-size: 1.2rem; line-height: .9; }

.faq-wrap { padding: 26px 0 120px; }
.faq-item { margin-bottom: 12px; overflow: hidden; }
.faq-q { width: 100%; padding: 18px 20px; background: transparent; border: 0; color: #f0f8fb; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; text-align: left; font-size: 1.1rem; font-weight: 900; }
.faq-a { max-height: 0; overflow: hidden; padding: 0 20px; color: #bdd0d8; transition: max-height .25s ease, padding-bottom .25s ease; }
.faq-item.open .faq-a { max-height: 200px; padding: 0 20px 18px; }
.faq-item.open .faq-q { color: #ffd48a; }

.tutorial-overlay { position: fixed; inset: 0; z-index: 99; background: rgba(2,10,14,.75); backdrop-filter: blur(4px); display: none; }
.tutorial-overlay.open { display: block; }
.tutorial-highlight { position: absolute; border-radius: 22px; box-shadow: 0 0 0 9999px rgba(1,8,11,.55), 0 0 0 3px rgba(247,170,45,.85), 0 0 22px rgba(247,170,45,.3); pointer-events: none; transition: all .24s ease; }
.tutorial-card { position: absolute; width: min(360px, calc(100vw - 24px)); padding: 18px; border-radius: 24px; background: linear-gradient(180deg, rgba(12,43,58,.98), rgba(6,24,35,.98)); border: 1px solid rgba(247,170,45,.32); box-shadow: 0 20px 36px rgba(0,0,0,.4); }
.tutorial-count { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: #ffc864; font-weight: 900; }
.tutorial-card h3 { margin: 8px 0 8px; font-size: 2rem; color: #f5f1e9; }
.tutorial-card p { margin: 0; line-height: 1.6; color: #c5d3da; }
.tutorial-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }

.modal { position: fixed; inset: 0; z-index: 80; display: none; background: rgba(2,10,14,.75); backdrop-filter: blur(8px); }
.modal.open { display: grid; place-items: center; }
.modal-card { width: min(820px, calc(100% - 24px)); max-height: min(84vh, 900px); overflow: auto; padding: 22px; border-radius: 28px; background: linear-gradient(180deg, rgba(8,35,49,.98), rgba(4,18,28,.99)); border: 1px solid rgba(89,212,226,.18); box-shadow: 0 20px 45px rgba(0,0,0,.42); position: relative; }
.modal-close { position: absolute; right: 18px; top: 18px; width: 46px; height: 46px; border-radius: 14px; border: 0; cursor: pointer; background: rgba(9,28,39,.8); color: white; font-size: 1.2rem; }
.field { margin-top: 14px; }
.field label { display: block; font-weight: 800; margin-bottom: 8px; }
.field input, .field textarea { width: 100%; border-radius: 16px; border: 1px solid rgba(89,212,226,.16); background: rgba(5,20,29,.86); color: #fff; padding: 12px 14px; }

@media (max-width: 980px) {
  .hero-grid, .feature-grid, .metrics-grid, .two-col-grid, .footer-section-grid, .builder-grid, .ach-strip { grid-template-columns: 1fr; }
  .collect-grid { grid-template-columns: repeat(2,1fr); }
  .ach-list { grid-template-columns: repeat(3,1fr); }
  .action-grid { grid-template-columns: repeat(2,1fr); }
  .tank-meta { grid-template-columns: 1fr; }
  .filter-card { margin-left: 0; max-width: 180px; }
  .timer-hero { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .topbar-inner, .app-header { align-items: stretch; }
  .nav-links { justify-content: flex-start; }
  .header-actions { width: 100%; }
  .juan-panel { flex: 1 1 auto; min-width: 0; }
  .settings-btn { width: 68px; }
  .tank-stage { min-height: 520px; }
  .fish-view { width: 240px; height: 180px; transform: translate(-50%, -36%); left: 54%; top: 48%; }
  .filter-machine { right: 12px; top: auto; bottom: 98px; transform: scale(.78); transform-origin: bottom right; }
  .filter-stream { right: 78px; top: auto; bottom: 150px; transform: scale(.75) rotate(-8deg); transform-origin: right center; }
  .tank-bottom { flex-direction: column; align-items: flex-start; }
  .attitude-block { flex-direction: column; gap: 6px; }
  .fish-note { right: 14px; bottom: 18px; max-width: 180px; font-size: .95rem; }
  .action-title { font-size: 1.55rem; }
  .app-footer { gap: 6px; padding: 10px; }
  .nav-label { font-size: .95rem; }
}

/* Fish positioning lab */
.designer-card { padding: 20px; }
.designer-layout { display:grid; grid-template-columns: minmax(320px, .9fr) 1.1fr; gap:16px; margin-top:16px; }
.designer-stage { position:relative; min-height:420px; border-radius:26px; overflow:hidden; border:1px solid rgba(89,212,226,.16); background:radial-gradient(circle at 50% 35%, rgba(44,122,151,.28), transparent 35%),linear-gradient(180deg,rgba(8,35,48,.96),rgba(3,17,25,.99)); }
.designer-stage::after { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:20px 20px; }
.designer-stage #designerPreview { position:absolute; inset:0; }
.designer-crosshair { position:absolute; z-index:12; width:20px; height:20px; border:1px solid #ffc85b; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.designer-crosshair::before,.designer-crosshair::after { content:''; position:absolute; background:#ffc85b; }
.designer-crosshair::before { width:30px; height:1px; left:-5px; top:9px; }
.designer-crosshair::after { height:30px; width:1px; top:-5px; left:9px; }
.designer-controls { display:grid; gap:14px; }
.designer-row { display:grid; grid-template-columns:120px 1fr 74px; gap:10px; align-items:center; }
.designer-row label { font-weight:900; color:#dce8ed; }
.designer-row input[type="range"] { width:100%; accent-color:#f7aa2d; }
.designer-row input[type="number"] { width:100%; border-radius:12px; border:1px solid rgba(89,212,226,.16); background:rgba(5,20,29,.88); color:white; padding:9px 8px; }
.designer-selects { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.designer-selects label { display:grid; gap:6px; font-weight:900; }
.designer-selects select { width:100%; padding:11px 12px; border-radius:14px; border:1px solid rgba(89,212,226,.16); background:rgba(5,20,29,.92); color:#fff; }
.designer-json { width:100%; min-height:180px; padding:12px 14px; border-radius:16px; border:1px solid rgba(89,212,226,.16); background:rgba(5,20,29,.9); color:#dff8ff; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; }
@media (max-width:900px){ .designer-layout{grid-template-columns:1fr;} .designer-stage{min-height:360px;} }
@media (max-width:560px){ .designer-selects{grid-template-columns:1fr;} .designer-row{grid-template-columns:90px 1fr 64px;} }