/* ══════════════════════════════════════════════════════════════════════
   HELIOS — Universe Themes   universes.css
   Applied as body.u-{id} for page-level themes.
   Card textures applied via .uni-card[data-universe="{id}"] .uni-body.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hub (home / index) ────────────────────────────────────────────────────── */
/* Neutral gold accent to match the golden HELIOS hero title */
body.u-hub {
  --uni-primary   : #c8820a;
  --uni-primary-dk: #9a5e06;
  --uni-bg        : #060608;
  --uni-bg-card   : #09090d;
  --uni-border    : #1a1a1a;
  --uni-text      : #aaaaaa;
  --uni-text-dim  : #555;
  --uni-text-faint: #2a2a2a;
  --uni-glow      : rgba(200,130,10,.45);
  --uni-glow-soft : rgba(200,130,10,.10);
  /* Navbar keeps its red accent on the hub */
  --nav-accent    : #e74c3c;
  --nav-border    : #1e0808;
  --nav-dim       : #666;
}

/* ═══════════════════════════════════════════════════════
   HELIOS-7 — Abandoned Spacecraft 2387 AD
   Aesthetic : emergency red · metal grid · scanlines
   ═══════════════════════════════════════════════════════ */
body.u-helios7,
.uni-card[data-universe="helios7"],
.card[data-universe="helios7"],
.sc-mini[data-universe="helios7"] {
  --uni-primary   : #e74c3c;
  --uni-primary-dk: #c0392b;
  --uni-bg        : #060608;
  --uni-bg-card   : #08080e;
  --uni-border    : #1e0c0c;
  --uni-text      : #cccccc;
  --uni-text-dim  : #666666;
  --uni-text-faint: #2a2a2a;
  --uni-dim       : #444444;
  --uni-glow      : rgba(231,76,60,.55);
  --uni-glow-soft : rgba(231,76,60,.12);
}

/* Card body: scanlines + faint metal grid */
.uni-card[data-universe="helios7"] .uni-body {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(0,0,0,.10) 3px,
      rgba(0,0,0,.10) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 22px,
      rgba(231,76,60,.025) 22px,
      rgba(231,76,60,.025) 23px
    );
}

/* On hover, boost scanline contrast slightly */
.uni-card[data-universe="helios7"]:hover .uni-body {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(0,0,0,.14) 3px,
      rgba(0,0,0,.14) 4px
    );
}

/* Cover tint: deep space blue-black */
.uni-card[data-universe="helios7"] .uni-cover {
  background-color: #06060e;
}

/* ═══════════════════════════════════════════════════════
   HELIOS-3 — Roman Arena 44 BC
   Aesthetic : imperial gold · stone cross-hatch · marble veins
   ═══════════════════════════════════════════════════════ */
body.u-helios3,
.uni-card[data-universe="helios3"],
.card[data-universe="helios3"],
.sc-mini[data-universe="helios3"] {
  --uni-primary   : #b5882a;
  --uni-primary-dk: #7a5a18;
  --uni-bg        : #060504;
  --uni-bg-card   : #0a0806;
  --uni-border    : #201808;
  --uni-text      : #d4c4a0;
  --uni-text-dim  : #6a5a40;
  --uni-text-faint: #2a2010;
  --uni-dim       : #3a2a18;
  --uni-glow      : rgba(181,136,42,.55);
  --uni-glow-soft : rgba(181,136,42,.12);
}

/* Card body: stone cross-hatch (diagonal lines in two directions) */
.uni-card[data-universe="helios3"] .uni-body {
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0px,
      transparent 16px,
      rgba(181,136,42,.030) 16px,
      rgba(181,136,42,.030) 17px
    ),
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 24px,
      rgba(0,0,0,.060) 24px,
      rgba(0,0,0,.060) 25px
    );
}

/* Cover tint: warm dark torchlight */
.uni-card[data-universe="helios3"] .uni-cover {
  background-color: #0c0804;
}

/* ═══════════════════════════════════════════════════════
   HELIOS-2 — Egyptian Pharaoh's Tomb 2580 BC
   Aesthetic : amber gold · papyrus weave · sand grain
   ═══════════════════════════════════════════════════════ */
body.u-helios2,
.uni-card[data-universe="helios2"],
.card[data-universe="helios2"],
.sc-mini[data-universe="helios2"] {
  --uni-primary   : #c8a84b;
  --uni-primary-dk: #8b6914;
  --uni-bg        : #050403;
  --uni-bg-card   : #090705;
  --uni-border    : #1e1408;
  --uni-text      : #c8b87a;
  --uni-text-dim  : #6a5a30;
  --uni-text-faint: #28200a;
  --uni-dim       : #3a2e10;
  --uni-glow      : rgba(200,168,75,.55);
  --uni-glow-soft : rgba(200,168,75,.12);
}

/* Card body: papyrus weave — tight angled lines both ways */
.uni-card[data-universe="helios2"] .uni-body {
  background-image:
    repeating-linear-gradient(
      20deg,
      transparent 0px,
      transparent 10px,
      rgba(200,168,75,.035) 10px,
      rgba(200,168,75,.035) 11px
    ),
    repeating-linear-gradient(
      -20deg,
      transparent 0px,
      transparent 10px,
      rgba(0,0,0,.05) 10px,
      rgba(0,0,0,.05) 11px
    );
}

