/* ══════════════════════════════════════════════════════════════════════
   HELIOS — Design System   base.css
   Fonts  : Orbitron (display/titles) · Exo 2 (UI/labels) · Share Tech Mono (body/game)
   Import this file on every page. Universe palette overrides live in universes.css.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Exo+2:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Share+Tech+Mono&display=swap');

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  /* ── Fonts ── */
  --font-display : 'Orbitron',        'Courier New', monospace;
  --font-ui      : 'Exo 2',           'Arial',       sans-serif;
  --font-mono    : 'Share Tech Mono', 'Courier New', monospace;

  /* ── Font sizes ── (rev. 2026-05-29: scala aumentata, niente testi micro) */
  --fs-2xs : .72rem;   /* tiny labels, version text */
  --fs-xs  : .82rem;   /* nav, badges, captions */
  --fs-sm  : .92rem;   /* secondary body, descriptions */
  --fs-base: 1.02rem;  /* standard body */
  --fs-md  : 1.15rem;  /* card names, important UI */
  --fs-lg  : 1.3rem;   /* sub-headings */
  --fs-xl  : 1.55rem;  /* section titles */
  --fs-2xl : 1.95rem;  /* page headings */
  --fs-3xl : 2.6rem;   /* hero sub-text */

  /* ── Letter spacing ── */
  --ls-tight  : .03em;
  --ls-base   : .07em;
  --ls-wide   : .14em;
  --ls-wider  : .22em;
  --ls-widest : .36em;

  /* ── Spacing ── */
  --gap-2xs: .3rem;
  --gap-xs : .5rem;
  --gap-sm : .8rem;
  --gap-md : 1.2rem;
  --gap-lg : 2rem;
  --gap-xl : 3rem;

  /* ── Transitions ── */
  --t-fast: .15s ease;
  --t-base: .25s ease;
  --t-slow: .4s  ease;

  /* ── Z-layers ── */
  --z-nav  : 100;
  --z-modal: 200;

  /* ── Nav-bar (can be overridden per-page) ── */
  --nav-height: 44px;
  --nav-accent: #e74c3c;
  --nav-border: #1e0808;
  --nav-dim   : #666;
  --nav-bg    : rgba(6,6,8,.97);

  /* ── Universe palette defaults (overridden by body.u-*) ── */
  --uni-primary   : #e74c3c;
  --uni-primary-dk: #c0392b;
  --uni-bg        : #060608;
  --uni-bg-card   : #0a0a10;
  --uni-border    : #1a1a1a;
  --uni-text      : #aaaaaa;
  --uni-text-dim  : #555555;
  --uni-text-faint: #2e2e2e;
  --uni-dim       : #444444;
  --uni-glow      : rgba(231,76,60,.45);
  --uni-glow-soft : rgba(231,76,60,.12);
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
html, body {
  min-height: 100%;
  background : var(--uni-bg);
  color      : var(--uni-text);
  font-family: var(--font-mono);
  font-size  : 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Navbar ────────────────────────────────────────────────────────────────── */
#h7nav {
  position       : fixed;
  top: 0; left: 0; right: 0;
  z-index        : var(--z-nav);
  height         : var(--nav-height);
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 0 1rem;
  background     : var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom  : 1px solid var(--nav-border);
  font-family    : var(--font-ui);
  font-size      : var(--fs-xs);
  font-weight    : 500;
  letter-spacing : var(--ls-wide);
}

/* Hamburger */
#h7nav-btn {
  background: none;
  border    : none;
  color     : var(--nav-dim);
  font-size : 1.15rem;
  cursor    : pointer;
  padding   : .2rem .5rem;
  line-height: 1;
  transition: color var(--t-fast);
}
#h7nav-btn:hover { color: var(--nav-accent); }

