/* Lunaris Remake — ispirato a layout moderni tipo RedlineRP (solo spunto grafico)
   Palette: Oro / Grigio / Nero / Bianco
*/
:root{
  --bg:#07080a;
  --bg2:#0d0f14;
  --card:rgba(255,255,255,.045);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.16);

  --text:#f5f6f8;
  --muted:rgba(245,246,248,.68);

  --gold:#d6b25e;
  --gold2:#f2d37b;
  --silver:#b9c0c8;

  --radius:18px;
  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --container: 1180px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 720px at 18% 0%, rgba(214,178,94,.18), transparent 60%),
    radial-gradient(1100px 760px at 90% 20%, rgba(185,192,200,.10), transparent 62%),
    radial-gradient(900px 520px at 50% 88%, rgba(214,178,94,.09), transparent 62%),
    var(--bg);
  overflow-x:hidden;
  padding-top: var(--header-h, 0px);
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(var(--container), calc(100% - 42px)); margin-inline:auto}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.muted{color:var(--muted)}
.hr{border:0; border-top:1px solid rgba(255,255,255,.08); margin:0}

.bg{position:fixed; inset:0; pointer-events:none; z-index:-1}
.bg__grid{
  position:absolute; inset:-2px;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0/36px 36px,
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0/36px 36px;
  mask-image: radial-gradient(620px 520px at 55% 20%, #000 30%, transparent 72%);
  opacity:.55;
}
.bg__noise{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.28;
}

.skip{
  position:absolute; left:12px; top:12px;
  background:var(--gold); color:#101010;
  padding:10px 12px; border-radius:12px;
  transform:translateY(-150%); transition:.2s;
  z-index:9999; font-weight:800;
}
.skip:focus{transform:translateY(0)}

.top{
  position:fixed; top:0; left:0; right:0; z-index:300;
  background: rgba(7,8,10,.55);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.top.is-scrolled{
  background: rgba(7,8,10,.86);
  border-bottom-color: rgba(214,178,94,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.top__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px}

.brand{display:flex; align-items:center; gap:10px}
.brand__logo{
  width:40px; height:40px; border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
}
.brand__text{display:flex; flex-direction:column; line-height:1}
.brand__text strong{letter-spacing:.12em; font-size:13px}
.brand__sub{letter-spacing:.30em; font-size:11px; color:var(--muted); text-transform:uppercase}

.nav{display:flex; align-items:center; gap:12px}
.nav__toggle{
  display:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  border-radius:14px; padding:10px 12px;
  cursor:pointer;
}
.nav__toggleBars{display:block; width:22px; height:12px; position:relative}
.nav__toggleBars:before,.nav__toggleBars:after{
  content:""; position:absolute; left:0; right:0; height:2px;
  background: rgba(245,246,248,.92);
  border-radius:2px;
}
.nav__toggleBars:before{top:0}
.nav__toggleBars:after{bottom:0}

.nav__menu{display:flex; align-items:center; gap:12px}
.nav__menu a{
  font-size:13px;
  color: rgba(245,246,248,.82);
  padding:10px 10px;
  border-radius:12px;
  transition:.15s ease;
}
.nav__menu a:hover{background: rgba(255,255,255,.06); color:var(--text)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-weight:800;
  font-size:13px;
  letter-spacing:.02em;
  cursor:pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2)}
.btn--gold{
  background: linear-gradient(180deg, rgba(242,211,123,.98), rgba(214,178,94,.92));
  color:#101010;
  border-color: rgba(0,0,0,.22);
}
.btn--gold:hover{background: linear-gradient(180deg, rgba(242,211,123,1), rgba(214,178,94,1))}
.btn--ghost{background: rgba(255,255,255,.03)}
.btn--full{width:100%}

.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(245,246,248,.82);
  font-size:12px;
}

.hero{padding:56px 0 20px}
.hero__grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:26px; align-items:start}
.hero__title{margin:14px 0 12px; line-height:1.02; font-size: clamp(38px, 5.2vw, 64px); letter-spacing:-.02em}
.grad{
  background: linear-gradient(90deg, rgba(242,211,123,1), rgba(185,192,200,1));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{margin:0; color: rgba(245,246,248,.78); font-size:15.5px; line-height:1.65; max-width:62ch}
.hero__cta{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.hero__stats{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.stat{
  flex: 1 1 150px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding:12px;
}
.stat__n{font-weight:900; color:var(--gold2); font-size:16px}
.stat__l{color:var(--muted); font-size:12px; margin-top:2px}

.panel{
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel__top{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.10)}
.dot{width:9px; height:9px; border-radius:999px; display:inline-block}
.dot--r{background:#ff5a66}.dot--y{background:#ffd35a}.dot--g{background:#63ffa8}
.panel__label{margin-left:auto; color:rgba(245,246,248,.6); font-size:12px}
.panel__body{padding:14px}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-weight:900;
}
.pulse{
  width:10px; height:10px; border-radius:999px;
  background: var(--gold2);
  box-shadow: 0 0 0 rgba(242,211,123,.45);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(242,211,123,.35)}
  70%{box-shadow:0 0 0 10px rgba(214,178,94,0)}
  100%{box-shadow:0 0 0 0 rgba(214,178,94,0)}
}
.quick{display:grid; gap:10px; margin-top:14px}
.quick__item{
  display:flex; align-items:center; gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition:.15s;
}
.quick__item:hover{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18)}
.quick__k{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:14px;
  background: rgba(214,178,94,.16);
  border:1px solid rgba(214,178,94,.25);
  color: var(--gold2);
  font-weight:900;
}
.quick__v{color: rgba(245,246,248,.88); font-weight:800}

.section{padding:58px 0}
.section--alt{
  background: radial-gradient(900px 420px at 50% 0%, rgba(255,255,255,.05), transparent 60%);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.section__head{margin-bottom:20px}
.section__head h2{margin:0 0 10px; font-size: clamp(24px, 3vw, 34px); letter-spacing:-.02em}
.section__head p{margin:0}

.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.card{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding:18px;
}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--muted); line-height:1.65}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.step{
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding:18px;
  overflow:hidden;
}
.step:before{
  content:""; position:absolute; inset:-120px -120px auto auto;
  width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(242,211,123,.22), transparent 62%);
  transform: rotate(12deg);
}
.step a{color:var(--gold2); font-weight:900}
.step a:after{content:" →"}

