/* Pagina di presentazione pubblica (/ in inglese, /it/ in italiano). Stessi valori della Taverna del gioco: vedi DESIGN.md. */
:root {
  --bg: #120d09;
  --panel-top: #221a12; --panel-bottom: #1b140d;
  --panel: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bottom) 100%);
  --surface: #1e1710; --raised: #2a2016; --secondary: #251c13;
  --line: #3e2f1e; --ornament: #86652f;
  --input-bg: #150f0a;
  --text: #ecdfc6; --muted: #a8946f; --accent: #e6a93f; --accent-bright: #edb552; --accent-deep: #c2862b; --on-accent: #1a1208;
  --good: #86c07c; --bad: #de6f58; --info: #8fb9dc;
  --player-tint: rgba(143, 185, 220, .07);
  --stat: rgba(255, 220, 150, .035);
  --font-body: 'Crimson Pro', Georgia, serif; --font-head: Cinzel, Georgia, serif;
  --radius: .7rem; --radius-sm: .5rem;
  --shadow-panel: 0 1px 0 rgba(255,220,150,.05) inset, 0 10px 28px rgba(0,0,0,.4);
  --shadow-board: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,150,.06);
  --gutter: clamp(1rem, 3vw, 2.2rem);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { font-size: clamp(14px, .35vw + 11.5px, 19px); scroll-behavior: smooth; scrollbar-color: var(--ornament) var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text);
  font: 1.05rem/1.5 var(--font-body); caret-color: var(--accent);
}
::selection { background: rgba(230,169,63,.35); color: var(--text); }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-bright); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- fondo: le assi di una vecchia porta di taverna, ferme mentre la pagina scorre --- */
.wood {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: #2f1c0c;
  background-image:
    radial-gradient(ellipse 80% 70% at 50% 40%, transparent 35%, rgba(8,5,2,.72) 100%),
    linear-gradient(rgba(10,6,2,.45), rgba(10,6,2,.45)),
    url("/img/wood-door-bg.jpg");
  background-image:
    radial-gradient(ellipse 80% 70% at 50% 40%, transparent 35%, rgba(8,5,2,.72) 100%),
    linear-gradient(rgba(10,6,2,.45), rgba(10,6,2,.45)),
    image-set(url("/img/wood-door-bg.webp") type("image/webp"), url("/img/wood-door-bg.jpg") type("image/jpeg"));
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.page { position: relative; z-index: 1; max-width: 74rem; margin: 0 auto; padding: 0 var(--gutter) 3rem; }

/* --- barra in alto: nome del gioco e lingua --- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 0 .4rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; font: 700 1rem var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.brand .mark { width: 2.6rem; height: 2.6rem; flex: none; }
.lang { display: flex; gap: .2rem; font: 700 max(.72rem, 11px) var(--font-head); letter-spacing: .1em; text-transform: uppercase; }
.lang a, .lang span { padding: .45rem .6rem; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.lang a:hover { color: var(--text); background: var(--stat); }
.lang [aria-current] { color: var(--accent); background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--line); }

/* --- pannelli inchiodati alla porta --- */
.board {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-board);
}
.board::before {
  content: ""; position: absolute; top: -.55rem; left: 50%; translate: -50% 0; width: 1.1rem; height: 1.1rem;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c9c6b8, #6b6a5f 55%, #26251f 100%);
  box-shadow: 0 3px 5px rgba(0,0,0,.6);
}

/* --- apertura: l'avviso e un esempio di partita, fianco a fianco --- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; padding: 2.4rem 0 1rem; }
.notice { padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.3rem, 3vw, 2.4rem) clamp(1.5rem, 2.5vw, 2.1rem); }
h1 {
  margin: 0 0 1.1rem; font: 700 clamp(1.8rem, 2.6vw + 1rem, 2.75rem)/1.2 var(--font-head);
  color: var(--accent); text-shadow: 0 0 24px rgba(230,169,63,.28); text-wrap: balance; letter-spacing: .005em;
}
.lede { margin: 0 0 1.6rem; font-size: 1.18rem; line-height: 1.55; max-width: 36em; text-wrap: pretty; }
.lede strong { color: var(--accent); font-weight: 600; }
form {
  display: flex; gap: .5rem; flex-wrap: wrap; background: var(--input-bg);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
}
input[type=email] {
  flex: 1 1 13rem; min-width: 0; min-height: 44px; background: var(--input-bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .65rem .8rem; font: inherit;
  font-size: max(16px, 1em); /* sotto i 16px Safari su iPhone fa lo zoom automatico al tocco */
}
input[type=email]::placeholder { color: #8c7a5b; }
input[type=email]:hover { border-color: #57432a; }
.btn {
  flex: none; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep)); color: var(--on-accent); border: 0;
  border-radius: var(--radius-sm); padding: .65rem 1.3rem; font: 700 .9rem var(--font-head); letter-spacing: .04em;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,236,190,.35) inset, 0 2px 6px rgba(0,0,0,.35);
  transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(1.08); color: var(--on-accent); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
