/* ============================================================================
   style.css — Interfaccia mobile portrait (nessuna risorsa esterna: offline)
   ========================================================================== */
:root{
  --sfondo:#0b1116;
  --sfondo2:#121b22;
  --pannello:#16222b;
  --pannello2:#1c2b36;
  --bordo:#2c4150;
  --testo:#e6e1d6;
  --testo2:#a9b6bd;
  --oro:#d8b46a;
  --oro2:#f0d193;
  --acqua:#5fa8a0;
  --sangue:#c05a4e;
  --verde:#6f9a5e;
  --viola:#8f7bc0;
  --raggio:14px;
  --ombra:0 6px 18px rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:var(--sfondo);color:var(--testo);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  font-size:16px;line-height:1.5;overscroll-behavior:none}
body{user-select:none;-webkit-user-select:none}
#app{max-width:560px;margin:0 auto;min-height:100%;position:relative;
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 0 60px rgba(0,0,0,.6)}
.nascosto{display:none !important}
.schermo{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  padding:calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom))}

/* ------------------------------- tipografia ------------------------------- */
h1,h2,h3,h4{margin:0 0 .4em;font-weight:600;letter-spacing:.01em}
h1{font-size:1.7rem;color:var(--oro2)}
h2{font-size:1.25rem;color:var(--oro)}
h3{font-size:1.05rem;color:var(--oro2)}
p{margin:0 0 .8em}
.piccolo{font-size:.8rem;color:var(--testo2)}
.evidenzia{color:var(--oro2)}
.pericolo{color:var(--sangue)}
.successo{color:var(--verde)}
.magico{color:var(--viola)}

/* --------------------------------- bottoni -------------------------------- */
button{font-family:inherit;font-size:1rem;color:var(--testo);background:var(--pannello2);
  border:1px solid var(--bordo);border-radius:12px;padding:12px 14px;min-height:48px;
  width:100%;text-align:left;cursor:pointer;transition:transform .06s,background .15s,border-color .15s}