.rulelist{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.rule{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding:16px;
  display:flex; gap:10px; align-items:flex-start;
}
.rule__ico{
  width:34px; height:34px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(214,178,94,.16);
  border:1px solid rgba(214,178,94,.24);
  color: var(--gold2);
  font-weight:900;
  flex:0 0 auto;
}
.rule p{margin:0; color:rgba(245,246,248,.78); line-height:1.55}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.shot{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: 18px;
  overflow:hidden;
  cursor:pointer;
  transition:.15s;
}
.shot:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18)}
.shot img{width:100%; height:200px; object-fit:cover}

.faq{display:grid; gap:10px}
.qa{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding:14px 16px;
}
.qa summary{cursor:pointer; font-weight:900; list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa p{margin:10px 0 0; color:var(--muted); line-height:1.65}

.callout{
  margin-top:18px;
  border:1px solid rgba(214,178,94,.22);
  background: linear-gradient(180deg, rgba(214,178,94,.18), rgba(255,255,255,.02));
  border-radius: var(--radius);
  padding:18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.callout h3{margin:0 0 6px}
.callout__actions{display:flex; gap:10px; flex-wrap:wrap}

.footer{padding:42px 0 22px; border-top:1px solid rgba(255,255,255,.08)}
.footer__grid{display:grid; grid-template-columns:1.2fr 1fr; gap:18px}
.footer__cols{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px}
.footer__col h4{margin:0 0 10px; font-size:13px; letter-spacing:.08em; color:rgba(245,246,248,.86); text-transform:uppercase}
.footer__col a{display:block; padding:8px 0; color: rgba(245,246,248,.70)}
.footer__col a:hover{color:var(--text)}
.footer__bottom{margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

.modal{position:fixed; inset:0; display:none; z-index:90}
.modal.is-open{display:block}
.modal__overlay{position:absolute; inset:0; background: rgba(0,0,0,.72); backdrop-filter: blur(6px)}
.modal__card{
  position:relative;
  width:min(980px, calc(100% - 28px));
  margin: 7vh auto 0;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(13,15,20,.90);
  border-radius: 20px;
  box-shadow: 0 35px 90px rgba(0,0,0,.75);
  overflow:hidden;
}
.modal__top{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.10)}
.modal__body{padding:14px}
.iconbtn{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.iconbtn:hover{background: rgba(255,255,255,.08)}
.lightbox img{width:100%; height:auto; border-radius:16px; border:1px solid rgba(255,255,255,.10)}

.reveal{opacity:0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease}
.reveal.is-in{opacity:1; transform: translateY(0)}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .rulelist{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .nav__toggle{display:inline-flex}
  .nav__menu{
    position:absolute;
    right: 20px;
    top: 62px;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:10px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(7,8,10,.82);
    backdrop-filter: blur(10px);
    display:none;
    width: min(320px, calc(100vw - 40px));
  }
  .nav__menu.is-open{display:flex}
  .nav__menu a{padding:12px 12px}
}

/* Prose (privacy/terms) */
.prose{border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow)}
.prose h2{margin:18px 0 10px}
.prose p{margin:0 0 12px; color: rgba(245,246,248,.78); line-height:1.8}
.prose ul, .prose ol{margin:0 0 12px 18px; color: rgba(245,246,248,.78); line-height:1.8}
.prose li{margin:6px 0}
.prose a{color: var(--gold2); font-weight:900}

/* ===== Page Loader (preview di caricamento) ===== */
.page-loader{
  position:fixed; inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:
    radial-gradient(900px 520px at 50% 15%, rgba(214,178,94,.22), transparent 62%),
    radial-gradient(900px 620px at 50% 85%, rgba(185,192,200,.10), transparent 65%),
    var(--bg, #07080a);
  transition: opacity .45s ease, transform .45s ease;
}
.page-loader__inner{
  width:min(560px, calc(100% - 40px));
  text-align:center;
}
.page-loader__badge{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.page-loader__logo{
  width:40px; height:40px;
  border-radius:16px;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(242,211,123,.95), transparent 65%),
    radial-gradient(18px 18px at 70% 60%, rgba(214,178,94,.60), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.16);
}
.page-loader__title{
  font-weight:900;
  letter-spacing:.16em;
  font-size:12px;
  color: rgba(244,245,247,.90);
}
.page-loader__sub{
  display:block;
  margin-top:4px;
  letter-spacing:.32em;
  font-size:10px;
  color: rgba(244,245,247,.62);
  text-transform:uppercase;
}
.page-loader__hint{
  margin:18px 0 10px;
  color: rgba(244,245,247,.70);
  line-height:1.6;
  font-size:13px;
}

.loaderbar{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.loaderbar__fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(242,211,123,1), rgba(214,178,94,1));
  box-shadow: 0 0 18px rgba(214,178,94,.25);
  transition: width .18s ease;
}
.page-loader__meta{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  color: rgba(244,245,247,.58);
  font-size:11px;
  letter-spacing:.08em;
}

.page-loader.is-done{
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
}

/* ===== Wiki / Docs layout ===== */
.wiki-hero{
  padding: 38px 0 16px;
}
.wiki-hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:start;
}
.wiki-hero h1{
  margin:10px 0 10px;
  line-height:1.06;
  font-size: clamp(30px, 4.5vw, 52px);
  letter-spacing:-.02em;
}
.wiki-hero p{margin:0; color: rgba(244,245,247,.74); line-height:1.65; max-width:60ch}
.wiki-search{
  margin-top:14px;
  display:flex;
  gap:10px;
}
.wiki-search .input{flex:1}
.kbd{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: rgba(244,245,247,.65);
  font-size:12px;
}

.wiki-layout{
  padding: 18px 0 60px;
}
.wiki{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:16px;
  align-items:start;
}

.wiki-side{
  position:sticky;
  top:86px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  overflow:hidden;
}
.wiki-side__head{
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.wiki-side__head strong{letter-spacing:.08em; font-size:12px; text-transform:uppercase}
.wiki-side__body{padding:12px 12px}
.wiki-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  color: rgba(244,245,247,.80);
  border:1px solid transparent;
  transition:.15s;
}
.wiki-nav a:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
.wiki-nav .count{
  font-size:11px;
  color: rgba(244,245,247,.55);
  border:1px solid rgba(255,255,255,.12);
  padding:4px 8px;
  border-radius:999px;
  background: rgba(0,0,0,.18);
}

.wiki-main{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  border-radius: var(--radius);
  overflow:hidden;
}
.wiki-topbar{
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.breadcrumb{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  color: rgba(244,245,247,.62);
  font-size:12px;
}
.breadcrumb a{color: rgba(244,245,247,.78)}
.breadcrumb .sep{opacity:.5}
.wiki-tools{display:flex; gap:8px; flex-wrap:wrap}

.wiki-cards{
  padding:14px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
.wiki-card{
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding:16px;
  overflow:hidden;
}
.wiki-card:before{
  content:"";
  position:absolute; inset:-120px -120px auto auto;
  width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(242,211,123,.20), transparent 60%);
  transform: rotate(12deg);
}
.wiki-card h3{margin:0 0 8px; font-size:15px}
.wiki-card p{margin:0 0 12px; color: rgba(244,245,247,.68); line-height:1.6}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{
  display:inline-flex;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(244,245,247,.72);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.wiki-card .more{
  display:inline-flex; gap:8px; align-items:center;
  font-weight:900; color: var(--gold2);
}
.wiki-card .more:after{content:"→"; transition:.15s}
.wiki-card:hover .more:after{transform:translateX(2px)}

.wiki-split{
  padding:14px;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.note{
  border:1px solid rgba(214,178,94,.20);
  background: linear-gradient(180deg, rgba(214,178,94,.14), rgba(255,255,255,.02));
  border-radius: var(--radius);
  padding:14px;
}
.note h4{margin:0 0 8px}
.note p{margin:0; color: rgba(244,245,247,.70); line-height:1.6}
.listlinks a{
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(244,245,247,.78);
  margin-top:8px;
}
.listlinks a:hover{background: rgba(255,255,255,.06)}
.listlinks small{color: rgba(244,245,247,.56)}

.wiki-article{
  padding:14px;
}
.wiki-article h1{margin:10px 0 10px; font-size: clamp(26px, 3.4vw, 40px)}
.wiki-article h2{margin:18px 0 8px; font-size:18px}
.wiki-article p{margin:0 0 10px; color: rgba(244,245,247,.72); line-height:1.75}
.wiki-article ul{margin:8px 0 12px; color: rgba(244,245,247,.72); line-height:1.75}
.wiki-article .callout{
  margin:12px 0 0;
}
.toc{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: var(--radius);
  padding:12px;
}
.toc strong{display:block; margin-bottom:8px; letter-spacing:.08em; font-size:12px; text-transform:uppercase; color: rgba(244,245,247,.78)}
.toc a{
  display:block;
  padding:8px 10px;
  border-radius:12px;
  color: rgba(244,245,247,.72);
}
.toc a:hover{background: rgba(255,255,255,.05)}
.toc a.is-on{background: rgba(214,178,94,.14); border:1px solid rgba(214,178,94,.18); color: rgba(244,245,247,.90)}

@media (max-width: 980px){
  .wiki-hero__grid{grid-template-columns:1fr}
  .wiki{grid-template-columns:1fr}
  .wiki-side{position:relative; top:auto}
  .wiki-cards{grid-template-columns:1fr}
  .wiki-split{grid-template-columns:1fr}
}

/* ===== Server Status (stile Redline-like) ===== */
.statusGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:stretch;
}

.statusCard{
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(214,178,94,.16), transparent 55%),
    radial-gradient(900px 520px at 85% 25%, rgba(255,255,255,.06), transparent 60%),
    rgba(255,255,255,.03);
  border-radius: 22px;
  padding:22px;
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
}

.statusTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.statusOnline{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.10em;
  font-size:12px;
  text-transform:uppercase;
  color: rgba(244,245,247,.82);
}

.dotLive{
  width:10px; height:10px;
  border-radius:999px;
  background:#38d06f;
  box-shadow: 0 0 0 0 rgba(56,208,111,.35);
  animation: livePulse 1.8s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(56,208,111,.35)}
  70%{box-shadow:0 0 0 10px rgba(56,208,111,0)}
  100%{box-shadow:0 0 0 0 rgba(56,208,111,0)}
}

.statusWifi{
  width:46px; height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(56,208,111,.10);
  display:grid;
  place-items:center;
}
.wifiIcon{font-size:18px; filter: grayscale(.2);}

.statusName{
  margin:6px 0 10px;
  font-size: 22px;
  letter-spacing:-.02em;
}

.statusPlayers{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin: 0 0 4px;
}
.playersNow{
  font-size: 54px;
  font-weight: 1000;
  line-height: 1;
  color: #ff5a66; /* come nello screen: numero “hot” */
}
.playersSlash{
  font-size: 22px;
  color: rgba(244,245,247,.55);
  font-weight:900;
}
.playersMax{
  font-size: 22px;
  color: rgba(244,245,247,.72);
  font-weight:900;
}

.statusLabel{
  color: rgba(244,245,247,.62);
  font-size: 13px;
  margin-bottom: 14px;
}

.statusBar{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  overflow:hidden;
  margin-bottom: 14px;
}
.statusBarFill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,90,102,1), rgba(214,178,94,1));
  transition: width .35s ease;
}

.statusBottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top: 12px;
}
.updated{
  display:flex;
  align-items:center;
  gap:8px;
  color: rgba(244,245,247,.58);
  font-size: 12px;
}
.clock{opacity:.8}

.logoCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 22px;
  padding:22px;
  display:grid;
  place-items:center;
  box-shadow: 0 26px 80px rgba(0,0,0,.45);
  overflow:hidden;
  position:relative;
}
.logoCard:before{
  content:"";
  position:absolute; inset:-140px -140px auto auto;
  width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(214,178,94,.18), transparent 60%);
  transform: rotate(12deg);
}
.logoPh{
  font-weight:1000;
  letter-spacing:.18em;
  font-size: 28px;
  position:relative;
}
.logoSub{
  margin-top:8px;
  letter-spacing:.30em;
  text-transform:uppercase;
  font-size: 11px;
  color: rgba(244,245,247,.62);
  position:relative;
}

@media (max-width: 980px){
  .statusGrid{grid-template-columns:1fr}
}

.logoWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
}

.logoTitle{
  font-weight:1000;
  letter-spacing:.28em;
  font-size:18px;
}

.logoSub{
  letter-spacing:.32em;
  text-transform:uppercase;
  font-size:11px;
  color: rgba(244,245,247,.62);
}

.statusLogo{
  width: min(220px, 80%);
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
}

/* ===== Official Song Row ===== */
.songRow{
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap; /* va sotto solo su mobile */
}

.songRow > div{
  flex: 1 1 420px;
  max-width: 520px;
}

/* ===== Gallery Lightbox ===== */
.modal__card.lightbox{
  max-width: min(980px, 92vw);
}

.modal__card.lightbox .modal__body{
  display: grid;
  gap: 12px;
}

#lightboxImg{
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 25px 80px rgba(0,0,0,.55);
}

.lightboxCaption{
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(244,245,247,.78);
  line-height: 1.6;
}