/* =============================================================
   FORMICARIUM :: DEEP COLONY  —  interface
   A field-laboratory instrument panel: dark glass, amber
   instrumentation, hairline rules, monospace readouts.

   Layout contract
     topbar      fixed strip, resources / identity / clock
     leftcol     colony vitals + current selection
     rightcol    the shelf, objectives, vitrine dossier
     dockwrap    caste strip + hint + command dock (bottom centre)
   Everything else is transient (notes, tooltip, marquee).
   ============================================================= */
:root{
  /* surface */
  --bg:#060709;
  --panel:rgba(15,16,20,.90);
  --panel-2:rgba(20,21,26,.96);
  --panel-hi:rgba(255,255,255,.045);
  --sunk:rgba(0,0,0,.30);

  /* ink */
  --ink:#f1ece2;
  --ink-2:#bdb6a8;
  --dim:#918a7c;
  --dimmer:#5f594f;

  /* accents */
  --amber:#ffb545;
  --amber-2:#ffd694;
  --amber-dim:#8a5f22;
  --green:#57e39c;
  --red:#ff6a52;
  --blue:#6ab6ff;
  --violet:#b98cff;

  /* rules */
  --line:rgba(255,212,150,.13);
  --line-2:rgba(255,255,255,.062);
  --line-hot:rgba(255,181,69,.52);

  /* type */
  --mono:"SF Mono",ui-monospace,"Cascadia Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace;
  /*  Was Inter. Anything without an explicit font fell back to it, so
      half the interface stayed on the old face while the tray and the
      menu moved - the audit found Inter on the boot screen, the alerts,
      the notifications, the pause veil, the stat pills and both
      untouched overlays. Changing the root removes that in one place.  */
  --sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Outfit",system-ui,sans-serif;

  /* geometry */
  --r:12px; --r2:9px; --r3:6px;
  --sp:12px;
  --shadow:0 12px 34px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;user-select:none;
  font-feature-settings:"tnum" 1,"cv05" 1}
canvas#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default}

body.cur-build  canvas#gl{cursor:crosshair}
body.cur-bad    canvas#gl{cursor:not-allowed}
body.cur-paint  canvas#gl{cursor:cell}
body.cur-select canvas#gl{cursor:pointer}
body.cur-attack canvas#gl{cursor:crosshair}

.hidden{display:none !important}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,181,69,.35)}

kbd{font-family:var(--mono);font-size:9px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-bottom-width:2px;border-radius:4px;
  padding:1px 5px;color:var(--dim);letter-spacing:.04em;white-space:nowrap;line-height:1.5}

/* ---- shared panel surface ---- */
.pnl{
  background:linear-gradient(180deg,rgba(23,24,29,.92),rgba(12,13,17,.94));
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow),inset 0 1px 0 var(--panel-hi);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  pointer-events:auto;
}
.pnl-h{display:flex;align-items:center;gap:8px;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--amber);padding:10px 12px 0}
.pnl-h::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}
.pnl-h .aux{font-family:var(--mono);letter-spacing:.06em;color:var(--dim);font-weight:400;text-transform:none}

/* ============================ overlays ============================ */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;
  background:radial-gradient(ellipse at 50% 34%,rgba(28,22,15,.72),rgba(3,4,6,.98) 66%);
  backdrop-filter:blur(12px)}

