/* ═══════════════════════════════════════════════════════════════════
   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; }
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 ─────────────────────────────────────────────────── */
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; }
.nav-status { display:grid; grid-template-columns:7px 1fr; column-gap:.8rem; row-gap:.1rem; align-items:start; flex-shrink:0; }
.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-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:36px; height:36px; 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; }

/* ─── Ornamental divider ─────────────────────────────────────────── */
.orn { display:flex; align-items:center; gap:.75rem; color:var(--gold); font-size:.6rem; 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); }

/* ─── 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; gap:2.5rem; 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-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; }
  .nav-status { display:flex; align-items:center; margin-left:0; 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-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; }
  .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; }
  .nav-logo { padding:0; }
  .fase-frame img { max-height:28px; width:auto; }
  .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; }
}