* { box-sizing: border-box; }

/* Must come before the layout rules below so a hidden flex or grid section
   cannot keep occupying space. */
[hidden] { display: none !important; }

html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow: visible;
  overscroll-behavior-y: auto;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; line-height: 1.15; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--deep);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════ shell ══════════════════════════════════ */

.app {
  min-height: 100dvh; height: auto; overflow: visible;
  display: flex; flex-direction: column;
}

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}

.brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 19px; color: var(--deep);
  white-space: nowrap;
}
.brand svg { flex: none; }

.topbar-spacer { flex: 1; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 15px;
  border-radius: var(--r-pill);
  background: var(--mint); color: var(--deep);
  font-weight: 700; font-size: 14px;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.chip:hover { background: color-mix(in srgb, var(--mint) 78%, var(--lagoon)); }
.chip:active { transform: scale(.96); }
.chip[disabled] { opacity: .35; cursor: default; }
.chip.ghost { background: transparent; border: 2px solid var(--line); }
.unit-icon {
  min-width: 24px; height: 24px; padding: 0 5px;
  display: inline-grid; place-items: center;
  border-radius: 8px; background: var(--mint); color: var(--deep);
  font-size: 10px; font-weight: 800; line-height: 1;
}

/* ═══════════════════════ category tiles (fish/plants/decor) ════════════════ */

.cats { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cat {
  min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--canvas); border: 2px solid var(--line);
  font-size: 12px; font-weight: 800; color: var(--muted);
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.cat .cemoji { font-size: 18px; line-height: 1; }
.cat:hover { border-color: var(--lagoon); }
.cat[aria-selected="true"] {
  background: var(--deep); border-color: var(--deep); color: var(--on-accent);
}
.cat .ccount { font-size: 10px; font-weight: 700; opacity: .72; }

.category-empty {
  grid-column: 1 / -1; min-height: 170px; padding: 24px 14px;
  display: grid; place-content: center; gap: 5px; text-align: center;
  background: var(--canvas); border: 1.5px dashed var(--line); border-radius: var(--r-md);
}
.category-empty strong { color: var(--deep); font-family: var(--font-display); font-size: 17px; }
.category-empty span { color: var(--muted); font-size: 12.5px; }

/* ─── the quiz entry point ─── */
.quiz-open {
  min-height: 44px; display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 5px 11px; border-radius: var(--r-md);
  background: linear-gradient(120deg, var(--warm-panel), var(--warm-panel-end));
  border: 2px solid var(--warm-line); color: var(--ink); font-size: 12px; line-height: 1.15;
}
.quiz-open:hover { border-color: var(--sun); }
.quiz-open .qi { font-size: 19px; flex: none; }
.quiz-open span:last-child { display: flex; flex-direction: column; }
.quiz-open small { color: var(--muted); font-size: 10px; }

.beginner-help-list { display: grid; gap: 8px; }
.beginner-help-list button {
  min-height: 66px; padding: 9px 11px; display: flex; align-items: center; gap: 11px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas);
  transition: border-color .15s var(--ease), transform .15s var(--ease), background .15s var(--ease);
}
.beginner-help-list button:hover { border-color: var(--lagoon); background: var(--hover-card); transform: translateY(-1px); }
.beginner-help-list button > span {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--deep); color: var(--on-accent); font-weight: 900;
}
.beginner-help-list button div { display: flex; flex-direction: column; line-height: 1.25; }
.beginner-help-list button strong { color: var(--deep); font-size: 13px; }
.beginner-help-list button small { color: var(--muted); font-size: 11px; }

/* ═══════════════════════ tank size slider (always on) ══════════════════════ */

.tank-sizer {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
}

.scale-ruler {
  position: relative; flex: none; height: 34px; margin-top: 7px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 9px; opacity: .78; pointer-events: none;
  transition: width .35s var(--ease);
}
.ruler-mark {
  position: absolute; top: -1px; width: 1px; height: 7px;
  background: currentColor;
}
.ruler-mark span {
  position: absolute; top: 7px; left: 0; transform: translateX(-50%);
  white-space: nowrap;
}
.ruler-mark.at-end span { transform: translateX(-100%); }
.ruler-length { position: absolute; right: 0; bottom: 0; white-space: nowrap; font-weight: 700; }

.sizer-bar {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 11px 14px 8px;
}
.sizer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
              margin-bottom: 4px; flex-wrap: wrap; }
.sizer-name { font-family: var(--font-display); font-size: 19px; color: var(--deep); font-weight: 700; }
.sizer-dims { font-size: 12.5px; color: var(--muted); margin-left: 8px; }
.sizer-note { font-size: 12px; color: var(--muted); text-align: right; flex: 1; min-width: 140px; }
.composition-toggle {
  min-height: 36px; padding: 0 11px; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--canvas); color: var(--deep); font-size: 11.5px; font-weight: 800;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.composition-toggle:hover { border-color: var(--lagoon); }
.composition-toggle:active { transform: scale(.96); }
.composition-toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--sun) 72%, var(--deep));
  background: color-mix(in srgb, var(--warm-panel) 80%, var(--sun));
}

.placement-bar {
  min-height: 50px; padding: 6px 8px 6px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
}
.placement-copy { min-width: 0; display: grid; gap: 1px; }
.placement-copy strong { color: var(--deep); font-size: 12px; }
.placement-copy span { color: var(--muted); font-size: 10.5px; line-height: 1.25; }
.view-switcher {
  flex: none; display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: 5px;
  padding: 3px; border-radius: var(--r-md); background: var(--canvas);
}
.view-switcher button {
  min-height: 38px; padding: 4px 10px; display: grid;
  grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 5px;
  align-items: center; justify-content: center; border: 1px solid transparent;
  border-radius: var(--r-sm); color: var(--muted); font-size: 11.5px; font-weight: 800;
}
.view-switcher button span:first-child { grid-row: 1 / 3; font-size: 16px; }
.view-switcher button small { grid-column: 2; font-size: 8.5px; font-weight: 700; }
.view-switcher button[aria-pressed="true"] {
  border-color: var(--line); background: var(--card); color: var(--deep); box-shadow: var(--shadow-sm);
}

.sizer-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 34px;
  background: transparent; cursor: pointer; margin: 0;
}
.sizer-range::-webkit-slider-runnable-track {
  height: 10px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--mint), var(--lagoon));
}
.sizer-range::-moz-range-track {
  height: 10px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--mint), var(--lagoon));
}
.sizer-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -10px; border-radius: 50%;
  background: var(--card); border: 4px solid var(--deep);
  box-shadow: var(--shadow-sm); transition: transform .12s var(--ease);
}
.sizer-range::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--card); border: 4px solid var(--deep); box-shadow: var(--shadow-sm);
}
.sizer-range:active::-webkit-slider-thumb { transform: scale(1.14); }
.sizer-range:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; }

