/* dw-bot web — mobile-first, tema pergamena scura */
:root {
  --bg: #1c1710;
  --panel: #2a2318;
  --panel2: #332b1d;
  --ink: #e8dcc4;
  --muted: #9a8c6f;
  --accent: #c9a227;
  --border: #4a3f2a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 Georgia, 'Times New Roman', serif;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 12px 32px;
}
/* desktop/tablet: la colonna mobile-first non resta una striscia stretta */
@media (min-width: 760px) { body { max-width: 720px; } }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.topbar .back { color: var(--accent); text-decoration: none; min-width: 60px; }
.topbar .table-name { color: var(--muted); font-style: italic; }
.party { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
.party .pg {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; font-size: 14px;
}
.party .pg.idle { opacity: .65; }
.pg-face-link { line-height: 0; flex: none; padding: 3px; margin: -3px; }
.pg-face {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border); display: block; cursor: zoom-in;
}
a.pg-info { color: var(--ink); text-decoration: none; cursor: pointer; }
a.pg-info:active { color: var(--accent); }
.party .pg b { color: var(--accent); }
.party .pg small { color: var(--muted); }
h1 { margin: 16px 0 8px; font-size: 24px; }
h2 { margin: 18px 0 8px; font-size: 18px; color: var(--accent); }
p { margin: 8px 0; }
.muted { color: var(--muted); }
.notice {
  background: var(--panel); border-left: 3px solid var(--accent);
  padding: 8px 12px; border-radius: 0 8px 8px 0; margin: 12px 0;
}
a.adv-link { display: block; color: var(--ink); text-decoration: none; }
a.adv-link:active { background: var(--panel2); }
code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; font-size: 14px; }

