/* ---------- Telefoni, tablet e DeX (vedi mobile.js) ----------
   ui-touch  si comanda con le dita: comandi più grandi, niente cose che compaiono solo al passaggio del mouse
   ui-tel    schermo piccolo: pannelli a tutto schermo, strumenti che salgono dal basso
   Con il mouse (anche in DeX) e sugli schermi grandi resta tutto come sul computer. */

.soloTocco { display: none !important; }
.ui-touch .soloTocco { display: revert !important; }

/* tacche, margini e bordi arrotondati dei telefoni */
#netBar { top: calc(12px + env(safe-area-inset-top)); }
#dock { margin-bottom: env(safe-area-inset-bottom); }
#toolDrawer { margin-left: env(safe-area-inset-left); }
#sideToggle { margin-right: env(safe-area-inset-right); }
/* con la tastiera aperta il pannello sta nella parte di schermo visibile (mobile.js) */
.ui-touch #side { top: var(--vv-top, 0px); bottom: auto; height: var(--vv-h, 100%); }
#sideBody { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }

/* ======================= Con le dita ======================= */
.ui-touch, .ui-touch body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ui-touch #viewport { touch-action: none; }
.ui-touch #side, .ui-touch #dock, .ui-touch #toolDrawer, .ui-touch .tool, .ui-touch #ctx, .ui-touch .sheetWin .stitle {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ui-touch img { -webkit-touch-callout: none; }
.ui-touch input, .ui-touch textarea, .ui-touch [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
/* sotto i 16px l'iPhone ingrandisce la pagina quando scrivi */
.ui-touch input[type=text], .ui-touch input[type=number], .ui-touch textarea, .ui-touch select { font-size: max(16px, 1em); }

/* maniglie di ridimensionamento più grandi, ma FUORI dal segnalino: il segnalino si deve poter
   sempre prendere e trascinare dal centro, anche quando sullo schermo è piccolo */
.ui-touch .handle[data-d="n"], .ui-touch .handle[data-d="s"] { height: calc(20px * var(--inv, 1)); }
.ui-touch .handle[data-d="n"] { top: calc(-20px * var(--inv, 1)); }
.ui-touch .handle[data-d="s"] { bottom: calc(-20px * var(--inv, 1)); }
.ui-touch .handle[data-d="e"], .ui-touch .handle[data-d="w"] { width: calc(20px * var(--inv, 1)); }
.ui-touch .handle[data-d="e"] { right: calc(-20px * var(--inv, 1)); }
.ui-touch .handle[data-d="w"] { left: calc(-20px * var(--inv, 1)); }
.ui-touch .handle[data-d="nw"], .ui-touch .handle[data-d="ne"], .ui-touch .handle[data-d="sw"], .ui-touch .handle[data-d="se"] {
  width: calc(26px * var(--inv, 1)); height: calc(26px * var(--inv, 1)); border-radius: 50%;
}
.ui-touch .handle[data-d="nw"] { left: calc(-24px * var(--inv, 1)); top: calc(-24px * var(--inv, 1)); }
.ui-touch .handle[data-d="ne"] { right: calc(-24px * var(--inv, 1)); top: calc(-24px * var(--inv, 1)); }
.ui-touch .handle[data-d="sw"] { left: calc(-24px * var(--inv, 1)); bottom: calc(-24px * var(--inv, 1)); }
.ui-touch .handle[data-d="se"] { right: calc(-24px * var(--inv, 1)); bottom: calc(-24px * var(--inv, 1)); }

/* trascinare con il dito: le barre delle finestre e gli strumenti fuori dal menu non fanno scorrere la pagina;
   uno strumento nel menu si «prende» tenendolo premuto (si ingrandisce un po') */
.ui-touch .sheetWin .stitle, .ui-touch body > .tool .tgrip, .ui-touch .tool.dragging, .ui-touch .tool.preso { touch-action: none; }
.tool.preso { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(124, 92, 255, .9)); transition: transform .12s, filter .12s; }

/* quello che col mouse compare passandoci sopra, con le dita si vede sempre */
.ui-touch .asset .del, .ui-touch .asset .bgBtn { opacity: 1; width: 28px; height: 28px; font-size: 15px; }
.ui-touch .sceneRow > button:not(.pick) { opacity: .85; padding: 10px; }
.ui-touch #dockHandle { opacity: 1; }
.ui-touch #sideGrip { display: none; }