button:active{transform:scale(.985);background:#22333f}
button:disabled{opacity:.4}
.btn-primario{background:linear-gradient(180deg,#3a2f18,#241d10);border-color:var(--oro);color:var(--oro2);
  text-align:center;font-weight:600}
.btn-pericolo{border-color:var(--sangue);color:#e8a79e;text-align:center}
.btn-azione{background:linear-gradient(180deg,#1d2d38,#152430);border-color:var(--acqua);color:#cfe9e5;text-align:center}
.btn-lista{margin-bottom:8px}
.btn-lista .titolo{font-weight:600;display:block}
.btn-lista .sotto{font-size:.78rem;color:var(--testo2);display:block;margin-top:2px}
.btn-compatto{min-height:42px;padding:8px 10px;font-size:.9rem}
.riga-bottoni{display:flex;gap:8px}
.riga-bottoni button{flex:1}

/* --------------------------------- titolo --------------------------------- */
#schermo-titolo{position:relative;justify-content:center;align-items:stretch;text-align:center;
  background:radial-gradient(120% 80% at 50% 0%,#1b2c36 0%,#0b1116 70%)}
#schermo-titolo .marchio{font-size:3.4rem;line-height:1;margin-bottom:.1em}
#schermo-titolo h1{margin-bottom:.1em}
#schermo-titolo .sottotitolo{color:var(--testo2);font-size:.9rem;margin-bottom:2em;font-style:italic}
#schermo-titolo .menu{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:0 auto;width:100%}
#schermo-titolo .crediti{position:absolute;bottom:14px;left:0;right:0;font-size:.68rem;color:#5b6b74;padding:0 16px}

/* ----------------------------- creazione PG ------------------------------- */
.testata{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.testata .passo{font-size:.75rem;color:var(--testo2);text-transform:uppercase;letter-spacing:.12em}
.barra-progresso{height:4px;background:#1b2731;border-radius:2px;overflow:hidden;margin-bottom:14px}
.barra-progresso > div{height:100%;background:var(--oro);transition:width .25s}
.contenuto{flex:1;overflow-y:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.piede{padding-top:10px;display:flex;gap:8px}
.piede>*{flex:1 1 0;min-width:0}

.griglia{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.scheda{background:var(--pannello);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:12px;margin-bottom:10px}
.scheda.selezionata{border-color:var(--oro);background:#232f22}
.griglia-caratteristiche{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.caratt{background:var(--pannello);border:1px solid var(--bordo);border-radius:12px;padding:8px;text-align:center}
.caratt .nome{font-size:.72rem;color:var(--testo2);text-transform:uppercase;letter-spacing:.05em}
.caratt .valore{font-size:1.5rem;font-weight:600;color:var(--oro2)}
.caratt .mod{font-size:.8rem;color:var(--testo2)}
.caratt .controlli{display:flex;gap:6px;margin-top:6px;justify-content:center}
.caratt .controlli button{width:34px;min-height:34px;padding:0;font-size:1.1rem;text-align:center;border-radius:8px}

.lista-abilita{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:5px;background:#1d2a33;border:1px solid var(--bordo);
  border-radius:999px;padding:5px 11px;font-size:.82rem}
.chip.attivo{background:#33301a;border-color:var(--oro);color:var(--oro2)}
.chip .bonus{color:var(--testo2);font-size:.75rem}

.ritratto{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:2rem;border:2px solid var(--bordo);flex:none}
.ritratto.piccolo{width:38px;height:38px;font-size:1.2rem}

/* --------------------------------- scene ---------------------------------- */
#schermo-scena{padding:0}
.testata-scena{padding:12px 14px 8px;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent);
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.testata-scena .titolo{font-size:.95rem;color:var(--oro2);letter-spacing:.04em}
.pannello-scena{flex:1;padding:14px 16px;overflow-y:auto}
.parlante{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.parlante .nome{font-weight:600;color:var(--oro2)}
.testo-scena{font-size:1.02rem;line-height:1.62;white-space:pre-wrap}
.opzioni{padding:8px 12px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.tag-opzione{font-size:.68rem;border:1px solid var(--bordo);border-radius:6px;padding:1px 5px;
  color:var(--testo2);margin-right:6px;vertical-align:middle}
.cd-opzione{font-size:.75rem;color:var(--acqua);margin-left:6px}

/* ------------------------------ combattimento ----------------------------- */
#schermo-combattimento{padding:0}
.striscia-iniziativa{display:flex;gap:6px;padding:8px;overflow-x:auto;background:#0e171d;
  border-bottom:1px solid var(--bordo);flex:none}
.gettone-iniziativa{flex:none;width:44px;text-align:center;opacity:.55;border-radius:8px;padding:3px;
  border:1px solid transparent}
.gettone-iniziativa.attuale{opacity:1;border-color:var(--oro);background:#1d2a24}
.gettone-iniziativa .emoji{font-size:1.3rem;line-height:1}
.gettone-iniziativa .iniz{font-size:.65rem;color:var(--testo2)}
.gettone-iniziativa.morto{opacity:.25;filter:grayscale(1)}
.gettone-iniziativa .vita{height:3px;background:#2a3a30;border-radius:2px;margin-top:2px;overflow:hidden}
.gettone-iniziativa .vita > div{height:100%;background:var(--verde)}

.info-attore{display:flex;align-items:center;gap:10px;padding:6px 10px;background:#101a20;
  border-bottom:1px solid var(--bordo);font-size:.85rem;flex:none}
.info-attore .barra-vita{flex:1;height:8px;background:#2a1c1c;border-radius:4px;overflow:hidden}
.info-attore .barra-vita > div{height:100%;background:linear-gradient(90deg,#8e3a30,#c05a4e)}
.area-mappa{flex:1 1 0;min-height:0;position:relative;overflow:hidden;background:#0a1014}
.area-mappa canvas{display:block}
canvas{display:block;width:100%;height:100%;touch-action:none}
.log{position:absolute;left:8px;right:8px;bottom:8px;max-height:78px;overflow-y:auto;
  background:rgba(8,14,18,.82);border:1px solid var(--bordo);border-radius:10px;padding:6px 8px;
  font-size:.78rem;line-height:1.35}
.log div{margin-bottom:2px}
.log .danno{color:#e8a79e}
.log .magia{color:#bfb0e8}
.log .critico{color:var(--oro2);font-weight:600}
.barra-azioni{padding:8px;display:flex;flex-direction:column;gap:6px;background:#0e171d;
  border-top:1px solid var(--bordo);flex:none}
.barra-azioni .riga{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.barra-azioni button{min-height:46px;text-align:center;font-size:.85rem;padding:6px 4px}
.grande{grid-column:span 3}

/* ----------------------------- accampamento ------------------------------- */
.fuoco{font-size:3rem;text-align:center;margin:10px 0}
.pannello-personaggio{display:flex;gap:10px;align-items:center;background:var(--pannello);
  border:1px solid var(--bordo);border-radius:var(--raggio);padding:10px;margin-bottom:8px}
.pannello-personaggio .dati{flex:1;min-width:0}
.pannello-personaggio .nome{font-weight:600}
.pannello-personaggio .barra{height:7px;background:#2a1c1c;border-radius:4px;overflow:hidden;margin-top:4px}
.pannello-personaggio .barra > div{height:100%;background:linear-gradient(90deg,#8e3a30,#c05a4e)}
.stato-linea{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.cond-chip{font-size:.68rem;background:#33252a;border:1px solid #5a3b3b;border-radius:999px;padding:2px 7px}

/* --------------------------------- modale --------------------------------- */
#modale{position:fixed;inset:0;background:rgba(4,8,10,.86);z-index:50;display:flex;
  align-items:flex-end;justify-content:center;padding:0}
#modale .contenuto-modale{background:var(--sfondo2);border:1px solid var(--bordo);border-radius:16px 16px 0 0;
  width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom))}
#modale .corpo-modale{overflow-y:auto;flex:1;margin:10px 0}
/* --------------------------- segnalazioni + versione ---------------------- */
.anteprima-segnalazione{max-height:180px;overflow-y:auto;background:#0d1516;border:1px solid var(--bordo);border-radius:10px;
  padding:10px 12px;font-size:.78rem;line-height:1.5;color:var(--testo2);white-space:pre-wrap;word-break:break-word;margin:8px 0}
.versione-app{position:absolute;right:14px;bottom:10px;font-size:.72rem;color:var(--testo2);opacity:.7;letter-spacing:.02em}
#toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:60;
  background:#1d2a24;border:1px solid var(--oro);color:var(--oro2);padding:10px 16px;border-radius:12px;
  font-size:.9rem;box-shadow:var(--ombra);max-width:90%;text-align:center}

/* ------------------------------- animazioni ------------------------------- */
@keyframes comparsa{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.scheda,.pannello-personaggio,.testo-scena{animation:comparsa .22s ease-out}
.dado{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:10px;background:#1b2731;border:1px solid var(--oro);font-size:1.3rem;font-weight:600;
  color:var(--oro2);margin:6px 8px 6px 0;vertical-align:middle}
.esito{font-size:.9rem;margin:6px 0}

/* ============================== ATTO I: CITTÀ ============================== */
.testata-citta{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}
.testata-citta .titolo{font-size:1.05rem;color:var(--oro2);letter-spacing:.05em}
.borsa{display:flex;align-items:center;gap:6px;background:#221c0e;border:1px solid var(--oro);
  border-radius:999px;padding:4px 12px;font-size:.85rem;color:var(--oro2);white-space:nowrap}
.mappa-citta{padding:6px 12px 0;flex:0 0 auto}
.griglia-quartieri{display:flex;flex-direction:column;gap:10px;padding:6px 12px 4px}
.quartiere{display:flex;gap:12px;align-items:center;border:1px solid var(--bordo);
  border-radius:14px;padding:12px;background:var(--pannello);position:relative;overflow:hidden;
  min-height:74px}
.quartiere .icona{font-size:1.8rem;flex:none;width:46px;text-align:center;z-index:1}
.quartiere .testi{flex:1;min-width:0;z-index:1}
.quartiere .nome{font-weight:600;color:var(--oro2);font-size:.98rem}
.quartiere .breve{font-size:.76rem;color:var(--testo2);margin-top:2px;line-height:1.35}
.quartiere.bloccato{opacity:.5;filter:grayscale(.7)}
.quartiere.bloccato .nome{color:var(--testo2)}
.quartiere .sfondo{position:absolute;inset:0;opacity:.55;z-index:0}
.quartiere .lucchetto{flex:none;font-size:1rem;opacity:.7}
.barra-stato{display:flex;gap:10px;align-items:center;margin-top:10px}
.barra-stato .voce{font-size:.72rem;color:var(--testo2)}
.barra-stato .voce b{color:var(--oro2);font-weight:600}

/* ============================== INVENTARIO ================================= */
.riga-oggetto{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--bordo);
  border-radius:12px;padding:10px;margin-bottom:8px;background:var(--pannello)}
.riga-oggetto .icona{flex:none;width:38px;height:38px;border-radius:10px;display:flex;
  align-items:center;justify-content:center;font-size:1.2rem;background:#1b2731;border:1px solid var(--bordo)}
.riga-oggetto .corpo{flex:1;min-width:0}
.riga-oggetto .nome{font-weight:600;font-size:.92rem}
.riga-oggetto .desc{font-size:.75rem;color:var(--testo2);margin-top:3px;line-height:1.4}
.riga-oggetto .meta{font-size:.72rem;color:var(--acqua);margin-top:3px}
.riga-oggetto .azioni{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.riga-oggetto .azioni button{min-height:38px;padding:6px 12px;font-size:.82rem}
.qta{font-size:.78rem;color:var(--oro2);font-weight:600}
.rarita-comune{color:var(--testo2)}
.rarita-non_comune{color:var(--verde)}
.rarita-rara{color:#7fb4e8}
.rarita-unica{color:var(--viola)}
.scheletro-inventario{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.scheletro-inventario .chip.attivo{background:#33301a;border-color:var(--oro);color:var(--oro2)}
.vuoto{text-align:center;color:var(--testo2);font-size:.85rem;padding:18px 0}
.equip-badge{font-size:.7rem;background:#1d3327;border:1px solid #3f6b4f;color:#a8d8b4;
  border-radius:999px;padding:2px 8px;margin-left:6px}

/* ================================ NEGOZIO ================================== */
.testa-negozio{border:1px solid var(--bordo);border-radius:12px;padding:10px;margin-bottom:10px;
  background:#121a20}
.testata-negozio-riga{display:flex;justify-content:space-between;align-items:center;gap:8px}
.prezzo{font-size:.82rem;color:var(--oro2);font-weight:600;white-space:nowrap}
.prezzo.povero{color:var(--sangue);font-weight:400}