@charset "UTF-8";

/* ============================================================
   WILDNUTRI PRO PUGGLE: APP STYLESHEET
   Built on the WildNutri Pro design system. Same tokens, same
   fonts, same marble treatment. Puggle-specific components only
   are defined here; everything else inherits.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  --bg:#090c08; --surface:#0f130d; --card:#141a11; --card-hover:#1a2216;
  --border:#243020; --border-bright:#3a4e34;
  --accent:#7dcc70; --accent-bright:#a3e898; --accent-dim:#4d8a44;
  --accent-glow:rgba(125,204,112,.09); --accent-glow-md:rgba(125,204,112,.13);
  --gold:#d4aa4e; --gold-bright:#f0ca6e; --gold-dim:rgba(212,170,78,.12);
  --red:#d46060; --red-dim:rgba(212,96,96,.11);
  --orange:#d4804e; --blue:#5b9bd5; --teal:#4ec9b0; --purple:#b57fd4;
  --text-white:#f0ede4; --text-primary:#d8d3be; --text-secondary:#9aa892; --text-muted:#5a6a52;
  --diff-beginner:#4d8a44; --diff-inter:#d4aa4e; --diff-advanced:#d46060;
  --space-xs:4px; --space-sm:8px; --space-md:14px; --space-lg:22px; --space-xl:32px;
  --radius-sm:3px; --radius-md:7px; --radius-lg:10px; --radius-xl:14px; --radius-hero:16px;
  --transition-fast:.12s ease; --transition-base:.15s ease;
  --shadow-sm:0 2px 10px rgba(0,0,0,.28); --shadow-md:0 4px 28px rgba(0,0,0,.45);
  --shadow-lg:0 10px 50px rgba(0,0,0,.65); --shadow-nav:0 2px 24px rgba(0,0,0,.6);
  --inset-glow-sm:inset 0 1px 0 rgba(125,204,112,.08);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body { background:var(--bg); color:var(--text-primary);
       font-family:'EB Garamond',Georgia,serif; font-size:14px; line-height:1.6;
       min-height:100vh; -webkit-font-smoothing:antialiased; padding-bottom:80px; }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3 { font-family:'Playfair Display',Georgia,serif; font-weight:400;
           color:var(--text-white); line-height:1.2; }
h1 { font-size:clamp(22px,4.5vw,32px); }
h2 { font-size:19px; }
h3 { font-size:15px; color:var(--accent-bright); }
.label { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--text-muted);
         letter-spacing:.22em; text-transform:uppercase; }
.mono { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-secondary); }
.data { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--accent); }
.latin { font-style:italic; font-size:13px; color:var(--text-secondary); }
.muted { color:var(--text-muted); } .secondary { color:var(--text-secondary); }

/* ── marble ─────────────────────────────────────────────── */
@keyframes marbleShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes glowPulse { 0%,100%{opacity:.75} 50%{opacity:1} }
.marble-banner {
  background:linear-gradient(127deg,#0c1809 0%,#162213 18%,#1e2e18 28%,#111d0e 40%,
             #192714 55%,#0d180a 68%,#1b2a16 80%,#101a0d 100%);
  background-size:300% 300%; animation:marbleShift 16s ease infinite;
  position:relative; overflow:hidden; }
.marble-banner::before { content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(ellipse 65% 45% at 22% 28%,rgba(125,204,112,.14) 0%,transparent 65%),
             radial-gradient(ellipse 45% 55% at 80% 72%,rgba(212,170,78,.09) 0%,transparent 58%);
  pointer-events:none; animation:glowPulse 7s ease-in-out infinite; }
.marble-section {
  background:linear-gradient(112deg,#121a0f 0%,#18220f 35%,#141d0f 60%,#1b2614 100%);
  background-size:200% 200%; animation:marbleShift 22s ease infinite;
  position:relative; overflow:hidden; }

/* ── layout ─────────────────────────────────────────────── */
.wrap { max-width:620px; margin:0 auto; padding:0 var(--space-md); }
.nav { position:sticky; top:0; z-index:100; box-shadow:var(--shadow-nav);
       border-bottom:1px solid var(--border); }
.nav-inner { display:flex; align-items:center; justify-content:space-between;
             padding:12px var(--space-md); max-width:620px; margin:0 auto; position:relative; z-index:2; }
.brand { line-height:1.15; }
/* WildNutri Pro is the business and leads the lockup. Puggle sits beneath it
   as the product, in a single colour: no split-colour wordmark. */
.business { font-family:'Playfair Display',serif; font-size:19px; color:var(--text-white);
            letter-spacing:.01em; }
.wordmark { font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--accent);
            letter-spacing:.34em; text-transform:uppercase; margin-top:4px; }
.screen { display:none; padding-top:var(--space-lg); }
.screen.active { display:block; }

/* ── cards ──────────────────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--border);
        border-radius:var(--radius-lg); padding:var(--space-lg); box-shadow:var(--shadow-sm); }
.card-surface { background:var(--surface); border:1px solid var(--border);
                border-radius:var(--radius-md); padding:12px 14px; }
.card + .card, .card-surface + .card-surface { margin-top:var(--space-md); }
.section-head { display:flex; align-items:baseline; justify-content:space-between;
                margin:var(--space-xl) 0 var(--space-sm); }

/* ── buttons ────────────────────────────────────────────── */
.btn { font-family:'EB Garamond',serif; font-size:14px; padding:9px 15px;
       background:var(--card); color:var(--text-primary);
       border:1px solid var(--border-bright); border-radius:var(--radius-md);
       cursor:pointer; transition:all var(--transition-base); }
.btn:hover { background:var(--card-hover); border-color:var(--accent-dim); color:var(--text-white); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn:disabled { opacity:.35; cursor:default; }
.btn-primary { background:var(--accent-dim); border-color:var(--accent);
               color:var(--text-white); box-shadow:var(--inset-glow-sm); }
.btn-primary:hover { background:var(--accent); color:#0b1109; }
.btn-ghost { background:transparent; border-color:var(--border); }
.btn-row { display:flex; flex-wrap:wrap; gap:var(--space-sm); }
.btn-sm { font-size:12.5px; padding:6px 11px; }

/* ── badges ─────────────────────────────────────────────── */
.badge { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.14em;
         text-transform:uppercase; padding:3px 7px; border-radius:var(--radius-sm);
         border:1px solid currentColor; }
.badge-beginner { color:var(--diff-beginner); } .badge-intermediate { color:var(--diff-inter); }
.badge-advanced { color:var(--diff-advanced); }
.badge-solid { background:var(--gold-dim); color:var(--gold); border-color:transparent; }

/* ── the enclosure window ───────────────────────────────── */
.enclosure { position:relative; width:100%; aspect-ratio:1/1;
             border:1px solid var(--border-bright); border-radius:var(--radius-xl);
             overflow:hidden; box-shadow:var(--shadow-lg), inset 0 0 60px rgba(0,0,0,.55); }
.enclosure .habitat { position:absolute; inset:0; }
.enclosure .animal { position:absolute; inset:0; display:flex; align-items:flex-end;
                     justify-content:center; padding:6% 12% 8%; }
.enclosure .animal img { max-height:100%; width:auto; filter:drop-shadow(0 12px 18px rgba(0,0,0,.45)); }
.enclosure .weather-tint { position:absolute; inset:0; pointer-events:none; transition:background .9s; }
.enclosure .vignette { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 75% 65% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%); }
/* QA153: THE TWO CHIPS WERE OVERLAPPING ON A PHONE.
   Both were absolutely positioned, so on a narrow screen the right-hand chip
   sat on top of the end of the left one: "0 DAYS · 1[0GOOD]", "14C[14C AIR]",
   "19.[SETTLED]". They are one strip now, laid out side by side, so the left
   chip gives up room instead of being covered. */
.enclosure .chipbar { position:absolute; top:10px; left:10px; right:10px; z-index:3;
  display:flex; gap:6px; align-items:flex-start; justify-content:space-between;
  pointer-events:none; }
/* QA216 - THE ALLOCATE CHIP COULD NEVER BE CLICKED.
   The bar is deliberately click-through so it does not block the enclosure,
   and the chips inherited that. The handler was attached and correct; the
   pointer simply never reached it. A chip that is actionable takes its events
   back. The bar itself stays transparent to the pointer. */
.enclosure .chip.actionable { pointer-events:auto; cursor:pointer; }
.enclosure .chip.actionable:hover { border-color:var(--gold, #d6a13a);
  color:var(--text-white, #fff); }
.enclosure .chip { position:static;
  background:rgba(9,12,8,.78); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:4px 9px; font-family:'JetBrains Mono',monospace; font-size:9.5px;
  color:var(--text-secondary); letter-spacing:.1em; text-transform:uppercase;
  min-width:0; overflow:hidden; text-overflow:ellipsis; }
.enclosure .chip#chip-left { flex:1 1 auto; }
.enclosure .chip.right { flex:0 0 auto; white-space:nowrap; }
.enclosure .chip.alarm { color:var(--red); border-color:var(--red); }
.placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; gap:6px; color:var(--text-muted); text-align:center; }
.placeholder .glyph { font-family:'Playfair Display',serif; font-size:40px; color:var(--border-bright); }

/* ── vitals ─────────────────────────────────────────────── */
.vital { display:grid; grid-template-columns:88px 1fr 54px; align-items:center;
         gap:10px; margin-bottom:7px; }
.vital .label { font-size:8.5px; letter-spacing:.14em; }
.track { height:6px; background:#0a0e08; border:1px solid var(--border); border-radius:2px; overflow:hidden; }
.track i { display:block; height:100%; background:var(--accent); transition:width .45s ease; }
.track.low i { background:var(--gold); } .track.crit i { background:var(--red); }
.vital .val { font-family:'JetBrains Mono',monospace; font-size:10.5px;
              color:var(--text-secondary); text-align:right; }

/* ── husbandry controls ─────────────────────────────────── */
.control { margin-bottom:var(--space-md); }
.control-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.control-head .now { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--accent); }
.control-head .now.off { color:var(--red); }
.control .range-note { font-family:'JetBrains Mono',monospace; font-size:8.5px; color:var(--text-muted); }
input[type=range] { width:100%; accent-color:var(--accent); }
select { padding:8px 11px; background:var(--card); border:1px solid var(--border-bright);
         border-radius:var(--radius-md); color:var(--text-white);
         font-family:'EB Garamond',serif; font-size:13px; cursor:pointer; width:100%; }
.toggle { display:inline-flex; align-items:center; gap:7px; padding:7px 12px;
          background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md);
          cursor:pointer; font-size:13px; transition:all var(--transition-base); }
.toggle.on { border-color:var(--accent-dim); color:var(--text-white); background:var(--accent-glow); }
.toggle .dot { width:7px; height:7px; border-radius:50%; background:var(--text-muted); }
.toggle.on .dot { background:var(--accent); box-shadow:0 0 6px var(--accent); }

/* ── species grid ───────────────────────────────────────── */
.species-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.species-card { background:var(--card); border:1px solid var(--border);
                border-radius:var(--radius-lg); padding:12px; cursor:pointer;
                transition:all var(--transition-base); text-align:left; }
.species-card:hover { background:var(--card-hover); border-color:var(--border-bright);
                      transform:translateY(-1px); }
.species-card .nm { font-family:'Playfair Display',serif; font-size:14.5px;
                    color:var(--text-white); line-height:1.25; margin-bottom:2px; }
.species-card .meta { display:flex; justify-content:space-between; align-items:center; margin-top:9px; }

/* ── collection ─────────────────────────────────────────── */
.animal-row { display:flex; align-items:center; gap:12px; cursor:pointer;
              transition:all var(--transition-base); }
.animal-row:hover { background:var(--card-hover); }
.ring { width:44px; height:44px; border-radius:50%; flex:0 0 44px; display:grid; place-items:center;
        font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-white); }
.animal-row .grow { flex:1; min-width:0; }
.animal-row .nm { font-family:'Playfair Display',serif; font-size:16px; color:var(--text-white); }

/* ── log ────────────────────────────────────────────────── */
.log { max-height:260px; overflow-y:auto; }
.log p { font-size:13.5px; padding:6px 0 6px 11px; border-left:2px solid var(--border);
         margin-bottom:2px; color:var(--text-primary); }
.log p.alert,.log p.death,.log p.lesson { border-left-color:var(--red); }
.log p.weather,.log p.env,.log p.condition,.log p.health { border-left-color:var(--gold); }
.log p.stage,.log p.recover,.log p.birth,.log p.moult,.log p.success { border-left-color:var(--accent); }
.log p.care { border-left-color:var(--border-bright); color:var(--text-secondary); }

/* ── modal ──────────────────────────────────────────────── */
.overlay { position:fixed; inset:0; z-index:999; background:rgba(4,6,4,.86);
           display:none; align-items:center; justify-content:center; padding:var(--space-md); }
.overlay.open { display:flex; }
.modal { width:100%; max-width:520px; border-radius:var(--radius-hero);
         border:1px solid var(--border-bright); box-shadow:var(--shadow-lg); overflow:hidden; }
.modal-body { padding:var(--space-lg); position:relative; z-index:2;
              max-height:76vh; overflow-y:auto; }

/* ── bottom bar ─────────────────────────────────────────── */
.actionbar { position:fixed; bottom:0; left:0; right:0; z-index:90;
             border-top:1px solid var(--border); box-shadow:0 -2px 24px rgba(0,0,0,.6); }
.actionbar-inner { max-width:620px; margin:0 auto; padding:10px var(--space-md);
                   display:flex; gap:7px; overflow-x:auto; position:relative; z-index:2; }
.actionbar .btn { flex:0 0 auto; }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-bright); }


