/* ---------- Temi ---------- */
:root, :root[data-theme="dark"] {
  --bg: #1b1f27; --panel: #12151c; --panel-2: #0c0e13; --panel-3: #1a1f2b; --line: #2a3040;
  --text: #e8ecf3; --text-soft: #c3cad8; --muted: #9aa3b5;
  --msg: #2b2f5c; --roll-bg: #241d44; --roll-text: #b9a8ff;
  --hint-bg: rgba(18, 21, 28, .78); --hint-text: #c3cad8;
  --accent: #7c5cff; --board-fill: #6f7787; color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f6f8; --panel: #ffffff; --panel-2: #eef1f6; --panel-3: #e4e9f1; --line: #cbd3e1;
  --text: #1b2230; --text-soft: #374154; --muted: #5d6879;
  --msg: #dfe3ff; --roll-bg: #ece8ff; --roll-text: #5a3fd6;
  --hint-bg: rgba(255, 255, 255, .82); --hint-text: #55606b;
  --accent: #6a4cf0; --board-fill: #ffffff; color-scheme: light;
}

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--page-bg, var(--bg)); transition: background-color .8s ease; font-family: system-ui, sans-serif; }

#viewport {
  position: fixed; inset: 0;
  touch-action: none;
  user-select: none;
  overflow: hidden;
}
#viewport.panning { cursor: grabbing; }

#world {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
}

#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
/* livello a parte solo mentre la vista si muove: a gesto finito si ridisegna nitida (vedi applyView) */
body.vistaMuove #world, body.vistaMuove #stage { will-change: transform; }
#boardFill, #board { position: absolute; }
#boardFill { background: var(--board-fill); pointer-events: none; }
/* bordo: spessore costante a schermo (--inv = 1/zoom), colore e spessore dalle impostazioni; sta fuori dal rettangolo */
#board { pointer-events: none; outline: calc(var(--bw, 3) * 1px * var(--inv, 1)) solid var(--bc, #000); }
#bgBox { position: absolute; user-select: none; }
#bgBox[hidden] { display: none; }
#map { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
/* touch: mappa e riempimento li disegna #mappaTela, sotto la scena (vedi disegnaTela in script.js); l'immagine resta per misure e maniglie */
#mappaTela { position: absolute; left: 0; top: 0; pointer-events: none; }
html.mappaSuTela #map, html.mappaSuTela #boardFill { visibility: hidden; }
#grid { position: absolute; z-index: 1; display: none; pointer-events: none; }   /* posizione e misura: da script, dentro il rettangolo */
#grid.on { display: block; }
#world { z-index: 2; }
/* livello "Mappa": i segnalini non si toccano, si muove lo sfondo */
#viewport.layer-map .photo { pointer-events: none; }
#bgBox .handle, #board .handle { pointer-events: auto; }
#viewport.layer-map { cursor: move; }
#viewport.layer-map.panning { cursor: grabbing; }


.photo {
  position: absolute;
  cursor: grab;
  user-select: none;
}
.photo.dragging { cursor: grabbing; }
/* l'ombra segue la forma dell'immagine (drop-shadow), non il suo riquadro: con lo sfondo
   trasparente un box-shadow faceva comparire un rettangolo scuro attorno al segnalino */
.photo img {
  display: block; width: 100%; height: 100%;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .4));
}

/* Selezione: bordo blu luminoso (spessori costanti a schermo grazie a --inv = 1/zoom) */
.photo.selected, #bgBox.editing, #board.editing {
  outline: calc(2px * var(--inv, 1)) solid #2f8cff;
  box-shadow: 0 0 calc(14px * var(--inv, 1)) calc(2px * var(--inv, 1)) rgba(47, 140, 255, .85);
}
/* sul segnalino il bagliore segue la sagoma; il riquadro resta solo come bordo sottile per ridimensionare */
.photo.selected { box-shadow: none; }
.photo.selected img { filter: drop-shadow(0 0 calc(5px * var(--inv, 1)) rgba(47, 140, 255, .95)); }

/* Maniglie di ridimensionamento: visibili solo sulla foto selezionata */
.handle { position: absolute; display: none; }
.photo.selected .handle, #bgBox.editing .handle, #board.editing .handle { display: block; }

