:root {
      --bg-deep: #082e36;
      --bg-mid: #0c4a57;
      --bg-light: #4ea3b2;
      --sand: #c8b181;
      --sand-shadow: #a38c63;
      --glass: rgba(228, 248, 250, 0.14);
      --panel: rgba(8, 32, 41, 0.74);
      --panel-strong: rgba(7, 26, 33, 0.9);
      --line: rgba(207, 240, 244, 0.16);
      --text: #ecf8f8;
      --muted: #a8ced0;
      --accent: #f5d881;
      --danger: #d96862;
      --ok: #8dd5a6;
      --shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
      --title-font: "Palatino Linotype", "Book Antiqua", Palatino, serif;
      --body-font: "Trebuchet MS", Tahoma, sans-serif;
      --mono-font: "Courier New", monospace;
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      min-height: 100%;
      min-height: 100dvh;
      background:
        radial-gradient(circle at top, rgba(109, 191, 206, 0.16), transparent 35%),
        linear-gradient(180deg, #082933 0%, #0a4552 45%, #0a3943 100%);
      color: var(--text);
      font-family: var(--body-font);
      /* Light text on a dark ground renders heavy with subpixel smoothing.
         Grayscale antialiasing thins the strokes so body copy reads at its
         true weight instead of looking semi-bold. */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow: hidden;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-touch-callout: none;
      touch-action: manipulation;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.2;
      background-image:
        linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,0.09) 47%, transparent 53%),
        linear-gradient(70deg, transparent 0 44%, rgba(255,255,255,0.06) 50%, transparent 56%);
      background-size: 260px 260px, 210px 210px;
      animation: shimmer 16s linear infinite;
    }

    @keyframes shimmer {
      from { transform: translate3d(-40px, -10px, 0); }
      to { transform: translate3d(40px, 12px, 0); }
    }

    .app-shell {
      height: 100vh;
      height: 100dvh;
    }

    button {
      border: 0;
      border-radius: 999px;
      padding: 0.72rem 1rem;
      -webkit-tap-highlight-color: transparent;
      color: var(--text);
      background: rgba(255,255,255,0.08);
      font: inherit;
      cursor: pointer;
      transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
    }

    button:hover, button:focus-visible {
      background: rgba(255,255,255,0.15);
      transform: translateY(-1px);
      outline: none;
    }

    button.active {
      background: linear-gradient(135deg, #f0cf75, #d0a852);
      color: #162024;
      box-shadow: 0 8px 20px rgba(208, 168, 82, 0.22);
    }

    select,
    option,
    input {
      background: rgba(7, 26, 33, 0.96);
      color: var(--text);
    }

    input {
      width: 100%;
      padding: 0.72rem 0.85rem;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      font: inherit;
    }

    .primary-btn {
      background: linear-gradient(135deg, #5bb3b7, #2f8f98);
    }

    .warning-btn {
      background: linear-gradient(135deg, #a34f4b, #7a3130);
    }

    .main-stage {
      position: relative;
      min-height: 100vh;
      min-height: 100dvh;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
    }

    .tank-wrap {
      position: absolute;
      inset: 0;
      padding: 0;
    }

    .tank {
      position: relative;
      height: 100%;
      border-radius: 0;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 18%, rgba(168, 229, 239, 0.26), transparent 25%),
        radial-gradient(circle at 78% 16%, rgba(187, 236, 236, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(135, 218, 227, 0.2) 0%, rgba(16, 90, 103, 0.14) 28%, rgba(4, 58, 68, 0.1) 100%),
        linear-gradient(180deg, #2c8595 0%, #0d5d6f 45%, #08414d 100%);
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), var(--shadow);
      isolation: isolate;
    }

    .tank::before,
    .tank::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .tank::before {
      background:
        radial-gradient(circle at 12% 24%, rgba(255,255,255,0.2), transparent 11%),
        radial-gradient(circle at 52% 18%, rgba(255,255,255,0.16), transparent 13%),
        radial-gradient(circle at 78% 32%, rgba(255,255,255,0.14), transparent 12%),
        radial-gradient(circle at 35% 56%, rgba(255,255,255,0.12), transparent 10%);
      opacity: 0.8;
      animation: caustics 12s ease-in-out infinite alternate;
      mix-blend-mode: screen;
    }

    .tank::after {
      background:
        linear-gradient(180deg, transparent 0 77%, rgba(215, 193, 136, 0.14) 78%, rgba(200, 177, 129, 0.65) 88%, #c8b181 100%);
    }

    .tank[data-theme="riverbed"] {
      background:
        radial-gradient(circle at 22% 16%, rgba(199, 214, 179, 0.2), transparent 24%),
        radial-gradient(circle at 80% 18%, rgba(160, 188, 128, 0.16), transparent 22%),
        linear-gradient(180deg, rgba(163, 198, 154, 0.18) 0%, rgba(74, 108, 76, 0.14) 26%, rgba(49, 76, 57, 0.1) 100%),
        linear-gradient(180deg, #7ca37f 0%, #58765a 42%, #314c39 100%);
    }

    .tank[data-theme="riverbed"]::after {
      background:
        linear-gradient(180deg, transparent 0 76%, rgba(122, 101, 78, 0.16) 77%, rgba(103, 83, 59, 0.62) 88%, #71563e 100%);
    }

    .tank[data-theme="spongebob"] {
      background:
        radial-gradient(circle at 18% 18%, rgba(255, 246, 176, 0.2), transparent 24%),
        radial-gradient(circle at 76% 20%, rgba(255, 220, 122, 0.18), transparent 23%),
        linear-gradient(180deg, rgba(255, 242, 171, 0.12) 0%, rgba(53, 177, 224, 0.16) 26%, rgba(14, 104, 160, 0.12) 100%),
        linear-gradient(180deg, #79ddff 0%, #2aaee2 44%, #1273b1 100%);
    }

    .tank[data-theme="spongebob"]::after {
      background:
        linear-gradient(180deg, transparent 0 76%, rgba(247, 207, 98, 0.16) 77%, rgba(235, 197, 87, 0.72) 88%, #e2bf5b 100%);
    }

    .tank[data-theme="aquascape"] {
      background:
        radial-gradient(circle at 16% 20%, rgba(188, 255, 221, 0.18), transparent 24%),
        radial-gradient(circle at 82% 16%, rgba(129, 222, 191, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(143, 236, 192, 0.12) 0%, rgba(24, 107, 89, 0.16) 28%, rgba(10, 67, 59, 0.12) 100%),
        linear-gradient(180deg, #2d8b88 0%, #1f6059 42%, #103b37 100%);
    }

    .tank[data-theme="aquascape"]::after {
      background:
        linear-gradient(180deg, transparent 0 76%, rgba(77, 95, 73, 0.16) 77%, rgba(65, 81, 61, 0.62) 88%, #4f5f49 100%);
    }

    @keyframes caustics {
      from { transform: translate3d(-18px, 6px, 0) scale(1.02); }
      to { transform: translate3d(18px, -10px, 0) scale(1.08); }
    }

    .tank-stats {
      position: absolute;
      left: 1rem;
      top: 1rem;
      z-index: 8;
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .tank-corner {
      position: absolute;
      z-index: 8;
      display: flex;
      gap: 0.5rem;
      align-items: flex-end;
    }

    .tank-corner.top-right {
      top: 1rem;
      right: 1rem;
      flex-direction: column;
      align-items: flex-end;
    }

    .top-right-row {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .tank-corner.bottom-left {
      left: 1rem;
      bottom: 1rem;
    }

    .tank-corner.bottom-right {
      right: 1rem;
      bottom: 1rem;
    }

    .pill {
      padding: 0.5rem 0.75rem;
      border-radius: 999px;
      background: rgba(10, 37, 45, 0.55);
      border: 1px solid rgba(255,255,255,0.09);
      font-size: 0.78rem;
      color: var(--muted);
    }

    .tank-title-pill {
      color: #fff5c9;
      font-family: var(--title-font);
      font-size: clamp(1.05rem, 1.6vw, 1.35rem);
      letter-spacing: 0.08em;
      padding-inline: 0.95rem;
      background: rgba(7, 28, 35, 0.72);
    }

    .brand-link-pill {
      font-size: 0.74rem;
      letter-spacing: 0.04em;
      color: var(--text);
      background: rgba(7, 28, 35, 0.66);
    }

    .week-speed-pill {
      width: fit-content;
      text-align: right;
      display: inline-flex;
      justify-content: flex-end;
      padding-inline: 0.95rem;
      color: #fff5c9;
      border-color: rgba(245, 216, 129, 0.3);
      background: rgba(7, 28, 35, 0.78);
    }

    .week-speed-pill strong {
      color: #fff5c9;
      font-size: 0.84rem;
      letter-spacing: 0.12em;
    }

    .hamburger-stack {
      display: none;
      gap: 0.45rem;
      flex-direction: column;
      align-items: flex-end;
    }

    .hamburger-stack.open {
      display: flex;
    }

    /* Landscape phone: not enough vertical room for a single column.
       Switch to 2 columns; grid-template-rows is set by JS so the
       split is always floor(n/2) left / ceil(n/2) right. */
    @media (orientation: landscape) and (max-height: 500px) {
      .hamburger-stack.open {
        display: grid;
        grid-auto-flow: column;
        column-gap: 0.5rem;
        justify-items: end;
        align-items: start;
      }
    }

    .hamburger-pill {
      min-width: 44px;
      text-align: center;
      /* ☰ has a taller intrinsic line box than Latin text; clamp it so the
         pill matches the other pills' height (and Research stays top-aligned). */
      line-height: 1.155;
    }

    .hamburger-item {
      min-width: 168px;
    }

    /* .pill sets an explicit display, so the UA's [hidden] rule loses without
       this. renderHamburgerMenu() counts !el.hidden for the landscape column
       split, so hidden items must use the attribute rather than inline style. */
    .hamburger-item[hidden] {
      display: none !important;
    }

    #storageBtn { order: 1; }
    #geneticAssistantBtn { order: 2; }
    #redeemBtn { order: 3; }
    #cloudSaveBtn { order: 4; }
    #settingsBtn { order: 5; }
    #logToggleBtn { order: 6; }
    #tutorialBtn { order: 7; }
    #geneticsGuideBtn { order: 8; }
    #breederPlusBtn { order: 9; }
    #brandLinkBtn { order: 10; }

    .speed-controls {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 0.4rem;
    }

    .speed-icon-btn {
      min-width: 54px;
      padding: 0.56rem 0.78rem;
      font-size: 1rem;
      line-height: 1;
    }

    .modal,
    #logList,
    #researchContent,
    #settingsContent {
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }

    .drag-scroll {
      cursor: grab;
    }

    .drag-scroll.dragging {
      cursor: grabbing;
    }

    .modal::-webkit-scrollbar,
    #logList::-webkit-scrollbar,
    #researchContent::-webkit-scrollbar,
    #settingsContent::-webkit-scrollbar,
    #storageContent::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

    .stepper-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 0.7rem;
      margin-top: 0.75rem;
    }

    .stepper-item {
      padding: 0.85rem 0.95rem;
      border-radius: 18px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .stepper-item strong {
      display: block;
      font-size: 0.82rem;
      color: var(--muted);
      margin-bottom: 0.55rem;
      font-weight: 600;
    }

    .stepper-control {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.55rem;
    }

    .stepper-btn {
      min-width: 42px;
      min-height: 42px;
      padding: 0.5rem 0.65rem;
      font-weight: 700;
    }

    .stepper-value {
      min-width: 74px;
      text-align: center;
      color: #fff5c9;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .pill-action {
      cursor: pointer;
      transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
    }

    .pill-action:hover,
    .pill-action:focus-visible {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.18);
      transform: translateY(-1px);
      outline: none;
    }

    .rock, .moss, .ornament {
      position: absolute;
      pointer-events: none;
      z-index: 1;
    }

    .rock {
      background: linear-gradient(145deg, #7a878b, #48545b);
      clip-path: polygon(12% 18%, 34% 5%, 68% 16%, 94% 34%, 82% 82%, 53% 100%, 20% 92%, 2% 54%);
      box-shadow: inset 0 -12px 18px rgba(0,0,0,0.22), 0 6px 18px rgba(0,0,0,0.16);
    }

    .moss {
      background: radial-gradient(circle at 40% 35%, #6ba85d, #2f6d3a 70%);
      clip-path: polygon(8% 50%, 18% 28%, 32% 22%, 45% 4%, 60% 24%, 75% 16%, 88% 38%, 76% 64%, 92% 82%, 68% 88%, 52% 76%, 31% 95%, 11% 82%, 3% 63%);
      filter: saturate(1.2);
      opacity: 0.92;
    }

    .rock.theme-riverbed {
      background: linear-gradient(145deg, #8b7a69, #5f4d3f);
      clip-path: polygon(6% 26%, 28% 7%, 62% 12%, 92% 33%, 88% 76%, 59% 96%, 17% 88%, 3% 54%);
    }

    .moss.theme-riverbed {
      background: radial-gradient(circle at 40% 35%, #7ca35a, #48653c 72%);
      opacity: 0.8;
    }

    .rock.theme-spongebob {
      background: linear-gradient(145deg, #8e7ca8, #5c4c7d);
      clip-path: polygon(10% 18%, 30% 5%, 68% 18%, 93% 41%, 84% 82%, 49% 100%, 16% 88%, 2% 51%);
    }

    .moss.theme-spongebob {
      background: radial-gradient(circle at 40% 35%, #e06aa0, #9a3f79 70%);
      clip-path: polygon(10% 66%, 22% 25%, 42% 18%, 53% 0%, 67% 22%, 83% 11%, 92% 43%, 81% 70%, 96% 90%, 66% 90%, 48% 79%, 28% 100%, 10% 86%, 2% 70%);
    }

    .rock.theme-aquascape {
      background: linear-gradient(145deg, #6f8075, #38453d);
      clip-path: polygon(12% 14%, 39% 6%, 73% 17%, 93% 36%, 84% 86%, 54% 100%, 18% 90%, 4% 46%);
    }

    .moss.theme-aquascape {
      background: radial-gradient(circle at 40% 35%, #66b888, #2d7a5b 72%);
      opacity: 0.96;
    }

    .ornament.reed {
      width: 22px;
      height: 88px;
      background:
        linear-gradient(90deg, transparent 0 24%, #5f8d4f 24% 36%, transparent 36% 44%, #7fb768 44% 58%, transparent 58% 66%, #4f7e46 66% 78%, transparent 78% 100%);
      transform-origin: bottom center;
      opacity: 0.9;
    }

    .ornament.shell {
      border-radius: 60% 60% 42% 42%;
      background: linear-gradient(180deg, #f2d7b5, #c19a73);
      box-shadow: inset 0 -8px 10px rgba(0,0,0,0.18);
    }

    .ornament.coral {
      background: linear-gradient(180deg, #ff9f8f, #d45d6f);
      clip-path: polygon(44% 100%, 46% 66%, 30% 42%, 37% 21%, 47% 42%, 50% 0, 58% 42%, 72% 20%, 78% 44%, 62% 66%, 64% 100%);
      filter: drop-shadow(0 6px 6px rgba(0,0,0,0.16));
    }

    .ornament.pineapple {
      background:
        linear-gradient(180deg, #7dbb55 0 24%, transparent 24%),
        linear-gradient(180deg, transparent 24%, #f0b63e 24% 100%);
      clip-path: polygon(44% 0, 54% 16%, 66% 0, 62% 18%, 76% 10%, 66% 28%, 78% 34%, 66% 42%, 72% 100%, 28% 100%, 34% 42%, 22% 34%, 34% 28%, 24% 10%, 38% 18%);
      filter: drop-shadow(0 6px 6px rgba(0,0,0,0.16));
    }

    .shrimp-layer {
      position: absolute;
      inset: 0;
      z-index: 5;
    }

    .shrimp-canvas-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      touch-action: manipulation;
    }

    .crayfish {
      position: absolute;
      left: 0;
      top: 0;
      width: 176px;
      height: 100px;
      transform-origin: center center;
      will-change: transform;
      z-index: 4;
      cursor: pointer;
    }

    .crayfish.selected {
      filter: drop-shadow(0 0 10px rgba(245, 216, 129, 0.95));
    }

    .crayfish-canvas {
      display: block;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .side-panel,
    .modal,
    .toast-area,
    .bottom-panel {
      z-index: 20;
    }

    .side-panel {
      position: absolute;
      top: 50%;
      right: 1rem;
      width: min(320px, calc(100vw - 1.5rem));
      max-height: min(440px, calc(100% - 2rem));
      border-radius: 24px;
      background: var(--panel);
      border: 1px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(16px);
      box-shadow: var(--shadow);
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: translate(110%, -50%);
      transition: transform 220ms ease;
    }

    .side-panel.open {
      transform: translate(0, -50%);
    }

    .panel-header, .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .panel-header {
      position: sticky;
      top: 0;
      z-index: 2;
      margin-bottom: 0;
      padding: 1rem 1rem 0.8rem;
      background: linear-gradient(180deg, rgba(7, 26, 33, 0.96), rgba(7, 26, 33, 0.82));
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .panel-header h2, .modal-header h2 {
      margin: 0;
      font-family: var(--title-font);
      font-size: 1.45rem;
    }

    .panel-header p, .modal-header p {
      margin: 0.2rem 0 0;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .close-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      padding: 0;
      font-size: 1.2rem;
      flex-shrink: 0;
    }

    .panel-actions {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      margin-left: auto;
    }

    .icon-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      line-height: 1;
      flex-shrink: 0;
    }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.7rem;
      margin-bottom: 1rem;
    }

    .detail-card {
      padding: 0.8rem;
      border-radius: 18px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
    }

    .detail-card label {
      display: block;
      color: var(--muted);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.3rem;
    }

    .detail-card strong, .detail-card code {
      word-break: break-word;
      font-family: var(--body-font);
    }

    .detail-card code {
      font-family: var(--mono-font);
      color: #fff0bc;
      font-size: 0.92rem;
    }

    .detail-card p {
      margin: 0;
      color: #eef7f7;
      line-height: 1.45;
      font-size: 0.95rem;
    }

    .detail-card p + p {
      margin-top: 0.32rem;
    }

    .action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
    }

    #detailContent {
      overflow: auto;
      /* No horizontal padding here — the modal already provides the gutter.
         (Previously double-padded, insetting detail content 32px vs the
         16px header, so the two didn't line up.) */
      padding: 0.9rem 0 1rem;
    }

    .log-list {
      overflow: auto;
      padding: 0 0 1rem;
      display: grid;
      gap: 0.45rem;
      align-content: start;
    }

    .log-entry {
      padding: 0.72rem 0.9rem;
      border-radius: 14px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.05);
      color: #d7ecee;
      font-size: 0.92rem;
    }

    .log-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1rem;
      flex-wrap: wrap;
    }

    .log-toolbar select {
      border-radius: 999px;
      padding: 0.65rem 0.9rem;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.08);
      color: var(--text);
      font: inherit;
    }

    .log-week-group {
      display: grid;
      gap: 0.45rem;
      margin-bottom: 1rem;
    }

    .log-week-heading {
      margin: 0;
      color: #fff5c9;
      font-family: var(--title-font);
      font-size: 1.05rem;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }

    .summary-card {
      padding: 0.9rem;
      border-radius: 18px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
      display: grid;
      gap: 0.55rem;
    }

    .summary-card h3 {
      margin: 0 0 0.2rem;
      font-family: var(--title-font);
      font-size: 1.02rem;
      color: #fff5c9;
    }

    .summary-stat {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      align-items: center;
      color: #eef7f7;
      font-size: 0.94rem;
    }

    .summary-stat strong {
      font-size: 1rem;
      color: #fff5c9;
    }

    #weekSummaryModal {
      width: min(620px, calc(100vw - 8rem));
      z-index: 38;
    }

    .research-summary {
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      align-items: stretch;
      margin-bottom: 0.9rem;
    }

    .research-count {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      gap: 0.5rem;
      padding: 0.85rem 1rem;
      border-radius: 18px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      font-family: 'Palatino Linotype', serif;
      font-size: 1.8rem;
      color: #fff5c9;
      line-height: 1;
    }

    .research-count span {
      font-family: 'Trebuchet MS', sans-serif;
      font-size: 0.82rem;
      color: var(--muted);
    }

    .research-next {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.18rem;
      padding: 0.85rem 1rem;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(91,179,183,0.16), rgba(47,143,152,0.10));
      border: 1px solid rgba(91,179,183,0.30);
    }

    .research-next-label {
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #f5d881;
      opacity: 0.95;
    }

    .research-next strong {
      font-size: 1rem;
      color: #ecf8f8;
    }

    .research-next-how {
      font-size: 0.85rem;
      color: var(--muted);
    }

    .research-next--done {
      align-items: center;
      text-align: center;
      color: #fff5c9;
      font-size: 1rem;
    }

    .research-list {
      display: grid;
      gap: 0.7rem;
    }

    .research-item {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 0.8rem;
      align-items: center;
      padding: 0.85rem;
      border-radius: 18px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
    }

    .research-item.locked {
      opacity: 0.78;
    }

    .research-item.locked .storage-sprite {
      filter: grayscale(1) brightness(0.7);
    }

    .research-item strong {
      display: block;
      margin-bottom: 0.2rem;
    }

    .research-item span {
      color: var(--muted);
      font-size: 0.9rem;
    }

    .research-discovered {
      display: block;
      margin-top: 0.15rem;
    }

    .ga-controls {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 0.9rem;
    }

    .ga-controls label {
      font-size: 0.85rem;
      color: var(--muted);
    }

    .ga-select {
      width: 100%;
      padding: 0.72rem 2.2rem 0.72rem 0.85rem;
      border-radius: 14px;
      appearance: none;
      background:
        linear-gradient(45deg, transparent 50%, #ecf8f8 50%) right 1rem center / 6px 6px no-repeat,
        linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.05));
      border: 1px solid rgba(255,255,255,0.12);
      color: inherit;
      font-size: 1rem;
      color-scheme: dark;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }

    .ga-select:focus-visible {
      border-color: rgba(245, 216, 129, 0.55);
      box-shadow:
        0 0 0 3px rgba(245, 216, 129, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.08);
      outline: none;
    }

    .ga-select optgroup {
      background-color: #071a21;
      color: #f5d881;
      font-weight: 700;
    }

    .ga-select option {
      background-color: #071a21;
      color: #ecf8f8;
    }

    .ga-select option:checked {
      background-color: #0c4a57;
      color: #ffffff;
    }

    .ga-undiscovered {
      margin: 0.2rem 0 0;
      font-size: 0.85rem;
      color: var(--muted);
    }

    .ga-item {
      grid-template-columns: 120px minmax(0, 1fr);
    }

    .ga-pair-sprites {
      display: flex;
      gap: 0.3rem;
    }

    .ga-ready {
      color: #7ee0a5 !important;
    }

    .ga-hint {
      color: #ffcf8f !important;
    }

    /* ── Genetics Guide (Part 4 threshold matches the existing 8-color / 2x
       speed progression tier in globals.js, so this reuses real player state
       instead of a static description) ───────────────────────────────────── */
    /* Sections are separated by hairline dividers and led by a numbered badge
       + serif title. Monospace is reserved for genetic notation only (allele
       circles, genotype codes, Punnett cells, legend codes) — everything else
       is the app's title/body fonts, so the guide reads as one calm system
       rather than a mix of mono labels, serif headings, and body prose. */
    .gg-part {
      margin: 0;
      padding: 1.5rem 0;
      border-top: 1px solid var(--line);
    }
    .gg-part:first-child {
      padding-top: 0.25rem;
      border-top: 0;
    }
    .gg-part-head {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      margin-bottom: 0.6rem;
    }
    .gg-num {
      flex-shrink: 0;
      width: 1.7rem;
      height: 1.7rem;
      border-radius: 50%;
      background: rgba(245, 216, 129, 0.14);
      color: var(--accent);
      font-weight: 700;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .gg-part h3 {
      font-family: var(--title-font);
      font-size: 1.15rem;
      margin: 0;
      color: var(--text);
    }
    .gg-part p {
      margin: 0.65rem 0 0;
      /* Back to the app's own font (Trebuchet, single weight). Smaller size
         + tighter leading reduces the "heavy" feel without switching fonts. */
      font-size: 0.93rem;
      /* Softer than --text so it doesn't glare against the dark panel. */
      color: #d4e6e9;
      line-height: 1.48;
    }
    /* Justified prose: the main reading paragraphs plus the bubble captions
       (allele demo, Part Four card) and the note beside the Punnett chart.
       Hyphenation keeps justify from opening whitespace rivers — it matters
       most in these narrower columns. */
    .gg-part > p,
    .gg-allele-demo p,
    .gg-punnett-note,
    .gg-card p {
      text-align: justify;
      hyphens: auto;
      -webkit-hyphens: auto;
    }
    .gg-allele-demo {
      display: flex;
      align-items: center;
      gap: 1.1rem;
      margin-top: 0.9rem;
      padding: 0.9rem 1rem;
      border-radius: 18px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
    }
    .gg-allele-pair {
      display: flex;
      flex-shrink: 0;
    }
    .gg-allele {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono-font);
      font-size: 1.15rem;
      font-weight: 700;
    }
    .gg-allele.dominant {
      background: var(--accent);
      color: #22160a;
      z-index: 1;
    }
    .gg-allele.recessive {
      background: transparent;
      border: 2px solid var(--line);
      color: var(--muted);
      margin-left: -12px;
    }
    .gg-allele-demo p {
      margin: 0;
      font-size: 0.88rem;
      color: var(--muted);
    }
    .gg-allele-demo strong {
      color: var(--text);
    }
    .gg-table-wrap {
      overflow-x: auto;
      margin-top: 0.9rem;
    }
    .gg-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.92rem;
      min-width: 300px;
    }
    .gg-table th {
      text-align: left;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
      padding: 0 0.7rem 0.55rem;
      border-bottom: 1px solid var(--line);
    }
    .gg-table td {
      padding: 0.55rem 0.7rem;
      border-bottom: 1px solid var(--line);
    }
    .gg-locus {
      font-family: var(--mono-font);
    }
    .gg-locus .dom {
      color: var(--text);
      font-weight: 700;
    }
    .gg-locus .rec {
      color: var(--muted);
    }
    .gg-family-cell {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      font-weight: 600;
    }
    .gg-swatch {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      flex-shrink: 0;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
    }
    .gg-note {
      font-size: 0.82rem;
      color: var(--muted);
      margin-top: 0.7rem;
    }
    .gg-punnett-row {
      display: flex;
      gap: 1.6rem;
      align-items: flex-start;
      margin-top: 0.9rem;
      flex-wrap: wrap;
    }
    .gg-punnett {
      display: grid;
      grid-template-columns: 34px repeat(2, 54px);
      grid-template-rows: 34px repeat(2, 54px);
      flex-shrink: 0;
    }
    .gg-punnett .gg-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono-font);
      border: 1px solid var(--line);
      margin: -1px 0 0 -1px;
    }
    .gg-punnett .gg-head {
      font-weight: 700;
      color: var(--accent);
      font-size: 0.95rem;
    }
    .gg-punnett .gg-corner {
      border-color: transparent;
    }
    .gg-punnett .gg-result {
      background: rgba(255,255,255,0.04);
      font-size: 0.85rem;
      color: var(--muted);
    }
    .gg-punnett .gg-result.gg-surprise {
      background: rgba(245, 216, 129, 0.14);
      color: var(--accent);
      font-weight: 700;
      box-shadow: inset 0 0 0 1.5px var(--accent);
    }
    .gg-punnett-note {
      /* Wide enough that justify has room to set even lines — at 26ch the
         word gaps stretched badly beside the chart. Still capped so the
         measure stays comfortable to read on wide screens. */
      flex: 1 1 22ch;
      max-width: 46ch;
      margin: 0;
      font-size: 0.88rem;
      color: var(--text);
    }
    .gg-card {
      margin-top: 0.9rem;
      padding: 0.95rem 1.1rem;
      border-radius: 18px;
      background: rgba(255,255,255,0.05);
      border: 1px dashed rgba(255,255,255,0.14);
    }
    .gg-lock-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .gg-lock-row .gg-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }
    .gg-card p {
      margin-top: 0.6rem;
    }
    .gg-legend {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 0.7rem;
      margin-top: 0.9rem;
    }
    .gg-legend-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.85rem;
    }
    .gg-legend-item .gg-swatch {
      width: 20px;
      height: 20px;
    }
    .gg-legend-item .gg-code {
      display: block;
      font-family: var(--mono-font);
      font-size: 0.68rem;
      color: var(--muted);
    }
    /* Settings → Tutorial: launcher on the left, placement toggle on the right. */
    .tutorial-place-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 0.6rem;
    }

    .place-toggle {
      font-size: 0.82rem;
      /* Keep it visually secondary to the launcher, but still a comfortable
         touch target (42px matches .close-btn / .icon-btn elsewhere). */
      min-height: 42px;
      padding: 0.45rem 0.9rem;
      color: var(--muted);
      background: transparent;
      border: 1px solid var(--line);
      white-space: nowrap;
    }

    .place-toggle:hover,
    .place-toggle:focus-visible {
      color: var(--text);
      background: rgba(255,255,255,0.08);
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(1, 10, 14, 0.64);
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
      z-index: 35;
    }

    .modal-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .modal {
      position: fixed;
      left: 50%;
      top: 50%;
      /* 620px cap keeps small dialogs tidy on desktop; the 2rem gutter only
         bites on phones, where near-full-width is the right behaviour (was an
         8rem gutter that left base modals cramped at ~240px on a 375px phone). */
      width: min(620px, calc(100vw - 2rem));
      max-height: min(84vh, 860px);
      overflow: auto;
      transform: translate(-50%, -48%) scale(0.98);
      opacity: 0;
      pointer-events: none;
      transition: transform 180ms ease, opacity 180ms ease;
      border-radius: 28px;
      padding: 1.25rem;
      background: var(--panel-strong);
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: var(--shadow);
      z-index: 40;
    }

    .page-modal {
      width: min(900px, calc(100vw - 2rem));
    }

    .modal.open {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%) scale(1);
    }

    #storageModal {
      height: min(84vh, 860px);
      max-height: min(84vh, 860px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    #storageModal .modal-header,
    #storageToolbar {
      flex: 0 0 auto;
      position: relative;
      z-index: 1;
    }

    #storageContent {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
      padding: 0 0 0.2rem;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }

    .storage-list {
      display: grid;
      gap: 0.7rem;
      align-content: start;
    }

    .storage-item {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.8rem;
      padding: 0.9rem;
      border-radius: 18px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.06);
      cursor: pointer;
    }

    .storage-row {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr) auto;
      gap: 0.8rem;
      align-items: center;
    }

    .storage-sprite {
      position: relative;
      width: 52px;
      height: 34px;
      filter: drop-shadow(0 3px 5px rgba(0,0,0,0.2));
    }

    .storage-sprite canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    .storage-summary {
      min-width: 0;
    }

    .storage-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 0.45rem;
    }

    .storage-item strong {
      display: block;
      margin-bottom: 0.2rem;
    }

    .storage-item span {
      color: var(--muted);
      font-size: 0.9rem;
    }

    .storage-item.expanded {
      border-color: rgba(245, 216, 129, 0.3);
      background: rgba(245, 216, 129, 0.08);
    }

    .storage-detail {
      display: grid;
      gap: 0.35rem;
      padding-top: 0.2rem;
      color: #eef7f7;
      font-size: 0.92rem;
    }

    .genealogy-tree {
      overflow: auto;
      padding-bottom: 0.4rem;
    }

    .genealogy-tree ul {
      list-style: none;
      margin: 0;
      padding-left: 1.4rem;
      position: relative;
    }

    .genealogy-tree ul::before {
      content: "";
      position: absolute;
      left: 0.45rem;
      top: 0.2rem;
      bottom: 0.7rem;
      width: 1px;
      background: rgba(255,255,255,0.16);
    }

    .genealogy-tree li {
      position: relative;
      margin: 0.7rem 0;
      padding-left: 0.8rem;
    }

    .genealogy-tree li::before {
      content: "";
      position: absolute;
      left: -0.15rem;
      top: 1rem;
      width: 0.65rem;
      height: 1px;
      background: rgba(255,255,255,0.16);
    }

    .tree-node {
      display: inline-block;
      min-width: 220px;
      padding: 0.75rem 0.85rem;
      border-radius: 18px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .tree-node.active {
      border-color: rgba(245, 216, 129, 0.45);
      background: rgba(245, 216, 129, 0.1);
    }

    .storage-capacity {
      flex-basis: 100%;
      font-size: 0.86rem;
      color: var(--muted);
      letter-spacing: 0.02em;
    }

    .storage-capacity.full {
      color: var(--accent);
    }

    .tree-node.tree-node-truncated {
      min-width: 0;
      padding: 0.5rem 0.75rem;
      color: var(--muted);
      font-size: 0.86rem;
      font-style: italic;
      background: transparent;
      border-style: dashed;
    }

    .tree-node strong {
      display: block;
      margin-bottom: 0.25rem;
    }

    .tree-node span {
      display: block;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.35;
    }

    .toast-area {
      position: fixed;
      left: 50%;
      top: 1rem;
      transform: translateX(-50%);
      display: grid;
      gap: 0.5rem;
      z-index: 50;
      pointer-events: none;
    }

    .toast {
      min-width: min(520px, calc(100vw - 2rem));
      max-width: calc(100vw - 2rem);
      padding: 0.85rem 1rem;
      border-radius: 16px;
      background: rgba(6, 24, 31, 0.9);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: var(--shadow);
      color: var(--text);
      animation: toast-in 180ms ease;
    }

    @keyframes toast-in {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .empty-state {
      color: var(--muted);
      padding: 1rem 0;
    }

    .install-note {
      color: var(--muted);
      font-size: 0.84rem;
    }

    /* When .install-note is used as a field label wrapping an input/select
       (Redeem "Code", Log "Filter by week"), give it breathing room above the
       control instead of sitting flush against it. */
    label > .install-note {
      display: block;
      margin-bottom: 0.45rem;
    }

    @media (max-width: 900px) {
      .side-panel {
        top: auto;
        right: 0.75rem;
        left: 0.75rem;
        bottom: 0.75rem;
        width: auto;
        max-height: 290px;
        border-radius: 22px;
        transform: translateY(120%);
      }

      .side-panel.open {
        transform: translateY(0);
      }

    }

    @media (max-width: 640px) {
      .detail-grid {
        grid-template-columns: 1fr;
      }

      .storage-item,
      .summary-grid {
        grid-template-columns: 1fr;
      }

      /* Phones keep the tighter 1rem gutter; larger screens get the roomier
         1.25rem from the base rule. weekSummary now shares the base modal
         width instead of an extra-narrow override. */
      .modal {
        padding: 1rem;
      }

      /* Stack the allele bubble on phones. Beside the circles the caption is
         squeezed to ~26 characters, too narrow for justify to set evenly. */
      .gg-allele-demo {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
      }

      /* The Punnett row wraps on phones, so center the chart on its own line. */
      .gg-punnett {
        margin-left: auto;
        margin-right: auto;
      }

      .tank {
        border-radius: 22px;
      }

      .tank-corner.top-right,
      .tank-stats {
        top: 0.75rem;
      }

      .tank-corner.top-right {
        right: 0.75rem;
      }

      .tank-corner.bottom-left,
      .tank-corner.bottom-right {
        bottom: 0.75rem;
      }

      .tank-corner.bottom-left {
        left: 0.75rem;
      }

      .tank-corner.bottom-right {
        right: 0.75rem;
      }
    }

    .cloud-save-section {
      padding: 1rem 0;
    }

    .cloud-user-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.25rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--line);
    }

    .cloud-save-cells {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      margin-bottom: 1.25rem;
    }

    @media (max-width: 480px) {
      .cloud-save-cells {
        grid-template-columns: 1fr;
      }
    }

    .cloud-save-cell {
      background: var(--glass);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0.85rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .cloud-save-cell-label {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
    }

    .cloud-save-cell-info {
      font-size: 0.95rem;
    }

    .cloud-save-cell-date {
      font-size: 0.78rem;
      color: var(--muted);
    }

    .cloud-save-cell button {
      margin-top: 0.5rem;
      padding: 0.45rem 0.9rem;
      font-size: 0.88rem;
      align-self: flex-start;
    }

    .cloud-autosave-label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
      color: var(--muted);
      cursor: pointer;
    }

    .cloud-autosave-label input[type="checkbox"] {
      accent-color: var(--accent);
      width: 1rem;
      height: 1rem;
    }

    /* ── Install banner ─────────────────────────────────────────── */
    /* Ensure [hidden] attribute overrides the explicit display:flex below. */
    .install-banner[hidden] { display: none !important; }

    .install-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 30;
      background: rgba(7, 26, 33, 0.96);
      border-top: 1px solid var(--line);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.85rem 1rem 0.85rem 1.25rem;
      animation: slideUpBanner 0.35s ease;
    }

    @keyframes slideUpBanner {
      from { transform: translateY(100%); }
      to   { transform: translateY(0); }
    }

    .install-banner-text {
      flex: 1;
      font-size: 0.88rem;
      line-height: 1.45;
      color: var(--text);
    }

    .install-banner-text strong {
      display: block;
      margin-bottom: 0.15rem;
    }

    .install-banner-actions {
      display: flex;
      gap: 0.4rem;
      align-items: center;
      flex-shrink: 0;
    }

    .install-banner .install-action-btn {
      padding: 0.5rem 1rem;
      font-size: 0.85rem;
      background: linear-gradient(135deg, #5bb3b7, #2f8f98);
    }

    .install-banner .install-dismiss-btn {
      padding: 0.4rem 0.7rem;
      font-size: 1.1rem;
      background: transparent;
      opacity: 0.45;
      transition: opacity 180ms;
    }

    .install-banner .install-dismiss-btn:hover {
      opacity: 1;
      background: transparent;
    }

    /* ── iOS install instructions modal ─────────────────────────── */
    .ios-steps {
      list-style: none;
      margin: 0.5rem 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }

    .ios-steps li {
      display: flex;
      align-items: flex-start;
      gap: 0.9rem;
      font-size: 0.95rem;
      line-height: 1.45;
    }

    .ios-step-num {
      flex-shrink: 0;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
      background: var(--bg-mid);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--accent);
    }

    .ios-share-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.4rem;
      height: 1.4rem;
      border: 1.5px solid currentColor;
      border-radius: 5px;
      font-size: 0.8rem;
      vertical-align: middle;
      margin: 0 0.15rem;
      position: relative;
      top: -1px;
    }