.sizer-ticks {
  position: relative; height: 18px; margin: 0 15px;
  font-size: 10px; color: var(--muted); font-weight: 700;
}
.sizer-ticks span {
  position: absolute; top: 0; transform: translateX(-50%);
  min-width: 0; text-align: center; white-space: nowrap;
}
.sizer-ticks .on { color: var(--deep); }

/* ═══════════════════════════════ builder ═══════════════════════════════════ */

/* Stage + helper above, full-width visual gallery below. */
.builder {
  flex: none; min-height: calc(100dvh - 61px); height: auto;
  overflow: visible;
  display: grid; gap: 14px; padding: 14px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: clamp(430px, 70dvh, 620px) auto;
  grid-template-areas: "stage rail" "shelf shelf";
  max-width: 1600px; width: 100%; margin: 0 auto;
}

/* ---- shelf ---- */
.shelf {
  grid-area: shelf; min-width: 0; min-height: 430px; overflow: visible;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 12px; display: flex; flex-direction: column;
}
.shelf h2 { font-size: 16px; color: var(--deep); margin-bottom: 2px; }
.shelf .hint { flex: none; font-size: 12px; color: var(--muted); margin: 5px 2px 7px; }

.beginner-path {
  flex: none; display: flex; align-items: center; gap: 14px; min-width: 0;
  margin-bottom: 10px; padding: 10px 12px;
  border: 1px solid var(--warm-line); border-radius: var(--r-md);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--sun) 22%, transparent), transparent 34%),
    linear-gradient(120deg, var(--warm-panel), color-mix(in srgb, var(--card) 82%, var(--mint)));
}
.beginner-path-copy { flex: 0 0 190px; display: flex; flex-direction: column; line-height: 1.15; }
.beginner-path-copy span {
  color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .09em;
}
.beginner-path-copy strong {
  color: var(--deep); font-family: var(--font-display); font-size: 16px; font-weight: 700;
}
.beginner-steps { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.beginner-steps button {
  min-width: 0; min-height: 52px; padding: 6px 9px;
  display: flex; align-items: center; gap: 8px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--warm-line) 78%, var(--line));
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--card) 84%, transparent);
  transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.beginner-steps button:hover { transform: translateY(-1px); border-color: var(--sun); background: var(--card); }
.beginner-steps button > span:last-child { min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.beginner-steps button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.beginner-steps button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9.5px; }
.step-number {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--deep); color: var(--on-accent); font-size: 11px; font-weight: 900;
}
.beginner-steps button.is-complete { border-color: var(--good-border); background: var(--good-surface); }
.beginner-steps button.is-complete .step-number { background: var(--ok); color: #fff; }

.gallery-toolbar {
  flex: none; min-width: 0; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.gallery-toolbar .cats { flex: none; }
.gallery-toolbar .filters {
  flex: 1 0 100%; order: 3; margin-left: 0;
}
.gallery-toolbar .catalog-search { flex: 1 1 240px; }
.catalog-filter-open {
  position: relative; min-height: 44px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--card); color: var(--deep); font-size: 11.5px; font-weight: 800;
}
.catalog-filter-open:hover { border-color: var(--lagoon); }
.catalog-filter-open.has-active-filters { border-color: var(--lagoon); background: var(--mint); }
.catalog-filter-open strong {
  min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--deep); color: var(--on-accent); font-size: 10px;
}
.catalog-filter-open strong[hidden] { display: none; }
.gallery-toolbar .quiz-open { flex: none; }

.catalog-search {
  min-width: 180px; max-width: 390px; min-height: 44px;
  display: flex; align-items: center; gap: 7px; padding: 0 8px 0 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--canvas); color: var(--muted);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.catalog-search:focus-within {
  border-color: var(--lagoon);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lagoon) 18%, transparent);
}
.search-icon { flex: none; font-size: 15px; line-height: 1; }
.catalog-search input {
  flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; padding: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 13px;
}
.catalog-search input::placeholder { color: var(--muted); opacity: .9; }
.catalog-search input::-webkit-search-cancel-button { display: none; }
.search-clear {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--mint); color: var(--deep);
  font-size: 20px; line-height: 1;
}
.search-clear[hidden] { display: none; }

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter {
  min-height: 42px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--canvas); border: 1.5px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--muted);
  display: inline-flex; align-items: center; gap: 5px;
}
.filter[aria-pressed="true"] {
  background: var(--deep); border-color: var(--deep); color: var(--on-accent);
}
.filter-count {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: inline-grid; place-items: center;
  background: rgba(18, 111, 120, .09); color: currentColor; font-size: 10px;
}
.filter[aria-pressed="true"] .filter-count { background: rgba(255, 255, 255, .18); }

.fish-list {
  flex: none; min-height: 0; overflow-y: visible;
  display: grid; align-content: start; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  grid-auto-rows: 108px; padding: 2px 4px 2px 2px;
}