.handle[data-d="n"], .handle[data-d="s"] { left: 0; right: 0; height: calc(10px * var(--inv, 1)); cursor: ns-resize; }
.handle[data-d="n"] { top:    calc(-5px * var(--inv, 1)); }
.handle[data-d="s"] { bottom: calc(-5px * var(--inv, 1)); }
.handle[data-d="e"], .handle[data-d="w"] { top: 0; bottom: 0; width: calc(10px * var(--inv, 1)); cursor: ew-resize; }
.handle[data-d="e"] { right: calc(-5px * var(--inv, 1)); }
.handle[data-d="w"] { left:  calc(-5px * var(--inv, 1)); }

.handle[data-d="nw"], .handle[data-d="ne"], .handle[data-d="sw"], .handle[data-d="se"] {
  width: calc(14px * var(--inv, 1)); height: calc(14px * var(--inv, 1));
  background: #2f8cff; border-radius: calc(3px * var(--inv, 1));
  box-shadow: 0 0 calc(8px * var(--inv, 1)) rgba(47, 140, 255, .9);
}
.handle[data-d="nw"] { left:  calc(-7px * var(--inv, 1)); top:    calc(-7px * var(--inv, 1)); cursor: nwse-resize; }
.handle[data-d="se"] { right: calc(-7px * var(--inv, 1)); bottom: calc(-7px * var(--inv, 1)); cursor: nwse-resize; }
.handle[data-d="ne"] { right: calc(-7px * var(--inv, 1)); top:    calc(-7px * var(--inv, 1)); cursor: nesw-resize; }
.handle[data-d="sw"] { left:  calc(-7px * var(--inv, 1)); bottom: calc(-7px * var(--inv, 1)); cursor: nesw-resize; }

#toolbar {
  position: fixed; left: 78px; top: 22px;
  display: flex; align-items: center; gap: 12px;
  z-index: 100000;
}
.btn {
  background: #1f6feb; color: #fff;
  padding: 8px 14px; border-radius: 8px;
  cursor: pointer; font-size: 14px;
}
.btn:hover { background: #1a5fcb; }
.hint { display: block; max-width: min(640px, calc(100vw - 480px)); font-size: 12px; color: var(--hint-text); background: var(--hint-bg); padding: 4px 8px; border-radius: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---------- Menu laterale ---------- */
#side {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--side-w, 340px), 92vw);
  z-index: 100001; transform-origin: 100% 50%;
  transform: translateX(100%);
}
/* arriva veloce allungandosi, si "schiaccia" all'arrivo e vibra appena */
#side.open    { transform: none; animation: bounceIn .5s cubic-bezier(.22, .8, .3, 1) both; }
#side.closing { animation: slideOut .22s ease-in both; }
@keyframes bounceIn {
  0%   { transform: translateX(100%) scaleX(1); }
  30%  { transform: translateX(22%)  scaleX(1.06); }
  55%  { transform: translateX(-1.8%) scaleX(.985); }
  72%  { transform: translateX(.7%)  scaleX(1.008); }
  86%  { transform: translateX(-.3%) scaleX(.998); }
  100% { transform: translateX(0)    scaleX(1); }
}
@keyframes slideOut {
  from { transform: translateX(0)    scaleX(1); }
  to   { transform: translateX(100%) scaleX(1.04); }
}

#sideBody {
  --aura: #7c5cff;
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--panel); color: var(--text);
  box-shadow: -6px 0 24px rgba(0, 0, 0, .35);
}
/* prolunga lo sfondo a destra: durante la vibrazione non si vede il vuoto */
#sideBody::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 100px; background: var(--panel); }

/* pallino fluttuante con la freccia */
#sideToggle {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 100002; width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--panel); color: var(--text); cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
  transition: right .4s cubic-bezier(.22, .9, .3, 1.08), background .2s;
}
#sideToggle:hover { background: var(--panel-3); color: var(--text); }
body.menu-open #sideToggle { right: calc(min(var(--side-w, 340px), 92vw) + 18px); }
/* La linguetta sta attaccata al bordo (dello schermo o del pannello), stretta e un po' trasparente:
   così non copre i segnalini che stanno sul lato destro della mappa. */
#sideToggle { right: 0; width: 30px; height: 64px; border-radius: 16px 0 0 16px; border-right: 0; opacity: .78; }
#sideToggle:hover, #sideToggle:focus-visible { opacity: 1; }
body.menu-open #sideToggle { right: min(var(--side-w, 340px), 92vw); }
.ui-touch #sideToggle { width: 38px; }
body.side-resizing #sideToggle, body.side-resizing #side { transition: none; }
body.side-resizing { cursor: ew-resize; user-select: none; -webkit-user-select: none; }

