/* ============================================================================
   CONQUERCUBE — stile dell'interfaccia, fantasy (Manuel, 20 settembre 2026):
   «tutti i menu e la UI falli tu in stile piu fantasy; ora e molto fredda e tecnologica.
    I bottoni stessi, la UI stessa: falla piu carina e piu fantasy».

   Questo foglio e la PELLE dei menu: pergamena, legno, ferro battuto e oro.
   La grafica del mondo (terreno, modelli, effetti) resta di Astra; qui ci sono solo i pannelli.
   Nessuna immagine esterna: tutto disegnato con gradienti, cosi non pesa e non si rompe.
   Se Astra ha texture vere (pergamena, legno, cuoio), bastano tre variabili: --pergamena-img,
   --legno-img, --cuoio-img, e i pannelli le usano senza toccare altro.
   ============================================================================ */

:root {
  /* inchiostri e materiali */
  --pergamena:      #e7d7b1;
  --pergamena-alta: #f3e7c8;
  --pergamena-bassa:#cdb887;
  --inchiostro:     #2a1f14;
  --inchiostro-tenue:#5d4c36;
  --legno:          #3b2a1b;
  --legno-alto:     #59412a;
  --legno-basso:    #241a10;
  --ferro:          #4c4a47;
  --oro:            #c9a227;
  --oro-chiaro:     #f0d67a;
  --oro-scuro:      #8a6b12;
  --sangue:         #7b2d26;
  --veleno:         #4f7a34;
  --mana:           #3a5c8f;
  --vita:           #9d2f2a;

  /* misure */
  --raggio:         10px;
  --cornice:        3px;
  --ombra-dentro:   inset 0 0 30px rgba(90, 60, 20, .35);
  --ombra-fuori:    0 10px 26px rgba(0, 0, 0, .55);
  --titolo:         'Cinzel', 'Trajan Pro', 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
  --testo:          'EB Garamond', 'IM Fell English', Georgia, 'Times New Roman', serif;
}

/* chi vuole il fondo chiaro di giorno e scuro di notte cambia solo questa classe sul body */
.notte {
  --pergamena:      #d9c79e;
  --pergamena-alta: #e6d5aa;
  --pergamena-bassa:#b8a273;
}

/* ------------------------------------------------------------------ base */
.ui, .ui * { box-sizing: border-box; }
.ui {
  font-family: var(--testo);
  color: var(--inchiostro);
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
.ui h1, .ui h2, .ui h3, .ui .titolo {
  font-family: var(--titolo);
  font-weight: 600;
  letter-spacing: .04em;
  margin: 0;
}

/* ------------------------------------------------------------------ pannello di pergamena */
.pannello {
  position: relative;
  background:
    radial-gradient(120% 90% at 30% 0%, var(--pergamena-alta) 0%, var(--pergamena) 55%, var(--pergamena-bassa) 100%),
    var(--pergamena-img, none);
  background-size: cover;
  border: var(--cornice) solid var(--legno);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-fuori), var(--ombra-dentro);
  padding: 14px 16px 16px;
}
/* il filo d'oro interno */
.pannello::before {
  content: '';
  position: absolute; inset: 3px;
  border: 1px solid rgba(201, 162, 39, .55);
  border-radius: calc(var(--raggio) - 3px);
  pointer-events: none;
}
/* gli angoli battuti */
.pannello::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--raggio);
  pointer-events: none;
  background:
    radial-gradient(circle at 0 0,     rgba(138, 107, 18, .45) 0 9px, transparent 10px),
    radial-gradient(circle at 100% 0,  rgba(138, 107, 18, .45) 0 9px, transparent 10px),
    radial-gradient(circle at 0 100%,  rgba(138, 107, 18, .45) 0 9px, transparent 10px),
    radial-gradient(circle at 100% 100%,rgba(138, 107, 18, .45) 0 9px, transparent 10px);
}
.pannello > * { position: relative; z-index: 1; }

