:root{
  --paper:#f4efe0;
  --panel:#fffaf0;
  --ink:#2b2a24;
  --ink-soft:#6b6656;
  --accent:#3f7d3a;
  --accent-dark:#2c5a29;
  --line:#e2d9c2;
  --chip:#ece3cc;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  display:flex;
  justify-content:center;
  padding:12px;
}
.app{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  max-width:1104px;
  width:100%;
}
.stage{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  width:100%;
  max-width:100%;
  box-shadow:0 6px 24px rgba(40,30,10,0.18);
  border: 4px solid #ffffff;
  line-height:0;
}
canvas#world{ display:block; width:100%; height:auto; background:#8c8058; cursor:grab; touch-action:none; }
canvas#world.dragging{ cursor:grabbing; }
canvas#world.selecting{ cursor:crosshair; }
canvas#world.hoverable{ cursor:pointer; } /* hovering something a click would actually pin/select — see the mousemove handler in ui.js */
.zoomhint{
  position:absolute; right:10px; bottom:10px;
  background:rgba(20,20,10,0.55); color:#fff;
  padding:4px 9px; border-radius:8px; font-size:11px;
  pointer-events:none;
}
/* fullscreen toggle — mainly a mobile win: the Fullscreen API hides the
   browser's own address-bar/nav chrome, giving the canvas real screen
   space it otherwise never gets on a phone. Left available on desktop too
   (harmless there, just less necessary since F11 already exists). */
.fullscreen-btn{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:8px; border:none;
  background:rgba(20,20,10,0.55); color:#fff;
  font-size:17px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.fullscreen-btn:active{ background:rgba(20,20,10,0.8); }
/* :fullscreen just makes .stage the size of the whole screen by default —
   without this the canvas (width:100%; height:auto) would only fill the
   available width, letterboxed oddly rather than actually using the extra
   height a fullscreen phone screen just gained */
.stage:fullscreen, .stage:-webkit-full-screen{
  display:flex; align-items:center; justify-content:center;
  width:100vw; height:100vh; max-width:100vw;
  background:#000; border:none; border-radius:0;
}
.stage:fullscreen canvas#world, .stage:-webkit-full-screen canvas#world{
  width:auto; height:100%; max-width:100vw; max-height:100vh;
}
/* ============================== hint / tooltip card ==============================
   Redesigned as a small "trading card": layered dark background, a gold
   rim + species-colored top accent strip, a round emoji badge instead of a
   flat dot, a framed photo, HUD-style stat gauges, and a boxed flavor-text
   footer. See buildHintHTML()/buildCorpseHintHTML()/buildPlantHintHTML()
   in hint.js, which all share the .hint-accent + .hint-body wrapper via
   hintCard() there. Font stack: Baloo 2 (titles, playful/rounded — fits
   the game's kid-friendly tone) + Nunito Sans (body), loaded from Google
   Fonts in index.html/debug.html; both fall back to the app's usual
   system-ui stack if that fails to load. */