/* bordo sinistro del pannello: il cursore diventa una doppia freccia e si trascina per ridimensionare */
#sideGrip { position: absolute; left: -5px; top: 0; bottom: 0; width: 12px; z-index: 3; cursor: ew-resize; touch-action: none; }
#side:not(.open) #sideGrip { display: none; }
#sideGrip::after {
  content: ""; position: absolute; left: 4px; top: 50%; width: 4px; height: 56px; margin-top: -28px; border-radius: 3px;
  background: var(--accent); opacity: 0; transition: opacity .15s;
}
#sideGrip:hover::after, body.side-resizing #sideGrip::after { opacity: .85; }
#sideToggle svg { transition: transform .35s; }
body.menu-open #sideToggle svg { transform: rotate(180deg); }
#sideToggle:focus-visible, .tab:focus-visible, .chip button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tabs { display: flex; gap: 8px; padding: 12px; background: var(--panel-2); }
.tab {
  flex: 1; padding: 10px 2px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-3); color: var(--muted);
  font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: box-shadow .25s, border-color .25s, color .25s;
}
.tab.active {
  color: var(--text); border-color: var(--aura);
  box-shadow: 0 0 6px var(--aura), 0 0 20px var(--aura), inset 0 0 14px color-mix(in srgb, var(--aura) 40%, transparent);
}

.pane {
  display: none; overflow-y: auto; flex: 1; min-height: 0; flex-direction: column; gap: 10px;
  margin: 14px; padding: 14px; border-radius: 14px;
  border: 1px solid var(--aura);
  box-shadow: 0 0 18px color-mix(in srgb, var(--aura) 45%, transparent);
}
.pane.active { display: flex; }
.row { display: flex; align-items: center; gap: 8px; }

