/* ============================================================================
   SOLO IO! — foglio di stile condiviso fra la regia e il telefono.
   Applica ART_STYLE.md: cartoncino su inchiostro, sei colori, niente sfumature.
   ============================================================================ */

:root {
  --inchiostro: #12233A;
  --inchiostro-cupo: #0A1524;
  --carta: #F4ECD8;
  --corallo: #FF6B4A;
  --oro: #FFC44D;
  --menta: #4ED8A0;
  --ruggine: #C4463A;
  --grigio: #8798AC;

  /* ART_STYLE §3: nessun font scaricato. Una wifi di locale che non consegna un
     webfont fa saltare il layout proprio mentre la sala guarda lo schermo. */
  --display: "Arial Black", "Archivo Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  --testo: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--inchiostro);
  color: var(--carta);
  font-family: var(--testo);
  overscroll-behavior: none;
}

body {
  /* vignettatura: la carta al centro, il buio ai bordi */
  background:
    radial-gradient(120% 100% at 50% 40%, #16294400 0%, var(--inchiostro-cupo) 100%),
    var(--inchiostro);
}

/* --------------------------------------------------------------- il cartoncino */
.carta {
  background: var(--carta);
  color: var(--inchiostro);
  border-radius: 14px;
  /* ombra SECCA, in basso a destra: deve sembrare posata, non fluttuante */
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
  position: relative;
  overflow: hidden;
}
/* la grana: unica texture del gioco, multiply al 12% (ART_STYLE §4) */
.carta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("../img/carta.webp");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: .12;
}

/* ------------------------------------------------------------------- tipografia */
.display { font-family: var(--display); font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; }

h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; margin: 0; }

/* ---------------------------------------------------------------------- bottoni */
.bottone {
  font-family: var(--display); font-size: 20px; letter-spacing: .02em; text-transform: uppercase;
  background: var(--carta); color: var(--inchiostro);
  border: 0; border-radius: 12px;
  padding: 16px 26px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
  touch-action: manipulation;
}
.bottone:active { transform: translate(3px, 3px); box-shadow: 0 0 0 rgba(0, 0, 0, .4); }
.bottone[disabled] { opacity: .45; cursor: default; }
.bottone.oro { background: var(--oro); }
.bottone.fantasma { background: transparent; color: var(--grigio); box-shadow: none; border: 2px solid #2C4159; }
.bottone.fantasma:active { transform: none; }

/* ------------------------------------------------------------- tasti tondi (HUD) */
.tondo {
  width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid #2C4159; background: #16283F; color: var(--carta);
  font-size: 20px; line-height: 1; display: grid; place-items: center;
  cursor: pointer; padding: 0; touch-action: manipulation;
}
.tondo:active { background: #1E3550; }

/* -------------------------------------------------------------------- overlay */
.velo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 13, 22, .92);
  display: grid; place-items: center; padding: 20px;
}
.velo[hidden] { display: none; }
.foglio {
  background: var(--carta); color: var(--inchiostro);
  border-radius: 16px; padding: 22px;
  max-width: 620px; width: 100%; max-height: 86vh; overflow-y: auto;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .45);
}
.foglio h2 { font-size: 26px; margin-bottom: 12px; }
.foglio h3 { font-size: 15px; margin: 16px 0 4px; letter-spacing: 0; }
.foglio p, .foglio li { font-size: 15px; line-height: 1.45; margin: 0 0 8px; }
.foglio ol { padding-left: 22px; margin: 0 0 12px; }
.foglio li { margin-bottom: 10px; }

/* --------------------------------------------------------------- marchio FRD */
/* §2 della procedura: il marchio nel menu E' UN LINK, e il click si conta. */
.marchio-frd {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--grigio); text-decoration: none;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 14px; border-radius: 10px;
}
.marchio-frd b { font-family: var(--display); color: var(--carta); letter-spacing: 0; }
.marchio-frd:active { background: rgba(255, 255, 255, .06); }

/* ------------------------------------------------------------------- timbri */
.timbro { position: absolute; pointer-events: none; }
.timbro img { display: block; width: 100%; }

/* ------------------------------------------------------------------ utilita' */
[hidden] { display: none !important; }
.centrato { display: grid; place-items: center; }
.piccolo { font-size: 13px; color: var(--grigio); }
.errato { outline: 2px solid var(--ruggine) !important; outline-offset: 1px; }

/* Overlay UGTK "Loading…" — la libreria lo crea da sola, qui gli si da' la faccia. */
.ugtk-loading {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(6, 13, 22, .9); color: var(--carta); font-family: var(--display);
}
.ugtk-loading-box { text-align: center; }
.ugtk-loading-bar { width: 220px; height: 8px; background: #1E3550; border-radius: 4px; margin: 12px auto; overflow: hidden; }
.ugtk-loading-bar > i { display: block; height: 100%; width: 0; background: var(--oro); }
.ugtk-loading-adv { color: var(--grigio); font-size: 13px; }