/* ============================================================
   WHOLE-IMAGE MOTION
   No cutting required. The entire PNG moves as one: breathing,
   drifting, bobbing, settling: chosen by pose and by whether the
   animal walks, swims or flies. Speed scales with welfare, so a
   declining animal visibly slows down.
   ============================================================ */

@keyframes mv-breathe { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-0.7%) scale(1.009)} }
@keyframes mv-sway    { 0%,100%{transform:translateY(0) rotate(-0.5deg)} 50%{transform:translateY(-0.9%) rotate(0.5deg)} }
@keyframes mv-bob     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2.2%)} }
@keyframes mv-nod     { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(1.3%) rotate(1.1deg)} }
@keyframes mv-settle  { 0%,100%{transform:scale(1); opacity:.93} 50%{transform:scale(1.011); opacity:1} }
@keyframes mv-drift   { 0%{transform:translate(0,0) rotate(0deg)} 25%{transform:translate(1.4%,-1.6%) rotate(0.7deg)}
                        50%{transform:translate(0,-2.6%) rotate(0deg)} 75%{transform:translate(-1.4%,-1.1%) rotate(-0.7deg)}
                        100%{transform:translate(0,0) rotate(0deg)} }
@keyframes mv-hover   { 0%,100%{transform:translateY(0) rotate(-0.4deg)} 50%{transform:translateY(-3.2%) rotate(0.4deg)} }