/* Cover tint: sandy dark tomb */
.uni-card[data-universe="helios2"] .uni-cover {
  background-color: #0a0804;
}

/* ═══════════════════════════════════════════════════════
   COMING SOON — placeholder palettes for future universes
   ═══════════════════════════════════════════════════════ */
/* HELIOS-6 — Cyberpunk 2147 (neon ciano) */
body.u-helios6, .uni-card[data-universe="helios6"], .card[data-universe="helios6"], .sc-mini[data-universe="helios6"] {
  --uni-primary:#00d4ff; --uni-primary-dk:#0088aa; --uni-bg:#010408; --uni-bg-card:#04080e;
  --uni-border:#0a1820; --uni-text:#a0d4e8; --uni-text-dim:#335566; --uni-text-faint:#1a2830;
  --uni-dim:#1a2830; --uni-glow:rgba(0,212,255,.5); --uni-glow-soft:rgba(0,212,255,.12);
}
/* HELIOS-5 — WW2 Fronte Orientale (verde oliva militare) */
body.u-helios5, .uni-card[data-universe="helios5"], .card[data-universe="helios5"], .sc-mini[data-universe="helios5"] {
  --uni-primary:#8a9e6a; --uni-primary-dk:#5a6a40; --uni-bg:#060607; --uni-bg-card:#0a0b0c;
  --uni-border:#1a1e14; --uni-text:#b0b89a; --uni-text-dim:#505a40; --uni-text-faint:#282e20;
  --uni-dim:#282e20; --uni-glow:rgba(138,158,106,.5); --uni-glow-soft:rgba(138,158,106,.12);
}
/* HELIOS-4 — WW1 Trincee (fango / khaki) */
body.u-helios4, .uni-card[data-universe="helios4"], .card[data-universe="helios4"], .sc-mini[data-universe="helios4"] {
  --uni-primary:#7a6a4a; --uni-primary-dk:#504530; --uni-bg:#070604; --uni-bg-card:#0c0a07;
  --uni-border:#1a1810; --uni-text:#a8987a; --uni-text-dim:#504530; --uni-text-faint:#252015;
  --uni-dim:#252015; --uni-glow:rgba(122,106,74,.5); --uni-glow-soft:rgba(122,106,74,.12);
}
/* HELIOS-1 — Preistoria (ocra / caverna) */
body.u-helios1, .uni-card[data-universe="helios1"], .card[data-universe="helios1"], .sc-mini[data-universe="helios1"] {
  --uni-primary:#c8763a; --uni-primary-dk:#8a4e20; --uni-bg:#080503; --uni-bg-card:#0d0906;
  --uni-border:#1e1208; --uni-text:#d0a878; --uni-text-dim:#604830; --uni-text-faint:#2a1c10;
  --uni-dim:#2a1c10; --uni-glow:rgba(200,118,58,.5); --uni-glow-soft:rgba(200,118,58,.12);
}
/* HELIOS-0 — Primordiale (viola cosmico) */
body.u-helios0, .uni-card[data-universe="helios0"], .card[data-universe="helios0"], .sc-mini[data-universe="helios0"] {
  --uni-primary:#7744cc; --uni-primary-dk:#4a2888; --uni-bg:#030208; --uni-bg-card:#07060e;
  --uni-border:#12101e; --uni-text:#b0a0d8; --uni-text-dim:#3a3060; --uni-text-faint:#1a1430;
  --uni-dim:#1a1430; --uni-glow:rgba(119,68,204,.5); --uni-glow-soft:rgba(119,68,204,.12);
}

/* ══════════════════════════════════════════════════════════════════════
   TEXTURE DI AMBIENTAZIONE (.tex) — sfondo dei contenitori in play.php
   Solo CSS (gradienti), nessuna immagine. Opacità bassa: il testo resta leggibile.
   ══════════════════════════════════════════════════════════════════════ */

/* HELIOS-7 — pareti metalliche dell'astronave: scanline + fughe verticali + lastra */
body.u-helios7 .tex {
  background-color: var(--uni-bg-card);
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 2px, rgba(0,0,0,.20) 2px 3px),
    repeating-linear-gradient(90deg, rgba(231,76,60,.05) 0 1px, transparent 1px 46px),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 45%);
}

/* HELIOS-3 — pietra/marmo dell'arena: tratteggio diagonale + venature */
body.u-helios3 .tex {
  background-color: var(--uni-bg-card);
  background-image:
    repeating-linear-gradient(135deg, rgba(181,136,42,.05) 0 1px, transparent 1px 19px),
    repeating-linear-gradient(45deg,  rgba(0,0,0,.12)      0 1px, transparent 1px 27px);
}

/* HELIOS-2 — blocchi di pietra delle piramidi: malta a griglia (mattoni sfalsati) */
body.u-helios2 .tex {
  background-color: var(--uni-bg-card);
  background-image:
    repeating-linear-gradient(0deg,  rgba(0,0,0,.26) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.20) 0 1px, transparent 1px 70px),
    radial-gradient(ellipse at 30% 15%, rgba(200,168,75,.06), transparent 60%);
}