/* ============================== boot ============================== */
.boot-inner{text-align:center;width:min(520px,86vw)}
.logo-mark{width:76px;height:76px;margin:0 auto 16px;position:relative}
.logo-mark::before,.logo-mark::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--line-hot)}
.logo-mark::after{inset:15px;border-style:dashed;animation:spin 20s linear infinite}
.logo-mark i{position:absolute;inset:32px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 22px var(--amber);animation:breathe 3.4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.logo h1{font-size:34px;letter-spacing:.44em;font-weight:300;margin-left:.44em;
  background:linear-gradient(180deg,#fff4de,#ffb545 62%,#8a5a1c);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo h2{font-size:11px;letter-spacing:.62em;color:var(--dim);font-weight:400;margin:7px 0 0 .62em}
.logo.small h1{font-size:27px}
.boot-bar{margin:34px auto 10px;width:100%;height:2px;background:rgba(255,255,255,.07);overflow:hidden;border-radius:2px}
#bootFill{height:100%;width:0;background:linear-gradient(90deg,var(--amber-dim),var(--amber));transition:width .25s}
#bootMsg{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.16em}

/* ============================== menu ============================== */
.menu-wrap{width:min(1240px,95vw);max-height:96vh;overflow:auto;padding:26px 10px}
.menu-head{text-align:center;margin-bottom:26px}
.tagline{color:var(--dim);font-size:13px;margin-top:14px;letter-spacing:.04em}
.menu-cols{display:grid;grid-template-columns:1.2fr 1fr .92fr;gap:14px}
@media (max-width:980px){.menu-cols{grid-template-columns:1fr}}
.menu-card{background:linear-gradient(180deg,rgba(23,24,29,.9),rgba(12,13,17,.92));
  border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.menu-card h3{font-size:9.5px;letter-spacing:.26em;color:var(--amber);font-weight:600;margin-bottom:12px;
  text-transform:uppercase;display:flex;align-items:center;gap:8px}
.menu-card h3::after{content:"";flex:1;height:1px;background:var(--line)}
.chooser{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto;padding-right:4px}
.choice{border:1px solid var(--line-2);background:rgba(255,255,255,.016);padding:10px 12px;
  border-radius:var(--r2);cursor:pointer;transition:.13s ease;position:relative}
.choice:hover{background:rgba(255,181,69,.07);border-color:rgba(255,181,69,.32);transform:translateX(2px)}
.choice.on{background:rgba(255,181,69,.13);border-color:var(--line-hot);box-shadow:inset 3px 0 0 var(--amber)}
.choice .cn{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.choice .cl{font-size:9.5px;color:var(--dim);font-family:var(--mono);letter-spacing:.06em;font-style:italic}
.choice .cd{font-size:11.5px;color:var(--ink-2);margin-top:5px;line-height:1.5}
.choice .perk{font-size:10.5px;color:var(--green);margin-top:6px;line-height:1.45}
.swatch{width:10px;height:10px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 9px currentColor}
.small-chooser{flex-direction:row;flex-wrap:wrap;max-height:none}
.small-chooser .choice{flex:1;text-align:center;padding:8px 4px;min-width:66px}
.small-chooser .choice:hover{transform:none}
.small-chooser .cn{justify-content:center;font-size:11px}

.menu-foot{display:flex;gap:11px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.big-btn{background:linear-gradient(180deg,rgba(255,181,69,.24),rgba(255,181,69,.06));
  border:1px solid var(--line-hot);color:#ffe6bb;padding:13px 34px;font-size:12px;letter-spacing:.24em;
  font-weight:600;cursor:pointer;border-radius:var(--r2);transition:.15s;font-family:var(--sans)}
.big-btn:hover{background:rgba(255,181,69,.34);color:#fff;box-shadow:0 0 26px rgba(255,181,69,.28)}
.ghost-btn{background:transparent;border:1px solid var(--line-2);color:var(--dim);
  padding:13px 20px;font-size:11px;letter-spacing:.20em;cursor:pointer;border-radius:var(--r2);transition:.15s}
.ghost-btn:hover{border-color:var(--line-hot);color:var(--ink)}
.credit{text-align:center;margin-top:18px;font-size:10px;color:#4b4841;font-family:var(--mono);letter-spacing:.08em}

/* ============================== help ============================== */
.panel-wide{width:min(1000px,94vw);max-height:92vh;overflow:auto;background:var(--panel-2);
  border:1px solid var(--line);padding:26px;border-radius:var(--r);box-shadow:var(--shadow)}
.panel-wide.center{text-align:center;width:min(640px,94vw)}
.panel-wide h2{font-size:13px;letter-spacing:.3em;color:var(--amber);margin-bottom:18px}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin-bottom:22px}
@media (max-width:780px){.help-grid{grid-template-columns:1fr}}
.help-sec h4{font-size:9.5px;letter-spacing:.2em;color:var(--green);margin-bottom:8px;text-transform:uppercase}
.help-sec p,.help-sec li{font-size:12px;color:var(--ink-2);line-height:1.65}
.help-sec ul{list-style:none}
.help-sec li{padding-left:13px;position:relative;margin-bottom:3px}
.help-sec li::before{content:"▸";position:absolute;left:0;color:var(--amber-dim)}
.krow{display:flex;align-items:baseline;gap:9px;margin-bottom:4px;font-size:11.5px;color:var(--ink-2)}
.krow .kk{min-width:124px;text-align:right;flex:0 0 auto}


/* =============================== HUD ==============================
   The interface is the kit the tank came in: dark walnut trays holding
   cream buttons. It is furniture from the same world as the terrarium,
   which is what keeps it from reading as a generic overlay.

   Rules that keep it honest:
     - the dock is ONE row and never wraps
     - buttons carry an icon and a cost, nothing else
     - exactly one line of prose on screen: the caption under the dock
   ================================================================= */
:root{
  --wood:#3a2a1b;
  --wood-2:#4a3626;
  --wood-lip:#241a10;
  --cream:#f3e6cb;
  --cream-2:#e6d2ac;
  --ink:#33251a;
  --ink-2:#6b5741;
  --ink-3:#9b866a;
  --warm:#e5923a;
  --leaf:#6ea54c;
  --berry:#cf5340;
  --tray:linear-gradient(180deg,#4a3626 0%,#38271a 55%,#2e2015 100%);
  --lift:0 2px 0 rgba(0,0,0,.35), 0 12px 26px rgba(0,0,0,.42);
}

#hud{position:absolute;inset:0;pointer-events:none;z-index:20;
  font-family:var(--sans);color:var(--cream)}
#hud button{pointer-events:auto;font-family:inherit;color:inherit}

/* ------------------------------- top ----------------------------- */
#bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;
  gap:10px;padding:14px 16px;pointer-events:none}
#bar>*{pointer-events:auto}

.stat{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 9px;border-radius:14px;
  background:var(--tray);border:1px solid var(--wood-lip);box-shadow:var(--lift);
  position:relative;cursor:default}
.stat .ic{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  font-size:13px;font-style:normal;color:#2a1d12;flex:0 0 auto}
#sFood .ic{background:#f0c169}
#sDirt .ic{background:#c39a69}
#sPop  .ic{background:#8fc47a}
.stat b{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--cream);
  font-variant-numeric:tabular-nums}
.stat span{font-size:9px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;font-weight:600}
.stat .rate{position:absolute;top:3px;right:11px;font-size:10px;font-weight:700;
  font-style:normal;color:#8fd07a}
.stat .rate.neg{color:#f08a72}
.stat.flash{background:linear-gradient(180deg,#6a4a2c,#4a3320)}

#goal{flex:1;text-align:center;font-size:12.5px;font-weight:500;color:rgba(243,230,203,.80);
  pointer-events:none;padding:11px 12px 0;letter-spacing:.01em}
#goal::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--warm);margin-right:9px;vertical-align:middle}

#dayBox{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;
  letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;
  padding:10px 16px;border-radius:14px;background:var(--tray);
  border:1px solid var(--wood-lip);box-shadow:var(--lift)}
#dayBox b{color:var(--cream);font-size:17px;font-weight:700;letter-spacing:0}

.speedbtns{display:flex;gap:3px;padding:5px;border-radius:14px;background:var(--tray);
  border:1px solid var(--wood-lip);box-shadow:var(--lift)}
.speedbtns button{min-width:34px;height:30px;background:transparent;border:0;border-radius:9px;
  color:var(--ink-3);font-size:11px;cursor:pointer;transition:.12s;display:grid;place-items:center}
.speedbtns button:hover{background:rgba(255,255,255,.07);color:var(--cream)}
.speedbtns button.on{background:var(--warm);color:#2a1d12}

/* ------------------------------ dock ----------------------------- */
#tray{position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  display:flex;flex-direction:column-reverse;align-items:center;gap:0;pointer-events:none}
#tray>*{pointer-events:auto}

#toolbar{display:flex;align-items:center;gap:6px;padding:10px 14px 12px;
  border-radius:18px 18px 0 0;background:var(--tray);
  border:1px solid var(--wood-lip);border-bottom:0;box-shadow:var(--lift);
  flex-wrap:nowrap}                      /* never wrap - wrapping looks broken */
.tgroup{display:flex;gap:6px;padding:0 8px;position:relative}
.tgroup+.tgroup::before{content:"";position:absolute;left:-1px;top:4px;bottom:4px;
  width:1px;background:rgba(255,255,255,.10)}

.tool{position:relative;width:52px;height:52px;border-radius:13px;cursor:pointer;
  transition:transform .11s ease, background .11s ease;
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);
  border:1px solid rgba(0,0,0,.30);display:grid;place-items:center;
  box-shadow:0 2px 0 rgba(0,0,0,.28)}
.tool:hover{transform:translateY(-3px);background:linear-gradient(180deg,#fff5e2,#f0dfbe)}
.tool:active{transform:translateY(-1px)}
.tool.on{background:linear-gradient(180deg,#f6ab53,#e0872f);border-color:#8f4f14;
  box-shadow:0 2px 0 rgba(0,0,0,.28), 0 0 0 3px rgba(229,146,58,.30)}
.tool i{font-style:normal;font-size:20px;line-height:1;color:var(--ink)}
.tool em{position:absolute;bottom:3px;right:5px;font-style:normal;font-size:9px;
  font-weight:700;color:var(--ink-2)}
.tool.on em{color:#3a2208}
.tool.poor em{color:var(--berry)}
.tool.poor{filter:saturate(.55)}
.tool .q{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;border-radius:10px;
  background:var(--berry);color:#fff;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;padding:0 5px;border:2px solid var(--wood-2)}
.tool .have{position:absolute;top:3px;left:5px;font-size:9px;font-weight:700;
  color:var(--ink-3);text-decoration:none}
.tool.feed i{color:#2f6f96}
.tool.raise i{color:#a33d2c}

/* the single line of prose */
#ctxhint{font-size:11px;font-weight:500;color:rgba(243,230,203,.62);letter-spacing:.02em;
  padding:7px 18px 8px;pointer-events:none;text-align:center;min-height:28px;
  background:linear-gradient(180deg,rgba(28,19,11,0),rgba(28,19,11,.55));
  border-radius:14px 14px 0 0}
#ctxhint b{color:var(--warm);font-weight:700}
#ctxhint .bad{color:#f08a72}
#ctxhint.name{font-size:13.5px;font-weight:700;color:var(--cream);letter-spacing:.02em}
#ctxhint.name em{font-style:normal;color:var(--warm);font-weight:700;margin-left:6px}

/* ---------------------------- selection -------------------------- */
#selcard{position:absolute;left:16px;bottom:18px;width:186px;padding:12px 14px 13px;
  border-radius:14px;background:var(--tray);border:1px solid var(--wood-lip);
  box-shadow:var(--lift);pointer-events:auto}
.selhead{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--warm);font-weight:700}
.hpbar{height:6px;background:rgba(0,0,0,.35);border-radius:4px;overflow:hidden;margin:9px 0 6px}
.hpbar i{display:block;height:100%;background:var(--leaf);transition:width .25s}
.hpbar.low i{background:var(--berry)}
.selrow{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);padding:3px 0}
.selrow b{color:var(--cream);font-weight:600}

/* ---------------------------- transient -------------------------- */
#alert{position:absolute;top:74px;left:50%;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.22em;font-weight:700;color:#fff;padding:9px 24px;
  border-radius:12px;background:var(--berry);border:1px solid #8e3324;box-shadow:var(--lift);
  animation:pulseWarn 1.3s ease-in-out infinite;z-index:24}
@keyframes pulseWarn{0%,100%{opacity:1}50%{opacity:.55}}

#notifications{position:absolute;left:50%;transform:translateX(-50%);top:98px;
  display:flex;flex-direction:column;align-items:center;gap:7px;z-index:26;pointer-events:none}
.note{font-size:12px;font-weight:500;padding:9px 20px;border-radius:12px;color:var(--cream);
  background:var(--tray);border:1px solid var(--wood-lip);box-shadow:var(--lift);
  transition:opacity .5s,transform .5s;animation:noteIn .28s ease}
@keyframes noteIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.note.good{border-color:#5d8a3f;color:#d8f0c4}
.note.bad{border-color:#a8412f;color:#ffd6cc}
.note.fade{opacity:0;transform:translateY(-10px)}

#pauseveil{position:fixed;inset:0;pointer-events:none;display:grid;place-items:center;z-index:25}
#pauseveil span{font-size:12px;letter-spacing:.5em;font-weight:600;color:var(--cream);
  border:1px solid var(--wood-lip);padding:14px 34px;border-radius:14px;
  background:var(--tray);box-shadow:var(--lift)}

#selbox{position:fixed;border:1px solid var(--warm);background:rgba(229,146,58,.14);
  pointer-events:none;z-index:22;border-radius:4px}

#stats{position:absolute;right:14px;bottom:10px;font-family:var(--mono);font-size:9px;
  color:rgba(243,230,203,.22);pointer-events:none;z-index:21}

#tip{position:fixed;z-index:40;max-width:262px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(180deg,#4a3626,#2e2015);border:1px solid var(--wood-lip);
  box-shadow:var(--lift);pointer-events:none}
#tip .tt{font-size:13px;font-weight:700;color:var(--cream);margin-bottom:6px;
  display:flex;justify-content:space-between;gap:10px;align-items:baseline}
#tip .tt em{font-size:11px;color:var(--warm);font-style:normal;font-weight:700}
#tip .td{font-size:11.5px;color:rgba(243,230,203,.72);line-height:1.55}
#tip .tk{font-size:10.5px;color:var(--ink-3);margin-top:9px;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.10)}

/* --------------------------- panels ------------------------------ */
.sys-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.sys-row:last-of-type{border-bottom:0}
.sys-row>label{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  width:86px;flex:0 0 auto;font-weight:600}
.mini-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:rgba(243,230,203,.82);font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.06em;padding:8px 14px;border-radius:9px;cursor:pointer;transition:.12s}
.mini-btn:hover{border-color:var(--warm);color:var(--cream);background:rgba(229,146,58,.16)}
.mini-btn.on{background:var(--warm);border-color:#8f4f14;color:#2a1d12}
.sys-row input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:5px;
  background:rgba(0,0,0,.4);border-radius:5px;outline:none}
.sys-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  border-radius:50%;background:var(--warm);cursor:pointer}

.end-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:20px 0 24px;text-align:left}
.end-stats div{font-size:12px;color:var(--ink-3);display:flex;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:6px}
.end-stats b{color:var(--cream);font-weight:700}
#endTitle{font-size:26px;letter-spacing:.14em;font-weight:600;margin-bottom:12px;color:var(--warm)}
#endTitle.lose{color:var(--berry)}
#endMsg{font-size:13px;color:rgba(243,230,203,.75);line-height:1.6}

@media (max-width:1000px){
  .tool{width:46px;height:46px}
  .tool i{font-size:17px}
  #goal{display:none}
}

/* ============================ FRONT END ===========================
   Same walnut-and-cream kit as the in-game dock, so the menu is
   obviously part of the same object rather than a separate product.
   ================================================================= */
.overlay{background:radial-gradient(ellipse at 50% 30%, #2c1f14 0%, #140d07 70%)}

.boot-inner{width:min(460px,86vw)}
.logo-mark{width:64px;height:64px;margin:0 auto 18px}
.logo-mark::before{border-color:rgba(229,146,58,.45)}
.logo-mark::after{inset:13px;border-color:rgba(229,146,58,.28)}
.logo-mark i{inset:26px;background:var(--warm);box-shadow:0 0 20px var(--warm)}
.logo h1{font-size:30px;letter-spacing:.30em;font-weight:600;margin-left:.30em;
  background:none;color:var(--cream);-webkit-text-fill-color:var(--cream)}
.logo h2{font-size:9.5px;letter-spacing:.46em;color:var(--ink-3);margin-top:8px}
.logo.small h1{font-size:25px}
.boot-bar{height:3px;border-radius:3px;background:rgba(0,0,0,.5)}
#bootFill{background:var(--warm)}
#bootMsg{font-size:10.5px;color:var(--ink-3);letter-spacing:.12em}

.menu-wrap{width:min(920px,94vw);padding:20px 10px}
.menu-head{margin-bottom:22px}
.tagline{color:rgba(243,230,203,.62);font-size:13.5px;margin-top:12px;letter-spacing:0}

.menu-cols,.menu-cols.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:820px){.menu-cols,.menu-cols.two{grid-template-columns:1fr}}

.menu-card{background:var(--tray);border:1px solid var(--wood-lip);border-radius:16px;
  padding:16px 16px 18px;box-shadow:var(--lift)}
.menu-card h3{font-size:9px;letter-spacing:.22em;color:var(--ink-3);font-weight:700;
  margin-bottom:12px;text-transform:uppercase}
.menu-card h3::after{display:none}

.chooser{gap:7px;max-height:none;padding-right:0}
.choice{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);
  padding:12px 14px;border-radius:12px;transition:.12s ease}
.choice:hover{background:rgba(255,255,255,.075);border-color:rgba(229,146,58,.45);transform:none}
.choice.on{background:linear-gradient(180deg,rgba(229,146,58,.26),rgba(229,146,58,.12));
  border-color:var(--warm);box-shadow:none}
.choice .cn{font-size:14.5px;font-weight:700;color:var(--cream);gap:10px}
.choice .cl{display:none}
.choice .cd{font-size:12px;color:rgba(243,230,203,.60);margin-top:5px;line-height:1.5}
.choice .perk{font-size:12px;color:rgba(243,230,203,.58);margin-top:4px;line-height:1.45;font-weight:500}
.choice.on .perk,.choice.on .cd{color:rgba(255,244,225,.86)}
.swatch{width:13px;height:13px;border-radius:50%;box-shadow:none;
  border:2px solid rgba(0,0,0,.35)}

.small-chooser{gap:6px}
.small-chooser .choice{flex:1;min-width:0;padding:9px 4px;border-radius:10px}
.small-chooser .cn{font-size:11px;font-weight:700;justify-content:center}

.menu-foot{gap:10px;margin-top:22px}
.big-btn{background:var(--warm);border:1px solid #8f4f14;color:#2a1d12;
  padding:15px 40px;font-size:12.5px;letter-spacing:.16em;font-weight:700;
  border-radius:13px;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.big-btn:hover{background:#f6ab53;color:#2a1d12;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.ghost-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  color:rgba(243,230,203,.72);padding:15px 22px;font-size:11px;letter-spacing:.14em;
  font-weight:600;border-radius:13px}
.ghost-btn:hover{border-color:var(--warm);color:var(--cream);background:rgba(229,146,58,.14)}
.credit{color:rgba(243,230,203,.26);font-size:10px;letter-spacing:.06em;margin-top:16px}

.panel-wide{background:var(--tray);border:1px solid var(--wood-lip);border-radius:18px;
  color:var(--cream);box-shadow:var(--lift);padding:26px}
.panel-wide h2{font-size:12px;letter-spacing:.24em;color:var(--warm)}
.help-sec h4{color:var(--warm);font-size:9.5px;letter-spacing:.18em}
.help-sec p,.help-sec li{color:rgba(243,230,203,.72);font-size:12.5px}
.help-sec li::before{color:var(--warm)}
.krow{color:rgba(243,230,203,.72);font-size:12px}
kbd{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);
  color:rgba(243,230,203,.80)}

/* ---- menu must FIT: no scrollbar on a normal laptop screen ---- */
.menu-wrap{width:min(1000px,95vw);max-height:100vh;overflow:auto;padding:18px 14px}
.menu-head{margin-bottom:16px}
.logo-mark{width:48px;height:48px;margin:0 auto 10px}
.logo-mark i{inset:19px}
.logo h1{font-size:24px;letter-spacing:.26em;margin-left:.26em}
.logo h2{font-size:8.5px;letter-spacing:.40em;margin-top:6px}
.tagline{font-size:12.5px;margin-top:9px}
.menu-card{padding:13px 13px 15px}
.menu-card h3{margin-bottom:9px}

/* six species in two columns instead of one tall stack */
#speciesList{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#speciesList .choice{padding:10px 11px}
.choice .cn{font-size:13px}
.choice .perk{font-size:11px;margin-top:3px;line-height:1.4}
#diffList .choice{padding:11px 13px}
#diffList .cd{font-size:11.5px;margin-top:4px}
.menu-foot{margin-top:16px}
.big-btn{padding:13px 32px;font-size:12px}
.ghost-btn{padding:13px 18px}
.credit{margin-top:11px}
@media (max-height:760px){
  .logo h1{font-size:21px}
  #speciesList .choice{padding:8px 10px}
  .choice .perk{display:none}          /* names only when space is tight */
}

/* =====================================================================
   DOCK, TAKE THREE
   Icon-only was unreadable; cream-on-sand had no contrast; the hint line
   floated unattached below the tray. This is one dark tray, one row,
   every button labelled, with the caption strip built into it.
   ===================================================================== */
#tray{position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  display:flex;flex-direction:column;align-items:stretch;gap:0;pointer-events:none;
  width:max-content;max-width:98vw}
#tray>*{pointer-events:auto}

/* caption sits ON the tray, as its top strip */
#ctxhint{order:-1;font-size:11.5px;font-weight:500;color:rgba(243,230,203,.70);
  letter-spacing:.01em;padding:9px 18px 8px;text-align:center;min-height:0;
  background:linear-gradient(180deg,#4e3927,#42301f);
  border:1px solid var(--wood-lip);border-bottom:0;border-radius:14px 14px 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ctxhint b{color:#ffc06a;font-weight:700}
#ctxhint .bad{color:#ff9781}
#ctxhint.name{font-size:13px;font-weight:700;color:#fff3dd}
#ctxhint.name em{font-style:normal;color:#ffc06a;margin-left:7px}

#toolbar{display:flex;align-items:stretch;gap:5px;padding:9px 12px 11px;
  border-radius:0;background:linear-gradient(180deg,#42301f,#2c2015);
  border:1px solid var(--wood-lip);box-shadow:0 -2px 22px rgba(0,0,0,.45);
  flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}
.tgroup{display:flex;gap:5px;padding:0 7px;position:relative;align-items:stretch}
.tgroup+.tgroup::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;
  width:1px;background:rgba(255,255,255,.13)}

/* labelled button: icon, name, cost - fits ten across at 1000px */
.tool{position:relative;width:86px;min-height:60px;border-radius:11px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:7px 4px 6px;
  background:linear-gradient(180deg,#f7ecd6,#e7d5b2);
  border:1px solid rgba(0,0,0,.34);box-shadow:0 2px 0 rgba(0,0,0,.30);
  transition:transform .1s ease, background .1s ease}
.tool:hover{transform:translateY(-2px);background:linear-gradient(180deg,#fff8ea,#f0e0c0)}
.tool:active{transform:translateY(0)}
.tool.on{background:linear-gradient(180deg,#ffb457,#e88f2c);border-color:#8a4d12;
  box-shadow:0 2px 0 rgba(0,0,0,.30),0 0 0 3px rgba(255,180,87,.32)}
.tool i{font-style:normal;font-size:17px;line-height:1;color:#4a3520}
.tool span{font-size:11px;font-weight:700;color:#2f2216;line-height:1.15;
  letter-spacing:.005em;text-align:center;white-space:nowrap}
.tool em{font-style:normal;font-size:10px;font-weight:700;color:#7d6647;line-height:1}
.tool.on i,.tool.on span{color:#3a2205}
.tool.on em{color:#5c3a06}
.tool.poor{filter:grayscale(.45) brightness(.92)}
.tool.poor em{color:#c0442f}
.tool .q{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;border-radius:10px;
  background:#cf5340;color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;padding:0 5px;border:2px solid #2c2015}
.tool .have{position:absolute;top:4px;right:6px;font-size:9.5px;font-weight:700;
  color:#93805f;text-decoration:none}
.tool.feed i{color:#2c6f95}
.tool.raise i{color:#a63a28}
.tool.raise span{color:#2f2216}

/* top bar: bigger numbers, clearer labels */
.stat{padding:9px 18px 9px 10px;border-radius:15px;gap:11px}
.stat .ic{width:28px;height:28px;border-radius:10px;font-size:14px}
.stat b{font-size:22px}
.stat span{font-size:9.5px;letter-spacing:.14em;color:#b6a68c}
.stat .rate{font-size:10.5px;top:4px;right:12px}
#goal{font-size:13px;color:rgba(243,230,203,.88);font-weight:500;padding-top:13px}
#dayBox{padding:11px 18px;border-radius:15px}
#dayBox b{font-size:19px}
.speedbtns{padding:6px;border-radius:15px}
.speedbtns button{min-width:36px;height:32px;font-size:12px}

@media (max-width:1040px){
  .tool{width:74px;min-height:56px}
  .tool span{font-size:10px}
  .tool i{font-size:15px}
}

/* the stats readout is two lines now, and needs to keep its newline */
#stats{white-space:pre;text-align:right;line-height:1.5;color:rgba(243,230,203,.34)}

/* ==================================================================
   THE TRAY  -  light, grouped, drawn
   ------------------------------------------------------------------
   The old tray was eighteen identical brown buttons in one full-width
   strip: no hierarchy, no grouping, and icons that were Unicode
   characters borrowed for their shape. It read as a template.

   This is the same markup restyled and regrouped. Light against the
   dark tank rather than brown on brown, one group shown at a time
   behind a segmented switch, and generous enough that a name and a
   cost both fit without cramping.
   ================================================================== */
:root{
  --p-surface:#fbfaf7;
  --p-raised:#ffffff;
  --p-sunk:#f0eee8;
  --p-tile:#f4f2ec;
  --p-ink:#2c2a26;
  --p-muted:#7c7a73;
  --p-faint:#a09d94;
  --p-line:#eae7df;
  --p-food:#4e9b5f;
  --p-food-bg:#e9f3ea;
  --p-food-ink:#2f6b3c;
  --p-dirt:#d99a3e;
  --p-dirt-bg:#f4ece0;
  --p-short:#c05b45;
  --p-lift:0 3px 6px rgba(30,26,22,.10), 0 18px 44px rgba(30,26,22,.28);
}

#toolbar{
  /*  ARITHMETIC, NOT GUESSWORK.
      Six tiles at 116 with 8px gaps needed 736px of content box; the panel
      gave 728, so the sixth tile wrapped onto a second row. Tiles are 104
      now with a 7px gap: 6*104 + 5*7 = 659 inside a 660 content box. The
      whole tray is also shorter - it was taking a third of the height of a
      real window, having only ever been checked in a small pane.  */
  display:flex; flex-direction:column; gap:11px;
  width:688px; margin:0 auto; padding:12px 14px 13px;
  background:var(--p-surface); border-radius:22px; border:0;
  box-shadow:var(--p-lift);
  font-family:'Nunito Sans', system-ui, sans-serif;
}

/* the group switch */
#toolbar .tabs{
  display:flex; gap:5px;
  background:var(--p-sunk); border-radius:14px; padding:5px;
}
#toolbar .tab{
  flex:1 1 0; border:0; cursor:pointer; padding:8px 0; border-radius:10px;
  background:transparent; color:var(--p-muted);
  font-family:'Outfit', system-ui, sans-serif; font-weight:600; font-size:14px;
  transition:background .12s, color .12s;
}
#toolbar .tab:hover{ color:var(--p-ink); }
#toolbar .tab.on{
  background:var(--p-surface); color:var(--p-ink); font-weight:700;
  box-shadow:0 1px 2px rgba(30,26,22,.10), 0 3px 8px rgba(30,26,22,.10);
}
#toolbar .tab:focus-visible{ outline:2px solid var(--p-ink); outline-offset:2px; }

/* one group at a time */
#toolbar .tpages{ display:block; }
/*  Fixed 116px tiles, centred - not six stretched columns. The groups
    hold one, two, three, five and six tools, so a six-column grid left
    the Dig group as a single tile floating in a wide empty card. Tiles
    keep one size everywhere and the short groups sit in the middle,
    which reads as deliberate rather than unfinished. The panel width
    does not move between tabs, so the switch above it stays put.  */
#toolbar .tgroup{ display:none; flex-wrap:nowrap; justify-content:center; gap:7px; }
#toolbar .tgroup.on{ display:flex; }
#toolbar .tool{ flex:0 0 104px; }

/* the tiles */
#toolbar .tool{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:7px;
  width:auto; min-height:72px; padding:10px 6px 9px;
  background:var(--p-tile); border:0; border-radius:14px; cursor:pointer;
  color:var(--p-ink); transition:background .12s, box-shadow .12s, transform .12s;
}
#toolbar .tool:hover{ background:#eeebe3; transform:translateY(-2px); }
#toolbar .tool:active{ transform:translateY(0); }
#toolbar .tool:focus-visible{ outline:2px solid var(--p-ink); outline-offset:2px; }
#toolbar .tool .ic{ width:24px; height:24px; display:block; color:var(--p-ink); }
#toolbar .tool i{ font-style:normal; font-size:22px; line-height:1; color:var(--p-ink); }
#toolbar .tool span{
  font-family:'Outfit', system-ui, sans-serif; font-weight:600; font-size:12px;
  line-height:1.15; color:var(--p-ink); text-align:center;
}
#toolbar .tool em{
  position:static; font-style:normal; font-weight:700; font-size:12px;
  color:var(--p-muted); font-variant-numeric:tabular-nums;
}

/* chosen */
#toolbar .tool.on{
  background:var(--p-food-bg); box-shadow:inset 0 0 0 2.5px var(--p-food);
}
#toolbar .tool.on .ic,
#toolbar .tool.on i,
#toolbar .tool.on span{ color:var(--p-food-ink); }
#toolbar .tool.on span{ font-weight:700; }
#toolbar .tool.on em{ color:var(--p-food); }

/* cannot afford it */
#toolbar .tool.poor{ opacity:.45; filter:none; }
#toolbar .tool.poor em{ color:var(--p-short); }

/* the queue badge and the owned count */
#toolbar .tool .q{
  position:absolute; top:-6px; right:-6px; min-width:22px; height:22px;
  border-radius:999px; background:var(--p-ink); color:var(--p-surface);
  font-family:'Outfit', system-ui, sans-serif; font-weight:700; font-size:11px;
  display:flex; align-items:center; justify-content:center; padding:0 6px;
  box-shadow:0 2px 6px rgba(30,26,22,.30);
}
#toolbar .tool .have{
  position:absolute; top:7px; left:9px; text-decoration:none;
  font-family:'Outfit', system-ui, sans-serif; font-weight:700; font-size:11px;
  color:var(--p-faint); font-variant-numeric:tabular-nums;
}

/* ==================================================================
   THE REST OF THE HUD  -  brought onto the same light system
   ------------------------------------------------------------------
   With the tray light and the top bar still dark brown, the screen
   read as two interfaces from different games. Same tokens here:
   soft white pills on the dark tank, one accent per resource, and
   numbers in Outfit so they line up.
   ================================================================== */
#bar{ gap:12px; }

.stat{
  position:relative; display:flex; align-items:center; gap:11px;
  padding:11px 20px 11px 12px; border-radius:999px;
  background:var(--p-surface); border:0;
  box-shadow:0 2px 4px rgba(30,26,22,.10), 0 10px 26px rgba(30,26,22,.20);
}
.stat .ic{
  width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  background:var(--p-sunk); color:var(--p-muted); font-size:0;
}
.stat .ic svg{ width:17px; height:17px; }
#sFood .ic{ background:var(--p-food-bg); color:var(--p-food); }
#sDirt .ic{ background:var(--p-dirt-bg); color:#b07c37; }
#sPop  .ic{ background:#fdeee9; color:var(--p-short); }

.stat b{
  font-family:'Outfit', system-ui, sans-serif; font-weight:700; font-size:21px;
  color:var(--p-ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.stat span{
  font-family:'Outfit', system-ui, sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--p-faint);
}
.stat .rate{
  position:static; font-style:normal; font-weight:700; font-size:11px;
  color:var(--p-food); font-variant-numeric:tabular-nums;
}
.stat .rate.neg{ color:var(--p-short); }
.stat.flash{ background:#fff; box-shadow:0 0 0 2.5px var(--p-food), 0 10px 26px rgba(30,26,22,.20); }

#dayBox{
  display:flex; align-items:center; gap:7px;
  padding:11px 20px; border-radius:999px; background:var(--p-surface);
  box-shadow:0 2px 4px rgba(30,26,22,.10), 0 10px 26px rgba(30,26,22,.20);
  font-family:'Outfit', system-ui, sans-serif; font-weight:600; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--p-faint); border:0;
}
#dayBox b{ font-size:18px; font-weight:700; color:var(--p-ink); font-variant-numeric:tabular-nums; }

.speedbtns{
  display:flex; gap:4px; padding:6px; border-radius:999px;
  background:var(--p-surface);
  box-shadow:0 2px 4px rgba(30,26,22,.10), 0 10px 26px rgba(30,26,22,.20);
}
.speedbtns button{
  width:36px; height:36px; border:0; border-radius:999px; cursor:pointer;
  background:transparent; color:var(--p-muted);
  font-family:'Outfit', system-ui, sans-serif; font-weight:700; font-size:12px;
  display:grid; place-items:center; transition:background .12s, color .12s;
}
.speedbtns button:hover{ color:var(--p-ink); background:var(--p-sunk); }
.speedbtns button.on{ background:var(--p-ink); color:var(--p-surface); }
.speedbtns button:focus-visible{ outline:2px solid var(--p-surface); outline-offset:2px; }

#goal{
  padding:10px 18px; border-radius:999px; background:rgba(251,250,247,.92);
  box-shadow:0 2px 4px rgba(30,26,22,.10), 0 10px 26px rgba(30,26,22,.18);
  font-size:14px; color:var(--p-ink); border:0;
}
#goal span{ color:var(--p-ink); }

/* the line under the tray: one instruction, on the light card */
#ctxhint{
  margin:0 auto 10px; max-width:756px; padding:9px 18px; border-radius:999px;
  background:rgba(251,250,247,.94); border:0; text-align:center;
  font-family:'Nunito Sans', system-ui, sans-serif; font-size:14px; color:var(--p-muted);
  box-shadow:0 2px 4px rgba(30,26,22,.10), 0 10px 26px rgba(30,26,22,.18);
}
#ctxhint b, #ctxhint strong{ color:var(--p-ink); font-weight:700; }
#ctxhint em{ font-style:normal; font-weight:700; color:var(--p-food); }

/* ==================================================================
   THE MENU  -  split
   ------------------------------------------------------------------
   The old menu was two dark-brown rounded cards side by side with an
   orange gradient button under them: the same template as the tray,
   and the first thing anybody sees.

   Split now. The title holds a dark panel down the left, the choices
   sit on light paper to the right, and the primary action is a solid
   green pill rather than a glowing gradient. No markup changed - the
   existing menu-head / menu-cols / menu-foot blocks are placed into a
   grid.
   ================================================================== */
#menu.overlay{
  background:var(--p-surface);
  font-family:'Nunito Sans', system-ui, sans-serif;
}
#menu .menu-wrap{
  display:grid; grid-template-columns:minmax(320px,38%) 1fr;
  gap:0; width:100%; max-width:none; height:100%; margin:0; padding:0;
  align-items:stretch;
}

/* left: the title, on the dark of the tank */
#menu .menu-head{
  grid-column:1; grid-row:1 / span 3;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(160deg,#3a3129 0%,#241d16 62%,#1a1511 100%);
  padding:56px 48px 52px; margin:0; text-align:left;
}
#menu .logo{ display:block; margin:0; }
#menu .logo-mark{ display:none; }
#menu .menu-head h1{
  font-family:'Outfit', system-ui, sans-serif; font-weight:800; font-size:54px;
  line-height:1; letter-spacing:-.02em; color:var(--p-surface); margin:0 0 10px;
}
#menu .menu-head h2{
  font-family:'Outfit', system-ui, sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.4em; color:var(--p-dirt); margin:0;
}
#menu .tagline{
  color:rgba(251,250,247,.72); font-size:18px; line-height:1.45;
  margin-top:20px; letter-spacing:0; max-width:30ch;
}

