/* pagine statiche (come si gioca, domande): HTML vero, leggibile anche senza JavaScript.
   Stessa impaginazione della pagina iniziale (Shell in apps/web/src/ui/App.tsx): cambia solo il contenuto della scheda bianca */
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: #1e293b; font: 16px/1.6 ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; }
.pagina { display: flex; flex-direction: column; align-items: center; padding: 40px 16px; }
.titolo { margin: 0; font-size: 60px; line-height: 1; font-weight: 900; letter-spacing: -0.025em; color: #fff; text-align: center; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.motto { margin: 8px 0 0; font-size: 18px; color: #fffbeb; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.scheda { width: 100%; max-width: 768px; margin-top: 32px; padding: 32px; background: #fff; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
h1 { font-size: 30px; line-height: 1.2; margin: 0 0 6px; color: #064e3b; font-weight: 900; }
h2 { font-size: 21px; margin: 28px 0 6px; color: #064e3b; font-weight: 900; }
.sotto { color: #64748b; font-size: 17px; margin: 0 0 18px; }
a { color: #047857; }
ol, ul { padding-left: 24px; }
li { margin: 4px 0; }
.riquadro { background: #ecfdf5; border-left: 5px solid #10b981; border-radius: 8px; padding: 12px 16px; margin: 18px 0; }
details { border-bottom: 1px solid #e2e8f0; padding: 10px 0; }
details:last-of-type { border-bottom: none; }
summary { font-weight: 700; cursor: pointer; font-size: 17px; }
details p { margin: 8px 0 4px; }
.glossario dt { font-weight: 800; color: #064e3b; margin-top: 14px; }
.glossario dd { margin: 2px 0 0; }
.indietro { margin-top: 32px; padding-top: 20px; border-top: 1px solid #e2e8f0; text-align: center; }
.indietro a { font-size: 15px; font-weight: 600; color: #047857; text-decoration: none; }
.indietro a:hover { color: #064e3b; text-decoration: underline; }
/* telefono: come la pagina iniziale del telefono (titolo piccolo a sinistra, scheda larga) */
@media (max-width: 640px), (max-height: 500px) {
  .pagina { align-items: stretch; padding: 8px 12px 16px; }
  .titolo { font-size: 20px; text-align: left; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
  .motto { display: none; }
  .scheda { max-width: none; margin-top: 8px; padding: 16px; border-radius: 16px; }
  h1 { font-size: 24px; }
}
body {
  /* stesso legno del tavolo di gioco (apps/web/src/index.css, .wood-table) */
  background-color: #6f4322;
  background-image:
    /* luce calda dall'alto e bordi in ombra */
    radial-gradient(ellipse at 50% -10%, rgba(255, 214, 160, 0.28), transparent 55%),
    radial-gradient(ellipse at 50% 130%, rgba(0, 0, 0, 0.55), transparent 60%),
    /* giunture fra le assi */
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0 2px, rgba(255, 230, 190, 0.07) 2px 3px, transparent 3px 180px),
    /* venature */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='540'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.0035 0.11' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.12 0 0 0 0 0.04 0 0 0 1.3 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='420'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.012 0.5' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.78 0 0 0 0 0.55 0 0 0 0.9 -0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #8a5a30, #6b4020 40%, #7c4d27 70%, #5e3819);
  background-attachment: fixed;
}