/* ═══════════════════════════════════════════════════════════════════
   The Gate — core comune condiviso da tutte le pagine
   Contiene: font, token, reset, nav, chronicle, orn, footer, animazioni
   e le media query responsive di nav e footer.
   Il CSS specifico di pagina resta inline in ogni file.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Fonts ──────────────────────────────────────────────────────── */
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/cinzel-latin.woff2') format('woff2'); }
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/cinzel-latin.woff2') format('woff2'); }
@font-face { font-family:'Cinzel'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/cinzel-latin.woff2') format('woff2'); }
@font-face { font-family:'Cinzel Decorative'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/cinzel-decorative-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Cinzel Decorative'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/cinzel-decorative-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Lora'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/lora-latin.woff2') format('woff2'); }
@font-face { font-family:'Lora'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/lora-latin.woff2') format('woff2'); }
@font-face { font-family:'Lora'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/lora-italic-latin.woff2') format('woff2'); }
@font-face { font-family:'Lora'; font-style:italic; font-weight:500; font-display:swap; src:url('fonts/lora-italic-latin.woff2') format('woff2'); }

/* ─── Custom properties ──────────────────────────────────────────── */
:root {
  --bg-body:   #0b0806; --bg-panel:  #15100a; --bg-card:   #1a130c;
  --b-dim:     #2e2010; --b-gold:    #5c3e10; --gold-dk:   #7a5410;
  --gold:      #c9a227; --gold-lt:   #e8c84a; --cream:     #eaddc5;
  --cream-dim: #b5a07a; --text:      #cec0a0; --text-dim:  #7a6a48;
  --green:     #4ab86a;
  --align-good:    #2d5c3a; --align-neutral: #3a3a1a; --align-evil: #5c2020;
  --w-read:    760px; --w-page: 900px; --w-wide: 1100px;
}

/* ─── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; }
body { background:var(--bg-body); color:var(--text); font-family:'Lora',Georgia,serif; line-height:1.75; }
body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events:none; z-index:0; }
a { color:var(--gold); text-decoration:none; transition:color .2s; }
a:hover { color:var(--gold-lt); }
strong { color:var(--cream); font-weight:600; }

/* ─── Navigation ─────────────────────────────────────────────────── */
/* ─── Skip link (a11y, visible on focus only) ───────────────────── */
.skip-link { position:absolute; left:-9999px; top:0; z-index:1000; padding:.6rem 1rem; background:var(--bg-body); border:1px solid var(--gold); color:var(--gold); font-family:'Cinzel',serif; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; }
.skip-link:focus { left:.5rem; top:.5rem; }

nav { position:sticky; top:0; z-index:100; background:rgba(7,5,3,.97); border-bottom:1px solid var(--b-gold); backdrop-filter:blur(10px); }
.nav-inner { max-width:1150px; margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; align-items:center; padding:0 1.25rem; gap:.8rem; }
.nav-left { display:flex; align-items:center; gap:.8rem; }
.nav-center-group { display:flex; align-items:center; gap:.8rem; }
.nav-right { display:flex; align-items:center; gap:.8rem; }
.nav-logo { font-family:'Cinzel Decorative',serif; font-size:1.35rem; color:var(--gold); padding:.9rem 0; flex-shrink:0; letter-spacing:.06em; text-shadow:0 0 24px rgba(201,162,39,.35); }
.nav-logo-text span { color:var(--cream); }
.nav-logo img { height:36px; width:36px; object-fit:contain; vertical-align:middle; margin-right:.5rem; filter:drop-shadow(0 0 8px rgba(201,162,39,.4)); }
.nav-sep { width:1px; height:28px; background:var(--b-gold); flex-shrink:0; }
.nav-links { display:flex; list-style:none; flex-wrap:wrap; gap:1rem; }
.nav-links > li { position:relative; }
.nav-links > li > a { display:block; padding:.65rem .2rem .2rem .2rem; font-family:'Cinzel',serif; font-size:.80rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim); white-space:nowrap; transition:color .2s; }
.nav-links > li > a:hover { color:var(--gold); }
.nav-links > li.active > a { color:var(--gold-lt); font-weight:700; text-shadow:0 0 12px rgba(201,162,39,.6); }
.nav-links li:hover > .dd { display:block; }
.dd { display:none; list-style:none; position:absolute; top:100%; left:0; min-width:210px; background:#0c0905; border:1px solid var(--b-gold); border-top:none; z-index:200; }
.dd a { display:block; padding:.55rem 1rem; font-size:.83rem; color:var(--cream-dim); border-bottom:1px solid var(--b-dim); transition:background .15s,color .15s; }
.dd a:last-child { border-bottom:none; }
.dd a:hover { background:rgba(201,162,39,.08); color:var(--gold); }
.has-dd > a::after { content:' ▾'; font-size:.55rem; }
.has-dd > a[aria-haspopup] { cursor:pointer; }
.has-dd:focus-within > .dd { display:block; }
.has-dd > a[aria-expanded="true"] + .dd { display:block; }
.nav-links a:focus-visible { outline:1px solid var(--gold); outline-offset:2px; }
.dd > li.active > a { color:var(--gold-lt); }
.nav-status { display:grid; grid-template-columns:7px 1fr; column-gap:.8rem; row-gap:.1rem; align-items:start; flex-shrink:0; position:relative; }
.nav-status-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:pulse 2.5s infinite; margin-top:4px; margin-left:3px; }
.nav-status-dot.offline { background:#8b2020; box-shadow:0 0 6px #8b2020; animation:none; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.nav-status-sync { width:18px; height:18px; color:var(--gold); animation:spin 1.4s linear infinite; display:block; flex-shrink:0; }
.nav-status-sync svg { width:100%; height:100%; fill:currentColor; display:block; }
@keyframes spin { to { transform:rotate(360deg); } }
.nav-status.is-loading { grid-template-rows:1.085rem 1.085rem; }
.nav-status.is-loading .nav-status-dot,
.nav-status.is-loading .nav-status-num,
.nav-status.is-loading .nav-status-num + .nav-status-text { visibility:hidden; }
.nav-status.is-loading .nav-status-num { grid-column:1; grid-row:2; }
.nav-status.is-loading .nav-status-num + .nav-status-text { grid-column:2; grid-row:2; }
.nav-status.is-loading .nav-status-dot + .nav-status-text { grid-column:2; grid-row:1/3; align-self:center; }
.nav-status.is-loading .nav-status-sync { position:absolute; top:50%; left:-4px; margin-top:-9px; }
.nav-status:not(.is-loading) .nav-status-sync { display:none; }
.nav-status-text { font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.1em; color:var(--cream-dim); white-space:nowrap; }
.nav-status-num { color:var(--green); font-weight:600; font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.1em; display:inline-block; width:13px; text-align:center; }
#nav-toggle { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:48px; height:48px; background:none; border:none; cursor:pointer; padding:0; margin-left:1rem; }
#nav-toggle span { display:block; width:22px; height:2px; background:var(--gold); border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
#nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#nav-toggle.open span:nth-child(2) { opacity:0; }
#nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ─── Chronicle bar ──────────────────────────────────────────────── */
.nav-center { display:flex; flex-direction:column; overflow:visible; flex:1; min-width:0; }
.chronicle-bar { padding:0 0 .3rem 0; position:relative; overflow:hidden; height:1.65rem; box-sizing:border-box; }
.chronicle-bar-text { position:absolute; top:0; left:0; white-space:nowrap; font-family:'Lora',serif; font-style:italic; font-size:.78rem; line-height:1.35rem; color:var(--text-dim); text-align:left; margin:0; animation:chronicle-scroll 20s linear infinite; }
.chronicle-bar:hover .chronicle-bar-text { animation-play-state:paused; }
.chronicle-bar-text em { color:var(--cream-dim); font-style:inherit; }
@keyframes chronicle-scroll { from { transform:translateX(100%); } to { transform:translateX(-100%); } }
.fase-frame { position:relative; flex-shrink:0; border:1px solid var(--b-gold); border-radius:2px; padding:3px; background:var(--bg-panel); }
.fase-frame::before,.fase-frame::after,.fase-frame span::before,.fase-frame span::after { content:''; position:absolute; width:7px; height:7px; border-color:var(--gold); border-style:solid; }
.fase-frame::before { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.fase-frame::after { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.fase-frame span::before { top:-1px; right:-1px; border-width:2px 2px 0 0; }
.fase-frame span::after { bottom:-1px; left:-1px; border-width:0 0 2px 2px; }
.fase-frame span { position:absolute; inset:0; pointer-events:none; }
.fase-frame img { display:block; }
.fase-tooltip { display:none; position:fixed; top:55px; right:1rem; background:var(--bg-panel); border:1px solid var(--b-gold); border-radius:2px; padding:.6rem .8rem; font-family:'Lora',serif; font-style:italic; font-size:.78rem; line-height:1.4; color:var(--cream-dim); white-space:normal; max-width:calc(100vw - 2rem); z-index:100; box-shadow:0 4px 14px rgba(0,0,0,.55); }
.fase-tooltip em { color:var(--cream); font-style:inherit; }
.fase-tooltip::before { content:''; position:absolute; top:-5px; right:var(--arrow-right,14px); width:8px; height:8px; background:var(--bg-panel); border-left:1px solid var(--b-gold); border-top:1px solid var(--b-gold); transform:rotate(45deg); }

/* ─── Ornamental divider ─────────────────────────────────────────── */
.orn { display:flex; align-items:center; gap:.75rem; color:var(--gold); font-size:.6rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase; margin:0 0 1.5rem; }
.orn::before,.orn::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--b-gold),transparent); }

/* ─── Page header ────────────────────────────────────────────────── */
.page-hd { position:relative; overflow:hidden; border-bottom:1px solid var(--b-gold); }
.page-hd-inner { position:relative; z-index:1; max-width:1150px; margin:0 auto; width:100%; }
.page-eyebrow { font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dk); margin-bottom:.75rem; }
.page-title { font-family:'Cinzel Decorative',serif; font-size:clamp(2rem,4.5vw,3.5rem); color:var(--cream); line-height:1.15; text-shadow:0 2px 30px rgba(0,0,0,.9); }
.page-title em { font-style:normal; color:var(--gold); }
.page-subtitle { font-family:'Cinzel',serif; font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dk); margin:.5rem 0 1.5rem; }
.page-intro { color:var(--cream-dim); max-width:55ch; font-size:1.02rem; }

/* Lore variant: tall immersive hero with background image */
.page-hd--lore { background-size:cover; background-position:center; min-height:940px; display:flex; align-items:flex-start; }
.page-hd--lore::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at top left, rgba(7,5,3,.95) 0%, rgba(7,5,3,.8) 25%, rgba(7,5,3,.7) 60%, rgba(7,5,3,0) 100%); pointer-events:none; z-index:0; }
.page-hd--lore .page-hd-inner { padding:4rem 1.5rem 3.5rem; }