/* right: the choosing */
#menu .menu-cols,
#menu .menu-cols.two{
  grid-column:2; grid-row:1;
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
  padding:52px 56px 0; align-content:start;
}
#menu .menu-card{
  background:transparent; border:0; border-radius:0; padding:0;
  box-shadow:none;
}
#menu .menu-card h3{
  font-family:'Outfit', system-ui, sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--p-faint);
  margin:0 0 14px; display:block;
}
#menu .chooser{ display:flex; flex-direction:column; gap:8px; max-height:none; overflow:visible; }
#menu .small-chooser{ flex-direction:row; flex-wrap:wrap; gap:8px; }

#menu .choice{
  background:var(--p-tile); border:0; border-radius:16px; padding:15px 17px 14px;
  cursor:pointer; transition:background .12s, box-shadow .12s;
}
#menu .choice:hover{ background:#eeebe3; }
#menu .choice.on{
  background:var(--p-food-bg); box-shadow:inset 0 0 0 2.5px var(--p-food);
}
#menu .choice .cn{
  display:flex; align-items:center; gap:10px;
  font-family:'Outfit', system-ui, sans-serif; font-weight:700; font-size:19px;
  color:var(--p-ink); margin-bottom:5px;
}
#menu .choice.on .cn{ color:var(--p-food-ink); }
#menu .choice .swatch{
  width:12px; height:12px; border-radius:999px; display:inline-block; flex:0 0 auto;
}
#menu .choice .perk,
#menu .choice .cd{
  font-size:14px; line-height:1.4; color:var(--p-muted);
}
#menu .choice.on .perk,
#menu .choice.on .cd{ color:#4d6b53; }