/* Griglia */
.check { display: flex; align-items: center; gap: 8px; }
.pane .row input[type=range] { flex: 1; min-width: 0; }
.pane output { min-width: 2.5ch; text-align: right; }
.swatches { display: flex; gap: 6px; flex: 1; }
.swatches button { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; }
.swatches button.active { border-color: #2ee6a6; box-shadow: 0 0 8px #2ee6a6; }
.gridForm input[type=color] { width: 34px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }

/* Chat */
#chatLog { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.msg { align-self: flex-end; max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--msg); overflow-wrap: anywhere; }
.chatForm { display: flex; gap: 8px; }
#chatInput { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: inherit; font: inherit; }

/* Assets */
#tab-assets .btn { background: #e07b12; border: 1px solid #e07b12; }
#tab-assets .btn:hover { background: #c96b0a; }
#tab-assets .btn.ghost { background: transparent; color: #e07b12; border-color: color-mix(in srgb, #e07b12 50%, transparent); font: inherit; font-size: 14px; }
#tab-assets .btn.ghost:hover { background: color-mix(in srgb, #ff9f43 18%, var(--panel)); }
#folderBar { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: flex; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.chip button { border: 0; background: none; color: var(--text-soft); font: inherit; font-size: 13px; padding: 6px 10px; cursor: pointer; }
.chip button.x { padding-left: 2px; color: var(--muted); }
.chip.active { border-color: #ff9f43; box-shadow: 0 0 8px rgba(255, 159, 67, .55); }
.chip.active button { color: var(--text); }
.chip.over { background: color-mix(in srgb, #ff9f43 25%, var(--panel-3)); border-color: #ff9f43; }
.note, #storeStatus { margin: 0; font-size: 12px; color: var(--muted); }
#storeStatus:empty { display: none; }
#assetGrid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
.asset { position: relative; border: 2px solid transparent; border-radius: 8px; background: var(--panel-2); cursor: grab; overflow: hidden; }
.asset:hover { border-color: #ff9f43; }
.asset img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; pointer-events: none; }
.asset .del {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; font-size: 15px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .15s;
}
.asset:hover .del, .asset .del:focus-visible { opacity: 1; }
.asset .del:hover { background: #d33; }

@media (prefers-reduced-motion: reduce) {
  #side.open, #side.closing { animation-duration: .01s; }
  #sideToggle { transition: none; }
}

/* ---------- Dadi ---------- */
#dice {
  position: fixed; left: 14px; top: 14px; 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), 0 0 18px rgba(124, 92, 255, .35);
  transition: width .5s cubic-bezier(.22, .9, .3, 1), height .5s cubic-bezier(.22, .9, .3, 1), border-radius .5s ease;
}
#dice.open { width: 296px; height: var(--dh, 320px); border-radius: 20px; background: rgba(18, 21, 28, .9); }   /* aperto: sotto non si devono vedere le icone */
#diceToggle {
  position: absolute; left: 0; top: 0; width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center; border: 0; background: none; color: inherit; cursor: pointer;
}
#diceToggle svg { transition: transform .15s; }
#diceToggle:hover svg { transform: scale(1.08); }
#diceToggle:active svg { transform: scale(.86); }
#diceToggle.pop svg { animation: dicePop .45s ease-out; }
@keyframes dicePop {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(.8) rotate(-14deg); }
  65%  { transform: scale(1.14) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
#diceToggle:focus-visible, #dice button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

#diceBody {
  box-sizing: border-box; width: 296px; padding: 58px 14px 14px;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; transition: opacity .2s;
}
#dice.open #diceBody { opacity: 1; transition: opacity .3s .2s; }
.dLabel { font-size: 12px; color: #c3cad8; }
.dRow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
#dice button:not(#diceToggle) {
  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;
}
#dice button:not(#diceToggle):hover { background: rgba(124, 92, 255, .45); }
#diceQty button.active { border-color: #a58bff; box-shadow: 0 0 10px #7c5cff; background: rgba(124, 92, 255, .4); }
#dice input[type=number] {
  width: 64px; padding: 6px 8px; border-radius: 8px; font: inherit;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); color: #fff;
}
#diceLast { margin: 2px 0 0; min-height: 1.2em; font-size: 13px; color: #d9d2ff; overflow-wrap: anywhere; }
/* vantaggio / svantaggio, pubblico / segreto: pulsanti a segmenti */
.dHint { display: block; font-size: 11px; color: #9aa3b5; margin-top: 1px; }
.dSeg { gap: 0; flex-wrap: nowrap; }
#dice .dSeg button:not(#diceToggle) { flex: 1; min-width: 0; padding: 6px 4px; border-radius: 0; font-size: 12.5px; white-space: nowrap; }
#dice .dSeg button:not(#diceToggle):first-child { border-radius: 10px 0 0 10px; }
#dice .dSeg button:not(#diceToggle):last-child { border-radius: 0 10px 10px 0; }
#dice .dSeg button:not(#diceToggle) + button { border-left-width: 0; }
#dice .dSeg button.active:not(#diceToggle) { background: rgba(124, 92, 255, .5); border-color: #a58bff; box-shadow: inset 0 0 0 1px #a58bff; }
#dice #diceAdv button[data-adv="adv"].active { background: rgba(46, 200, 140, .45); border-color: #3ddc97; box-shadow: inset 0 0 0 1px #3ddc97; }
#dice #diceAdv button[data-adv="dis"].active { background: rgba(230, 80, 80, .45); border-color: #ff6b6b; box-shadow: inset 0 0 0 1px #ff6b6b; }
/* «Tutti» stretto, «🔒 Solo io e il master» prende il resto e se non ci sta va a capo */
#dice #diceVis button[data-vis="public"]:not(#diceToggle) { flex: 0 0 auto; padding-inline: 12px; }
#dice #diceVis button[data-vis="secret"]:not(#diceToggle) { white-space: normal; line-height: 1.15; overflow-wrap: anywhere; }
#dice #diceVis button[data-vis="secret"].active { background: rgba(255, 176, 32, .38); border-color: #ffb020; box-shadow: inset 0 0 0 1px #ffb020; }
/* a vassoio chiuso: si vede lo stesso che un modo è acceso */
#diceBadge {
  position: absolute; right: 1px; bottom: 1px; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box;
  border-radius: 8px; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  background: #ffb020; color: #1b1300; pointer-events: none;
}
#diceBadge.adv { background: #3ddc97; color: #04251a; }
#diceBadge.dis { background: #ff6b6b; color: #2b0606; }
#diceBadge[hidden] { display: none; }