/* bersagli più comodi */
.ui-touch #ctx { min-width: 220px; max-width: min(320px, 92vw); max-height: 80vh; overflow-y: auto; }
.ui-touch #ctx button { padding: 12px 16px; font-size: 15px; }
.ui-touch .tab { padding: 12px 4px; }
.ui-touch .seg button, .ui-touch .pane .btn, .ui-touch .chip button { min-height: 40px; }
.ui-touch .sheetItem { padding: 10px 12px; }
.ui-touch .sceneRow > button.pick { padding: 12px 10px; }
.ui-touch .sheetWin .sx { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
.ui-touch .sheetWin .sdot { width: 24px; height: 24px; }
.ui-touch .sheetWin .rb, .ui-touch .sheetWin .chipRoll { padding: 5px 11px; }
.ui-touch #dice button:not(#diceToggle) { padding: 10px 11px; }
.ui-touch .tool.glass button:not(.tgrip) { padding: 10px 11px; }
.ui-touch .swatches button, .ui-touch .tool.glass .sw { width: 32px; height: 32px; }

/* il pulsante «selezione» nel dock */
#selArea {
  width: 44px; height: 44px; border-radius: 22px; font-size: 20px; cursor: pointer; flex: none;
  background: rgba(18, 21, 28, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 22px rgba(0, 0, 0, .4);
}
#selArea.on { background: rgba(47, 140, 255, .6); box-shadow: 0 0 14px rgba(47, 140, 255, .8); }

/* ======================= Schermo piccolo (telefono) ======================= */
/* menu laterale: a tutto schermo in verticale; il pallino diventa una X in alto a destra */
@media (max-width: 599px) {
  .ui-tel #side { width: 100vw; }
  .ui-tel #sideToggle {
    top: calc(10px + env(safe-area-inset-top)); right: 10px; transform: none; width: 44px; height: 44px;
    border-radius: 50%; border-right: 1px solid var(--line); opacity: 1;
  }
  .ui-tel body.menu-open #sideToggle, .ui-tel.menu-open #sideToggle { right: 10px; }
  .ui-tel body.menu-open .tabs { padding-right: 62px; }
}
.ui-tel .pane { margin: 8px; padding: 10px; }
.ui-tel .tabs { padding: 8px; gap: 6px; }
.ui-tel #assetGrid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }

/* strumenti a sinistra. Niente scorrimento dentro il menu: su iPhone/iPad (WebKit) un contenitore che
   scorre taglia tutto quello che c'è dentro, anche i pannelli aperti e la linguetta, che sono «fixed».
   Sempre una sola colonna: se le icone non ci stanno, mobile.js le rimpicciolisce (--k); solo se
   diventerebbero minuscole vanno su più colonne (--righe). Le caselle degli strumenti nascosti dai
   permessi («spento») non occupano posto. */
#toolDrawer .slot.spento { display: none; }
.ui-tel #toolDrawer {
  top: auto; bottom: calc(var(--dock-h, 48px) + 30px + env(safe-area-inset-bottom)); transform: none; left: 0;
  /* niente effetti sul contenitore: altrimenti gli strumenti aperti non potrebbero uscirne */
  -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(18, 21, 28, .82);
  transition: transform .3s cubic-bezier(.22, .8, .3, 1);
}
.ui-tel #toolDrawer.closed { transform: translateX(-100%); }
.ui-tel #toolDrawer .slots {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--righe, 20), calc(52px * var(--k, 1)));
  grid-auto-columns: calc(52px * var(--k, 1)); gap: calc(8px * var(--k, 1)) 8px;
}
.ui-tel #toolDrawer .slot { width: calc(52px * var(--k, 1)); height: calc(52px * var(--k, 1)); }
.ui-tel #toolDrawer .slot > .tool:not(.open) { transform: scale(var(--k, 1)); transform-origin: 0 0; }
/* col pannello laterale a tutto schermo (telefono in verticale) menu e barra in basso non coprono niente */
@media (max-width: 599px) {
  .ui-tel body.menu-open #toolDrawer, .ui-tel body.menu-open #dock, .ui-tel body.menu-open #dockZone { visibility: hidden; }
}
/* uno strumento aperto sale dal basso, largo quanto lo schermo */
.ui-tel .tool.open, .ui-tel #dice.open, .ui-tel #toolDrawer .slot > .tool.open {
  position: fixed !important; left: calc(8px + env(safe-area-inset-left)) !important; right: calc(8px + env(safe-area-inset-right)) !important;
  top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  width: auto !important; height: auto !important; max-height: 72vh; max-height: 72dvh;
  overflow-y: auto; overscroll-behavior: contain; border-radius: 20px; z-index: 100020 !important;
  background: rgba(18, 21, 28, .94);
}
.ui-tel .tool.open .tbody, .ui-tel #dice.open #diceBody { width: auto !important; }
.ui-tel #zoomBox.open { width: auto !important; height: 52px !important; }