.pannello .intestazione {
  display: flex; align-items: center; gap: 10px;
  margin: -4px -4px 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(58, 42, 27, .35);
}
.pannello .intestazione h2 { font-size: 19px; }
.pannello .intestazione .fregio {
  flex: 1; height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro-scuro), transparent);
  opacity: .8;
}
.chiudi {
  width: 26px; height: 26px; line-height: 22px; text-align: center;
  border-radius: 50%; cursor: pointer; font-family: var(--titolo);
  border: 2px solid var(--oro-scuro); color: var(--legno-basso);
  background: radial-gradient(circle at 35% 30%, var(--pergamena-alta), var(--pergamena-bassa));
}
.chiudi:hover { background: radial-gradient(circle at 35% 30%, #fff3d2, var(--oro-chiaro)); }

/* ------------------------------------------------------------------ bottoni di legno e ferro */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--titolo); font-size: 14px; letter-spacing: .03em;
  color: #f2e4c2; text-shadow: 0 1px 0 #000;
  padding: 9px 18px; cursor: pointer; user-select: none;
  border: 2px solid var(--oro-scuro); border-radius: 8px;
  background:
    linear-gradient(180deg, var(--legno-alto) 0%, var(--legno) 55%, var(--legno-basso) 100%),
    var(--legno-img, none);
  background-size: cover;
  box-shadow: 0 3px 0 var(--legno-basso), 0 6px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 230, 170, .22);
  transition: transform .06s, box-shadow .06s, filter .12s;
}
.bottone:hover { filter: brightness(1.12); border-color: var(--oro); }
.bottone:active { transform: translateY(3px); box-shadow: 0 0 0 var(--legno-basso), inset 0 2px 6px rgba(0, 0, 0, .5); }
.bottone[disabled], .bottone.spento { filter: grayscale(.7) brightness(.75); cursor: not-allowed; }
.bottone.oro {
  color: #3a2a10; text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  background: linear-gradient(180deg, var(--oro-chiaro), var(--oro) 60%, var(--oro-scuro));
  border-color: #5d4708;
}
.bottone.pericolo { background: linear-gradient(180deg, #a04038, var(--sangue) 60%, #4d1a15); }
.bottone.piccolo { padding: 5px 11px; font-size: 12.5px; }
.bottone.largo { width: 100%; }

/* ------------------------------------------------------------------ barre di vita, mana, esperienza */
.barra {
  position: relative; height: 16px; border-radius: 9px; overflow: hidden;
  border: 2px solid var(--legno); background: linear-gradient(180deg, #241a10, #0f0b07);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7);
}
.barra > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 45%), var(--tinta, var(--vita));
  transition: width .25s ease-out;
}
.barra.vita  { --tinta: linear-gradient(90deg, #6d1b17, var(--vita) 60%, #c4564f); }
.barra.mana  { --tinta: linear-gradient(90deg, #1e3557, var(--mana) 60%, #6f9ad6); }
.barra.fiato { --tinta: linear-gradient(90deg, #5c5417, #b9a33a 60%, #e6d77a); }
#hud .hud-fiato { align-self: stretch; height: 10px; margin: 0 8px; }
#hud .hud-fiato span { font-size: 9px; line-height: 10px; }
/* (punto 102) l'Ossigeno a disposizione sopra la stamina: azzurro come l'acqua */
.barra.ossigeno { --tinta: linear-gradient(90deg, #14506e, #3aa6d9 60%, #a8e4ff); }
#hud .hud-ossigeno { align-self: stretch; height: 10px; margin: 0 8px 3px; }
#hud .hud-ossigeno span { font-size: 9px; line-height: 10px; }
#hud .hud-ossigeno[hidden] { display: none; }
.barra.xp    { --tinta: linear-gradient(90deg, var(--oro-scuro), var(--oro) 70%, var(--oro-chiaro)); height: 10px; }
.barra > span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--titolo); font-size: 11px; color: #f7ebcd; text-shadow: 0 1px 2px #000;
}

/* ------------------------------------------------------------------ caselle dell'equipaggiamento e bag */
.caselle { display: grid; grid-template-columns: repeat(4, 56px); gap: 8px; }
.casella {
  position: relative; width: 56px; height: 56px; border-radius: 8px; cursor: pointer;
  border: 2px solid var(--legno); background:
    linear-gradient(180deg, rgba(60, 44, 28, .35), rgba(20, 14, 9, .5)),
    radial-gradient(circle at 50% 35%, rgba(240, 214, 122, .18), transparent 70%),
    var(--cuoio-img, none);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
  display: grid; place-items: center;
}
.casella:hover { border-color: var(--oro); box-shadow: inset 0 0 12px rgba(240, 214, 122, .35); }
.casella .nome {
  position: absolute; bottom: 2px; left: 0; right: 0; text-align: center;
  font-size: 9px; color: #e9d9b4; text-shadow: 0 1px 2px #000; pointer-events: none;
}
.casella .quanti {
  position: absolute; top: 2px; right: 4px; font-family: var(--titolo);
  font-size: 11px; color: #fff0c9; text-shadow: 0 1px 2px #000;
}
.casella.vuota { opacity: .55; }
.casella .icona { font-size: 24px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.casella.rotto { border-color: var(--sangue); }

/* la barra delle abilita in basso, come in Ultima Online */
.barra-abilita { display: flex; gap: 6px; padding: 8px 10px; }
.barra-abilita .casella { width: 48px; height: 48px; }
.barra-abilita .casella .tasto {
  position: absolute; top: 1px; left: 4px; font-size: 10px; color: var(--oro-chiaro); text-shadow: 0 1px 2px #000;
}

/* ------------------------------------------------------------------ liste, tabelle, righe di bottega */
.riga {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 6px;
  border-bottom: 1px dashed rgba(58, 42, 27, .3);
}
.riga:hover { background: rgba(255, 244, 214, .45); }
.riga .cresce { flex: 1; }
.riga .prezzo { font-family: var(--titolo); color: var(--oro-scuro); white-space: nowrap; }
.sottotitolo { color: var(--inchiostro-tenue); font-size: 13px; font-style: italic; }
.divisorio { height: 2px; margin: 10px 0; background: linear-gradient(90deg, transparent, rgba(58, 42, 27, .45), transparent); }

/* la riuscita di una lavorazione (Manuel: si puo fallire) */
.riuscita { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.riuscita .sigillo {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--titolo); font-size: 12px; color: #2a1f14;
  border: 2px solid var(--oro-scuro);
  background: conic-gradient(var(--oro) calc(var(--p, 0) * 1%), rgba(90, 70, 30, .25) 0);
}
.riuscita.male .sigillo { border-color: var(--sangue); background: conic-gradient(#b4463d calc(var(--p, 0) * 1%), rgba(90, 70, 30, .25) 0); }

/* ------------------------------------------------------------------ parlata sopra la testa (niente chat) */
.parlata {
  position: absolute; transform: translate(-50%, -100%);
  font-family: var(--testo); font-size: 15px; color: #fdf3d8;
  text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 0 #000;
  white-space: pre-wrap; text-align: center; pointer-events: none;
  animation: sale 9s linear forwards;
}
.parlata.mia { color: #ffe9a8; }
.parlata.grido { font-weight: 700; letter-spacing: .02em; }
@keyframes sale { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -140%); } }

/* la riga dove si scrive, che compare con INVIO */
.riga-parlata {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px;
  border: 2px solid var(--oro-scuro);
  background: linear-gradient(180deg, rgba(20, 14, 9, .9), rgba(10, 7, 4, .95));
  color: #f6e8c6; font-family: var(--testo);
}
.riga-parlata input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: #f6e8c6; font-family: var(--testo); font-size: 15px;
}

/* ------------------------------------------------------------------ avvisi e cartigli */
.cartiglio {
  padding: 8px 12px; border-radius: 6px;
  border-left: 4px solid var(--oro);
  background: linear-gradient(90deg, rgba(240, 214, 122, .35), rgba(240, 214, 122, 0));
  font-style: italic;
}
.cartiglio.male { border-left-color: var(--sangue); background: linear-gradient(90deg, rgba(180, 70, 61, .3), transparent); }
.cartiglio.bene { border-left-color: var(--veleno); background: linear-gradient(90deg, rgba(79, 122, 52, .28), transparent); }

/* il timer del riassesto delle caratteristiche (24 ore) */
.clessidra { display: inline-flex; align-items: center; gap: 6px; font-family: var(--titolo); font-size: 12.5px; color: var(--inchiostro-tenue); }
.clessidra .pallino { width: 8px; height: 8px; border-radius: 50%; background: var(--veleno); box-shadow: 0 0 6px var(--veleno); }
.clessidra.attesa .pallino { background: var(--sangue); box-shadow: 0 0 6px var(--sangue); }

/* ------------------------------------------------------------------ schermi piccoli */
@media (max-width: 720px) {
  .ui { font-size: 14px; }
  .caselle { grid-template-columns: repeat(3, 52px); }
  .pannello { padding: 12px; }
}

/* ============================================================================
   AGGIUNTE DEL 20 SETTEMBRE (sera) — Manuel: «nelle banche, come nei bag, non devono starci le
   scritte delle cose ma proprio le ICONE, come su UO»; «hai già su POPULATION come andavano
   progettati bag, banche, casse e tutto il resto dei loot»; «guarda pure le ampolle come sono
   strutturate». Quello che segue viene da POPULATION (public/css/style.css e js/inventory.js),
   rivestito di pergamena e oro: le ragioni di quelle scelte stanno scritte lì e restano valide.
   ============================================================================ */

/* ---------------------------------------------------------------- il CONTENITORE (zaino, forziere, cassa, offerta) */
.contenitore {
  display: grid; grid-template-columns: repeat(6, 52px); gap: 5px;
  padding: 8px; border-radius: 8px;
  max-height: 340px; overflow-y: auto;
  border: 2px solid var(--legno-basso);
  background:
    linear-gradient(180deg, rgba(38, 27, 17, .55), rgba(20, 14, 9, .7)),
    var(--cuoio-img, none);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .65);
}
.contenitore .casella { width: 52px; height: 52px; }
.contenitore.sola-lettura { opacity: .92; filter: saturate(.85); }
.due { display: flex; gap: 14px; flex-wrap: wrap; }
.due > div { flex: 1 1 220px; }
.etichetta { font-family: var(--titolo); font-size: 12px; letter-spacing: .06em; text-transform: lowercase; color: var(--inchiostro-tenue); margin: 0 0 5px 2px; }
.casella .ombra { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9.5px; color: rgba(233, 217, 180, .45); text-transform: lowercase; pointer-events: none; }
.casella[draggable="true"]:active { cursor: grabbing; }
.icona.grande { font-size: 26px; }
.riga .mat { display: inline-flex; align-items: center; gap: 2px; margin-right: 8px; }
.riga .mat i { font-style: normal; font-size: 11px; color: var(--inchiostro-tenue); }

/* ---------------------------------------------------------------- la VETRINA: l'equipaggiamento sta addosso */
.vetrina {
  position: relative; height: 260px; border-radius: 8px;
  border: 2px solid var(--legno-basso);
  background: radial-gradient(75% 60% at 50% 35%, rgba(240, 214, 122, .18), rgba(20, 14, 9, .75) 70%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .6);
}
.vetrina canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.addosso { position: absolute; transform: translate(-50%, -50%); }
.addosso .casella { width: 46px; height: 46px; }

/* ---------------------------------------------------------------- LE AMPOLLE (da POPULATION, con la ghiera d'oro) */
.fila-ampolle { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ampolla {
  position: relative; width: 104px; height: 104px; flex: 0 0 auto; border-radius: 50%; padding: 5px;
  background: linear-gradient(160deg, #6b5a3c, #2a2118 55%, #1a140f);
  box-shadow: 0 2px 6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,226,160,.28), inset 0 -2px 3px rgba(0,0,0,.6);
}
.ampolla .pozzo { position: absolute; inset: 5px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 38% 30%, #14100f, #070506 72%); }
.ampolla .liquido { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transition: height .3s cubic-bezier(.22,.61,.36,1); }
.ampolla .liquido::before { content: ''; position: absolute; left: -12%; right: -12%; top: -9px; height: 18px; border-radius: 50%; }
.ampolla .liquido::after { content: ''; position: absolute; left: -12%; right: -12%; top: -10px; height: 18px; border-radius: 50%; border-top: 2px solid rgba(255,255,255,.3); opacity: .9; }
.ampolla.vita .liquido { background: linear-gradient(180deg, #d0192b 0%, #8e0f1e 42%, #4a0810 100%); }
.ampolla.vita .liquido::before { background: #e82f42; }
.ampolla.mana .liquido { background: linear-gradient(180deg, #2f8fe0 0%, #1a52a8 45%, #0a1e52 100%); }
.ampolla.mana .liquido::before { background: #4fb0f5; }
.ampolla .vetro {
  position: absolute; inset: 5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 44% 30% at 31% 22%, rgba(255,255,255,.34), rgba(255,255,255,0) 62%);
  box-shadow: inset 0 0 20px rgba(0,0,0,.8), inset 0 5px 10px rgba(0,0,0,.55);
}
.ampolla .numero {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center;
  font-family: var(--titolo); font-size: 15px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.9); pointer-events: none;
}
@media (max-width: 620px) { .ampolla { width: 78px; height: 78px; } .ampolla .numero { font-size: 13px; } }

/* la HUD in basso: le due ampolle ai lati della barra rapida (POPULATION) */
#hud { justify-content: center; }
#hud .barra-abilita { padding: 6px 8px; }

/* le boccette disegnate (icone-boccette.js): l'SVG riempie la casella, con la sua ombra */
.casella .icona { display: grid; place-items: center; width: 100%; height: 100%; }
.casella .icona svg { width: 84%; height: 84%; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.icona.grande svg { width: 30px; height: 30px; }
.riga .mat svg { width: 20px; height: 20px; vertical-align: middle; }
.vetrina-boccette { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.vetrina-boccette figure { margin: 0; text-align: center; }
.vetrina-boccette .posto {
  width: 72px; height: 72px; margin: 0 auto 4px; display: grid; place-items: center; border-radius: 10px;
  border: 2px solid var(--legno); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55);
  background: linear-gradient(180deg, rgba(60, 44, 28, .35), rgba(20, 14, 9, .55));
}
.vetrina-boccette .posto svg { width: 90%; height: 90%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.vetrina-boccette figcaption { font-size: 11.5px; color: var(--inchiostro-tenue); line-height: 1.2; }

/* la goccia verde: quella lama e avvelenata (un colpo solo, poi si scarica) */
.casella .goccia {
  position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: radial-gradient(circle at 35% 30%, #d6ff9e, #4FB222 60%, #1F5E10);
  box-shadow: 0 0 6px rgba(107, 224, 74, .8);
}

/* ---------------------------------------------------------------- bersaglio scelto e card del gruppo (Claude, segnaposto funzionale: la grafica la fa Astra) */
#bersaglio-card { position: fixed; top: 124px; left: 50%; transform: translateX(-50%); z-index: 30; min-width: 180px; padding: 4px 10px; border-radius: 8px; background: rgba(20,16,10,.78); border: 1px solid var(--legno); text-align: center; pointer-events: auto; cursor: pointer; }   /* si clicca: apre la card grande (Manuel) */
#bersaglio-card .nome { font-family: var(--titolo); font-size: 13px; display: block; }
#bersaglio-card .barra { height: 8px; margin-top: 3px; }
#gruppo-card { position: fixed; top: 74px; left: 258px; z-index: 30; display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; max-width: 60vw; }
#gruppo-card .card-compagno { width: 128px; padding: 4px 6px; border-radius: 7px; background: rgba(20,16,10,.82); border: 1px solid var(--legno); cursor: pointer; }
#gruppo-card .card-compagno.spenta { opacity: .5; }
#gruppo-card .riga-nome { display: flex; gap: 4px; align-items: center; font-size: 11px; color: #f7ebcd; }
#gruppo-card .riga-nome b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gruppo-card .corona { color: #e8c35a; }
#gruppo-card .segno { font-size: 11px; }
#gruppo-card .segno.veleno { color: #86e05a; } #gruppo-card .segno.paralisi { color: #ff6b6b; } #gruppo-card .segno.morto { color: #bbb; }
#gruppo-card .barra { height: 6px; margin-top: 3px; }
#gruppo-card .togli { border: 0; background: none; color: #d88; cursor: pointer; font-size: 13px; padding: 0 2px; }
#gruppo-card .menu-gruppo { font-size: 11px; padding: 3px 8px; }

/* la scheda del personaggio a tre schede (B12, punto 89): forma funzionale, il vestito e di Astra */
#scheda .linguette-scheda { display: flex; gap: 4px; margin: 0 0 8px; flex-wrap: wrap; }
#scheda .linguetta { flex: 1; font: 12px var(--titolo, serif); padding: 4px 6px; border-radius: 6px; border: 1px solid var(--legno, #6b4b2a); background: rgba(40,30,18,.55); color: #e9dcc0; cursor: pointer; }
#scheda .linguetta.attiva { background: rgba(120,86,40,.85); color: #fff5da; }
#scheda .voce-scheda { margin: 4px 0 8px; }
#scheda .voce-scheda .descrizione, #scheda .voce-valore .descrizione { font-size: 11px; line-height: 1.35; opacity: .82; margin: 2px 0 4px; }
#scheda .barra.car i { background: linear-gradient(90deg, #3f8f3a, #7bd36b); }
#scheda .barra.skill i { background: linear-gradient(90deg, #3f6f9f, #7fb6e6); }
#scheda .barra em { position: absolute; top: 0; bottom: 0; background: rgba(232,195,90,.85); }
#scheda .barra { position: relative; height: 8px; }
#scheda .icona-skill { width: 20px; height: 20px; display: inline-flex; margin-right: 4px; }
#scheda .icona-skill svg { width: 20px; height: 20px; }
#scheda .voce-valore { border-bottom: 1px solid rgba(160,120,70,.25); padding: 3px 0; }
#scheda .voce-valore summary { display: flex; gap: 8px; cursor: pointer; font-size: 12px; list-style: none; }
#scheda .voce-valore summary b { text-align: right; }
#scheda .voce-valore .formula, #scheda .voce-valore .pezzi { font-size: 11px; margin: 2px 0; }
#scheda .voce-valore .formula span, #scheda .voce-valore .pezzi span { font-weight: bold; margin-right: 4px; color: var(--oro-scuro, #7a5418); }
#scheda .voce-valore summary .cresce { flex: 1; }
#scheda .voce-valore summary b { max-width: 62%; }
/* (nota 147) sotto le finestre (#pannelli sta a 5): non copre più zaino, banca e card; sopra il gioco resta */
.avviso-livello { position: fixed; left: 50%; bottom: 176px; transform: translateX(-50%); z-index: 4; padding: 6px 14px; border-radius: 8px; border: 1px solid #e8c35a; background: rgba(40,28,10,.9); color: #ffe9a8; font: 13px var(--titolo, serif); cursor: pointer; }
.avviso-livello[hidden] { display: none; }
/* i pannelli del gioco stanno fuori da .ui: senza questa riga prendevano il colore chiaro della pagina (gioco.css) e
   sulla pergamena non si leggevano (B12, 23 settembre notte). Stesso inchiostro di .ui. */
#pannelli .pannello { color: var(--inchiostro); }

/* la card della creatura: lo spazio della sella e il bag (punto 94) e la conferma dell'attacco a Cenerombra */
.card-creatura .creatura-sella { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; }
.card-creatura .creatura-sella .casella { flex: 0 0 auto; }
.card-creatura .creatura-sella small { display: block; font-size: 11px; opacity: .85; }
.card-creatura .creatura-bag-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; min-height: 48px; }
.card-creatura .creatura-avviso { font-size: 12px; font-style: italic; }
.conferma-centro { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 60; padding: 14px 18px; border-radius: 10px; border: 1px solid #c9a24a; background: rgba(28,20,10,.95); color: #f7ebcd; text-align: center; font: 15px var(--testo, serif); }
.conferma-centro .comandi { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }

/* nella card della propria creatura anche il proprio zaino, per trascinarci la sella e la roba (un pannello alla volta) */
.card-creatura .creatura-zaino { margin-top: 8px; }
.card-creatura .creatura-zaino .contenitore { grid-template-columns: repeat(6, 1fr); }

/* le due barre dello scudo della cavalcatura sopra il fiato (12-bis): colori provvisori, quelli veri li sceglie Astra */
#hud .hud-scudi { align-self: stretch; display: flex; flex-direction: column; gap: 2px; margin: 0 8px 2px; }
#hud .hud-scudi[hidden], #hud .hud-scudi .barra[hidden] { display: none; }
#hud .hud-scudi .barra { height: 9px; }
#hud .hud-scudi .barra span { font-size: 8px; line-height: 9px; }
#hud .hud-scudi .scudo-fisico i { background: linear-gradient(90deg, #8a8f98, #d7dde6); }
#hud .hud-scudi .scudo-magico i { background: linear-gradient(90deg, #5a3fa0, #b59cff); }

/* il bottino al centro della pagina (Manuel, 23 settembre notte): lo zaino a destra resta aperto per trascinarci la roba */
#finestra-centro { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 8; width: 380px; max-width: calc(100vw - 40px); max-height: calc(100vh - 220px); overflow: auto; }
#finestra-centro:empty { display: none; }
#finestra-centro .pannello { color: var(--inchiostro); }
/* trascinando la roba non si seleziona il testo della pagina (si vedeva tutto evidenziato in blu) */
.casella, .contenitore, body.inventario-in-presa, body.inventario-in-presa * { -webkit-user-select: none; user-select: none; }

/* il bottone del personaggio in basso a destra e lo zainetto nella scheda (Manuel, 23 settembre notte): forma provvisoria,
   le icone e il vestito sono di Astra */
#bottone-personaggio { position: fixed; right: 24px; bottom: 30px; z-index: 6; width: 58px; height: 58px; border-radius: 50%;
  border: 2px solid #b58b4c; background: radial-gradient(circle at 35% 30%, #3a2c1b, #16110b); color: #e8c35a; cursor: pointer;
  box-shadow: 0 3px 10px #000a, inset 0 0 8px #0008; display: grid; place-items: center; padding: 0; }
#bottone-personaggio svg { width: 30px; height: 30px; }
#bottone-personaggio:hover { color: #fff1c4; border-color: #e8c35a; }
#scheda .vetrina .zainetto { position: absolute; left: 12%; top: 84%; transform: translate(-50%, -50%); width: 46px; height: 46px;
  border-radius: 8px; border: 1px solid #b58b4c; background: rgba(40,28,14,.85); color: #e8c35a; cursor: pointer; display: grid; place-items: center; padding: 0; }
#scheda .vetrina .zainetto svg { width: 28px; height: 28px; }
#scheda .vetrina .zainetto:hover { color: #fff1c4; }

/* LE FINESTRE COME SU UO (Manuel, 23 settembre notte): il contenitore non copre niente, ogni card e una finestra che si
   sposta; il vestito (cornici, ombre, cursori) e di Astra */
#pannelli.finestre { position: fixed; left: 0; top: 0; right: auto; bottom: auto; width: 0; height: 0; max-width: none; max-height: none; overflow: visible; pointer-events: none; z-index: 5; }
#pannelli .finestra { position: absolute; pointer-events: auto; max-height: calc(100vh - 110px); overflow: auto; scrollbar-width: thin; }
#pannelli .finestra > .pannello { margin: 0; width: 390px; max-width: calc(100vw - 20px); cursor: grab; }
#pannelli .finestra.in-movimento > .pannello { cursor: grabbing; }
#pannelli .finestra.in-movimento { opacity: .93; }
#pannelli .finestra > #banca, #pannelli .finestra > #bottega { width: 710px; }
#pannelli .finestra[data-bottino] > .pannello { width: 380px; }
#pannelli .finestra .casella, #pannelli .finestra button { cursor: pointer; }
/* la tendina sopra le proprie creature (Manuel): forma funzionale, il vestito e di Astra */
.tendina { position: fixed; z-index: 40; min-width: 170px; padding: 6px; border-radius: 9px; border: 1px solid #b58b4c; background: linear-gradient(#2a1f12f2, #16110bf2); box-shadow: 0 6px 18px #000b; display: flex; flex-direction: column; gap: 3px; }
.tendina .tendina-titolo { font: 13px var(--titolo, serif); color: #e8c35a; text-align: center; padding: 2px 6px 5px; border-bottom: 1px solid #b58b4c55; margin-bottom: 2px; }
.tendina button { font: 14px var(--testo, serif); color: #f3e4c0; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 5px 12px; text-align: left; cursor: pointer; }
.tendina button:hover, .tendina button:focus-visible { background: #6b4b2a88; border-color: #b58b4c; color: #fff4d2; outline: none; }

/* il mirino del veleno sull'arma impugnata (Manuel): il cursore diventa un mirino; il disegno del cursore e di Astra */
body.mira-veleno, body.mira-veleno * { cursor: crosshair !important; }
/* sugli schermi stretti nessuna finestra e piu larga dello schermo (la barberia usciva dalla vista del telefono) */
#pannelli .finestra { max-width: calc(100vw - 16px); }

/* la banca: il forziere solo (lo zaino e la sua finestra accanto), piu grande degli altri contenitori (Manuel) */
#pannelli .finestra > #banca { width: 560px; }

/* il totale dell'oro sotto il forziere della banca, in giallo oro (Manuel); la veste definitiva e di Astra */
#banca .oro-banca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 6px;
  padding: 7px 12px; border: 1px solid #b8860b; border-radius: 6px; background: rgba(40, 26, 6, .82); color: #ffd700;
  font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 2px #000; }
#banca .oro-banca b { font-size: 1.15em; color: #ffd700; }

/* il totale dell'oro sotto lo zaino aperto, col suo conto separato dalla banca (Manuel); stessa fascia gialla */
#zaino .oro-banca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 4px;
  padding: 6px 10px; border: 1px solid #b8860b; border-radius: 6px; background: rgba(40, 26, 6, .82); color: #ffd700;
  font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 2px #000; }
#zaino .oro-banca b { font-size: 1.1em; color: #ffd700; }

/* I CONTENITORI SENZA CASELLE (Manuel, 23 settembre notte): la roba sta dove la lasci, l'ultima sopra; sotto ognuna il
   numeretto; sotto sacchetti e scrigni la loro scritta. Fondi provvisori: i disegni dei contenitori aperti sono di Astra. */
.contenitore.libero { position: relative; display: block; width: 300px; height: 210px; padding: 0; overflow: hidden;
  border: 1px solid #6b4a24; border-radius: 10px; background: radial-gradient(ellipse at 50% 40%, #5a3d1e 0%, #3a2612 70%, #24170b 100%);
  box-shadow: inset 0 0 18px rgba(0,0,0,.65); }
.contenitore.libero.forziere-aperto { width: 520px; height: 300px; background: radial-gradient(ellipse at 50% 35%, #6a4a22 0%, #432c12 65%, #2a1a0a 100%); }
.contenitore.libero.sacchetto-aperto { width: 230px; height: 165px; }
.contenitore.libero.scrigno-aperto { width: 260px; height: 180px; background: radial-gradient(ellipse at 50% 40%, #4a2d3a 0%, #2c1822 70%, #1a0e14 100%); }
.contenitore.libero .casella.libera { position: absolute; width: 44px; height: 44px; margin: 0; transform: translate(-50%, -50%);
  background: none; border: 0; box-shadow: none; cursor: grab; }
.contenitore.libero .casella.libera .icona { width: 44px; height: 44px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); }
.contenitore.libero .casella.libera:hover .icona { filter: drop-shadow(0 0 4px #ffe08a) drop-shadow(0 2px 2px rgba(0,0,0,.7)); }
/* (20 ottobre 2026, agente PILE; Manuel: «i numeri delle pile nei bag stanno troppo sotto rispetto alla icona») il numero sta attaccato
   sotto il disegno VERO della miniatura, al suo centro, con le cifre che toccano il suo ultimo pixel (--num-x, --num-y: il centro del
   numero in frazioni della casella; le scrive icone-hit.js leggendo i pixel visibili); senza, il posto medio delle miniature. Prima stava
   sotto la casella di 44 px, 16-19 px sotto il disegno. */
.contenitore.libero .numeretto { position: absolute; left: calc(var(--num-x, .5) * 100%); top: calc(var(--num-y, .9) * 100%); transform: translate(-50%, -50%); padding: 0 1px;
  font: 700 11px/1.2 var(--testo, sans-serif); color: #fff6d8; text-shadow: 0 0 2px #000, 0 1px 2px #000; white-space: nowrap; text-align: center; pointer-events: none; z-index: 1; }
.contenitore.libero .etichetta-contenitore { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 9px); max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; padding: 0 4px; border-radius: 4px; background: rgba(0,0,0,.55); color: #f3dfb0;
  font: 600 10px/1.4 var(--testo, sans-serif); white-space: nowrap; cursor: text; }
.contenitore.libero .etichetta-contenitore input.rinomina { width: 100px; font: inherit; color: #1a1208; background: #f7ecd0; border: 1px solid #b8860b; }
#pannelli .finestra > .finestra-contenitore { width: auto; }
#pannelli .finestra > #banca { width: auto; }
#pannelli .finestra > #zaino { width: auto; }

/* bottini e cadaveri senza caselle: la cassa aperta e la bara aperta (fondi provvisori, i disegni sono di Astra) */
.contenitore.libero.cassa-aperta { width: 280px; height: 170px; background: radial-gradient(ellipse at 50% 40%, #6b5222 0%, #45321a 70%, #2a1d0e 100%); }
.contenitore.libero.bara-aperta { width: 300px; height: 150px; border-radius: 30px 30px 12px 12px; background: radial-gradient(ellipse at 50% 45%, #4b3a2c 0%, #2f2419 70%, #1c150e 100%); }

/* SOTT'ACQUA (Manuel): i due bottoni che compaiono nuotando, sopra la barra; aspetto provvisorio, i bottoni veri di Astra */
#comandi-acqua { position: fixed; left: 50%; bottom: 196px; transform: translateX(-50%); z-index: 34; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 10px; border: 1px solid #3f7fa8; background: rgba(8, 28, 44, .82); color: #cfe9ff; font: 13px var(--titolo, serif); }
#comandi-acqua[hidden] { display: none; }
#comandi-acqua button { padding: 6px 12px; border-radius: 7px; border: 1px solid #5aa6d6; background: #123a57; color: #e6f5ff; cursor: pointer; user-select: none; touch-action: none; }
#comandi-acqua button:disabled { opacity: .45; cursor: default; }
#acqua-profondita { min-width: 118px; text-align: center; }
/* IL VOLO DEL DRAGO (Manuel, 24 settembre sera): Sali e Scendi con la quota in metri, come i comandi sott'acqua */
/* (punto 36) la Metamorfosi: il bottone per tornare normale, sopra la barra */
#comandi-forma { position: fixed; left: 50%; bottom: 236px; transform: translateX(-50%); z-index: 34; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 9px; background: rgba(20, 12, 8, .82); border: 1px solid #d69a5a; color: #fff1e0; }
#comandi-forma[hidden] { display: none; }
#comandi-forma button { padding: 6px 14px; border-radius: 7px; border: 1px solid #e0b060; background: #6a3a14; color: #fff1e0; cursor: pointer; font-weight: 600; }
#comandi-volo { position: fixed; left: 50%; bottom: 196px; transform: translateX(-50%); z-index: 34; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 10px; border: 1px solid #a8743f; background: rgba(44, 22, 8, .82); color: #ffe6c9; font: 13px var(--titolo, serif); }
#comandi-volo[hidden] { display: none; }
#comandi-volo button { padding: 6px 12px; border-radius: 7px; border: 1px solid #d69a5a; background: #57311a; color: #fff1e0; cursor: pointer; user-select: none; touch-action: none; }
#comandi-volo button:disabled { opacity: .45; cursor: default; }
/* nei dungeon il volo e bloccato: il pulsante resta, sbarrato, e trema se lo premi */
#comandi-volo.bloccato #volo-su { opacity: .55; filter: grayscale(.7); cursor: not-allowed; background-image: linear-gradient(135deg, transparent 46%, #d8573a 47%, #d8573a 53%, transparent 54%); }
#comandi-volo.bloccato #volo-quota { color: #e7a07a; }
#comandi-volo .scuoti { animation: scuotiVolo .38s; }
@keyframes scuotiVolo { 0%,100% { transform: translateX(0) } 20% { transform: translateX(-5px) } 40% { transform: translateX(5px) } 60% { transform: translateX(-3px) } 80% { transform: translateX(3px) } }
#volo-quota { min-width: 118px; text-align: center; }

/* (6 ottobre 2026, Claude) la scheda dell'arma al clic: le caratteristiche e, se e avvelenata, il veleno in verde come la goccia */
[data-finestra="arma"] .righe-arma { margin: 6px 0 8px; padding-left: 18px; max-width: 380px; }
[data-finestra="arma"] .righe-arma li { margin: 2px 0; }
.arma-avvelenata { margin-top: 8px; padding: 6px 10px; border-left: 3px solid #88d852; background: rgba(60, 110, 30, .18); border-radius: 4px; }
.arma-avvelenata p { margin: 3px 0; }
.arma-avvelenata .titolo-veleno { color: #a6ec6a; font-weight: bold; }
.arma-non-avvelenata { margin-top: 8px; opacity: .8; font-style: italic; }
body.mira-runa11, body.mira-runa11 * { cursor: crosshair !important; }