/* Il sito di Inversun: i colori del gioco (Accesso.cs), Cinzel per i titoli come nel menu, nessun file da fuori. */
@font-face {
  font-family: "Cinzel";
  src: url("font/Cinzel-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --fondo: #080d14;
  --vetro: #0f151c;
  --testo: #ede4d3;
  --tenue: #b9b2a4;
  --oro: #ffd98c;
  --bottone: #fac76b;
  --scuro: #291a05;
  --crema: #fff2d9;
  --riga: rgba(255, 242, 217, 0.14);
  --largo: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--oro); text-underline-offset: 3px; }
a:hover { color: var(--crema); }

h1, h2, h3 { font-family: "Cinzel", Georgia, serif; color: var(--crema); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: 0 0 0.6em; }
h3 { font-size: 1.15rem; margin: 0 0 0.4em; }
p { margin: 0 0 1em; }

.largo { max-width: var(--largo); margin: 0 auto; padding: 0 20px; }

/* In cima: lo sguardo in su, il titolo, il motto */
.cima {
  position: relative;
  min-height: 92vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px 20px 60px;
  background:
    linear-gradient(180deg, rgba(8, 13, 20, 0.35) 0%, rgba(8, 13, 20, 0.55) 60%, var(--fondo) 100%),
    url("img/insu_giungla_sospesa_1_su.jpg") center / cover no-repeat;
}
.cima h1 {
  font-size: clamp(2.8rem, 11vw, 7.5rem);
  letter-spacing: 0.22em;
  margin: 0 0 0.25em;
  padding-left: 0.22em; /* lo spazio dopo l'ultima lettera */
  text-shadow: 0 0 40px rgba(255, 217, 140, 0.35), 0 2px 12px rgba(0, 0, 0, 0.6);
}
.motto {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1rem, 2.4vw, 1.45rem);
  color: var(--crema);
  max-width: 780px;
  margin: 0 auto 1.6em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.sotto { color: var(--testo); max-width: 640px; margin: 0 auto 2em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }

.bottoni { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bottone {
  display: inline-block;
  padding: 0.75em 1.5em;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  background: var(--bottone);
  color: var(--scuro);
}
.bottone:hover { background: var(--oro); color: var(--scuro); }
.bottone.vuoto { background: rgba(15, 21, 28, 0.75); color: var(--crema); border: 1px solid var(--riga); }
.bottone.vuoto:hover { border-color: var(--oro); color: var(--oro); }

section { padding: 72px 0; border-top: 1px solid var(--riga); }
section.chiaro { background: var(--vetro); }

/* Testo e immagine affiancati, che si impilano sul telefono */
.coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.coppia.giro > :first-child { order: 2; }
.coppia img { border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
@media (max-width: 760px) {
  .coppia { grid-template-columns: 1fr; gap: 24px; }
  .coppia.giro > :first-child { order: 0; }
}

/* Le foto con lo sguardo in su: la striscia larga */
.insu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.insu figure { margin: 0; }
.insu img { border-radius: 8px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.insu figcaption { color: var(--tenue); font-size: 0.85rem; margin-top: 6px; }
@media (max-width: 760px) { .insu { grid-template-columns: 1fr 1fr; } .insu figure:last-child:nth-child(odd) { grid-column: span 2; } }

/* Galleria */
.galleria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
.galleria a { display: block; border-radius: 6px; overflow: hidden; }
.galleria img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; transition: transform 0.25s; }
.galleria a:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .galleria { grid-template-columns: 1fr 1fr; } }

/* Le cose che il gioco fa, in griglia */
.punti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.punti div { background: rgba(255, 242, 217, 0.04); border: 1px solid var(--riga); border-radius: 10px; padding: 20px; }
.punti p { margin: 0; color: var(--tenue); font-size: 0.96rem; }
@media (max-width: 860px) { .punti { grid-template-columns: 1fr; } }

.promessa { border: 1px solid rgba(255, 217, 140, 0.35); border-radius: 12px; padding: 28px; background: rgba(255, 217, 140, 0.05); }
.promessa h2 { margin-top: 0; }

.fatti { width: 100%; border-collapse: collapse; margin: 12px 0 20px; }
.fatti th, .fatti td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--riga); vertical-align: top; }
.fatti th { color: var(--tenue); font-weight: 600; width: 34%; }

.inglese { color: var(--tenue); }
.inglese h2 { color: var(--crema); }

footer { border-top: 1px solid var(--riga); padding: 36px 0 48px; color: var(--tenue); font-size: 0.9rem; text-align: center; }
footer p { margin: 0.3em 0; }

/* Il visore delle immagini (index.html, in fondo) */
.visore { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: hidden; }
.visore::backdrop { background: rgba(4, 7, 11, 0.97); }
.visore figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 64px 16px; box-sizing: border-box; }
.visore img { max-width: 100%; max-height: calc(100% - 3.5em); object-fit: contain; border-radius: 6px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6); }
.visore figcaption { color: var(--tenue); text-align: center; margin-top: 12px; max-width: 760px; font-size: 0.95rem; }
.visore .conto { color: var(--oro); margin-right: 0.5em; }
.visore button { position: absolute; background: rgba(15, 21, 28, 0.75); color: var(--crema); border: 1px solid var(--riga); border-radius: 50%; width: 48px; height: 48px; font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.visore button:hover, .visore button:focus-visible { background: var(--bottone); color: var(--scuro); outline: none; }
.visore .chiudi { top: 12px; right: 12px; }
.visore .prima { left: 12px; top: 50%; transform: translateY(-50%); }
.visore .dopo { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 760px) {
  .visore figure { padding: 60px 8px 12px; }
  .visore .prima, .visore .dopo { top: auto; bottom: 14px; transform: none; }
  .visore img { max-height: calc(100% - 7em); }
}