/* graphics: pills, not cards */
#menu .small-chooser .choice{
  padding:9px 18px; border-radius:999px; background:var(--p-sunk);
}
#menu .small-chooser .choice .cn{
  font-size:14px; font-weight:600; margin:0; color:var(--p-muted);
}
#menu .small-chooser .choice.on{ background:var(--p-ink); box-shadow:none; }
#menu .small-chooser .choice.on .cn{ color:var(--p-surface); }

/* the actions */
#menu .menu-foot{
  grid-column:2; grid-row:2; align-self:end;
  display:flex; gap:14px; justify-content:flex-start; align-items:center;
  padding:36px 56px 0; margin:0; flex-wrap:wrap;
}
#menu .big-btn{
  background:var(--p-food); border:0; border-radius:999px;
  color:#fff; padding:18px 40px;
  font-family:'Outfit', system-ui, sans-serif; font-weight:700; font-size:17px;
  letter-spacing:0; text-transform:none; cursor:pointer;
  box-shadow:0 3px 6px rgba(46,90,55,.22), 0 12px 26px rgba(46,90,55,.24);
  transition:background .12s, transform .12s;
}
#menu .big-btn:hover{ background:#448a53; color:#fff; transform:translateY(-1px); box-shadow:0 4px 8px rgba(46,90,55,.26), 0 16px 32px rgba(46,90,55,.28); }
#menu .ghost-btn{
  background:var(--p-sunk); border:0; border-radius:999px; color:#5f5d57;
  padding:15px 24px;
  font-family:'Outfit', system-ui, sans-serif; font-weight:600; font-size:15px;
  letter-spacing:0; text-transform:none; cursor:pointer; transition:background .12s, color .12s;
}
#menu .ghost-btn:hover{ background:#e6e3da; color:var(--p-ink); border:0; }
#menu .big-btn:focus-visible,
#menu .ghost-btn:focus-visible,
#menu .choice:focus-visible{ outline:2px solid var(--p-ink); outline-offset:3px; }

