/* 培養成果 / Genetic Incremental
   Type scale (readability pass, 2026-10-07): nothing below 12px. Secondary details live in tooltips
   ([data-tip], see game.js) and long panels scroll with their headers kept in view. */
:root {
  color-scheme: dark;
  --ink: #eef7f6; --muted: #a3b6bc; --dim: #7f979e; --cyan: #62ddcb; --gold: #f3cb82; --edge: #2a414a;
  --fs-xs: 12px;  /* captions, tags, footnotes: the minimum */
  --fs-s: 13px;   /* secondary text, hints */
  --fs-m: 14px;   /* body text, buttons, card descriptions */
  --fs-l: 16px;   /* card titles, tabs, section heads */
  --fs-xl: 19px;  /* headings */
  --stage-width: min(460px, calc((100svh - 330px) * .84375)); /* the culture view is 540:640 */
}

/* ---- base ------------------------------------------------------------------------------ */
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100svh; color: var(--ink); font-size: var(--fs-m); line-height: 1.5;
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif;
  background: radial-gradient(ellipse at 30% 35%, #142731, #071218 55%, #03090d);
}
button, input, select { font: inherit; }
button {
  cursor: pointer; color: var(--ink); background: #14232b; border: 1px solid var(--edge); border-radius: 9px;
  padding: 9px 13px; font-size: var(--fs-m); transition: background .15s, border .15s;
}
button:hover:enabled { background: #203640; border-color: #65898e; }
button:disabled { color: #869aa0; cursor: not-allowed; background: #0b171e; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
a { color: var(--muted); text-decoration: none; }
[hidden] { display: none !important; }
input[type=checkbox] { accent-color: var(--cyan); width: 18px; height: 18px; }
input[type=number], select { min-width: 0; background: #10212a; color: var(--ink); border: 1px solid var(--edge); border-radius: 7px; padding: 8px; font-size: var(--fs-m); }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }

/* ---- page frame: top bar, HUD, objective line ---------------------------------------------- */
#app { width: min(1240px, 100%); margin: auto; padding: 12px 18px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; margin-bottom: 10px; }
.topbar a { font-size: var(--fs-s); letter-spacing: .06em; white-space: nowrap; }
.topbar h1 { font-size: 21px; letter-spacing: .06em; margin: 0; white-space: nowrap; }
.topbar h1 small { font-size: var(--fs-xs); letter-spacing: .14em; color: var(--muted); font-weight: 500; margin-left: 10px; }
.topbar > div { display: flex; gap: 6px; }
.topbar button { font-size: var(--fs-s); padding: 7px 11px; white-space: nowrap; }
#helpBtn { min-width: 34px; font-weight: 700; }
.hud { display: grid; grid-template-columns: 1.1fr 1fr .8fr; gap: 10px; }
.hud > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; padding: 10px 16px; border: 1px solid var(--edge); border-radius: 12px; background: #0b1922b8; }
.hud span { font-size: var(--fs-s); color: var(--muted); }
.hud strong { grid-row: span 2; font-size: 28px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hud small { font-size: var(--fs-xs); color: #7fd3c6; }
.progress { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-s); color: var(--muted); margin: 10px 0 12px; padding-bottom: 9px; }
.progress > div { height: 3px; position: absolute; bottom: 0; left: 0; right: 0; background: #1c3039; border-radius: 2px; }
.progress i { display: block; background: var(--cyan); height: 3px; width: 0; border-radius: 2px; }
#nextUnlock { cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c8dadd; }
#nextUnlock:hover { color: var(--ink); }
#clockValue { flex-shrink: 0; font-size: var(--fs-xs); }
footer { display: flex; justify-content: space-between; padding-top: 12px; font-size: var(--fs-xs); color: var(--dim); }
@media (hover: none) { footer > span:first-child { display: none; } } /* keyboard hints mean nothing on touch screens */

/* ---- layout: culture column and laboratory panel ------------------------------------------- */
#layout { display: grid; grid-template-columns: var(--stage-width) minmax(360px, 1fr); gap: 18px; justify-content: center; }
#stageWrap { position: relative; width: 100%; border: 1px solid var(--edge); border-radius: 16px; background: #050e14; overflow: hidden; user-select: none; touch-action: manipulation; }
#c { display: block; width: 100%; height: auto; aspect-ratio: 540 / 640; }
#stageWrap.targeting #c { cursor: crosshair; }
/* one line under the dish: spread and founders, and the harvest of this run once there is one */
.stage-footer { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; justify-content: space-between; gap: 10px; color: #7aa3ad; font-size: var(--fs-xs); pointer-events: none; }
.stage-footer span { pointer-events: auto; cursor: help; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#ascensionCut { position: absolute; inset: 0; background: #081620cf; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#ascensionCut strong { font-size: clamp(26px, 4vw, 44px); letter-spacing: .08em; color: var(--gold); }
#eventBanner { position: absolute; left: 10px; right: 10px; top: 36px; padding: 8px 12px; border-radius: 10px; font-size: var(--fs-s); line-height: 1.5; text-align: center; pointer-events: none; background: #2a1f30ee; border: 1px solid #b78afa99; color: #ecdfff; }
#eventBanner.virus { background: #1f2b17f0; border-color: #8fcf5a99; color: #ddf6c8; }
#eventBanner strong { font-size: var(--fs-m); letter-spacing: .06em; margin-right: 6px; }
#targetHint, #challengeBanner { position: absolute; left: 10px; right: 10px; bottom: 40px; padding: 8px 10px; border-radius: 10px; font-size: var(--fs-s); line-height: 1.5; text-align: center; pointer-events: none; }
#targetHint { background: #3a2f1fee; border: 1px solid var(--gold); color: var(--gold); }
#challengeBanner { background: #211a30ee; border: 1px solid #b78afa99; color: #ece4ff; }
#challengeBanner.done { border-color: var(--cyan); color: var(--cyan); }
#challengeBanner.failed { border-color: #8a6a6a; color: #e0c0c0; }

/* skills and the two main buttons under the culture */
.skill-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.skill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 4px 6px; border-radius: 10px; }
.skill strong { font-size: var(--fs-m); font-weight: 600; }
.skill small { font-size: var(--fs-xs); color: var(--muted); }
.skill.ready { border-color: #62ddcb80; color: var(--cyan); }
.skill.targeting { border-color: var(--gold); background: #3a2f1f; color: var(--gold); }
.toolbar { display: grid; grid-template-columns: .9fr 1.3fr; gap: 8px; margin-top: 8px; }
.toolbar button { min-height: 54px; font-size: var(--fs-l); white-space: nowrap; }
.toolbar #ascendBtn { display: flex; flex-direction: column; gap: 2px; justify-content: center; align-items: center; }
.toolbar small { font-size: var(--fs-xs); color: var(--muted); }
#labBtn { position: relative; }
#labBtn.unread::after { content: ''; position: absolute; top: 7px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
#ascendBtn.ready { border-color: #e7bd75; background: #34291e; color: var(--gold); }
#ascendBtn.ready.fading { animation: fadePulse 1.2s ease-in-out infinite; }
@keyframes fadePulse { 50% { box-shadow: 0 0 0 3px #e7bd7555; } }
@media (prefers-reduced-motion: reduce) { #ascendBtn.ready.fading { animation: none; } }
#rewardHint { display: block; line-height: 1.55; font-size: var(--fs-xs); margin-top: 6px; color: var(--muted); }

/* laboratory panel: tabs scroll sideways when they do not fit; each tab's content scrolls */
#labPanel { border: 1px solid var(--edge); border-radius: 14px; background: #08171ee6; display: flex; flex-direction: column; min-height: 0; max-height: calc(100svh - 168px); overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; font-size: var(--fs-xs); letter-spacing: .18em; color: var(--muted); }
#closeLab { display: none; padding: 4px 12px; font-size: 22px; line-height: 1; }
.tabs { display: flex; gap: 4px; padding: 0 12px 10px; border-bottom: 1px solid var(--edge); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; flex: 1 0 auto; padding: 9px 12px; font-size: var(--fs-m); background: transparent; border-color: transparent; white-space: nowrap; scroll-snap-align: start; }
.tabs button.active { color: var(--cyan); border-color: #62ddcb55; background: #123039; }
.tabs button.unread::after { content: ''; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.tabs.fade-right { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.tabs.fade-left { mask-image: linear-gradient(90deg, transparent, #000 15%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%); }
.tabs.fade-left.fade-right { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.tab-content {
  padding: 14px 18px 18px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1; scrollbar-width: thin; scrollbar-color: #35535c transparent;
  /* scroll shadows: a soft edge appears at the top/bottom while more content is out of view */
  background: linear-gradient(#08171e 30%, #08171e00) top / 100% 24px no-repeat local, linear-gradient(#08171e00, #08171e 70%) bottom / 100% 24px no-repeat local,
    radial-gradient(farthest-side at 50% 0, #000a, #0000) top / 100% 10px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, #000a, #0000) bottom / 100% 10px no-repeat scroll;
}
.hint { color: var(--muted); font-size: var(--fs-m); line-height: 1.75; margin: 0 0 12px; }
.note { font-size: var(--fs-s); color: var(--muted); line-height: 1.75; }
h2 { font-size: var(--fs-l); font-weight: 700; margin: 22px 0 10px; color: var(--gold); letter-spacing: .02em; }
h2:first-child { margin-top: 0; }
.sticky-head { position: sticky; top: -14px; z-index: 2; margin: 0 -18px 12px; padding: 10px 18px; background: #08171ef7; border-bottom: 1px solid var(--edge); }

/* ---- cards and rows ---------------------------------------------------------------------- */
.buy-card { display: block; width: 100%; text-align: left; margin-bottom: 10px; padding: 13px 15px; border-radius: 11px; background: #10212a; }
.buy-card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.buy-card strong { font-size: var(--fs-l); }
.buy-card b { font-size: var(--fs-m); color: var(--gold); white-space: nowrap; }
.buy-card small { display: block; color: var(--muted); font-size: var(--fs-s); line-height: 1.65; margin-top: 5px; }
.buy-card small.extra { font-size: var(--fs-xs); color: var(--dim); }
.buy-card .preview { display: block; font-size: var(--fs-s); margin-top: 4px; color: #a6ebdf; }
.buy-card .preview.down { color: #f2a6a6; }
.buy-card.can-buy { border-color: #62ddcb70; }
.buy-card[data-tip] .row strong::after { content: ' ⓘ'; font-size: var(--fs-xs); color: var(--dim); font-weight: 400; }
.gene-card { border-left: 3px solid #718e98; }
.gene-card.eliteProd { border-left-color: #ed7171; }
.gene-card.eliteMove { border-left-color: #5fbbec; }
.gene-card.eliteMutation { border-left-color: #b78afa; }
.gene-card.research { border-left-color: var(--gold); }
.summary { display: flex; justify-content: space-between; border-top: 1px solid var(--edge); padding: 15px 0; margin-top: 10px; font-size: var(--fs-m); color: var(--muted); }
.summary b { color: var(--cyan); }
.auto-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--edge); padding: 11px 0; gap: 10px; font-size: var(--fs-m); }
.auto-row button { font-size: var(--fs-s); padding: 7px 11px; }
.auto-row small { color: var(--muted); font-size: var(--fs-xs); }
.switch { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: var(--fs-m); color: var(--muted); }
.form-row { display: flex; gap: 8px; margin: 15px 0; }
.form-row select { flex: 1; }
.form-row input { width: 100px; }
#genomeBtn { width: 100%; color: var(--gold); margin: 12px 0; font-size: var(--fs-l); padding: 12px; }
#genomeConditions div { font-size: var(--fs-m); padding: 9px 11px; background: #10212a; margin: 6px 0; border-radius: 8px; }
#genomeConditions .met { color: var(--cyan); }
.preset-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; font-size: var(--fs-s); }
.preset-row span { flex: 1; color: var(--muted); }
#rateChart { width: 100%; height: 110px; background: #10212a; border-radius: 8px; }
.dist-row { display: flex; align-items: center; gap: 10px; margin: 9px 0; font-size: var(--fs-xs); }
.dist-row > span { width: 92px; }
.dist-bars { display: flex; align-items: flex-end; height: 28px; gap: 2px; flex: 1; }
.dist-bars i { flex: 1; background: #5fc4b5; min-height: 1px; border-radius: 2px; }
.dist-row small { width: 52px; text-align: right; color: var(--muted); }
#eventLog { padding-left: 18px; font-size: var(--fs-s); line-height: 1.8; color: var(--muted); }
#crossCounts { font-size: var(--fs-s); color: var(--muted); }
.encyclopedia-entry { font-size: var(--fs-s); line-height: 1.75; border-bottom: 1px solid var(--edge); padding: 10px 0; color: var(--muted); }

/* purchase feedback and bulk buying */
.bulk-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-s); color: var(--muted); }
.bulk-row button { padding: 6px 13px; font-size: var(--fs-s); }
.bulk-row button.chosen { color: var(--cyan); border-color: #62ddcb80; background: #123039; }
.bought { animation: bought .45s ease-out; }
@keyframes bought { 0% { box-shadow: 0 0 0 0 #f3cb82aa; } 40% { transform: scale(1.012); } 100% { box-shadow: 0 0 0 9px #f3cb8200; transform: scale(1); } }
.pop { position: fixed; pointer-events: none; color: var(--gold); font-weight: 800; font-size: var(--fs-l); text-shadow: 0 1px 3px #000; animation: popUp .9s ease-out forwards; z-index: 30; }
@keyframes popUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-26px); } }
@media (prefers-reduced-motion: reduce) { .bought, .pop { animation: none; } }

/* ---- layer 3: habitats, cells, species, notes, ending --------------------------------------- */
.habitat-card { border-left: 3px solid var(--habitat, #718e98); }
.habitat-card.chosen { border-color: var(--gold); background: #2a2418; }
.habitat-card.done b { color: var(--cyan); }
.habitat-now { border: 1px solid var(--edge); border-radius: 11px; padding: 12px 14px; margin-bottom: 12px; font-size: var(--fs-s); line-height: 1.75; color: var(--muted); }
.habitat-now strong { color: var(--ink); font-size: var(--fs-l); }
.goal-bar { height: 7px; border-radius: 4px; background: #1c3039; margin-top: 7px; overflow: hidden; }
.goal-bar i { display: block; height: 100%; background: var(--habitat, var(--cyan)); }
.cell-card.on { border-color: var(--cyan); background: #0f2a2c; }
.cell-card.locked { opacity: .6; }
.species-row { font-size: var(--fs-s); color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--edge); }
.species-row strong { color: var(--ink); }
.note-entry { font-size: var(--fs-m); line-height: 1.85; color: #c3d3d7; border-bottom: 1px solid var(--edge); padding: 12px 0; }
.note-entry strong { color: var(--gold); display: block; font-size: var(--fs-m); margin-bottom: 2px; }
/* The predecessor's letters: warm paper tones and the mark in place of a signature. */
.note-entry.letter { border-left: 3px solid #d9c08a88; padding-left: 12px; color: #e3d8c0; }
.note-entry.letter strong { color: #ecd9ae; }
.note-entry .mark, #messageMark { display: block; text-align: right; }
.note-entry .mark svg { width: 22px; height: 22px; fill: none; stroke: #d9c08a; stroke-width: 1.6; stroke-linecap: round; }
.letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.letter-card { display: flex; flex-direction: column; gap: 3px; text-align: left; border: 1px solid var(--edge); border-radius: 10px; padding: 9px 11px; background: #0b1a22; font-size: var(--fs-s); }
.letter-card span { font-weight: 700; color: #cbbd9b; }
.letter-card small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.letter-card.sealed { opacity: .7; }
.letter-card.ready { border-color: #d9c08a; background: #1d1a12; cursor: pointer; }
.letter-card.ready span { color: #f0dca8; }
.letter-card.ready b { margin-top: 2px; color: #071218; background: #d9c08a; border-radius: 6px; padding: 2px 8px; align-self: flex-start; font-size: var(--fs-xs); }
#messageDialog.letter { background: #e9e0ca; color: #2b241a; border-color: #b9a77f; font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif; }
#messageDialog.letter h2 { color: #5d4727; font-size: var(--fs-l); }
#messageDialog.letter #messageBody { font-size: var(--fs-l); line-height: 2; color: #2b241a; }
#messageDialog.letter button { background: #d9cba6; color: #2b241a; border-color: #a8946a; }
#messageMark svg { width: 30px; height: 30px; fill: none; stroke: #6d5430; stroke-width: 1.6; stroke-linecap: round; }
#startOverlay .title-chapter { display: block; margin-top: 8px; font-size: var(--fs-s); color: #8fb3b8; }
.note-entry em { font-style: normal; font-size: var(--fs-xs); color: #071218; background: var(--gold); border-radius: 4px; padding: 1px 6px; margin-left: 8px; }
.note-chapter { display: flex; justify-content: space-between; font-size: var(--fs-m); font-weight: 600; color: var(--gold); margin: 18px 0 2px; border-bottom: 1px solid var(--edge); padding-bottom: 6px; }
.note-chapter small { color: var(--muted); font-weight: 400; font-size: var(--fs-s); }
.objective { padding: 13px 15px; border: 1px solid #62ddcb55; border-radius: 11px; background: #10262c; font-size: var(--fs-s); color: var(--muted); line-height: 1.7; }
.objective small { display: block; color: var(--gold); font-size: var(--fs-xs); letter-spacing: .06em; }
.objective strong { display: block; color: var(--ink); font-size: var(--fs-l); margin: 3px 0 6px; }
.objective .bar { display: block; height: 5px; background: #1c3039; border-radius: 3px; overflow: hidden; margin: 4px 0 8px; }
.objective .bar i { display: block; height: 5px; background: var(--cyan); }
.objective p { margin: 2px 0; }
#endingOverlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: #020a0fcc; padding: 16px; overflow-y: auto; }
.ending-card { max-width: 480px; width: 100%; background: #0b1a22; border: 1px solid #62ddcb70; border-radius: 16px; padding: 28px; text-align: center; box-shadow: 0 0 60px #62ddcb30; }
.ending-card h2 { font-size: 30px; letter-spacing: .1em; color: var(--cyan); margin: 6px 0 14px; }
.ending-kicker { font-size: var(--fs-xs); letter-spacing: .2em; color: var(--gold); margin: 0; }
#endingText { font-size: var(--fs-l); line-height: 1.95; color: var(--ink); white-space: pre-line; }
#endingStats { display: grid; grid-template-columns: auto auto; gap: 5px 16px; justify-content: center; font-size: var(--fs-m); color: var(--muted); margin: 16px 0; }
#endingStats dd { margin: 0; color: var(--ink); text-align: left; }
#endingStats dt { text-align: right; }
.credits { font-size: var(--fs-s); color: var(--muted); line-height: 1.8; margin: 14px 0; }

/* ---- experiments -------------------------------------------------------------------------- */
.challenge-card { border: 1px solid var(--edge); border-left: 3px solid #b78afa; border-radius: 11px; padding: 13px 15px; margin-bottom: 10px; background: #10212a; font-size: var(--fs-s); line-height: 1.75; color: var(--muted); }
.challenge-card.locked { opacity: .6; }
.challenge-card.running { border-color: var(--gold); }
.challenge-card .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.challenge-card strong { font-size: var(--fs-l); color: var(--ink); }
.challenge-card .stars { color: var(--gold); letter-spacing: .1em; font-size: var(--fs-l); }
.challenge-card button { margin-top: 8px; font-size: var(--fs-s); padding: 7px 12px; }

/* ---- research tree: three branches side by side, scrolled sideways when the panel is narrow ---- */
.tree-scroll { overflow-x: auto; margin: 0 -4px 10px; padding: 0 4px 6px; scrollbar-width: thin; scrollbar-color: #35535c transparent; }
.core-tree { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 10px; min-width: 690px; }
.core-tree .trunk { grid-column: 1 / -1; }
.tree-branch h3 { font-size: var(--fs-m); letter-spacing: .08em; color: var(--gold); margin: 6px 0 6px; }
.tree-tier { font-size: var(--fs-xs); color: var(--muted); margin: 10px 0 5px; }
.tree-tier.closed { color: #7a8d93; }
.tree-group { border: 1px dashed #8a7a55; border-radius: 11px; padding: 8px 8px 0; margin-bottom: 10px; }
.tree-group > small { display: block; font-size: var(--fs-xs); color: var(--gold); margin-bottom: 5px; }
.core-node { padding: 11px 12px; }
.core-node strong { font-size: var(--fs-m); }
.core-node b { font-size: var(--fs-s); }
.core-node.blocked, .core-node.closed { opacity: .55; }
.core-node.owned { border-color: #62ddcb70; }
#respecBtn { font-size: var(--fs-s); margin: 6px 0 10px; }
.tree-hint-scroll { display: none; font-size: var(--fs-xs); color: var(--dim); margin: 0 0 6px; }

/* ---- codex and achievements --------------------------------------------------------------- */
.dex-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dex-seg button { font-size: var(--fs-m); padding: 8px 4px; }
.dex-seg button.active { color: var(--cyan); border-color: #62ddcb70; background: #123039; }
#dexSummary { margin: 8px 0 0; font-size: var(--fs-s); }
.dex-cat { display: flex; justify-content: space-between; font-size: var(--fs-m); font-weight: 600; color: var(--gold); margin: 20px 0 4px; border-bottom: 1px solid var(--edge); padding-bottom: 6px; }
.dex-cat small { color: var(--muted); font-weight: 400; font-size: var(--fs-s); }
.ach { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid #1b333d; font-size: var(--fs-s); color: var(--muted); }
.ach strong { color: var(--ink); font-size: var(--fs-m); font-weight: 600; }
.ach.earned strong { color: var(--gold); }
.ach .mark { color: #6a858d; } .ach.earned .mark { color: var(--gold); }
.ach .bar { display: block; height: 4px; background: #1c3039; border-radius: 2px; margin-top: 5px; overflow: hidden; }
.ach .bar i { display: block; height: 4px; background: var(--cyan); }
.ach small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.stain-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.stain-row button { font-size: var(--fs-s); padding: 7px 10px; display: flex; align-items: center; gap: 6px; }
.stain-row button.chosen { border-color: var(--gold); color: var(--gold); }
.stain-row i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.trait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.trait-card { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--edge); border-radius: 10px; background: #10212a; font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }
.trait-card canvas { width: 52px; height: 52px; }
.trait-card strong { display: block; color: var(--ink); font-size: var(--fs-m); }
.trait-card.r1 { border-color: #5fae7a80; } .trait-card.r2 { border-color: #e7bd7590; } .trait-card.r3 { border-color: #ff9ef0a0; }
.trait-card.unknown { opacity: .65; }
.trait-card .rar { font-size: var(--fs-xs); }
.trait-card p { margin: 3px 0 0; font-size: var(--fs-xs); }
.species-card { padding: 12px 14px; border: 1px solid var(--edge); border-left: 3px solid var(--habitat, #718e98); border-radius: 10px; background: #10212a; margin-bottom: 8px; font-size: var(--fs-s); line-height: 1.75; color: var(--muted); }
.species-card strong { color: var(--ink); font-size: var(--fs-l); }
.species-card.unknown { opacity: .65; }

/* ---- overlays: toast, dialogs, coach, tooltip, title, other tab -------------------------- */
/* toasts sit bottom-right on wide screens so they never cover the culture's buttons */
#toast { position: fixed; bottom: 22px; right: 22px; background: #15353bf2; border: 1px solid #5eaeab; padding: 13px 20px; border-radius: 11px; font-size: var(--fs-m); line-height: 1.6; max-width: min(480px, 46vw); z-index: 20; white-space: pre-line; box-shadow: 0 6px 20px #0008; }
body.coaching #toast { top: 14px; bottom: auto; }
dialog { background: #0c1b24; color: var(--ink); border: 1px solid #557780; border-radius: 15px; padding: 24px 26px; max-width: min(480px, 92vw); max-height: 86vh; overflow: auto; }
dialog::backdrop { background: #000a; }
dialog h2 { font-size: var(--fs-xl); }
dialog p { white-space: pre-line; color: #c3d3d7; line-height: 1.85; font-size: var(--fs-m); }
#messageActions, .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.import-label { display: inline-block; cursor: pointer; padding: 9px 13px; border: 1px solid var(--edge); border-radius: 9px; font-size: var(--fs-s); }
.import-label input { display: none; }
#settingsDialog, #glossaryDialog { width: min(520px, 92vw); }
#settingsDialog h3 { font-size: var(--fs-m); color: var(--gold); margin: 16px 0 6px; letter-spacing: .06em; }
#settingsDialog section { border-top: 1px solid var(--edge); padding-top: 4px; }
.field { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; font-size: var(--fs-m); color: var(--muted); }
.field select { max-width: 64%; }
.volume { display: flex; align-items: center; gap: 12px; margin: 10px 0; font-size: var(--fs-m); color: var(--muted); }
.volume input { flex: 1; accent-color: var(--cyan); }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.button-row button, .button-row .import-label { font-size: var(--fs-s); margin: 0; }
button.danger { color: #f4aaaa; border-color: #7a4444; }
#glossaryList { margin: 0; font-size: var(--fs-m); line-height: 1.75; }
#glossaryList dt { color: var(--gold); margin-top: 14px; font-weight: 700; }
#glossaryList dd { margin: 3px 0 0; color: #c3d3d7; }
.glossary-tip { font-size: var(--fs-s); color: var(--muted); margin: 0 0 6px; }
#coach { position: fixed; z-index: 25; width: min(340px, calc(100vw - 24px)); padding: 14px 16px; border-radius: 12px; background: #132b33f8; border: 1px solid var(--gold); box-shadow: 0 8px 30px #000a; font-size: var(--fs-m); line-height: 1.8; color: var(--ink); }
#coach p { margin: 0 0 10px; }
#coach::after { content: ''; position: absolute; left: var(--arrow, 50%); width: 12px; height: 12px; background: #132b33; border: 1px solid var(--gold); transform: translateX(-50%) rotate(45deg); }
#coach.below::after { top: -7px; border-right: 0; border-bottom: 0; }
#coach.above::after { bottom: -7px; border-left: 0; border-top: 0; }
#coach.free::after { display: none; }
.coach-actions { display: flex; justify-content: space-between; gap: 8px; }
.coach-actions button { font-size: var(--fs-s); padding: 7px 12px; }
#coachNext { color: var(--gold); border-color: #e7bd7599; }
.coach-target { outline: 2px solid var(--gold) !important; outline-offset: 3px; animation: coachPulse 1.2s ease-in-out infinite; }
@keyframes coachPulse { 50% { outline-color: #e7bd7540; } }
@media (prefers-reduced-motion: reduce) { .coach-target { animation: none; } }
#tooltip { position: fixed; z-index: 60; max-width: min(340px, calc(100vw - 24px)); padding: 10px 13px; border-radius: 10px; background: #0f242cf8; border: 1px solid #62ddcb70; box-shadow: 0 8px 24px #000b; color: var(--ink); font-size: var(--fs-s); line-height: 1.75; white-space: pre-line; pointer-events: none; }
[data-tip] { -webkit-touch-callout: none; }
.hud [data-tip], .progress [data-tip] { cursor: help; }
#startOverlay { position: fixed; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; background: radial-gradient(ellipse at 50% 40%, #0c2a33b8, #030a0fe6 72%); backdrop-filter: blur(1.5px); }
.title-card { text-align: center; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.title-icon { width: 120px; height: 120px; border-radius: 28px; box-shadow: 0 0 40px #f3cb8233; animation: titleFloat 6s ease-in-out infinite; }
@keyframes titleFloat { 50% { transform: translateY(-6px); } }
#startOverlay .title-logo { margin: 10px 0 0; font-size: clamp(28px, 8.4vw, 44px); white-space: nowrap; font-weight: 800; letter-spacing: .1em; background: linear-gradient(180deg, #fff3d6, #e7bd75); -webkit-background-clip: text; background-clip: text; color: transparent; }
#startOverlay .title-sub { margin: 0; font-size: var(--fs-s); letter-spacing: .42em; color: #8cc3bf; }
#startOverlay #startHint { margin: 16px 0 6px; font-size: var(--fs-l); line-height: 1.9; color: #d3e3e3; }
#startOverlay #startBtn { font-size: 18px; padding: 14px 44px; margin-top: 6px; border-color: #62ddcb60; background: #102e34; color: var(--cyan); font-weight: 750; letter-spacing: .05em; }
#startOverlay .title-foot { margin: 16px 0 0; font-size: var(--fs-xs); line-height: 1.85; color: #7d9da3; }
@media (prefers-reduced-motion: reduce) { .title-icon { animation: none; } }
#tabOverlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: #030a0ff2; }
#tabOverlay .tab-title { font-size: 21px; font-weight: 800; color: var(--gold); margin: 0 0 8px; }
#tabOverlay p { color: #d3e3e3; font-size: var(--fs-m); line-height: 1.85; margin: 0 0 16px; }

/* ---- phones and narrow windows --------------------------------------------------------- */
@media (max-width: 740px) {
  :root { --stage-width: min(100%, calc((100svh - 290px) * .84375)); }
  #app { padding: 10px 12px; max-width: 480px; }
  .topbar { gap: 6px; }
  .topbar h1 { font-size: clamp(13px, 4.3vw, 16px); letter-spacing: 0; } /* the title is 8 characters: it shrinks before the buttons do */
  .topbar button { padding: 6px 8px; }
  .topbar h1 small { display: none; }
  .topbar a { font-size: var(--fs-xs); }
  .topbar button { padding: 7px 9px; }
  .hud { gap: 6px; }
  .hud > div { display: flex; flex-direction: column; align-items: flex-start; padding: 8px 10px; }
  .hud strong { font-size: 22px; }
  .hud small { display: none; } /* in the tooltip instead */
  .progress { gap: 8px; flex-wrap: wrap; }
  #nextUnlock { flex: 1 1 100%; }
  #layout { display: block; }
  #cultureColumn { width: min(100%, var(--stage-width)); margin: auto; }
  #labPanel { display: none; position: fixed; inset: 8px; max-height: calc(100svh - 16px); z-index: 10; background: #08171efc; }
  #labPanel.open { display: flex; }
  #closeLab { display: block; }
  .panel-header { padding-top: 10px; }
  .tab-content { padding: 14px 14px 18px; }
  .sticky-head { margin: 0 -14px 12px; padding: 10px 14px; }
  .tabs { padding: 0 8px 8px; }
  .tabs button { flex: 0 0 auto; padding: 9px 12px; }
  .core-tree { grid-template-columns: 1fr; min-width: 0; }
  /* phones: at the top over the culture's HUD (the buttons are at the bottom); at the bottom while the laboratory is open */
  #toast { top: 64px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); max-width: 92vw; }
  body.lab-open #toast { top: auto; bottom: 14px; }
}
@media (max-width: 460px) { .topbar a { display: none; } } /* phones: the title and the buttons need the whole bar */
@media (max-width: 340px) { .topbar button { padding: 6px 6px; font-size: var(--fs-xs); } }
@media (max-width: 380px) {
  .toolbar button { font-size: var(--fs-m); padding: 9px 6px; }
  .hud strong { font-size: 20px; }
}
/* not very tall: the footer and the reward line go (the reward is in the ascension button's tooltip) */
@media (max-height: 760px) { footer, #rewardHint { display: none; } :root { --stage-width: min(460px, calc((100svh - 290px) * .84375)); } }
@media (max-height: 760px) and (max-width: 740px) { :root { --stage-width: min(100%, calc((100svh - 255px) * .84375)); } }
/* short screens: keep everything at a readable size, give up spacing and the decorative labels instead */
@media (max-height: 570px) {
  :root { --stage-width: min(360px, calc((100svh - 230px) * .84375)); }
  .topbar { margin-bottom: 6px; }
  .hud > div { padding: 5px 10px; }
  .hud strong { font-size: 19px; }
  .progress { margin: 6px 0 8px; }
  .skill { min-height: 38px; }
  .skill small { display: none; }
  .toolbar button { min-height: 42px; }
  #rewardHint { display: none; } /* the same information is in the ascension button's tooltip */
  #labPanel { max-height: calc(100svh - 130px); }
  #eventBanner { top: 10px; padding: 5px 8px; }
  #challengeBanner, #targetHint { bottom: 30px; padding: 5px 8px; }
}
/* short, wide screens (landscape phones, small windows): controls sit beside the stage so the culture stays readable */
@media (max-height: 600px) and (min-aspect-ratio: 5/4) {
  :root { --stage-width: min(340px, calc((100svh - 140px) * .84375)); }
  .hud > div { padding: 3px 10px; }
  .hud strong { font-size: 17px; }
  .hud small { display: none; }
  .progress { margin: 4px 0 6px; }
  #layout { grid-template-columns: auto minmax(300px, 1fr); }
  #cultureColumn { display: grid; grid-template-columns: var(--stage-width) 150px; grid-template-rows: auto auto 1fr; column-gap: 8px; align-content: start; width: auto; margin: 0; }
  #layout { justify-content: start; }
  #stageWrap { grid-row: 1 / span 3; align-self: start; }
  #layout { grid-template-columns: auto minmax(300px, 1fr); }
  .skill-bar { grid-template-columns: 1fr; margin-top: 0; gap: 4px; }
  .toolbar { grid-template-columns: 1fr; margin-top: 6px; }
  #startOverlay #startBtn { padding: 9px 18px; font-size: var(--fs-l); }
  #labPanel { max-height: calc(100svh - 90px); }
  footer { display: none; }
}