.fish-tile {
  width: 100%; height: 108px; overflow: hidden;
  position: relative; background: var(--canvas); border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: 5px 5px 7px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: 44px;
  /* Let the shelf scroll normally; the hold-to-drag timer takes over from there. */
  touch-action: pan-y;
  transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.fish-tile:hover {
  border-color: var(--lagoon); background: var(--hover-card); transform: translateY(-2px);
}
.fish-tile.is-top-pick {
  border-color: #d6aa2d;
  background: color-mix(in srgb, var(--canvas) 88%, #f8d66d 12%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d6aa2d 22%, transparent);
}
.tile-top-pick {
  position: absolute; z-index: 3; top: 5px; left: 5px;
  display: inline-flex; align-items: center; gap: 3px;
  max-width: calc(100% - 42px); padding: 3px 7px;
  border-radius: var(--r-pill); background: #f8d66d; color: #463700;
  box-shadow: var(--shadow-sm); font-size: 8.5px; font-weight: 900;
  letter-spacing: .02em; line-height: 1; white-space: nowrap;
}
.fish-tile:active { transform: scale(.95); }
.tile-art {
  flex: 1; min-height: 0; width: 100%; display: grid; place-items: center;
}
.tile-art .fish-svg,
.tile-art .item-img {
  display: block; width: auto; height: auto; max-width: 76px; max-height: 52px;
  margin: 0 auto; object-fit: contain;
}
.fish-tile .tile-name {
  display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; font-weight: 800; line-height: 1.2;
}
.fish-tile .tile-sub { font-size: 10px; color: var(--muted); line-height: 1.2; }
.tile-add {
  position: absolute; top: 5px; right: 5px; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--deep); color: var(--on-accent);
  font-size: 20px; font-weight: 800; line-height: 1;
  box-shadow: var(--shadow-sm);
}

.fish-tile.is-blocked { opacity: .42; }
.fish-tile.is-blocked::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-md);
  background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(224,80,63,.16) 6px 12px);
  pointer-events: none;
}
.fish-tile.is-trap { border-color: #f3c4bd; }
.tile-flag {
  position: absolute; top: 4px; left: 5px;
  background: var(--coral); color: var(--on-coral);
  font-size: 8.5px; font-weight: 800; padding: 2px 6px; border-radius: var(--r-pill);
  letter-spacing: .03em;
}
.tile-count {
  position: absolute; top: 4px; left: 5px; min-width: 24px; height: 24px;
  background: var(--deep); color: var(--on-accent); border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 800; display: grid; place-items: center; padding: 0 5px;
  z-index: 2;
}
.tile-with-info {
  position: relative; min-width: 0; width: 100%; height: 108px;
}
.tile-with-info > .fish-tile { height: 100%; }
.info-dot {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  border: 1.5px solid var(--lagoon); background: var(--card); color: var(--deep);
  font-size: 14px; font-weight: 900; font-family: Georgia, serif; font-style: italic;
  line-height: 1; box-shadow: var(--shadow-sm);
}
.info-dot:hover,
.info-dot:focus-visible { background: var(--mint); border-color: var(--deep); }
.tile-info {
  position: absolute; z-index: 4; top: 7px; left: 7px;
  touch-action: manipulation;
}
.tile-info.beside-count { left: 36px; }
.tile-with-info .tile-top-pick { left: 36px; }

/* ---- stage ---- */
.stage {
  grid-area: stage; height: 100%; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}

.tank-wrap {
  position: relative; flex: 1; min-width: 0; min-height: 0;
  display: flex; justify-content: center; gap: 10px; align-items: stretch;
}

.tank-canvas {
  position: relative; flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; min-height: 0;
}
.tank-guide {
  position: absolute; z-index: 0; left: 50%; bottom: 41px; transform: translateX(-50%);
  border: 2px dashed var(--guide-line); border-radius: 16px; background: var(--guide-fill);
  pointer-events: none;
}
.tank-guide span {
  position: absolute; top: 7px; right: 10px; padding: 2px 7px;
  border-radius: var(--r-pill); background: var(--guide-label);
  color: var(--muted); font-size: 10px; font-weight: 800;
}
.tank-column {
  position: relative; z-index: 1; width: 100%; height: 100%; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}

/* ─────────────────────────── the live rail ─────────────────────────── */

.rail {
  grid-area: rail; min-width: 0; align-self: start; max-height: 430px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 13px;
}
.status-strip { display: none; }
.rail-body { display: flex; flex-direction: column; gap: 10px; }
.rail-heading {
  color: var(--deep); font-family: var(--font-display); font-size: 21px; line-height: 1.15;
}

.rail-empty {
  padding: 2px 0 5px; color: var(--muted); font-size: 13px; line-height: 1.4;
}

.rail-card {
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px;
}
.rail-card h3 { font-size: 12px; color: var(--muted); text-transform: uppercase;
                letter-spacing: .06em; font-family: var(--font-ui); font-weight: 800; margin-bottom: 9px; }

.food-plan { display: grid; gap: 7px; }
.food-plan[hidden] { display: none; }
.food-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.food-plan-head h3 { margin: 0; }
.tank-tips { display: grid; gap: 8px; }
.tank-tips[hidden] { display: none; }
.tank-tips-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tank-tips-head h3 { margin: 0; }
.food-plan-head button,
.tank-tips-head button {
  color: var(--deep); font-size: 10px; font-weight: 800; text-decoration: underline;
  text-underline-offset: 2px;
}
.food-plan-head button { min-height: 32px; padding: 0 4px; }
.tank-tips-head button[hidden] { display: none; }
.food-plan-summary { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.food-plan-list, .food-plan-sheet { display: grid; gap: 8px; }
.food-plan-item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 7px; align-items: start;
  padding-top: 8px; border-top: 1px solid var(--line);
}
.food-plan-item:first-child { padding-top: 0; border-top: 0; }
.food-plan-icon {
  width: 28px; height: 28px; display: grid; place-items: center; flex: none;
  border-radius: 50%; background: var(--warm-panel); color: var(--deep); font-size: 14px;
}
.food-plan-item strong { display: block; color: var(--deep); font-size: 11.5px; line-height: 1.25; }
.food-plan-item small { display: block; margin-top: 1px; color: var(--muted); font-size: 9.5px; line-height: 1.3; }
.food-plan-item p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.food-plan-item p b { color: var(--ink); }
.food-plan-item a,
.feeding-routine a { display: inline-block; margin-top: 7px; color: var(--deep); font-size: 11px; font-weight: 800; }
.food-plan-sheet { margin-top: 14px; }
.food-plan-sheet .food-plan-item {
  grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas);
}
.food-plan-sheet .food-plan-icon { width: 38px; height: 38px; font-size: 18px; }
.food-plan-sheet .food-plan-item strong { font-size: 15px; }
.food-plan-sheet .food-plan-item small { font-size: 11px; }
.feeding-routine {
  margin-top: 12px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--mint);
}
.feeding-routine strong { color: var(--deep); font-family: var(--font-display); font-size: 16px; }
.feeding-routine p { margin: 4px 0 0; color: var(--ink); font-size: 12px; line-height: 1.45; }
.species-food {
  margin: 0 0 12px; padding: 11px; display: grid;
  grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: start;
  border: 1px solid var(--warm-line); border-radius: 12px; background: var(--warm-panel);
}
.species-food .food-plan-icon { width: 34px; height: 34px; background: var(--card); }
.species-food strong { display: block; color: var(--deep); font-size: 13px; }
.species-food p { margin: 2px 0 3px; color: var(--ink); font-size: 12px; line-height: 1.35; }
.species-food small { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.species-space {
  margin: 0 0 12px; padding: 11px; display: grid;
  grid-template-columns: 34px minmax(0, 1fr); gap: 9px; align-items: start;
  border: 1px solid var(--line); border-radius: 12px; background: var(--mint);
}
.swimming-space-icon {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--card); color: var(--deep); font-size: 19px; font-weight: 800;
}
.species-space strong { display: block; color: var(--deep); font-size: 13px; }
.species-space p { margin: 2px 0 3px; color: var(--ink); font-size: 12px; line-height: 1.35; font-weight: 800; }
.species-space small { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.species-space a { display: inline-block; margin-top: 5px; color: var(--deep); font-size: 10.5px; font-weight: 800; }

.tank-tip-list, .tank-tip-sheet { display: grid; gap: 8px; }
.tank-tip {
  display: grid; grid-template-columns: 28px 1fr; gap: 7px; align-items: start;
  padding-top: 8px; border-top: 1px solid var(--line);
}
.tank-tip:first-child { padding-top: 0; border-top: 0; }
.tank-tip-icon {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--mint); color: var(--deep); font-size: 14px;
}
.tank-tip strong { display: block; color: var(--deep); font-size: 11.5px; line-height: 1.25; }
.tank-tip p { margin: 2px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.tank-tip a { display: inline-block; margin-top: 4px; color: var(--deep); font-size: 11px; font-weight: 800; }
.tank-tip-sheet { margin-top: 14px; }
.tank-tip-sheet .tank-tip {
  grid-template-columns: 36px 1fr; gap: 10px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--canvas);
}
.tank-tip-sheet .tank-tip-icon { width: 36px; height: 36px; }
.tank-tip-sheet .tank-tip strong { font-size: 14px; }
.tank-tip-sheet .tank-tip p { font-size: 12px; }
.tip-limit {
  margin-top: 14px; padding: 10px; border-radius: var(--r-sm);
  background: var(--mint); color: var(--ink); font-size: 11.5px; line-height: 1.45;
}