/* Dropdown */
#h7nav-drop {
  display     : none;
  position    : absolute;
  top         : var(--nav-height);
  left        : 0;
  min-width   : 210px;
  background  : rgba(6,6,8,.99);
  border      : 1px solid var(--nav-border);
  border-top  : none;
  font-family : var(--font-ui);
}
#h7nav-drop.open { display: block; }
#h7nav-drop a {
  display        : block;
  padding        : .65rem 1rem;
  color          : var(--nav-dim);
  text-decoration: none;
  font-size      : var(--fs-xs);
  font-weight    : 500;
  letter-spacing : var(--ls-wide);
  text-transform : uppercase;
  border-bottom  : 1px solid var(--nav-border);
  transition     : color var(--t-fast), background var(--t-fast);
}
#h7nav-drop a:hover { color: #ddd; background: rgba(255,255,255,.04); }
#h7nav-drop hr { border: none; border-top: 1px solid var(--nav-border); margin: 0; }

/* Right cluster */
#h7nav-right {
  display    : flex;
  gap        : .6rem;
  align-items: center;
}
#h7nav-right a {
  color          : var(--nav-dim);
  text-decoration: none;
  text-transform : uppercase;
  font-family    : var(--font-ui);
  font-size      : var(--fs-xs);
  font-weight    : 500;
  letter-spacing : var(--ls-tight);
  transition     : color var(--t-fast);
  white-space    : nowrap;
}
#h7nav-right a:hover { color: var(--nav-accent); }

/* Lang switcher */
.h7nav-lang { display: flex; gap: .3rem; }
.h7nav-lang a {
  padding      : .15rem .45rem;
  border       : 1px solid var(--nav-border);
  font-family  : var(--font-ui);
  font-size    : var(--fs-2xs);
  font-weight  : 700;
  letter-spacing: .12em;
  transition   : color var(--t-fast), border-color var(--t-fast);
}
.h7nav-lang a.on { border-color: var(--nav-accent); color: var(--nav-accent); }

/* Login button */
.h7nav-login {
  border  : 1px solid var(--nav-border) !important;
  padding : .2rem .55rem !important;
}

/* ── Hub hero ──────────────────────────────────────────────────────────────── */
.hero-section {
  position  : relative;
  width     : 100%;
  height    : clamp(360px, 65vh, 760px);
  overflow  : hidden;
  background: var(--uni-bg);
  cursor    : grab;
}
.hero-section:active { cursor: grabbing; }
#hero-canvas { display: block; width: 100%; height: 100%; }

.hero-vignette {
  position      : absolute;
  inset         : 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--uni-bg) 0%, transparent 10%, transparent 90%, var(--uni-bg) 100%),
    linear-gradient(to right,  var(--uni-bg) 0%, transparent 7%,  transparent 93%, var(--uni-bg) 100%);
}

.hero-overlay {
  position       : absolute;
  inset          : 0;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  pointer-events : none;
  gap: 0;
}

/* Compass glyph */
.hero-compass {
  font-size    : clamp(1.2rem, 2.8vw, 2rem);
  color        : #ffd060;
  line-height  : 1;
  margin-bottom: .35em;
  filter:
    drop-shadow(0 0 10px rgba(255,180,0,.95))
    drop-shadow(0 0 28px rgba(255,110,0,.60));
  animation: compass-pulse 4s ease-in-out infinite;
}
@keyframes compass-pulse {
  0%,100% { filter: drop-shadow(0 0 10px rgba(255,180,0,.95)) drop-shadow(0 0 28px rgba(255,110,0,.60)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255,210,0,1.0)) drop-shadow(0 0 50px rgba(255,130,0,.80)); }
}