#menu .credit{
  grid-column:2; grid-row:3; align-self:end;
  padding:26px 56px 30px; margin:0; text-align:left;
  color:var(--p-faint); font-size:12px; letter-spacing:.06em; font-family:inherit;
}

@media (max-width:900px){
  #menu .menu-wrap{ grid-template-columns:1fr; height:auto; }
  #menu .menu-head{ grid-column:1; grid-row:1; padding:40px 28px 34px; }
  #menu .menu-cols, #menu .menu-cols.two{ grid-column:1; grid-row:2; grid-template-columns:1fr; padding:32px 28px 0; }
  #menu .menu-foot{ grid-column:1; grid-row:3; padding:26px 28px 0; }
  #menu .credit{ grid-column:1; grid-row:4; padding:20px 28px 26px; }
  #menu .menu-head h1{ font-size:40px; }
}

/*  The old menu hid every species' one-line perk on a short viewport
    because six cards plus text did not fit. The split layout gives the
    choices their own scrolling column, so the line stays - it is the only
    thing that tells the six species apart.  */
@media (max-height:760px){
  #menu .choice .perk{ display:block; }
  #menu #speciesList .choice{ padding:12px 15px 11px; }
  #menu .menu-head h1{ font-size:42px; }
}

/*  Only the choosing column scrolls. The wrap itself stays exactly one
    screen tall, so Begin the colony is always on screen - it went below
    the fold on a short window when the whole page was allowed to grow.  */