.rail .residents { flex-direction: column; gap: 7px; }
.rail .res { flex-direction: column; align-items: stretch; gap: 6px;
             border-radius: var(--r-md); padding: 7px; background: var(--card); }
.res-main { display: flex; align-items: center; gap: 7px; min-width: 0; }
.res-main .item-img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.res-main .rname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-main .rcount { font-weight: 800; font-size: 13px; color: var(--deep); }
.resident-info { width: 26px; height: 26px; }
.item-size-control,
.item-depth-control {
  display: grid; gap: 2px; padding: 5px 7px 3px;
  border-radius: var(--r-sm); background: var(--canvas);
}
.item-size-control > span,
.item-depth-control > span:not(.depth-ends) {
  display: flex; align-items: baseline; justify-content: space-between;
  color: var(--muted); font-size: 11px;
}
.item-size-control strong,
.item-depth-control strong { color: var(--deep); font-size: 11px; }
.item-size-control output,
.item-depth-control output { color: var(--deep); font-weight: 800; font-size: 13px; }
.item-size-control input[type="range"],
.item-depth-control input[type="range"] {
  width: 100%; height: 26px; margin: 0; accent-color: var(--lagoon); cursor: ew-resize;
}
.depth-ends {
  display: flex; justify-content: space-between; margin-top: -5px;
  color: var(--muted); font-size: 9px; line-height: 1;
}
.res-actions { display: flex; gap: 6px; }
.res-actions .step, .res-actions .rkill { flex: 1; min-width: 44px; height: 44px; border-radius: var(--r-sm); }
.res-actions .rkill { background: var(--remove-surface); }

.status-fish {
  width: 100%; min-height: 190px; padding: 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(170deg, var(--status-fish-top), var(--status-fish-bottom));
  text-align: center;
}
.status-fish:hover { border-color: var(--lagoon); }
.status-fish-art {
  width: 100%; min-height: 92px; display: grid; place-items: center; margin-bottom: 3px;
}
.status-fish-art .fish-svg {
  display: block; max-width: 170px; max-height: 102px; width: auto; height: auto; object-fit: contain;
}
.status-fish strong { color: var(--deep); font-family: var(--font-display); font-size: 18px; }
.status-fish > span:not(.status-fish-art) { font-size: 13px; font-weight: 700; }
.status-fish small { color: var(--muted); font-size: 10.5px; margin-top: 3px; }

.fullness-summary {
  border-top: 1px solid var(--line); padding: 8px 2px 0;
  display: flex; align-items: baseline; gap: 9px;
}
.fullness-summary .meter-pct { font-size: 20px; font-family: var(--font-display); }
.fullness-summary .meter-word { font-size: 13px; text-align: left; }

.tank {
  position: relative; flex: none; min-width: 0; max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(178deg, var(--water-top) 0%, var(--water-mid) 46%, var(--water-deep) 100%);
  box-shadow: inset 0 0 60px rgba(6, 60, 70, .22), var(--shadow-md);
  border: 5px solid var(--glass-frame);
  outline: 1px solid var(--line);
  touch-action: none;
  /* Deliberately NOT transitioning width/height.
     The tank's width is a percentage that JS recomputes as the slider moves.
     Transitioning it meant the layout never settled on the target: every tank
     size rendered at an identical 476x191 regardless of the inline style, so a
     5 gallon looked the same as a 125. Showing the true size honestly matters
     far more than a smooth tween. Border colour still animates. */
  transition: border-color .15s var(--ease);
}
.tank.is-target { border-color: var(--lagoon); }
.tank.is-refuse { border-color: var(--coral); }
.tank.view-perspective {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.22), transparent 48%),
    linear-gradient(178deg, var(--water-top), var(--water-mid) 52%, var(--water-deep));
  box-shadow: inset 0 0 72px rgba(6, 60, 70, .24), var(--shadow-md);
}
.tank.view-perspective::before {
  background:
    linear-gradient(103deg, transparent 13%, var(--shine) 17%, transparent 25%),
    linear-gradient(96deg, transparent 58%, var(--shine) 63%, transparent 71%);
}
.tank.view-perspective::after {
  height: 9%;
  background: linear-gradient(rgba(255,255,255,.42), transparent);
}
.tank.view-perspective .composition-guide { display: none; }

