/* Tavolo Virtuale — tema scuro "lume di candela" */
:root {
  --bg: #121016;
  --bg-2: #1a1720;
  --panel: #211d29;
  --panel-2: #2a2534;
  --line: #3a3346;
  --text: #ece6da;
  --muted: #a59cae;
  --gold: #d9a845;
  --gold-2: #f5d37a;
  --red: #c4483e;
  --green: #3fae6a;
  --blue: #4a86c5;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Cinzel', Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 15px/1.5 var(--font);
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, #2a2033 0%, transparent 60%), var(--bg);
  min-height: 100vh;
}
a { color: var(--gold-2); }
h1, h2, h3 { font-family: var(--display); letter-spacing: .02em; line-height: 1.2; }
h2 { font-size: 1.2rem; margin: 0 0 .25rem; }
small, .small { font-size: .82rem; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .08em; }
.grow { flex: 1; }
.inline { display: inline; }
[hidden] { display: none !important; }

/* ---------- controlli ---------- */
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: .45rem .6rem;
  outline: none;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
input:disabled, select:disabled, textarea:disabled { opacity: .85; background: transparent; border-color: transparent; }
textarea { resize: vertical; }
input[type=color] { width: 2.2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; }
input[type=range] { width: 100%; accent-color: var(--gold); }
input[type=checkbox] { accent-color: var(--gold); width: 1rem; height: 1rem; }
label { display: block; font-size: .85rem; color: var(--muted); }
label > input, label > select, label > textarea { margin-top: .25rem; color: var(--text); }
label.check { display: inline-flex; align-items: center; gap: .35rem; color: var(--text); cursor: pointer; }
label.check input { margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); text-decoration: none; cursor: pointer;
  font-weight: 500; white-space: nowrap; transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { border-color: var(--gold); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.primary { background: linear-gradient(180deg, #e2b456, #c18f2e); color: #1c1408; border-color: #c18f2e; font-weight: 600; }
.btn.primary:hover { background: linear-gradient(180deg, #f0c76b, #cf9b36); }
.btn.danger { border-color: var(--red); color: #ffb3ab; }
.btn.small { padding: .3rem .6rem; font-size: .82rem; }
.btn.meet { background: #1f6f4a; border-color: #2c8f61; color: #fff; font-weight: 600; }
.btn.meet:hover { background: #24805a; }
.link { background: none; border: 0; padding: 0; color: var(--gold-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link.danger, .danger { color: #ff9b91; }
.icon-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; padding: .2rem .4rem; border-radius: 6px; }
.icon-btn:hover { color: var(--text); background: var(--panel-2); }
.icon-btn.small { font-size: .8rem; }

.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding: .05rem .4rem; border-radius: 99px; background: var(--panel-2); color: var(--muted); margin-left: .35rem; border: 1px solid var(--line); }
.tag.gold { color: var(--gold-2); border-color: #6b5426; }
.badge { font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: .15rem .55rem; border-radius: 99px; background: #3b2d4f; color: #d9c8f2; }
.badge-dnd5e { background: #4b1f1f; color: #ffc8c0; }
.badge-pf2e { background: #1f3a4b; color: #bfe3ff; }
.badge-pf1e { background: #3d3a1c; color: #f2e8a9; }
.empty { color: var(--muted); font-style: italic; }

/* ---------- struttura ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.25rem; border-bottom: 1px solid var(--line); background: rgba(18, 16, 22, .85);
  backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 20;
}
.brand { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; }
.brand-die { color: var(--gold); }
.topnav { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.topnav a { color: var(--text); text-decoration: none; }
.topnav a:hover { color: var(--gold-2); }
.flash { max-width: 1100px; margin: 1rem auto 0; padding: .7rem 1rem; border-radius: var(--radius); border: 1px solid; }
.flash-error { background: #3a1a1a; border-color: #7a2e2e; color: #ffc9c2; }
.flash-ok { background: #193126; border-color: #2e6b4c; color: #c6f0d9; }
.flash-info { background: #1d2738; border-color: #34507a; color: #cfe0ff; }

.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.narrow { max-width: 520px; margin: 3rem auto; padding: 0 1.25rem; }
.page-title { font-size: 1.8rem; margin: .5rem 0 1.25rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.campaign-card { display: flex; flex-direction: column; gap: .4rem; }
.campaign-card h2 a { color: var(--text); text-decoration: none; }
.campaign-card h2 a:hover { color: var(--gold-2); }
.campaign-card p { margin: 0; }
.campaign-card .row { margin-top: .5rem; }
.campaign-card-head { display: flex; justify-content: space-between; align-items: center; }
.role { font-size: .78rem; color: var(--muted); }
.role-gm { color: var(--gold-2); }
.next-session { font-size: .88rem; }
.danger-zone { margin-top: auto; padding-top: .6rem; text-align: right; }

/* ---------- accesso ---------- */
.auth { max-width: 1000px; margin: 0 auto; padding: 4rem 1.25rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.auth-hero h1 { font-size: 2.6rem; margin: 0 0 1rem; color: var(--gold-2); }
.auth-hero p { color: var(--muted); font-size: 1.05rem; max-width: 30rem; }
.tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.tabs a { padding: .5rem .9rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--text); border-color: var(--gold); }

/* ---------- tavolo ---------- */
.page-table { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.page-table .topbar { position: static; padding: .45rem 1rem; }
#app { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.table-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.th-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.th-title h1 { font-size: 1.2rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-actions { display: flex; align-items: center; gap: .75rem; }
.conn { font-size: .8rem; color: var(--muted); }
.conn.ok { color: var(--green); }
.conn.ok.live { text-shadow: 0 0 6px var(--green); }
.conn.err { color: var(--red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }

.table-layout { flex: 1; display: grid; grid-template-columns: 1fr 380px; min-height: 0; }
.map-area { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #0b0a0e; }
.map-toolbar { display: flex; gap: .5rem; padding: .45rem .6rem; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.tool-group { display: flex; gap: 2px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.tool { background: none; border: 0; padding: .3rem .55rem; border-radius: 6px; cursor: pointer; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.tool:hover { color: var(--text); background: var(--panel-2); }
.tool.active { background: var(--gold); color: #1c1408; font-weight: 600; }
.tool-group select { width: auto; padding: .25rem .4rem; font-size: .82rem; border: 0; background: var(--panel-2); }
.map-picker { margin-left: auto; gap: .35rem; padding-left: .4rem; }
.map-picker select { max-width: 200px; }
.map-wrap {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,214,150,.10), transparent 65%),
    repeating-linear-gradient(92deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(255,255,255,.025) 0 1px, transparent 1px 23px),
    linear-gradient(180deg, #3b2a1c, #2a1d13);
}
#map-canvas { display: block; touch-action: none; cursor: grab; }
#map-canvas:active { cursor: grabbing; }
#map-canvas[data-tool=ruler] { cursor: crosshair; }
#map-canvas[data-tool=reveal], #map-canvas[data-tool=hide] { cursor: cell; }
#map-canvas[data-tool=wall], #map-canvas[data-tool=door], #map-canvas[data-tool=template], #map-canvas[data-tool=draw], #map-canvas[data-tool=ping] { cursor: crosshair; }
#map-canvas[data-tool=erase], #map-canvas[data-tool=wallerase] { cursor: not-allowed; }
.map-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); padding: 2rem; pointer-events: none; }
.map-empty p { margin: .2rem 0; max-width: 28rem; }

.token-panel {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 5;
  background: rgba(33, 29, 41, .97); border: 1px solid var(--line); border-radius: 12px; padding: .5rem .6rem;
  box-shadow: var(--shadow); max-width: calc(100% - 1.5rem);
}
.tp-row { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.tp-row select { width: auto; max-width: 170px; padding: .3rem .4rem; font-size: .82rem; }
.tp-label { width: 150px !important; padding: .3rem .5rem !important; }

/* ---------- barra laterale ---------- */
.sidebar { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--bg-2); }
.side-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--line); }
.side-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: .65rem .2rem; cursor: pointer; color: var(--muted); font-size: .84rem; position: relative; white-space: nowrap; }
.side-tabs button.active { color: var(--text); border-color: var(--gold); background: var(--panel); }
.side-tabs button.unread::after { content: ''; position: absolute; top: .45rem; right: .6rem; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); }
.tab-pane { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: .8rem; }
.tab-pane.active { display: flex; flex-direction: column; gap: .6rem; }
.tab-pane[data-pane=dice] { padding: 0; overflow: hidden; }
.pane-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.pane-sub { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: .6rem 0 .3rem; font-family: var(--font); }

/* registro */
.log { flex: 1; overflow-y: auto; padding: .7rem; display: flex; flex-direction: column; gap: .45rem; }
.entry { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem; font-size: .88rem; }
.entry-head { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.entry-head time, .entry time { margin-left: auto; color: var(--muted); font-size: .72rem; }
.entry-label { color: var(--muted); }
.entry.private { border-style: dashed; border-color: #6b5aa0; background: #221d33; }
.entry.system { background: none; border: 0; color: var(--muted); font-style: italic; font-size: .8rem; text-align: center; padding: .1rem; display: flex; gap: .4rem; justify-content: center; }
.entry.system time { margin-left: 0; }
.chat-msg { white-space: pre-wrap; word-break: break-word; }
.roll-body { display: flex; align-items: center; gap: .6rem; margin-top: .2rem; }
.roll-total { font-family: var(--display); font-weight: 700; font-size: 1.6rem; min-width: 2.6rem; text-align: center; color: var(--gold-2); background: #2c2414; border: 1px solid #5a4620; border-radius: 8px; padding: 0 .4rem; }
.roll-bd { color: var(--muted); font-size: .8rem; word-break: break-word; }
.bd-dice { color: var(--text); }
.bd-die.dropped { text-decoration: line-through; opacity: .45; }
.bd-die.max { color: var(--green); font-weight: 600; }
.bd-die.min { color: #ff8f85; font-weight: 600; }
.entry.crit { border-color: #2f8f5a; box-shadow: 0 0 0 1px #2f8f5a inset; }
.entry.crit .roll-total { color: #8ff0b8; border-color: #2f8f5a; background: #14301f; }
.entry.fumble { border-color: #8f2f2f; }
.entry.fumble .roll-total { color: #ffa49c; border-color: #8f2f2f; background: #301414; }
.nat { font-size: .75rem; font-weight: 600; margin-top: .15rem; color: var(--gold-2); }

.dice-box { border-top: 1px solid var(--line); padding: .6rem; display: flex; flex-direction: column; gap: .45rem; background: var(--panel); }
.dice-row { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.dice-row select { width: auto; flex: 1; min-width: 7rem; padding: .3rem .4rem; }
.die { flex: 1; min-width: 2.6rem; padding: .4rem 0; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; font-weight: 600; font-size: .85rem; }
.die:hover { border-color: var(--gold); color: var(--gold-2); }
.chat-form { display: flex; gap: .4rem; }

/* personaggi */
.char-list { display: flex; flex-direction: column; gap: .3rem; }
.char-card { display: flex; gap: .6rem; align-items: center; padding: .5rem; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); }
.char-card.mine { border-color: #6b5426; }
.char-info { flex: 1; min-width: 0; }
.char-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-actions { display: flex; gap: .3rem; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; font-weight: 700; color: #fff; background: #2c5f8e; border: 2px solid var(--line); }
.avatar.npc { background: #8e2c2c; }
.hp { position: relative; height: 14px; border-radius: 99px; background: #0e0c12; margin-top: .25rem; overflow: hidden; }
.hp-fill { height: 100%; transition: width .3s; }
.hp-fill.ok { background: var(--green); } .hp-fill.warn { background: #e0a33a; } .hp-fill.bad { background: #d64545; }
.hp span { position: absolute; inset: 0; font-size: .68rem; line-height: 14px; text-align: center; font-weight: 600; text-shadow: 0 1px 2px #000; }
.member-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.member-list li { display: flex; gap: .4rem; align-items: center; }
.member-list .link { margin-left: auto; }

/* iniziativa */
.init-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.init-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.init-list li { display: flex; gap: .5rem; align-items: center; padding: .4rem .5rem; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.init-list li.current { border-color: var(--gold); background: #2c2414; box-shadow: 0 0 0 1px var(--gold) inset; }
.init-list li.current .init-name::before { content: '▶ '; color: var(--gold-2); }
.init-list li.hidden-entry { opacity: .6; border-style: dashed; }
.init-list li.empty { background: none; border: 0; }
.init-val { width: 3.4rem !important; text-align: center; font-weight: 700; flex: none; padding: .2rem !important; }
span.init-val { display: inline-block; }
.init-name { flex: 1; }
.init-name.link { color: var(--text); text-decoration: none; cursor: pointer; }
.init-name.link:hover { color: var(--gold-2); }
.init-add { display: grid; grid-template-columns: 1fr 4.5rem; gap: .4rem; align-items: center; }
.init-add .check, .init-add button { grid-column: auto; }

/* pannello GM */
details { border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
summary { padding: .6rem .75rem; cursor: pointer; font-weight: 600; font-size: .9rem; }
details > :not(summary) { margin: 0 .75rem .75rem; }
.invite { display: flex; flex-direction: column; gap: .3rem; margin-top: .9rem !important; padding-top: .75rem; border-top: 1px solid var(--line); }
.invite-row { display: flex; gap: .4rem; }
.invite-row input { font-size: .8rem; }
.map-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.map-list li { display: flex; gap: .35rem; align-items: center; padding: .35rem .45rem; border-radius: 7px; background: var(--bg-2); font-size: .88rem; }
.map-list li.viewing { outline: 1px solid var(--gold); }

/* ---------- scheda personaggio ---------- */
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(5, 4, 8, .7); display: grid; place-items: center; padding: 1.5rem; }
.modal-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); width: min(1100px, 100%); max-height: calc(100vh - 3rem); max-height: calc(100dvh - 3rem); display: flex; flex-direction: column; min-height: 0; }
.sheet-head { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.portrait { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #2c5f8e; display: grid; place-items: center; font: 700 1.4rem var(--display); flex: none; border: 2px solid var(--gold); }
.portrait.editable { cursor: pointer; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.sheet-name { font: 700 1.35rem var(--display) !important; background: transparent !important; border-color: transparent !important; flex: 1; min-width: 180px; width: auto !important; }
.sheet-name:hover:not(:disabled), .sheet-name:focus { border-color: var(--line) !important; }
.sheet-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: var(--panel); border: 0; padding: .3rem .55rem; cursor: pointer; font-size: .8rem; color: var(--muted); }
.seg button.active { background: var(--gold); color: #1c1408; font-weight: 600; }
.seg button[data-adv=dis].active { background: #b5554c; color: #fff; }
.sheet-body { overflow-y: auto; min-height: 0; flex: 1; padding: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; }
.sheet-foot { padding: .6rem 1rem; border-top: 1px solid var(--line); text-align: right; }
.sheet-block { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .75rem .85rem; min-width: 0; }
.sheet-block h3 { font-size: .9rem; margin: 0 0 .6rem; color: var(--gold-2); }
.sb-fields, .sb-abilities, .sb-skills, .sb-list, .sb-stats { grid-column: span 2; }
.sb-area textarea { min-height: 4rem; }
.fgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem .6rem; }
.fld { min-width: 0; grid-column: span 2; }
.fld.w1 { grid-column: span 1; } .fld.w2 { grid-column: span 2; } .fld.w3 { grid-column: span 3; }
.sb-stats .fld.w1 { grid-column: span 1; }
.fld > span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fld.stat { background: var(--bg-2); border-radius: 8px; padding: .35rem .5rem; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.fld.stat > span { max-width: 100%; }
.calc { font-weight: 700; }
.calc.big { font: 700 1.25rem var(--display); color: var(--text); }
.roll-btn { border: 1px solid #5a4620; background: #2c2414; color: var(--gold-2); border-radius: 6px; cursor: pointer; font-weight: 600; padding: .25rem .5rem; font-size: .8rem; }
.roll-btn:hover { background: #3d3119; border-color: var(--gold); }
.roll-btn.small { font-size: .75rem; padding: .15rem .45rem; }
.roll-btn.mini { font-size: .72rem; padding: .1rem .35rem; }
.hp-quick { display: flex; gap: .25rem; margin-top: .3rem; }
.hp-quick .hp-delta { padding: .2rem .35rem !important; font-size: .8rem; }
.hp-quick .mini { border-radius: 6px; border: 1px solid var(--line); cursor: pointer; padding: 0 .55rem; font-weight: 700; }
.hp-quick .mini.danger { background: #3a1a1a; color: #ffb3ab; }
.hp-quick .mini.ok { background: #193126; color: #9fe8c0; }

.abilities { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.ab-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .4rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.ab-name { font: 700 .8rem var(--display); color: var(--gold-2); letter-spacing: .1em; }
.ab-card input { text-align: center; font-weight: 600; padding: .3rem !important; }
.ab-mod { font: 700 1.2rem var(--display); min-width: 3rem; }
.ab-save { display: flex; align-items: center; gap: .3rem; font-size: .75rem; }
.ab-save label { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; }

.skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: .2rem 1.2rem; }
.sk-row { display: grid; grid-template-columns: 2.3rem 1fr 7.5rem 3rem 2.6rem auto; gap: .35rem; align-items: center; padding: .15rem 0; border-bottom: 1px solid #2c2736; font-size: .86rem; }
.skills.pf1 .sk-row { grid-template-columns: 2.3rem 1fr 6.5rem 3rem 2.6rem auto; }
.sk-ab { font-size: .68rem; color: var(--muted); font-weight: 600; }
.sk-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-row select, .sk-row input { padding: .2rem .3rem !important; font-size: .8rem; }
.sk-ranks { display: flex; align-items: center; gap: .3rem; }
.sk-ranks label { display: inline-flex; align-items: center; gap: .15rem; font-size: .7rem; }
.sk-row .calc { text-align: right; }

.list-block { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.list-row { width: 100%; background: var(--bg-2); border-radius: 8px; padding: .5rem; display: flex; flex-direction: column; gap: .4rem; }
.list-row .fgrid { grid-template-columns: repeat(8, 1fr); }
.list-row .fld { grid-column: span 2; }
.list-row .fld.w1 { grid-column: span 1; } .list-row .fld.w3 { grid-column: span 3; }
.row-rolls { display: flex; gap: .3rem; flex-wrap: wrap; }
.list-row > .link { align-self: flex-end; }

/* ---------- avvisi ---------- */
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 100; padding: .6rem 1rem; border-radius: 10px; box-shadow: var(--shadow); font-weight: 500; max-width: 90vw; background: var(--panel-2); border: 1px solid var(--line); }
.toast-error { background: #4a1f1f; border-color: #8a3a3a; }
.toast-ok { background: #1c3a2b; border-color: #2e6b4c; }
.toast-roll { background: #2c2414; border-color: var(--gold); color: var(--gold-2); font-family: var(--display); font-size: 1.1rem; }

/* ---------- schermi piccoli ---------- */
@media (max-width: 1000px) {
  .sheet-body { grid-template-columns: 1fr; }
  .sb-fields, .sb-abilities, .sb-skills, .sb-list, .sb-stats { grid-column: auto; }
  .sb-stats .fld.w1 { grid-column: span 2; }
  .skills { grid-template-columns: 1fr; }
  .table-layout { grid-template-columns: 1fr 320px; }
}
@media (max-width: 760px) {
  .auth { grid-template-columns: 1fr; padding-top: 2rem; gap: 1.5rem; }
  .auth-hero h1 { font-size: 1.9rem; }
  .two-col { grid-template-columns: 1fr; }
  .topnav .muted { display: none; }
  .page-table { height: auto; overflow: auto; }
  .table-layout { display: flex; flex-direction: column; }
  .map-area { height: 62vh; flex: none; }
  .sidebar { border-left: 0; border-top: 1px solid var(--line); min-height: 70vh; }
  .tab-pane[data-pane=dice] .log { max-height: 50vh; }
  .tool span { display: none; }
  .map-picker { margin-left: 0; }
  .abilities { grid-template-columns: repeat(3, 1fr); }
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .fld, .fld.w1, .fld.w2, .fld.w3, .sb-stats .fld.w1 { grid-column: span 1; }
  .list-row .fgrid { grid-template-columns: repeat(2, 1fr); }
  .list-row .fld, .list-row .fld.w1, .list-row .fld.w3 { grid-column: span 1; }
  .sk-row, .skills.pf1 .sk-row { grid-template-columns: 2rem 1fr 6rem 2.6rem 2.4rem auto; }
  .modal { padding: 0; }
  .modal-box { border-radius: 0; height: 100%; max-height: 100vh; max-height: 100dvh; }
  .tp-label { width: 110px !important; }
}

/* ================= v2: realismo ================= */
.icon-btn.off { opacity: .4; filter: grayscale(1); }
.presence { display: flex; gap: 3px; }
.pres { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700;
  background: var(--panel-2); color: var(--muted); border: 2px solid var(--line); opacity: .55; }
.pres.on { opacity: 1; color: #fff; background: var(--who); border-color: rgba(255,255,255,.6); box-shadow: 0 0 0 2px rgba(63,174,106,.6); }
.member-list .dot { width: 9px; height: 9px; border-radius: 50%; background: #555; flex: none; }
.member-list .dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }

#template-type, #terrain-type, #prop-type { display: none; max-width: 150px; }
#template-type.active, #terrain-type.active, #prop-type.active { display: inline-block; }
#draw-color { width: 1.8rem; height: 1.6rem; border-radius: 5px; border: 0; padding: 0; background: none; cursor: pointer; }
.gm-tools { border-color: #6b5426; }

/* dadi 3D */
.dice-stage { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.dice-layer { position: absolute; inset: 0; pointer-events: none; }
.dice-total { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 6; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem 1.2rem .6rem; border-radius: 14px;
  background: rgba(20,18,26,.88); border: 1px solid var(--gold); box-shadow: var(--shadow); animation: popin .35s ease-out; text-align: center; }
.dice-total .dt-who { font-size: .82rem; color: var(--muted); }
.dice-total strong { font: 700 2.6rem/1 var(--display); color: var(--gold-2); text-shadow: 0 2px 12px rgba(245,211,122,.4); }
.dice-total em { font-style: normal; font-weight: 700; font-size: .85rem; letter-spacing: .06em; color: var(--gold-2); }
.dice-total.crit { border-color: #2f8f5a; } .dice-total.crit strong, .dice-total.crit em { color: #8ff0b8; }
.dice-total.fumble { border-color: #8f2f2f; } .dice-total.fumble strong, .dice-total.fumble em { color: #ffa49c; }
@keyframes popin { from { transform: translate(-50%, 10px) scale(.9); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }

/* registro */
.entry.roll, .entry.chat { border-left: 3px solid var(--who, var(--line)); }
.entry-target { color: #ff9b91; font-weight: 600; font-size: .82rem; }
.outcome { font-weight: 700; font-size: .72rem; letter-spacing: .06em; padding: .15rem .45rem; border-radius: 6px; margin-left: auto; }
.outcome.hit { background: #1c3a2b; color: #9fe8c0; }
.outcome.crit { background: #2f8f5a; color: #fff; }
.outcome.miss { background: #2a2534; color: var(--muted); }
.outcome.fumble { background: #5a1f1f; color: #ffb3ab; }
.entry-actions { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.entry-actions:empty { display: none; }
.applied { font-size: .8rem; color: #9fe8c0; font-weight: 600; }
.handout-entry .link { font-style: normal; }
.target-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; padding: .2rem .5rem; border-radius: 99px;
  background: #3a1a1a; border: 1px solid #8a3a3a; color: #ffc9c2; }
.dice-target { margin: .5rem .7rem 0; align-self: flex-start; }

/* pannello segnalino */
.token-panel { display: flex; flex-direction: column; gap: .4rem; max-width: min(720px, calc(100% - 1.5rem)); }
.tp-hp { font-weight: 700; font-family: var(--display); }
.tp-delta { width: 4.2rem !important; padding: .25rem .4rem !important; }
.mini-btn { border: 1px solid var(--line); border-radius: 6px; cursor: pointer; padding: .2rem .6rem; font-weight: 700; }
.mini-btn.bad { background: #3a1a1a; color: #ffb3ab; } .mini-btn.ok { background: #193126; color: #9fe8c0; }
.tp-row.conds { gap: 2px; }
.cond { background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; padding: .1rem .3rem; font-size: .95rem; opacity: .5; }
.cond:hover { opacity: .9; }
.cond.on { opacity: 1; border-color: var(--gold); background: #2c2414; }
.cond.static { cursor: default; font-size: .78rem; }
.health { font-size: .78rem; font-weight: 600; padding: .1rem .45rem; border-radius: 99px; }
.health.ok { background: #193126; color: #9fe8c0; } .health.bloodied { background: #4a1f1f; color: #ffb3ab; } .health.down { background: #222; color: #aaa; }

/* scheda */
.roll-btn.attack { border-color: #8a3a3a; background: #3a1a1a; color: #ffc9c2; }
.slots { display: flex; flex-direction: column; gap: .3rem; }
.slot-row { display: flex; align-items: center; gap: .5rem; }
.slot-lv { font: 700 .85rem var(--display); color: var(--gold-2); width: 1.8rem; }
.slot-max { width: 3.4rem !important; padding: .2rem .3rem !important; text-align: center; }
.pips { display: flex; gap: 4px; flex-wrap: wrap; }
.pip { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gold); background: transparent; cursor: pointer; padding: 0; }
.pip.used { background: var(--gold); box-shadow: inset 0 0 0 3px var(--panel); }
.pip.ok { border-color: var(--green); } .pip.ok.used { background: var(--green); }
.pip.bad { border-color: var(--red); } .pip.bad.used { background: var(--red); }
.deathsaves { display: flex; flex-direction: column; gap: .4rem; }
.ds-row { display: flex; align-items: center; gap: .4rem; }
.ds-row > span { width: 6rem; font-size: .85rem; color: var(--muted); }

/* diario e dispense */
.row.space { justify-content: space-between; }
.handout-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.handout-list li { display: flex; align-items: center; gap: .5rem; padding: .35rem; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.handout-list li.unrevealed { border-style: dashed; opacity: .8; }
.handout-list li.empty { background: none; border: 0; }
.ho-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex: none; }
.ho-text { display: grid; place-items: center; background: #3b2f1e; font-size: 1.2rem; }
.handout-list .link { text-align: left; color: var(--text); text-decoration: none; font-weight: 600; }
.note-list { display: flex; flex-direction: column; gap: .5rem; }
.note { background: #2a2418; border: 1px solid #5a4620; border-radius: 9px; padding: .55rem .7rem; }
.note.gm-only { background: #221d33; border-color: #6b5aa0; }
.note header { display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .25rem; }
.note header .link { margin-left: auto; }
.note-body { white-space: pre-wrap; font-size: .9rem; }
.note-editor textarea { min-height: 9rem; }
.modal-box.handout { width: min(720px, 100%); padding: 1rem 1.2rem 1.4rem; gap: .8rem; overflow-y: auto;
  background: linear-gradient(180deg, #f1e3c4, #e2cfa3); color: #2b2114; border-color: #8a6a3a; }
.modal-box.handout h2 { margin: 0; color: #3b2a14; }
.modal-box.handout .icon-btn { color: #3b2a14; }
#handout-img { max-width: 100%; max-height: 60vh; object-fit: contain; border-radius: 6px; align-self: center; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.handout-body { white-space: pre-wrap; font: 1.05rem/1.6 Georgia, serif; }

@media (max-width: 760px) {
  .presence { display: none; }
  .dice-total strong { font-size: 2rem; }
  .side-tabs button { font-size: .76rem; }
}

/* ================= v3: avatar, miniature, terreni, oggetti, 3D ================= */
.table3d { position: absolute; inset: 0; z-index: 2; }
.table3d canvas { display: block; }
.tool:disabled { opacity: .35; cursor: not-allowed; }
#prop-panel { bottom: auto; top: .8rem; }
details.sub { border: 0; background: none; }
details.sub > summary { padding: .4rem 0; font-weight: 500; color: var(--gold-2); font-size: .85rem; }
details.sub > :not(summary) { margin: 0 0 .6rem; }

.portrait { position: relative; }
.portrait.editable::after { content: '✎'; position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); color: #1c1408; font-size: .7rem; display: grid; place-items: center; font-family: var(--font); }
.portrait img { background: #2a2534; }

.avatar-box { width: min(980px, 100%); padding: .9rem 1rem; gap: .8rem; overflow: hidden; }
.avatar-pane { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; min-height: 0; overflow: auto; max-height: calc(100vh - 12rem); }
.avatar-pane[data-apane=upload] { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.avatar-pane[data-apane=gallery] { display: block; }
.avatar-pane[hidden] { display: none !important; }
.avatar-preview { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.avatar-preview .stage { width: 220px; height: 330px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 85%, rgba(255,214,150,.18), transparent 60%), linear-gradient(180deg, #2a2230, #1a1720); border: 1px solid var(--line); }
.avatar-preview .stage img { max-width: 100%; max-height: 100%; }
#av-mini { width: 150px; height: 150px; }
.avatar-controls { display: flex; flex-direction: column; gap: .55rem; }
.av-row { display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; gap: .3rem .6rem; }
.av-row > span { font-size: .82rem; color: var(--muted); }
.av-row select { width: auto; max-width: 14rem; padding: .3rem .4rem; }
.av-row > :nth-child(n+3) { grid-column: 2; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(0,0,0,.4); cursor: pointer; padding: 0; }
.swatch.on { border-color: var(--gold-2); box-shadow: 0 0 0 2px var(--gold); }
.swatches input[type=color] { width: 26px; height: 24px; }
.crop-wrap { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
#crop-canvas { display: block; cursor: grab; touch-action: none; }
.avatar-pane[data-apane=upload] label { width: 300px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.gallery-item { background: linear-gradient(180deg, #2a2230, #1a1720); border: 2px solid var(--line); border-radius: 10px; cursor: pointer; padding: .3rem; display: flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--text); }
.gallery-item img { width: 100%; height: 130px; object-fit: contain; }
.gallery-item span { font-size: .78rem; }
.gallery-item:hover { border-color: var(--gold); }
.gallery-item.on { border-color: var(--gold-2); box-shadow: 0 0 0 2px var(--gold); }
@media (max-width: 760px) {
  .avatar-pane { grid-template-columns: 1fr; max-height: calc(100vh - 9rem); }
  .avatar-preview { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .avatar-preview .stage { width: 140px; height: 210px; }
  #av-mini { width: 110px; height: 110px; }
  .av-row { grid-template-columns: 1fr; }
  .av-row > :nth-child(n+3) { grid-column: 1; }
  #prop-panel { top: .4rem; }
}

/* ================= v4: schede in pagine ================= */
.sheet-body { grid-template-columns: 1fr !important; }
.sheet-tabs { display: flex; gap: .3rem; flex-wrap: wrap; position: sticky; top: -1rem; z-index: 3; background: var(--bg-2); padding: .4rem 0 .6rem; margin-top: -.4rem; border-bottom: 1px solid var(--line); }
.sheet-tabs button { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 99px; padding: .35rem .85rem; cursor: pointer; font-size: .85rem; }
.sheet-tabs button.active { background: var(--gold); color: #1c1408; border-color: var(--gold); font-weight: 600; }
.sheet-page { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; }
.sheet-page[hidden] { display: none; }
.sheet-page .sb-fields, .sheet-page .sb-abilities, .sheet-page .sb-skills, .sheet-page .sb-list, .sheet-page .sb-stats, .sheet-page .sb-spellbook, .sheet-page .sb-wide { grid-column: span 2; }
.spellbook { display: flex; flex-direction: column; gap: .5rem; }
.sp-level { background: var(--bg-2); border-radius: 8px; padding: .45rem .55rem; display: flex; flex-direction: column; gap: .35rem; }
.sp-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sp-head strong { font-family: var(--display); color: var(--gold-2); min-width: 6.5rem; }
.sp-head label { display: inline-flex; align-items: center; gap: .3rem; }
.sp-level textarea { min-height: 2.6rem; }
@media (max-width: 1000px) {
  .sheet-page { grid-template-columns: 1fr; }
  .sheet-page > section { grid-column: auto !important; }
}

/* ---- creazione guidata del personaggio ---- */
.builder-modal { z-index: 60; }
.modal-box.builder { width: min(980px, 100%); min-width: 0; max-width: 100%; }
.bd-head { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); }
.bd-title { flex: 1; min-width: 0; }
.bd-title h2 { margin: 0; font: 600 1.15rem var(--display); color: var(--gold-2); }
.bd-rs select { margin-left: .3rem; }
.bd-steps { display: flex; gap: .3rem; flex-wrap: wrap; padding: .6rem 1.1rem; border-bottom: 1px solid var(--line); }
.bd-steps button { background: var(--panel); border: 1px solid var(--line); color: var(--muted); border-radius: 99px; padding: .3rem .8rem; cursor: pointer; font-size: .84rem; }
.bd-steps button.active { background: var(--gold); color: #1c1408; border-color: var(--gold); font-weight: 600; }
.bd-body { padding: 1rem 1.1rem; overflow-y: auto; flex: 1; min-height: 0; }
.bd-foot { display: flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-top: 1px solid var(--line); }
.bd-status { flex: 1; }
.bd-warn { color: #ffcf7a; }
.bd-ok { color: #8fe0ab; }
.bd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bd-sec { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .9rem; margin-bottom: 1rem; min-width: 0; }
.bd-sec h3 { margin: 0 0 .6rem; font: 600 .95rem var(--display); color: var(--gold-2); }
.bd-sec h4 { margin: .8rem 0 .4rem; font-size: .85rem; color: var(--gold); }
.bd-field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .6rem; min-width: 0; }
.bd-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bd-field select, .bd-field input[type=text], .bd-field input[type=number], .bd-field textarea { width: 100%; }
.bd-level { width: 5rem !important; }
.bd-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; margin-top: .5rem; font-size: .88rem; }
.bd-card .bd-card { border: 0; padding: 0; margin: 0; background: none; }
.bd-card h4 { margin: .2rem 0 .4rem; }
.bd-row { padding: .1rem 0; }
.bd-traits { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .86rem; }
.bd-traits li { margin: .15rem 0; }
.bd-traits li.future { opacity: .45; }
.bd-traits .lv { display: inline-block; min-width: 2rem; color: var(--gold); font-weight: 600; }
.bd-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.chip { background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 99px; padding: .25rem .7rem; font-size: .84rem; cursor: pointer; }
.chip:hover:not(:disabled) { border-color: var(--gold); }
.chip.on { background: var(--gold); border-color: var(--gold); color: #1c1408; font-weight: 600; }
.chip:disabled { opacity: .35; cursor: not-allowed; }
.bd-abgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .8rem; }
.bd-abgrid.compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bd-pb { display: flex; align-items: center; gap: .5rem; }
.bd-pb strong { min-width: 1.6rem; text-align: center; font-size: 1.1rem; }
.bd-methods { margin-bottom: .7rem; flex-wrap: wrap; }
.bd-sec > .btn { margin: .2rem 0 .8rem; }
.bd-table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.bd-table th, .bd-table td { border-bottom: 1px solid var(--line); padding: .35rem .4rem; text-align: center; }
.bd-table th:first-child { text-align: left; color: var(--muted); font-weight: 500; }
.bd-list td { text-align: left; }
.bd-list td.right { text-align: right; white-space: nowrap; }
.bd-hp { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.bd-pre { white-space: pre-wrap; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; font: .82rem/1.5 var(--font); max-height: 22rem; overflow: auto; }
.bd-warnbox { background: rgba(217, 168, 69, .1); border: 1px solid rgba(217, 168, 69, .45); border-radius: 8px; padding: .5rem .8rem; margin-bottom: .8rem; font-size: .88rem; }
.bd-warnbox ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.bd-levelup { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--bg-2); border: 1px solid var(--gold); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .8rem; }
.bd-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.bd-form .bd-field:has(textarea) { grid-column: 1 / -1; }
.credit { margin-top: 1rem; }
@media (max-width: 760px) {
  .bd-grid, .bd-form { grid-template-columns: 1fr; }
  .bd-abgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-abgrid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bd-head { flex-wrap: wrap; }
  .bd-title { flex: 1 1 calc(100% - 3rem); }
  .bd-rs { order: 3; flex: 1 1 100%; display: flex; align-items: center; gap: .4rem; }
  .bd-rs select { flex: 1; margin: 0; }
  .bd-steps button { padding: .25rem .65rem; font-size: .8rem; }
  .bd-table { table-layout: fixed; font-size: .8rem; }
  .bd-table th, .bd-table td { padding: .3rem .15rem; }
  .bd-table th:first-child { width: 5.6rem; }
  .bd-list { table-layout: auto; }
  .bd-foot { flex-wrap: wrap; }
  .bd-status { flex-basis: 100%; }
}

/* ---- bestiario ---- */
.bestiary-modal { z-index: 60; }
.modal-box.bestiary { width: min(1180px, 100%); height: calc(100dvh - 3rem); min-width: 0; max-width: 100%; }
.bestiary .bd-head select { max-width: 18rem; }
.bs-body { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; flex: 1; min-height: 0; }
.bs-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); padding: .7rem; gap: .4rem; }
.bs-filters { display: flex; flex-direction: column; gap: .4rem; }
.bs-filters input[type=search] { width: 100%; }
.bs-num { width: 4.4rem; }
.bs-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.bs-list li { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border-radius: 8px; cursor: pointer; }
.bs-list li:hover { background: var(--panel-2); }
.bs-list li.active { background: rgba(217, 168, 69, .18); outline: 1px solid var(--gold); }
.bs-thumb { width: 38px; height: 38px; border-radius: 50%; background: #4a3d33; flex: none; }
.bs-li-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-li-lv { font-size: .78rem; color: var(--gold); white-space: nowrap; }
.bs-right { overflow-y: auto; padding: .9rem 1.1rem; min-width: 0; }
.bs-add { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; margin-bottom: 1rem; }
.bs-add-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: .5rem; }
.bs-add-row label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--muted); }
.bs-add-row label.check { flex-direction: row; align-items: center; }
.bs-add-row .grow { flex: 1; min-width: 10rem; }
.bs { background: #f4ecd8; color: #2a1d12; border-radius: 10px; padding: 1rem 1.1rem; box-shadow: inset 0 0 0 1px #c9b48a; font-size: .92rem; }
.bs .muted { color: #6b5a46; }
.bs-top { display: flex; gap: 1rem; align-items: flex-start; }
.bs-avatar { width: 96px; height: 154px; flex: none; background: radial-gradient(circle at 50% 70%, #d9c7a0, #c9b48a); border-radius: 10px; }
.bs-name { margin: 0; font: 700 1.5rem var(--display); color: #7a1f12; }
.bs-head { font-style: italic; margin-top: .2rem; }
.bs-traits { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }
.bs-trait { background: #5a1a12; color: #f4ecd8; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .4rem; border-radius: 3px; }
.bs-rule { height: 3px; background: linear-gradient(90deg, #9a2a1a, rgba(154, 42, 26, .1)); margin: .55rem 0; }
.bs-line { margin: .12rem 0; }
.bs-line strong { color: #7a1f12; }
.bs-ab { width: 100%; text-align: center; border-collapse: collapse; }
.bs-ab th { color: #7a1f12; font-size: .78rem; }
.bs-sec h3 { font: 600 1.05rem var(--display); color: #7a1f12; border-bottom: 1px solid #9a2a1a; margin: .9rem 0 .4rem; padding-bottom: .1rem; }
.bs-sec p { margin: .35rem 0; line-height: 1.45; }
.bs-sec p strong { font-style: italic; }
.bs-intro { font-style: italic; }
.init-tools { margin: .3rem 0 .4rem; }
.init-timer { display: inline-block; font-size: .72rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 99px; padding: 0 .35rem; margin-left: .2rem; cursor: default; }
.tp-timer .init-timer { cursor: pointer; }
.tp-row input.tp-num.tp-num.tp-num[type=number] { width: 3.6rem; min-width: 0; flex: none; }
.tp-timer select { width: auto; flex: 1 1 8rem; min-width: 0; }
.init-list li.down .init-name { text-decoration: line-through; opacity: .6; }
@media (max-width: 760px) {
  .bs-body { grid-template-columns: 1fr; grid-template-rows: minmax(200px, 40%) 1fr; }
  .bs-left { border-right: 0; border-bottom: 1px solid var(--line); }
  .bs-top { flex-direction: column; align-items: center; text-align: center; }
  .bestiary .bd-head select { max-width: 100%; flex: 1 1 100%; order: 3; }
}
.bs-filters label { display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap; }
.bs-filters label input.bs-num.bs-num.bs-num[type=number] { width: 4.6rem; min-width: 0; flex: none; }

/* ---- installazione guidata ---- */
.install { max-width: 760px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
.install .card h1 { font-family: 'Cinzel', serif; font-size: 1.5rem; margin: 0 0 .6rem; }
.install .card h2 { font-size: 1rem; margin: 1.4rem 0 .5rem; color: var(--gold); }
.install .flash { max-width: none; margin: 0 0 1rem; }
.reqs { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .35rem; }
.reqs li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.reqs li > span { width: 1.4rem; text-align: center; font-weight: 700; }
.reqs li.ok > span { color: var(--green); } .reqs li.ko > span { color: var(--red); } .reqs li.warn > span { color: var(--gold); }
.reqs small { flex-basis: 100%; padding-left: 1.9rem; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
@media (max-width: 600px) { .grid2 { grid-template-columns: 1fr; } }
.install textarea.cfg { width: 100%; font-family: monospace; font-size: .85rem; }

/* backup */
.backup-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .35rem; max-height: 16rem; overflow: auto; }
.backup-list li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.backup-list li .grow { flex: 1; min-width: 0; }
.import-box { margin-top: 1rem; border-top: 1px solid var(--line, rgba(255,255,255,.1)); padding-top: .8rem; }
.import-box summary { cursor: pointer; color: var(--muted, #aaa); font-size: .9rem; }
.import-box form { margin-top: .7rem; }

/* musica e atmosfera */
.amb-wrap { position: relative; }
.amb-wrap[hidden] { display: none; }
#amb-btn.off { opacity: .45; }
#amb-btn.playing { text-shadow: 0 0 8px var(--gold); }
#amb-btn.need-gesture { animation: amb-pulse 1.2s ease-in-out infinite; border-radius: 50%; }
@keyframes amb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,163,58,.6); } 50% { box-shadow: 0 0 0 7px rgba(224,163,58,0); } }
.amb-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: min(260px, 80vw); background: var(--panel, #221d2b); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .8rem; box-shadow: 0 10px 30px rgba(0,0,0,.45); display: grid; gap: .5rem; }
.amb-pop p { margin: 0; }
.amb-pop input[type=range] { width: 100%; }
.amb-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: .5rem 0; }
.amb-preset { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem .2rem; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: .78rem; cursor: pointer; }
.amb-preset .ico { font-size: 1.3rem; }
.amb-preset:hover { border-color: var(--gold); }
.amb-preset.active { background: rgba(217,168,69,.18); border-color: var(--gold); }
.amb-tracks { list-style: none; padding: 0; margin: .4rem 0 .6rem; display: grid; gap: .25rem; max-height: 14rem; overflow: auto; }
.amb-tracks li { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.amb-tracks li .grow { flex: 1; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amb-tracks li.active .grow { color: var(--gold); font-weight: 600; }
.amb-master { align-items: center; margin-top: .4rem; }
.amb-master input[type=range] { width: 100%; }

/* incontri */
.bs-enc-n { display: inline-block; min-width: 1.3em; padding: 0 .3em; border-radius: 1em; background: var(--gold); color: #1a1408; font-weight: 700; font-size: .75rem; text-align: center; }
.enc-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.enc-name { display: grid; gap: .2rem; margin: .4rem 0 .6rem; }
.enc-party { align-items: center; }
.enc-list, .enc-saved { list-style: none; padding: 0; margin: .4rem 0 .8rem; display: grid; gap: .3rem; }
.enc-list li, .enc-saved li { display: flex; align-items: center; gap: .35rem; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .3rem .5rem; }
.enc-list .grow, .enc-saved .grow { flex: 1; min-width: 0; text-align: left; }
.enc-saved li.active { border-color: var(--gold); }
.enc-n { min-width: 1.6em; text-align: center; }
.enc-diff { border-radius: var(--radius); padding: .7rem .8rem; margin-bottom: .8rem; border: 1px solid var(--line); background: var(--panel); display: grid; gap: .45rem; }
.enc-verdict { display: flex; align-items: baseline; gap: .6rem; }
.enc-verdict strong { font: 600 1.25rem var(--display); }
.enc-diff.lv1 { border-color: #3d6b52; } .enc-diff.lv1 strong { color: #7fd1a0; }
.enc-diff.lv2 { border-color: #5d7a3a; } .enc-diff.lv2 strong { color: #c4d97a; }
.enc-diff.lv3 { border-color: #8a6a2a; } .enc-diff.lv3 strong { color: var(--gold-2); }
.enc-diff.lv4 { border-color: #8a4a2a; } .enc-diff.lv4 strong { color: #f0995c; }
.enc-diff.lv5 { border-color: var(--red); background: rgba(196,72,62,.12); } .enc-diff.lv5 strong { color: #ff7b6e; }
.enc-steps { display: flex; flex-wrap: wrap; gap: .3rem; }
.enc-step { display: grid; padding: .2rem .5rem; border-radius: 6px; border: 1px solid var(--line); font-size: .8rem; opacity: .55; text-align: center; }
.enc-step small { color: var(--muted); font-size: .68rem; }
.enc-step.on { opacity: 1; border-color: var(--gold); }
.enc-sub { font: 600 .95rem var(--display); color: var(--gold-2); margin: 1rem 0 .3rem; }
@media (max-width: 700px) {
  .amb-pop { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; }
}

/* icone disegnate (assets/js/icons.js) */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.22em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.icon-btn > .ic { width: 1.25rem; height: 1.25rem; vertical-align: middle; }
.icon-btn.small > .ic { width: 1rem; height: 1rem; }
.tool > .ic { width: 1.1rem; height: 1.1rem; }
.side-tabs button > .ic { margin-right: .15rem; opacity: .85; }
.side-tabs button.active > .ic { color: var(--gold-2); opacity: 1; }
.tool.active > .ic { stroke-width: 2.1; }
.amb-preset .ico .ic { width: 1.6rem; height: 1.6rem; stroke-width: 1.6; }
.amb-preset.active .ico .ic { color: var(--gold-2); }
#sound-toggle.off, #dice-toggle.off { opacity: .45; }
.bs-name > .ic, h2 > .ic { color: var(--gold-2); margin-right: .2rem; }

/* tiri di dado */
.roll-body { gap: .7rem; margin-top: .35rem; }
.roll-total { position: relative; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; min-width: 3.1rem; padding: 0; border: 0; border-radius: 0;
  font-size: 1.55rem; line-height: 1; color: #2a1c05; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  background: linear-gradient(150deg, #f7dc8e 0%, #d9a845 45%, #9a6d1c 100%);
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  font-variant-numeric: tabular-nums; }
.roll-total::after { content: ''; position: absolute; inset: 3px; clip-path: inherit; background: linear-gradient(150deg, rgba(255,255,255,.28), rgba(255,255,255,0) 45%, rgba(0,0,0,.18)); pointer-events: none; }
.roll-total.wide { font-size: 1.15rem; }
.roll-bd { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .3rem; font-size: .82rem; }
.bd-dice { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem; }
.bd-kind { color: var(--muted); font-size: .72rem; margin-right: .05rem; }
.bd-die { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .25rem; border-radius: 5px; background: #2b2636; border: 1px solid #453d57; color: var(--text); font-weight: 600; font-size: .8rem; font-variant-numeric: tabular-nums; }
.bd-die.max { color: #2a1c05; background: linear-gradient(160deg, #f7dc8e, #d9a845); border-color: #f1cf78; }
.bd-die.min { color: #ffd6d1; background: #5a1f1f; border-color: #8f2f2f; }
.bd-die.dropped { text-decoration: line-through; opacity: .4; }
.entry.roll.crit { border-color: #b98a2e; box-shadow: 0 0 0 1px #b98a2e inset, 0 0 18px rgba(217,168,69,.22); background: linear-gradient(180deg, rgba(217,168,69,.10), rgba(217,168,69,0) 70%), var(--panel); }
.entry.crit .roll-total { color: #2a1c05; background: linear-gradient(150deg, #fff3c4 0%, #f1c453 45%, #b9801a 100%); }
.entry.roll.fumble { border-color: #8f2f2f; background: linear-gradient(180deg, rgba(196,72,62,.12), rgba(196,72,62,0) 70%), var(--panel); }
.entry.fumble .roll-total { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); background: linear-gradient(150deg, #e2685d 0%, #a8322b 50%, #5e1512 100%); }
.entry.private .roll-total { filter: saturate(.55); }
.nat { display: inline-block; margin-top: .35rem; padding: .1rem .5rem; border-radius: 99px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nat.nat20 { color: #2a1c05; background: linear-gradient(90deg, #d9a845, #fff0b8 50%, #d9a845); background-size: 200% 100%; animation: nat-shine 2.2s linear 2; }
.nat.nat1 { color: #ffd6d1; background: #5a1f1f; }
.outcome.crit { background: linear-gradient(160deg, #f7dc8e, #d9a845); color: #2a1c05; }
@keyframes nat-shine { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes roll-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes die-spin { from { transform: rotate(-200deg) scale(.6); } to { transform: none; } }
@keyframes die-land { 0% { transform: scale(1.28); } 60% { transform: scale(.94); } 100% { transform: none; } }
.entry.fresh { animation: roll-in .25s ease-out; }
.entry.fresh .roll-total { animation: die-spin .42s cubic-bezier(.2,.7,.3,1); }
.entry.fresh .roll-total.landed { animation: die-land .3s ease-out; }
.entry.fresh .bd-die { animation: roll-in .3s ease-out backwards; animation-delay: .38s; }
@media (prefers-reduced-motion: reduce) { .entry.fresh, .entry.fresh .roll-total, .entry.fresh .bd-die, .nat.nat20 { animation: none; } }