#menu .menu-wrap{ grid-template-rows:1fr auto auto; height:100%; overflow:hidden; }
#menu .menu-cols, #menu .menu-cols.two{ overflow:auto; min-height:0; padding-bottom:20px; }

/* ---- the boot screen ----
   The first pass here missed because the selectors were written from
   memory: the progress track is .boot-bar, not #bootBar, so none of it
   applied and the screen kept its spinning dashed rings and its wide
   letterspaced title. Read the markup, then styled it.  */
#boot.overlay{ background:linear-gradient(160deg,#3a3129 0%,#241d16 62%,#1a1511 100%); }
#boot .boot-inner{ display:flex; flex-direction:column; align-items:center; }

/*  The rotating dashed circles were the busiest thing in the game and
    said nothing. One steady drawn ant instead.  */
#boot .logo-mark{ width:56px; height:56px; margin:0 auto 20px; animation:none; }
#boot .logo-mark::before,
#boot .logo-mark::after{ display:none; }
#boot .logo-mark i{
  position:absolute; inset:0; border-radius:0; background:none; box-shadow:none;
  -webkit-mask:none; mask:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e9b5f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='16.6' cy='11' r='2.6'/><ellipse cx='11.6' cy='11.6' rx='2.4' ry='2'/><ellipse cx='6.2' cy='12' rx='3.6' ry='3'/><path d='M18.4 9 21 6.6M18.8 12.6l2.6.6'/><path d='M12.6 9.8 13.6 6.4M11.2 9.7 9.6 6.6M12.8 13.6l1.6 3M10.6 13.5 9 16.8'/></svg>");
  background-repeat:no-repeat; background-size:contain; background-position:center;
}
#boot .logo h1{
  font-family:'Outfit', system-ui, sans-serif; font-weight:800; font-size:40px;
  letter-spacing:-.015em; margin-left:0; color:var(--p-surface);
}
#boot .logo h2{
  font-family:'Outfit', system-ui, sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.4em; margin:9px 0 0 .4em; color:var(--p-dirt);
}
#boot .boot-bar{
  width:280px; height:4px; border-radius:999px; margin:30px auto 14px;
  background:rgba(251,250,247,.14); border:0; overflow:hidden;
}
#bootFill{ height:100%; background:var(--p-food); border-radius:999px; transition:width .25s; }
#bootMsg{
  font-family:'Nunito Sans', system-ui, sans-serif; font-size:13px;
  color:rgba(251,250,247,.5); letter-spacing:.02em;
}

/* ==================================================================
   THE MENU, SECOND PASS
   ------------------------------------------------------------------
   Three things were wrong on a real window and invisible in a small
   preview pane: the species list ran off the bottom and scrolled, the
   left panel was an empty dark rectangle with the title parked at the
   very bottom, and a narrow window gave the whole screen to that panel
   because it held a 1fr row inside an overflow:hidden wrap.
   ================================================================== */

/*  Species two across. Six in one column could never fit a 815px window
    beside a heading, three difficulties, the graphics pills, the buttons
    and the credit line - so it scrolled. Two columns of three fit.  */
#menu #speciesList{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
#menu .choice{ padding:12px 14px 11px; border-radius:14px; }
#menu .choice .cn{ font-size:17px; margin-bottom:3px; }
#menu .choice .perk,
#menu .choice .cd{ font-size:13px; line-height:1.35; }
#menu .menu-card h3{ font-size:12px; margin:0 0 10px; }
#menu .menu-cols, #menu .menu-cols.two{ gap:26px; padding:34px 44px 0; }
#menu .menu-foot{ padding:24px 44px 0; gap:12px; }
#menu .big-btn{ padding:15px 34px; font-size:16px; }
#menu .ghost-btn{ padding:13px 20px; font-size:14px; }
#menu .credit{ padding:16px 44px 22px; }

/*  Nothing scrolls. If a window is genuinely too short for the whole
    screen the page scrolls as one piece rather than trapping the list
    in its own scroller, which is what hid the sixth species.  */
#menu .menu-cols, #menu .menu-cols.two{ overflow:visible; }
#menu .menu-wrap{ overflow:auto; }