.perspective-guide {
  position: absolute; z-index: 1; inset: 0; display: none;
  pointer-events: none; color: color-mix(in srgb, var(--deep) 54%, transparent);
}
.tank.view-perspective .perspective-guide { display: block; }
.perspective-guide svg { width: 100%; height: 100%; display: block; overflow: visible; }
.perspective-back-wall {
  fill: color-mix(in srgb, var(--water-top) 22%, transparent);
  stroke: color-mix(in srgb, white 42%, transparent); stroke-width: .45;
}
.perspective-top-pane {
  fill: color-mix(in srgb, white 13%, transparent);
  stroke: color-mix(in srgb, white 44%, transparent); stroke-width: .5;
}
.perspective-side-pane {
  fill: color-mix(in srgb, white 8%, transparent);
  stroke: color-mix(in srgb, white 36%, transparent); stroke-width: .45;
}
.perspective-floor-plane {
  fill: color-mix(in srgb, var(--water-deep) 16%, transparent);
  stroke: color-mix(in srgb, white 42%, transparent); stroke-width: .55;
}
.perspective-grid {
  fill: none; stroke: currentColor; stroke-width: .32; stroke-dasharray: 1.3 1.4;
  vector-effect: non-scaling-stroke; opacity: .52;
}
.perspective-label {
  position: absolute; z-index: 2; padding: 2px 6px;
  border-radius: var(--r-pill); background: rgba(9, 45, 52, .66); color: #fff;
  font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.perspective-label-back { left: 9%; top: 55%; }
.perspective-label-front { right: 2%; bottom: 2%; }

.composition-guide {
  position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0;
  background:
    linear-gradient(to right,
      transparent 33.05%, rgba(255,255,255,.6) 33.05% 33.38%,
      transparent 33.38% 66.62%, rgba(255,255,255,.6) 66.62% 66.95%, transparent 66.95%),
    linear-gradient(to bottom,
      transparent 33.05%, rgba(255,255,255,.6) 33.05% 33.38%,
      transparent 33.38% 66.62%, rgba(255,255,255,.6) 66.62% 66.95%, transparent 66.95%);
  filter: drop-shadow(0 1px 1px rgba(14, 70, 72, .24));
  transition: opacity .18s var(--ease);
}
.tank.show-composition-guide .composition-guide { opacity: 1; }
.composition-focus {
  position: absolute; width: 12px; height: 12px; transform: translate(-50%, -50%);
  border: 3px solid #fff; border-radius: 50%; background: var(--sun);
  box-shadow: 0 2px 8px rgba(14, 70, 72, .34);
}
.composition-focus.focus-left { left: 33.22%; top: 66.78%; }
.composition-focus.focus-right { left: 66.78%; top: 33.22%; }
.composition-caption {
  position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  max-width: calc(100% - 24px); padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(9, 45, 52, .72); color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 1.2; text-align: center; white-space: nowrap;
}

/* sunlight shafts */
.tank::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(102deg, transparent 12%, var(--shine) 15%, transparent 21%),
    linear-gradient(97deg, transparent 40%, var(--shine) 44%, transparent 50%),
    linear-gradient(107deg, transparent 66%, var(--shine) 70%, transparent 76%);
  mix-blend-mode: soft-light;
}
/* surface shimmer */
.tank::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12%;
  background: linear-gradient(rgba(255,255,255,.5), transparent);
  pointer-events: none;
}

.gravel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3%;
  pointer-events: none;
  background: linear-gradient(rgba(214, 230, 225, .55), rgba(168, 199, 192, .72));
  border-radius: 0 0 9px 9px;
  z-index: 3;
  transition: height .2s var(--ease), background .2s var(--ease);
}
.gravel.has-substrate {
  height: 13%;
  background:
    radial-gradient(circle at 9% 34%, var(--substrate-highlight) 0 2px, transparent 2.5px),
    radial-gradient(circle at 27% 68%, var(--substrate-accent) 0 3px, transparent 3.5px),
    radial-gradient(circle at 48% 28%, var(--substrate-highlight) 0 2.5px, transparent 3px),
    radial-gradient(circle at 71% 62%, var(--substrate-accent) 0 3px, transparent 3.5px),
    radial-gradient(circle at 91% 40%, var(--substrate-highlight) 0 2px, transparent 2.5px),
    linear-gradient(var(--substrate-body), color-mix(in srgb, var(--substrate-body) 72%, #574838));
  background-size: 120px 38px, 150px 42px, 170px 46px, 135px 44px, 155px 40px, auto;
}
.gravel.substrate-sand {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--substrate-highlight) 82%, transparent) 0 1px, transparent 1.4px),
    radial-gradient(circle, color-mix(in srgb, var(--substrate-accent) 72%, transparent) 0 1.2px, transparent 1.7px),
    linear-gradient(var(--substrate-body), var(--substrate-accent));
  background-size: 11px 9px, 17px 13px, auto;
}
.gravel.substrate-gravel {
  background:
    radial-gradient(ellipse at 30% 55%, var(--substrate-highlight) 0 3px, transparent 3.6px),
    radial-gradient(ellipse at 70% 42%, var(--substrate-accent) 0 4px, transparent 4.6px),
    radial-gradient(ellipse at 48% 82%, var(--substrate-body) 0 3.5px, transparent 4px),
    linear-gradient(color-mix(in srgb, var(--substrate-body) 84%, white), var(--substrate-body));
  background-size: 24px 17px, 29px 21px, 21px 16px, auto;
}
.gravel.substrate-soil {
  background:
    radial-gradient(circle, var(--substrate-highlight) 0 2.5px, transparent 3px),
    radial-gradient(circle, var(--substrate-accent) 0 3.5px, transparent 4px),
    linear-gradient(var(--substrate-body), color-mix(in srgb, var(--substrate-body) 74%, black));
  background-size: 17px 14px, 23px 19px, auto;
}
.tank.view-perspective .gravel {
  z-index: 0; top: 58%; bottom: 4%; height: auto !important;
  border-radius: 0; clip-path: polygon(8% 0, 92% 0, 99% 100%, 1% 100%);
  opacity: .9;
}
.tank.view-perspective .gravel.is-bare {
  background: linear-gradient(rgba(205, 230, 225, .08), rgba(166, 205, 199, .22));
}
.plants,
.decorations { position: absolute; inset: 0; pointer-events: none; }
.decorations,
.plants { z-index: auto; }
.scape-sprite {
  position: absolute; display: block; object-fit: contain; user-select: none;
  pointer-events: auto; cursor: grab; touch-action: none;
  filter: drop-shadow(0 3px 3px rgba(14, 70, 72, .14));
  transition: opacity .15s var(--ease), filter .15s var(--ease);
}
.scape-sprite:hover { filter: drop-shadow(0 5px 5px rgba(14, 70, 72, .24)); }
.scape-sprite:focus-visible {
  outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 8px;
}
.scape-sprite.is-moving {
  cursor: grabbing; animation-play-state: paused; z-index: 7 !important; opacity: 1 !important;
  filter: drop-shadow(0 9px 8px rgba(14, 70, 72, .32));
}
.plant-sprite {
  transform-origin: 50% 100%;
  animation: plant-sway 4.8s ease-in-out infinite;
  animation-delay: var(--scape-delay, 0s);
}
.plant-floating {
  transform-origin: 50% 20%;
  animation-name: floater-drift;
}
.scape-perspective-item {
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(6, 43, 48, .24));
}
.tank.view-perspective .plant-sprite { animation-duration: 6.2s; }
.tank.view-perspective .swimmer {
  z-index: 9; opacity: .3; filter: saturate(.76);
}
.tank.view-perspective .swimmer .lane,
.tank.view-perspective .swimmer .bob { animation-play-state: paused; }
@keyframes plant-sway {
  0%, 100% { transform: rotate(-1.7deg) skewX(-.6deg); }
  50% { transform: rotate(1.7deg) skewX(.6deg); }
}
@keyframes floater-drift {
  0%, 100% { transform: translateX(-2px) rotate(-1deg); }
  50% { transform: translateX(3px) rotate(1deg); }
}

