/* ==========================================================================
   INFERNO — world.css · veil, chrome, descent stations, codex, carta, commento
   ========================================================================== */

/* ============ VEIL (loading / entry state) ============ */
#velo{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:
    radial-gradient(1200px 700px at 50% -10%, #1c2430 0%, #0c0f13 62%),
    #0c0f13;
  transition:opacity .7s ease,visibility .7s;
}
#velo[hidden]{display:grid !important}
#velo.gone{opacity:0;visibility:hidden;pointer-events:none}
.velo-inner{text-align:center;padding:24px;max-width:620px;color:#ece0c6;position:relative}
.velo-arch{width:min(200px,42vw);color:#ece0c6;opacity:.9;margin-bottom:6px;animation:archGlow 3.2s ease-in-out infinite}
@keyframes archGlow{0%,100%{opacity:.75}50%{opacity:1}}
.velo-eyebrow{font-family:var(--f-display);font-weight:700;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;margin:6px 0 2px;color:#a9bbc7}
.velo-title{font-size:clamp(3.2rem,11vw,6.4rem);margin:.06em 0 .1em;font-weight:700;letter-spacing:.06em;color:#ece0c6;text-shadow:6px 6px 0 rgba(0,0,0,.55)}
.velo-sub{font-size:1.02rem;margin:.2em 0 1.2em;color:#bfc7c9}
.velo-quote{font-style:italic;margin:1.2em 0 1.6em;font-size:1.12em;color:#d9cdb2}
.velo-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.velo-hint{margin-top:2.2em;font-size:.85rem;color:#8b96a0}
.velo-hint kbd{color:#c9d2d8}

/* ============ FIXED CHROME ============ */
#cielo{position:fixed;inset:0;z-index:1;pointer-events:none}
.chrome{position:fixed;z-index:40}
#cima{
  top:0;left:0;right:0;
  background:linear-gradient(rgba(9,7,6,.88),rgba(9,7,6,.38) 78%,transparent);
  padding:10px 16px 16px;transition:transform .4s ease,opacity .4s ease;
}
.cima-row{display:flex;align-items:center;gap:18px;max-width:1280px;margin:0 auto}
.wordmark{background:none;border:none;cursor:pointer;text-align:left;padding:2px 4px;color:var(--paper)}
.wm-in{display:block;font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:.3em;color:var(--glow)}
.wm-sub{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-family:var(--f-display);font-weight:700}
.cima-depth{flex:1;min-width:0;text-align:center;line-height:1.25}
.depth-label{display:block;font-family:var(--f-display);font-weight:700;font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.depth-canto{display:block;font-size:.78rem;font-style:italic;color:var(--accent)}
.cima-actions{display:flex;gap:8px}
.progress-track{height:5px;margin-top:10px;background:rgba(0,0,0,.5);border:1.5px solid rgba(236,224,198,.25);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--accent);transition:background-color 1s;width:var(--p,0)}

/* rail of stations */
#rotaia{
  right:12px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:4px;align-items:flex-end;
  max-height:82vh;padding:6px 4px;overflow:hidden;
}
.rail-btn{
  font-family:var(--f-display);font-weight:700;font-size:.6rem;letter-spacing:.05em;
  display:flex;align-items:center;gap:7px;cursor:pointer;
  background:rgba(10,8,7,.62);color:rgba(236,224,198,.62);
  border:2px solid transparent;border-radius:3px;padding:3px 7px;
  transition:color .2s,border-color .2s,background-color .2s;
}
.rail-btn .rb-dot{width:9px;height:9px;border-radius:50%;border:2px solid currentColor;flex:none}
.rail-btn .rb-label{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .25s var(--ease),opacity .25s;text-transform:uppercase;
}
#rotaia:hover .rail-btn .rb-label,.rail-btn.active .rb-label,.rail-btn:focus-visible .rb-label{max-width:170px;opacity:1;padding-right:4px}
.rail-btn .rb-num{font-size:.62rem;opacity:.8;min-width:2.2em;text-align:center}
@media (max-height:980px){
  #rotaia{gap:2px;padding:4px 3px}
  .rail-btn{padding:1px 5px;font-size:.54rem}
  .rail-btn .rb-dot{width:7px;height:7px;border-width:1.5px}
}
.rail-btn:hover{color:var(--paper)}
.rail-btn.seen .rb-dot::after{content:"";display:block;width:3px;height:3px;border-radius:50%;background:currentColor;margin:0 auto}
.rail-btn.active{color:var(--glow);border-color:var(--paper-deep);background:rgba(10,8,7,.9)}
.rail-btn.active .rb-dot{background:var(--accent);border-color:var(--glow)}

.hint-descent{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:39;
  font-family:var(--f-display);font-weight:700;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(236,224,198,.8);background:rgba(10,8,7,.66);border:2px solid rgba(236,224,198,.3);border-radius:99px;
  padding:9px 18px;cursor:pointer;transition:opacity .5s;
}
.hint-descent .hd-arrow{display:inline-block;animation:bobArrow 1.6s ease-in-out infinite;margin-right:.5em}
@keyframes bobArrow{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.hint-descent.dim{opacity:0;pointer-events:none}

/* ============ THE DESCENT ============ */
#mondo{position:relative;outline:none}
.station{position:relative;display:block}
.pin{position:relative}
.scene-wrap{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  contain:layout paint;
}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene svg{width:100%;height:100%;display:block}
.scene .lyr{will-change:transform}

.station .cards{
  position:relative;z-index:2;
  padding:2vh clamp(14px,4.5vw,64px) 6vh;
  display:flex;flex-direction:column;gap:clamp(22px,4vh,44px);
  pointer-events:none;
}
.station .cards>*{pointer-events:auto}
.card{
  max-width:620px;padding:clamp(20px,3.4vw,34px) clamp(22px,3.8vw,40px);
  position:relative;
}
.card.wide{max-width:840px}
.card.align-right{margin-left:auto}
.card.align-center{margin-left:auto;margin-right:auto;text-align:left}
.card h2{font-size:clamp(1.5rem,3.6vw,2.2rem);margin:.1em 0 .35em;color:var(--ink)}
.card h3{font-size:1.06rem;letter-spacing:.05em;margin:1.1em 0 .3em;color:var(--vermilion)}
.card p{margin:.3em 0 .85em;font-size:1.02em}
.card .kicker{margin-bottom:.2em;display:block}
.station-head{display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap}
.station-head .roman{
  font-family:var(--f-display);font-weight:700;font-size:2.6em;line-height:1;color:var(--paper-deep);
  text-shadow:3px 3px 0 rgba(23,17,13,.25);
}
.contr-box{
  border:2.5px solid var(--ink);border-left-width:10px;border-radius:2px;
  padding:14px 18px;margin:14px 0 4px;background:rgba(178,58,36,.07);
}
.contr-box .kicker{display:block;margin-bottom:4px}
.fig-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.fig-btn{
  font-family:var(--f-text);font-size:.95em;cursor:pointer;
  display:inline-flex;align-items:center;gap:.45em;
  background:var(--paper-2);border:2.5px solid var(--ink);border-radius:99px;
  padding:6px 15px 6px 7px;color:var(--ink);
  box-shadow:3px 3px 0 0 var(--ink);transition:transform .1s,box-shadow .1s;
}
.fig-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 0 var(--ink)}
.fig-btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 0 var(--ink)}
.fig-btn .em{width:26px;height:26px;color:var(--vermilion);flex:none}
.fig-btn .fb-role{font-family:var(--f-display);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;opacity:.62;display:block;margin-top:-2px;text-align:center}
.quotes{margin-top:8px}
.qline{position:relative;display:block;padding:2px 0}
.quote-gloss{font-size:.9em;opacity:.8}

/* scene hotspots */
.hotspot{cursor:pointer}
.hotspot .hs-ring{
  fill:none;stroke:var(--glow);stroke-width:2.5;stroke-dasharray:5 6;
  opacity:.85;animation:spinRing 9s linear infinite;transform-origin:center;transform-box:fill-box;
}
.hotspot .hs-dot{fill:var(--accent);stroke:var(--glow);stroke-width:2}
.hotspot .hs-label{
  font-family:var(--f-display);font-weight:700;fill:var(--glow);stroke:none;
  paint-order:stroke;stroke:#0a0806;stroke-width:3px;letter-spacing:.08em;
}
.hotspot:focus-visible{outline:none}
.hotspot:focus-visible .hs-ring,.hotspot:hover .hs-ring{stroke-width:4;opacity:1}
@keyframes spinRing{to{transform:rotate(360deg)}}

/* ============ EPILogo ============ */
#epilogo{padding:12vh 16px 14vh;display:grid;place-items:center;position:relative;z-index:2}
.epi-card{max-width:720px;text-align:center;padding:clamp(26px,4vw,46px)}
.epi-eyebrow{font-style:italic;font-size:1.1em;margin:.2em 0 .4em}
.epi-card h2{font-size:clamp(1.8rem,4.6vw,2.6rem)}
.epi-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 22px}
.epi-credits{font-size:.85em;opacity:.75}

/* ============ OVERLAYS ============ */
.overlay{
  position:fixed;inset:0;z-index:70;display:none;
  align-items:center;justify-content:center;padding:0;
}
.overlay.open{display:flex}
.tenda-scrim{position:absolute;inset:0;background:rgba(5,3,2,.68);backdrop-filter:blur(2px)}
.overlay-full{flex-direction:column;align-items:stretch;justify-content:stretch;background:rgba(8,6,5,.9);padding:0}
.overlay-scroll{overflow-y:auto}
.ov-head{
  position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(#0b0807ee,#0b0807cc 82%,transparent);
  padding:16px clamp(14px,3vw,30px) 20px;border-bottom:2px solid rgba(236,224,198,.16);
}
.ov-head h2{margin:0;font-size:clamp(1.2rem,3vw,1.7rem)}
.ov-head .ov-sub{flex:1;min-width:240px;margin:0;font-size:.92rem;font-style:italic;color:#c9bda4;max-width:640px}
.ov-head-actions{display:flex;gap:8px;flex-wrap:wrap}

/* codex — the illuminated manuscript panel */
.codex{
  position:relative;z-index:2;width:min(860px,94vw);max-height:min(88vh,88svh);
  overflow-y:auto;padding:clamp(22px,3.5vw,44px) clamp(22px,4vw,54px);
  color:var(--ink);background:
    radial-gradient(rgba(23,17,13,.05) 1px,transparent 1.4px),
    linear-gradient(178deg,#efe4cb,#e2d3b2 88%);
  background-size:5px 5px,100% 100%;
  border:3px solid var(--ink);box-shadow:0 0 0 1px var(--ink),10px 12px 0 rgba(0,0,0,.5);
  animation:codexIn .35s var(--ease);
}
@keyframes codexIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.codex::before{
  content:"";position:absolute;inset:9px;border:1.5px solid rgba(23,17,13,.55);pointer-events:none;
}
.codex-close{
  position:sticky;top:0;float:right;margin:-6px -8px 0 10px;z-index:2;
}
.codex-emblem{
  width:74px;height:74px;color:var(--vermilion);
  border:3px solid var(--ink);border-radius:50%;padding:9px;background:#efe4cb;
  box-shadow:3px 3px 0 var(--ink);margin:0 0 10px;
}
.codex-eyebrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.codex h2{font-size:clamp(1.7rem,4.4vw,2.5rem);margin:.05em 0 .1em;color:var(--ink)}
.codex .epithet{font-style:italic;font-size:1.1em;margin:.1em 0 .6em;color:#5c4632}
.codex .where{font-family:var(--f-display);font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-deep);background:var(--ink);color:var(--paper);padding:.4em .8em;display:inline-block;margin-bottom:14px}
.codex .story p{font-size:1.03em}
.codex h3{color:var(--vermilion);font-size:.98rem;letter-spacing:.06em;margin:1.15em 0 .25em}
.codex .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:14px 0}
.codex .fact{border:2px solid var(--ink);padding:8px 10px;background:rgba(23,17,13,.05)}
.codex .fact b{display:block;font-family:var(--f-display);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vermilion);margin-bottom:3px}
.codex .rel-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.codex-rel{
  font-size:.92em;cursor:pointer;font-family:var(--f-text);
  background:none;border:2px dashed var(--vermilion);color:var(--vermilion);border-radius:3px;padding:4px 12px;
}
.codex-rel:hover{background:var(--vermilion);color:var(--paper)}

/* ============ CARTA (map overlay) ============ */
#carta{--tilt:24deg;--zoom:1}
.carta-stage{
  flex:1;position:relative;overflow:hidden;display:grid;place-items:center;
  perspective:1400px;touch-action:none;cursor:grab;
}
.carta-stage:active{cursor:grabbing}
.carta-tilt{
  transform:rotateX(var(--tilt)) scale(var(--zoom));
  transform-style:preserve-3d;transition:transform .12s linear;
  width:min(92vw,760px);
}
#carta svg{width:100%;height:auto;display:block;overflow:visible}
.map-region{cursor:pointer;transition:filter .2s}
.map-region:hover{filter:brightness(1.28)}
.map-region.active{filter:brightness(1.5) drop-shadow(0 0 6px var(--glow))}
.map-label{font-family:var(--f-display);font-weight:700;fill:#ece0c6;letter-spacing:.1em}
.map-sub{font-family:var(--f-text);font-style:italic;fill:#bdb094}
.ov-foot{padding:10px 18px 16px;text-align:center;font-family:var(--f-display);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#9aa0a5}

/* ============ COMMENTO (history overlay) ============ */
.commento-body{
  flex:1;width:100%;max-width:1180px;margin:0 auto;
  padding:16px clamp(14px,3vw,30px) 90px;
}
.com-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 20px;position:sticky;top:2px;z-index:2}
.com-tab{
  font-family:var(--f-display);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;background:rgba(14,10,8,.9);color:#d9cdb2;border:2px solid #6a5a44;border-radius:3px;padding:9px 14px;
}
.com-tab.on{color:#111;background:var(--gold);border-color:var(--ink)}
.com-grid{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:26px;align-items:start}
.tl-wrap{position:sticky;top:64px;max-height:calc(100vh - 120px);overflow-y:auto;padding-right:6px}
.tl-track{position:relative;margin-left:11px;border-left:3px solid #6a5a44;padding-left:18px}
.tl-item{position:relative;padding:9px 6px 9px 0;cursor:pointer;color:#d9cdb2}
.tl-item::before{
  content:"";position:absolute;left:-25.5px;top:16px;width:12px;height:12px;border-radius:50%;
  background:#0b0807;border:3px solid var(--gold);
}
.tl-item:hover::before,.tl-item.on::before{background:var(--gold)}
.tl-item .tl-year{font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:.08em;color:var(--gold);display:block}
.tl-item .tl-what{font-size:.98em;display:block;line-height:1.4}
.tl-item.on{color:#fff}
.essays{display:grid;gap:26px;min-width:0}
.essay{padding:clamp(20px,3vw,34px)}
.essay h3{font-size:clamp(1.25rem,2.6vw,1.7rem);margin:.1em 0 .4em;color:var(--ink)}
.essay p{font-size:1.01em}
.essay .emblem{
  width:56px;height:56px;color:var(--vermilion);border:2.5px solid var(--ink);border-radius:50%;
  padding:7px;background:#efe4cb;box-shadow:3px 3px 0 var(--ink);float:right;margin:0 0 10px 14px;
}
.essay .essay-tag{display:block;margin-bottom:.2em}

/* ============ AIUTO ============ */
#aiuto .aiuto-card{position:relative;z-index:2;width:min(560px,92vw);padding:clamp(22px,3vw,36px);max-height:88vh;overflow-y:auto}
.aiuto-list{padding-left:1.2em}
.aiuto-list li{margin:.45em 0}
.aiuto-note{font-size:.92em;opacity:.8;font-style:italic}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .com-grid{grid-template-columns:1fr}
  .tl-wrap{position:static;max-height:none;overflow:visible}
  .tl-track{columns:2;column-gap:26px;border-left:none;padding-left:0}
  .tl-item::before{display:none}
  .tl-item{border:2px solid #4a3f30;border-radius:4px;background:rgba(14,10,8,.72);margin-bottom:8px;break-inside:avoid}
}
@media (max-width:820px){
  body{font-size:17px}
  #rotaia{display:none}
  .cima-depth{display:none}
  .cima-row{justify-content:space-between}
  .card,.card.align-right,.card.align-center,.card.wide{max-width:none;margin-left:0}
  .card{padding:18px 18px 20px}
  .depth-label,.depth-canto{display:none}
  #cima{padding:8px 10px 12px}
  .hint-descent{bottom:14px;padding:7px 14px;font-size:.62rem}
  .codex{padding:20px 18px}
  .codex-emblem{width:58px;height:58px}
}
@media (max-width:480px){
  .cima-actions .chip span[aria-hidden]{display:none}
  .velo-actions{flex-direction:column;align-items:stretch}
  .tl-track{columns:1}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .velo-arch{animation:none}
  .hint-descent .hd-arrow{animation:none}
  .hotspot .hs-ring{animation:none}
  .codex{animation:none}
  html{scroll-behavior:auto}
}