/* HELIOS main title */
.hero-title-main {
  font-family   : var(--font-display);
  font-size     : clamp(2.6rem, 9vw, 8rem);
  font-weight   : 900;
  letter-spacing: .30em;
  text-transform: uppercase;
  text-align    : center;
  line-height   : 1;
  padding-right : .30em;
  background    : linear-gradient(180deg,
    #fff6c0 0%, #ffd060 18%, #ffaa20 42%,
    #c87010 68%, #ff9f30 88%, #ffe080 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 14px rgba(255,160,0,.95))
    drop-shadow(0 0 40px rgba(255, 90,0,.55))
    drop-shadow(0 0 90px rgba(200, 60,0,.25));
  animation: helios-pulse 4s ease-in-out infinite;
}
@keyframes helios-pulse {
  0%,100% {
    filter:
      drop-shadow(0 0 14px rgba(255,160,0,.95))
      drop-shadow(0 0 40px rgba(255, 90,0,.55))
      drop-shadow(0 0 90px rgba(200, 60,0,.25));
  }
  50% {
    filter:
      drop-shadow(0 0 22px rgba(255,200,0,1.0))
      drop-shadow(0 0 65px rgba(255,120,0,.80))
      drop-shadow(0 0 140px rgba(200, 60,0,.45));
  }
}

/* Sub-title */
.hero-title-sub {
  font-family   : var(--font-ui);
  font-size     : clamp(.54rem, 1.5vw, .88rem);
  font-weight   : 500;
  letter-spacing: .40em;
  text-transform: uppercase;
  text-align    : center;
  padding-right : .40em;
  color         : rgba(255,215,80,.72);
  text-shadow   :
    0 0 8px  rgba(255,180,0,.5),
    0 0 22px rgba(255,120,0,.25);
  margin-top    : .22em;
}

/* Drag hint */
.hero-hint {
  font-family   : var(--font-ui);
  font-size     : var(--fs-2xs);
  font-weight   : 400;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color         : rgba(212,175,55,.28);
  margin-top    : 1.4em;
  transition    : opacity .6s;
}

/* ── Universe grid ─────────────────────────────────────────────────────────── */
.universes-label {
  max-width     : 1100px;
  margin        : 2.2rem auto 0;
  padding       : 0 2rem;
  font-family   : var(--font-ui);
  font-size     : var(--fs-xs);
  font-weight   : 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color         : var(--uni-text-faint);
  display       : flex;
  align-items   : center;
  gap           : 1rem;
}
.universes-label::after {
  content   : '';
  flex      : 1;
  height    : 1px;
  background: #111;
}

.universes {
  max-width              : 1100px;
  margin                 : 1.2rem auto 0;
  padding                : 0 2rem 6rem;
  display                : grid;
  grid-template-columns  : repeat(auto-fill, minmax(300px, 1fr));
  gap                    : 1.5rem;
}

/* ── Universe card ─────────────────────────────────────────────────────────── */
a.uni-card { text-decoration: none; color: inherit; display: block; }

.uni-card {
  border        : none;           /* l'arco è il bordo visivo della cover */
  border-radius : 5px;
  overflow      : hidden;
  transition    : transform var(--t-base), box-shadow var(--t-base);
  display       : flex;
  flex-direction: column;
  position      : relative;
  background    : var(--uni-bg-card);
}
.uni-card.active { cursor: pointer; }
.uni-card.active:hover {
  transform : translateY(-5px);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
.uni-card.locked { opacity: .36; cursor: default; }

/* Badge */
.uni-badge {
  position      : absolute;
  top: .8rem; right: .8rem;
  font-family   : var(--font-ui);
  font-size     : var(--fs-2xs);
  font-weight   : 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding       : .22rem .65rem;
  border-radius : 2px;
  z-index       : 2;
}
.uni-badge.live { color: #fff; }
.uni-badge.soon { background: #111; color: #444; border: 1px solid #1e1e1e; }

/* Cover image */
.uni-cover {
  height             : 270px;
  display            : flex;
  align-items        : center;
  justify-content    : center;
  position           : relative;
  overflow           : hidden;
  isolation          : isolate;          /* confina il mix-blend-mode dentro la card */
  background-size    : cover;
  background-position: center 58%;      /* mostra la parte centrale/bassa della scena nel portale */
  background-color   : #0a0a10;
}

/* ── Maschera ovale portale ─────────────────────────────────────────────────
   Crea un'apertura ovale che coincide con l'interno dell'arco.
   Dentro l'ovale: trasparente (cover visibile).
   Fuori dall'ovale: var(--uni-bg-card) — stesso sfondo della card body.
   In questo modo l'immagine sembra "incorniciata" dall'arco come un portale. */
.uni-cover::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  z-index   : 2;
  background: radial-gradient(
    ellipse 43% 33% at 50% 62%,
    transparent 0%,
    transparent 72%,
    var(--uni-bg-card) 96%
  );
}

/* ── Portal arch — arco.png con mix-blend-mode:screen ───────────────────────
   Il nero diventa trasparente, il glow dorato si sovrappone alla cover.      */
.uni-card.active .uni-cover::before,
.uni-card.locked .uni-cover::before {
  content       : '';
  position      : absolute;
  inset         : 0;
  z-index       : 5;
  background    : url('/assets/arco.png') center top / 106% 100% no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}
.uni-card.active .uni-cover::before {
  animation : portal-idle 5s ease-in-out infinite;
}
/* Portale "spento" per locked */
.uni-card.locked .uni-cover::before {
  opacity: .22;
  filter : grayscale(.8) brightness(.5);
}

/* Idle pulse — il portale respira */
@keyframes portal-idle {
  0%, 100% { filter: brightness(0.85) drop-shadow(0 0  8px rgba(255,150,0,.30)); }
  50%       { filter: brightness(1.05) drop-shadow(0 0 22px rgba(255,170,0,.55)); }
}
/* Hover — il portale si attiva */
.uni-card.active:hover .uni-cover::before {
  animation: portal-hover 2.2s ease-in-out infinite;
}
@keyframes portal-hover {
  0%, 100% { filter: brightness(1.1) drop-shadow(0 0 18px rgba(255,170,0,.65)) drop-shadow(0 0 40px rgba(255,120,0,.30)); }
  50%       { filter: brightness(1.3) drop-shadow(0 0 28px rgba(255,200,0,.90)) drop-shadow(0 0 60px rgba(255,140,0,.50)); }
}

.uni-cover-num {
  position      : relative;
  z-index       : 3;
  font-family   : var(--font-display);
  font-size     : 3.6rem;
  font-weight   : 900;
  letter-spacing: .15em;
  color         : #fff;
  opacity       : .08;
}

/* Placeholder bg for locked universes */
.cover-6 { background: radial-gradient(ellipse at 60% 30%, #071407, #06060a); }
.cover-5 { background: radial-gradient(ellipse at 50% 50%, #170e04, #06060a); }
.cover-4 { background: radial-gradient(ellipse at 40% 60%, #120606, #06060a); }
.cover-1 { background: radial-gradient(ellipse at 40% 40%, #060611, #06060a); }
.cover-0 { background: radial-gradient(ellipse at 50% 50%, #07070e, #06060a); }

/* Card body — bordi dorati con glow che continuano visivamente l'arco */
.uni-body {
  padding       : 1.2rem 1.4rem 1.5rem;
  flex          : 1;
  display       : flex;
  flex-direction: column;
  gap           : .44rem;
  position      : relative;
  border-radius : 0 0 5px 5px;
  transition    : box-shadow var(--t-base);
  /* 4px solido + alone interno */
  box-shadow:
    inset  4px 0 0 rgba(255,200,0,.50),
    inset -4px 0 0 rgba(255,200,0,.50),
    inset  0 -1px 0 rgba(255,200,0,.25),
    inset  8px 0 18px -5px rgba(255,170,0,.18),
    inset -8px 0 18px -5px rgba(255,170,0,.18);
}
.uni-card.active:hover .uni-body {
  box-shadow:
    inset  4px 0 0 rgba(255,220,20,.90),
    inset -4px 0 0 rgba(255,220,20,.90),
    inset  0 -1px 0 rgba(255,220,20,.55),
    inset  10px 0 24px -4px rgba(255,190,0,.30),
    inset -10px 0 24px -4px rgba(255,190,0,.30);
}

/* Universe ID — Orbitron display label */
.uni-id {
  font-family   : var(--font-display);
  font-size     : var(--fs-2xs);
  font-weight   : 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color         : var(--uni-primary);
}

/* Universe name — Exo 2 bold */
.uni-name {
  font-family   : var(--font-ui);
  font-size     : var(--fs-md);
  font-weight   : 700;
  letter-spacing: var(--ls-wide);
  color         : #ddd;
  text-transform: uppercase;
  line-height   : 1.2;
}

/* Universe tagline — sotto al titolo mondo, sopra all'era */
.uni-sub {
  font-family   : var(--font-ui);
  font-size     : var(--fs-sm);
  font-weight   : 500;
  letter-spacing: var(--ls-base);
  color         : var(--uni-text-dim);
  text-transform: none;
  line-height   : 1.3;
  margin-top    : -.1rem;
}

/* Era / period subtitle */
.uni-era {
  font-family : var(--font-ui);
  font-size   : var(--fs-sm);
  font-weight : 400;
  color       : var(--uni-text-dim);
  letter-spacing: var(--ls-base);
  font-style  : italic;
}

/* Description — mono */
.uni-desc {
  font-family: var(--font-mono);
  font-size  : var(--fs-sm);
  color      : #3e3e3e;
  line-height: 1.65;
  margin-top : .3rem;
  flex       : 1;
}
.uni-card.active .uni-desc { color: #565656; }
.uni-card.locked .uni-id,
.uni-card.locked .uni-name { color: #3a3a3a; }

/* CTA button inside card */
.uni-cta {
  margin-top    : 1rem;
  display       : inline-block;
  padding       : .5rem 1.2rem;
  font-family   : var(--font-ui);
  font-size     : var(--fs-xs);
  font-weight   : 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color         : #ddd;
  border        : 1px solid var(--uni-primary);
  border-radius : 2px;
  transition    : background var(--t-base), color var(--t-base), box-shadow var(--t-base);
  align-self    : flex-start;
}
.uni-card:hover .uni-cta {
  background: var(--uni-primary);
  color     : #fff;
  box-shadow: 0 0 18px var(--uni-glow);
}

/* ── Generic button ────────────────────────────────────────────────────────── */
.btn {
  display        : inline-flex;
  align-items    : center;
  gap            : .5rem;
  padding        : .55rem 1.4rem;
  font-family    : var(--font-ui);
  font-size      : var(--fs-xs);
  font-weight    : 600;
  letter-spacing : var(--ls-wider);
  text-transform : uppercase;
  text-decoration: none;
  border         : 1px solid var(--uni-primary);
  color          : #fff;
  background     : transparent;
  cursor         : pointer;
  border-radius  : 2px;
  position       : relative;
  overflow       : hidden;
  transition     : box-shadow var(--t-base), transform var(--t-fast);
}
.btn::before {
  content         : '';
  position        : absolute;
  inset           : 0;
  background      : var(--uni-primary);
  transform       : scaleX(0);
  transform-origin: left;
  transition      : transform var(--t-base);
  z-index         : 0;
}
.btn:hover::before    { transform: scaleX(1); }
.btn:hover            { box-shadow: 0 0 20px var(--uni-glow); }
.btn > *              { position: relative; z-index: 1; }
.btn-sm { padding: .35rem .9rem; font-size: var(--fs-2xs); }
.btn-lg { padding: .9rem 2.5rem; font-size: var(--fs-base); }

/* ── Footer ────────────────────────────────────────────────────────────────── */
footer {
  text-align    : center;
  padding       : 2rem;
  border-top    : 1px solid #0e0e0e;
  font-family   : var(--font-ui);
  font-size     : var(--fs-2xs);
  font-weight   : 400;
  letter-spacing: var(--ls-wide);
  color         : #2a2a2a;
}
footer a { color: #333; text-decoration: none; margin: 0 .6rem; transition: color var(--t-fast); }
footer a:hover { color: var(--uni-primary); }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .universes       { padding: 0 1rem 4rem; gap: 1rem; }
  .universes-label { padding: 0 1rem; }
  .hero-section    { height: 54vw; min-height: 230px; }
}