.mv { animation-iteration-count:infinite; animation-timing-function:ease-in-out;
      transform-origin:50% 92%; will-change:transform; }
.mv-idle-ground  { animation-name:mv-breathe; }
.mv-idle-water   { animation-name:mv-drift; }
.mv-idle-air     { animation-name:mv-hover; }
.mv-alert        { animation-name:mv-bob; }
.mv-eat          { animation-name:mv-nod; }
.mv-sleep        { animation-name:mv-settle; }
.mv-sick         { animation-name:mv-sway; }
.mv-enrichment   { animation-name:mv-bob; }
.mv-dead         { animation:none !important; }

/* background layers, when the art exists */
.bg-layer { position:absolute; inset:0; background-size:cover; background-position:center bottom;
            background-repeat:no-repeat; }
.bg-fore  { z-index:4; pointer-events:none; }

/* an enrichment item sitting in the enclosure */
.enrich-item { position:absolute; bottom:9%; right:11%; width:22%; z-index:3;
               filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));
               animation:mv-settle 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) { .mv { animation:none !important; } }


/* ============================================================
   WELCOME SCREEN
   ============================================================ */
.welcome { border-radius:var(--radius-hero); border:1px solid var(--border-bright);
           box-shadow:var(--shadow-lg); margin:var(--space-lg) auto 0; max-width:620px; }
.welcome-inner { position:relative; z-index:2; padding:44px 30px 38px; text-align:center; }
.welcome-title { font-size:clamp(26px,6vw,38px); line-height:1.15; margin-bottom:20px; }
.welcome-title span { color:var(--accent); }
.welcome-lede { font-family:'EB Garamond',serif; font-size:15.5px; line-height:1.85;
                color:var(--text-primary); max-width:440px; margin:0 auto 18px; }
.welcome-sub { font-family:'EB Garamond',serif; font-size:13.5px; line-height:1.8;
               color:var(--text-secondary); max-width:440px; margin:0 auto; font-style:italic; }
.welcome-cta { margin-top:28px; padding:12px 32px; font-size:15px; }
.welcome-foot { max-width:620px; margin:22px auto 0; padding:0 var(--space-md) 30px;
                text-align:center; font-family:'JetBrains Mono',monospace; font-size:9px;
                color:var(--text-muted); letter-spacing:.14em; text-transform:uppercase;
                line-height:2; }


/* ── ration builder ──────────────────────────────────────── */
.ration-row { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center;
              padding:8px 0; border-bottom:1px solid var(--border); }
.ration-row:last-child { border-bottom:none; }
.ration-row .nm { font-size:13.5px; color:var(--text-primary); line-height:1.3; }
.ration-row input[type=number] { width:74px; padding:5px 7px; background:var(--surface);
  border:1px solid var(--border-bright); border-radius:var(--radius-sm); color:var(--text-white);
  font-family:'JetBrains Mono',monospace; font-size:12px; text-align:right; }
.ration-row .rm { background:none; border:none; color:var(--text-muted); cursor:pointer;
                  font-size:16px; padding:0 4px; }
.ration-row .rm:hover { color:var(--red); }

.nut { display:grid; grid-template-columns:96px 1fr 96px; gap:9px; align-items:center; margin-bottom:9px; }
.nut .nm { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em;
           text-transform:uppercase; color:var(--text-secondary); }
.nut.crit .nm { color:var(--text-white); }
.nut .gauge { position:relative; height:8px; background:#0a0e08; border:1px solid var(--border);
              border-radius:2px; overflow:hidden; }
.nut .gauge .band { position:absolute; top:0; bottom:0; background:rgba(125,204,112,.16); }
.nut .gauge .mark { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--text-white); }
.nut .gauge .mark.low, .nut .gauge .mark.high { background:var(--red); }
.nut .val { font-family:'JetBrains Mono',monospace; font-size:10.5px; text-align:right; color:var(--text-secondary); }
.nut .val.low, .nut .val.high { color:var(--red); }
.nut .val.ok { color:var(--accent); }

.verdict { border-radius:var(--radius-lg); padding:14px 16px; margin-top:12px; border:1px solid; }
.verdict.critical { background:var(--red-dim); border-color:var(--red); }
.verdict.warn { background:var(--gold-dim); border-color:var(--gold); }
.verdict.good { background:var(--accent-glow); border-color:var(--accent-dim); }
.verdict h4 { font-family:'Playfair Display',serif; font-size:15px; margin-bottom:5px; }
.verdict.critical h4 { color:var(--red); } .verdict.warn h4 { color:var(--gold); }
.verdict.good h4 { color:var(--accent); }
.verdict p { font-size:13.5px; color:var(--text-primary); line-height:1.65; }

.ing-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
           padding:9px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.ing-row:hover { background:var(--card-hover); }
.ing-row .nm { font-size:13.5px; line-height:1.3; }
.ing-row .fl { font-family:'JetBrains Mono',monospace; font-size:8px; color:var(--gold);
               letter-spacing:.08em; text-transform:uppercase; }
.ing-row .add { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent); }


/* ============================================================
   ENCLOSURE TABS AND DRAWERS
   The animal stays on screen. Everything opens underneath it.
   ============================================================ */
.vitalstrip { background:var(--card); border:1px solid var(--border); border-top:none;
              border-radius:0 0 var(--radius-lg) var(--radius-lg); padding:14px 16px 8px; }
.tabs { display:flex; gap:4px; overflow-x:auto; margin-top:var(--space-md);
        padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.tab { flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em;
       text-transform:uppercase; padding:9px 13px; background:transparent; color:var(--text-muted);
       border:1px solid var(--border); border-bottom:none;
       border-radius:var(--radius-md) var(--radius-md) 0 0; cursor:pointer;
       transition:all var(--transition-base); }
.tab:hover { color:var(--text-secondary); background:var(--card); }
.tab.on { background:var(--card); color:var(--accent); border-color:var(--border-bright);
          box-shadow:var(--inset-glow-sm); }
.tab.alert { color:var(--red); }
.drawer { background:var(--card); border:1px solid var(--border-bright);
          border-radius:0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
          padding:var(--space-lg); min-height:120px; }
.drawer-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.cat-head { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.2em;
            text-transform:uppercase; color:var(--gold); margin:14px 0 4px; }
.search { width:100%; padding:9px 13px; background:var(--surface); border:1px solid var(--border-bright);
          border-radius:var(--radius-md); color:var(--text-white);
          font-family:'EB Garamond',serif; font-size:14px; margin-bottom:4px; }
.enrich-opt { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
              padding:11px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.enrich-opt:hover { background:var(--card-hover); }
.enrich-opt .nm { font-size:14px; color:var(--text-primary); }
.enrich-opt .fl { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.12em;
                  text-transform:uppercase; color:var(--text-muted); }
.enrich-opt .add { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent); }
.enclosure { border-radius:var(--radius-xl) var(--radius-xl) 0 0; }


/* ── ingredient drop-down ─────────────────────────────────── */
.ration-row { grid-template-columns:1fr auto auto; cursor:pointer; }
.ration-row .chev, .ing-row .add { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--accent); }
.ing-detail { background:var(--surface); border:1px solid var(--border-bright);
              border-radius:var(--radius-md); padding:14px; margin:6px 0 12px; }