/* HELIOS-6 — cyberpunk: griglia neon + scanline */
body.u-helios6 .tex {
  background-color: var(--uni-bg-card);
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 2px, rgba(0,0,0,.22) 2px 3px),
    repeating-linear-gradient(0deg,  rgba(0,212,255,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(0,212,255,.05) 0 1px, transparent 1px 28px);
}

/* HELIOS-5 — WW2: tela militare a trama incrociata */
body.u-helios5 .tex {
  background-color: var(--uni-bg-card);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg,  rgba(138,158,106,.04) 0 1px, transparent 1px 6px);
}

/* HELIOS-4 — WW1: assi di legno / sacchi di sabbia orizzontali */
body.u-helios4 .tex {
  background-color: var(--uni-bg-card);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(0deg, rgba(122,106,74,.05) 0 1px, transparent 1px 11px);
}

/* HELIOS-1 — preistoria: roccia grezza (tratteggio irregolare) */
body.u-helios1 .tex {
  background-color: var(--uni-bg-card);
  background-image:
    repeating-linear-gradient(115deg, rgba(0,0,0,.14) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(60deg,  rgba(200,118,58,.05) 0 1px, transparent 1px 22px);
}

/* HELIOS-0 — primordiale: nebulosa cosmica */
body.u-helios0 .tex {
  background-color: var(--uni-bg-card);
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 10%, rgba(119,68,204,.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 90%, rgba(74,40,136,.10), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.10) 3px 4px);
}

/* ══════════════════════════════════════════════════════════════════════
   SHELF — mini-raccolte scenari nella hub (index.php)
   Righe orizzontali scrollabili sotto la griglia universi.
   ══════════════════════════════════════════════════════════════════════ */
.shelf {
  max-width: 1100px;
  margin   : 0 auto;
  padding  : 0 2rem;
}
.shelf + .shelf { margin-top: 2rem; }
.shelf:first-of-type { margin-top: .5rem; }
.shelf:last-of-type { margin-bottom: 5rem; }

.shelf-head {
  display     : flex;
  align-items : baseline;
  gap         : 1rem;
  margin-bottom: 1rem;
}
.shelf-title {
  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);
}
.shelf-all {
  margin-left   : auto;
  font-family   : var(--font-ui);
  font-size     : var(--fs-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color         : var(--uni-text-dim);
  text-decoration: none;
  transition    : color var(--t-base);
}
.shelf-all:hover { color: var(--uni-text); }

.shelf-row {
  display              : grid;
  grid-auto-flow       : column;
  grid-auto-columns    : 180px;
  gap                  : 1rem;
  overflow-x           : auto;
  scroll-snap-type     : x proximity;
  padding-bottom       : .6rem;       /* spazio per la scrollbar */
  scrollbar-width       : thin;
}
.shelf-row::-webkit-scrollbar { height: 6px; }
.shelf-row::-webkit-scrollbar-thumb { background: var(--uni-border); border-radius: 3px; }

.sc-mini {
  scroll-snap-align: start;
  display          : flex;
  flex-direction   : column;
  border-radius    : 5px;
  overflow         : hidden;
  background       : var(--uni-bg-card);
  border           : 1px solid var(--uni-border);
  text-decoration  : none;
  color            : inherit;
  transition       : transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.sc-mini:hover {
  transform   : translateY(-3px);
  border-color: var(--uni-primary);
  box-shadow  : 0 10px 26px rgba(0,0,0,.5);
}

.sc-mini-cover {
  position        : relative;
  aspect-ratio    : 16 / 10;
  background      : var(--uni-bg);
  display         : flex;
  align-items     : center;
  justify-content : center;
}
.sc-mini-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-mini-cover-empty {
  font-family   : var(--font-ui);
  font-size     : var(--fs-2xs);
  color         : var(--uni-text-dim);
  text-align    : center;
  padding       : .5rem;
  line-height   : 1.3;
}
.sc-mini-uni {
  position      : absolute;
  top: .4rem; left: .4rem;
  font-family   : var(--font-ui);
  font-size     : var(--fs-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color         : #fff;
  background    : rgba(0,0,0,.6);
  padding       : .12rem .4rem;
  border-radius : 3px;
}

.sc-mini-body {
  padding       : .6rem .7rem .7rem;
  display       : flex;
  flex-direction: column;
  gap           : .35rem;
  flex          : 1;
}
.sc-mini-title {
  font-family : var(--font-body, inherit);
  font-size   : var(--fs-sm);
  font-weight : 600;
  line-height : 1.25;
  color       : var(--uni-text);
  display     : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow    : hidden;
}
.sc-mini-plays {
  font-family   : var(--font-ui);
  font-size     : var(--fs-2xs);
  letter-spacing: .06em;
  color         : var(--uni-primary);
  margin-top    : auto;
}

@media (max-width: 600px) {
  .shelf     { padding: 0 1rem; }
  .shelf-row { grid-auto-columns: 150px; }
}