/* Compact variant: utility pages, shorter; gradient placeholder when no background-image */
.page-hd--compact { background-image:linear-gradient(180deg,#0f0b07 0%,#1a130c 100%); background-size:cover; background-position:center; min-height:clamp(280px,36vh,380px); display:flex; align-items:flex-start; }
.page-hd--compact::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(7,5,3,.88) 0%, rgba(7,5,3,.7) 35%, rgba(7,5,3,0) 65%); pointer-events:none; z-index:0; }
.page-hd--compact::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--b-gold),transparent); }
.page-hd--compact .page-hd-inner { padding:2.5rem 1.5rem; }

/* ─── Footer ─────────────────────────────────────────────────────── */
footer { margin-top:4rem; border-top:1px solid var(--b-gold); background:linear-gradient(0deg,#060403,var(--bg-panel)); position:relative; }
footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold-dk),transparent); }
.footer-inner { max-width:1150px; margin:0 auto; padding:2rem 1.5rem; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:1.5rem; }
.footer-social { display:flex; gap:.75rem; justify-content:flex-end; margin-bottom:.6rem; }
.footer-social a { color:var(--text-dim); transition:color .2s; }
.footer-social a:hover { color:var(--gold); }
.footer-social svg { width:1.1rem; height:1.1rem; fill:currentColor; display:block; }
.footer-copy { font-size:.75rem; color:var(--text-dim); position:absolute; bottom:1.5rem; right:1.5rem; text-align:right; }
.footer-logo { width:122px; height:92px; object-fit:contain; opacity:.6; filter:drop-shadow(0 0 6px rgba(201,162,39,.3)); }
.footer-menus { display:flex; flex-wrap:wrap; gap:1.75rem 2rem; margin:0 auto; }
.footer-links-title { font-family:'Cinzel',serif; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dk); margin-bottom:.6rem; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:.1rem; }
.footer-links a { font-size:.75rem; color:var(--text-dim); transition:color .2s; line-height:1.4; display:block; }
.footer-links a:hover { color:var(--gold); }