.ing-detail-head { display:flex; align-items:center; gap:9px; margin-bottom:12px; flex-wrap:wrap; }
.ing-detail-head input { width:88px; padding:6px 9px; background:var(--card);
  border:1px solid var(--accent-dim); border-radius:var(--radius-sm); color:var(--text-white);
  font-family:'JetBrains Mono',monospace; font-size:13px; text-align:right; }
.ing-table { width:100%; border-collapse:collapse; }
.ing-table td { padding:5px 0; border-bottom:1px solid var(--border); font-size:13px; }
.ing-table td.amt { text-align:right; font-family:'JetBrains Mono',monospace; font-size:12px;
                    color:var(--text-white); white-space:nowrap; }
.ing-table td.per { text-align:right; font-family:'JetBrains Mono',monospace; font-size:9px;
                    color:var(--text-muted); width:74px; white-space:nowrap; }
.ing-table tr.hl td { color:var(--accent); border-bottom:none; padding-top:8px; }
.ing-table tr.hl td.amt { color:var(--accent); }
.ing-flags { margin-top:10px; display:flex; flex-direction:column; gap:5px; font-size:12.5px; }
.ing-flags .fl { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.1em;
                 text-transform:uppercase; color:var(--gold); }


/* ── life-stage requirement header ────────────────────────── */
.stage-req { background:var(--surface); border:1px solid var(--border-bright);
             border-radius:var(--radius-md); padding:12px 14px; margin-bottom:16px; }
.stage-req-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.stage-req-head .mono { color:var(--accent); font-size:11px; }
.mults { display:flex; flex-wrap:wrap; gap:6px; }
.mult { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.06em;
        padding:4px 8px; border-radius:var(--radius-sm); border:1px solid var(--border);
        color:var(--text-secondary); }
.mult.up { color:var(--gold); border-color:var(--gold); }
.mult.down { color:var(--blue); border-color:var(--blue); }
.mult b { font-weight:500; }
.ing-row.static { cursor:default; }
.ing-row.static:hover { background:none; }


/* ── life stage track ─────────────────────────────────────── */
.lifebar { position:relative; display:flex; height:14px; border:1px solid var(--border);
           border-radius:var(--radius-sm); overflow:hidden; background:#0a0e08; }
.lifebar .seg { display:block; height:100%; border-right:1px solid var(--bg); background:#1c2618; }
.lifebar .seg.done { background:var(--accent-dim); }
.lifebar .seg.on { background:var(--accent); }
.lifebar .now-mark { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--text-white); }
.stage-card { border:1px solid var(--border); border-radius:var(--radius-md);
              padding:12px 14px; margin-bottom:8px; background:var(--surface); }
.stage-card.on { border-color:var(--accent-dim); background:var(--accent-glow); }
.stage-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.stage-card .nm { font-family:'Playfair Display',serif; font-size:15px; color:var(--text-white); }
.stage-card .fl { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.12em;
                  text-transform:uppercase; color:var(--text-muted); }
.stage-card .mono { text-align:right; font-size:10.5px; line-height:1.6; }


/* ── today's target ───────────────────────────────────────── */
.target { background:var(--surface); border:1px solid var(--accent-dim);
          border-radius:var(--radius-md); padding:12px 14px; margin-bottom:14px; }
.target-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:9px; }
.target-head .mono { color:var(--text-secondary); font-size:10.5px; }
.target-bar { position:relative; height:10px; background:#0a0e08; border:1px solid var(--border);
              border-radius:2px; overflow:hidden; }
.target-bar i { display:block; height:100%; transition:width .4s ease; }
.target-bar i.low { background:var(--gold); }
.target-bar i.good { background:var(--accent); }
.target-bar i.over { background:var(--red); }
.target-nums { display:flex; justify-content:space-between; margin-top:6px;
               font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-secondary); }


/* ── enrichment cards ─────────────────────────────────────── */
.enrich-card { border:1px solid var(--border); border-radius:var(--radius-md);
               padding:12px 14px; margin-bottom:8px; background:var(--surface); cursor:pointer;
               transition:all var(--transition-base); }
.enrich-card:hover { border-color:var(--border-bright); background:var(--card-hover); }
.enrich-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.enrich-card .nm { font-family:'Playfair Display',serif; font-size:15px; color:var(--text-white); }
.enrich-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.tag { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.14em;
       text-transform:uppercase; padding:3px 7px; border-radius:var(--radius-sm);
       border:1px solid currentColor; }
.tag.t-feeding { color:var(--gold); } .tag.t-sensory { color:var(--purple); }
.tag.t-physical { color:var(--accent); } .tag.t-cognitive { color:var(--blue); }
.tag.t-social { color:var(--teal); } .tag.t-thermal { color:var(--orange); }
.tag.effort { color:var(--text-muted); } .tag.food { color:var(--gold); border-style:dashed; }
.enrich-wild { font-size:13px; line-height:1.6; color:var(--text-secondary); margin-top:8px; }

.enrich-contrib { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.enrich-contrib .mono { font-size:11px; color:var(--gold); margin-bottom:6px; }
.enrich-contrib .ing-table td { padding:3px 0; font-size:12px; }

.tag.hold { color:var(--teal); }

.badge-simple { color:var(--diff-beginner); } .badge-involved { color:var(--diff-inter); }
.badge-complex { color:var(--diff-advanced); }
.badge-hardy { color:var(--teal); } .badge-moderate { color:var(--blue); }
.badge-fragile { color:var(--purple); }
.species-card .meta .badge + .badge { margin-left:5px; }

.required { background:var(--gold-dim); border:1px solid var(--gold); border-radius:var(--radius-md);
            padding:12px 14px; margin-top:14px; }
.req-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start;
           padding:8px 0; border-bottom:1px solid rgba(212,170,78,.25); cursor:pointer; }
.req-row:last-child { border-bottom:none; }
.req-row .nm { font-size:14px; color:var(--gold-bright); }
.req-row .secondary { font-size:12.5px; line-height:1.55; }
.req-row .add { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--gold); }

.not-required { margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
.nr-row { margin-bottom:8px; }
.nr-row .nm { display:block; font-family:'JetBrains Mono',monospace; font-size:9px;
              letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; }
.nr-row .secondary { font-size:12.5px; line-height:1.55; }


/* ── what it needs now ────────────────────────────────────── */
.todo { background:var(--card); border:1px solid var(--border); border-top:none;
        border-radius:0 0 var(--radius-lg) var(--radius-lg); padding:14px 16px; }
.todo-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.mode-toggle { background:none; border:none; padding:0; cursor:pointer;
               font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.14em;
               text-transform:uppercase; color:var(--text-muted); }
.mode-toggle:hover { color:var(--accent); }
.todo-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start;
            padding:10px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.todo-row:last-child { border-bottom:none; }
.todo-row:hover { background:var(--card-hover); }
.todo-row .what { font-size:15px; color:var(--text-white); line-height:1.4; }
.todo-row .why { font-size:13px; color:var(--text-secondary); line-height:1.55; }
.todo-row .go { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent); }
.todo-row.urgent .what { color:var(--red); }
.todo-row.ok { cursor:default; }
.todo-row.ok .what { color:var(--accent); }
.todo-row.ok:hover { background:none; }
.vitals-detail { background:var(--card); border:1px solid var(--border); border-top:none;
                 padding:14px 16px 8px; }

