/* ======================= Menu laterale senza rimbalzo ======================= */
#side.open    { transform: none; animation: slideIn .28s cubic-bezier(.22, .8, .3, 1) both; }
#side.closing { animation: slideOut .2s ease-in both; }
@keyframes slideIn  { from { transform: translateX(100%); } to { transform: none; } }
@keyframes slideOut { from { transform: none; } to { transform: translateX(100%); } }
#sideToggle { transition: right .28s cubic-bezier(.22, .8, .3, 1), background .2s; }

/* le schede del menu: solo l'icona, la scheda attiva mostra anche il nome */
.tab { padding: 10px 4px; min-width: 0; }
.tab:not(.active) .lbl { display: none; }
.tab.active { flex: 1 0 auto; padding-inline: 10px; }   /* larga quanto il suo nome: «Compendio» non esce più */

/* ======================= Selezione multipla ======================= */
#marquee { position: fixed; z-index: 90; pointer-events: none; border: 1px dashed #2f8cff; background: rgba(47, 140, 255, .14); }
#marquee[hidden] { display: none; }
#world.multi .handle { display: none !important; }

/* ======================= Ping: due anelli che pulsano ======================= */
.ping::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--pc, #ff4d4d);
  animation: pingRing 1.2s ease-out infinite; pointer-events: none;
}
@keyframes pingRing { from { transform: scale(1); opacity: .85; } to { transform: scale(1.7); opacity: 0; } }

/* ======================= Menu del clic destro ======================= */
#ctx { min-width: 190px; max-width: 280px; z-index: 300000; }
#ctx button { width: 100%; text-align: left; color: var(--text); white-space: nowrap; }
#ctx button.danger { color: #ff8080; }
#ctx button:disabled { opacity: .45; cursor: default; }
#ctx button:not(:disabled):hover { background: var(--panel-2); }
#ctx button.danger:not(:disabled):hover { background: color-mix(in srgb, #ff5d5d 15%, var(--panel-3)); }
#ctx .sep { height: 1px; margin: 4px 2px; background: var(--line); }

/* ======================= Menu a scomparsa a sinistra con gli strumenti ======================= */
#toolDrawer {
  position: fixed; left: 0; top: 50%; z-index: 100004; transform: translateY(-50%);
  padding: 10px 10px 10px 8px; border-radius: 0 22px 22px 0;
  background: rgba(18, 21, 28, .45); border: 1px solid rgba(255, 255, 255, .18); border-left: 0;
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  transition: transform .3s cubic-bezier(.22, .8, .3, 1);
}
#toolDrawer.closed { transform: translate(-100%, -50%); }
#toolDrawer.dropping { box-shadow: 0 0 0 2px #2ee6a6, 0 0 24px #2ee6a6; }
#toolDrawer .slots { display: flex; flex-direction: column; gap: 10px; }
#toolDrawer .slot { position: relative; width: 52px; height: 52px; border-radius: 26px; }
#toolDrawer .slot.hole { border: 2px dashed rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .05); }
#toolDrawer .slot.hole.hot { border-color: #2ee6a6; background: rgba(46, 230, 166, .18); }
#toolDrawer .dhandle {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 24px; height: 56px; padding: 0;
  display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); border-left: 0; border-radius: 0 14px 14px 0;
  background: rgba(18, 21, 28, .6); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#toolDrawer .dhandle svg { transition: transform .3s; }