/* azioni personaggio (in testa alla città) */
.pg-actions {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin: 14px 0;
}
.pg-action {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.pg-action:active { background: var(--panel2); }
.pg-action-ico { font-size: 24px; line-height: 1; }
.pg-action-lbl { font-size: 15px; }
@media (max-width: 380px) { .pg-actions { grid-template-columns: 1fr; } }

/* griglia dei luoghi */
.places {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin-top: 16px;
}
.place {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 8px;
  color: var(--ink); text-decoration: none; text-align: center;
}
.place:active { background: var(--panel2); }
.place .glyph { font-size: 34px; }
.place .name { font-weight: bold; }
.place .sub { font-size: 13px; color: var(--muted); }
.place.closed { opacity: .5; }

/* flash post-azione */
.flash {
  background: #24351f; border: 1px solid #4a6b3f; color: #cfe6b8;
  border-radius: 8px; padding: 10px 14px; margin: 12px 0;
}
.flash.err { background: #3a2020; border-color: #7a4040; color: #e6b8b8; }

/* selettore PG (mercato) */
.pg-switch { margin: 10px 0; }
.pg-tab {
  display: inline-block; padding: 5px 14px; margin-right: 6px;
  border: 1px solid var(--border); border-radius: 16px;
  color: var(--ink); text-decoration: none;
}
.pg-tab.active { background: var(--accent); color: #1c1710; font-weight: bold; }

/* bottoni e form inline */
button {
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 8px;
  padding: 8px 14px; font: inherit; cursor: pointer; margin: 6px 0;
}
button:active { background: var(--accent); color: #1c1710; }
button small { color: var(--muted); }
td.act { text-align: right; white-space: nowrap; }
td.act form { display: inline; }
td.act button { padding: 4px 10px; margin: 0; font-size: 14px; }
td.act.sell input[type=number] {
  width: 64px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px;
  font: inherit; font-size: 14px;
}
h3 { margin: 12px 0 4px; font-size: 16px; }

/* listini (mercato, fabbro) */
table.listino { width: 100%; border-collapse: collapse; margin: 6px 0 14px; }
table.listino td { padding: 6px 4px; border-bottom: 1px solid var(--border); }
table.listino .cost { text-align: right; white-space: nowrap; color: var(--accent); }
table.listino .total td { font-weight: bold; border-top: 2px solid var(--border); }

/* bacheca */
.postings { list-style: none; }
.postings li {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; margin: 10px 0;
}

/* cimitero */
.graves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.grave {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px 10px 4px 4px; padding: 14px 8px; text-align: center;
}
.grave .glyph { font-size: 28px; }

/* schermata avventura */
.scena { margin-top: 6px; }
.scena-titolo { margin: 8px 0 2px; font-size: 22px; }
.scena-loc { color: var(--muted); font-style: italic; margin-bottom: 4px; }

/* riferimento a fisarmonica (mappa / gruppo / diario), chiuso di default */
details.ref {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; margin: 10px 0; overflow: hidden;
}
details.ref > summary {
  padding: 11px 14px; cursor: pointer; list-style: none;
  color: var(--accent); font-weight: bold; font-size: 15px;
}
details.ref > summary::-webkit-details-marker { display: none; }
details.ref > summary::before { content: '▸ '; }
details.ref[open] > summary::before { content: '▾ '; }
details.ref > summary:active { background: var(--panel2); }
details.ref > *:not(summary) { margin: 0 14px 12px; }
details.ref img.mappa { width: calc(100% - 28px); }

/* etichetta del blocco riferimenti: separa la scena viva dagli accordion */
.ref-label {
  text-transform: uppercase; letter-spacing: .08em; font-size: 11px;
  color: var(--muted); margin: 18px 2px 2px; font-family: system-ui, sans-serif;
}
/* "Concludi avventura": azione distruttiva, staccata dai riferimenti */
details.ref.ref-danger {
  margin-top: 20px; border-color: #7a4040;
  border-top: 1px solid var(--border);
}
details.ref.ref-danger > summary { color: #e6a0a0; }

.ultimo-turno {
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: 10px; padding: 12px 14px; margin: 14px 0;
}
.ultimo-turno.attesa { border-style: dashed; border-color: var(--border); }
.party-rooms { display: flex; flex-direction: column; gap: 8px; }
.party-room {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.party-room .pg { background: var(--panel2); border-radius: 8px; padding: 4px 8px; font-size: 14px; }
.party-room .pg b { color: var(--accent); }
.party-room a.pg-link { color: var(--ink); text-decoration: none; }
.party-room a.pg-link:active { background: var(--border); }
.sheet-link { margin-top: 10px; }
.sheet-link a { color: var(--accent); text-decoration: none; font-weight: bold; }
/* mostri in scena */
.mostri { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0 4px; }
.mostro {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 84px; text-align: center;
}
.mostro img, .mostro .segnaposto {
  width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid var(--border); object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; background: var(--panel);
}
.mostro.boss img, .mostro.boss .segnaposto { border-color: #a33; }
.mostro .nome { font-size: 12px; line-height: 1.2; }
.mostro .pf { font-size: 12px; color: var(--accent); font-weight: bold; }

.room-panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin: 14px 0; line-height: 1.55;
}
img.mappa {
  max-width: 100%; border: 1px solid var(--border); border-radius: 10px;
}
/* barra di comando fissa (cockpit): stato + scelta pendente o casella */
body.with-cmdbar { padding-bottom: 170px; }
.cmdbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  background: var(--panel);
  border-top: 2px solid var(--accent);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -4px 16px rgba(0,0,0,.45);
}
.cmdbar-inner { max-width: 640px; margin: 0 auto; padding: 8px 12px 12px; }
.cmdbar-status {
  font-size: 13px; color: var(--muted); margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdbar-prompt { font-size: 14px; margin-bottom: 6px; max-height: 20vh; overflow-y: auto; }
.cmdbar-choices {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 40vh; overflow-y: auto;
}
.cmdbar-choices button { margin: 0; }
.cmdbar-choices button.secondario { border-color: var(--border); }
.choice-multi { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.choice-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.choice-opt input { width: 18px; height: 18px; accent-color: var(--accent); }

.waking { margin-bottom: 8px; }
.waking-msg { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.waking-msg b { color: var(--ink); }
.waking-track {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--panel2); border: 1px solid var(--border);
}
.waking-fill {
  height: 100%; background: var(--accent);
  transition: width .6s ease;
}
.waking.ready .waking-msg { color: #6bbf59; }
.waking-retry { margin: 0; width: 100%; text-align: left; }

.cmdbar-wait { font-size: 13px; color: var(--muted); font-style: italic; padding: 2px 0 4px; }

.cmdbar-quick {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
  max-height: 22vh; overflow-y: auto;
}
.cmdbar-quick .chip {
  margin: 0; padding: 6px 10px; font-size: 13px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--border); color: var(--ink);
}
.cmdbar-quick .chip-dir { border-color: var(--accent); }
.cmdbar-quick .chip-dir.locked { border-color: var(--border); color: var(--muted); }
.cmdbar-quick .chip-take { border-color: var(--border); }

.azione-form { display: flex; gap: 8px; }
.azione-form input[type=text] {
  flex: 1; min-width: 0; background: var(--bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font: inherit;
}
.azione-form button { margin: 0; }

.diario { display: flex; flex-direction: column; gap: 10px; }
.turno {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px;
}
.turno-head { color: var(--accent); font-weight: bold; font-size: 14px; margin-bottom: 4px; }
.azione { font-size: 14px; color: var(--muted); }
.risultato {
  margin: 4px 0 4px 12px; padding: 6px 10px; font-size: 14px;
  background: var(--panel2); border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0; line-height: 1.5;
}
.fatto { font-size: 13px; color: var(--muted); margin-left: 12px; }
.badge-earned {
  margin: 4px 0 4px 12px; padding: 4px 10px; font-size: 13px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel2));
  border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0;
}
.narrazione { margin-top: 6px; line-height: 1.55; }

footer {
  margin-top: 32px; padding-top: 10px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 13px; text-align: center;
}

/* ── Scheda PG (character sheet old-school) ─────────────────────────────── */
.sheet {
  border: 2px solid var(--border); border-radius: 12px;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(74,63,42,.14) 27px 28px),
    linear-gradient(180deg, var(--panel), #241d12);
  padding: 16px 14px; margin: 14px 0;
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.12), 0 8px 24px rgba(0,0,0,.35);
}
.sheet-top { display: flex; gap: 14px; align-items: center; border-bottom: 2px solid var(--border); padding-bottom: 12px; }
.sheet-portrait { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 8px;
  overflow: hidden; border: 2px solid var(--accent); display: block; }
.sheet-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet-portrait.ph { display: flex; align-items: center; justify-content: center;
  font-size: 40px; background: var(--panel2); }
.sheet-name { margin: 0; font-size: 24px; letter-spacing: .01em; }
.sheet-name .dead { color: #ec8582; }
.sheet-sub { font-size: 15px; }
.sheet-id .sheet-sub:first-of-type { color: var(--accent); font-weight: bold; }

.sheet-vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0; }
.vital { display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 4px; }
.vital.hp { border-color: #7a4040; }
.v-num { font-size: 22px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.vital.hp .v-num { color: #ec8582; }
.v-num small { font-size: 14px; color: var(--muted); font-weight: 400; }
.v-lab { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.sheet-xp { margin: 12px 0; }
.xp-head { display: flex; justify-content: space-between; font-size: 12px;
  letter-spacing: .1em; color: var(--muted); margin-bottom: 5px; }
.xp-track { height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--panel2); border: 1px solid var(--border); }
.xp-fill { height: 100%; background: var(--accent); }

.sheet-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel); border: 2px solid var(--border); border-radius: 10px; padding: 10px 4px; }
.stat-mod { font-size: 26px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-lab { font-size: 12px; color: var(--accent); font-weight: bold; letter-spacing: .08em; }

.sheet-box { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 12px; }
.sheet-box h2 { font-size: 15px; margin: 0 0 6px; color: var(--accent); }
.sheet-box h2 small { font-weight: 400; font-size: 12px; }
.sheet-box h2 small.over { color: #ec8582; }
.sheet-box.warn { border-top-color: #7a4040; }
.sheet-box ul { list-style: none; }
.inv li, .moves li, .bonds li { padding: 4px 0; border-bottom: 1px dotted var(--border); display: flex; justify-content: space-between; gap: 8px; }
.inv li:last-child, .moves li:last-child, .bonds li:last-child { border-bottom: 0; }
.inv-name .qty { color: var(--muted); font-size: 13px; }
.inv-cond { color: #ec8582; font-size: 12px; white-space: nowrap; }
.moves li::before { content: "✦ "; color: var(--accent); }
.bonds li.resolved { color: var(--muted); text-decoration: line-through; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-cond { font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--border); }
.chip-cond.debil { border-color: #7a4040; color: #ec8582; }
.chip-cond.badge { border-color: var(--accent); cursor: pointer; }
.chip-cond.badge.milestone { background: color-mix(in srgb, var(--accent) 18%, var(--panel2)); }
button.chip-cond { font: inherit; color: inherit; }
.chip-cond.badge.shown { background: var(--accent); color: #10130f; font-weight: 600; }
.chip-cond.badge-clear { border-style: dashed; cursor: pointer; color: var(--muted); }
.badge-pick p { margin: 0 0 6px; font-size: 12px; }
.prede { margin-top: 8px; }
.prede li { padding: 3px 0; border-bottom: 1px dotted var(--border);
  display: flex; justify-content: space-between; gap: 8px; }
.prede li:last-child { border-bottom: 0; }
.prede b { color: var(--accent); }
.pg-badge { display: block; color: var(--accent); font-size: 11px; margin: 1px 0; }
.sheet-badge { display: inline-block; margin: 2px 0 4px; font-size: 12px;
  padding: 2px 10px; border-radius: 999px; background: var(--panel2);
  border: 1px solid var(--accent); }
.leaderboard { list-style: decimal inside; margin: 0; padding: 0; }
.leaderboard li { padding: 4px 0; border-bottom: 1px dotted var(--border);
  display: flex; justify-content: space-between; gap: 8px; }
.leaderboard li:last-child { border-bottom: 0; }
.leaderboard li.me { color: var(--accent); font-weight: 600; }
.leaderboard b { color: var(--accent); }
.sheet-back { margin-top: 16px; text-align: center; }
.sheet-back a { color: var(--accent); text-decoration: none; }

/* ── Finale avventura (vittoria / sconfitta) ────────────────────────────── */
.finale {
  text-align: center; margin: 18px 0 8px; padding: 18px 14px;
  border: 1px solid var(--border); border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--bg));
}
.finale.won { border-color: var(--accent); }
.finale.lost { border-color: #7a4040; }
.finale-banner {
  font-size: 30px; font-weight: 700; letter-spacing: .04em; margin-bottom: 6px;
}
.finale.won .finale-banner { color: var(--accent); text-shadow: 0 0 24px rgba(201,162,39,.35); }
.finale.lost .finale-banner { color: #ec8582; }
.finale-title { margin: 4px 0; font-size: 22px; }
.finale-loot {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; margin: 14px 0;
}
.finale-loot h2 { margin-top: 0; }
.finale-loot .loot-list { margin: 4px 0 8px 20px; }
.finale-loot b { color: var(--accent); }
a.cta {
  display: block; text-align: center; text-decoration: none;
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 10px;
  padding: 12px; margin: 16px 0; font-weight: bold;
}
a.cta:active { background: var(--accent); color: var(--bg); }

/* ── Scheda del tiro (mossa + dadi + esito) ─────────────────────────────── */
.ultimo-tiro { margin: 0 0 12px; }
.rollcard {
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: 10px; background: var(--panel); padding: 9px 12px;
  margin: 4px 0 6px;
}
.rc-head {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  align-items: baseline; justify-content: space-between;
}
.rc-move { font-weight: 700; }
.rc-dice { font-variant-numeric: tabular-nums; color: var(--muted); }
.rc-dice b { color: var(--ink); font-size: 1.1em; }
.rc-outcome { margin-top: 6px; }
.rc-chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
}
.rc-chip small { font-weight: 400; opacity: .85; }
.rc-blow { margin-top: 6px; font-style: italic; color: var(--ink); }
.rc-conseq { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.rc-tag {
  font-size: 12px; padding: 2px 8px; border-radius: 6px;
  background: var(--panel2); border: 1px solid var(--border); color: var(--ink);
}
.rollcard.strong { border-left-color: #3f9a4e; }
.rollcard.weak   { border-left-color: #c79a3a; }
.rollcard.miss   { border-left-color: #c0504d; }
.rollcard.strong .rc-chip { background: rgba(63,154,78,.20);  color: #6fce7f; }
.rollcard.weak   .rc-chip { background: rgba(199,154,58,.20); color: #e0b755; }
.rollcard.miss   .rc-chip { background: rgba(192,80,77,.22);  color: #ec8582; }
.rc-tag.hit, .rc-tag.kill { color: #6fce7f; font-weight: 700; }
.rc-tag.hurt { color: #ec8582; }
.rc-tag.lb   { color: #e0b755; }
.rc-tag.gm   { color: var(--accent); font-style: italic; border-color: var(--accent); }

/* ── Overlay del tiro (dadi animati + esito drammatico) ─────────────────── */
.dov{
  position:fixed; inset:0; z-index:50; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(10,7,3,.74); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.dov.show{ opacity:1; pointer-events:auto; }
.dov[hidden]{ display:none; }   /* vince su .dov{display:flex} quando nascosto */
.dov-stage{
  position:relative; width:100%; max-width:440px; text-align:center;
  background:linear-gradient(180deg,var(--panel),#1d160d);
  border:1px solid var(--accent); border-radius:16px; padding:22px 16px 16px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.dov-move{ font-size:15px; margin-bottom:14px; }
.dov-move #dovMove{ font-weight:700; }
.dov-dice{ display:flex; align-items:center; justify-content:center; gap:12px; min-height:100px; }
.dov .die{
  width:74px; height:74px; border-radius:15px; position:relative;
  background:radial-gradient(120% 120% at 30% 25%, #f4ead0, #dcc79a 55%, #c7ad78);
  border:2px solid #7a6738;
  box-shadow:0 6px 14px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.55),
             inset 0 -6px 10px rgba(120,90,40,.35);
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  padding:11px; gap:2px; will-change:transform;
}
.dov .die .cell{ display:flex; align-items:center; justify-content:center; }
.dov .die .cell::after{
  content:""; width:12px; height:12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5a4322,#241a0c);
  opacity:0; transform:scale(.4); transition:opacity .12s, transform .12s;
}
.dov .die .cell.on::after{ opacity:1; transform:scale(1); }
.dov .die.rolling{ animation:dov-tumble .18s linear infinite; }
.dov .die.land{ animation:dov-land .5s cubic-bezier(.2,1.4,.35,1); }
@keyframes dov-tumble{
  0%{transform:rotate(-14deg) translateY(0)} 25%{transform:rotate(10deg) translateY(-10px)}
  50%{transform:rotate(-8deg) translateY(2px)} 75%{transform:rotate(13deg) translateY(-6px)}
  100%{transform:rotate(-14deg) translateY(0)}
}
@keyframes dov-land{ 0%{transform:scale(1.18) rotate(-6deg)} 100%{transform:scale(1) rotate(0)} }
.dov-op{ font-size:24px; color:var(--muted); font-variant-numeric:tabular-nums; }
.dov-total{
  min-width:52px; font-size:42px; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums; opacity:.25; transform:scale(.8); transition:.25s;
}
.dov-total.show{ opacity:1; transform:scale(1); }
.dov-verdict{
  margin-top:12px; display:flex; flex-direction:column; align-items:center; gap:8px;
  min-height:76px; opacity:0; transform:translateY(8px); transition:.35s;
}
.dov-verdict.show{ opacity:1; transform:none; }
.dov-chip{ display:inline-flex; align-items:baseline; gap:7px; padding:5px 16px;
  border-radius:999px; font-weight:700; font-size:18px; }
.dov-chip small{ font-weight:400; font-size:12px; opacity:.85; }
.dov-verdict.strong .dov-chip{ background:rgba(111,206,127,.16); color:#6fce7f;
  box-shadow:0 0 0 1px rgba(111,206,127,.35), 0 0 24px rgba(111,206,127,.25); }
.dov-verdict.weak .dov-chip{ background:rgba(224,183,85,.16); color:#e0b755;
  box-shadow:0 0 0 1px rgba(224,183,85,.35); }
.dov-verdict.miss .dov-chip{ background:rgba(236,133,130,.16); color:#ec8582;
  box-shadow:0 0 0 1px rgba(236,133,130,.4), 0 0 24px rgba(236,133,130,.22); }
.dov-flair{ font-size:12px; letter-spacing:.26em; text-transform:uppercase; font-weight:700; }
.dov-verdict.crit .dov-flair{ color:var(--accent); }
.dov-verdict.fumble .dov-flair{ color:#ec8582; }
.dov-blow{ font-style:italic; color:var(--ink); max-width:40ch; margin:0 auto; }
.dov-conseq{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.dov-conseq .tag{ font-size:12px; padding:3px 9px; border-radius:6px;
  background:var(--panel2); border:1px solid var(--border); color:var(--ink); }
.dov-conseq .tag.kill,.dov-conseq .tag.hit{ color:#6fce7f; font-weight:700; }
.dov-conseq .tag.hurt{ color:#ec8582; }
.dov-conseq .tag.lb{ color:#e0b755; }
.dov-conseq .tag.gm{ color:var(--accent); font-style:italic; border-color:var(--accent); }
.dov-flash{ position:absolute; inset:0; pointer-events:none; opacity:0; border-radius:16px; }
.dov-flash.go-gold{ animation:dov-flgold .6s ease-out; }
.dov-flash.go-red{ animation:dov-flred .55s ease-out; }
@keyframes dov-flgold{ 0%{opacity:.5; background:radial-gradient(circle at 50% 40%,var(--accent),transparent 60%)} 100%{opacity:0} }
@keyframes dov-flred{ 0%{opacity:.5; background:radial-gradient(circle at 50% 45%,#c0504d,transparent 62%)} 100%{opacity:0} }
.dov-stage.shake{ animation:dov-shake .4s; }
@keyframes dov-shake{ 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)} }
.dov-hint{ margin-top:12px; font-size:12px; color:var(--muted); opacity:0; transition:opacity .3s; }
.dov-hint.show{ opacity:1; }
.dov-badge{
  margin-top:14px; padding:8px 16px; font-weight:800; font-size:15px;
  color:#10130f; background:var(--accent); border-radius:999px;
  box-shadow:0 0 22px color-mix(in srgb, var(--accent) 60%, transparent);
}
.dov-badge.pop{ animation:dov-badge-pop .5s cubic-bezier(.2,1.3,.4,1); }
@keyframes dov-badge-pop{ 0%{transform:scale(.4); opacity:0} 100%{transform:scale(1); opacity:1} }
@media (prefers-reduced-motion:reduce){
  .dov .die.rolling,.dov .die.land{ animation:none; }
  .dov-flash{ animation:none!important; } .dov-stage.shake{ animation:none; }
}

/* ── Overlay: secondo tiro (danno) ─────────────────────────────────────── */
.dov .die.num{ display:flex; align-items:center; justify-content:center; padding:0; }
.dov .die.num span{ font:700 34px Georgia,'Times New Roman',serif; color:#3a2a12; }
.dov-dmg{ margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.dov-dmg[hidden]{ display:none; }
.dov-dmg-head{ font-size:13px; color:var(--muted); letter-spacing:.04em; margin-bottom:2px; }
.dov-total.dmg{ font-size:30px; min-width:64px; }
.dov-total.dmg.kill,.dov-total.dmg.grave{ color:#ec8582; }
.dov-total.dmg.lieve{ color:#e0b755; }
.dov-total.dmg.none{ color:var(--muted); }
.dov-sev{ margin-top:6px; font-weight:700; opacity:0; transition:opacity .3s; }
.dov-sev.show{ opacity:1; }
.dov-sev.kill,.dov-sev.grave{ color:#ec8582; }
.dov-sev.lieve{ color:#e0b755; }
.dov-sev.none{ color:var(--muted); font-weight:400; }

/* ── Creazione PG (web) ─────────────────────────────────────────────── */
form.crea{ display:flex; flex-direction:column; gap:16px; }
.fld{ display:flex; flex-direction:column; gap:6px; border:0; padding:0; margin:0; }
.fld[hidden]{ display:none; }   /* vince su .fld{display:flex} quando nascosto (blocchi equip per classe) */
.fld legend{ font-weight:700; margin-bottom:4px; }
.fld input[type=text], .fld select{ padding:9px 10px; font-size:16px;
  border:1px solid var(--line,#4443); border-radius:8px; background:var(--card,#0000);
  color:inherit; width:100%; box-sizing:border-box; }
.small{ font-size:13px; }
.class-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
.class-pick{ display:flex; flex-direction:column; gap:2px; padding:10px;
  border:1px solid var(--line,#4443); border-radius:10px; cursor:pointer; }
.class-pick:has(input:checked){ border-color:#c9a227; box-shadow:0 0 0 1px #c9a227 inset; }
.class-pick input{ position:absolute; opacity:0; width:0; height:0; }
.class-name{ font-weight:700; }
.class-sub{ font-size:12px; color:var(--muted); }
.chk{ display:flex; align-items:center; gap:8px; padding:3px 0; }
.stat-row{ display:flex; align-items:center; gap:10px; }
.stat-lbl{ display:inline-block; min-width:44px; font-weight:700; }
.stat-sel{ flex:1; padding:8px 10px; font-size:16px; border:1px solid var(--line,#4443);
  border-radius:8px; background:var(--card,#0000); color:inherit; }
button.primary, a.primary{ display:inline-block; text-align:center; padding:12px 16px;
  font-size:16px; font-weight:700; border:0; border-radius:10px; cursor:pointer;
  background:#c9a227; color:#1a1400; text-decoration:none; }
.sheet-head .portrait{ max-width:220px; width:100%; border-radius:12px; }
.portrait.ph{ display:flex; align-items:center; justify-content:center;
  min-height:160px; color:var(--muted); border:1px dashed var(--line,#4443); border-radius:12px; }

/* Roster / gestione PG */
a.primary.ghost{ background:transparent; color:#c9a227; border:1px solid #c9a227; }
.roster{ display:flex; flex-direction:column; gap:10px; margin:12px 0; }
.roster-row{ display:flex; align-items:center; gap:12px; padding:10px;
  border:1px solid var(--line,#4443); border-radius:12px; }
.roster-row.dead{ opacity:.7; }
.roster-face-link{ flex:0 0 auto; line-height:0; }
.roster-face{ width:48px; height:48px; border-radius:50%; object-fit:cover;
  flex:0 0 auto; border:2px solid #c9a227; cursor:zoom-in; }
.roster-face.ph{ display:flex; align-items:center; justify-content:center;
  font-size:22px; background:var(--card,#0000); border-style:dashed; }
.roster-info{ flex:1; min-width:0; }
.roster-name{ font-weight:700; }
.roster-del{ flex:0 0 auto; margin:0; }
.dead-tag{ font-size:11px; margin-left:6px; }
button.danger{ padding:9px 12px; font-size:14px; font-weight:700; border:0;
  border-radius:9px; cursor:pointer; background:#a12727; color:#fff; }
button.danger[disabled]{ background:#7773; color:var(--muted); cursor:not-allowed; }

/* Tavoli / inviti (step 2 pivot) */
.card{ border:1px solid var(--border); border-radius:12px; padding:14px;
  margin:12px 0; background:var(--panel); display:flex; flex-direction:column; gap:10px; }
details.card > summary{ cursor:pointer; font-weight:700; list-style:none; }
details.card > summary::-webkit-details-marker{ display:none; }
details.card > summary::before{ content:'▸ '; color:var(--accent); }
details.card[open] > summary::before{ content:'▾ '; }
.tag{ display:inline-block; font-size:12px; padding:2px 8px; border-radius:6px;
  background:var(--panel2); color:var(--muted); margin-left:6px; }
.join-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0; }
.join-form select{ padding:9px 10px; font-size:16px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg); color:inherit; }

/* Patto con la Morte sul web (step 2/B) */
.bargain-text{ font-style:italic; color:#e8d6a8; background:#2a1414;
  border:1px solid #6a2b2b; border-radius:8px; padding:10px 12px; margin:6px 0; }

/* Bottone neutro piccolo (rigenera ritratto, azioni secondarie roster) */
button.ghost-btn{ padding:9px 12px; font-size:14px; font-weight:700; border:0;
  border-radius:9px; cursor:pointer; background:var(--panel2); color:var(--accent); }
button.ghost-btn:active{ background:var(--panel); }

/* Chip identità nella topbar (pezzo A auth) */
.whoami{ margin-left:auto; font-size:12px; color:var(--muted); }
.whoami a{ color:var(--accent); text-decoration:none; }