.plain-note { font-size:13.5px; color:var(--text-secondary); line-height:1.6; margin-bottom:14px; }


/* ── today's needs ────────────────────────────────────────── */
.today { background:var(--card); border:1px solid var(--border); border-top:none;
         padding:14px 16px 12px; }
.today-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.need { display:grid; grid-template-columns:86px 1fr 46px; gap:9px; align-items:center; margin-bottom:7px; }
.need .nm { font-size:13px; color:var(--text-primary); }
.need .bar { height:9px; background:#0a0e08; border:1px solid var(--border); border-radius:2px; overflow:hidden; }
.need .bar i { display:block; height:100%; transition:width .4s ease; }
.need .bar i.low { background:var(--gold); }
.need .bar i.part { background:var(--accent-dim); }
.need .bar i.done { background:var(--accent); }
.need .bar i.over { background:var(--red); }
.need .pc { font-family:'JetBrains Mono',monospace; font-size:10.5px; text-align:right; color:var(--text-secondary); }
.excess-note { font-size:9px; font-family:'JetBrains Mono',monospace; color:var(--text-muted); }
.excess-note.stored { color:var(--amber,#c8922a); }
.today-line { font-size:13.5px; color:var(--text-primary); margin-top:9px; }
.today-line.done { color:var(--accent); }
.today-line.over { color:var(--red); }


/* ── colony phase card ────────────────────────────────────── */
.phase { background:var(--card); border:1px solid var(--border); border-top:none;
         padding:16px; }
.phase-head { display:flex; justify-content:space-between; align-items:baseline;
              gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.phase-title { font-family:'Playfair Display',serif; font-size:20px; color:var(--accent-bright); }
.phase-what { font-size:14px; line-height:1.65; color:var(--text-primary); margin-bottom:12px; }
.phase-rows { display:flex; flex-direction:column; gap:8px; }
.phase-row { display:grid; grid-template-columns:70px 1fr; gap:10px; align-items:start; }
.phase-row .k { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.14em;
                text-transform:uppercase; color:var(--gold); padding-top:3px; }
.phase-row span:last-child { font-size:13.5px; line-height:1.6; color:var(--text-secondary); }
.stage-list { list-style:none; padding:0; }
.stage-list li { font-size:14px; line-height:1.6; color:var(--text-primary);
                 padding:7px 0 7px 16px; border-left:2px solid var(--accent-dim); margin-bottom:6px; }


/* ── care requirement cards ───────────────────────────────── */
.care-block { }
.care { border:1px solid var(--border); border-left-width:3px; border-radius:var(--radius-md);
        padding:12px 14px; margin-bottom:8px; background:var(--surface); cursor:pointer; }
.care:hover { background:var(--card-hover); }
.care.critical { border-left-color:var(--red); }
.care.attention { border-left-color:var(--gold); }
.care.good { border-left-color:var(--accent); }
.care-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.care-label { font-family:'Playfair Display',serif; font-size:16px; color:var(--text-white); }
.care-value { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-secondary); }
.care-summary { font-size:13.5px; line-height:1.6; color:var(--text-primary); margin-top:6px; }
.care-why { font-size:12.5px; line-height:1.6; color:var(--text-muted); margin-top:6px;
            padding-left:10px; border-left:1px solid var(--border); }
.care-action { display:inline-block; margin-top:9px; font-family:'JetBrains Mono',monospace;
               font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.all-well { border:1px solid var(--accent-dim); background:var(--accent-glow);
            border-radius:var(--radius-md); padding:14px; }
.all-well h4 { font-family:'Playfair Display',serif; font-size:17px; color:var(--accent-bright);
               margin-bottom:5px; }
.all-well p { font-size:13.5px; color:var(--text-secondary); }
.care-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:7px; }
.care-ok { display:flex; gap:7px; align-items:flex-start; padding:8px 10px;
           border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px;
           color:var(--text-secondary); }
.care-ok .tick { color:var(--accent); }
.care-ok .ok-val { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-muted); }

.coming { display:flex; flex-direction:column; gap:5px; }
.coming-row { display:flex; justify-content:space-between; font-size:13px;
              color:var(--text-secondary); padding:6px 10px; border:1px solid var(--border);
              border-radius:var(--radius-sm); }
.coming-row .mono { color:var(--accent); font-size:11px; }
.stage-now { background:var(--surface); border:1px solid var(--accent-dim);
             border-radius:var(--radius-md); padding:14px 16px; }
.stage-now-title { font-family:'Playfair Display',serif; font-size:22px;
                   color:var(--text-white); margin:4px 0 2px; }

.fc-row { display:grid; grid-template-columns:18px 1fr; gap:8px; align-items:start;
          font-size:13.5px; line-height:1.55; padding:6px 0; }
.fc-row.bad > span:first-child { color:var(--gold); }
.fc-row.ok > span:first-child { color:var(--accent); }
.fc-row.ok { color:var(--text-secondary); }

/* QA154: THE THIRD THING IN THE SAME CORNER.
   The chip bar was fixed in QA153, but the group badge ("SOCIAL PAIR") is a
   separate element pinned to the same top-left corner, so on a social species
   it still printed straight through the day strip. It sits below the bar now. */
.group-badge { position:absolute; top:44px; left:12px; z-index:3;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); background:rgba(10,14,8,.72);
  border:1px solid var(--accent-dim); border-radius:var(--radius-sm); padding:4px 9px; }

.animal .companion { pointer-events:none; }
.animal .mv.companion { filter:saturate(.94) brightness(.97); }
.animal .placeholder.companion { opacity:.55; }

.animal .young { opacity:.95; }
.animal .placeholder.young { opacity:.5; }
.group-badge.pups { left:auto; right:12px; top:44px; color:var(--gold); border-color:var(--gold); }


/* ── STAGE + LIVE LOG RAIL ────────────────────────────────────────────
   Users asked to watch the animal rather than commute between tabs. The
   rail keeps the last few events beside the enclosure so an action is
   visibly acknowledged where it happened. The full log stays in its tab. */
.stagewrap { display: grid; grid-template-columns: 1fr 260px; gap: 14px; align-items: stretch; }
.stagewrap > .enclosure { min-width: 0; }
.lograil {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius, 10px);
  background: var(--surface, rgba(255,255,255,.02)); overflow: hidden;
}
.lograil-head {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); padding: 9px 12px 7px;
  border-bottom: 1px solid var(--border);
}
.lograil-body { flex: 1; overflow-y: auto; padding: 6px 10px 8px; max-height: 300px; }
.lograil-body p {
  font-size: 12.5px; line-height: 1.45; margin: 0 0 7px;
  padding-left: 9px; border-left: 2px solid var(--border); color: var(--text-dim, #b9c1c7);
}
.lograil-body p .when { display:block; font-size: 10.5px; color: var(--text-muted); margin-bottom: 1px; }
.lograil-body p.care, .lograil-body p.success, .lograil-body p.recover { border-left-color: var(--green, #5cb87a); }
.lograil-body p.alert, .lograil-body p.health, .lograil-body p.bad, .lograil-body p.death { border-left-color: var(--red, #d8664f); }
.lograil-body p.lesson { border-left-color: var(--gold, #d6a13a); }
.lograil-body p.birth, .lograil-body p.repro, .lograil-body p.stage { border-left-color: var(--accent, #6ba9c9); }
.lograil-more {
  border: 0; border-top: 1px solid var(--border); background: transparent;
  color: var(--text-muted); font-size: 12px; padding: 8px; cursor: pointer;
}
.lograil-more:hover { color: var(--text); }

/* A reaction the player can actually see, over the animal. */
/* QA213 overlay symbols ──────────────────────────────────── */
.sym-overlays { position:absolute; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.sym-persistent { position:absolute; right:8%; top:20%; width:22%; max-width:64px;
  display:flex; flex-direction:column; gap:6px; align-items:center; }
.sym-persistent img { width:100%; filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
  animation: sym-float 3.2s ease-in-out infinite; }
.sym-transient { position:absolute; left:50%; top:30%;
  transform:translate(-50%,-50%) scale(0.6); opacity:0; pointer-events:none; }
.sym-transient img { width:72px; max-width:20vw;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.sym-transient.show {
  animation: sym-bob-in 15s ease-out 1 forwards; }
.sym-env { position:absolute; pointer-events:none; }
.sym-env img { filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
@keyframes sym-float {
  0%,100% { transform:translateY(0px) scale(1); }
  50%      { transform:translateY(-5px) scale(1.04); } }
@keyframes sym-bob-in {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.6); }
  8%   { opacity:1; transform:translate(-50%,-60%) scale(1.15); }
  15%  { transform:translate(-50%,-65%) scale(1); }
  80%  { opacity:1; transform:translate(-50%,-65%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-80%) scale(0.9); } }
/* QA215: the butterfly's left-right flight keyframe is gone with the
   behaviour. It is a stationary glass overlay now, and leaving the rule in
   the sheet invites it back. */
@keyframes sym-bubble { 0% { bottom:10%; opacity:1; } 100% { bottom:80%; opacity:0; } }
.emote {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, 0);
  font-size: 44px; pointer-events: none; opacity: 0; z-index: 4;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
.emote.show { animation: emote-pop 1900ms ease-out 1; }
@keyframes emote-pop {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.6); }
  18%  { opacity: 1; transform: translate(-50%, -6px) scale(1.12); }
  32%  { transform: translate(-50%, -10px) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -24px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -40px) scale(.95); }
}

@media (max-width: 900px) {
  .stagewrap { grid-template-columns: 1fr; }
  .lograil-body { max-height: 190px; }
}

.actionhelp { margin: 10px 0 4px; }
.actionhelp p {
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
  margin: 0 0 7px; padding-left: 10px; border-left: 2px solid var(--border);
}
.actionhelp b { color: var(--text); }
.beetoast {
  border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 12px; font-size: 13.5px; line-height: 1.45;
  background: var(--surface, rgba(255,255,255,.03));
}
.beetoast.care, .beetoast.success, .beetoast.flow { border-left-color: var(--green, #5cb87a); }
.beetoast.lesson { border-left-color: var(--gold, #d6a13a); }
.beetoast.alert, .beetoast.bad, .beetoast.health { border-left-color: var(--red, #d8664f); }
.beetoast.swarm { border-left-color: var(--accent, #6ba9c9); }

/* A clock the player can watch move. The simulation ticks every 15 minutes,
   which is invisible in a header that only names the month: the feedback was
   "the time did not move at all", when in fact it had not yet reached a tick. */
.livclock {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-muted); margin-right: 4px; white-space: nowrap;
}
.livclock .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green, #5cb87a);
  animation: livpulse 2s ease-in-out infinite;
}
.livclock.paused .dot { background: var(--text-muted); animation: none; }
@keyframes livpulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.livclock .mono { font-variant-numeric: tabular-nums; }

.storagewarn {
  display: none; background: rgba(216,102,79,.14);
  border-bottom: 1px solid var(--red, #d8664f);
  color: var(--text); font-size: 13px; line-height: 1.5; padding: 11px 18px;
}
.storagewarn.show { display: block; }
.storagewarn b { display: block; margin-bottom: 3px; }

.howto { max-width: 760px; }
.howto h3 {
  font-size: 15px; margin: 26px 0 8px; color: var(--text);
  letter-spacing: .01em;
}
.howto h3:first-child { margin-top: 6px; }
.howto p {
  font-size: 14px; line-height: 1.65; color: var(--text-dim, #b9c1c7);
  margin: 0 0 10px; max-width: 68ch;
}
.howto b { color: var(--text); }

/* ── THE ANSWER, BEFORE THE DETAIL ────────────────────────────────────
   Feedback: "there is no clear health bar". Everything the engine knows was
   spread across cards and tabs, so an animal in real trouble looked the same
   as a thriving one. This is the single reading, then the four things that
   make it up. */
.vitals { margin: 14px 0 4px; }
.vitals-main { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vitals-main .vlabel {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); width: 58px; flex: none;
}
.vitals-main .vtrack { flex: 1; height: 16px; }
.vitals-main .vread { font-size: 15px; font-weight: 600; width: 118px; text-align: right; flex: none; }
.vtrack {
  position: relative; background: rgba(255,255,255,.07);
  border-radius: 999px; overflow: hidden; height: 9px;
}
.vtrack i {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  transition: width .5s ease, background-color .5s ease;
}
.vgood i  { background: var(--green, #5cb87a); }
.vwatch i { background: var(--gold, #d6a13a); }
.vbad i   { background: var(--red, #d8664f); }
.vgood .vread, .vgood.vname { color: var(--green, #5cb87a); }
.vwatch .vread, .vwatch.vname { color: var(--gold, #d6a13a); }
.vbad .vread, .vbad.vname { color: var(--red, #d8664f); }

.vitals-sub { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.vsub .vhead {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 5px;
}
.vsub .vname { font-size: 11.5px; color: var(--text-muted); }
.vsub .vpc { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.vsub .vnote { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.35; }

.vitals-who { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.vitals-who button {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer;
}
.vitals-who button.on { border-color: var(--accent, #6ba9c9); color: var(--text); }

@media (max-width: 640px) {
  .vitals-sub { grid-template-columns: repeat(2, 1fr); }
  .vitals-main .vread { width: 92px; font-size: 14px; }
}

.infodot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  font-size: 10px; line-height: 1; cursor: pointer; vertical-align: middle;
}
.infodot:hover { color: var(--text); border-color: var(--accent, #6ba9c9); }

.enricheffect {
  border: 1px solid var(--border); border-left: 3px solid var(--green, #5cb87a);
  border-radius: 8px; padding: 11px 13px; margin-bottom: 14px;
  background: var(--surface, rgba(255,255,255,.03));
}
.ee-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.ee-chip {
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ee-chip.up { color: var(--green, #5cb87a); border-color: var(--green, #5cb87a); }
.ee-chip.down { color: var(--red, #d8664f); border-color: var(--red, #d8664f); }
.ee-nut { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 9px 0 0; }
.ee-nut b { color: var(--text); }

.enrich-does {
  font-size: 12px; line-height: 1.5; color: var(--text-muted);
  margin: 6px 0 0; padding-left: 9px; border-left: 2px solid var(--border);
}

.chain { margin-bottom: 16px; }
.chain-steps { margin-top: 8px; }
.chain-step {
  display: grid; grid-template-columns: 92px 74px 1fr; gap: 8px;
  align-items: baseline; padding: 5px 0; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.chain-step.total { border-bottom: 0; border-top: 1px solid var(--border); padding-top: 8px; font-weight: 600; }
.chain-step .cs-l { color: var(--text-muted); }
.chain-step .cs-v { font-variant-numeric: tabular-nums; text-align: right; }
.chain-step .cs-n { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.chain-step.vgood .cs-v { color: var(--green, #5cb87a); }
.chain-step.vwatch .cs-v { color: var(--gold, #d6a13a); }
.chain-step.vbad .cs-v { color: var(--red, #d8664f); }
.chain-fix {
  font-size: 13px; line-height: 1.5; margin: 9px 0 0;
  padding-left: 10px; border-left: 2px solid var(--gold, #d6a13a); color: var(--text);
}
.chain-ok {
  font-size: 13px; margin: 9px 0 0; padding-left: 10px;
  border-left: 2px solid var(--green, #5cb87a); color: var(--text-muted);
}
@media (max-width: 640px) { .chain-step { grid-template-columns: 78px 64px 1fr; font-size: 12.5px; } }

.pacenote { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 8px 0 0; }

.brood-pipe { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 4px; }
.brood-stage { flex: 1; min-width: 0; }
.brood-arrow { color: var(--text-muted); font-size: 20px; padding-top: 14px; flex: none; }
.bs-n { font-size: 18px; font-variant-numeric: tabular-nums; }
.bs-name { font-size: 11.5px; color: var(--text-muted); margin: 1px 0 6px; }
.bs-note { font-size: 11px; line-height: 1.4; color: var(--text-muted); margin: 5px 0 0; }
@media (max-width: 640px) {
  .brood-pipe { flex-direction: column; }
  .brood-arrow { display: none; }
}

.plan-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.planpick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 7px 11px; border-radius: 10px; cursor: pointer; text-align: left;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  max-width: 210px;
}
.planpick.on { border-color: var(--green, #5cb87a); color: var(--text); }
.planpick .pp-n { font-size: 12.5px; line-height: 1.3; }
.planpick .pp-m { font-size: 10.5px; opacity: .75; }

.coming-row .every { color: var(--text-muted); font-size: 11.5px; }

.coming-row.overdue .mono { color: var(--red, #d8664f); }

.unitrow { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13.5px; margin-bottom: 6px; }
.unitrow .unitnote { font-size: 11.5px; color: var(--text-muted); }

.guide-row { border-top: 1px solid var(--border); padding: 9px 0; }
.guide-row:first-of-type { border-top: 0; }
.gr-head { display: flex; justify-content: space-between; align-items: baseline; }
.gr-stage { font-size: 13.5px; color: var(--text); text-transform: capitalize; }
.gr-days { font-size: 11.5px; color: var(--text-muted); }
.gr-what { font-size: 12.5px; line-height: 1.5; margin: 4px 0 2px; color: var(--text-dim,#b9c1c7); }
.gr-nums { font-size: 11.5px; color: var(--text-muted); margin: 0; font-variant-numeric: tabular-nums; }
.gr-note { font-size: 12.5px; line-height: 1.5; margin: 10px 0 0; padding-left: 10px;
  border-left: 2px solid var(--gold,#d6a13a); color: var(--text-muted); }

.warn-card { border:1px solid var(--warn,#d6a13a); border-radius:10px;
  padding:12px 14px; background:rgba(214,161,58,0.07); }
.warn-card .warn-title { font-size:14px; color:var(--warn,#d6a13a);
  margin-bottom:5px; font-weight:600; }
.warn-card p { font-size:13px; line-height:1.55; margin:0;
  color:var(--text-dim,#b9c1c7); }

.guide-row.kid { border-left:2px solid var(--warn,#d6a13a); padding-left:10px; }
.guide-row .gr-what b { color:var(--text,#e8ece9); }

.target-nums { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.target-nums > span { flex:1 1 auto; min-width:0; }


/* == QA214 stage layer (Batches 7, 8, 10) ==============================
   Positioning, scale, movement and z-order for the enclosure. Presentation
   only: nothing here reads or writes simulation state. */

/* The flex row is gone. Species-specific placement replaces one universal
   centred layout (Batch 10 SS9). */
.enclosure .animal { position:absolute; inset:0; display:block; padding:0; z-index:4; }
.enclosure .habitat { z-index:1; }

/* A unit owns its position; its image owns its idle motion. Separating the
   two means a travel animation can never clobber the placement transform,
   which is what happened in QA213. */
.pg-unit { position:absolute; width:auto; will-change:left;
           transform:var(--anchor, translate(-50%,-100%)); }
/* THE SPRITE WAS BEING CRUSHED AGAINST THE RIGHT-HAND WALL.
   The unit is absolutely positioned with a `left` offset and no width, so the
   browser gives it a shrink-to-fit width bounded by the space remaining
   between `left` and the edge of the enclosure. The global
   `img { max-width:100% }` at the top of this stylesheet then squeezed the
   sprite into that shrinking box while its height stayed fixed - so an animal
   travelling toward its right-hand turnaround compressed horizontally and
   sprang back on the return leg. The unit now carries an explicit width
   derived from the artwork's own aspect ratio, and the sprite is exempted
   from the global cap so nothing can compress it again. */
.pg-unit .pg-face { height:100%; width:100%; display:block;
                    transform:scaleX(var(--face, 1));
                    transition:none !important; }
.pg-unit .pg-art { height:100%; width:auto; max-width:none; display:block;
                   filter:drop-shadow(0 8px 14px rgba(0,0,0,.42));
                   transform-origin:50% 100%; }
/* Facing is discrete by construction: each value is held flat across half the
   cycle, so no frame can ever render between +1 and -1 and pass through zero.
   Off by default; a species opts in. */
@keyframes pg-face-flip {
  0%, 49.99%   { transform:scaleX(1); }
  50%, 100%    { transform:scaleX(-1); }
}
.pg-unit .pg-face.pg-face-flip {
  animation-name:pg-face-flip; animation-timing-function:step-end;
  animation-iteration-count:infinite; }
.pg-unit .pg-mv-hanging { transform-origin:50% 4%; }
.pg-unit .pg-mv-perched { transform-origin:50% 92%; }
.pg-unit .pg-mv-midwater,
.pg-unit .pg-mv-cruise,
.pg-unit .pg-mv-freeswim,
.pg-unit .pg-mv-jelly { transform-origin:50% 50%; }
.pg-unit .pg-ph { height:100%; min-width:46px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; border:1px dashed var(--border-bright);
  border-radius:10px; background:rgba(255,255,255,.03); padding:6px 10px; }
.pg-unit .pg-ph .glyph { font-size:20px; opacity:.6; }
.pg-unit .pg-ph .mono { font-size:9px; letter-spacing:.04em; }

/* Travel runs on `left`, in enclosure percent, so the Batch 8 X bands mean
   exactly what they say. ease-in-out + alternate is the gentle reversal:
   decelerate, turn, resume. Never a bounce. */
@keyframes pg-travel { from { left:var(--x0); } to { left:var(--x1); } }

@keyframes pg-breathe  { 0%,100%{ transform:translateY(0) scale(1); }
                         50%    { transform:translateY(calc(var(--amp,1) * -0.9%)) scale(1.008); } }
@keyframes pg-bobtiny  { 0%,100%{ transform:translateY(0); }
                         50%    { transform:translateY(calc(var(--amp,1) * -1.4%)); } }
@keyframes pg-sway     { 0%,100%{ transform:rotate(calc(var(--amp,1) * -0.7deg)); }
                         50%    { transform:rotate(calc(var(--amp,1) * 0.7deg)); } }
@keyframes pg-hangsway { 0%,100%{ transform:rotate(calc(var(--amp,1) * -1.1deg)); }
                         50%    { transform:rotate(calc(var(--amp,1) * 1.1deg)); } }
@keyframes pg-hover    { 0%,100%{ transform:translateY(calc(var(--amp,1) * -2.2%)) rotate(calc(var(--amp,1) * -0.5deg)); }
                         50%    { transform:translateY(calc(var(--amp,1) * 2.2%)) rotate(calc(var(--amp,1) * 0.5deg)); } }
@keyframes pg-jelly    { 0%,100%{ transform:translateY(calc(var(--amp,1) * -3.4%)) scale(1); }
                         50%    { transform:translateY(calc(var(--amp,1) * 3.4%)) scale(1.02); } }
@keyframes pg-settle   { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.012); } }
@media (prefers-reduced-motion: reduce) {
  .pg-unit, .pg-unit .pg-art { animation:none !important; }
}

/* Batch 7 SS14 layering: animals 4, foreground 5, environmental 6,
   glass 7, persistent symbols 8, transient 9, UI 10. */
.enclosure .vignette      { z-index:5; }
.enclosure .weather-tint  { z-index:6; }
.sym-overlays             { z-index:8; }
.sym-overlays .sym-glass  { z-index:7; }
.sym-overlays .sym-env    { z-index:6; }
.sym-overlays .sym-transient { z-index:9; }
.enclosure .emote         { z-index:9; }
.enclosure .chipbar       { z-index:10; }

/* Butterfly and Seastar are stationary glass-layer overlays, not creatures
   that fly or swim (Batch 6 SS3-4, Batch 7 SS17-18). */
.sym-env.bubble { position:absolute; bottom:8%; width:26px;
  animation:pg-bubble-rise 22s linear 1 forwards; }
.sym-env.bubble img { width:100%; height:auto; display:block; opacity:.8; }
/* One continuous climb from the floor of the water column to the surface,
   fading only at the very top. No reset, no mid-tank stall. */
@keyframes pg-bubble-rise {
  0%   { bottom:8%;  opacity:0; transform:translateX(0); }
  6%   { opacity:.85; }
  50%  { transform:translateX(3%); }
  88%  { opacity:.85; }
  100% { bottom:88%; opacity:0; transform:translateX(-2%); }
}
/* PART E: a gentle pulse while the love-heart is on screen. The wrapper keeps
   its existing rise-and-fade; only the image scales, so the heart never moves
   anywhere it was not already going. */
@keyframes pg-heart-pulse {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.15); }
}
.sym-transient.heart img { animation:pg-heart-pulse 1.7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sym-transient.heart img { animation:none; }
}
.sym-env.current { position:absolute; left:8%; width:16%; min-width:44px;
  animation:pg-current-drift 28s linear 1 forwards; }
.sym-env.current img { width:100%; height:auto; display:block; opacity:.34; }
/* One continuous traverse of the usable water column, 8% to 88% of the
   enclosure width, fading only at the two ends. No reset, no stall. */
@keyframes pg-current-drift {
  0%   { left:8%;  opacity:0; }
  8%   { opacity:.38; }
  90%  { opacity:.38; }
  100% { left:88%; opacity:0; }
}
.sym-glass { position:absolute; pointer-events:none; }
.sym-glass img { width:38px; max-width:12%; opacity:.72;
                 filter:drop-shadow(0 1px 4px rgba(0,0,0,.35)); }

.enclosure .animal .pg-colony-cap { position:absolute; left:50%; bottom:5%;
  transform:translateX(-50%); text-align:center; z-index:70; }
.bs-art { display:block; margin:0 auto 4px; max-width:100%; max-height:44px;
           object-fit:contain; opacity:.92; }
.bs-art.inline { display:inline-block; vertical-align:middle; max-height:20px;
                 margin:0 6px 0 0; }
.pg-music-btn { position:absolute; right:10px; bottom:10px; z-index:10;
  width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px;
  line-height:1; border:1px solid var(--border-bright); color:var(--text-muted);
  background:rgba(0,0,0,.42); display:flex; align-items:center; justify-content:center; }
.pg-music-btn.on { color:var(--gold, #d6a13a); border-color:currentColor; }
.pg-music-btn:hover { color:var(--text-white, #fff); }


/* ============================================================
   AUTHENTICATION GATE (additive). New auth UI only: nothing
   above this line was changed. Reuses the existing tokens,
   .overlay / .modal / .btn / .label styles.
   ============================================================ */
.auth-entry { margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
              gap:8px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em;
              color:var(--text-muted); }
.auth-link { background:none; border:0; border-bottom:1px solid var(--border-bright); padding:1px 0;
             font:inherit; letter-spacing:inherit; color:var(--text-secondary); cursor:pointer;
             transition:color var(--transition-base), border-color var(--transition-base); }
.auth-link:hover { color:var(--accent-bright); border-bottom-color:var(--accent-dim); }
.auth-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.auth-overlay .modal { max-width:440px; }
.auth-view[hidden] { display:none !important; }
.auth-view h2 { margin:6px 0 16px; }
.auth-lede { margin:0 0 18px; }
.auth-close { position:absolute; top:10px; right:12px; width:30px; height:30px; border-radius:50%;
              background:transparent; border:1px solid var(--border); color:var(--text-muted);
              font-size:17px; line-height:1; cursor:pointer; transition:all var(--transition-base); }
.auth-close:hover { color:var(--text-white); border-color:var(--accent-dim); }
.auth-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.auth-field { margin-bottom:12px; }
.auth-field .label { display:block; margin-bottom:5px; }
.auth-input { width:100%; padding:9px 13px; background:var(--card); border:1px solid var(--border-bright);
              border-radius:var(--radius-md); color:var(--text-white);
              font-family:'EB Garamond',Georgia,serif; font-size:14px; }
.auth-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow-md); }
.auth-message { min-height:1.5em; margin:2px 0 12px; font-size:13px; color:var(--text-secondary); }
.auth-message.is-error { color:var(--red); }
.auth-message.is-success { color:var(--accent-bright); }
.auth-switch { margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em; }
@media (max-width: 640px) {
  .auth-input { font-size:16px; }  /* stops iOS zooming into the field */
}

.auth-legal-links{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.05em}
.auth-legal-links a{color:var(--text-muted);text-decoration:none;border-bottom:1px solid var(--border-bright);padding-bottom:1px}
.auth-legal-links a:hover,.auth-legal-links a:focus{color:var(--accent-bright);border-bottom-color:var(--accent-dim)}
.btn-danger{border-color:var(--red)!important;color:var(--red)!important}
.btn-danger:hover{background:var(--red-dim)!important;color:var(--text-white)!important}
.account-help-links{display:flex;gap:8px;flex-wrap:wrap}