/* in basso: la scena e i livelli. Niente scorrimento (su iPhone taglierebbe il menu delle scene, che sta
   dentro): pulsanti più compatti e, se proprio non ci stanno, si va a capo. */
.ui-tel #dock {
  left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); bottom: 8px; transform: none;
  justify-content: flex-start; align-items: flex-end; flex-wrap: wrap-reverse; gap: 6px; padding: 2px; pointer-events: none;
}
.ui-tel #dock > * { pointer-events: auto; }
.ui-tel #toolDrawer::-webkit-scrollbar { display: none; }
.ui-tel #dock.collapsed { transform: translateY(calc(100% + 24px)); }
/* la linguetta sta subito sopra la barra, anche quando questa va a capo su più righe (--dock-h, extras.js);
   la zona attorno non prende i tocchi, che arrivano ai pulsanti sotto */
.ui-tel #dockZone { bottom: calc(var(--dock-h, 48px) + 8px + env(safe-area-inset-bottom)); width: 64px; pointer-events: none; }
.ui-tel #dockZone #dockHandle { pointer-events: auto; }
.ui-tel #dockZone.collapsed { bottom: env(safe-area-inset-bottom); }
/* con il menu delle scene aperto la linguetta della barra non copre «Torna alla home» */
body:has(#sceneMenu:not([hidden])) #dockZone { visibility: hidden; }
.ui-tel #sceneBtn, .ui-tel #layerSwitch, .ui-tel #targetSwitch, .ui-tel #publicBadge, .ui-tel #selArea { height: 42px; flex: none; }
/* i livelli con le dita: pulsanti alti 44 px dentro una pillola alta 48 (prima la pillola era più bassa dei
   pulsanti e quello acceso usciva fuori, sopra gli altri) */
.ui-touch #layerSwitch, .ui-touch #targetSwitch { height: 48px; padding: 2px; }
.ui-touch #layerSwitch button, .ui-touch #targetSwitch button { min-height: 44px; height: 44px; }
.ui-tel #sceneBtn { max-width: 34vw; padding: 0 10px; gap: 4px; }
.ui-tel #sceneName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tel #layerSwitch button, .ui-tel #targetSwitch button { padding: 0 8px; font-size: 12.5px; }
@media (max-width: 400px) { .ui-tel #sceneIcon { display: none; } .ui-tel #layerSwitch button, .ui-tel #targetSwitch button { padding: 0 6px; font-size: 12px; } }
.ui-tel #sceneMenu { position: fixed; left: 8px; right: 8px; bottom: calc(60px + env(safe-area-inset-bottom)); min-width: 0; max-height: 60vh; max-height: 60dvh; overflow-y: auto; }

/* le schede dei personaggi e le finestre della chat: a tutto schermo */
.ui-tel .sheetWin:not(.icon):not(.min) {
  left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important;
  max-width: none; max-height: none; min-width: 0; border-radius: 0; border-width: 0; resize: none;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box;
}
.ui-tel .sheetWin .stitle { padding: 8px 12px; }
.ui-tel .sheetWin .sbody { padding: 10px; }
/* una colonna larga quanto lo schermo: «minmax(0, 1fr)» e non «1fr», che si allargava fino al riquadro più
   largo e faceva uscire la scheda a destra (su iPhone si vedeva tagliata a sinistra) */
.ui-tel .sheetWin .sgrid, .ui-tel .sheetWin .invgrid { grid-template-columns: minmax(0, 1fr); }
.ui-tel .sheetWin .sbody { overflow-x: hidden; }
.ui-tel .sheetWin .abil { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ui-tel .sheetWin .ab b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* finestre di dialogo */
.ui-tel dialog { max-width: calc(100vw - 16px) !important; max-height: 88vh; max-height: 88dvh; overflow-y: auto; box-sizing: border-box; padding: 16px !important; }
.ui-tel #pickGrid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.ui-tel #pickGrid img { width: 100%; height: auto; aspect-ratio: 1; }
.ui-tel #ctx { max-width: calc(100vw - 16px); }
.ui-tel #netBar { max-width: calc(100vw - 16px); font-size: 12.5px; }

/* le scorciatoie da tastiera non servono a chi tocca (né sul telefono, anche prima del primo tocco) */
.ui-touch .dHint, .ui-tel .dHint { display: none; }
@media (pointer: coarse) { html:not(.ui-mouse) .dHint { display: none; } }

/* Fase 4: con le dita ogni comando è almeno 44×44 (linee guida Apple e Android).
   Restano più piccoli solo i pallini dentro le schede, che si ingrandiscono col pizzico. */
@media (pointer: coarse) {
  .ui-touch .tab, .ui-touch .seg button, .ui-touch .pane .btn, .ui-touch .chip button,
  .ui-touch #ctx button, .ui-touch .sceneRow > button, .ui-touch #dice button:not(#diceToggle),
  .ui-touch .tool.glass button:not(.tgrip), .ui-touch dialog button, .ui-touch .chatForm button { min-height: 44px; min-width: 44px; }
  .ui-touch .sheetWin .sx { width: 44px; height: 44px; }
  .ui-touch .sheetWin .sdot { width: 28px; height: 28px; }
  .ui-touch .asset .del, .ui-touch .asset .bgBtn { width: 36px; height: 36px; }
  .ui-touch .swatches button, .ui-touch .tool.glass .sw { width: 40px; height: 40px; }
  .ui-touch #sceneBtn, .ui-touch #layerSwitch button, .ui-touch #targetSwitch button { min-height: 44px; }
  .ui-touch input[type=checkbox]:not(.sK), .ui-touch input[type=radio]:not(.sK) { min-width: 22px; min-height: 22px; }   /* i pallini della scheda Standard hanno la loro misura */
  .ui-touch input[type=range] { min-height: 44px; }
}
/* «Nuova scheda» sul telefono: gli import su una riga, Annulla e Crea sotto */
.ui-tel #sheetForm .dialogBtns { flex-wrap: wrap; gap: 8px; }
.ui-tel #sheetForm .dialogBtns > span { flex: 1 0 100% !important; height: 0; }
.ui-tel #sheetImport, .ui-tel #sheetImportPdf, .ui-tel #sheetCancel, .ui-tel #sheetForm button[type=submit] { flex: 1 1 40%; }
/* la lente sul telefono: si apre in basso come una barra alta 52px (prima diventava alta 2px e spariva) */
.ui-tel #toolDrawer .slot > #zoomBox.open, .ui-tel body > #zoomBox.open { height: 52px !important; width: auto !important; border-radius: 26px; }

/* Pannello delle impostazioni: niente esce a destra. I campi di testo prendono lo spazio che resta
   (e possono stringersi), le etichette restano su una riga, le righe di colori vanno a capo. */
.pane .row { min-width: 0; flex-wrap: wrap; }
.pane label.row { flex-wrap: nowrap; white-space: nowrap; }
.pane .row input[type=text], .pane .row input[type=number], .pane .row select { flex: 1 1 60px; min-width: 0; width: auto; }
.pane .seg button { min-width: 0; white-space: normal; line-height: 1.15; }

/* Compendio sul telefono in orizzontale: lo schermo è basso, filtri e pulsanti stanno dietro «Filtri ▾»
   così l'elenco dei risultati ha quasi tutto lo spazio */
#compFiltriBtn { display: none; }
@media (max-height: 499px) {
  .ui-tel #compFiltriBtn { display: inline-flex; flex: none; padding: 6px 10px; }
  .ui-tel #tab-comp:not(.filtriAperti) .compFiltri, .ui-tel #tab-comp:not(.filtriAperti) .compAzioni { display: none; }
  .ui-tel #tab-comp .compCerca { flex-wrap: nowrap; }
  .ui-tel #tab-comp #compStato:empty { display: none; }
}
/* il menu delle scene aperto sta sopra il menu degli strumenti */
body:has(#sceneMenu:not([hidden])) #dock { z-index: 100008; }
/* le schede del pannello laterale sul telefono: le icone strette, il nome solo su quella aperta, e non si taglia */
.ui-tel .tabs { gap: 4px; }
.ui-tel .tab:not(.active) { flex: 0 0 40px; padding-inline: 0; }
.ui-tel .tab.active { flex: 1 1 auto; padding-inline: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* le linguette delle pagine della scheda con le dita (alte 44 px): il testo al centro, non in alto */
.ui-touch .sheetWin .stabs > button { display: inline-flex; align-items: center; justify-content: center; }