/*  The left panel is a title card, not a void. Centred rather than
    parked at the bottom, with one large drawn ant behind it so the
    space reads as composed instead of unfilled.  */
#menu .menu-head{
  position:relative; overflow:hidden;
  justify-content:center; padding:44px 44px;
}
#menu .menu-head::after{
  content:""; position:absolute; right:-70px; top:50%;
  width:420px; height:420px; margin-top:-210px; opacity:.055; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbfaf7' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><circle cx='16.6' cy='11' r='2.6'/><ellipse cx='11.6' cy='11.6' rx='2.4' ry='2'/><ellipse cx='6.2' cy='12' rx='3.6' ry='3'/><path d='M18.4 9 21 6.6M18.8 12.6l2.6.6'/><path d='M12.6 9.8 13.6 6.4M11.2 9.7 9.6 6.6M12.8 13.6l1.6 3M10.6 13.5 9 16.8'/></svg>");
  background-repeat:no-repeat; background-size:contain;
}
#menu .menu-head > *{ position:relative; z-index:1; }
#menu .menu-head h1{ font-size:clamp(38px, 4.2vw, 58px); }
#menu .tagline{ font-size:17px; margin-top:16px; }

/*  Narrow: the head must not eat the screen. It was row 1 of a
    1fr-first grid inside overflow:hidden, so it took everything and
    clipped the choices entirely.  */
@media (max-width:900px){
  #menu .menu-wrap{ grid-template-rows:auto auto auto auto; height:auto; overflow:auto; }
  #menu .menu-head{ min-height:220px; justify-content:flex-end; }
  #menu .menu-head::after{ display:none; }
  #menu #speciesList{ grid-template-columns:1fr; }
}

/* ==================================================================
   THE TOOLTIP AND THE FIELD MANUAL
   ------------------------------------------------------------------
   Both were left on the old dark-brown card while everything around
   them went light, so hovering any tool popped a panel from the
   previous design straight over the new tray. They were simply
   missed - the tray was restyled and these were not.
   ================================================================== */
#tip{
  position:fixed; z-index:40; max-width:290px; padding:14px 16px 13px;
  border-radius:16px; border:0;
  background:var(--p-surface); color:var(--p-ink);
  box-shadow:0 4px 10px rgba(30,26,22,.16), 0 20px 46px rgba(30,26,22,.30);
  font-family:'Nunito Sans', system-ui, sans-serif;
}
#tip .tt{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-family:'Outfit', system-ui, sans-serif; font-weight:700; font-size:16px;
  color:var(--p-ink); margin-bottom:7px;
}
#tip .tt em{
  font-style:normal; font-weight:700; font-size:13px; color:var(--p-dirt);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
#tip .td{ font-size:13.5px; line-height:1.5; color:var(--p-muted); }
#tip .tk{
  font-size:12.5px; color:var(--p-faint); margin-top:11px;
  padding-top:10px; border-top:1px solid var(--p-line);
}
#tip b, #tip strong{ color:var(--p-ink); font-weight:700; }

/* ---- the F1 manual ---- */
#help.overlay{ background:rgba(28,24,20,.62); }
#help .panel-wide{
  background:var(--p-surface); border:0; border-radius:24px;
  padding:38px 42px 32px; max-width:900px; width:min(92vw,900px);
  max-height:86vh; overflow:auto;
  box-shadow:0 10px 20px rgba(16,12,10,.28), 0 44px 90px rgba(16,12,10,.44);
  font-family:'Nunito Sans', system-ui, sans-serif;
}
#help h2{
  font-family:'Outfit', system-ui, sans-serif; font-weight:800; font-size:34px;
  letter-spacing:-.02em; text-transform:none; color:var(--p-ink);
  margin:0 0 26px; text-align:left;
}
#help .help-grid{ gap:26px 40px; margin-bottom:30px; }
#help .help-sec h4{
  font-family:'Outfit', system-ui, sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--p-faint);
  margin:0 0 10px;
}
#help .help-sec p,
#help .help-sec li{ font-size:14.5px; line-height:1.6; color:var(--p-muted); }
#help .help-sec li{ padding-left:16px; margin-bottom:5px; }
#help .help-sec li::before{ content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:999px; background:var(--p-food); }
#help .help-sec b, #help .help-sec strong{ color:var(--p-ink); font-weight:700; }
#help .big-btn{
  background:var(--p-food); border:0; border-radius:999px; color:#fff;
  padding:15px 34px; font-family:'Outfit', system-ui, sans-serif;
  font-weight:700; font-size:16px; letter-spacing:0; text-transform:none;
  box-shadow:0 3px 6px rgba(46,90,55,.22), 0 12px 26px rgba(46,90,55,.24);
}
#help .big-btn:hover{ background:#448a53; color:#fff; }

/*  The hint strip keeps one size, so naming a tool cannot shove the
    layout sideways while the pointer is moving along the tray.  */
#ctxhint{ min-width:430px; min-height:38px; display:flex; align-items:center;
  justify-content:center; }

/*  The key caps in the manual were dark chips carrying dark text on the
    new light card - unreadable. Same pills the rest of the interface
    uses, and the row gets room so the label is not jammed against them. */
#help kbd{
  display:inline-block; font-family:'Outfit', system-ui, sans-serif;
  font-weight:700; font-size:12px; letter-spacing:.02em;
  background:var(--p-sunk); border:0; border-radius:8px;
  color:var(--p-ink); padding:5px 10px; box-shadow:none;
}
#help .krow{
  display:flex; align-items:baseline; gap:14px; margin-bottom:7px;
}
#help .krow .kk{ min-width:auto; flex:0 0 auto; text-align:left; }
#help .krow > span:last-child{ font-size:14px; color:var(--p-muted); }

/* ==================================================================
   THE SURFACES THE REDESIGN MISSED
   ------------------------------------------------------------------
   Found by measuring every panel's computed background rather than
   looking: the selection card, the settings screen, the end screen,
   the raid banner, the notifications, the pause veil and the debug
   readout were all still on the old palette. They were simply never
   opened while the tray and the menu were being rebuilt.
   ================================================================== */

/* ---- shared panel: settings and the end screen ride on this ---- */
.panel-wide{
  background:var(--p-surface); border:0; border-radius:24px;
  box-shadow:0 10px 20px rgba(16,12,10,.28), 0 44px 90px rgba(16,12,10,.44);
  color:var(--p-ink);
}
.panel-wide h2{
  font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-.02em;
  text-transform:none; color:var(--p-ink); margin:0 0 22px;
}
#settings.overlay, #endscreen.overlay{ background:rgba(28,24,20,.62); }
#settings .panel-wide, #endscreen .panel-wide{ padding:36px 40px 32px; }
#settings .big-btn, #endscreen .big-btn{
  background:var(--p-food); border:0; border-radius:999px; color:#fff;
  padding:15px 34px; font-family:var(--display); font-weight:700; font-size:16px;
  letter-spacing:0; text-transform:none;
  box-shadow:0 3px 6px rgba(46,90,55,.22), 0 12px 26px rgba(46,90,55,.24);
}
#settings .big-btn:hover, #endscreen .big-btn:hover{ background:#448a53; color:#fff; }

/* ---- the end screen ---- */
#endTitle{
  font-family:var(--display); font-weight:800; font-size:38px; letter-spacing:-.02em;
  color:var(--p-food-ink); margin:0 0 12px;
}
#endTitle.lose{ color:var(--p-short); }
#endMsg{ font-size:16px; line-height:1.5; color:var(--p-muted); margin:0 0 6px; }
.end-stats{ gap:8px; margin:24px 0 28px; }
.end-stats div{
  font-size:14px; color:var(--p-muted); background:var(--p-tile);
  border-radius:12px; padding:11px 14px;
}
.end-stats b{ color:var(--p-ink); font-weight:700; font-family:var(--display); }

/* ---- the selection card ---- */
#selcard{
  width:212px; padding:14px 16px 15px; border-radius:16px; border:0;
  background:var(--p-surface); color:var(--p-ink);
  box-shadow:0 3px 6px rgba(30,26,22,.14), 0 16px 38px rgba(30,26,22,.26);
  font-family:var(--sans);
}
#selcard b, #selcard strong{ color:var(--p-ink); font-weight:700; font-family:var(--display); }
#selcard em, #selcard .sub{ font-style:normal; color:var(--p-faint); }