.hint{
  position:absolute; left:10px; top:10px;
  border-radius:15px; max-width:260px;
  background:radial-gradient(120% 90% at 30% 0%, #2b2419 0%, #1b160f 55%, #120e0a 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 0 0 1.5px rgba(232,199,102,0.35),
    0 10px 28px rgba(0,0,0,0.45);
  color:#efe7d0;
  font-family:"Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:12px; line-height:1.45;
  pointer-events:none; opacity:0; transition:opacity .15s;
  overflow:hidden;
}
.hint::before{
  content:""; position:absolute; inset:0; border-radius:15px; padding:1px;
  background:linear-gradient(160deg, rgba(255,255,255,0.12), transparent 40%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.hint.show{opacity:1;}
.hint.pinned{
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 0 0 1.5px rgba(232,199,102,0.65),
    0 0 14px rgba(232,199,102,0.28),
    0 10px 28px rgba(0,0,0,0.45);
}
.hint-accent{ height:4px; width:100%; }
.hint-body{ padding:10px 12px 11px; position:relative; }

.hint-header{ display:flex; align-items:center; gap:8px; }
.hint-badge{
  flex-shrink:0; width:32px; height:32px; border-radius:50%;
  background:radial-gradient(65% 65% at 35% 30%, #3a3226, #17130c);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.hint-name-block{ flex:1; min-width:0; }
.hint-name-row{ display:flex; align-items:baseline; gap:6px; }
.hint-name{ font-family:"Baloo 2","Nunito Sans",sans-serif; font-weight:700; font-size:14px; color:#fff; letter-spacing:.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hint-sex{
  flex-shrink:0; width:14px; height:14px; border-radius:50%; font-size:9px; font-weight:800;
  display:flex; align-items:center; justify-content:center; color:#1b160f;
}
.hint-sex.f{ background:#e39aa8; }
.hint-sex.m{ background:#7fa8d6; }
.hint-latin{ font-size:9.5px; font-style:italic; color:#e8c766; opacity:.8; margin-top:1px; }

.hint-photo-frame{ margin:9px 0 8px; border-radius:11px; padding:3px; background:linear-gradient(160deg, rgba(232,199,102,0.5), rgba(232,199,102,0.08)); }
.hint-photo-inner{ border-radius:9px; overflow:hidden; position:relative; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4); }
.hint-photo{ display:block; width:100%; height:108px; object-fit:cover; }
.hint-photo-fade{ position:absolute; left:0; right:0; bottom:0; height:34px; background:linear-gradient(transparent, rgba(16,13,9,0.9)); pointer-events:none; }
.hint-photo-tag{
  position:absolute; right:6px; bottom:5px; font-size:9px; font-weight:700; letter-spacing:.03em;
  background:rgba(16,13,9,0.75); color:#e8c766; padding:2px 7px; border-radius:20px;
  border:1px solid rgba(232,199,102,0.4);
}

.hint-rows{ display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.hint-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11px; }
.hint-row .hint-k{ display:flex; align-items:center; gap:5px; color:#a89f89; }
.hint-row .hint-ic{ font-size:10.5px; width:13px; text-align:center; flex-shrink:0; }
.hint-row b{ font-weight:700; color:#fff; }
.hint-pill{ font-size:9px; font-weight:800; letter-spacing:.02em; padding:2px 8px; border-radius:20px; }
.hint-pill.fresh{ background:rgba(201,79,79,0.22); color:#e2716e; border:1px solid rgba(201,79,79,0.4); }
.hint-pill.stale{ background:rgba(138,106,78,0.25); color:#c9a06e; border:1px solid rgba(138,106,78,0.5); }

.hint-section{
  font-size:8.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:#e8c766; opacity:.85; margin:10px 0 5px; display:flex; align-items:center; gap:6px;
}
.hint-section::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(232,199,102,0.35), transparent); }

.hint-hud{
  background:rgba(0,0,0,0.22); border:1px solid rgba(255,255,255,0.06);
  border-radius:10px; padding:8px 9px 7px; margin-top:8px;
  display:flex; flex-direction:column; gap:6px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.4);
}
.hint-stat{ display:flex; align-items:center; gap:7px; }
.hint-stat-ic{ font-size:11px; width:14px; text-align:center; flex-shrink:0; }
.hint-bar{ flex:1; height:7px; border-radius:5px; background:rgba(0,0,0,0.5); box-shadow:inset 0 1px 2px rgba(0,0,0,0.6); overflow:hidden; position:relative; }
.hint-bar>div{ height:100%; border-radius:5px; position:relative; }
.hint-bar>div::after{ content:""; position:absolute; inset:0 0 55% 0; background:linear-gradient(rgba(255,255,255,0.32), transparent); }
.hint-stat-pct{ font-size:9.5px; font-weight:700; color:#bdb197; width:24px; text-align:right; font-variant-numeric:tabular-nums; }

/* burrow/hollow "interior" illustration — see hintChamberScene() in
   hint.js — a small drawn cross-section scene (ground+tunnel+chamber, or
   trunk+carved cavity) with each occupant's real sprite sitting inside;
   the scene paints its own full-bleed background so .hint-chamber itself
   just clips it to rounded corners and adds the same inset depth shadow
   every other tooltip panel here uses */
.hint-chamber{
  margin:9px 0; border-radius:12px; overflow:hidden;
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}
.hint-chamber svg{ display:block; }
.hint-chamber-empty{
  margin:9px 0; padding:14px 10px; border-radius:12px; text-align:center;
  background:radial-gradient(120% 100% at 50% 15%, #241c12 0%, #14100a 100%);
  box-shadow:inset 0 2px 8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  color:#8f8770; font-size:10px; font-style:italic;
}
.hint-fact{ margin-top:9px; padding:7px 9px; border-radius:9px; background:rgba(0,0,0,0.18); border-top:1px solid rgba(232,199,102,0.3); display:flex; gap:5px; }
.hint-fact .hint-quote{ color:#e8c766; font-size:14px; line-height:1; font-family:Georgia,serif; flex-shrink:0; }
.hint-fact p{ margin:0; font-size:9.5px; line-height:1.42; color:#a89f89; font-style:italic; }
.hint-note{ margin-top:7px; font-size:9px; color:#8f8770; font-style:italic; text-align:center; }
/* .hint itself is pointer-events:none (it must not block clicks on the
   canvas underneath) — an actionable bit inside it (family-tree toggle,
   jump-to-individual rows) has to opt back in explicitly. */
/* inline-block + padding/negative-margin so the actual clickable hit box
   is noticeably bigger than the tight text glyphs alone (an inline span's
   hit area otherwise barely covers the letters themselves, easy to miss
   on a small 9px link like the rodokmen toggle) — visually unchanged
   thanks to the matching negative margin, just more forgiving to click. */
.hint-link{ pointer-events:auto; cursor:pointer; color:#e8c766; text-decoration:underline; text-decoration-color:rgba(232,199,102,0.4); display:inline-block; padding:4px 3px; margin:-4px -3px; }
.hint-link:hover{ color:#f2d98a; }
.hint-row.hint-link{ display:flex; text-decoration:none; }
.hint-row.hint-link .hint-k{ text-decoration:none; }

/* ability "spells" — WoW-style ability icon: dark square frame, gold border
   when ready, a radial dark sweep (via conic-gradient) that shrinks back to
   nothing as the cooldown drains, matching the classic ability-cooldown
   swipe, plus a countdown number while it's up. */
.hint-spells{ display:flex; flex-direction:column; gap:7px; }
.spell-slot{ display:flex; align-items:center; gap:8px; }
.spell-icon{
  position:relative; width:34px; height:34px; border-radius:7px; flex-shrink:0;
  background:linear-gradient(160deg,#332e24,#1c1912);
  border:2px solid #6b6252;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; overflow:hidden;
}
.spell-icon.ready{ border-color:#e8c766; box-shadow:0 0 6px rgba(232,199,102,0.6); }
.spell-icon.active{ border-color:#5fd66b; box-shadow:0 0 8px rgba(95,214,107,0.75); animation:spellPulse 0.6s ease-in-out infinite alternate; }
.spell-icon.cd .spell-emoji{ opacity:0.4; filter:grayscale(1); }
.spell-icon.cd::after{
  content:""; position:absolute; inset:0;
  background:conic-gradient(rgba(0,0,0,0.78) var(--cd,0deg), transparent var(--cd,0deg));
}
.spell-cd-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; text-shadow:0 1px 2px #000; z-index:1; }
.spell-info{ display:flex; flex-direction:column; gap:1px; }
.spell-name{ font-size:11.5px; font-weight:700; color:#fff; }
.spell-status{ font-size:9.5px; color:#c9c3b0; }
@keyframes spellPulse{ from{ box-shadow:0 0 5px rgba(95,214,107,0.55); } to{ box-shadow:0 0 12px rgba(95,214,107,1); } }
.panel{
  width:100%;
  background: var(--panel);
  border-radius:18px;
  padding:16px 16px 18px;
  box-shadow:0 6px 24px rgba(40,30,10,0.12);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.panel-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 24px;
}
@media (max-width:640px){
  .panel-grid{ grid-template-columns:1fr; }
  .spawn-grid{ grid-template-columns:1fr; }
  body{ padding:8px; }
  /* bigger tap targets — 7px/5px padding is fine for a mouse pointer but
     cramped for a finger */
  button{ padding:10px 13px; font-size:14px; }
  button.small{ padding:7px 10px; font-size:12.5px; }
  .zoomhint{ font-size:10px; max-width:62%; line-height:1.4; }
}
h1{font-size:19px; margin:0 0 2px;}
.ver{font-size:11px; font-weight:600; color:var(--ink-soft); vertical-align:middle; }
.sub{font-size:12.5px; color:var(--ink-soft); margin:0;}
h2{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 0 8px;}
.row{display:flex; gap:8px; flex-wrap:wrap;}
.seed-input{
  font-family:inherit; font-size:12.5px; width:110px;
  border:1px solid var(--line); border-radius:8px; padding:5px 8px;
  background:#fff; color:var(--ink);
}
button{
  font-family:inherit; font-size:13px; font-weight:600;
  border:1px solid var(--line); background:var(--chip); color:var(--ink);
  padding:7px 10px; border-radius:10px; cursor:pointer;
  transition: transform .08s ease, background .15s ease;
}
button:hover{ background:#e2d5ab; }
button:active{ transform: scale(0.96); }
button.primary{ background:var(--accent); color:#fff; border-color:var(--accent-dark); }
button.primary:hover{ background:var(--accent-dark); }
button.active{ background:var(--accent-dark); color:#fff; }
button.small{ padding:5px 8px; font-size:12px; }
.spawn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.spawn-grid button{ text-align:left; }
.stats{ font-size:13px; }
.stat-row{ display:flex; align-items:center; gap:7px; padding:3px 0; }
.dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.stat-name{ flex:1; color:var(--ink-soft); }
.stat-val{ font-weight:700; font-variant-numeric: tabular-nums; }
.day-badge{
  font-size:12.5px; background:var(--chip); border-radius:10px;
  padding:4px 9px; display:inline-block; font-weight:600;
}
#ctrlInfo{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
#ctrlInfo b{ color:var(--ink); }
.energybar{ height:6px; background:#e2d9c2; border-radius:4px; overflow:hidden; margin-top:5px;}
.energybar > div{ height:100%; background:var(--accent); width:50%; }
.note{ font-size:11.5px; color:var(--ink-soft); font-style:italic; line-height:1.5; border-top:1px dashed var(--line); padding-top:10px; margin:0; }
hr{ border:none; border-top:1px solid var(--line); margin:0; }
.chartWrap{ position:relative; }
.chart-title{ font-size:11px; color:var(--ink-soft); margin-bottom:3px; }
.daytrack-label{ font-size:11px; color:var(--ink-soft); margin-bottom:4px; }
.day-track{
  position:relative; height:10px; border-radius:6px;
  background: linear-gradient(90deg,
    #10142a 0%, #2a3560 8%, #f3b56b 19%, #d7ecff 33%,
    #d7ecff 67%, #f3b56b 81%, #2a3560 92%, #10142a 100%);
}
.day-indicator{
  position:absolute; top:50%; left:0%; width:13px; height:13px;
  background:#fff; border:2px solid var(--accent-dark); border-radius:50%;
  transform:translate(-50%,-50%); box-shadow:0 1px 4px rgba(0,0,0,0.35);
}
.tip{
  position:absolute; pointer-events:none; background:rgba(20,20,10,0.85); color:#fff;
  font-size:11px; padding:5px 7px; border-radius:6px; opacity:0; transform:translate(-50%,-110%);
  white-space:nowrap;
}
.event-log{
  max-height:190px; overflow-y:auto; display:flex; flex-direction:column;
  font-size:11.5px; border:1px solid var(--line); border-radius:10px;
  background:var(--chip); padding:2px 10px;
}
.log-row{
  padding:4px 0; border-bottom:1px dashed var(--line); line-height:1.4;
}
.log-row:last-child{ border-bottom:none; }
.log-tick{
  color:var(--ink-soft); font-variant-numeric:tabular-nums; margin-right:6px;
  font-size:10.5px;
}
.log-loc{
  display:inline-block; cursor:pointer; background:var(--panel); border:1px solid var(--line);
  border-radius:6px; padding:1px 6px; margin-right:6px; font-size:10.5px;
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.log-loc:hover{ background:var(--accent); color:#fff; border-color:var(--accent-dark); }
.log-empty{ color:var(--ink-soft); font-style:italic; }