/* Stili della pagina (DM e giocatori). La pagina è in index.html. */
:root { color-scheme: dark; --bg:#14181a; --panel:#1f2629; --panel2:#262f33; --line:#3a454a; --text:#e8e4d8; --accent:#d9b44a; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
/* spazio della barra di scorrimento sempre tenuto: se compare, la pagina non si stringe */
html { scrollbar-gutter:stable; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--text); }
#join { max-width:360px; margin:12vh auto; padding:24px; background:var(--panel); border-radius:12px; }
#join h1 { margin-top:0; font-size:1.3rem; }
label { display:block; margin:10px 0 4px; font-size:.9rem; }
input, select, button { font:inherit; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:#11161826; color:var(--text); }
input { width:100%; text-transform:none; }
input[type=color] { padding:2px; height:38px; }
/* i cursori senza riquadro né margine: la pallina arriva fino ai bordi che si vedono */
input[type=range] { padding:0; border:0; background:none; }
button { background:var(--accent); color:#1a1405; border:0; font-weight:600; cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
button.secondary { background:transparent; color:var(--text); border:1px solid var(--line); }
button.small { padding:4px 8px; font-size:.85rem; }
#join button { margin-top:16px; width:100%; }
#game { display:none; padding:8px; }
#layout { display:flex; gap:12px; align-items:flex-start; }
#main { flex:1; min-width:0; }
#bar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:8px; font-size:.95rem; min-height:36px; } /* alta abbastanza per «✕ Deseleziona»: comparendo non sposta la mappa */
#status { color:var(--accent); min-height:1.3em; flex:1 1 0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* barra del token e pannelli galleggiano sopra la mappa: comparendo non la spostano */
#stage { position:relative; }
#floaters { position:absolute; top:8px; left:8px; right:8px; z-index:4; pointer-events:none; display:flex; flex-direction:column; align-items:flex-start; }
#floaters > * { pointer-events:auto; max-width:100%; box-shadow:0 4px 14px #0009; }
#floaters > .card { max-height:60vh; overflow:auto; }
#boardwrap { overflow:auto; max-height:calc(100vh - 140px); border-radius:8px; position:relative; }
#board { display:block; touch-action:none; cursor:pointer; }
/* giocatori: campo largo quanto lo schermo; zoom e spostamento con le dita (zoom.ts) */
#board.fit { width:100%; height:auto; transform-origin:0 0; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#boardwrap:has(> #board.fit) { overflow:hidden; max-width:960px; max-height:78vh; overscroll-behavior:contain; }
/* DM: campo intero fino in fondo alla finestra (misure in zoom.ts) */
#board.fit.dmfit { width:auto; }
#boardwrap:has(> #board.dmfit) { max-width:none; max-height:none; }
#zoomreset { position:absolute; right:8px; bottom:8px; z-index:2; }
#cancelbtn { padding:6px 14px; }
#undobtn { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rulerbtn.on { background:var(--accent); color:#1a1405; border-color:var(--accent); }
.soundbox { display:inline-flex; align-items:center; gap:4px; }
#soundvol { width:70px; padding:0; }
#pingarrow { position:absolute; z-index:3; background:#14181aee; border:2px solid; color:var(--text); font-weight:700; }
/* l'alone colorato delle luci: una tela sopra il campo, che lascia passare i clic */
#glow { position:absolute; left:0; top:0; pointer-events:none; mix-blend-mode:screen; transform-origin:0 0; }
#board.playersight { outline:3px solid #6fb3d9; outline-offset:-3px; }
#viewtoggle.on { background:#6fb3d9; color:#0d1a22; border-color:#6fb3d9; }
#sightnote { color:#6fb3d9; opacity:1; }
#side { width:340px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 24px); overflow:auto; }
@media (max-width: 900px) { #layout { flex-direction:column; } #side { width:100%; max-height:none; } #boardwrap { max-height:none; } }
.card { padding:12px; background:var(--panel); border-radius:8px; }
.card h2 { margin:0 0 8px; font-size:1rem; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.row { display:flex; gap:8px; align-items:center; margin:6px 0; flex-wrap:wrap; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.small { opacity:.75; font-size:.85rem; }
.filebtn { display:inline-block; margin:0; padding:8px 10px; border-radius:8px; background:var(--accent); color:#1a1405; font-weight:600; cursor:pointer; }
label.check { display:flex; gap:8px; align-items:center; margin:0; }
label.check input { width:auto; }
/* trappole */
.trap-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:4px 0; padding:6px; border-radius:8px; background:var(--panel2); }
.trap-row input { flex:1; min-width:80px; padding:4px 6px; }
.trap-row.off { opacity:.6; }
/* zone magiche */
.zone-item { display:inline-flex; gap:4px; align-items:center; }
.zone-chip { padding:2px 8px; border-radius:12px; background:#5b3f8a55; border:1px solid #b48cff66; font-size:.85rem; white-space:nowrap; }
/* iniziativa */
#initstrip { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px; padding:6px 8px; background:var(--panel); border-radius:8px; font-size:.85rem; }
#initstrip .ini { padding:2px 8px; border-radius:12px; background:var(--panel2); display:inline-flex; gap:6px; }
#initstrip .ini.pc { border:1px solid #f4d26b55; }
#initstrip .ini.now { background:var(--accent); color:#1a1405; font-weight:700; }
#initstrip .ini b { opacity:.8; }
.ini-row { display:flex; gap:6px; align-items:center; margin:4px 0; padding:4px; border-radius:8px; background:var(--panel2); }
.ini-row.now { outline:2px solid var(--accent); }
.ini-row.off { opacity:.55; }
.ini-row .ini-name { flex:1; min-width:0; text-align:left; background:transparent; color:var(--text); font-weight:500; padding:4px; display:flex; gap:6px; align-items:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ini-row .dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; border:1px solid #0008; }
.ini-row input { width:62px; padding:4px 6px; }
.ini-row button.small { padding:4px 7px; }
/* spie del turno (in combattimento): accesa = disponibile, spenta = usata, a metà = azione Attacco in corso */
.ini-wrap { margin:4px 0; border-radius:8px; background:var(--panel2); }
.ini-wrap .ini-row { margin:0; background:transparent; }
.ini-wrap.now { outline:2px solid var(--accent); }
.ini-wrap.now .ini-row.now { outline:none; }
.ini-turn { padding:0 6px 6px 26px; }
.turnpills { display:inline-flex; gap:4px; flex-wrap:wrap; align-items:center; }
.turnpills .pill { font-size:.75rem; padding:2px 8px; border-radius:10px; border:1px solid #4caf7a; background:#4caf7a33; color:var(--text); font-weight:600; line-height:1.4; }
.turnpills .pill.part { border-color:var(--accent); background:#f4c54233; }
.turnpills .pill.used { border-color:var(--line); background:transparent; opacity:.5; text-decoration:line-through; font-weight:400; }
.turnpills button.pill, #actbar .turnpills button.pill { cursor:pointer; padding:2px 8px; }
.basicacts { display:inline-flex; gap:4px; flex-wrap:wrap; align-items:center; }
#init-start { width:100%; margin:4px 0; }
#links code { user-select:all; word-break:break-all; font-size:.75rem; }
/* codici QR dei link dei giocatori */
.qrrow { display:flex; gap:10px; flex-wrap:wrap; }
.qrcard { flex:1; min-width:140px; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; font-size:.85rem; }
.qrcard .qrpic { width:140px; height:140px; padding:0; background:#fff; border-radius:6px; cursor:zoom-in; }
.qrpic svg { display:block; width:100%; height:100%; }
.qrbig { position:fixed; inset:0; z-index:50; background:#000d; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:zoom-out; font-size:1.2rem; }
.qrbig .qrpic { width:min(80vw, 75vh); height:min(80vw, 75vh); background:#fff; border-radius:10px; }
.qrbig p { margin:0; }
.req { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; padding:8px; border:1px solid var(--accent); border-radius:8px; }
.req span { flex:1; min-width:120px; }
/* barra degli strumenti dell'editor */
#tools { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px; padding:8px; background:var(--panel); border-radius:8px; }
#tools button { background:var(--panel2); color:var(--text); border:1px solid var(--line); padding:6px 10px; font-weight:500; }
#tools button.on { background:var(--accent); color:#1a1405; border-color:var(--accent); font-weight:700; }
#tools .sep { width:1px; align-self:stretch; background:var(--line); margin:0 4px; }
#tools label { margin:0; display:flex; align-items:center; gap:6px; font-size:.85rem; }
#tools input, #tools select { width:auto; padding:5px 6px; }
#heightft { width:64px !important; }
/* elenchi di token */
.tok { display:flex; align-items:center; gap:8px; padding:6px; border-radius:8px; background:var(--panel2); margin:6px 0; flex-wrap:wrap; }
.tok .dot { width:18px; height:18px; border-radius:50%; flex-shrink:0; border:2px solid #0006; }
.tok .name { flex:1; min-width:90px; }
.tok .meta { font-size:.75rem; opacity:.7; display:block; }
.tok select { padding:4px; font-size:.85rem; max-width:130px; }
.empty { font-size:.85rem; opacity:.6; margin:6px 0; }
#tokform { border-top:1px solid var(--line); margin-top:8px; padding-top:4px; }
/* contenitori dei token: un cerchio con l'icona della creatura per ogni token */
.avatars { display:flex; flex-wrap:wrap; gap:12px 10px; margin:6px 0; }
.av { position:relative; width:64px; display:flex; flex-direction:column; align-items:center; gap:3px; }
.av .face { width:56px; height:56px; border-radius:50%; padding:0; border:3px solid #0008; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; font-weight:700; font-size:1.05rem; text-shadow:0 1px 2px #000a; }
.av .face img { width:72%; height:72%; pointer-events:none; filter:drop-shadow(0 1px 1px #0008); }
.av.pc .face { border-color:#f4d26b; }
.av.off .face { opacity:.55; border-style:dashed; }
.av.sel .face { outline:3px solid #fff; outline-offset:1px; }
.av .edit { position:absolute; top:-2px; right:0; width:22px; height:22px; border-radius:50%; padding:0; font-size:.72rem; line-height:1; background:var(--panel2); color:var(--text); border:2px solid var(--accent); }
.av .edit:hover { background:var(--accent); color:#1a1405; }
.av .lbl { font-size:.72rem; text-align:center; line-height:1.15; max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.av .who { font-size:.65rem; opacity:.7; max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.av.add .face { background:transparent; border:3px dashed var(--line); color:var(--accent); font-size:1.8rem; font-weight:400; }
.av.add .face:hover { border-color:var(--accent); }
/* aggiunta di un token: si scrive la razza, i suggerimenti arrivano dal database */
.adder { margin:6px 0; padding:8px; background:var(--panel2); border-radius:8px; }
.adder .row { flex-wrap:nowrap; }
.adder input { flex:1; min-width:0; }
.sugg { list-style:none; margin:6px 0 0; padding:0; max-height:240px; overflow:auto; }
.sugg li { display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px; cursor:pointer; }
.sugg li.on, .sugg li:hover { background:#d9b44a33; }
.sugg .mini { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#3a454a; flex-shrink:0; font-size:.75rem; font-weight:700; }
.sugg .mini img { width:72%; height:72%; }
.sugg .cat { margin-left:auto; font-size:.7rem; opacity:.6; }
.grow { display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:center; margin:6px 0; }
.grow .btns { display:flex; gap:6px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 8px; }
/* attacchi nel modulo delle statistiche */
.atk { padding:6px; margin:6px 0; border:1px solid var(--line); border-radius:8px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px 6px; }
.atk > *, .atk-rollgrid > * { min-width:0; }
.atk input, .atk select { width:100%; box-sizing:border-box; }
.atk input, .atk select { padding:5px 6px; font-size:.85rem; }
.atk .wide { grid-column:span 2; }
.atk label { margin:0; font-size:.72rem; opacity:.8; }
.atk.off { opacity:.55; }
.classes { display:flex; flex-wrap:wrap; gap:4px 12px; margin:6px 0; font-size:.8rem; }
.spellname { font-weight:700; }
.atk .spellinfo { grid-column:span 3; font-size:.75rem; opacity:.75; }
dialog.spelldlg { max-width:min(680px, 94vw); width:100%; max-height:86vh; overflow:auto; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:14px; }
dialog.spelldlg::backdrop { background:rgba(0,0,0,.55); }
dialog.spelldlg .facts { font-size:.82rem; opacity:.85; margin:4px 0 8px; }
dialog.spelldlg p { margin:6px 0; white-space:pre-wrap; }
.spellfilters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
/* scheda completa (sheet-ui.ts) */
dialog.sheetdlg { max-width:min(860px, 96vw); }
.sheetdlg h3 { margin:12px 0 4px; font-size:.95rem; color:var(--accent); }
.sheetdlg textarea { width:100%; font:inherit; padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:#11161826; color:var(--text); resize:vertical; }
.sheetdlg input.bad { border-color:#d95a4a; }
.sh-sec { border:1px solid var(--line); border-radius:8px; padding:4px 10px; margin:8px 0; }
.sh-sec > summary { cursor:pointer; font-weight:700; padding:6px 0; }
.sh-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:4px 10px; align-items:end; }
.sh-f label { margin:6px 0 3px; font-size:.8rem; opacity:.85; }
.sh-f input, .sh-f select { padding:5px 6px; }
label.check.sh-f { padding-bottom:8px; }
.sh-inline { display:flex; gap:8px; align-items:center; }
.sh-inline select { flex:1; }
.sh-calc { color:var(--accent); font-weight:700; font-size:.9rem; white-space:nowrap; }
.sh-abs { display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin:6px 0 10px; }
.sh-ab { display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px; background:var(--panel2); border-radius:8px; }
.sh-ab input { text-align:center; padding:4px; }
.sh-table { display:grid; grid-template-columns:minmax(120px, 1.6fr) 1fr 70px 60px; gap:3px 8px; align-items:center; margin:4px 0 10px; font-size:.88rem; }
.sh-table select, .sh-table input { padding:3px 5px; font-size:.85rem; }
.sh-table .sh-h { font-size:.75rem; opacity:.7; }
.sh-dmg { grid-template-columns:minmax(120px, 1.6fr) 1fr 1fr 1fr; }
.sh-dmg input { width:auto; justify-self:start; }
.sh-feat { display:grid; grid-template-columns:1fr auto auto; gap:4px 6px; margin:6px 0; padding:6px; background:var(--panel2); border-radius:8px; }
.sh-feat textarea { grid-column:1 / -1; }
.sh-feat:not(:has(select)) { grid-template-columns:1fr auto; }
@media (max-width: 600px) { .sh-abs { grid-template-columns:repeat(3, 1fr); } }
/* scheda da leggere */
.sb h2 { margin-bottom:0; }
.sb hr { border:0; border-top:2px solid var(--accent); opacity:.6; margin:8px 0; }
.sb .sb-sub { font-style:italic; opacity:.8; margin-top:2px; }
.sb .sb-line { margin:3px 0; }
.sb-abs { display:grid; grid-template-columns:repeat(6, 1fr); text-align:center; gap:4px; }
.sb-abs div { display:flex; flex-direction:column; }
@media (max-width: 600px) { .sb-abs { grid-template-columns:repeat(3, 1fr); } }
/* attacchi: statistiche per i tiri */
.atk details.atk-roll { grid-column:1 / -1; font-size:.8rem; }
.atk details.atk-roll > summary { cursor:pointer; opacity:.85; }
.atk-rollgrid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 6px; margin-top:4px; }
.atk-rollgrid label { margin:0; font-size:.72rem; opacity:.8; }
.atk-traits { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; }
.atk-traits > label:first-child { width:100%; }
.sf-nonmag { margin:6px 0 8px; }
/* zaino al tavolo */
#invpanel h2 { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.iv-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:3px 0; border-bottom:1px solid var(--line); }
.iv-name { flex:1 1 160px; min-width:0; }
.iv-row select { width:auto; max-width:140px; }
.iv-hands.warn { color:var(--warn, #c9a640); font-weight:600; }
#invpanel .sf-coin input { width:76px; padding:3px; text-align:right; }
.sf-nonmag .row { flex-wrap:wrap; gap:6px 10px; align-items:center; }
.atk input.bad { border-color:#d95a4a; }
.spellfilters input { flex:1 1 160px; }
.spellresults { max-height:50vh; overflow:auto; }
.spellresults .res { display:flex; gap:8px; align-items:center; padding:6px; border-bottom:1px solid var(--line); cursor:pointer; }
.spellresults .res:hover { background:var(--panel2); }
.spellresults .res .meta { opacity:.7; font-size:.78rem; margin-left:auto; }
#featureapply { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; padding:8px; background:var(--panel); border:1px solid #c8553d; border-radius:8px; }
#featureapply input[type=number] { width:70px; padding:4px; }
#offers { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:8px; padding:6px 8px; background:var(--panel); border:1px solid var(--accent, #d4b24c); border-radius:8px; }
#offers select { width:auto; padding:3px; }
#featureapply[hidden], #offers[hidden] { display:none; }
#spellapply { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; padding:8px; background:var(--panel); border:1px solid #c8553d; border-radius:8px; }
#actbar select.slot { padding:5px 6px; }
.atk-actions { display:flex; gap:6px; align-items:end; justify-content:space-between; }
#atkpanel { margin-bottom:8px; max-width:960px; }
/* condizioni */
#condpanel { margin-bottom:8px; max-width:960px; }
#condpanel .row { flex-wrap:wrap; }
#condpanel input, #condpanel select { width:auto; padding:5px 6px; }
#cd-rounds { width:64px !important; }
#cd-name { width:170px !important; }
.cd-row { display:flex; gap:8px; align-items:center; padding:4px 6px; margin:4px 0; border-radius:8px; background:var(--panel2); }
.cd-row .cd-name { flex:1; }
/* pannello Risorse: pallini pieni = disponibili */
#respanel { margin-bottom:8px; max-width:960px; }
#respanel h3 { font-size:.85rem; margin:8px 0 2px; opacity:.85; }
.rs-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:3px 6px; margin:3px 0; border-radius:8px; background:var(--panel2); }
.rs-slotpick { margin:0 0 6px 18px; padding:4px 8px; border-left:3px solid var(--accent); }
.rs-slotpick .rs-row { background:transparent; }
.rs-name { min-width:90px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-pips { display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap; }
.rs-pip { width:18px; height:18px; min-width:0; padding:0; border-radius:50%; border:2px solid var(--accent); background:transparent; cursor:pointer; }
.rs-pip.on { background:var(--accent); }
.rs-count { font-size:.8rem; opacity:.8; font-variant-numeric:tabular-nums; margin-left:4px; }
.rs-note { opacity:.7; }
.cd-form { border-top:1px solid var(--line); margin-top:8px; padding-top:4px; }
.cd-credit { opacity:.5; font-size:.72rem; }
#ap-list .atk { grid-template-columns:repeat(4, 1fr); }
/* barra delle azioni del token selezionato */
#actbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px; padding:8px; background:var(--panel); border-radius:8px; }
#actbar .who { font-weight:700; }
#actbar .hp { font-variant-numeric:tabular-nums; }
#actbar input { width:64px; padding:5px 6px; }
#actbar button { padding:6px 10px; }
#actbar button.atkbtn { background:var(--panel2); color:var(--text); border:1px solid var(--line); font-weight:500; }
#actbar button.atkbtn.on { background:#c8553d; border-color:#c8553d; color:#fff; font-weight:700; }
#actbar .sep { width:1px; align-self:stretch; background:var(--line); }
#logbox { margin-top:8px; max-width:960px; }
#loglist { margin:0; padding-left:20px; max-height:180px; overflow:auto; font-size:.85rem; line-height:1.35; }
#loglist li { margin:3px 0; }
#loglist li:last-child { color:var(--accent); }
.credits { font-size:.72rem; opacity:.65; }
.credits a { color:inherit; }

/* Allinea mappa (finestra a tutto schermo del DM) */
.alignbox { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; gap:8px; padding:10px; background:var(--bg); }
.alignbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px; background:var(--panel); border-radius:8px; }
.alignbar h2 { margin:0; }
.alignbar .btns { display:flex; gap:6px; flex-wrap:wrap; }
.alignbar .btns button.on { background:var(--accent); color:#1a1405; border-color:var(--accent); }
.aligncontrols { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.alignnum { width:5.5em; }
.aligncanvas { flex:1; min-height:0; width:100%; border-radius:8px; touch-action:none; }
.aligninfo { flex:1; min-width:240px; }
.aligninfo p { margin:2px 0; }
.alignwarn { color:var(--accent); }
.alignhelp { margin:0; text-align:center; }
/* menu iniziale del DM (menu-ui.ts) */
#menu { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.menu-box { width:100%; max-width:640px; }
/* grimorio delle magie personalizzate */
.gr-row { display:flex; gap:8px; align-items:center; padding:6px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.gr-name { font-weight:600; }
.gr-meta { opacity:.7; margin-right:auto; }
.gr-form { margin:8px 0; background:var(--panel2); }
.gr-form h4 { margin:12px 0 4px; font-size:.85rem; opacity:.85; }
.gr-form .row { flex-wrap:wrap; align-items:flex-end; }
.gr-field { display:flex; flex-direction:column; gap:2px; font-size:.8rem; margin:0; }
.gr-field input, .gr-field select { width:auto; min-width:0; }
.gr-form input.gr-num { width:80px; }
.gr-form input.gr-dice { width:100px; }
.gr-form textarea { width:100%; }
.gr-err { color:#e8846b; min-height:1.2em; }
/* editor delle capacità (Creativa → Capacità e dentro la scheda) */
.menu-box.menu-wide { max-width:900px; }
dialog.featdlg { max-width:min(900px, 96vw); }
dialog.featdlg .fe-form { margin:0; background:transparent; padding:0; }
.fe-form input:not([type=checkbox]), .fe-form select { width:auto; min-width:0; }
.fe-form input[type=number] { width:72px; }
.fe-form .fe-sec > .row, .fe-form .fe-row { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:flex-end; margin:6px 0; }
.fe-form .fe-row { align-items:center; }
.fe-fields { display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; }
div.fe-fields { display:flex; margin:4px 0; }
.fe-amount, .fe-dice, .fe-nod { display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center; }
.fe-grow { padding:2px 6px; font-size:.72rem; opacity:.8; }
.fe-formula { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:flex-end; padding:6px 8px; border:1px dashed var(--line); border-radius:8px; }
.fe-steps { display:inline-flex; flex-wrap:wrap; gap:4px 8px; align-items:center; }
.fe-step { display:inline-flex; gap:4px; align-items:center; white-space:nowrap; }
.fe-effect { padding:6px 8px; margin:6px 0; border-radius:8px; background:var(--panel); border:1px solid var(--line); }
.fe-nest, .fe-sub { margin:4px 0 4px 8px; padding-left:8px; border-left:2px solid var(--accent); }
.fe-group { flex:1; min-width:240px; }
.fe-mods { width:100%; }
.fe-form hr { border:0; border-top:1px solid var(--line); margin:8px 0; }
.fe-summary { margin:10px 0 4px; padding:8px 10px; border-radius:8px; background:var(--panel); border:1px solid var(--line); font-size:.85rem; }
.fe-summary h4 { margin:0 0 4px; }
.fe-summary ul { margin:2px 0 6px; padding-left:18px; }
.fe-auto b { color:#8fd18f; }
.fe-live b { color:var(--accent); }
#menuhome h1 { margin:0 0 4px; font-size:2rem; color:var(--accent); letter-spacing:.02em; }
.menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
@media (max-width: 560px) { .menu-grid { grid-template-columns:1fr; } }
.menu-item { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:120px; padding:16px; text-align:left;
  background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:12px; font-weight:400; }
.menu-item b { font-size:1.2rem; color:var(--accent); }
.menu-item span { font-size:.9rem; opacity:.85; }
.menu-item em { margin-top:auto; font-size:.8rem; font-style:normal; opacity:.7; }
.menu-item:not(:disabled):hover { border-color:var(--accent); background:var(--panel2); }
.menu-item:disabled { opacity:.45; }
.menu-box.card { padding:20px; border-radius:12px; }
.menu-choice { margin-top:12px !important; font-weight:600; }
.fp-sub { margin-left:26px; }
/* finestra "Torna al menu" */
.dlg { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:16px; background:#000a; }
.dlg .card { width:100%; max-width:480px; border:1px solid var(--line); }
/* Creativa: biblioteca delle mappe ed editor */
#mapspanel h3 { margin:14px 0 6px; font-size:.95rem; }
#mapnewform { padding:10px; border-radius:8px; background:var(--panel2); }
#mapnewform h3 { margin-top:0; }
.secondary-file { background:transparent; color:var(--text); border:1px solid var(--line); font-weight:500; }
.maprow { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:6px 0; padding:8px; border-radius:8px; background:var(--panel2); }
.maprow .mapname { flex:1; min-width:160px; display:flex; flex-direction:column; }
.maprow .mapname small { opacity:.7; }
.maprow input { flex:1; min-width:140px; padding:4px 8px; }
/* biblioteca delle schede (Creativa) */
.sugg li.lib .cat { opacity:.9; color:#d9b44a; }
.maprow .libface { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.75rem; font-weight:700; color:#fff; }
.maprow .libface img { width:72%; height:72%; }
#lib-editor #tokform { margin:10px 0; border:1px solid #d9b44a66; }
/* immagine personalizzata del token */
.face img.portrait, .mini img.portrait, .libface img.portrait { width:100% !important; height:100% !important; border-radius:50%; object-fit:cover; }
.tk-pic { align-items:center; }
#tk-picprev { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; font-weight:700; font-size:.8rem; flex-shrink:0; }
#tk-picprev img { width:72%; height:72%; }
dialog.portraitdlg { max-width:min(380px, 94vw); margin-top:3vh; } /* in alto, non al centro: se cambia altezza la tela resta ferma */
.portraitdlg .pc-canvas { display:block; width:300px; max-width:100%; aspect-ratio:1; margin:8px auto; border-radius:8px; touch-action:none; cursor:grab; }
.portraitdlg .pc-zoom input { flex:1; }
dialog.portraitdlg:has(.pe-stack) { max-width:min(640px, 96vw); }
.pe-bases { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
.pe-blank { display:inline-flex; gap:6px; align-items:center; }
.pe-tools { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0; }
.pe-opts { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:.82rem; margin:6px 0; }
.pe-opt { display:inline-flex; gap:4px; align-items:center; margin:0; }
.pe-opt input[type=range] { width:90px; }
.pe-val { display:inline-block; min-width:3.2em; font-size:.8rem; font-variant-numeric:tabular-nums; }
.pe-opt input[type=color] { width:32px; height:24px; padding:0; border:none; background:none; }
.pe-num { width:52px; }
.pe-text { width:130px; }
.pe-hint { min-height:1.2em; margin:4px 0; opacity:.8; }
.pe-stack { position:relative; width:min(384px, 100%); aspect-ratio:1; margin:6px auto; background:repeating-conic-gradient(#3a454a 0 25%, #2a3235 0 50%) 0 0/16px 16px; border-radius:6px; overflow:hidden; }
.pe-stack canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:auto; }
.pe-over { touch-action:none; }
/* modulo del PG dei giocatori */
#pcpage { margin:12px auto; }
.pf-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:6px 10px; }
.pf-f label { display:block; margin:4px 0 2px; font-size:.82rem; }
.pf-f input, .pf-f select { width:100%; box-sizing:border-box; }
.pf-crow input.pf-cname { flex:1; min-width:120px; }
.pf-crow input.pf-clevel { width:64px; }
.pf-crow { flex-wrap:wrap; }
.pf-cspell { display:flex; flex-wrap:wrap; gap:6px; align-items:center; width:100%; padding:4px 0 2px 8px; border-left:2px solid var(--accent); }
.pf-cspell select { max-width:100%; }
.pf-cspell[hidden], .pf-subrace[hidden] { display:none; }
.pf-abil { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
@media (min-width:560px) { .pf-abil { grid-template-columns:repeat(6, 1fr); } }
.pf-ab { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px; border-radius:8px; background:var(--panel2); }
.pf-ab input { width:64px; text-align:center; }
.pf-mod { font-weight:700; color:var(--accent); min-width:2.2em; text-align:center; }
.pf-saves { display:flex; flex-wrap:wrap; gap:4px 14px; }
.pf-skills { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:3px 14px; }
.pf-skill { display:flex; align-items:center; gap:6px; font-size:.85rem; }
.pf-skill span:first-child { flex:1; }
.pf-feat { display:flex; flex-direction:column; gap:4px; margin:6px 0; padding:6px; border-radius:8px; background:var(--panel2); }
.pf-feat textarea, #pcpage textarea, .pcdlg textarea { width:100%; box-sizing:border-box; font:inherit; }
.pf-calc { margin:6px 0; }
.pf-face { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; font-weight:700; }
.pf-face img { width:72%; height:72%; }
.pf-actions { margin-top:14px; }
/* scheda unica (sheet-form.ts): numeri automatici grigi, corretti a mano gialli con ↺ */
.sheetform h3 { margin:14px 0 4px; }
.sf-auto { display:flex; align-items:center; gap:6px; }
.sf-auto input { width:72px; flex:none; }
.sf-wide { grid-column:1 / -1; }
.sf-slots { flex-wrap:wrap; }
/* equipaggiamento (scheda unica) */
.sf-inv { display:flex; flex-direction:column; gap:4px; margin:4px 0; }
.sf-invrow { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:4px 6px; border-radius:6px; background:rgba(127,127,127,.08); }
.sheetform .sf-invrow .sf-qty { width:56px; padding:4px; text-align:center; }
.sf-iname { flex:1 1 220px; min-width:0; }
.sf-iname .small { opacity:.8; }
.sf-eqac { margin:6px 0 2px; }
.sf-eqatk { display:flex; flex-direction:column; gap:2px; margin:4px 0; }
.sf-eqline { display:block; }
.sf-eqnotes { margin:4px 0; padding-left:0; list-style:none; color:var(--warn, #c9a640); }
.sf-coins { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; }
.sf-coin { display:inline-flex; align-items:center; gap:4px; }
.sheetform .sf-coin input { width:84px; padding:4px; text-align:right; }
.sf-slot { display:inline-flex; flex-direction:column; align-items:center; font-size:.75rem; opacity:.9; }
.sheetform .sf-slots input, .sf-slots input { width:42px; padding:4px; text-align:center; }
.sf-slotnote { margin:2px 0 0; }
.sf-uses { display:inline-flex; gap:4px; align-items:center; font-size:.8rem; white-space:nowrap; }
.sf-uses input.sf-usenum { width:48px; padding:4px; }
.sf-uses select { width:auto; padding:4px; }
.sf-rule { grid-column:1 / -1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sf-rule select { width:auto; padding:4px; }
.sf-rule[hidden], .sf-uses[hidden] { display:none; }
.sf-choice { display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap; }
details.sf-choice { display:block; width:100%; }
details.sf-choice label { display:block; margin:2px 0 2px 12px; }
.sf-choice .chip { display:inline-flex; gap:4px; align-items:center; padding:1px 4px 1px 8px; border-radius:10px; background:var(--panel2); }
.sf-tag { font-size:.75rem; opacity:.7; white-space:nowrap; }
.sf-auto.hand input { border-color:var(--accent); color:var(--accent); font-weight:700; }
.sf-auto.hand .sf-tag { color:var(--accent); opacity:1; }
.sf-reset { padding:2px 7px !important; }
.sf-lists { margin:8px 0; }
.sf-lists.hand .sf-tag { color:var(--accent); opacity:1; }
.sf-lists .classes { align-items:center; }
/* nel pannello stretto del DM: tabelle e caratteristiche stanno nella larghezza */
.sheetform .sh-table { grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) 46px 40px; gap:3px 6px; }
.sheetform .sh-table select { width:100%; min-width:0; }
.sheetform .sh-table input { width:100%; min-width:0; box-sizing:border-box; }
.sheetform .sh-dmg { grid-template-columns:minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.sheetform .sh-abs { grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); }
.sheetform .sh-ab input { width:100%; box-sizing:border-box; }
.sheetform .sh-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
.sheetform .sh-f input, .sheetform .sh-f select { width:100%; box-sizing:border-box; }
.sheetform .sf-auto input { width:64px; }
.pf-msg { min-height:1.2em; }
dialog.pcdlg { max-width:min(820px, 98vw); }
.inboxrow { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:4px 0; }
.inboxrow span { flex:1; min-width:140px; }
#tk-notes { width:100%; box-sizing:border-box; resize:vertical; font:inherit; }
#crbar { display:inline-flex; gap:8px; align-items:center; padding:2px 8px; border-radius:8px; background:var(--panel); }
#crname { color:var(--accent); }
/* nell'editor della Creativa niente partita: i giocatori non entrano */
body.creative #opencard, body.creative #roomcard, body.creative #fieldscard { display:none !important; }

/* campagne */
.menu-box.wide { max-width:1100px; }
.cp-row { display:flex; align-items:center; gap:10px; padding:6px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.cp-thumb { width:56px; height:42px; object-fit:cover; border-radius:6px; background:var(--panel2); display:inline-flex; align-items:center; justify-content:center; }
.cp-name { display:flex; flex-direction:column; flex:1 1 200px; min-width:0; }
.cp-head { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; margin:6px 0; }
.cp-headtext { flex:1 1 260px; display:flex; flex-direction:column; gap:2px; }
.cp-image { width:220px; max-width:100%; display:flex; flex-direction:column; gap:4px; }
.cp-image img { width:100%; max-height:180px; object-fit:cover; border-radius:8px; }
.cp-noimg { height:120px; border:1px dashed var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center; opacity:.7; font-size:.85rem; }
.cp-places { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; }
.cp-tree { flex:0 1 260px; min-width:200px; display:flex; flex-direction:column; gap:2px; }
.cp-node { text-align:left; background:transparent; border:1px solid transparent; color:inherit; padding:5px 8px; border-radius:6px; cursor:pointer; font-weight:normal; }
.cp-node.on { border-color:var(--accent); background:var(--panel2); font-weight:600; }
.cp-place { flex:1 1 420px; min-width:0; display:flex; flex-direction:column; gap:4px; }
.cp-place textarea, .cp-headtext textarea { width:100%; font:inherit; line-height:1.4; }
.cp-map { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:4px 0; border-bottom:1px solid var(--line); }
.cp-addmap { flex-wrap:wrap; gap:6px; align-items:center; }
.cp-addmap select, .cp-addmap input { width:auto; }
.cp-num { width:70px; }
.cp-partita { padding:6px; border:1px solid var(--line); border-radius:8px; margin:4px 0; display:flex; flex-direction:column; gap:4px; }
.cp-partita.on { border-color:var(--accent); }
.cp-party { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cp-pc.npc { border:1px dashed var(--accent); }
.cp-roster select { width:auto; max-width:100%; }
.cp-pc { display:inline-flex; align-items:center; gap:2px; padding:1px 6px; border-radius:12px; background:var(--panel2); }
.cp-newpartita { margin-top:8px; display:flex; flex-direction:column; gap:4px; }

/* frammenti e rivelazioni */
.cp-frags { display:flex; flex-direction:column; gap:4px; margin:4px 0; }
.cp-frag { display:grid; grid-template-columns:22px 1fr auto; gap:4px 6px; align-items:start; padding:4px; border-radius:6px; border:1px solid transparent; }
.cp-frag.known { border-color:var(--accent); background:rgba(201,166,64,.08); }
.cp-frag textarea { width:100%; font:inherit; line-height:1.4; }
.cp-fragn { opacity:.6; font-size:.8rem; padding-top:6px; text-align:right; }
.cp-fragbtn { display:flex; gap:2px; align-items:center; flex-wrap:wrap; }
.cp-links { grid-column:2 / -1; opacity:.75; }
.cp-revealrow { gap:6px 12px; align-items:center; flex-wrap:wrap; }
.cp-reveal.on { color:var(--accent); font-weight:600; }
.cp-kind { opacity:.7; margin-top:6px; }
dialog.discovery { max-width:min(520px, 94vw); text-align:center; }
.disc-img { max-width:100%; max-height:50vh; border-radius:8px; margin:6px auto; display:block; }
.disc-text { text-align:left; line-height:1.5; }
.disc-link { color:var(--accent); }

/* quaderno */
#bookbtn.fresh { border-color:var(--accent); color:var(--accent); font-weight:600; }
dialog.notebook { max-width:min(920px, 96vw); }
.nb-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.nb-head h2 { margin:0; flex:1 1 auto; }
.nb-search { width:100%; margin:6px 0; }
.nb-body { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; }
.nb-list { flex:0 1 240px; min-width:180px; display:flex; flex-direction:column; gap:2px; max-height:60vh; overflow:auto; }
.nb-entry { flex:1 1 360px; min-width:0; }
.nb-entry h2 { margin:2px 0 6px; }
.nb-frag { line-height:1.5; margin:6px 0; }
.nb-date { opacity:.6; }
.nb-new { color:var(--accent); font-size:.75rem; font-weight:600; }
.nb-link { color:var(--accent); font-weight:600; }
.nb-note { background:var(--panel2); border-radius:6px; padding:4px 8px; margin:4px 0; }
.nb-note p { margin:2px 0; }
.nb-entry textarea { width:100%; font:inherit; }

/* consulta del DM */
#campedit h2 { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
dialog.consult .nb-head select { width:auto; }
.cp-node.unknown { opacity:.55; }
.cs-frag { display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap; border-radius:6px; padding:2px 4px; }
.cs-frag .nb-frag { flex:1 1 280px; margin:4px 0; }
.cs-frag.hidden { opacity:.55; border:1px dashed var(--line); }
.cs-frag.hidden:hover { opacity:.85; }
.cs-tag { font-size:.7rem; opacity:.8; align-self:center; }
.cs-hidden { background:var(--panel2); padding:6px 8px; border-radius:6px; }
.cs-dim { filter:grayscale(.6) brightness(.7); }
.cs-secret { border:1px solid #8a5a5a; background:rgba(138,90,90,.15); border-radius:6px; padding:6px 8px; margin:8px 0; }
.cs-secret p { margin:4px 0 0; white-space:pre-wrap; }

/* 📖 Trama: scrittura nel gestore, lettura nella Consulta */
.pl-editor { display:flex; flex-direction:column; gap:8px; }
.pl-field { display:flex; flex-direction:column; gap:2px; font-size:.85rem; }
.pl-field > span { opacity:.8; }
.pl-act { border:1px solid var(--line); border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:6px; }
.pl-act > .row input { flex:1; font-weight:bold; }
.pl-scene { border:1px solid var(--line); border-radius:6px; padding:4px 8px; background:var(--panel2); }
.pl-scene[open] { padding-bottom:8px; }
.pl-scene > summary { cursor:pointer; font-weight:bold; padding:4px 0; }
.pl-scene .pl-field { margin-top:6px; }
.pl-clues .row input { flex:1; min-width:140px; }
.pl-node.done, .pl-node.skipped { opacity:.6; }
.pl-node.skipped { text-decoration:line-through; }
.pl-status { flex-wrap:wrap; gap:4px; margin:6px 0; }
.nb-entry h4 { margin:10px 0 2px; font-size:.85rem; opacity:.8; }
.pl-cluelist { margin:4px 0; padding-left:20px; }

/* Creativa → Archivio e cestino */
#arch-tabs { flex-wrap:wrap; }
#arch-tools { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; }
.arch-row { cursor:pointer; font-size:inherit; }
.maprow.arch-row input[type=checkbox], .arch-pic input[type=checkbox] { flex:none; width:18px; height:18px; min-width:0; margin:0; padding:0; }
.arch-sub { margin-left:28px; }
.arch-icon { width:28px; text-align:center; font-size:1.2rem; flex-shrink:0; }
.arch-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; }
.arch-pic { display:flex; flex-direction:column; align-items:center; gap:4px; margin:0; padding:6px; border-radius:8px; background:var(--panel2); cursor:pointer; }
.arch-pic img { width:72px; height:72px; object-fit:cover; border-radius:50%; background:#0003; }
.arch-pic.used { opacity:.55; cursor:default; }
button.danger { background:#b8483e; color:#fff; }
/* effetti nel pannello delle condizioni */
.cd-row.cd-fx { border-left:3px solid var(--accent); }
.cd-mod { gap:6px; margin:4px 0; }
.cd-modfields { gap:6px; margin:0; flex-wrap:wrap; }
#condpanel .cd-mod input[type=number] { width:70px; }
#condpanel .cd-dice { width:70px; }
#condpanel .cd-note { width:240px; }
.cd-check { display:inline-flex; gap:4px; align-items:center; }
#actbar .hp.fx { text-decoration:underline dotted; cursor:help; }

/* contenitori: il contenuto aperto nella barra delle azioni va a capo */
#actbar .loot { flex-basis:100%; display:flex; flex-direction:column; gap:2px; padding:4px 0; }
#actbar .loot .row { margin:0; }
.box-row { flex-direction:column; align-items:stretch; }
.box-qty { width:70px; } .box-coin { width:80px; }
/* Creativa → Classi: capacità per livello */
.cl-feat { border-bottom:1px solid var(--line); padding:6px 0; }
.cl-feat .row { flex-wrap:wrap; align-items:flex-end; }
.cl-feat textarea { width:100%; }
.sf-from { opacity:.7; font-style:italic; }
.pf-csubrow { width:100%; }

/* da che parte sta un non eroe: tre pulsanti attaccati, quello attivo acceso */
.sidepick { display: inline-flex; }
.sidepick button { border-radius: 0; margin: 0; }
.sidepick button:first-child { border-radius: 6px 0 0 6px; }
.sidepick button:last-child { border-radius: 0 6px 6px 0; }
.sidepick button.on { background:var(--accent); color:#1a1405; border-color:var(--accent); font-weight:700; }