/* ---------- HUD ---------- */
  #hud{position:absolute;inset:0;pointer-events:none;font-size:16px;opacity:0;transition:opacity 1.2s}
  #hud.on{opacity:1}
  .vitals{position:absolute;top:2.2em;left:2.4em}
  .vname{font-size:.95em;letter-spacing:.18em;text-transform:uppercase;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.8)}
  .vstage{font-size:.72em;letter-spacing:.14em;opacity:.55;margin-top:.15em;text-shadow:0 1px 6px rgba(0,0,0,.8)}
  .bar{width:13em;height:.5em;background:rgba(0,0,0,.45);border:1px solid rgba(232,228,212,.25);border-radius:2em;margin-top:.55em;overflow:hidden}
  .bar i{display:block;height:100%;border-radius:2em;transition:width .25s}
  #hpFill{background:linear-gradient(90deg,#8fae5c,#b9cf7a);width:100%}
  #hpFill.low{background:linear-gradient(90deg,#c05a3e,#d98052)}
  #growFill{background:linear-gradient(90deg,#b98632,#e8b04b);width:0%}
  .blabel{font-size:.6em;letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-top:.35em}
  #era{position:absolute;top:2.2em;right:2.6em;text-align:right;text-shadow:0 1px 8px rgba(0,0,0,.9)}
  #era .e1{font-size:1em;letter-spacing:.24em;text-transform:uppercase}
  #era .e2{font-size:.68em;letter-spacing:.16em;opacity:.55;margin-top:.2em}
  #hint{position:absolute;bottom:2.4em;left:50%;transform:translateX(-50%);font-size:.85em;letter-spacing:.14em;opacity:.7;text-shadow:0 1px 8px #000;transition:opacity 2s;white-space:nowrap}
  #hint.gone{opacity:0}
  #toast{position:absolute;top:22%;left:50%;transform:translateX(-50%);font-size:1.25em;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);opacity:0;transition:opacity .6s;text-shadow:0 0 24px rgba(232,176,75,.55),0 2px 8px #000;white-space:nowrap}
  /* explicit UI state model: HUD controls exist for the pointer only in the
     states where they are visually active. everywhere else they are
     visibility:hidden with no hitbox, no hover, no cursor and no focus */
  #pauseBtn,#encyBtn{pointer-events:none;visibility:hidden}
  #stage[data-ui="PLAYING"] #pauseBtn,#stage[data-ui="PLAYING"] #encyBtn{pointer-events:auto;visibility:visible}
  #stage[data-ui="PAUSED"] #pauseBtn{pointer-events:auto;visibility:visible;z-index:45}
  #pauseBtn{position:absolute;bottom:1.6em;right:1.8em;cursor:pointer;width:2.6em;height:2.6em;border-radius:50%;border:1px solid rgba(232,228,212,.35);background:rgba(5,12,9,.5);color:var(--ink);font-size:1em;display:flex;align-items:center;justify-content:center;letter-spacing:0}
  #pauseBtn:hover{background:rgba(232,228,212,.15)}
  #langSel{position:absolute;bottom:1.6em;left:1.8em;z-index:60;display:flex;gap:.5em}
  #pauseOverlay{z-index:40}
  #langSel button{cursor:pointer;font-family:inherit;font-size:.72em;letter-spacing:.18em;color:var(--ink);background:rgba(5,12,9,.5);border:1px solid rgba(232,228,212,.3);border-radius:2em;padding:.55em 1.1em;opacity:.65;transition:all .25s}
  #langSel button:hover{opacity:1}
  #langSel button.active{opacity:1;border-color:var(--amber);color:var(--amber)}

  /* ---------- Overlays ---------- */
  /* hidden overlays are removed from the pointer interaction tree entirely:
     visibility:hidden makes the whole subtree unhittable and unfocusable,
     regardless of any pointer-events value on children */
  .overlay{z-index:30;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(4,9,7,.82);opacity:0;pointer-events:none;visibility:hidden;transition:opacity .8s,visibility 0s linear .8s;font-size:16px}
  .overlay.on{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .8s,visibility 0s}
  .ov-title{font-size:2.6em;letter-spacing:.26em;text-transform:uppercase;font-weight:normal}
  .ov-sub{font-size:.95em;letter-spacing:.12em;opacity:.65;margin-top:1.2em;max-width:34em;line-height:1.8}
  .btn{margin-top:2.6em;cursor:pointer;font-family:inherit;font-size:.9em;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid rgba(232,228,212,.5);padding:1em 3em;transition:all .3s}
  .btn:hover{background:rgba(232,228,212,.12);border-color:var(--ink)}
  #deathOverlay .ov-title{color:var(--danger);text-shadow:0 0 30px rgba(212,87,59,.35)}
  #jumpOverlay{background:rgba(3,7,5,.92)}
  #jumpOverlay .ov-title{color:var(--amber);text-shadow:0 0 30px rgba(232,176,75,.3)}
  .lineage{display:flex;align-items:center;justify-content:center;gap:.7em;margin-top:2.6em;flex-wrap:wrap;max-width:62em}
  .lnode{border:1px solid rgba(232,228,212,.28);padding:.85em 1.2em;font-size:.72em;letter-spacing:.16em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.35em;background:rgba(10,20,16,.6)}
  .lnode em{font-style:normal;font-size:.72em;letter-spacing:.24em;opacity:.45}
  .lnode.past{opacity:.6}
  .lnode.current{border-color:var(--amber);color:var(--amber);box-shadow:0 0 18px rgba(232,176,75,.18)}
  .lnode.locked{opacity:.38}
  .lsep{opacity:.35;font-size:.9em}

  /* ---------- adaptation panel on the evolution screen ---------- */
  #adaptBox{margin-top:1.8em;max-width:42em;border:1px solid rgba(232,228,212,.2);background:rgba(10,20,16,.55);padding:1.2em 1.8em}
  .ad-title{font-size:.72em;letter-spacing:.26em;text-transform:uppercase;color:var(--amber);opacity:.9}
  .ad-line{font-size:.85em;line-height:1.7;opacity:.85;margin-top:.7em}
  .ad-influence{font-size:.68em;letter-spacing:.14em;text-transform:uppercase;opacity:.45;margin-top:.8em}
  .ad-btn{margin-top:.9em;cursor:pointer;font-family:inherit;font-size:.62em;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid rgba(232,228,212,.3);padding:.5em 1.4em;opacity:.6}
  .ad-btn:hover{opacity:1}
  #adaptDetails{margin-top:.9em;font-size:.7em;letter-spacing:.1em;opacity:.6;line-height:2}
  .hidden{display:none}
  .favored{display:none;font-size:.6em;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(232,176,75,.5);padding:.4em .9em;margin:0 auto .9em;width:fit-content}
  .branch.fav .favored{display:block}
  .branch.fav{border-color:rgba(232,176,75,.55)}

  /* ---------- evolution encyclopedia ---------- */
  #encyBtn{position:absolute;bottom:1.6em;right:5.1em;cursor:pointer;width:2.6em;height:2.6em;border-radius:50%;border:1px solid rgba(232,228,212,.35);background:rgba(5,12,9,.5);color:var(--ink);font-size:1em;display:flex;align-items:center;justify-content:center}
  #encyBtn:hover{background:rgba(232,228,212,.15)}
  #encyOverlay{background:rgba(3,7,5,.94);justify-content:flex-start;padding:3.5em 0 2em}
  #encyOverlay .ov-title{font-size:1.7em}
  .ency-wrap{display:flex;gap:2em;margin-top:1.6em;width:82%;max-width:75em;flex:1;min-height:0}
  .ency-list{width:16em;overflow-y:auto;display:flex;flex-direction:column;gap:.45em;padding-right:.5em}
  .ency-item{cursor:pointer;font-family:inherit;font-size:.72em;letter-spacing:.14em;text-transform:uppercase;text-align:left;color:var(--ink);background:rgba(10,20,16,.6);border:1px solid rgba(232,228,212,.2);padding:.8em 1.1em;transition:all .2s}
  .ency-item:hover{border-color:rgba(232,228,212,.5)}
  .ency-item.sel{border-color:var(--amber);color:var(--amber)}
  .ency-item.lockedSp{opacity:.35;cursor:default}
  .ency-detail{flex:1;overflow-y:auto;text-align:left;border:1px solid rgba(232,228,212,.18);background:rgba(10,20,16,.45);padding:1.6em 2em}
  .ed-name{font-size:1.15em;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
  .ed-meta{font-size:.7em;letter-spacing:.12em;opacity:.6;margin-top:.9em;line-height:2;text-transform:uppercase}
  .ed-desc{font-size:.85em;line-height:1.8;opacity:.85;margin-top:1em;max-width:38em}
  .ed-ach-t{font-size:.68em;letter-spacing:.24em;text-transform:uppercase;opacity:.55;margin-top:1.6em}
  .ed-ach{font-size:.78em;margin-top:.7em;line-height:1.65;opacity:.9}
  .ed-ach.lockedA{opacity:.4}
  .ed-ach b{font-weight:normal;letter-spacing:.1em;text-transform:uppercase;font-size:.85em}
  .ency-lin{display:flex;align-items:center;gap:.6em;margin-top:1.4em;flex-wrap:wrap}
  .ency-note{font-size:.62em;letter-spacing:.12em;opacity:.4;margin-top:1.6em;line-height:1.9;max-width:46em;text-align:center}
  #encyClose{margin-top:1.4em;padding:.7em 2.4em;font-size:.75em}
  .ency-tabs{display:flex;gap:.6em;margin-top:1.3em}
  .etab{cursor:pointer;font-family:inherit;font-size:.72em;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:rgba(10,20,16,.6);border:1px solid rgba(232,228,212,.25);padding:.7em 1.6em;transition:all .2s}
  .etab:hover{border-color:rgba(232,228,212,.55)}
  .etab.sel{border-color:var(--amber);color:var(--amber)}
  .ency-item{display:flex;align-items:center;gap:.7em}
  .ency-item canvas{flex:0 0 auto;width:3.2em;height:2.2em;background:rgba(4,10,7,.6);border:1px solid rgba(232,228,212,.12)}
  .ency-item .cnt{margin-left:auto;opacity:.5;font-size:.9em;letter-spacing:.08em}
  .ed-art{display:block;width:16em;height:10em;background:radial-gradient(ellipse at center,rgba(30,44,34,.8),rgba(8,14,10,.9));border:1px solid rgba(232,228,212,.22);margin-bottom:1.1em}
  .ed-catdesc{font-size:.72em;opacity:.55;line-height:1.8;margin-top:.7em;max-width:34em}
  .kn-entry{margin-top:1.3em}
  .kn-entry .kn-t{font-size:.82em;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
  .kn-entry .kn-d{font-size:.8em;line-height:1.8;opacity:.8;margin-top:.4em;max-width:40em}
  .kn-entry.lockedK{opacity:.35}

  /* ---------- mini toast (discoveries + achievements) ---------- */
  #miniToast{position:absolute;bottom:5.4em;right:1.8em;font-size:.7em;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:rgba(5,12,9,.75);border:1px solid rgba(232,176,75,.45);padding:.9em 1.5em;opacity:0;transition:opacity .4s;pointer-events:none;max-width:24em;text-align:right}
  #miniToast b{font-weight:normal;color:var(--amber)}

  /* ---------- Cinematic ---------- */
  #cine{background:rgba(3,7,5,.55)}
  #cineLine{font-size:1.7em;letter-spacing:.16em;line-height:1.6;max-width:26em;opacity:0;transition:opacity 1.1s;text-shadow:0 2px 20px #000}
  #cineLine.show{opacity:1}
  #skipBtn{position:absolute;bottom:2.2em;right:2.6em;margin:0;padding:.7em 1.8em;font-size:.75em;opacity:.7}

  /* ---------- Evolution choice ---------- */
  #evoOverlay .ov-title{font-size:2em;color:var(--amber)}
  .branches{display:flex;gap:2.5em;margin-top:2.8em}
  .branch{width:19em;padding:2em 1.8em 2.2em;border:1px solid rgba(232,228,212,.3);background:rgba(10,20,16,.65);cursor:pointer;transition:all .3s;text-align:center}
  .branch:hover{border-color:var(--amber);background:rgba(232,176,75,.08);transform:translateY(-4px)}
  .branch canvas{width:9em;height:6em;display:block;margin:0 auto .5em}
  .b-name{font-size:1.05em;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
  .b-latin{font-size:.72em;font-style:italic;opacity:.55;margin-top:.3em}
  .b-desc{font-size:.8em;line-height:1.7;opacity:.8;margin-top:1em}
  .b-traits{font-size:.68em;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-top:1em;line-height:2}