/* ---- the raid banner ---- */
#alert{
  background:var(--p-short); border:0; border-radius:999px; color:#fff;
  padding:12px 26px; font-family:var(--display); font-weight:700; font-size:15px;
  letter-spacing:.06em;
  box-shadow:0 3px 6px rgba(120,50,36,.26), 0 14px 30px rgba(120,50,36,.30);
}

/* ---- notifications ---- */
#notifications > *{
  background:var(--p-surface); color:var(--p-ink); border:0; border-radius:14px;
  padding:11px 16px; font-family:var(--sans); font-size:14px;
  box-shadow:0 3px 6px rgba(30,26,22,.12), 0 14px 30px rgba(30,26,22,.22);
}
#notifications b, #notifications strong{ color:var(--p-ink); font-weight:700; }

/* ---- paused ---- */
#pauseveil{ background:rgba(28,24,20,.35); }
#pauseveil span{
  background:var(--p-surface); color:var(--p-ink); border-radius:999px;
  padding:12px 30px; font-family:var(--display); font-weight:700; font-size:14px;
  letter-spacing:.24em; text-shadow:none;
  box-shadow:0 4px 10px rgba(16,12,10,.28), 0 20px 44px rgba(16,12,10,.34);
}

/* ---- the corner readout ---- */
#stats{
  font-family:var(--display); font-size:11px; font-weight:600;
  color:rgba(251,250,247,.42); letter-spacing:.04em;
}

/* ---- pills carry the display face, not the page default ---- */
.stat, .speedbtns, #dayBox{ font-family:var(--display); }

/* ---- the settings rows ----
   The panel went light but the controls inside it did not: the chosen
   option stayed the old amber and the unchosen ones were pale text on
   a pale card, close to invisible. Same pills the rest of the
   interface uses.  */
/*  The label sits OUT of the flex flow, and the row is padded to clear
    it. In flow it only reserved space on the first line, so when the
    GAME row ran out of width its fourth button wrapped and landed under
    the label instead of under the other buttons - START OVER hanging off
    to the left on its own line.  */
#settings .sys-row{
  position:relative; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:14px 0 14px 98px; border-bottom:1px solid var(--p-line);
  row-gap:8px;
}
#settings .sys-row:last-of-type{ border-bottom:0; }
#settings .sys-row > label{
  position:absolute; left:0; top:20px;
  font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--p-faint); text-align:left;
}
#settings .mini-btn{
  background:var(--p-sunk); border:0; border-radius:999px;
  color:var(--p-muted); padding:9px 16px; cursor:pointer;
  font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.02em;
  transition:background .12s, color .12s;
}
#settings .mini-btn:hover{ background:#e6e3da; color:var(--p-ink); border:0; }
#settings .mini-btn.on{ background:var(--p-ink); border:0; color:var(--p-surface); font-weight:700; }
#settings .mini-btn:focus-visible{ outline:2px solid var(--p-ink); outline-offset:2px; }

#settings .sys-row input[type=range]{
  -webkit-appearance:none; appearance:none; flex:1; height:6px;
  border-radius:999px; background:var(--p-sunk); outline:none;
}
#settings .sys-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:999px;
  background:var(--p-food); border:0; cursor:pointer;
  box-shadow:0 1px 3px rgba(30,26,22,.28);
}
#settings .sys-row input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:999px; background:var(--p-food);
  border:0; cursor:pointer;
}

/* ---- the counters must not breathe ----
   tabular-nums only equalises the WIDTH OF A DIGIT; it does nothing
   about the NUMBER of digits. Food going 99 -> 580 -> 1204 re-sized the
   pill every time, and the rate badge appearing and disappearing shoved
   the two pills beside it sideways. Every number gets a fixed slot wide
   enough for the largest value it will hold, and the rate keeps its slot
   whether or not it has anything in it.  */
.stat{ font-variant-numeric:tabular-nums; }
.stat b{
  min-width:3.6ch; text-align:right; display:inline-block;
  font-variant-numeric:tabular-nums;
}
.stat .rate{
  /*  5 characters, because the rate runs to things like -42.2 and +12.4.
      Sized at 3.4 it still nudged the row whenever the number went wide. */
  min-width:5ch; text-align:left; display:inline-block;
  font-variant-numeric:tabular-nums;
}
#dayBox b{
  /*  3 characters - the day counter reaches three digits on a long run
      and the pill was still growing by 6px when it did.  */
  min-width:3ch; text-align:right; display:inline-block;
  font-variant-numeric:tabular-nums;
}
/*  Costs on the tiles line up for the same reason - a two digit price
    must not shift the label above it.  */
#toolbar .tool em{ min-width:2.4ch; text-align:center; display:inline-block; }

/*  The drag box on the new palette. */
#selbox{
  border:1.5px solid var(--p-food); background:rgba(78,155,95,.14);
  border-radius:6px;
}

/* ==================================================================
   NARROW WINDOWS
   ------------------------------------------------------------------
   Found by running the layout audit at every window size rather than
   only at the one I happened to be using. At 1024x700 the top bar ran
   61px off the right edge - the three stat pills, the goal line, the
   day box and the speed buttons are a fixed-width row that simply does
   not fit - and the manual's Close button sat below its own panel.
   ================================================================== */
#bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  max-width:calc(100vw - 24px); row-gap:10px;
}
/*  The goal line is the only part that can afford to give: it shrinks and
    ellipsises so the pills and the speed control keep their size.  */
#goal{
  flex:1 1 120px; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap;
}
.stat, #dayBox, .speedbtns{ flex:0 0 auto; }

@media (max-width:1120px){
  .stat{ padding:9px 15px 9px 10px; gap:9px; }
  .stat b{ font-size:19px; }
  .stat span{ display:none; }        /* the icon already says which it is */
  #dayBox{ padding:9px 14px; }
  .speedbtns button{ width:32px; height:32px; }
}
@media (max-width:860px){
  #goal{ display:none; }             /* the hint strip under the tray says it */
  #toolbar{ width:min(96vw, 688px); }
}

/*  The manual scrolls its own body, so the Close button stays on the
    panel instead of being pushed off the end of it.  */
#help .panel-wide{ display:flex; flex-direction:column; overflow:hidden; }
#help .help-grid{ overflow:auto; min-height:0; flex:1 1 auto; }
#help .big-btn{ flex:0 0 auto; align-self:flex-start; }

/*  The single-column collapse fired at 900px, which stacked all six
    species and pushed the menu 409px past the bottom of an 820x640
    window. Two columns survive much further down; the split only
    collapses when the panel genuinely cannot hold them.  */
@media (max-width:900px) and (min-width:660px){
  #menu .menu-wrap{ grid-template-columns:minmax(240px,34%) 1fr;
    grid-template-rows:auto auto auto; height:auto; min-height:100%;
    overflow:auto; align-items:start; }
  #menu .menu-head{ grid-column:1; grid-row:1 / span 3; min-height:100vh;
    justify-content:center; padding:32px 28px; }
  /*  Nothing inside scrolls at this width - the whole panel does.
      Scrolling the choosing column alone did not hold it: the column
      kept growing past its grid row and the graphics pills ended up
      UNDERNEATH the buttons, rendered and unclickable. Measured with
      elementFromPoint: all four pills answered btnStart or menu-foot.
      One scroller instead of two nested ones cannot overlap.  */
  #menu .menu-cols, #menu .menu-cols.two{ grid-column:2; grid-row:1;
    grid-template-columns:1fr; gap:18px; padding:26px 28px 0;
    overflow:visible; min-height:0; }
  #menu #speciesList{ grid-template-columns:1fr 1fr; gap:6px; }
  #menu #diffList{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
  #menu .menu-foot{ grid-column:2; grid-row:2; padding:16px 28px 0; }
  #menu .credit{ grid-column:2; grid-row:3; padding:10px 28px 16px; }
  #menu .choice{ padding:9px 11px 8px; border-radius:12px; }
  #menu .choice .cn{ font-size:15px; margin-bottom:2px; }
  #menu .choice .perk, #menu .choice .cd{ font-size:12px; line-height:1.3; }
  #menu .menu-head h1{ font-size:34px; }
  #menu .tagline{ font-size:14px; margin-top:10px; }
  #menu .big-btn{ padding:12px 24px; font-size:15px; }
  #menu .ghost-btn{ padding:11px 16px; font-size:13px; }
}