.tank-empty {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 6px;
  text-align: center; color: var(--deep); pointer-events: none; padding: 20px; z-index: 5;
}
.tank-empty .big { font-family: var(--font-display); font-size: clamp(20px, 3vw, 30px); }
.tank-empty .small { font-size: 13.5px; opacity: .8; }
.tank-empty .arrow { animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%,100% { transform: translateX(0); opacity:.5 } 50% { transform: translateX(-9px); opacity:1 } }

/* ---- swimming fish ---- */
.swimmer { position: absolute; z-index: 4; will-change: transform; pointer-events: auto; cursor: pointer; }
.swimmer .fish-svg { display: block; }
.swimmer .bob { animation: bob var(--bob, 4s) ease-in-out infinite; }
.swimmer .lane { animation: swim var(--dur, 18s) linear infinite; animation-delay: var(--delay, 0s); }

/* Painted-motion pilot: the original art is masked into a body, tail, and fin.
   Small angles keep the gouache edges joined instead of making a rubber fish. */
.fish-motion-rig { overflow: visible; }
.fish-motion-whole,
.fish-motion-part {
  transform-box: view-box;
  will-change: transform;
}
.fish-motion-whole {
  transform-origin: 50% 52%;
  animation: fish-breathe var(--body-speed, 4.4s) ease-in-out infinite;
}
.fish-motion-part {
  animation-delay: var(--part-delay, 0s);
}
.fish-motion-tail {
  animation: tail-wag var(--part-speed, .85s) ease-in-out infinite;
  animation-delay: var(--part-delay, 0s);
}
.fish-motion-fin {
  animation: fin-flutter var(--part-speed, 1.5s) ease-in-out infinite;
  animation-delay: var(--part-delay, 0s);
}

@keyframes swim {
  0%   { transform: translateX(0) scaleX(1); }
  46%  { transform: translateX(var(--range, 200px)) scaleX(1); }
  50%  { transform: translateX(var(--range, 200px)) scaleX(-1); }
  96%  { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(var(--bob-distance, -5px)); }
}
@keyframes fish-breathe {
  0%, 100% { transform: rotate(-.35deg) scaleY(.992); }
  50% { transform: rotate(.35deg) scaleY(1.008); }
}
@keyframes tail-wag {
  0%, 100% { transform: rotate(var(--part-angle-neg, -5deg)) skewY(-1deg); }
  50% { transform: rotate(var(--part-angle, 5deg)) skewY(1deg); }
}
@keyframes fin-flutter {
  0%, 100% { transform: rotate(var(--part-angle-neg, -3deg)) scaleY(.98); }
  50% { transform: rotate(var(--part-angle, 3deg)) scaleY(1.02); }
}

.swimmer.is-flagged .bob { filter: drop-shadow(0 0 0 var(--coral)); }
.swimmer.is-flagged::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 2.5px dashed var(--coral); animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:.45; transform: scale(1); } 50% { opacity:.95; transform: scale(1.06); } }
.swimmer.is-too-large .lane,
.swimmer.is-too-large .bob { animation: none; }
.swimmer.is-too-large::after {
  content: ''; position: absolute; inset: -5px; border-radius: 10px;
  border: 3px dashed var(--coral); animation: none;
}
.swimmer.is-too-large::before {
  content: 'TOO BIG'; position: absolute; z-index: 2; top: 5px; left: 5px;
  padding: 2px 6px; border-radius: var(--r-pill);
  background: var(--coral); color: var(--on-coral); font-size: 9px; font-weight: 800;
  letter-spacing: .04em; line-height: 1.3; white-space: nowrap;
}

/* ---- fullness meter ---- */
.meter {
  width: 62px; flex: none; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 8px 7px; display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.meter-label { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--muted);
               text-transform: uppercase; }
.meter-tube {
  flex: 1; width: 26px; min-height: 120px; border-radius: var(--r-pill);
  background: linear-gradient(var(--meter-track-top), var(--meter-track-bottom));
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
}
.meter-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--fill, var(--ok)); transition: height .45s var(--ease), background .45s var(--ease);
  height: 0%;
}
.meter-fill::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.28) 7px 9px);
}
.meter-pct { font-size: 14px; font-weight: 800; color: var(--deep); }
.meter-word { font-size: 9.5px; text-align: center; color: var(--muted); line-height: 1.25; font-weight: 700; }

/* ---- residents ---- */
.residents { display: flex; gap: 8px; flex-wrap: wrap; }
.res {
  display: flex; align-items: center; gap: 6px; background: var(--card);
  border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 4px 5px 4px 8px;
}
.res.is-flagged { border-color: var(--coral); background: var(--flagged-surface); }
.res .rname { font-size: 12.5px; font-weight: 700; }
.res .step {
  min-width: 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--mint); color: var(--deep);
  font-size: 17px; font-weight: 800; display: grid; place-items: center; line-height: 1;
}
.res .step[disabled] { opacity: .3; }
.res .rcount { min-width: 22px; text-align: center; font-weight: 800; font-size: 14px; }
.res .rkill { min-width: 44px; width: 44px; height: 44px; border-radius: 50%; color: var(--coral); font-size: 15px; }

/* ---- verdict / problems ---- */
.verdict {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px;
}
.verdict.is-bad { border-color: var(--bad-border); background: var(--bad-surface); }
.verdict.is-warn { border-color: var(--warn-border); background: var(--warn-surface); }
.verdict.is-good { border-color: var(--good-border); background: var(--good-surface); }

.verdict h2 { font-size: 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }

.problem { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.problem:first-of-type { border-top: 0; }
.problem .picon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid;
                  place-items: center; font-size: 15px; }
