/* LA VETRINA DEL NUOVO CONQUERCUBE: landing e wiki (Claude, 25 settembre). Medievale, cupa, tetra: ferro, cenere,
   brace e sangue. Nessun font esterno (la pagina non chiede nulla ad altri siti): serif di sistema, maiuscolo spaziato. */
:root {
  --nero: #080605; --carbone: #110d0b; --pietra: #1a1512; --pietra-2: #241d18; --bordo: #3b2f26; --bordo-chiaro: #5a4636;
  --pergamena: #efe4cc; --testo: #d8ccb3; --tenue: #9b8e78; --spento: #6f6454;
  --sangue: #8e1712; --sangue-vivo: #d23a2c; --brace: #e0772f; --oro: #c9a45c; --oro-chiaro: #ead08f;
  --gelo: #8cc3e6; --fioralba: #9fd0a4;
  --serif: 'Palatino Linotype', 'Book Antiqua', Palatino, 'URW Palladio L', Georgia, serif;
  --largo: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--nero); color: var(--testo); font: 17px/1.68 var(--serif); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oro-chiaro); text-decoration-color: rgba(234, 208, 143, .35); text-underline-offset: 3px; }
a:hover { color: #fff3cf; text-decoration-color: currentColor; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--pergamena); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: .02em; }
h3 { font-size: 1.32rem; }
p { margin: 0 0 1em; }
strong { color: var(--pergamena); }
.occhiello { display: inline-block; font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--oro); margin-bottom: .9rem; }
.occhiello.sangue { color: var(--sangue-vivo); }
.contenuto { width: min(var(--largo), 100% - 32px); margin-inline: auto; }

/* la testata */
.testata { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px; padding: 12px clamp(16px, 3vw, 36px);
  background: linear-gradient(rgba(8, 6, 5, .92), rgba(8, 6, 5, .55) 70%, transparent); transition: background .3s; }
.testata.piena { background: rgba(8, 6, 5, .94); box-shadow: 0 1px 0 var(--bordo); }
.marchio { color: var(--pergamena); text-decoration: none; font-size: 1.15rem; letter-spacing: .28em; font-weight: 700; white-space: nowrap; }
.marchio span { color: var(--sangue-vivo); }
.testata nav { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.testata nav a { color: var(--testo); text-decoration: none; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; }
.testata nav a:hover { color: var(--oro-chiaro); }
@media (max-width: 900px) { .testata nav a.minore { display: none; } }
@media (max-width: 560px) { .testata nav a:not(.bottone) { display: none; } .marchio { font-size: 1rem; letter-spacing: .2em; } }

/* i bottoni */
.bottone { display: inline-flex; align-items: center; gap: .6em; padding: .78em 1.5em; border: 1px solid var(--oro); color: var(--pergamena);
  background: linear-gradient(#3a1410, #1d0907); text-decoration: none; letter-spacing: .16em; text-transform: uppercase; font-size: .86rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 22px rgba(210, 58, 44, .18); transition: box-shadow .2s, transform .2s; }
.bottone:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 30px rgba(224, 119, 47, .42); transform: translateY(-1px); }
.bottone.fantasma { background: rgba(10, 8, 7, .55); border-color: var(--bordo-chiaro); box-shadow: none; }
.bottone.fantasma:hover { border-color: var(--oro); }
.testata .bottone { padding: .55em 1.1em; font-size: .78rem; }

/* le foto */
figure { margin: 0; }
.foto { position: relative; background: var(--carbone); border: 1px solid var(--bordo); overflow: hidden; }
.foto img { width: 100%; }
.foto figcaption, figure.foto > .didascalia { font-size: .84rem; color: var(--tenue); padding: .55em .8em .65em; border-top: 1px solid var(--bordo); background: var(--carbone); line-height: 1.45; }
.striscia { margin: 0; border-block: 1px solid var(--bordo); background: #000; }
.striscia img { width: 100%; }
.striscia figcaption { width: min(var(--largo), 100% - 32px); margin: 0 auto; padding: .6em 0 .8em; font-size: .84rem; color: var(--tenue); }

/* il piede */
.piede { border-top: 1px solid var(--bordo); padding: 40px 0 56px; color: var(--spento); font-size: .88rem; background: var(--carbone); }
.piede .contenuto { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
.piede a { color: var(--tenue); }

/* la musica dell'ingresso (la stessa del gioco) */
.musica-ingresso { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--tenue); }
.musica-ingresso button { background: rgba(10, 8, 7, .6); color: var(--testo); border: 1px solid var(--bordo-chiaro); padding: .45em .9em; font: inherit; letter-spacing: .1em; cursor: pointer; }
.musica-ingresso button:hover { border-color: var(--oro); color: var(--pergamena); }
.musica-ingresso input[type=range] { width: 90px; accent-color: var(--brace); }

/* il cielo di adesso (landing e wiki: vetrina/cielo-vivo.js) */
.cielo-vivo { border: 1px solid var(--bordo); background: radial-gradient(120% 140% at 80% 0%, #1d2536 0%, #0e0f16 45%, #0a0807 100%); padding: 28px; margin-top: 36px; }
.cielo-vivo h3 { font-size: 1.05rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gelo); margin-bottom: 1em; }
.cielo-griglia { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
@media (max-width: 760px) { .cielo-griglia { grid-template-columns: 1fr; } }
.luna-disegno { width: 180px; height: 180px; margin: 0 auto; }
.cielo-dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 22px; }
.cielo-dati div { border-left: 2px solid #2d3a52; padding-left: 12px; }
.cielo-dati b { display: block; color: var(--pergamena); font-size: 1.12rem; }
.cielo-dati span { font-size: .82rem; color: var(--tenue); }
.nota-cielo { font-size: .84rem; color: var(--tenue); margin: 18px 0 0; }