#toolDrawer.closed .dhandle svg { transform: rotate(180deg); }
/* uno strumento nel menu sta nella sua casella; fuori dal menu torna fisso sullo schermo */
#toolDrawer .slot > .tool { position: absolute !important; left: 0 !important; top: 0 !important; bottom: auto !important; }
.tool { cursor: default; }
.tool.dragging { transition: none !important; cursor: grabbing; opacity: .92; }
.tool.toolOn > .tgrip { color: #2ee6a6; filter: drop-shadow(0 0 6px #2ee6a6); }
.tgrip { cursor: grab; }

/* strumenti nuovi (penna, calcolatrice, righello): stesso stile di dadi e zoom */
.tool.glass {
  position: fixed; left: 14px; top: 80px; z-index: 100003;
  width: 52px; height: 52px; border-radius: 26px; overflow: hidden; color: #fff;
  background: rgba(18, 21, 28, .5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
  transition: width .4s cubic-bezier(.22, .9, .3, 1), height .4s cubic-bezier(.22, .9, .3, 1), border-radius .4s;
}
.tool.glass.open { width: var(--tw, 240px); height: var(--dh, 240px); border-radius: 20px; }
.tool.glass > .tgrip {
  position: absolute; left: 0; top: 0; width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center; border: 0; background: none; color: inherit;
}
.tool.glass .tbody {
  box-sizing: border-box; width: var(--tw, 240px); padding: 58px 14px 14px;
  display: flex; flex-direction: column; gap: 8px; opacity: 0; transition: opacity .2s;
}
.tool.glass.open .tbody { opacity: 1; transition: opacity .3s .15s; }
.tool.glass button:not(.tgrip) {
  min-width: 34px; padding: 7px 9px; border-radius: 10px; font: inherit; font-size: 14px;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
}
.tool.glass button:not(.tgrip):hover { background: rgba(124, 92, 255, .45); }
.tool.glass .trow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.tool.glass .tnote { margin: 0; font-size: 12px; color: #c3cad8; }
.tool.glass input[type=range] { flex: 1; min-width: 0; }
.tool.glass .sw { width: 26px; height: 26px; min-width: 0; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); }
.tool.glass .sw.active { border-color: #2ee6a6; box-shadow: 0 0 8px #2ee6a6; }
.tool.glass input[type=color] { width: 32px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.tool.glass .tgrip:focus-visible, .tool.glass button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#ruler { cursor: default; }

/* calcolatrice */
#calcBox { --tw: 232px; }
#calcDisp { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 18px; text-align: right;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); color: #fff; }
#calcRes { min-height: 1.3em; text-align: right; font-size: 13px; color: #c3cad8; }
#calcKeys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#calcKeys button { padding: 9px 0 !important; }
#calcKeys .op { background: rgba(124, 92, 255, .35) !important; }
#calcKeys .eq { background: rgba(46, 230, 166, .35) !important; }

/* disegni e righello */
svg.drawSvg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
#viewport.pen-on, #viewport.pen-on * { cursor: crosshair !important; }
#viewport.ruler-on, #viewport.ruler-on * { cursor: crosshair !important; }
#rulerSvg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
#rulerSvg text { font: 600 14px system-ui, sans-serif; paint-order: stroke; stroke: rgba(0, 0, 0, .75); stroke-width: 4px; fill: #fff; }

/* ======================= Scena mostrata ai giocatori ======================= */
.sceneRow .pin { opacity: .45; }
.sceneRow .pin.on, .sceneRow .pin:hover { opacity: 1; }
.sceneRow.public .pick span:last-child::after { content: " · giocatori"; color: #2ee6a6; font-size: 11px; }
#publicBadge {
  display: none; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 22px; cursor: pointer;
  font: inherit; font-size: 13px; color: #fff; background: rgba(18, 21, 28, .55); border: 1px solid rgba(46, 230, 166, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 14px rgba(46, 230, 166, .35);
}
#publicBadge.show { display: flex; }
#publicBadge.other { border-color: #ffd93d; box-shadow: 0 0 14px rgba(255, 217, 61, .4); }

/* ======================= Finestre di dialogo ======================= */
#helpDialog, #sheetDialog, #pickDialog {
  border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; background: var(--panel); color: var(--text);
  max-width: min(480px, 92vw); box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
#helpDialog::backdrop, #sheetDialog::backdrop, #pickDialog::backdrop { background: rgba(0, 0, 0, .55); }
#helpDialog h3, #sheetDialog h3, #pickDialog h3 { margin: 0 0 12px; }
/* la guida non è mai più alta dello schermo (tolte le barre del telefono): l'elenco scorre */
#helpDialog[open] { display: flex; flex-direction: column; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); }
#helpDialog .helpList { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ui-touch .soloMouse { display: none !important; }
.helpList { margin: 0 0 16px; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-soft); }
#pickGrid { display: grid; grid-template-columns: repeat(4, 72px); gap: 8px; max-height: 320px; overflow-y: auto; margin-bottom: 14px; }
#pickGrid button { padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--panel-2); cursor: pointer; overflow: hidden; }
#pickGrid button:hover { border-color: #ff6fa8; }
#pickGrid img { display: block; width: 72px; height: 72px; object-fit: cover; }
#sheetDialog .types { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 14px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
#sheetDialog label.opt { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* ======================= Elenco delle schede ======================= */
#sheetList { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.sheetItem {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; cursor: grab;
  border: 1px solid var(--line); background: var(--panel-3); user-select: none;
}
.sheetItem:hover { border-color: #ff6fa8; box-shadow: 0 0 10px rgba(255, 111, 168, .4); }
.sheetItem .sicon { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--panel-2); }
.sheetItem .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheetItem small { color: var(--muted); font-size: 11px; }
#sheetList .empty { color: var(--muted); font-size: 13px; padding: 8px 2px; }

/* ======================= Finestra della scheda ======================= */
:root {
  --sh-bg: #f2e6c9; --sh-fg: #3b2a14; --sh-line: #c9b385; --sh-soft: #e6d6ad; --sh-accent: #8b1e1e;
  --sh-font: Georgia, "Times New Roman", serif; --sh-scale: 1;
}
.sheetWin {
  position: fixed; z-index: 150000; width: 640px; height: 560px; min-width: 300px; min-height: 120px; max-width: 96vw; max-height: 94vh; max-height: 94dvh;
  display: flex; flex-direction: column; resize: both; overflow: hidden;
  border-radius: 12px; border: 2px solid var(--sh-accent); background: var(--sh-bg); color: var(--sh-fg);
  font-family: var(--sh-font); font-size: calc(14px * var(--sh-scale)); box-shadow: 0 16px 50px rgba(0, 0, 0, .55);
}
/* Dentro una scheda (e nelle finestrelle che si aprono da una scheda) vale solo lo stile delle schede:
   i colori generali del programma diventano quelli della scheda, così pulsanti, campi, tendine, note e
   barre di scorrimento non tornano mai al tema chiaro/scuro del VTT. */
.sheetWin, .temaScheda {
  --bg: var(--sh-bg); --panel: var(--sh-bg); --panel-2: color-mix(in srgb, var(--sh-soft) 60%, var(--sh-bg)); --panel-3: var(--sh-soft);
  --line: var(--sh-line); --text: var(--sh-fg); --text-soft: color-mix(in srgb, var(--sh-fg) 85%, var(--sh-bg));
  --muted: color-mix(in srgb, var(--sh-fg) 65%, var(--sh-bg)); --accent: var(--sh-accent); --aura: var(--sh-accent);
  --msg: color-mix(in srgb, var(--sh-accent) 18%, var(--sh-bg)); --roll-bg: color-mix(in srgb, var(--sh-accent) 12%, var(--sh-bg)); --roll-text: var(--sh-accent);
  --hint-bg: color-mix(in srgb, var(--sh-bg) 88%, transparent); --hint-text: color-mix(in srgb, var(--sh-fg) 75%, var(--sh-bg));
  color-scheme: var(--sh-scheme, light); scrollbar-color: color-mix(in srgb, var(--sh-fg) 35%, var(--sh-bg)) transparent;
}
.temaScheda { background: var(--sh-bg); color: var(--sh-fg); font-family: var(--sh-font); border-color: var(--sh-line); }
:where(.temaScheda) :is(h3, h4) { color: var(--sh-accent); }
:where(.sheetWin, .temaScheda) .btn { background: var(--sh-accent); color: var(--sh-on, #fff); border: 1px solid var(--sh-accent); font-family: inherit; }
:where(.sheetWin, .temaScheda) .btn:hover { background: color-mix(in srgb, var(--sh-accent) 82%, var(--sh-fg)); }
:where(.sheetWin, .temaScheda) .btn.ghost { background: transparent; color: var(--sh-fg); border: 1px solid var(--sh-line); }
:where(.sheetWin, .temaScheda) .btn.ghost:hover { background: color-mix(in srgb, var(--sh-accent) 15%, transparent); border-color: var(--sh-accent); }
:where(.sheetWin, .temaScheda) :is(select, option) { background-color: var(--sh-bg); color: var(--sh-fg); }
:where(.sheetWin, .temaScheda) input:is([type=checkbox], [type=radio], [type=range]) { accent-color: var(--sh-accent); }
:where(.sheetWin, .temaScheda) .note { color: color-mix(in srgb, var(--sh-fg) 65%, var(--sh-bg)); }
.sheetWin.min { resize: none; height: auto !important; min-height: 0; }
.sheetWin.min .sbody { display: none; }
.sheetWin .stitle {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 10px; cursor: grab; user-select: none;
  background: var(--sh-accent); color: var(--sh-on, #fff);
}
.sheetWin .stitle:active { cursor: grabbing; }
.sheetWin .sicon { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .25); cursor: pointer; border: 2px solid rgba(255, 255, 255, .6); }
.sheetWin .sname { flex: 1; min-width: 0; padding: 3px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 1.1em; }
.sheetWin .sname:hover, .sheetWin .sname:focus { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); outline: 0; }
.sheetWin .sctl { display: flex; align-items: center; gap: 8px; }
.sheetWin .sctl button { border: 0; cursor: pointer; padding: 0; }
.sheetWin .sx { width: 24px; height: 24px; border-radius: 6px; background: rgba(255, 255, 255, .2); color: var(--sh-on, #fff); font-size: 14px; line-height: 1; }
.sheetWin .sx:hover { background: rgba(255, 255, 255, .4); }
.sheetWin .sdot { width: 16px; height: 16px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.sheetWin .sdot:hover { background: #ff3b30; }
.sheetWin .sbody { flex: 1; min-height: 0; overflow: auto; padding: 12px; }

.sheetWin .sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.sheetWin .box { border: 1px solid var(--sh-line); border-radius: 10px; background: color-mix(in srgb, var(--sh-soft) 55%, var(--sh-bg)); padding: 8px 10px; }
.sheetWin .box > h5 { margin: 0 0 6px; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-accent); }
.sheetWin .full { grid-column: 1 / -1; }
.sheetWin input[type=text], .sheetWin input[type=number], .sheetWin textarea {
  width: 100%; box-sizing: border-box; padding: 4px 6px; border: 0; border-bottom: 1px solid var(--sh-line); border-radius: 4px 4px 0 0;
  background: var(--sh-field, rgba(255, 255, 255, .35)); color: inherit; font: inherit;
}
.sheetWin input:focus, .sheetWin textarea:focus { outline: 2px solid color-mix(in srgb, var(--sh-accent) 55%, transparent); }
.sheetWin textarea { min-height: 84px; resize: vertical; }
.sheetWin .lab { display: flex; flex-direction: column; gap: 2px; font-size: .78em; color: color-mix(in srgb, var(--sh-fg) 70%, transparent); }
.sheetWin .sgrid > *, .sheetWin .box { min-width: 0; }   /* un campo largo non allarga la colonna oltre la finestra */
.sheetWin .hdr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 8px; }
.sheetWin .abil { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }   /* finestra stretta: le caratteristiche vanno a capo */
.sheetWin .ab { text-align: center; border: 1px solid var(--sh-line); border-radius: 10px; padding: 4px; min-width: 0; background: var(--sh-field, rgba(255, 255, 255, .3)); }
.sheetWin .ab b { display: block; font-size: .72em; letter-spacing: .05em; }
.sheetWin .ab input { text-align: center; font-size: 1.15em; font-weight: 700; }
.sheetWin .rl2 { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.sheetWin .rl2 > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheetWin .rl2 input[type=checkbox] { accent-color: var(--sh-accent); }
.sheetWin .rb, .sheetWin .chipRoll {
  border: 1px solid var(--sh-accent); border-radius: 999px; background: transparent; color: var(--sh-accent);
  padding: 1px 9px; min-width: 38px; font: inherit; font-weight: 700; cursor: pointer;
}
.sheetWin .rb:hover, .sheetWin .chipRoll:hover { background: var(--sh-accent); color: var(--sh-on, #fff); }
.sheetWin .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.sheetWin .chipRoll { font-size: .85em; font-weight: 600; }
.sheetWin .hp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sheetWin .atk { display: grid; grid-template-columns: 1.6fr .7fr 1fr; gap: 4px; align-items: center; margin-bottom: 4px; }
.sheetWin .atk .bt { display: flex; gap: 4px; grid-column: 1 / -1; }
.sheetWin .row2 { display: flex; gap: 8px; }
.sheetWin .row2 > * { flex: 1; min-width: 0; }
.sheetWin .stat { text-align: center; }
.sheetWin .stat output { display: block; font-size: 1.3em; font-weight: 700; }

#toolDrawer .slot > .tool.open { z-index: 100010 !important; }

/* ======================= Livelli: segnalini / nascosto / mappa ======================= */
/* ogni livello si può toccare solo quando è quello selezionato */
#viewport .photo { pointer-events: none; }
#viewport:not(.layer-map):not(.layer-hidden) .photo[data-layer="tokens"],
#viewport.layer-hidden .photo[data-layer="hidden"],
#viewport.layer-map .photo[data-layer="map"] { pointer-events: auto; }
#world .photo[data-layer="hidden"] { opacity: var(--hidden-op, .45); outline: 1px dashed rgba(255, 255, 255, .45); outline-offset: 1px; }
#viewport.hide-hidden:not(.layer-hidden) .photo[data-layer="hidden"] { visibility: hidden; }
#layerSwitch button[data-layer="hidden"].active { background: rgba(255, 159, 67, .55); box-shadow: 0 0 12px rgba(255, 159, 67, .8); }

/* forme, tratti e testi disegnati: oggetti come i segnalini, cliccabili solo sul disegno */
.photo.shape { background: none; box-shadow: none; border-radius: 0; cursor: pointer; }
.photo.shape svg { display: block; width: 100%; height: 100%; overflow: visible; }
#viewport .photo.shape, #viewport .photo.shape svg * { pointer-events: none; }
#viewport:not(.layer-map):not(.layer-hidden) .photo.shape[data-layer="tokens"] svg *,
#viewport.layer-hidden .photo.shape[data-layer="hidden"] svg *,
#viewport.layer-map .photo.shape[data-layer="map"] svg * { pointer-events: visiblePainted; }
#viewport .photo.shape .handle { pointer-events: auto; }
svg.drawSvg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
#viewport.pen-on, #viewport.pen-on * { cursor: crosshair !important; }
#viewport.pen-erase, #viewport.pen-erase * { cursor: cell !important; }
.textEdit {
  position: fixed; z-index: 400000; min-width: 120px; min-height: 1.4em; padding: 2px 4px; resize: none; overflow: hidden;
  border: 1px dashed #2f8cff; background: rgba(0, 0, 0, .35); color: #fff; font: 600 16px system-ui, sans-serif; line-height: 1.25; outline: 0;
}

/* pannello della penna: strumenti */
#penBox { --tw: 280px; }
#penTools { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
#penTools button { min-width: 0 !important; padding: 6px 0 !important; font-size: 15px !important; }
#penTools button.on { background: rgba(46, 230, 166, .4) !important; border-color: #2ee6a6 !important; }
.tool.glass label.trow { gap: 8px; }

/* ======================= Menu a sinistra: grande quanto il suo contenuto ======================= */
#toolDrawer { width: max-content; height: max-content; }
#toolDrawer .slot.ghost { opacity: .7; }

/* ======================= Pulsanti in basso contraibili ======================= */
#dock { transition: transform .3s cubic-bezier(.22, .8, .3, 1), opacity .3s; }
#dock.collapsed { transform: translate(-50%, calc(100% + 24px)); opacity: 0; pointer-events: none; }
#dockZone {
  position: fixed; left: 50%; bottom: 66px; z-index: 100003; width: 240px; height: 30px; transform: translateX(-50%);
  display: flex; justify-content: center; align-items: flex-end; transition: bottom .3s;
}
#dockZone.collapsed { bottom: 0; height: 34px; }
#dockHandle {
  width: 56px; height: 22px; padding: 0; display: grid; place-items: center; border-radius: 12px 12px 0 0; border: 1px solid rgba(255, 255, 255, .22);
  border-bottom: 0; background: rgba(18, 21, 28, .65); color: #fff; cursor: pointer; opacity: 0; transition: opacity .2s;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#dockZone:hover #dockHandle, #dockHandle:focus-visible { opacity: 1; }
#dockHandle svg { transition: transform .3s; }
#dockZone.collapsed #dockHandle svg { transform: rotate(180deg); }

/* ======================= Chat: schede, messaggi lunghi, regole, finestre ======================= */
#chatTabs { flex: none; }
#chatTabs button { position: relative; }
#chatTabs button.active { background: color-mix(in srgb, var(--aura, #7c5cff) 35%, var(--panel-3)); color: var(--text); }
#chatTabs button.dot::after { content: ""; position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; }
.msg { white-space: pre-wrap; }
.msg.rule { align-self: stretch; max-width: none; background: color-mix(in srgb, #ffd93d 12%, var(--panel-3)); border: 1px solid rgba(255, 217, 61, .45); border-radius: 12px; }
.msg.calc { border-left: 3px solid #4fc3a1; background: color-mix(in srgb, #4fc3a1 12%, var(--panel-3)); }
.msg.calc .cEspr { opacity: .85; }
.msg.calc .cRis { font-size: 1.1em; color: #4fc3a1; }
:root[data-theme="light"] .msg.calc .cRis { color: #1f7a5f; }
.msg.calc.calcErr .cRis { color: #ff7a7a; }
.msg.calc .cNota { font-size: .85em; opacity: .8; }
.msg.rule b { display: block; margin-bottom: 2px; font-size: 12px; color: #ffd93d; }
.msg.link { align-self: stretch; max-width: none; background: none; padding: 0; }
.msg.link button { width: 100%; text-align: left; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--aura, #7c5cff); background: color-mix(in srgb, var(--aura, #7c5cff) 18%, var(--panel-3)); color: var(--text); font: inherit; cursor: pointer; }
.chatForm { align-items: flex-end; }
#chatInput { resize: none; max-height: 120px; line-height: 1.35; }
.chatWin { width: 340px; height: 380px; }
.chatWin .sbody { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.chatWin .clog { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.chatWin .msg { background: color-mix(in srgb, var(--sh-accent) 22%, var(--sh-bg)); color: var(--sh-fg); }
.chatWin textarea { width: 100%; box-sizing: border-box; resize: none; padding: 6px 8px; border: 1px solid var(--sh-line); border-radius: 8px; background: var(--sh-field, rgba(255, 255, 255, .35)); color: inherit; font: inherit; }

/* ======================= Finestre: sbarra con pallino a sinistra o X a destra ======================= */
.sheetWin .sname { padding: 3px 4px; font-weight: 700; font-size: 1.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; }
.sheetWin .sname:hover { background: none; }
.sheetWin .sdotSlot, .sheetWin .sxSlot { display: flex; align-items: center; }
.sheetWin .nameBox { margin-bottom: 10px; }
.sheetWin .sendRule { float: right; border: 0; background: none; cursor: pointer; font-size: 1em; padding: 0 2px; }
.sheetWin.min { width: max-content; min-width: 0; resize: horizontal; }
.sheetWin.min .stitle { cursor: default; }
.sheetWin.icon { width: 54px !important; height: 54px !important; min-width: 0; min-height: 0; padding: 0; border-radius: 50%; resize: none; cursor: grab; }
.sheetWin.icon .stitle { height: 100%; padding: 0; background: transparent; cursor: grab; }
.sheetWin.icon .sicon { width: 100%; height: 100%; border: 0; }
.sheetWin.icon .sname, .sheetWin.icon .sdotSlot, .sheetWin.icon .sxSlot, .sheetWin.icon .sbody { display: none; }
.tool.sheetWin.dragging { box-shadow: 0 0 18px #ff6fa8; }

#chatTabs { display: flex; gap: 6px; }
#chatTabs[hidden] { display: none; }
#chatTabs button { flex: 1; padding: 7px 4px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }

/* ======================= Segnalini: nome, barra dei PF, forma e bordo ======================= */
.photo[data-name][data-nomevis]::after {
  content: attr(data-name); position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: calc(3px * var(--inv, 1));
  padding: 0 calc(6px * var(--inv, 1)); max-width: 240%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
  font: 600 calc(12px * var(--inv, 1)) system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, .6); border-radius: calc(8px * var(--inv, 1));
}
.photo[data-hp]::before {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: calc(-7px * var(--inv, 1)); height: calc(5px * var(--inv, 1)); pointer-events: none;
  border-radius: calc(3px * var(--inv, 1)); box-shadow: 0 0 0 calc(1px * var(--inv, 1)) rgba(0, 0, 0, .55);
  background: linear-gradient(to right, hsl(calc(var(--hpv, 100) * 1.2) 80% 45%) calc(var(--hpv, 100) * 1%), rgba(0, 0, 0, .65) 0);
}
.photo[data-hp][data-name][data-nomevis]::after { margin-top: calc(9px * var(--inv, 1)); }
.photo[data-round] img { border-radius: 50%; }
.photo[data-ring] img { box-shadow: 0 0 0 calc(3px * var(--inv, 1)) var(--ring, #fff); }

/* scheda ridotta a icona: quadrata col bordo del colore della scheda e il fumetto 📜, per non confonderla con un segnalino */
.sheetWin.icon { border-radius: 14px; overflow: visible; border: 3px solid var(--sh-accent); background: var(--sh-bg); box-shadow: 0 0 0 2px #fff, 0 6px 18px rgba(0, 0, 0, .5); }
.sheetWin.icon .sicon { border-radius: 10px; }
.sheetWin.icon::after {
  content: "📜"; position: absolute; right: -9px; bottom: -9px; width: 24px; height: 24px; display: grid; place-items: center;
  font-size: 13px; border-radius: 50%; background: var(--sh-accent); box-shadow: 0 0 0 2px #fff; pointer-events: none;
}

/* ======================= Strumento segnalini ======================= */
#tokBox { --tw: 290px; }
#tokBox button.on { background: rgba(46, 230, 166, .4) !important; border-color: #2ee6a6 !important; }
#tokBox select, #tokBox input[type=text] { min-width: 0; padding: 6px 8px; border-radius: 8px; font: inherit; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); color: #fff; }
#tokBox input[type=text] { flex: 1; }
#tkPrev { width: 52px; height: 52px; flex: none; cursor: grab; border-radius: 10px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
#tkPrev img { width: 46px; height: 46px; object-fit: cover; pointer-events: none; }
#tkSw { gap: 4px; }

/* ======================= Scheda Standard (3 pagine) ======================= */
.sheetWin .stabs { display: flex; gap: 6px; margin-bottom: 10px; }
.sheetWin .stabs button { flex: 1; padding: 5px 4px; border: 1px solid var(--sh-accent); border-radius: 8px; background: transparent; color: var(--sh-accent); font: inherit; font-weight: 700; cursor: pointer; }
.sheetWin .stabs button.on { background: var(--sh-accent); color: var(--sh-on, #fff); }
.sheetWin .spage[hidden] { display: none; }
.sheetWin .lf { display: grid; grid-template-columns: 1.5fr auto .55fr .55fr; gap: 4px; align-items: center; margin-bottom: 3px; }
.sheetWin .lf .rest { display: flex; gap: 2px; }
.sheetWin .am { display: grid; grid-template-columns: 1fr .5fr; gap: 4px; margin-bottom: 3px; }
.sheetWin .iv { display: grid; grid-template-columns: 1fr .4fr; gap: 4px; margin-bottom: 3px; }
.sheetWin .invgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; }
.sheetWin .coins { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.sheetWin .ds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: .85em; }
.sheetWin .ds small { flex-basis: 100%; text-align: center; opacity: .7; }
.sheetWin .box h5 small { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .7; }
.sheetWin input[type=checkbox] { accent-color: var(--sh-accent); }
.sheetWin .stat input[type=number] { width: 70px; text-align: center; }

/* ---------- Cartella delle schede nel menu di sinistra ---------- */
#folderTool.dropHot { outline: 2px dashed var(--accent); outline-offset: 3px; }
#folderTool .tbody { min-width: 230px; }
.parkGrid {
  --ps: 52px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ps), 1fr));
  gap: 7px; margin: 6px 0; max-height: 46vh; max-height: 46dvh; overflow: auto;
}
.parkGrid:empty { display: none; }
.parkChip {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
  background: var(--panel-3); color: var(--text); font: inherit; padding: 5px 3px;
}
.parkChip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel-3)); }
.parkChip img {
  width: var(--ps); height: var(--ps); border-radius: 50%; object-fit: cover;
  background: var(--panel-2); border: 1px solid var(--line);
}
.parkName {
  max-width: calc(var(--ps) + 12px); font-size: 10px; line-height: 1.2; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85;
}

/* ---------- Musica ---------- */
#musicBox .tbody { min-width: 250px; }
.mNow { font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; overflow-wrap: anywhere; }
.mSeekRow { display: flex; align-items: center; gap: 7px; font-size: 11px; font-variant-numeric: tabular-nums; }
.mSeekRow input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.mBtns { display: flex; gap: 6px; }
.mBtns button { flex: 1; font-size: 14px; padding: 5px 0; }
.mBtns button.on { background: var(--accent); color: #fff; border-color: transparent; }
/* la ripetizione si vede: spenta = grigia e barrata; accesa = colorata; 🔂 = solo questo brano */
#musicBox .mBtns #musicLoop { position: relative; }
#musicBox .mBtns #musicLoop.on { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
#musicBox .mBtns #musicLoop.off { opacity: .5; filter: grayscale(1); }
#musicBox .mBtns #musicLoop.off::after {
  content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px;
  background: currentColor; transform: rotate(-35deg); border-radius: 2px;
}
.mLoopTag { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; margin-left: 4px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap; vertical-align: 1px; }
.mLoopTag.acceso { background: color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); color: var(--text); }
.mLoopTag[hidden] { display: none; }
.scMusCambioRiga { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; font-size: 13px; }
.mPc { flex: 1; font-size: 12px; padding: 5px 7px; }
.mVol { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.mVol input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.mVol output { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.mMaster { border-top: 1px solid var(--line); margin-top: 7px; padding-top: 7px; }
.mMaster[hidden] { display: none; }
.mMaster input[type=text] { flex: 1; min-width: 0; }
.mList { display: flex; flex-direction: column; gap: 3px; max-height: 150px; overflow: auto; margin-top: 6px; }
.mItem { display: flex; gap: 4px; align-items: center; }
.mItem .mPick {
  flex: 1; min-width: 0; text-align: left; font-size: 11.5px; padding: 4px 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mItem.on .mPick { background: color-mix(in srgb, var(--accent) 28%, transparent); border-color: var(--accent); }
.mItem .mDel { width: 22px; padding: 0; }
/* Il lettore vive qui, sempre nello stesso posto del documento: spostarlo lo farebbe ricaricare. */
#musicPlayerHost {
  position: fixed; left: -9999px; top: 0; width: 260px; height: 150px;
  opacity: 0; pointer-events: none; z-index: 150; border-radius: 12px; overflow: hidden;
}
#musicPlayerHost.shown {
  opacity: 1; pointer-events: auto;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45); border: 1px solid var(--line);
}
#musicPlayerHost iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Nebbia di guerra ---------- */
#fogCanvas {
  position: absolute; pointer-events: none; z-index: 3;
  image-rendering: pixelated;
}
#fogCanvas[hidden] { display: none; }
#viewport.fog-on { cursor: cell; }
#fogBox .tbody { min-width: 230px; }
#fogModes button.on { background: var(--accent); color: #fff; border-color: transparent; }

/* ---------- Avviso del collegamento ---------- */
#netBar {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 200000;
  display: flex; align-items: center; gap: 9px; max-width: min(620px, 92vw);
  padding: 8px 12px; border-radius: 12px; font-size: 13px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .4);
}
#netBar[hidden] { display: none; }
#netBar .nbDot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
#netBar.live .nbDot { background: #2ee6a6; box-shadow: 0 0 0 3px rgba(46, 230, 166, .22); }
#netBar.warn { border-color: #ffb020; }
#netBar.warn .nbDot { background: #ffb020; }
#netBar.retry { border-color: #ffb020; }
#netBar.retry .nbDot { background: #ffb020; animation: nbPulse 1.1s ease-in-out infinite; }
@keyframes nbPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 176, 32, .55); } 50% { box-shadow: 0 0 0 5px rgba(255, 176, 32, 0); } }
@media (prefers-reduced-motion: reduce) { #netBar.retry .nbDot { animation: none; } }
#netBar .nbAct {
  flex: none; border: 1px solid var(--line); background: var(--panel-2, transparent); color: inherit;
  border-radius: 8px; padding: 3px 9px; font: inherit; font-size: 12px; cursor: pointer;
}
#netBar .nbAct:hover { border-color: var(--accent, #9b82ff); }
#netBar .nbAct[hidden] { display: none; }
#netBar .nbTxt { flex: 1; min-width: 0; }
#netBar .nbX { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; opacity: .6; }
#netBar .nbX:hover { opacity: 1; }

/* ---------- Che cosa sparisce a chi non ha il permesso ---------- */
.no-revealFog #fogBox, .no-revealFog #luceBox, .no-revealFog #toolDrawer .slot[data-tool="fog"], .no-revealFog #toolDrawer .slot[data-tool="luce"],
.no-revealFog #layerSwitch [data-layer="luce"],
.no-draw #penBox,
.no-controlMusic .mMaster,
.no-seeAllScenes #sceneWrap,
.no-editScene #layerSwitch [data-layer="map"],
.no-seeHiddenLayer #layerSwitch [data-layer="hidden"],
.no-uploadAssets label[for="upload"],
.no-uploadAssets #newFolder { display: none !important; }
.net-player .sect[data-sect="grid"],
.net-player .sect[data-sect="gridDefault"],
.net-player .sect[data-sect="map"],
.net-player .sect[data-sect="border"],
.net-player .sect[data-sect="hidden"],
.net-player .sect[data-sect="res"] { display: none; }
.net-player #publicBadge { display: none; }

/* ---------- Chi parla, in chat ---------- */
.msg .who {
  display: inline-block; margin-right: 7px; font-weight: 700; font-size: .92em;
  color: hsl(var(--wh, 260) 70% 72%);
}
:root[data-theme="light"] .msg .who { color: hsl(var(--wh, 260) 60% 38%); }
.msg.roll .who { display: block; margin: 0 0 2px; font-size: .78em; opacity: .85; }
.msg.rule .who { display: block; margin: 0 0 3px; font-size: .78em; opacity: .85; }

/* ---------- Finestra del nome ---------- */
#nameDialog {
  width: min(400px, 92vw); padding: 20px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
#nameDialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
#nameDialog h3 { margin: 0 0 8px; font-size: 18px; }
#nameDialog .note { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.45; }
#nameDialog .field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; margin-bottom: 16px; }
#nameDialog input {
  font: inherit; padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel-2); color: inherit;
}
#nameDialog input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }

/* anteprima della figura che stai per scoprire o coprire */
#fogDraw {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 90;
}
#fogDraw:empty { display: none; }
#fogShapes button.on { background: var(--accent); color: #fff; border-color: transparent; }
#fogSizeRow[hidden] { display: none; }

/* ======================= Scheda Open 5e ======================= */
.sheetWin .oInsp { display: flex; justify-content: center; gap: 4px; padding-top: 4px; }
.sheetWin .oHint { margin: 8px 0 0; font-size: .82em; opacity: .75; }
.sheetWin .oImg { height: 170px; margin-bottom: 6px; }
.sheetWin .oImg.oImgSm { height: 110px; margin-top: 6px; }
.sheetWin .oImg > span { font-size: .75em; }
.sheetWin .oSlot { display: flex; gap: 8px; margin-bottom: 6px; max-width: 320px; }
.sheetWin .oSlot > * { flex: 1; }
.sheetWin .oConta { opacity: .7; font-weight: 400; }
/* un incantesimo: titolo su una riga, la descrizione si apre sotto */
.sheetWin .oSp { border-bottom: 1px dashed color-mix(in srgb, var(--sh-line) 70%, transparent); padding: 3px 0; }
.sheetWin .oSpHead { display: flex; align-items: center; gap: 4px; }
.sheetWin .oSpHead input[type=text] { flex: 1; min-width: 0; font-weight: 600; }
.sheetWin .oSpHead button { flex: none; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: none; color: inherit; cursor: pointer; font-size: .95em; }
.sheetWin .oSpHead button:hover { border-color: var(--sh-accent); }
.sheetWin .oSpHead .oTog { color: var(--sh-accent); font-weight: 700; }
.sheetWin .oSpHead .oTog.has { background: color-mix(in srgb, var(--sh-accent) 22%, transparent); }
.sheetWin .oSpHead .oDel { opacity: .45; }
.sheetWin .oSpHead .oDel:hover { opacity: 1; color: #e5484d; border-color: #e5484d; }
.sheetWin .oSpBody { padding: 4px 0 6px 34px; }
.sheetWin .oSpBody textarea { min-height: 90px; resize: vertical; overflow-y: auto; }
.sheetWin .oAdd { margin-top: 6px; border: 1px dashed var(--sh-accent); border-radius: 8px; background: transparent; color: var(--sh-accent); padding: 5px 10px; font: inherit; font-weight: 600; cursor: pointer; }
.sheetWin .oAdd:hover { background: color-mix(in srgb, var(--sh-accent) 15%, transparent); }
.ui-touch .sheetWin .oSpHead button { width: 36px; height: 36px; }
.ui-tel .sheetWin .oSpBody { padding-left: 0; }
/* le linguette restano in alto mentre si scorre, con i colori della scheda */
.sheetWin:not(.stdWin) .stabs { margin: -12px -12px 10px; padding: 8px 12px; background: var(--sh-bg); border-bottom: 1px solid var(--sh-line); }
.ui-tel .sheetWin:not(.stdWin) .stabs { display: grid; grid-template-columns: 1fr 1fr; margin: -10px -10px 10px; }

/* ======================= Impostazioni: nebbia di guerra (solo chi conduce) ======================= */
body.net-player #fogSect { display: none; }
#fogColorIn { width: 42px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
#fogColorIn.spento { opacity: .35; }
#fogVeilIn { flex: 1; }
#fogVeilOut { min-width: 3em; text-align: right; }

/* ======================= Schede sincronizzate con un file ======================= */
.sheetWin.sincro .sname::after { content: " 🔗"; font-size: .8em; }
.sheetWin.sincroFerma .sname::after { content: " ⛓"; font-size: .8em; opacity: .6; }
#importSheetDialog { max-width: 460px; }
#importSheetDialog .check { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; }
#importSheetDialog .note { font-size: .88em; opacity: .75; }
#importSheetDialog .err { color: #e5484d; }
.sheetWin .oInfo { margin-left: 6px; padding: 0; border: 0; background: none; color: inherit; font: italic 400 .95em system-ui, sans-serif; text-transform: none; letter-spacing: 0; text-decoration: underline dotted; cursor: help; opacity: .8; }

/* ======================= Effetti sui segnalini e caselle (token-fx.js) ======================= */
.photo > .tfx {
  position: absolute; top: calc(-7px * var(--inv, 1)); right: calc(-7px * var(--inv, 1)); display: flex; flex-wrap: nowrap; justify-content: flex-end;
  align-items: center; gap: calc(2px * var(--inv, 1)); pointer-events: auto; z-index: 2;
}
.tfxD { display: inline-block; width: 14px; height: 14px; background: var(--c); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .7); flex: none; }
.photo > .tfx .tfxD { width: calc(13px * var(--inv, 1)); height: calc(13px * var(--inv, 1)); box-shadow: 0 0 0 calc(1.5px * var(--inv, 1)) rgba(0, 0, 0, .75); }
.tfxD.cerchio { border-radius: 50%; }
.tfxD.quadrato { border-radius: 2px; }
.tfxD.rombo { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: none; }
.tfxD.triangolo { clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; }
.tfxD.esagono { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); box-shadow: none; }
.tfxD.stella { clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%); box-shadow: none; }
.tfxPiu { font: 700 calc(10px * var(--inv, 1)) / calc(13px * var(--inv, 1)) system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, .75);
  padding: 0 calc(3px * var(--inv, 1)); border-radius: calc(6px * var(--inv, 1)); }
.photo > .tcross { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.photo > .tcross::before, .photo > .tcross::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 125%; height: calc(5px * var(--inv, 1)); max-height: 14%;
  background: #ff2a2a; border-radius: 99px; box-shadow: 0 0 0 calc(1px * var(--inv, 1)) rgba(0, 0, 0, .6);
}
.photo > .tcross::before { transform: translate(-50%, -50%) rotate(45deg); }
.photo > .tcross::after { transform: translate(-50%, -50%) rotate(-45deg); }

#tokHud {
  position: fixed; left: 0; top: 0; z-index: 100030; display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 6px; border-radius: 14px; background: rgba(18, 21, 28, .88); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 26px rgba(0, 0, 0, .45); color: #fff;
}
#tokHud[hidden] { display: none; }
.thCaselle { display: flex; gap: 6px; }
.thCas { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.thLab { font: 600 10px system-ui, sans-serif; color: #c9d1e0; max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 12px; }
.thCas input {
  width: 62px; height: 34px; box-sizing: border-box; text-align: center; font: 700 16px system-ui, sans-serif; color: #fff;
  border-radius: 9px; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 28%, rgba(0, 0, 0, .5)); padding: 0 4px;
}
.thCas.g { --c: #2ee66b; } .thCas.r { --c: #ff4d4d; } .thCas.b { --c: #3d7bff; }
.thCas input:focus { outline: 2px solid #fff; outline-offset: 1px; }
.thCas input.no { animation: thNo .3s 2; }
@keyframes thNo { 50% { transform: translateX(4px); } }
.thFx { display: flex; gap: 4px; }
.thFx button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); opacity: .55; }
.thFx button[aria-pressed=true] { opacity: 1; background: rgba(255, 255, 255, .2); border-color: #fff; }
.thFx button:hover { opacity: 1; }
.thX { color: #ff3b3b; font: 800 16px system-ui, sans-serif; }
.ui-touch .thFx button { width: 44px; height: 44px; }
.ui-touch .thCas input { width: 70px; height: 44px; }
.cDot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; }
.cDot.g { background: #2ee66b; } .cDot.r { background: #ff4d4d; } .cDot.b { background: #3d7bff; }
body.net-player #caselleSect { display: none; }

/* ======================= Ordine dei turni (turni.js) ======================= */
#turniBox { --tw: 260px; }
.turniTesta b { font-size: 14px; }
.turniTesta label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.turniLista { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; margin: 4px 0; }
#turniTab { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: 13px; }
#turniTab td { padding: 4px 6px; background: rgba(255, 255, 255, .06); }
#turniTab td:first-child { border-radius: 8px 0 0 8px; }
#turniTab td:last-child { border-radius: 0 8px 8px 0; }
#turniTab tr.ora td { background: rgba(255, 210, 63, .28); box-shadow: inset 0 1px 0 rgba(255, 210, 63, .7), inset 0 -1px 0 rgba(255, 210, 63, .7); }
#turniTab tr.ora td:first-child { box-shadow: inset 3px 0 0 #ffd23f, inset 0 1px 0 rgba(255, 210, 63, .7), inset 0 -1px 0 rgba(255, 210, 63, .7); font-weight: 700; }
#turniTab tr:hover td { background: rgba(255, 255, 255, .12); }
.tnNome { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.tnIni { text-align: center; font-variant-numeric: tabular-nums; }
.tnIni input { width: 44px; text-align: center; font: inherit; font-weight: 700; color: inherit; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .2); border-radius: 6px; padding: 2px; }
.tnX button { border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; padding: 2px 4px; }
.tnX button:hover { opacity: 1; color: #ff6b6b; }
#turniBox.daGiocatore .soloMaster { display: none !important; }
#turniBox .primo { flex: 1; }
.ui-touch .tnIni input { width: 52px; min-height: 40px; font-size: 16px; }
.ui-touch .tnX button { min-width: 40px; min-height: 40px; }
/* il segnalino della riga sotto il cursore (o toccata): cerchio giallo */
.photo.turnoEvid::after { outline: none; }
.photo.turnoEvid { outline: calc(4px * var(--inv, 1)) solid #ffd23f; outline-offset: calc(4px * var(--inv, 1)); border-radius: 50%; }
/* pannelli degli strumenti: se il contenuto non ci sta, si scorre (non si taglia) */
.tool.glass.open .tbody { max-height: var(--dh, 240px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* l'icona dello strumento sempre al centro del suo cerchio, qualunque sia lo stato del pannello */
.tool.glass > .tgrip { width: 52px !important; height: 52px !important; display: flex; align-items: center; justify-content: center; }
.tool.glass > .tgrip > svg { display: block; flex: none; margin: 0; }
/* [[1d20+5]] nei messaggi della chat */
.msg .chipRoll { margin: 0 2px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--accent, #7c5cff); background: color-mix(in srgb, var(--accent, #7c5cff) 22%, transparent); color: inherit; font: inherit; font-size: .92em; font-weight: 600; cursor: pointer; }
.msg .chipRoll:hover { background: var(--accent, #7c5cff); color: #fff; }

/* ======================= Note (note.js) ======================= */
#noteBox { --tw: min(380px, calc(100vw - 110px)); }
.noteTabs { gap: 0 !important; }
.noteTabs button { flex: 1; padding: 6px 4px; border-radius: 0; }
.noteTabs button:first-child { border-radius: 10px 0 0 10px; }
.noteTabs button:last-child { border-radius: 0 10px 10px 0; }
.noteTabs button.active { background: rgba(124, 92, 255, .5); border-color: #a58bff; }
#noteBox.open { background: rgba(18, 21, 28, .92); }
#noteTesto { width: 100%; min-height: 180px; max-height: 50vh; resize: vertical; box-sizing: border-box; margin: 6px 0 2px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; padding: 8px 10px; background: rgba(0, 0, 0, .3); color: inherit; font: inherit; font-size: 14px; line-height: 1.4; }
#noteTesto[readonly] { opacity: .85; }
.noteEdit { font-size: 13px; gap: 6px; }
.noteEdit[hidden] { display: none !important; }

/* ======================= Miniature delle scene (scene-mini.js) ======================= */
.sceneRow > button.pick { align-items: center; }
.sceneMini { flex: none; width: 60px; height: 40px; border-radius: 6px; object-fit: cover; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.sceneRow .scIcona { display: none; }
#sceneMenu { min-width: 290px; }
#sceneGridOpen { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
#sceneGridOpen:hover { background: var(--panel-3); }
#sceneGridOpen[hidden] { display: none; }
#scenePreview { position: fixed; left: 0; top: 0; z-index: 100010; width: 300px; padding: 8px; border-radius: 14px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); color: var(--text); }
#scenePreview[hidden] { display: none; }
#scenePreview img { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: 8px; object-fit: cover; background: rgba(255, 255, 255, .06); }
#scenePreview .spInfo { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px 2px; }
#scenePreview .spInfo span { font-size: 12px; color: var(--muted); }
#publicBadge { white-space: nowrap; }
#pubMostra { display: flex; align-items: center; height: 44px; white-space: nowrap; padding: 0 14px; border-radius: 22px; cursor: pointer; font: inherit; font-size: 13px; color: #1b1500;
  background: #ffd93d; border: 0; box-shadow: 0 0 14px rgba(255, 217, 61, .45); }
#pubMostra[hidden] { display: none; }
#sceneGridDlg { width: min(860px, 94vw); max-height: 86vh; max-height: 86dvh; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
#sceneGridDlg[open] { display: flex; flex-direction: column; }
#sceneGridDlg::backdrop { background: rgba(0, 0, 0, .55); }
.sgHead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sgHead h3 { margin: 0; }
.sgHead .sgHint { flex: 1; font-size: 13px; color: var(--muted); }
#sceneGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; overflow-y: auto; min-height: 0; padding: 2px; }
.scCard { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.scCard:hover { border-color: var(--accent); }
.scCard.attiva { box-shadow: inset 0 0 0 2px var(--accent); }
.scCard.pubblica { border-color: #2ee6a6; }
.scCard .sceneMini { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.scCard b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scCard small { font-size: 12px; color: var(--muted); }
.scCard .scAz { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; }
.scCard .scAz button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: rgba(18, 21, 28, .8); color: #fff; cursor: pointer; }
.scCard.trascino { z-index: 2; opacity: .85; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); transition: none; }
.scCard.qui { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* ======================= Sistema di gioco (sistema.js) ======================= */
#sistemaDlg { width: min(760px, 94vw); max-height: 88vh; max-height: 88dvh; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
#sistemaDlg[open] { display: flex; flex-direction: column; }
#sistemaDlg::backdrop { background: rgba(0, 0, 0, .55); }
#sistemaDlg h3 { margin: 0 0 10px; }
#sistemaDlg h4 { margin: 14px 0 6px; font-size: 14px; }
#sistemaDlg .sisEd { overflow-y: auto; min-height: 0; padding-right: 4px; }
#sistemaDlg input, #sistemaDlg select, #sistemaDlg textarea { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); min-width: 0; }
#sistemaDlg .sisGriglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
#sistemaDlg .sisGriglia label, #sistemaDlg .sisArea { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
#sistemaDlg .sisArea { margin-top: 8px; }
#sistemaDlg .sisLista { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
#sistemaDlg .sisR { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#sistemaDlg .sisR .cId { width: 80px; } #sistemaDlg .sisR .cSig { width: 64px; } #sistemaDlg .sisR .cNome, #sistemaDlg .sisR .aNome { flex: 1; }
#sistemaDlg .sisRF .fNome { width: 140px; } #sistemaDlg .sisRF .fUsa { width: 170px; } #sistemaDlg .sisRF .fTesto { flex: 1; min-width: 200px; font-family: ui-monospace, Menlo, monospace; }
#sistemaDlg .sisRF.no .fTesto { border-color: #ff6b6b; }
#sistemaDlg .sisRF .fErr { flex-basis: 100%; color: #ff8a8a; font-size: 11px; }
#sistemaDlg .sisR .x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
#sistemaDlg .sisSchede { display: flex; flex-direction: column; gap: 4px; }
#sistemaDlg .err { color: #ff8a8a; min-height: 1em; margin: 8px 0 0; font-size: 13px; }

/* ======================= Compendio (compendio.js) ======================= */
#tab-comp { gap: 8px; min-height: 0; overflow: hidden; }
.compCerca { display: flex; gap: 6px; }
.compCerca input { flex: 1; min-width: 0; }
.compCerca input, .compCerca select, .compFiltri select { font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
.compFiltri { display: flex; flex-wrap: wrap; gap: 6px; }
.compFiltri select { flex: 1 1 120px; min-width: 0; }
.compOrdine { display: flex; gap: 4px; flex: 1 1 100%; min-width: 0; }
.compOrdine select { flex: 1 1 auto; }
.compVerso { flex: none; padding: 4px 10px; font-size: 15px; }
.compAzioni { flex-wrap: wrap; gap: 6px; }
.compAzioni .btn { padding: 6px 9px; font-size: 13px; }
.compAzioni .btn[hidden] { display: none; }
#compStato[hidden] { display: none; }
#compLista { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; }
.compVoce { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.compVoce:hover, .compVoce:focus-visible { border-color: #3db8ff; outline: none; }
.compVoce b { font-size: 14px; }
.compVoce small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compVoce.nascosta { opacity: .65; border-style: dashed; }
.compVoce .compNasc { position: absolute; right: 8px; top: 7px; font-size: 12px; }
.vocWin .sbody { padding: 0; display: flex; flex-direction: column; }
.vocWin .cvBarra { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--sh-line, var(--line)); }
.vocWin .cvBarra .btn { padding: 5px 9px; font-size: 12.5px; }
.vocWin .cvCorpo { padding: 10px 16px 18px; overflow-y: auto; font-size: 14px; line-height: 1.45; }
.vocWin .cvCorpo p { margin: 0 0 8px; }
.vocWin .cvCorpo h4 { margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--sh-line, var(--line)); font-size: 15px; color: var(--sh-accent, #3db8ff); }
.vocWin .cvCorpo h5 { margin: 10px 0 4px; font-size: 14px; }
.vocWin .cvTesta small { color: color-mix(in srgb, var(--sh-fg, var(--text)) 60%, transparent); }
.vocWin .cvSott { font-style: italic; }
.vocWin .cvGriglia { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 8px 0; }
.vocWin .cvR { display: contents; }
.vocWin .cvR span { color: color-mix(in srgb, var(--sh-fg, var(--text)) 65%, transparent); }
.vocWin .cvCar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 8px 0; }
.vocWin .cvCarB { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 8px; border: 1px solid var(--sh-line, var(--line)); background: none; color: inherit; font: inherit; cursor: pointer; }
.vocWin .cvCarB small { font-size: 10px; } .vocWin .cvCarB span { font-size: 12px; }
.vocWin .cvAz { margin-bottom: 6px; }
.vocWin .cvTiri { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: -2px 0 8px; }
.vocWin .cvCd { font-size: 12px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--sh-line, var(--line)); }
.vocWin .cvPriv { margin: 4px 0; border: 1px solid var(--sh-line, var(--line)); border-radius: 8px; padding: 4px 10px; }
.vocWin .cvPriv summary { cursor: pointer; font-weight: 600; }
.vocWin .cvLic { margin-top: 16px; font-size: 11px; color: color-mix(in srgb, var(--sh-fg, var(--text)) 55%, transparent); }
.compTab { border-collapse: collapse; margin: 6px 0 10px; font-size: 12.5px; width: 100%; }
.compTab td, .compTab th { border: 1px solid var(--sh-line, var(--line)); padding: 3px 6px; text-align: left; vertical-align: top; }
.chipVoce { border: 1px solid #3db8ff; background: color-mix(in srgb, #3db8ff 15%, transparent); color: inherit; border-radius: 8px; padding: 1px 7px; font: inherit; font-size: .95em; cursor: pointer; }
#compSugg { position: fixed; z-index: 100012; display: flex; flex-direction: column; padding: 4px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
#compSugg[hidden] { display: none; }
#compSugg button { text-align: left; border: 0; background: none; color: var(--text); padding: 6px 8px; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; }
#compSugg button:hover { background: var(--panel-3); }
#compSugg small { color: var(--muted); }
.compDlg { width: min(640px, 94vw); max-height: 86vh; max-height: 86dvh; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); overflow-y: auto; }
.compDlg::backdrop { background: rgba(0, 0, 0, .55); }
.compDlg h3 { margin: 0 0 10px; }
.compDlg label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.compDlg label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text); margin-top: 10px; }
.compDlg input:not([type=checkbox]), .compDlg select, .compDlg textarea { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
.compEdG, .compEdCampi { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.compEdCampi { grid-column: 1 / -1; }
.compEdTesto { margin-top: 10px; }
.compEdTesto textarea { min-height: 180px; resize: vertical; }
.compScelte { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.compPL { display: flex; flex-direction: column; gap: 8px; }
.compP { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.compP small { color: var(--muted); }
.compP .compLic { display: block; font-size: 11px; max-height: 3.2em; overflow: hidden; }
.compPB { display: flex; gap: 4px; flex: none; }
.compPB .btn { padding: 4px 8px; font-size: 12px; }
.compO5Lista { display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow-y: auto; margin: 8px 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; }
.compO5Lista label.check { margin: 0; font-size: 13px; }
.compDlg .err { color: #ff8a8a; font-size: 13px; min-height: 1em; margin: 4px 0; }

/* ======================= Tiri della scheda (tiri-scheda.js) ======================= */
.tiroBar { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 10px; position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--sh-bg, var(--panel)) 92%, transparent); border-bottom: 1px solid var(--sh-line, var(--line)); }
/* con le linguette delle pagine (Scheda, Equipaggiamento…) resta ferma in alto solo la fila delle linguette:
   prima stavano ferme tutte e due nello stesso punto e una copriva l'altra */
.sheetWin:has(.stabs) .tiroBar { position: static; }
.tiroSeg { display: flex; border: 1px solid var(--sh-line, var(--line)); border-radius: 9px; overflow: hidden; }
.tiroSeg button { border: 0; background: none; color: var(--sh-fg, var(--text)); font: inherit; font-size: 12.5px; padding: 5px 10px; cursor: pointer; }
.tiroSeg button + button { border-left: 1px solid var(--sh-line, var(--line)); }
.tiroSeg button.on { background: var(--sh-accent, #7c5cff); color: var(--sh-on, #fff); }
.tiroSeg button.on.adv { background: #2e9e6b; color: #fff; }
.tiroSeg button.on.dis { background: #c94a4a; color: #fff; }
.ui-touch .tiroSeg button { padding: 9px 12px; }
.msg.roll.doppio .rDue { font-size: 22px; font-weight: 700; }
.msg.roll.doppio .rDue b.max { color: #2ee6a6; } .msg.roll.doppio .rDue b.min { color: #ff6b6b; }

/* ======================= Creazione guidata (creazione.js) ======================= */
.creaDlg { width: min(760px, 95vw); }
.creaPassi { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.creaPassi button { border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); border-radius: 8px; padding: 4px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.creaPassi button.on { background: var(--accent); color: #fff; border-color: transparent; }
.creaCorpo { display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.creaRiga { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.creaInfo { font-size: 13px; color: var(--text-soft, var(--text)); max-height: 220px; overflow-y: auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.creaInfo p { margin: 0 0 6px; }
.creaAb, .creaInc { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 10px; }
.creaInc { max-height: 46vh; overflow-y: auto; }
.creaInc label[hidden] { display: none !important; }
.creaCar input, .creaCar select { width: 70px; }
.creaRiep .cvGriglia { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; }
.creaRiep .cvR { display: contents; } .creaRiep .cvR span { color: var(--muted); }
.tiroBar .livSu { margin-left: auto; padding: 4px 10px; font-size: 12.5px; }

/* Impostazioni → Ordine degli strumenti */
.ordStr { list-style: none; margin: 6px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ordStr li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; background: rgba(127, 127, 127, .12); cursor: grab; user-select: none; }
.ordStr li.preso { opacity: .5; }
.ordStr .ordIc { width: 22px; height: 22px; flex: none; display: grid; place-items: center; }
.ordStr .ordIc svg { width: 20px; height: 20px; }
.ordStr .ordNome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ordStr button { width: 30px; height: 28px; padding: 0; border-radius: 6px; border: 1px solid rgba(127, 127, 127, .35); background: transparent; color: inherit; font-size: 15px; cursor: pointer; }
.ordStr button:disabled { opacity: .3; cursor: default; }

/* ---------- Illuminazione dinamica (luce.js) ---------- */
#luceCanvas { position: absolute; pointer-events: none; z-index: 2147483000; }
#luceTinta { position: absolute; pointer-events: none; z-index: 2; mix-blend-mode: soft-light; opacity: .85; }
html.mappaSuTela #luceTinta { visibility: hidden; }   /* sui dispositivi touch la disegna il canvas della mappa (tintaSuTela) */
#luceCanvas[hidden], #luceTinta[hidden], #luceSegni[hidden] { display: none; }
#luceSegni { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 2147483001; }
#luceSegni .lMuro { stroke: #ff5d8f; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
#luceSegni .lPunto { fill: #fff; stroke: #ff5d8f; }
#luceSegni .lAnteprima { stroke: #ff5d8f; stroke-linecap: round; opacity: .8; }
#luceSegni .lAnteprima.porta, #luceSegni .lPortaL { stroke: #ffb000; stroke-linecap: round; }
#luceSegni .lPortaL.aperta { stroke: #2ee6a6; opacity: .8; }
#luceSegni .lAlone { fill: none; stroke: var(--c, #ffd27a); stroke-dasharray: 6 6; opacity: .55; }
#luceSegni .lAlone.forte { stroke-dasharray: none; opacity: .8; }
#luceSegni .lFonte { fill: var(--c, #ffd27a); stroke: #000; }
#luceSegni .lPorta { pointer-events: auto; cursor: pointer; }
#luceSegni .lPorta circle { fill: rgba(18, 21, 28, .85); stroke: #ffb000; stroke-width: 2; }
#luceSegni .lPorta circle.aperta { stroke: #2ee6a6; }
#luceSegni .lPorta text { fill: #fff; font: 600 14px system-ui, sans-serif; pointer-events: none; }
#luceSegni:not(.modifica) .lPortaL { opacity: .55; }
/* passaggi (scale fra due piani): due tratti collegati, col numero in mezzo */
#luceSegni .lPassaggio, #luceSegni .lAnteprima.passaggio { stroke: #b07cff; stroke-linecap: round; }
#luceSegni .lPassoNum { pointer-events: auto; cursor: pointer; }
#luceSegni .lPassoNum circle { fill: rgba(18, 21, 28, .85); stroke: #b07cff; stroke-width: 2; }
#luceSegni .lPassoNum text { fill: #fff; font: 600 12px system-ui, sans-serif; pointer-events: none; }
#viewport.layer-luce { cursor: crosshair; }
#viewport.layer-luce .photo { pointer-events: none; opacity: .75; }
#layerSwitch button[data-layer="luce"].active { background: rgba(255, 176, 0, .55); box-shadow: 0 0 12px rgba(255, 176, 0, .8); }
#luceBox { --tw: 300px; }
#luceBox .lRiga { justify-content: space-between; }
.lSeg { display: inline-flex; gap: 2px; flex-wrap: wrap; }
#luceBox .tbody button.on, #fogZone button.on { background: rgba(255, 176, 0, .55); box-shadow: 0 0 8px rgba(255, 176, 0, .6); }
#luceBox input[type=number] { width: 64px; }
#luceBox [hidden] { display: none !important; }

/* danni di più tipi in un tiro solo: il totale di ciascuno */
.msg.roll .rParti { display: block; margin-top: 3px; font-size: 14px; color: var(--text); }
.msg.roll .rParti b { font-size: 17px; }
/* le tre caselle sopra il segnalino si possono nascondere (l'interruttore sta in fondo alla riga degli effetti) */
#tokHud.senzaCaselle .thCaselle { display: none; }
.thTre { display: flex; gap: 2px; }
.thTre i { width: 6px; height: 12px; border-radius: 2px; }
.thTre i.g { background: #2ee66b; } .thTre i.r { background: #ff4d4d; } .thTre i.b { background: #3d7bff; }
.thFx .thCasBtn { margin-left: 4px; }
/* «Critico da» nella barra in cima alla scheda */
.tiroBar .tiroCrit { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--sh-fg, var(--text)); opacity: .85; white-space: nowrap; }
.tiroBar .tiroCrit select { font: inherit; font-size: 12.5px; padding: 2px 4px; border-radius: 7px; border: 1px solid var(--sh-line, var(--line)); background: transparent; color: inherit; }
/* chi non può caricare negli assets della partita non vede il pannello Assets (l'icona del suo personaggio la sceglie dalla scheda) */
.no-uploadAssets .tab[data-tab="assets"] { display: none; }
/* i pulsanti dei danni nel messaggio del tiro per colpire */
.msg.roll .rDanni { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.msg.roll .rDanni button { font: inherit; font-size: 12.5px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; }
.msg.roll .rDanni button.crit { border-color: #2ee6a6; color: #2ee6a6; font-weight: 700; }
.msg.roll .rDanni button:hover { background: var(--panel-3); }
.ui-touch .msg.roll .rDanni button { min-height: 40px; }
/* ordine dei turni acceso: un puntino sull'icona (si vede anche a pannello chiuso) */
#turniBox.toolOn > .tgrip::after { content: ''; position: absolute; right: 7px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: #2ee6a6; box-shadow: 0 0 6px #2ee6a6; }
/* scurovisione nella scheda */
.scuroLab .scuroNota { display: block; min-height: 1em; font-size: 11px; opacity: .75; font-weight: 400; }
input.nonCapito { outline: 2px solid #ff6b6b; outline-offset: 0; }
#scuroAnte { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 2147483002; }
/* movimento: dove non arrivi il segnalino si tinge di rosso; rifiutato, torna indietro piano */
.photo.nonArrivi { filter: drop-shadow(0 0 6px #ff3b3b) sepia(1) saturate(6) hue-rotate(-50deg); }
.photo.torna { transition: left .35s ease, top .35s ease; }
#percorsoNota { position: fixed; left: 0; top: 0; z-index: 100040; pointer-events: none; padding: 3px 8px; border-radius: 8px; font: 600 12px system-ui, sans-serif; color: #fff; background: rgba(200, 40, 40, .9); white-space: nowrap; }
#percorsoNota[hidden] { display: none; }
.tiroBar .scattaBtn { padding: 4px 10px; font-size: 12.5px; border-radius: 8px; border: 1px solid var(--sh-line, var(--line)); background: transparent; color: inherit; cursor: pointer; }
body:not(.net-on) .soloRete { display: none !important; }
/* ---------- Pannello «Visibilità» (nebbia + luci) ---------- */
#luceBox { --tw: 340px; }
#luceBox .visTesta { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
#luceBox .lSeg { display: flex; flex-wrap: wrap; gap: 4px; }
#luceBox .visModi button, #luceBox .visAmb button { flex: 1 1 auto; }
#luceBox .visCheck { list-style: none; margin: 0; padding: 0; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
#luceBox .visCheck li.ok { color: #7ff0c0; } #luceBox .visCheck li.no { color: #ffb0b0; cursor: pointer; text-decoration: underline dotted; } #luceBox .visCheck li.info { color: #c3cad8; }
#luceBox .visPrimi { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 176, 0, .12); border: 1px solid rgba(255, 176, 0, .4); }
#luceBox .visPrimi button { text-align: left; }
#luceBox .visTab { display: flex; gap: 2px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
#luceBox .visTab button { flex: 1 1 auto; border-radius: 8px 8px 0 0; font-size: 12px; padding: 6px 4px; background: transparent; }
#luceBox .visTab button.on { background: rgba(255, 176, 0, .35); }
#luceBox .visPane { display: flex; flex-direction: column; gap: 8px; }
#luceBox .visPane[hidden] { display: none !important; }
#luceBox .visParty { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
#luceBox .visParty small { opacity: .7; }
#luceSegni .lStanza { fill: rgba(255, 93, 143, .08); stroke: #ff5d8f; }

/* Un messaggio scritto da scollegati: aspetta in coda, in grigio, finché non torna dal server */
.msg.inAttesa { opacity: .55; }
.msg.inAttesa::after { content: ' ⏳'; }

/* Impostazioni → Sessione: il collegamento di ciascun giocatore, per chi conduce */
.netGiocatori { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; }
.netGiocatori li { display: flex; align-items: center; gap: 8px; font-size: .9em; }
.netGiocatori .qRit { opacity: .65; margin-left: auto; font-variant-numeric: tabular-nums; }
.qDot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #2ee6a6; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent); }
.qDot.q-giallo { background: #f5c542; }
.qDot.q-rosso { background: #ff5c5c; }

/* Un tiro fatto da scollegati (dadi provvisori): il server ha solo controllato che i dadi tornino */
.msg.roll .provv { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; letter-spacing: .02em;
  background: rgba(255, 107, 107, .14); color: #ff9a9a; border: 1px dashed rgba(255, 107, 107, .6); }
#rulerSvg text.pezzo { font-size: 11px; font-weight: 500; opacity: .9; }
/* righello sul tocco: «+» fissa il segmento (al posto del tasto destro) */
#rulerPlus { position: fixed; right: 18px; bottom: 110px; z-index: 30; width: 56px; height: 56px; border-radius: 50%;
  font: 700 30px/1 system-ui, sans-serif; color: inherit; display: none; touch-action: none; }
#rulerPlus.on { display: block; }

/* ======================= Barra dei turni in alto (turni.js) ======================= */
/* fuori dal menu degli strumenti: si vede anche con il menu chiuso o nascosto (telefono) */
#turniBarra { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 100003;
  max-width: min(560px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: stretch;
  border-radius: 14px; background: rgba(18, 21, 28, .9); color: #fff; border: 1px solid rgba(255, 210, 63, .55);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#turniBarra[hidden] { display: none; }
#turniBarra .tbTesta { display: flex; gap: 10px; align-items: baseline; justify-content: center; flex-wrap: wrap; min-height: 36px; padding: 7px 14px;
  border: 0; background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; text-align: center; }
#turniBarra .tbRound { color: #ffd23f; font-weight: 700; }
#turniBarra .tbOra { font-weight: 700; }
#turniBarra .tbPoi { opacity: .75; }
#turniBarra .tbTesta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
#turniBarra .tbTesta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 14px; }
#turniBarra .tbLista { margin: 0; padding: 4px 12px 10px 34px; max-height: 40vh; overflow-y: auto; font-size: 13px; border-top: 1px solid rgba(255, 255, 255, .12); }
#turniBarra .tbLista[hidden] { display: none; }
#turniBarra .tbLista li { padding: 3px 0; }
#turniBarra .tbLista li.ora { color: #ffd23f; font-weight: 700; }
html.ui-tel #turniBarra .tbTesta { font-size: 13px; padding: 6px 10px; gap: 8px; }

/* ======================= ⚙ Avanzate della scheda (tiri-scheda.js) ======================= */
.avanzDlg { max-width: min(560px, calc(100vw - 32px)); }
.avanzDlg section { margin: 10px 0; }
.avanzDlg h4 { margin: 6px 0; }
.avanzAb { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 2px 10px; }
.tiroBar .tiroAvanzate { padding: 4px 10px; min-height: 30px; }

/* ======================= Messaggi dei danni (msgDanno in script.js) ======================= */
.msg.roll.danno { display: block; align-self: stretch; max-width: none; padding: 8px 12px 10px; border-radius: 12px;
  background: color-mix(in srgb, #ff5d5d 10%, var(--panel-3)); border: 1px solid rgba(255, 107, 107, .45); border-left: 4px solid #ff6b6b; }
.msg.roll.danno .dTesta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.msg.roll.danno .dChi { font-weight: 700; color: var(--text); opacity: .85; }
.msg.roll.danno .dCosa { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--text); }
.msg.roll.danno .dIc { font-size: 14px; }
.msg.roll.danno .dTipo { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: #ffb3b3; background: rgba(255, 107, 107, .16); border: 1px solid rgba(255, 107, 107, .45); }
.msg.roll.danno .dRis { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 107, 107, .35); }
.msg.roll.danno .dTot { font-size: 28px; line-height: 1; color: #ff8a8a; }
.msg.roll.danno .dDadi { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.msg.roll.danno .dParti { margin-top: 6px; border-top: 1px solid rgba(255, 107, 107, .25); }
.msg.roll.danno .dParte { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px dashed rgba(255, 255, 255, .12); font-size: 14px; }
.msg.roll.danno .dParte:last-child { border-bottom: 0; }
.msg.roll.danno .dParte b { min-width: 2.2em; font-size: 18px; color: var(--text); text-align: right; }
.msg.roll.danno .dTesta .who { display: inline; margin: 0; font-size: 1em; }
:root[data-theme="light"] .msg.roll.danno .dTipo { color: #b42323; }
:root[data-theme="light"] .msg.roll.danno .dTot { color: #c62828; }

/* ======================= Impostazioni più leggibili (3.7.5) ======================= */
/* in cima: cerca e indice delle sezioni, sempre visibili mentre si scorre */
#impTesta { position: sticky; top: -14px; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 14px 0 8px; margin: -14px 0 2px; background: var(--panel); box-shadow: 0 6px 8px -6px rgba(0, 0, 0, .35); }
#impTesta .impRiga { display: flex; gap: 6px; }
.ui-tel #impTesta { top: -10px; padding-top: 10px; margin-top: -10px; }
#impCerca { flex: 1; min-width: 0; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-size: 14px; }
#impCerca:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#impTesta #impChiudi { flex: none; padding: 6px 10px; font-size: 12.5px; }
#impTesta #impIndice { flex: none; width: 100%; padding: 8px 10px; }
#impVuoto { margin: 4px 2px; }
.sect.impNascosta { display: none; }

/* dentro le sezioni: stesse misure e colori per tutto */
.sectContent { font-size: 14px; color: var(--text); line-height: 1.35; gap: 10px; }
.sectContent .note { font-size: 12.5px; line-height: 1.45; color: var(--text-soft); }
.sectContent .row { flex-wrap: wrap; gap: 6px 10px; }
.sectContent .row > select, .sectContent .row > input:not([type=checkbox]):not([type=color]) { flex: 1 1 140px; }
.sectContent .check { align-items: flex-start; gap: 10px; }
.sectContent input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.sectContent .row input[type=checkbox] { margin: 0; }
.sectContent input[type=range] { accent-color: var(--accent); }
.sectContent output { min-width: 2.2em; text-align: right; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.pane input[type=text], .pane input[type=search]:not(#compQ), .pane input[type=url] {
  min-width: 0; padding: 6px 8px; border-radius: 8px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); }
.pane input[type=text]::placeholder { color: var(--muted); }
.sectContent .btn.ghost { align-self: flex-start; }
.suonoChat { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ======================= Compendio: moduli guidati (＋ Nuova) ======================= */
.cmModulo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 8px; margin-top: 6px; }
.cmModulo label.cm small, .cmModulo .cmB > small { color: var(--text-soft, var(--muted)); font-size: 11px; line-height: 1.3; }
.cmModulo label.cm > span { color: var(--text); font-weight: 600; font-size: 12.5px; }
.cmModulo .cmW, .cmModulo .cmB { grid-column: 1 / -1; }
.cmModulo .cmC { margin-top: 0; align-self: end; }
.cmB { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cmB legend { font-weight: 600; font-size: 12.5px; color: var(--text); padding: 0 4px; }
.cmCar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cmCar label { align-items: center; text-align: center; }
.cmCar input { width: 100%; text-align: center; box-sizing: border-box; }
.cmCheck { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px 8px; }
.cmCheck label.check { margin-top: 0; font-size: 12.5px; }
.cmRiga2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmQ { max-width: 140px; }
.cmRighe { display: flex; flex-direction: column; gap: 8px; }
.cmR { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.cmR:not(:has(.cmL)) { grid-template-columns: 1fr auto; }
.cmR .cmL { width: 62px; }
.cmR .cmT { grid-column: 1 / -1; resize: vertical; }
.cmPiu { align-self: flex-start; }
@media (max-width: 520px) { .cmCar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.compTrad { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.compTrad .row { flex-wrap: wrap; gap: 6px; }

/* i segnalini degli altri, per un giocatore: non si selezionano (come il livello Mappa) */
#world .photo.altrui { cursor: inherit; }
#world .photo.altrui:hover { outline: none; box-shadow: none; }

/* ======================= Scheda: pannello «Risorse e riquadri» ======================= */
.avPanel { margin: 6px 10px 8px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 12px; background: color-mix(in srgb, currentColor 5%, transparent); color: inherit; font-size: 13px; }
.avPanel > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; font-weight: 600; flex-wrap: wrap; }
.avPanel > summary::-webkit-details-marker { display: none; }
.avPanel > summary > span:first-child::before { content: "▸ "; opacity: .6; }
.avPanel[open] > summary > span:first-child::before { content: "▾ "; }
.avRiposi { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.avRiposi .btn { padding: 3px 8px; font-size: 12px; }
.avCorpo { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.avInfo { font-size: 12.5px; opacity: .85; }
.avGruppo h5 { margin: 4px 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; display: flex; align-items: center; gap: 6px; }
.avGruppo h5 b { opacity: 1; }
.avCatT { background: none; border: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; padding: 0; cursor: pointer; }
.avRiq { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border-radius: 8px; }
.avRiq + .avRiq { border-top: 1px dashed color-mix(in srgb, currentColor 20%, transparent); }
.avRiq.preso { opacity: .4; }
.avRiq.sopra, .avCat.sopra { outline: 2px dashed var(--accent); outline-offset: 1px; }
.avGrip { cursor: grab; opacity: .5; user-select: none; }
.avNome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avNum { min-width: 22px; text-align: center; font-size: 15px; }
.avMax { opacity: .7; font-size: 12px; }
.avPM { padding: 1px 8px; min-width: 26px; }
.avIn { width: 70px; padding: 3px 6px; border-radius: 6px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: transparent; color: inherit; font: inherit; }
.avIn.avTxt { width: 140px; }
.avIn[type=checkbox] { width: 18px; height: 18px; }
.avPing { background: none; border: 0; cursor: pointer; font-size: 14px; padding: 2px; opacity: .7; }
.avPing:hover { opacity: 1; }
.avSlotRiga { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 2px 0; }
.avLiv { width: 26px; font-weight: 600; }
.avPip { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent); background: transparent; padding: 0; cursor: pointer; }
.avPip.on { background: var(--accent); }
.avLancia { margin-left: auto; padding: 2px 8px; font-size: 12px; }

/* ======================= ⚙ Avanzate (tutte le sezioni) ======================= */
.avanzTutto { width: min(720px, 96vw); }
.avSez { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.avSez button { font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; }
.avSez button.on { background: var(--accent); border-color: var(--accent); color: var(--sh-on, #fff); }
.avSezCorpo { display: flex; flex-direction: column; gap: 8px; }
.avSezCorpo > label:not(.check) { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.avTab { border-collapse: collapse; width: 100%; font-size: 13px; }
.avTab td, .avTab th { padding: 3px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.avTab.avDif td:not(:first-child), .avTab.avDif th:not(:first-child) { text-align: center; }
.avTab small { color: var(--muted); }
.avVal { text-align: right; font-weight: 600; }
.avLista { display: flex; flex-direction: column; gap: 6px; }
.avRigaE { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.avRigaE input:not([type=checkbox]), .avRigaE select { flex: 1 1 120px; min-width: 0; }
.avRigaE .avCorto { flex: 0 0 64px; }
.avRigaE textarea { flex: 1 1 100%; resize: vertical; }
.avRigaE label.check { margin-top: 0; }
.avGriglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dApplica { display: flex; gap: 6px; margin-top: 8px; }
.dApplica button { font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, #ff5c5c 60%, transparent); background: transparent; color: inherit; cursor: pointer; }
.dApplica button:hover { background: color-mix(in srgb, #ff5c5c 18%, transparent); }
.avSezCorpo > button { align-self: flex-start; }
.avRigaE > .btn { flex: 0 0 auto; padding: 4px 9px; }
.livH { margin: 10px 0 4px; font-size: 13px; }
.applicaLista { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow-y: auto; }
.avDanni { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.avDanni .avDannoN { width: 64px; }
.avDanni .avDannoT { width: auto; }
.avPF { font-size: 14px; margin-right: 4px; }

.tiroBar .tiroNome { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }

/* importare da un manuale */
.compMan { width: min(860px, 96vw); }
.compManB { margin: 10px 0 4px; }
.compManFonte { gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.compMan textarea[data-k=testo] { width: 100%; box-sizing: border-box; }
.compManLista { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.compManV { border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.compManV summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; cursor: pointer; }
.compManV summary input[data-c=nome] { flex: 0 1 220px; min-width: 120px; }
.compManV summary small { color: var(--muted); flex: 1 1 200px; }
.compManV textarea { width: 100%; box-sizing: border-box; margin-top: 6px; }
.compManStrum { gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.compManDubbio { color: var(--warn, #d08a00); cursor: help; }
.compManDubbi { color: var(--warn, #d08a00); margin: 4px 0; }

/* ======================= Cartelle delle schede ======================= */
.sheetFolder { display: flex; align-items: center; gap: 2px; border-radius: 10px; border: 1px dashed var(--line); background: none; }
.sheetFolder > button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; border-radius: 8px; }
.sheetFolder > button.pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; text-align: left; }
.sheetFolder > button.pick .fr { color: var(--muted); white-space: nowrap; }
.sheetFolder > button.pick .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sheetFolder > button.pick small { color: var(--muted); font-size: 11px; }
.sheetFolder > button.mini { flex: none; padding: 4px 7px; color: var(--muted); opacity: 0; }
.sheetFolder:hover > button.mini, .sheetFolder:focus-within > button.mini, .ui-touch .sheetFolder > button.mini { opacity: 1; }
.sheetFolder > button:hover { background: var(--panel-3); color: var(--text, inherit); }
.sheetFolder.sopra { outline: 2px dashed #ff6fa8; outline-offset: -2px; background: color-mix(in srgb, #ff6fa8 10%, transparent); }
#sheetDialog #sheetFolderIn { width: 100%; }
/* i righelli degli altri, col nome di chi misura (net.js) */
#righelliSvg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
#righelliSvg text { font: 600 14px system-ui, sans-serif; paint-order: stroke; stroke: rgba(0, 0, 0, .75); stroke-width: 4px; fill: #fff; }
#righelliSvg text.pezzo { font-size: 11px; font-weight: 500; opacity: .9; }
#righelliSvg text.chi { font-size: 13px; font-weight: 700; }