.consent { flex: 1 1 100%; display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; line-height: 1.4; color: var(--muted); cursor: pointer; }
.consent input { flex: none; width: 1.2rem; height: 1.2rem; margin: .1rem 0 0; accent-color: var(--accent); }
.feedback { margin: .7rem 0 0; font-size: .92rem; }
.feedback:empty { margin: 0; }
.feedback.ok { color: var(--good); }
.feedback.err { color: var(--bad); }
.status { margin: 1rem 0 0; color: var(--muted); font-size: .92rem; }

/* --- esempio di partita: come la chat del gioco --- */
.play { margin: 0; padding: 1.5rem clamp(1.1rem, 2.4vw, 1.7rem) 1.3rem; background: linear-gradient(180deg, #1e1710 0%, #18120c 100%); }
.play figcaption { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: 1.1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.play figcaption b { font: 700 max(.72rem, 11px) var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.play figcaption span { font-size: .85rem; color: var(--muted); font-style: italic; }
.msg { margin: 0 0 1rem; }
.who { display: block; font: 700 max(.7rem, 11px) var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.msg.you { background: var(--player-tint); border: 1px solid rgba(143,185,220,.16); border-radius: var(--radius-sm); padding: .55rem .85rem; }
.msg.you .who { color: var(--info); }
.msg.you p { margin: 0; font-style: italic; }
.msg.master p { margin: 0; font-size: 1.12rem; line-height: 1.62; }
.msg.master .npc { color: var(--accent); }
.rollbox {
  display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; align-items: center;
  margin: 0 0 1rem; padding: .8rem .95rem; border-radius: var(--radius-sm);
  background: var(--stat); border: 1px solid rgba(230,169,63,.32);
  box-shadow: 0 0 0 1px rgba(230,169,63,.15), 0 8px 26px rgba(230,169,63,.14);
}
.rollbox .what { font: 700 max(.72rem, 11px) var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.rollbox .detail { grid-column: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.rollbox .btn { grid-row: 1 / span 2; grid-column: 2; }
.d20 { width: 1.25rem; height: 1.25rem; flex: none; }
.result { display: flex; align-items: center; gap: .8rem; margin: 0 0 1rem; min-height: 2.6rem; }
.result[hidden] { display: none; }
/* il dado è lo stesso d20 disegnato sul bottone, pieno di miele, con il numero sulla faccia centrale */
.die {
  position: relative; flex: none; width: 3.2rem; height: 3.2rem; display: grid; place-items: center;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.die svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.die b {
  position: relative; translate: 0 .2rem; font: 700 1.1rem var(--font-head); font-variant-numeric: tabular-nums;
  color: var(--on-accent);
}
.rolling .die { transition: transform .06s linear; }
.sum { font-variant-numeric: tabular-nums; }
.sum b { font-family: var(--font-head); letter-spacing: .06em; }
.sum b.ok { color: var(--good); }
.sum b.ko { color: var(--bad); }
.reply[hidden] { display: none; }
.reply.enter { animation: ink .7s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes ink { from { opacity: 0; filter: blur(4px); translate: 0 .4rem; } to { opacity: 1; filter: blur(0); translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .reply.enter { animation: none; } .die { transition: none; } }

/* --- sezioni --- */
section { padding: clamp(3rem, 6vw, 4.8rem) 0 0; }
/* il testo che sta direttamente sul legno: un filo d'ombra lo tiene leggibile sulle venature chiare */
section > h2, .intro, .traits, .faq summary, .faq p { text-shadow: 0 1px 2px rgba(0,0,0,.65); }
h2 { margin: 0 0 1.4rem; font: 700 clamp(1.45rem, 1.4vw + 1rem, 2rem)/1.2 var(--font-head); color: var(--accent); text-wrap: balance; }
h3 { margin: 0 0 .45rem; font: 700 1.12rem/1.25 var(--font-head); color: var(--text); letter-spacing: .02em; }
.intro { max-width: 40em; margin: -.4rem 0 1.8rem; color: #d8c9ac; font-size: 1.1rem; }

/* chi fa cosa al tavolo: un registro di tre righe, non tre schede */
.ledger { padding: .6rem clamp(1.2rem, 3vw, 2.4rem); }
.ledger dl { margin: 0; }
.ledger .row { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: .4rem 2.2rem; padding: 1.35rem 0; border-top: 1px solid var(--line); }
.ledger .row:first-child { border-top: 0; }
.ledger dt { font: 700 1.25rem/1.25 var(--font-head); color: var(--accent); }
.ledger dt small { display: block; margin-top: .3rem; font: italic 400 .95rem var(--font-body); color: var(--muted); letter-spacing: 0; }
.ledger dd { margin: 0; font-size: 1.12rem; line-height: 1.6; max-width: 38em; }

/* come si gioca davvero: prosa su due colonne, con il rombo d'ottone del gioco */
.traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem clamp(2rem, 5vw, 4.5rem); margin: 0; padding: 0; list-style: none; }
.traits li { position: relative; padding-left: 1.6rem; max-width: 34em; }
.traits li::before {
  content: ""; position: absolute; left: .1rem; top: .5rem; width: .55rem; height: .55rem; rotate: 45deg;
  background: var(--ornament); box-shadow: 0 0 0 3px rgba(134,101,47,.22);
}
.traits p { margin: 0; color: #d8c9ac; line-height: 1.6; }

/* le campagne: due avvisi appesi, un po' storti come quelli veri */
.quests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 3.5vw, 2.8rem); padding-top: .6rem; }
.quest { padding: 1.9rem clamp(1.2rem, 2.6vw, 2rem) 1.5rem; }
.quest:nth-child(1) { rotate: -.6deg; }
.quest:nth-child(2) { rotate: .7deg; margin-top: 1.4rem; }
.quest h3 { font-size: 1.4rem; color: var(--accent); margin-bottom: .2rem; }
.quest .genre { margin: 0 0 1rem; color: var(--muted); font-style: italic; }
.quest p { margin: 0 0 1.1rem; line-height: 1.6; }
.facts { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.facts li { padding: .15rem .65rem; border-radius: 99px; background: var(--stat); border: 1px solid var(--line); font-size: .9rem; color: #d8c9ac; font-variant-numeric: tabular-nums; }

/* domande frequenti */
.faq { max-width: 52rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1rem .2rem; font: 700 1.05rem/1.35 var(--font-head); color: var(--text); letter-spacing: .01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .55rem; height: .55rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  rotate: 45deg; translate: 0 -.15rem; transition: rotate .2s ease, translate .2s ease;
}
.faq details[open] summary::after { rotate: 225deg; translate: 0 .15rem; }
.faq summary:hover { color: var(--accent-bright); }
.faq details > div { padding: 0 .2rem 1.2rem; max-width: 42em; }
.faq details p { margin: 0 0 .7rem; line-height: 1.6; color: #d8c9ac; }

/* chiusura */
.close { margin-top: clamp(3rem, 6vw, 4.8rem); padding: clamp(2rem, 4vw, 2.8rem) clamp(1.3rem, 4vw, 3rem); text-align: center; }
.close h2 { margin-bottom: .7rem; }
.close p { margin: 0 auto 1.5rem; max-width: 34em; color: #d8c9ac; font-size: 1.1rem; }

footer { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(62,47,30,.7); color: #c9b894; text-shadow: 0 1px 2px rgba(0,0,0,.65); font-size: max(.82rem, 12px); line-height: 1.6; }
footer nav { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-bottom: .7rem; letter-spacing: .03em; }
footer a { color: inherit; }
footer a:hover { color: var(--text); }
footer p { margin: 0; max-width: 60em; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 1.8rem; }
  .ledger .row { grid-template-columns: 1fr; }
  .traits, .quests { grid-template-columns: 1fr; }
  .quest:nth-child(2) { margin-top: 0; }
}
@media (max-width: 480px) {
  .bar { padding-top: 1rem; }
  .brand { font-size: .8rem; letter-spacing: .08em; gap: .5rem; white-space: nowrap; }
  .brand .mark { width: 2.2rem; height: 2.2rem; }
  .lang a, .lang span { padding: .4rem .45rem; }
  .notice form .btn { flex: 1 1 100%; }
  .rollbox { grid-template-columns: 1fr; }
  .rollbox .btn { grid-row: auto; grid-column: 1; justify-self: start; }
  .quest:nth-child(1), .quest:nth-child(2) { rotate: 0deg; }
}