.problem.block .picon { background: var(--problem-block-surface); }
.problem.warn .picon { background: var(--problem-warn-surface); }
.problem .ptext { font-size: 13.5px; line-height: 1.45; }
.problem .pwho { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.problem-fix {
  display: flex; flex-direction: column; gap: 2px; margin-top: 5px; padding: 10px;
  border-radius: var(--r-sm); background: var(--problem-fix-surface);
  font-size: 13px; line-height: 1.4;
}
.problem-fix strong { color: var(--deep); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

.all-good { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.all-good .tick {
  width: 30px; height: 30px; border-radius: 50%; background: var(--good-tick-surface);
                  display: grid; place-items: center; flex: none; }

/* ---- toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(120%);
  background: var(--toast-surface); color: var(--toast-ink);
  padding: 11px 18px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 700; box-shadow: var(--shadow-lg); z-index: 90;
  transition: transform .3s var(--ease); max-width: min(92vw, 460px); text-align: center;
  pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast.bad { background: var(--bad); color: var(--on-coral); }

/* ---- drag preview (deliberately not called .ghost: that's the toolbar button style) ---- */
.drag-ghost { position: fixed; z-index: 80; pointer-events: none; transform: translate(-50%, -60%) scale(1.1);
              filter: drop-shadow(0 8px 14px rgba(14,102,114,.35)); }
.drag-ghost .item-img {
  display: block; width: auto; height: auto; max-width: 90px; max-height: 90px; object-fit: contain;
}

/* ---- sheets ---- */
.sheet-bg { position: fixed; inset: 0; background: var(--overlay); z-index: 60;
            opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.sheet-bg.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 70; background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 20px;
  left: 50%; top: 50%; transform: translate(-50%,-46%) scale(.97);
  width: min(560px, 94vw); max-height: 86dvh; overflow-y: auto;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.sheet.show { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }
.sheet h2 { font-size: 21px; color: var(--deep); margin-bottom: 4px; }
.sheet .close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
                border-radius: 50%; background: var(--canvas); font-size: 18px; }

.factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 8px; margin: 14px 0; }
.fact { background: var(--canvas); border-radius: var(--r-md); padding: 9px 11px; }
.fact .fk { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--muted);
            text-transform: uppercase; }
.fact .fv { font-size: 14.5px; font-weight: 700; }

.recipe-list { display: grid; gap: 10px; }
.recipe {
  display: flex; gap: 12px; align-items: center; text-align: left; width: 100%;
  background: var(--canvas); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 11px;
}
.recipe:hover { border-color: var(--lagoon); }
.recipe .rtitle { font-weight: 800; font-size: 14.5px; }
.recipe .rblurb { font-size: 12.5px; color: var(--muted); }
.recipe .rtank { font-size: 11px; font-weight: 800; color: var(--deep); background: var(--mint);
                 padding: 2px 8px; border-radius: var(--r-pill); display: inline-block; margin-top: 4px; }

.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.theme-choice {
  min-height: 104px; width: 100%; padding: 10px; position: relative;
  display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 11px;
  text-align: left; background: var(--canvas); border: 2px solid var(--line); border-radius: var(--r-md);
}

.preset-section-head { margin: 14px 0 8px; }
.preset-section-head div { display: grid; gap: 1px; }
.preset-section-head strong { color: var(--deep); font-size: 13px; }
.preset-section-head span { color: var(--muted); font-size: 10.5px; }
.preset-stock-head { padding-top: 10px; border-top: 1px solid var(--line); }
.style-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.style-preset {
  min-width: 0; padding: 10px; display: grid; gap: 8px; text-align: left;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--canvas);
}
.style-preset:hover { border-color: var(--lagoon); transform: translateY(-1px); }
.style-preset-art {
  height: 62px; padding: 5px; overflow: hidden; display: flex; align-items: end; justify-content: center;
  border-radius: var(--r-sm); background: linear-gradient(175deg, var(--water-top), var(--water-mid));
}
.style-preset-art b { align-self: start; margin-right: auto; font-size: 18px; }
.style-preset-art .item-img { width: auto; max-width: 46px; height: 46px; object-fit: contain; margin-left: -8px; }
.style-preset-copy { min-width: 0; display: grid; gap: 4px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.style-preset-copy > span:first-child { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.style-preset-copy strong { color: var(--deep); font-size: 13px; }
.style-preset-copy small { padding: 2px 6px; border-radius: var(--r-pill); background: var(--mint); color: var(--deep); font-weight: 800; }
.style-preset-copy small.difficulty-intermediate { background: color-mix(in srgb, var(--sun) 30%, var(--canvas)); }
.style-preset-copy small.difficulty-advanced { background: color-mix(in srgb, var(--coral) 22%, var(--canvas)); color: var(--bad); }
.style-preset-copy em { font-size: 9.5px; font-style: normal; }
.style-preset-signature { color: var(--lagoon); font-weight: 900; letter-spacing: .01em; }
.style-preset-reality { padding-top: 3px; border-top: 1px solid var(--line); color: var(--ink); }
.style-preset-reality b { color: var(--deep); }
.biotope-note {
  margin: 10px 0 2px; padding: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px;
  border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--mint);
}
.biotope-note > span { font-size: 20px; }
.biotope-note div { display: grid; gap: 2px; }
.biotope-note strong { color: var(--deep); font-size: 11.5px; }
.biotope-note small { color: var(--muted); font-size: 10px; line-height: 1.4; }

.filter-sheet-copy { margin: 4px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.refinement-groups { display: grid; gap: 12px; }
.refinement-group { min-width: 0; padding: 0; border: 0; }
.refinement-group legend { margin-bottom: 5px; color: var(--deep); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.refinement-options { display: flex; flex-wrap: wrap; gap: 6px; }
.refinement-options button {
  min-height: 40px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--canvas); color: var(--ink); font-size: 11.5px; font-weight: 800;
}
.refinement-options button[aria-pressed="true"] { border-color: var(--lagoon); background: var(--mint); color: var(--deep); }
.filter-sheet-actions { position: sticky; bottom: -20px; margin: 16px -20px -20px; padding: 12px 20px 18px; display: flex; justify-content: flex-end; gap: 8px; background: var(--card); border-top: 1px solid var(--line); }
.theme-choice:hover { border-color: var(--lagoon); }
.theme-choice[aria-checked="true"] {
  border-color: var(--deep); box-shadow: 0 0 0 2px color-mix(in srgb, var(--deep) 18%, transparent);
}
.theme-preview {
  width: 58px; height: 72px; padding: 7px; border-radius: 12px;
  display: flex; flex-wrap: wrap; align-content: flex-end; gap: 4px;
  background: linear-gradient(160deg, var(--preview-canvas) 0 46%, var(--preview-water) 47% 100%);
  border: 1px solid color-mix(in srgb, var(--preview-deep) 22%, transparent);
}
.theme-preview i { width: 18px; height: 18px; border-radius: 50%; background: var(--preview-deep); }
.theme-preview i:nth-child(2) { background: var(--preview-accent); }
.theme-preview i:nth-child(3) { width: 40px; border-radius: 5px; background: var(--preview-card); }
.theme-copy { min-width: 0; display: grid; gap: 3px; }
.theme-copy strong { color: var(--deep); font-size: 14px; line-height: 1.2; }
.theme-copy small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.theme-selected {
  position: absolute; top: 7px; right: 8px; width: 22px; height: 22px;
  display: none; place-items: center; border-radius: 50%;
  background: var(--deep); color: var(--on-accent);
  font-size: 13px; font-weight: 800;
}
.theme-choice[aria-checked="true"] .theme-selected { display: grid; }
.unit-preview {
  width: 58px; height: 72px; display: grid; place-items: center;
  border-radius: 12px; background: linear-gradient(160deg, var(--mint), var(--water-mid));
  border: 1px solid var(--line); color: var(--deep);
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
}

/* ═══════════════════════════════ mobile ════════════════════════════════════ */

/* Tablet: the helper becomes a compact strip above the honest-size stage. */
@media (max-width: 1199px) {
  .builder {
    height: auto; min-height: calc(100dvh - 61px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto clamp(430px, 60dvh, 560px) auto;
    grid-template-areas: "rail" "stage" "shelf";
    padding: 12px; gap: 12px;
  }
  .rail {
    width: 100%; max-height: none; overflow: visible; align-self: stretch;
    padding: 0; background: transparent; border: 0; border-radius: 0;
  }
  .status-strip {
    width: 100%; height: 64px; padding: 0 16px;
    display: flex; align-items: center; gap: 10px; text-align: left;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
    color: var(--deep); font-weight: 800; box-shadow: var(--shadow-sm);
  }
  .status-dot {
    width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--ok);
    box-shadow: 0 0 0 4px rgba(61,190,122,.14);
  }
  .has-problem .status-dot { background: var(--bad); box-shadow: 0 0 0 4px rgba(224,80,63,.14); }
  .status-chevron { margin-left: auto; font-size: 20px; transition: transform .15s var(--ease); }
  .rail.is-open .status-chevron { transform: rotate(180deg); }
  .rail-body {
    display: none; margin-top: 8px; padding: 12px;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  }
  .rail.is-open .rail-body { display: flex; }
  .rail .residents { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .rail .res { min-width: 0; }
  .status-fish { min-height: 170px; }
  .shelf { height: auto; min-height: 430px; overflow: visible; }
  .fish-list { flex: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

@media (max-width: 820px) {
  .builder { grid-template-rows: auto clamp(400px, 58dvh, 520px) auto; padding: 10px; gap: 10px; }
  .gallery-toolbar { flex-wrap: wrap; }
  .gallery-toolbar .cats { flex: 1 1 auto; }
  .gallery-toolbar .filters { margin-left: 0; }
  .gallery-toolbar .catalog-search { flex: 1 1 220px; }
  .gallery-toolbar .catalog-filter-open { flex: none; }
  .gallery-toolbar .quiz-open { margin-left: auto; }
  .fish-list { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .beginner-path { align-items: stretch; }
  .beginner-path-copy { flex-basis: 155px; justify-content: center; }
  .brand span { display: none; }
  .meter { width: 54px; }
}

/* Phone: size control, tank, 52px status button, then a three-column gallery. */
@media (max-width: 600px) {
  .builder {
    min-height: 0; padding: 8px; gap: 8px;
    grid-template-rows: auto auto auto;
    grid-template-areas: "stage" "rail" "shelf";
  }
  .topbar { gap: 8px; padding: 8px; }
  .chip { min-height: 40px; padding: 0 10px; font-size: 13px; }
  .topbar-label { display: none; }
  #btn-recipes, #btn-undo, #btn-theme, #btn-units, #btn-share {
    width: 40px; justify-content: center; padding: 0; font-size: 16px;
  }
  #btn-units .unit-icon { min-width: 26px; }
  .stage { height: auto; gap: 7px; }
  .sizer-bar { padding: 8px 10px 5px; border-radius: var(--r-md); }
  .sizer-head { margin-bottom: 0; }
  .sizer-name { font-size: 16px; }
  .sizer-dims { font-size: 11px; margin-left: 5px; }
  .sizer-note { display: none; }
  .composition-toggle { min-height: 34px; padding: 0 9px; }
  .composition-toggle span:last-child { display: none; }
  .placement-bar { min-height: 48px; padding: 5px 6px 5px 9px; gap: 6px; }
  .placement-copy span { display: none; }
  .view-switcher { grid-template-columns: repeat(2, minmax(76px, 1fr)); }
  .view-switcher button { min-height: 36px; padding: 3px 7px; }
  .view-switcher button small { display: none; }
  .view-switcher button span:first-child { grid-row: auto; }
  .sizer-range { height: 30px; }
  .sizer-ticks { font-size: 8.5px; }
  .tank-wrap { flex: none; display: block; }
  .tank-canvas { height: clamp(300px, 52dvh, 460px); max-width: none; }
  .tank-column { height: 100%; }
  .tank-guide { display: none; }
  .meter { display: none; }
  .scale-ruler { height: 27px; margin-top: 5px; }
  .ruler-length { font-size: 8px; }
  .status-strip { height: 52px; padding: 0 13px; }
  .rail-body { max-height: none; overflow: visible; }
  .shelf { min-height: 0; padding: 8px; border-radius: var(--r-md); overflow: visible; }
  .beginner-path { display: block; padding: 9px; margin-bottom: 8px; }
  .beginner-path-copy { margin-bottom: 7px; }
  .beginner-path-copy strong { font-size: 14px; }
  .beginner-steps {
    display: flex; overflow-x: auto; gap: 6px; padding-bottom: 2px;
    scroll-snap-type: x proximity; scrollbar-width: thin;
  }
  .beginner-steps button { flex: 0 0 134px; min-height: 50px; scroll-snap-align: start; }
  .gallery-toolbar { gap: 7px; }
  .gallery-toolbar .cats { flex: 1 0 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .cat { min-width: 0; padding: 5px 6px; }
  .cat .cemoji { display: none; }
  .gallery-toolbar .filters {
    flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto;
    padding: 1px 0 4px; scrollbar-width: thin;
  }
  .gallery-toolbar .catalog-search {
    flex: 1 1 calc(100% - 102px); min-width: 0; max-width: none;
  }
  .gallery-toolbar .catalog-filter-open { width: 44px; padding: 0; justify-content: center; }
  .catalog-filter-open > span:nth-child(2) { display: none; }
  .catalog-filter-open strong { position: absolute; margin: -30px 0 0 28px; }
  .filter { min-height: 44px; padding: 0 10px; font-size: 11.5px; white-space: nowrap; }
  .gallery-toolbar .quiz-open { width: 44px; padding: 0; justify-content: center; margin-left: 0; }
  .quiz-open span:last-child { display: none; }
  .shelf .hint { margin: 5px 2px 7px; font-size: 11px; }
  .fish-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 108px;
    gap: 6px; padding: 1px 0; overflow: visible;
  }
  .fish-tile { height: 108px; padding-inline: 3px; }
  .tile-art .fish-svg { max-width: 72px; }
  .theme-grid { grid-template-columns: minmax(0, 1fr); }
  .style-preset-grid { grid-template-columns: minmax(0, 1fr); }
}

.fish-img { display:block; object-fit:contain; }