/* ---------- Messaggi dei tiri e menu clic destro ---------- */
.msg.roll {
  align-self: flex-start; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  background: var(--roll-bg); border: 1px solid rgba(124, 92, 255, .5); border-radius: 14px 14px 14px 4px;
}
.msg.roll .rl { color: var(--roll-text); font-size: 13px; }
.msg.roll .rr { font-size: 15px; }
.msg.roll .tot { font-size: 18px; color: var(--text); }
.msg.roll.single .rr { font-size: 22px; font-weight: 700; }
.msg.roll.max { border-color: #3ddc97; box-shadow: 0 0 12px rgba(61, 220, 151, .6); }
.msg.roll.min { border-color: #ff5d5d; box-shadow: 0 0 12px rgba(255, 93, 93, .6); }
.msg.roll s { opacity: .55; text-decoration-thickness: 2px; }
.msg.roll .rd { font-size: 14px; display: inline-flex; gap: 6px; }
.msg.roll .adv, .msg.roll .sec {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; letter-spacing: .02em;
}
.msg.roll .adv.adv { background: rgba(61, 220, 151, .18); color: #3ddc97; border: 1px solid rgba(61, 220, 151, .5); }
.msg.roll .adv.dis { background: rgba(255, 107, 107, .16); color: #ff8a8a; border: 1px solid rgba(255, 107, 107, .5); }
.msg.roll .sec { background: rgba(255, 176, 32, .16); color: #ffc04d; border: 1px solid rgba(255, 176, 32, .5); }
.msg.roll.secret { border-style: dashed; }
.msg.roll.hiddenRoll { opacity: .75; border-style: dashed; border-color: rgba(255, 176, 32, .5); }
#ctx {
  position: fixed; z-index: 200000; padding: 4px; border-radius: 8px;
  background: var(--panel-3); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
#ctx[hidden] { display: none; }
#ctx button { display: block; border: 0; background: none; color: #ff8080; font: inherit; font-size: 14px; padding: 7px 12px; border-radius: 6px; cursor: pointer; }
#ctx button:hover { background: color-mix(in srgb, #ff5d5d 15%, var(--panel-3)); }

@media (prefers-reduced-motion: reduce) {
  #dice { transition: none; }
  #diceToggle.pop svg { animation: none; }
}

/* ---------- Impostazioni ---------- */
.sect { flex: none; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel-2) 55%, transparent); }
.sectHead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 12px; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.sectHead:hover { background: var(--panel-3); }
.sectHead:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sectHead .chev { flex: none; color: var(--muted); transition: transform .25s; }
.sect.open .sectHead .chev { transform: rotate(90deg); }
.sectBody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.sect.open .sectBody { grid-template-rows: 1fr; }
.sectInner { overflow: hidden; min-height: 0; }
.sectContent { display: flex; flex-direction: column; gap: 8px; padding: 2px 12px 12px; }
.pane select, .pane input[type=number] {
  flex: 1; 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);
}
.seg { display: flex; flex: 1; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { flex: 1; padding: 7px 6px; border: 0; background: var(--panel-3); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.active { background: color-mix(in srgb, var(--aura, #2ee6a6) 35%, var(--panel-3)); color: var(--text); }
.gridForm { display: flex; flex-direction: column; gap: 8px; }
.pane .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); font: inherit; font-size: 13px; text-align: center; }
.pane .btn.ghost:hover { background: var(--panel-3); }
.pane .btn.ghost.danger { color: #ff6b6b; flex: 0 0 auto; }
#tab-assets .seg button.active { background: color-mix(in srgb, #ff9f43 35%, var(--panel-3)); }
.asset .bgBtn {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; padding: 0; font-size: 12px; line-height: 1;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .7); cursor: pointer; opacity: 0; transition: opacity .15s;
}
.asset:hover .bgBtn, .asset .bgBtn:focus-visible { opacity: 1; }
.asset .bgBtn:hover { background: #e07b12; }

/* ---------- Dock: scene + livelli ---------- */
.glass {
  background: rgba(18, 21, 28, .55); color: #fff;
  -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);
}
#dock { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 100003; display: flex; align-items: center; gap: 10px; }
#sceneWrap { position: relative; }
#sceneBtn, #layerSwitch, #targetSwitch { height: 44px; border-radius: 22px; }
#sceneBtn {
  display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 0 16px; cursor: pointer; font: inherit; font-size: 14px;
  background: rgba(18, 21, 28, .55); color: #fff; -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);
}
#sceneBtn:hover { background: rgba(60, 50, 110, .6); }
#sceneName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sceneBtn svg { transition: transform .25s; flex: none; }
#sceneBtn[aria-expanded="true"] svg { transform: rotate(180deg); }
#sceneMenu {
  position: absolute; left: 0; bottom: 54px; min-width: 250px; max-height: 50vh; max-height: 50dvh; overflow-y: auto; padding: 6px; border-radius: 16px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transform-origin: 20% 100%; animation: menuPop .18s ease-out;
}
#sceneMenu[hidden] { display: none; }
@keyframes menuPop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.sceneRow { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.sceneRow.active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sceneRow > button { border: 0; background: none; color: inherit; font: inherit; font-size: 14px; cursor: pointer; padding: 8px 10px; border-radius: 8px; }
.sceneRow > button.pick { flex: 1; text-align: left; display: flex; gap: 8px; min-width: 0; }
.sceneRow > button.pick span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sceneRow > button:not(.pick) { padding: 6px 7px; color: var(--muted); opacity: .0; transition: opacity .15s; }
.sceneRow:hover > button:not(.pick), .sceneRow > button:focus-visible { opacity: 1; }
.sceneRow > button:hover { background: var(--panel-3); }
#sceneNew { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px dashed var(--line); border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
#sceneNew:hover { background: var(--panel-3); }
#sceneHome { display: block; margin-top: 4px; padding: 9px 10px; border-radius: 10px; color: var(--muted); font-size: 14px; text-decoration: none; text-align: center; }
#sceneHome[hidden] { display: none; }
#sceneHome:hover { background: var(--panel-3); color: var(--text); }
#targetSwitch[hidden] { display: none; }
#layerSwitch, #targetSwitch { display: flex; padding: 4px; gap: 2px; background: rgba(18, 21, 28, .55); -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); box-sizing: border-box; }
#layerSwitch button, #targetSwitch button { border: 0; border-radius: 18px; padding: 0 14px; background: none; color: #d6dbe7; font: inherit; font-size: 13px; cursor: pointer; transition: background .2s, box-shadow .2s; }
#layerSwitch button:hover, #targetSwitch button:hover { background: rgba(255, 255, 255, .1); }
#layerSwitch button.active, #targetSwitch button.active { color: #fff; background: rgba(124, 92, 255, .55); box-shadow: 0 0 12px rgba(124, 92, 255, .7); }
#targetSwitch button.active, #layerSwitch button[data-layer="map"].active { background: rgba(47, 140, 255, .55); box-shadow: 0 0 12px rgba(47, 140, 255, .8); }
#sceneBtn:focus-visible, #layerSwitch button:focus-visible, #targetSwitch button:focus-visible, #zoomBox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Zoom: la lente si allunga ---------- */
#zoomBox {
  position: fixed; left: 14px; bottom: 14px; 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), 0 0 18px rgba(47, 140, 255, .3);
  transition: width .45s cubic-bezier(.22, .9, .3, 1.15);
}
#zoomBox.open { width: 208px; }
#zoomBox button { position: absolute; top: 0; width: 52px; height: 52px; padding: 0; display: grid; place-items: center; border: 0; background: none; color: inherit; cursor: pointer; }
#zoomToggle { left: 0; }
#zoomBox svg { transition: transform .15s; }
#zoomBox button:hover svg { transform: scale(1.12); }
#zoomBox button:active svg { transform: scale(.85); }
#zoomBody { position: absolute; left: 52px; top: 0; width: 156px; height: 52px; opacity: 0; transition: opacity .15s; }
#zoomBox.open #zoomBody { opacity: 1; transition: opacity .3s .12s; }
#zoomBody button { transform: translateX(-30px); transition: transform .45s cubic-bezier(.22, .9, .3, 1.15); }
#zoomBox.open #zoomBody button { transform: none; }
#zoomIn { left: 0; } #zoomOut { left: 52px; } #zoomFit { left: 104px; }
#zoomBox.open #zoomBody button:nth-child(2) { transition-delay: .04s; }
#zoomBox.open #zoomBody button:nth-child(3) { transition-delay: .08s; }
#zoomBox button:hover { background: rgba(47, 140, 255, .3); }

/* ---------- Dadi: trascinabili ---------- */
#dice { touch-action: none; }
#dice.dragging { transition: none; box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 0 22px rgba(124, 92, 255, .5); }
#dice.settle { transition: left .3s ease, top .3s ease, width .5s cubic-bezier(.22, .9, .3, 1), height .5s cubic-bezier(.22, .9, .3, 1), border-radius .5s ease; }
#diceToggle { cursor: grab; }
#dice.dragging, #dice.dragging * { cursor: grabbing !important; }

/* ---------- Nuova scena ---------- */
#sceneDialog { width: min(420px, 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); }
#sceneDialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }
#sceneDialog h3 { margin: 0 0 14px; font-size: 18px; }
#sceneDialog .campoNota { display: block; margin-top: 4px; font-size: 12px; color: var(--muted, #999); font-weight: normal; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.field input[type=text] { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-size: 14px; }
.field input[type=file] { font-size: 13px; color: var(--text); }
.types { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.types legend { padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.typeOpt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.typeOpt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent); }
.typeOpt span { display: flex; flex-direction: column; gap: 2px; }
.typeOpt small { color: var(--muted); font-size: 12px; }
.dialogBtns { display: flex; justify-content: flex-end; gap: 8px; }
#sceneDialog .btn { border: 1px solid #1f6feb; font: inherit; font-size: 14px; }
#sceneDialog .btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }

@media (max-width: 760px) {
  .hint { display: none; }
  #layerSwitch button, #targetSwitch button { padding: 0 10px; }
  #dock { bottom: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  #zoomBox, #zoomBody button, #sceneMenu { transition: none; animation: none; }
}

/* ---------- Ping sulla mappa ---------- */
#pings { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.ping {
  position: absolute; box-sizing: border-box; border-radius: 50%; transform: translate(-50%, -50%);
  border: 3px solid var(--pc, #ff4d4d);
  background: color-mix(in srgb, var(--pc, #ff4d4d) 26%, transparent);
  box-shadow: 0 0 16px var(--pc, #ff4d4d), inset 0 0 14px color-mix(in srgb, var(--pc, #ff4d4d) 55%, transparent);
  will-change: width, height, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .sectBody, .sectHead .chev, #sideGrip::after { transition: none; }
}
#tab-chat { position: relative; }
#chatNuovi {
  position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); z-index: 3;
  padding: 6px 14px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  background: var(--accent, #7c5cff); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
#chatNuovi[hidden] { display: none; }
/* con il pannello di destra aperto, la barra in basso si centra nello spazio che resta (non copre la chat) */
html:not(.ui-tel) body.menu-open #dock { left: calc((100vw - min(var(--side-w, 340px), 92vw)) / 2); max-width: calc(100vw - min(var(--side-w, 340px), 92vw) - 24px); }
html:not(.ui-tel) body.menu-open #dockZone { left: calc((100vw - min(var(--side-w, 340px), 92vw)) / 2); }

/* risultato grande del tiro, quando la chat è chiusa */
#dicePop {
  position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); z-index: 100004; transform: translate(-50%, -140%);
  display: flex; align-items: baseline; gap: 12px; max-width: min(520px, calc(100vw - 32px)); padding: 10px 20px;
  border-radius: 16px; background: rgba(18, 21, 28, .94); color: #fff; border: 1px solid rgba(165, 139, 255, .7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 22px rgba(124, 92, 255, .4); cursor: pointer;
  opacity: 0; pointer-events: none; transition: transform .3s cubic-bezier(.22, .9, .3, 1.1), opacity .25s;
}
#dicePop.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
#dicePop span { font-size: 15px; color: #d9d2ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dicePop b { font-size: 34px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { #dicePop { transition: none; } }

/* sussurri */
.msg.whisper { border-left: 3px solid #b48cff; background: color-mix(in srgb, #b48cff 12%, transparent); font-style: italic; }
.msg.whisper .wh { font-style: normal; font-size: 12px; color: #c9b2ff; }
/* griglia: regolazione fine e «adatta alla griglia della mappa» */
.gridForm .fine input[type=number] { width: 80px; }
.gridForm .gridFit { flex-wrap: wrap; gap: 6px; }
#viewport.fitGrid { cursor: crosshair; }
/* cartelle delle scene */
.sceneFolder > button.pick span:first-child { color: var(--muted); white-space: nowrap; }
.sceneFolder.sopra { outline: 2px dashed var(--accent); outline-offset: -2px; }
#sceneFolderNew { display: block; width: 100%; margin-top: 4px; padding: 7px 10px; border: 1px dashed var(--line); border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
#sceneFolderNew:hover { background: var(--panel-3); }