/* ─── Animations ─────────────────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.fi   { animation:fadeUp .55s ease-out both; }
.fi-2 { animation:fadeUp .55s .1s ease-out both; }
.fi-3 { animation:fadeUp .55s .2s ease-out both; }

/* ─── Responsive: nav + footer ───────────────────────────────────── */
@media(max-width:1000px) { .nav-logo-text { display:none; } }
@media(max-width:880px) { .nav-links { gap:.5rem; } }
@media(max-width:800px) {
  .nav-links > li > a { font-size:.72rem; }
  .footer-menus { margin:0 auto 0 2rem; }
}
@media(max-width:884px) {
  .nav-status { display:flex; align-items:center; padding:3px .5rem; border:1px solid var(--b-gold); border-radius:2px; background:transparent; gap:0; height:36px; position:relative; }
  .nav-status-dot { margin:0; }
  .nav-status-sync { width:16px; height:16px; }
  .nav-status.is-loading .nav-status-sync { left:50%; margin-left:-8px; margin-top:-8px; }
  .nav-status-text { display:contents; font-size:0; color:transparent; }
  .nav-status-num { font-size:.72rem; color:var(--green); margin-left:.35rem; width:auto; }
  .nav-status::before, .nav-status::after, .nav-status-text::before, .nav-status-text::after { content:''; position:absolute; width:7px; height:7px; border-color:var(--gold); border-style:solid; }
  .nav-status::before { top:-1px; left:-1px; border-width:2px 0 0 2px; }
  .nav-status::after { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
  .nav-status-text::before { top:-1px; right:-1px; border-width:2px 2px 0 0; }
  .nav-status-text::after { bottom:-1px; left:-1px; border-width:0 0 2px 2px; }
}
@media(max-width:750px) {
  #nav-toggle { display:flex; margin-left:0; }
  .chronicle-bar { display:none; }
  .nav-sep { display:none; }
  .nav-center { display:contents; }
  .nav-left, .nav-center-group, .nav-right { display:contents; }
  .nav-inner { display:flex; justify-content:space-between; padding:.2rem 1.25rem; }
  .nav-logo { padding:0; }
  .fase-frame img { max-height:28px; width:auto; }
  .fase-frame { cursor:pointer; }
  .fase-tooltip.open { display:block; }
  .nav-links { flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(7,5,3,.98); border-bottom:1px solid var(--b-gold); padding:0; max-height:0; overflow:hidden; transition:max-height .35s ease; }
  .nav-links.open { max-height:500px; padding:.5rem 0; }
  .nav-links > li > a { padding:.65rem 1.5rem; }
  .dd { position:static; border:none; border-left:2px solid var(--b-dim); margin-left:2rem; display:block; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .footer-logo { display:none; }
  .footer-copy { position:static; text-align:left; margin-top:1rem; order:2; }
  .footer-social { justify-content:flex-start; }
  .footer-menus { margin:0; gap:2rem; order:1; }
}
@media(min-width:751px) and (max-width:1100px) {
  .footer-copy { position:static; text-align:left; width:100%; margin-top:1.5rem; order:3; }
  .footer-social { justify-content:flex-start; }
}