:root{ --ink:#111; }
*{ box-sizing:border-box }
body{ margin:0; background:#f5f5f5; color:var(--ink); font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial }


/* Campi cliccabili sopra l’immagine */
.fld, .toolbar, fieldset{ pointer-events:auto }
.fld{ position:absolute; display:grid; gap:4px }
.fld>span{ display:none }
.fld input, .fld select, .fld textarea{
  width:100%; padding:6px 8px; border: 0;
}
.fld textarea{ resize:vertical }

/* Sblocca l’header: niente grid/flex qui, altrimenti “top” non funziona */
.fg--header{ position:static !important; display:block !important; }

/* --- POSIZIONI (base immagine 930px) --- */
/* Header (riga 1) */
.fld--nome       { left: 6.2%;  top: 7.3%; width: 35.5%; }
.fld--classe     { left: 43.9%; top: 5.1%; width: 13.0%; }
.fld--level      { left: 57.3%; top: 5.1%; width:  5.7%; }
.fld--background { left: 63.5%; top: 5.1%; width: 15.5%; }
.fld--player     { left: 80.7%; top: 5.1%; width: 10.0%; }

/* Header (riga 2) */
.fld--race       { left: 43.9%; top: 8.7%; width: 15.3%; }
.fld--align      { left: 60.0%; top: 8.7%; width: 17.5%; }
.fld--xp         { left: 75.7%; top: 8.7%; width: 10.0%; }
.fld--xpnext{    position:absolute; left:86.5%; top:8.7%; width:8%; height:2.6%; }

/* input “appiattito” come gli altri numeri */
.fld--pp input,
.fld--xpnext input{
  width:100%; height:100%;
  border:0; background:transparent; text-align:center;
  font-weight:300; font-size:16px; letter-spacing:.4px; outline:none; box-shadow:none;
}



/* Dado vita */
.fld--hitdie     { left: 38.0%; top: 41.4%; width: 10%; }

/* Tiri salvezza (colonna sinistra) */
.fg--saves       { position:absolute; left: 15.0%; top: 25%; width: 15.5%; border:0; padding:0; background:transparent }
.fg--saves label { display:flex; align-items:center; gap:8px; margin:4px 0; line-height:1; font-size:0;}

/* Attacchi & Incantesimi (box centrale) – usa se hai il textarea relativo */
.fld--attacks    { left: 35.7%; top: 48.0%; width: 29.6%; height: 23.6%; }



/* (Se/Quando aggiungi PF/CA/INI/VEL nella pagina 1, ti anticipo le posizioni) */
.fld--ac         { left: 38%; top: 17.5%; width:  5.0%; height: 4%}
.fld--init       { left: 47.5%; top: 17.5%; width:  5.0%; height: 4%}
.fld--speed      { left: 56%; top: 17.5%; width:  8.0%; height: 4%}

/*---------------------------*/
.fld--ac  input,
.fld--init  input,
.fld--speed input{
height:100%;
  border:0;
  background:transparent;
  text-align:center;
  font-weight:700;
  font-size:20px;
  letter-spacing:.5px;
  outline:none; box-shadow:none;
  pointer-events:none;
}

.fld--ac input::placeholder,
.fld--init  input::placeholder,
.fld--speed input::placeholder{
  color: transparent;
}
/*--------------------------------*/


/* TS a pallino */

.fg--saves input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:11px; height:11px; border:1px solid #222; border-radius:50%;
  background:#fff; cursor:pointer;
}
.fg--saves input[type="checkbox"]:checked{ background:#222; }

/* Abilità (colonna sinistra, valori grandi) – posizioni indicative */
.fld--str { left: 5.1%; top: 18.5%; width: 7%; height: 4.0%; }
.fld--dex { left: 5.1%; top: 27.7%; width: 7%; height: 4.0%; }
.fld--con { left: 5.1%; top: 36.8%; width: 7%; height: 4.0%; }
.fld--int { left: 5.1%; top: 45.9%; width: 7%; height: 4.0%; }
.fld--wis { left: 5.1%; top: 55.2%; width: 7%; height: 4.0%; }
.fld--cha { left: 5.1%; top: 64.2%; width: 7%; height:4.0%; }

/* stile del numero dentro la casella */
.fld--str input,
.fld--dex input,
.fld--con input,
.fld--int input,
.fld--wis input,
.fld--cha input{
  height: 100%;
  padding: 0 6px;
  text-align: center;
  font-weight: 700;
  font-size: 28px;          /* grande come il box */
  line-height: 1;
  letter-spacing: .5px;
  background: rgba(255,255,255,.95);
  border: 1px solid #bbb;
  border-radius: 8px;
}

/* rimuovi frecce dei number */
.fld--str input::-webkit-outer-spin-button,
.fld--str input::-webkit-inner-spin-button,
.fld--dex input::-webkit-outer-spin-button,
.fld--dex input::-webkit-inner-spin-button,
.fld--con input::-webkit-outer-spin-button,
.fld--con input::-webkit-inner-spin-button,
.fld--int input::-webkit-outer-spin-button,
.fld--int input::-webkit-inner-spin-button,
.fld--wis input::-webkit-outer-spin-button,
.fld--wis input::-webkit-inner-spin-button,
.fld--cha input::-webkit-outer-spin-button,
.fld--cha input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fld--str input[type=number],
.fld--dex input[type=number],
.fld--con input[type=number],
.fld--int input[type=number],
.fld--wis input[type=number],
.fld--cha input[type=number]{ appearance:textfield; }
/* Evidenziazione prerequisiti non rispettati */
/* Prerequisiti: ok (verde) / ko (rosso) */
.fld.valid input{
  border-color:#16a34a !important;
  box-shadow:0 0 0 2px rgba(22,163,74,.18) inset, 0 0 0 2px rgba(22,163,74,.12);
  background:#f6fff8;
}
.fld.invalid input{
  border-color:#dc2626 !important;
  box-shadow:0 0 0 2px rgba(220,38,38,.18) inset, 0 0 0 2px rgba(220,38,38,.15);
  background:#fff5f5;
}

.fld.invalid input::placeholder{ color:#b91c1c; }

/* 1) Caselle caratteristiche: look pulito */
.fld--str input,
.fld--dex input,
.fld--con input,
.fld--int input,
.fld--wis input,
.fld--cha input{
  border: 0;                     /* niente bordo */
  background: transparent;       /* sfondo invisibile */
  outline: none; box-shadow:none;
}

/* 2) Nascondi il placeholder (FOR/DES/...) */
.fld--str input::placeholder,
.fld--dex input::placeholder,
.fld--con input::placeholder,
.fld--int input::placeholder,
.fld--wis input::placeholder,
.fld--cha input::placeholder{
  color: transparent;
}

/* 3) Mantieni gli stati: rosso/verde con bordo visibile */
.fld.valid input{
  border: 2px solid #16a34a !important;
  box-shadow: 0 0 0 2px rgba(22,163,74,.12);
  background: #f6fff8;
}
.fld.invalid input{
  border: 2px solid #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,.15);
  background: #fff5f5;
}
/* ===== Modificatori (cerchi sotto le caratteristiche) ===== */
.fld--strmod { left:2.8%; top:22.2%; width:11.6%; height:3.2%; }
.fld--dexmod { left:2.8%; top:31.4%; width:11.6%; height:3.2%; }
.fld--conmod { left:2.8%; top:40.5%; width:11.6%; height:3.2%; }
.fld--intmod { left:2.8%; top:49.6%; width:11.6%; height:3.2%; }
.fld--wismod { left:2.8%; top:58.9%; width:11.6%; height:3.2%; }
.fld--chamod { left:2.8%; top:68%; width:11.6%; height:3.2%; }

.fld--strmod input,
.fld--dexmod input,
.fld--conmod input,
.fld--intmod input,
.fld--wismod input,
.fld--chamod input{
  height:100%;
  border:0;
  background:transparent;
  text-align:center;
  font-weight:500;
  font-size:18px;
  letter-spacing:.5px;
  outline:none; box-shadow:none;
  pointer-events:none; /* non editabili */
}
/* Bonus di competenza (riquadro sotto ispirazione) */
.fld--prof { left: 11.2%; top: 19.4%; width: 12.0%; height: 4.9%; }
.fld--prof input{
  height:100%;
  border:0;
  background:transparent;
  text-align:center;
  font-weight:500;
  font-size:20px;
  letter-spacing:.5px;
  outline:none; box-shadow:none;
}

/* Valori TS (accanto ai pallini) */
.fld--save-str { left: 16.4%; top: 24.6%; width: 5.5%; height: 2.9%; }
.fld--save-dex { left: 16.4%; top: 26.3%; width: 5.5%; height: 2.9%; }
.fld--save-con { left: 16.4%; top: 28%; width: 5.5%; height: 2.9%; }
.fld--save-int { left: 16.4%; top: 29.7%; width: 5.5%; height: 2.9%; }
.fld--save-wis { left: 16.4%; top: 31.5%; width: 5.5%; height: 2.9%; }
.fld--save-cha { left: 16.4%; top: 33.2%; width: 5.5%; height: 2.9%; }

.fld--save-str input,
.fld--save-dex input,
.fld--save-con input,
.fld--save-int input,
.fld--save-wis input,
.fld--save-cha input{
  height:100%;
  border:0;
  background:transparent;
  text-align:center;
  font-weight:300;
  font-size:16px;
  letter-spacing:.4px;
  outline:none; box-shadow:none;
  pointer-events:none;
}

/* Privilegi & Tratti (riquadro destro lungo) */
.fld--features{ left: 67%; top: 47.7%; width: 28%; height: 56%; }
.fld--features textarea{
  width:100%; height:100%; border:0; background:transparent;
  resize:none; font-size:12px; line-height:1.44; outline:none;
}


/* colonna pallini (x) e numeri (x) */
:root{
  --skills-x-bullet: 15.2%;   /* X pallini */
  --skills-x-value:  16%;   /* X numeri */
  --skills-top-first: 40.5%;  /* Y prima riga (centro) */
  --skills-row:       1.725%;  /* distanza verticale righe */
 }
 
/* 18 righe – ordine ITA (pallini) */
.pg-skill--acr { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) +  0*var(--skills-row)) !important; }
.pg-skill--anh { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) +  1*var(--skills-row)) !important; }
.pg-skill--arc { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) +  2*var(--skills-row)) !important; }
.pg-skill--ath { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) +  3*var(--skills-row)) !important; }
.pg-skill--ste { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) +  4*var(--skills-row)) !important; }
.pg-skill--inv { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) +  5*var(--skills-row)) !important; }
.pg-skill--dec { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) +  6*var(--skills-row)) !important; }
.pg-skill--int { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) +  7*var(--skills-row)) !important; }
.pg-skill--prf { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) +  8*var(--skills-row)) !important; }
.pg-skill--ins { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) +  9*var(--skills-row)) !important; }
.pg-skill--med { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) + 10*var(--skills-row)) !important; }
.pg-skill--nat { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) + 11*var(--skills-row)) !important; }
.pg-skill--per { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) + 12*var(--skills-row)) !important; }
.pg-skill--prs { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) + 13*var(--skills-row)) !important; }
.pg-skill--slo { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) + 14*var(--skills-row)) !important; }
.pg-skill--rel { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) + 15*var(--skills-row)) !important; }
.pg-skill--sur { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) + 16*var(--skills-row)) !important; }
.pg-skill--his { left:var(--skills-x-bullet) !important; top:calc(var(--skills-top-first) + 17*var(--skills-row)) !important; }

/* 18 righe – numeri */
.fld--skill-acrobatics      { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) +  0*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-animal-handling { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) +  1*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-arcana          { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) +  2*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-athletics       { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) +  3*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-stealth         { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) +  4*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-investigation   { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) +  5*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-deception       { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) +  6*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-intimidation    { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) +  7*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-performance     { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) +  8*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-insight         { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) +  9*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-medicine        { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) + 10*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-nature          { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) + 11*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-perception      { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) + 12*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-persuasion      { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) + 13*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-sleight-of-hand { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) + 14*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-religion        { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) + 15*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-survival        { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) + 16*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }
.fld--skill-history         { left:var(--skills-x-value) !important; top:calc(var(--skills-top-first) + 17*var(--skills-row)) !important; width:5.5%; height:2.6%; transform:translateY(-50%); }

.fld--skill-acrobatics input,
.fld--skill-animal-handling input,
.fld--skill-arcana input,
.fld--skill-athletics input,
.fld--skill-deception input,
.fld--skill-history input,
.fld--skill-insight input,
.fld--skill-intimidation input,
.fld--skill-investigation input,
.fld--skill-medicine input,
.fld--skill-nature input,
.fld--skill-perception input,
.fld--skill-performance input,
.fld--skill-persuasion input,
.fld--skill-religion input,
.fld--skill-sleight-of-hand input,
.fld--skill-stealth input,
.fld--skill-survival input{
  height:100%; border:0; background:transparent; text-align:center;
  font-weight:300; font-size:16px; letter-spacing:.4px; outline:none; box-shadow:none; pointer-events:none;
}
/* Pallini */
.pg-skill{
  position:absolute; width:12px; height:12px;
  z-index:20; pointer-events:auto; transform:translateY(-50%);
}
.pg-skill input{
  appearance:none; -webkit-appearance:none;
  width:100%; height:100%; border:1px solid #222; border-radius:50%;
  background:#fff; cursor:pointer;
}
.pg-skill input:checked{ background:#222; }

/* Hotspot nome abilità (per ora visibili con bordo, poi lo togliamo) */
.pg-skillname{
  position:absolute; left:20.3%; width:11%;
  height:1.7%; transform:translateY(-50%);
  
  z-index:25; cursor:help; background:transparent;
  pointer-events: auto;          /* ⬅️ fondamentale */
}

/* stesso Y delle 18 righe */
.pg-skillname--acr { top:calc(var(--skills-top-first) +  0*var(--skills-row)); }
.pg-skillname--anh { top:calc(var(--skills-top-first) +  1*var(--skills-row)); }
.pg-skillname--arc { top:calc(var(--skills-top-first) +  2*var(--skills-row)); }
.pg-skillname--ath { top:calc(var(--skills-top-first) +  3*var(--skills-row)); }
.pg-skillname--ste { top:calc(var(--skills-top-first) +  4*var(--skills-row)); }
.pg-skillname--inv { top:calc(var(--skills-top-first) +  5*var(--skills-row)); }
.pg-skillname--dec { top:calc(var(--skills-top-first) +  6*var(--skills-row)); }
.pg-skillname--int { top:calc(var(--skills-top-first) +  7*var(--skills-row)); }
.pg-skillname--prf { top:calc(var(--skills-top-first) +  8*var(--skills-row)); }
.pg-skillname--ins { top:calc(var(--skills-top-first) +  9*var(--skills-row)); }
.pg-skillname--med { top:calc(var(--skills-top-first) + 10*var(--skills-row)); }
.pg-skillname--nat { top:calc(var(--skills-top-first) + 11*var(--skills-row)); }
.pg-skillname--per { top:calc(var(--skills-top-first) + 12*var(--skills-row)); }
.pg-skillname--prs { top:calc(var(--skills-top-first) + 13*var(--skills-row)); }
.pg-skillname--slo { top:calc(var(--skills-top-first) + 14*var(--skills-row)); }
.pg-skillname--rel { top:calc(var(--skills-top-first) + 15*var(--skills-row)); }
.pg-skillname--sur { top:calc(var(--skills-top-first) + 16*var(--skills-row)); }
.pg-skillname--his { top:calc(var(--skills-top-first) + 17*var(--skills-row)); }


/* Valori */
.fld[class*="skill-"]{ position:absolute; z-index:10; pointer-events:none; }
.fld[class*="skill-"] input{
  height:100%; border:0; background:transparent; text-align:center;
  font-weight:300; font-size:16px; letter-spacing:.4px; outline:none; box-shadow:none; pointer-events:none;
}

/* ===== CHOICE MODAL – look & feel ===== */
.cm.hidden{ display:none; }
.cm{ position:fixed; inset:0; z-index:99999; pointer-events:auto; }
.cm__backdrop{ position:absolute; inset:0; background:rgba(15,18,23,.45); backdrop-filter: blur(2px); }
.cm__card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,92vw); max-height:80vh; overflow:auto;
  background:#fff; border-radius:14px; padding:18px 18px 14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.2);
  font: 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}
.cm__title{ margin:0 0 4px; font-size:18px; font-weight:800; letter-spacing:.2px; color:#0f1217; }
.cm__hint{ margin:0 0 12px; color:#5b6472; }
.cm__grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.cm__opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid #d9dee6; border-radius:10px; background:#fafbff; transition:.15s; }
.cm__opt:hover{ border-color:#bdc6d4; background:#f4f7ff; }
.cm__opt input{ width:18px; height:18px; }
.cm__bar{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.cm__bar button{
  padding:8px 14px; border-radius:10px; border:1px solid #c6ccd6; background:#f6f7fb; cursor:pointer;
}
#cm-confirm{ background:#1f62ff; border-color:#1f62ff; color:#fff; font-weight:700; }
#cm-confirm[disabled]{ opacity:.55; cursor:not-allowed; }
.cm *{ pointer-events:auto; }


/* Tooltip abilità */
.skill-tip.hidden{ display:none; }
.skill-tip{
  position:fixed; z-index: 100000;
  max-width:min(320px, 70vw);
  background:#0f1220; color:#fff; padding:10px 12px; border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
  font: 13px/1.35 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.skill-tip b{ color:#bcd3ff; }
/* Rafforza contrasto opzioni nel modal */
.cm__opt span{ color:#0f1217; font-weight:600; opacity:1; }
.cm__opt{ color:#0f1217; opacity:1; }
.cm__opt input{ accent-color:#1f62ff; } /* migliora il check */
/* ASI modal – migliora contrasto radio */
#asi-modal label{ color:#0f1217; font-weight:600; opacity:1; }
#asi-modal input[type="radio"]{ accent-color:#1f62ff; }
#asi-modal .asi-modes{ display:flex; gap:12px; align-items:center; }

/* Dado per tirare le caratteristiche (d20) */
.dice-btn{
  position:absolute;
 left: 6.7%;   /* sposta in orizzontale */
  top: 14.2%;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid #c9ccd4;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:50; pointer-events:auto;
  color:#1f2937;               /* colore tratto del d20 */
  transition:transform .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.dice-btn:hover{
  transform:translateY(-1px) rotate(-5deg);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  border-color:#9aa3b2;
  color:#1f62ff;               /* highlight del d20 */
}
.dice-btn:active{ transform:scale(.96); }
.dice-btn .d20{ display:block; }

/* stile select header */
.fg--header select{
  border:0; background:transparent; border-bottom:1px solid #cfd6e3;
  padding:4px 6px; border-radius:0; outline:none;
}
.fg--header select:focus{ border-bottom-color:#1f62ff; }

/* colore placeholder (prima option disabled) */
.fg--header select option[disabled][hidden]{ color:#99a3b3; }

.cm__opt.is-disabled{
  opacity:.45;
  filter: grayscale(1);
  border-style: dashed;
  pointer-events: none;          /* ⬅️ niente click sul label */
}
.cm__opt.is-disabled input{
  cursor: not-allowed;
}

.fld--armor  { left: 36%; top: 13.0%; width: 10%; }
.fld--shield { left: 33.0%; top: 22.0%; width: 8%; }
.fld--armor select{ width:100%; }

/* --- Posizionamento rapido (modifica % dopo) --- */
.fld--pp{        position:absolute; left:3.2%; top:74.4%; width:6%;  height:2.6%; }



/* Select più puliti (classe/razza/allineamento) */
#fld-class, #fld-race, #fld-align{
  border:0; background:transparent; outline:none; font-weight:500; color:#333;
}
#fld-class:focus, #fld-race:focus, #fld-align:focus{ outline:none; }

/* Pulsanti modale un filo più “moderni” */
.cm__bar button{ background:#fff; border:1px solid #ccc; }
.cm__bar button:hover{ border-color:#999; }

.ability-bad  { outline:2px solid #b91c1c; border-radius:10px; }
.ability-good { outline:2px solid #15803d; border-radius:10px; }

/* --- XP (attuali) --- */
.fld--xp{
  position:absolute;
  left:78.2%;   /* sposta orizzontalmente */
  top:8.2%;     /* sposta verticalmente */
  width:7%;
  height:2.6%;
  padding:0;
  border:1;
  background:transparent;
}
.fld--xp input{
  width:100%;
  height:100%;
  border:0;
  background:transparent;
  text-align:center;
  font-weight:600;
  font-size:14px;
  outline:none;
  box-shadow:none;
  -moz-appearance: textfield;
}
.fld--xp input::-webkit-outer-spin-button,
.fld--xp input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin:0;
}

/* separatore "/" tra XP attuali e XP prossimo livello */
.fld--xp::after {
  content: "/";
  position: absolute;
  right: -12px;   /* regola distanza orizzontale */
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  font-size: 14px;
}

/* --- XP prossimo livello --- */
.fld--xpnext{
  position:absolute;
  left:87.2%;
  top:8.2%;
  width:7%;
  height:2.6%;
  padding:0;
  border:0;
  background:transparent;
}
.fld--xpnext input{
  width:100%;
  height:100%;
  border:0;
  background:transparent;
  text-align:right;
  font-weight:600;
  font-size:14px;
  outline:none;
  box-shadow:none;
}




/* Wrapper: dimensioni "a rettangolo del foglio" */
.fg--profs {
  position:absolute; left:4%; top:78.8%; width:29%; bottom:4.2%;
}
.fg--equip {
  position:absolute; left:43.8%; top:74.4%; width:21%; bottom:4.2%;
}

/* Forza il label a riempire il wrapper (sennò resta stretto) */
.fg--profs .fld--profs,
.fg--equip .fld--equip{
  position:absolute; inset:0;
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
}

/* La textarea segue il label al 100% */
.fld--profs textarea,
.fld--equip textarea{
  background:transparent;
  border:0;           /* toglilo quando hai finito di allineare */
  box-sizing:border-box;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  overflow:hidden;                 /* niente scrollbar */
  resize:none;
  line-height:1.25;                /* micro-tweak 1.22–1.27 */
  padding:6px 8px;                 /* micro-tweak 4–10px */
  white-space:pre-wrap;
  font-size:12.5px;                /* micro-tweak 12–13px */
}

/* Nascondi l’etichetta testuale interna (sul foglio è già stampata) */
.fg--profs .fld--profs > span,
.fg--equip .fld--equip > span{ display:none; }


/* Badge "inserisci caratteristiche" */
.ability-badge {
  position:absolute;
  left: 1%;              /* regola se serve */
  top: 13%;             /* regola se serve */
  transform: translateY(-50%);
  background:#111;
  color:#fff;
  font-size:12px;
  line-height:1;
  padding:6px 10px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  z-index: 50;
}
.ability-badge b { font-weight:700; }
#btn-ability-roll.pulse {
  animation: rollPulse 1s ease-in-out infinite alternate;
}
@keyframes rollPulse {
  from { transform: translate(-50%,-50%) scale(1);   box-shadow: 0 0 0 rgba(33, 150, 243, 0.0); }
  to   { transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 6px 20px rgba(33, 150, 243, 0.35); }
}

/* --- COLONNA DETTAGLI --- */
.details{
  position:sticky; top:16px; margin-left:16px; width:min(360px, 30vw);
  background:#0f172a; color:#e5e7eb; border-radius:12px; padding:12px 12px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  max-height: calc(100vh - 32px); overflow:auto;
}
.details.hidden{ display:none; }
.details header{ display:flex; justify-content:space-between; align-items:center; }
.details h3{ margin:0; font-size:16px; font-weight:700; }
#details-close{ background:transparent; border:0; color:#e5e7eb; font-size:18px; cursor:pointer; }

/* NON stampare UI extra */
@media print{
  .pages-tabs, .details{ display:none !important; }
  .page-card{ position:static; transform:none; box-shadow:none; pointer-events:auto; }
}

.features-list{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; }
.features-list li{
  background:#f1f5f9; border:1px solid #cbd5e1; border-radius:8px; padding:6px 8px;
  cursor:pointer; font-size:13px;
}
.features-list li:hover{ background:#e2e8f0; } 

/* ===== Stack dei 3 fogli ===== */
.sheet-stack {
  position: relative;
  width: min(930px, 100vw);
  
  margin: 24px auto;
}
/* nuova regola: altezza proporzionale alla larghezza */
.sheet-stack::before {
  content: "";
  display: block;
  padding-top: calc(1226 / 930 * 100%); /* 166.9% circa */
}
/* le tre immagini della scheda */
.sheet-bg {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: auto;              /* servono i click */
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease, filter .2s ease, opacity .2s ease;
  transform-origin: 50% 100%;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}

/* offset a mazzetto */
.sheet-bg--p1 { transform: translate(-45px, 10px) rotate(-0.8deg); z-index: 3; }
.sheet-bg--p2 { transform: translate( 35px, 18px) rotate( 0.6deg); z-index: 2; }
.sheet-bg--p3 { transform: translate( 55px, 28px) rotate( 1.2deg); z-index: 1; }

/* quando una pagina è davanti */
.sheet-bg.is-front {
  transform: translate(0,0) rotate(0deg);
  z-index: 9;
  box-shadow: 0 10px 35px rgba(0,0,0,.28);
}
.sheet-bg:not(.is-front) { filter: saturate(.9) brightness(.96); }

/* overlay dei campi – “incollato” al wrapper e cliccabile solo su p1 */
.sheet-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  z-index: 10;
}
/* quando l’overlay è disabilitato (pagine 2/3) deve sparire del tutto */
.sheet-overlay.is-disabled{
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .2s ease, visibility .2s ease;
}

/* gruppi legati alla pagina corrente  */
.p1-only, .p2-only, .p3-only { display:none; }
.sheet-stack[data-front="p1"] .p1-only { display:block; }
.sheet-stack[data-front="p2"] .p2-only { display:block; }
.sheet-stack[data-front="p3"] .p3-only { display:block; }

/* ---- F O G L I O   3  (incantesimi) ---- */
/* header riga in alto */
.fld--spell-class   { left:  5%; top:  7%; width: 28%; }
.fld--spell-ability { left: 43%; top:  6.4%; width: 18%; }
.fld--spell-save    { left: 60%; top:  6.4%; width: 18%; }
.fld--spell-attack  { left: 78%; top:  6.4%; width: 16%; }

/* contatori */
.fld--cantrips-known{ left:  8%; top: 17.7%; width: 5%; height: 3%; }
.fld--slots-1       { left:  8%; top: 39%; width: 5%; height: 3%; }
.fld--slots-2       { left:  8%; top: 68.25%; width: 5%; height: 3%; }
.fld--slots-3       { left:  39.6%; top: 17.6%; width: 5%; height: 3%; }
.fld--slots-4       { left:  39.6%; top: 46.45%; width: 5%; height: 3%; }
.fld--slots-5       { left:  39.6%; top: 75.46%; width: 5%; height: 3%; }
.fld--slots-6       { left:  71%; top: 17.6%; width: 5%; height: 3%; }
.fld--slots-7       { left:  71%; top: 39.26%; width: 5%; height: 3%; }
.fld--slots-8       { left:  71%; top: 61%; width: 5%; height: 3%; }
.fld--slots-9       { left:  71%; top: 79%; width: 5%; height: 3%; }
.fld--cantrips-known input,
[class^="fld--slots-"] input{
  height:100%; border:0; background:transparent; text-align:center; font-weight:600; font-size: 24px; outline:none;
}

/* liste incantesimi (tre colonne: 0–3 / 4–6 / 7–9) */
.fld--spells-0 { left: 5%; top: 20.8%; width: 26.5%; height: 15%; }
.fld--spells-1 { left: 5%; top: 44.5%; width: 26.5%; height: 20%; }
.fld--spells-2 { left: 5%; top: 71.7%; width: 26.5%; height: 26%; } /* se serve overflow */

.fld--spells-3 { left: 36.9%; top: 21%; width: 26.5%; height: 22%; }
.fld--spells-4 { left: 36.9%; top: 49.9%; width: 26.5%; height: 24%; }
.fld--spells-5 { left: 36.9%; top: 78.9%; width: 26.5%; height: 17%; }

.fld--spells-6 { left: 68.4%; top: 21%; width: 26.5%; height: 17%; }
.fld--spells-7 { left: 68%; top: 42.6%; width: 26.5%; height: 17%; }
.fld--spells-8 { left: 68%; top: 64.3%; width: 26.5%; height: 14%; }
.fld--spells-9 { left: 68%; top: 82.3%; width: 26.5%; height: 13%; } /* solo se la tua tavola è molto lunga */

/* ASI modal – migliora contrasto radio */
#asi-modal label{ color:#0f1217; font-weight:600; opacity:1; }
#asi-modal input[type="radio"]{ accent-color:#1f62ff; }
#asi-modal .asi-modes{ display:flex; gap:12px; align-items:center; }

/* Foglio 3 – textarea incantesimi “trasparenti” */
[class^="fld--spells-"] textarea{
  width:100%; height:100%;
  border:0;
  background:transparent;
  outline:none;
  resize:none;
  box-shadow:none;
  font-size:12px;   /* facoltativo: allinea al look della scheda */
  line-height:1.3;
}

.fld--spells-0 textarea,
.fld--spells-1 textarea,
.fld--spells-2 textarea,
.fld--spells-3 textarea,
.fld--spells-4 textarea,
.fld--spells-5 textarea,
.fld--spells-6 textarea,
.fld--spells-7 textarea,
.fld--spells-8 textarea,
.fld--spells-9 textarea{
  width:100%; height:100%; border:0; background:transparent; resize:none; outline:none; line-height:1.65;
}
.fld--spell-class input,
.fld--spell-ability input,
.fld--spell-save input,
.fld--spell-attack input{
  border:0; background:transparent; text-align:center; font-weight:500; font-size: 18px; outline:none;
}
/* Mostra i campi solo della pagina frontale */
.sheet-overlay [data-on] { opacity:.0; pointer-events:none; transition:opacity .15s ease; }
.sheet-stack[data-front="p1"] .sheet-overlay [data-on="p1"],
.sheet-stack[data-front="p2"] .sheet-overlay [data-on="p2"],
.sheet-stack[data-front="p3"] .sheet-overlay [data-on="p3"]{
  opacity:1; pointer-events:auto;
}

/* ===== Pannello incantesimi lato destro ===== */


.sp-hdr{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-bottom: 1px solid #1f2937;
}
.sp-hdr #sp-title{ font-weight:800; margin-right:auto; }
.sp-actions{ display:flex; gap:8px; align-items:center; }
#sp-filter{ width: 220px; padding:8px 10px; border-radius:10px; border:1px solid #334155; background:#0b1323; color:#fff; }
#sp-apply{ padding:8px 12px; border-radius:10px; border:1px solid #1d4ed8; background:#1d4ed8; color:#fff; font-weight:700; cursor:pointer; }
#sp-close{ padding:8px 10px; border-radius:10px; border:1px solid #334155; background:#0b1323; color:#fff; cursor:pointer; }

#sp-iframe{
  width:100%; height:100%; border:0; background:#0b1323; border-radius:0 0 14px 14px;
}

/* quando l'overlay è disabilitato perché è in front un altro foglio,
   lasciamo comunque visibile il pannello laterale */
.sheet-overlay.is-disabled + .details + #spell-pane,
.sheet-overlay.is-disabled ~ #spell-pane{
  pointer-events:auto; opacity:1; visibility:visible;
}

/* --- Pannello incantesimi: righe e preview --- */
.sp-list .sp-item{
  display:block; border:1px solid #293241; background:#0b1220; border-radius:10px;
  padding:8px 10px; margin:6px 0;
}
.sp-item__head{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.sp-item__head input{ width:18px; height:18px; flex:0 0 auto; }
.sp-item__head .sp-name{ font-weight:600; color:#e7edf7; }
.sp-item__head:hover .sp-name{ text-decoration:underline; }

.sp-preview{ margin:8px 0 2px 28px; border-left:2px solid #28344a; padding-left:10px; }
.sp-preview__box{
  width:100%; height:360px; border:0; border-radius:8px; overflow:hidden;
  background:#0f1626;
}
.sp-preview__loading{ color:#9fb4d6; font-size:13px; padding:8px 0; }
.sp-preview__fallback a{ color:#9ec1ff; text-decoration:underline; }

.formula-badge{ display:inline-flex; gap:.25rem; align-items:center; cursor:pointer; font-size:.85rem; opacity:.7; }
.formula-badge:hover{ opacity:1; }
@media print { .formula-badge{ display:none !important; } }

/* ===== OMNI SEARCH ===== */
#omni-wrap{ position:fixed; inset:0; z-index:100000; display:none; }
#omni-wrap.is-open{ display:block; }
#omni-wrap::before{ content:""; position:absolute; inset:0; background:rgba(15,18,23,.45); backdrop-filter: blur(2px); }

#omni-wrap .omni{
  position:absolute; left:50%; top:12%;
  transform:translateX(-50%);
  width:min(320px, 92vw);
  background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.2);
  padding:10px 10px 6px;
}
#omni-input{
  width:100%; padding:12px 14px; font:16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  border:1px solid #cbd5e1; border-radius:10px; outline:none;
}
#omni-input:focus{ border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.omni__list{ max-height:60vh; overflow:auto; padding:10px 4px 6px; }
.omni__group{ margin:10px 4px 12px; }
.omni__group h4{ margin:6px 8px; font-size:12px; font-weight:800; text-transform:uppercase; color:#475569; letter-spacing:.04em; }
.omni__row{
  display:block; width:100%; text-align:left;
  padding:8px 10px; border:1px solid #e2e8f0; border-radius:8px; background:#f8fafc;
  margin:6px 4px; cursor:pointer;
}
.omni__row:hover{ background:#eef2ff; border-color:#c7d2fe; }
.omni__hint{ padding:22px; text-align:center; color:#64748b; }

/* --- SIDE DETAILS PANEL --- */

#details-title {
  position: sticky;
  top: 0;
  padding: 10px 12px;
  background: inherit;
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 6;
}


/* Layout 2 colonne: scheda + pannello */
.sheet-layout{
  display:flex;
  align-items:flex-start;
  gap:16px;
}

/* la scheda occupa lo spazio, il pannello sta a lato */
.sheet-layout .sheet{ flex:1 1 auto; min-width:0; }
.sheet-layout .details{ margin-left:0; } /* niente margine extra in flex */

/* Pannello sticky già definito sopra come .details */
.details{
  position:sticky; top:16px;
  max-height:calc(100vh - 32px);
  overflow:auto;
}
#omni-bar{ position:sticky; top:8px; z-index:4; }
#omni-bar input{ width:min(320px, 60vw); padding:8px 12px; border-radius:8px; }
.omni-row{ padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.06); }
.omni-row .muted{ opacity:.7; margin-left:8px; font-size:.9em; }

.omni-row{
  display:flex; justify-content:space-between; width:100%;
  padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left; cursor:pointer;
}
.omni-row:focus, .omni-row:hover{ outline:1px solid rgba(255,255,255,.25); }
.spell-meta span, .equip-meta span{ display:inline-block; margin:2px 8px 2px 0; font-size:.92em; opacity:.9; }
.spell-text pre{ white-space:pre-wrap; font-family:inherit; line-height:1.35; }
.spell-actions, .equip-actions{ margin-top:10px; }

#details-title{ display:flex; align-items:center; gap:8px; }
#details-title .omni-in-title{ flex:0 0 300px; max-width:300px; padding:6px 10px; }

/* header del pannello con input dentro */
#details-panel header { display:flex; align-items:center; gap:8px; }
#details-title { display:flex; align-items:center; gap:8px; margin:0; position:sticky; top:0; z-index:2; }
#details-label { font-weight:600; }
#details-title .omni-in-title { flex:0 0 240px; max-width:240px; padding:6px 10px; }

/* il body non deve coprire il titolo */
#details-body { position:relative; z-index:1; }

/* — LARGHEZZA PANNELLO LATERALE — */
#details-panel {
  flex: 0 0 420px;   /* larghezza base del pannello */
  width: 420px;
  max-width: none;
  overflow-y: auto;
  overflow-x: hidden; /* niente scrollbar orizzontale */
}

/* su schermi grandi, ancora più largo */
@media (min-width: 1536px) {
  #details-panel {
    flex-basis: 500px;
    width: 500px;
  }
}

/* l'input di ricerca si adatta alla nuova larghezza */
#details-title .omni-in-title {
  flex: 1 1 auto;     /* occupa lo spazio disponibile accanto all’etichetta */
  min-width: 220px;
  max-width: none;
}

/* Attacchi: griglia compatta */
#attacks-grid{ margin-top:8px; }
#attacks-grid .atk-head,
#attacks-grid .attack-row{
  display:grid;
  grid-template-columns: 1.2fr .9fr .7fr .6fr .5fr 1.1fr auto;
  gap:8px; align-items:center;
}
#attacks-grid .atk-head{ font-weight:600; margin-bottom:6px; }
#attacks-grid .attack-row{ margin-bottom:6px; }
#attacks-grid input[type="text"], #attacks-grid select{ width:100%; padding:6px 8px; }
#attacks-grid .atk-prof-wrap{ display:flex; align-items:center; gap:6px; opacity:.9; }
#attacks-grid .atk-bonus{ font-weight:700; text-align:center; }
#attacks-grid .atk-del{ width:28px; height:28px; line-height:1; }


/* Griglia 3 colonne */
#attacks-grid { display:grid; grid-template-columns: 1fr 180px 1fr; row-gap:6px; column-gap:10px; }
#attacks-grid .atk-row { display:contents; } /* ogni riga usa le 3 celle */
#attacks-grid input { width:100%; padding:4px 6px; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.15); }

/* opzionale: nascondi il vecchio label se ti sbilancia */
.fld--attacks > span { display:none; }

/* === ATTACCHI (3 colonne, 6 righe) – POSIZIONI A PERCENTUALI === */
/* area del box attacchi che già avevi */
:root{
  /* angolo sinistro del box "Attacchi & Incantesimi" */
  --atk-left: 0%;
  /* Y della PRIMA riga (centrata) dentro il box */
  --atk-top-first: 8%;
  /* distanza verticale fra righe (6 righe dentro ~23.6% di altezza) */
  --atk-row: 11%;

  /* colonne (somma ≈ 29.6%) */
  --atk-name-w: 40.4%;
  --atk-bonus-w: 20%;
  --atk-dmg-w: 38%;

  /* gutter orizzontali tra colonne */
  --atk-gutter: 0.4%;
}

/* colonne calcolate */
:root{
  --atk-name-left:  var(--atk-left);
  --atk-bonus-left: calc(var(--atk-name-left) + var(--atk-name-w) + var(--atk-gutter));
  --atk-dmg-left:   calc(var(--atk-bonus-left) + var(--atk-bonus-w) + var(--atk-gutter));
}

/* altezza visiva di ogni riga (come le skill) */
.fld[class*="atk"]{ height:2.6%; transform:translateY(-50%); }
.fld[class*="atk"] input{
  height:100%; border:0; background:transparent; outline:none; box-shadow:none;
  padding:0 6px;
}

/* — 6 righe: nome — */
.fld--atk1-name{ left:var(--atk-name-left);  top:calc(var(--atk-top-first) + 0*var(--atk-row)); width:var(--atk-name-w); }
.fld--atk2-name{ left:var(--atk-name-left);  top:calc(var(--atk-top-first) + 1*var(--atk-row)); width:var(--atk-name-w); }
.fld--atk3-name{ left:var(--atk-name-left);  top:calc(var(--atk-top-first) + 2*var(--atk-row)); width:var(--atk-name-w); }
.fld--atk4-name{ left:var(--atk-name-left);  top:calc(var(--atk-top-first) + 3*var(--atk-row)); width:var(--atk-name-w); }
.fld--atk5-name{ left:var(--atk-name-left);  top:calc(var(--atk-top-first) + 4*var(--atk-row)); width:var(--atk-name-w); }
.fld--atk6-name{ left:var(--atk-name-left);  top:calc(var(--atk-top-first) + 5*var(--atk-row)); width:var(--atk-name-w); }

/* — 6 righe: bonus — */
.fld--atk1-bonus{ left:var(--atk-bonus-left); top:calc(var(--atk-top-first) + 0*var(--atk-row)); width:var(--atk-bonus-w); text-align:center; }
.fld--atk2-bonus{ left:var(--atk-bonus-left); top:calc(var(--atk-top-first) + 1*var(--atk-row)); width:var(--atk-bonus-w); text-align:center; }
.fld--atk3-bonus{ left:var(--atk-bonus-left); top:calc(var(--atk-top-first) + 2*var(--atk-row)); width:var(--atk-bonus-w); text-align:center; }
.fld--atk4-bonus{ left:var(--atk-bonus-left); top:calc(var(--atk-top-first) + 3*var(--atk-row)); width:var(--atk-bonus-w); text-align:center; }
.fld--atk5-bonus{ left:var(--atk-bonus-left); top:calc(var(--atk-top-first) + 4*var(--atk-row)); width:var(--atk-bonus-w); text-align:center; }
.fld--atk6-bonus{ left:var(--atk-bonus-left); top:calc(var(--atk-top-first) + 5*var(--atk-row)); width:var(--atk-bonus-w); text-align:center; }

/* — 6 righe: danno/tipo — */
.fld--atk1-dmg{ left:var(--atk-dmg-left); top:calc(var(--atk-top-first) + 0*var(--atk-row)); width:var(--atk-dmg-w); }
.fld--atk2-dmg{ left:var(--atk-dmg-left); top:calc(var(--atk-top-first) + 1*var(--atk-row)); width:var(--atk-dmg-w); }
.fld--atk3-dmg{ left:var(--atk-dmg-left); top:calc(var(--atk-top-first) + 2*var(--atk-row)); width:var(--atk-dmg-w); }
.fld--atk4-dmg{ left:var(--atk-dmg-left); top:calc(var(--atk-top-first) + 3*var(--atk-row)); width:var(--atk-dmg-w); }
.fld--atk5-dmg{ left:var(--atk-dmg-left); top:calc(var(--atk-top-first) + 4*var(--atk-row)); width:var(--atk-dmg-w); }
.fld--atk6-dmg{ left:var(--atk-dmg-left); top:calc(var(--atk-top-first) + 5*var(--atk-row)); width:var(--atk-dmg-w); }

/* Competenze & Equip: niente bordo/outline nemmeno in focus */
.fld--profs textarea,
.fld--equip textarea{
  background: transparent;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.fld--profs textarea:focus,
.fld--equip textarea:focus{
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* (opzionale) nascondi del tutto la label stampata */
.fg--profs .fld--profs > span,
.fg--equip .fld--equip > span{ display: none; }


/* ===========================
   STAMPA
   ===========================*/

/* === Layering e geometria della scheda === */
#sheet-capture{ position: relative; width: fit-content; margin: 0 auto; }
#sheet-stack{ position: relative; z-index: 1; }
#sheet-form.sheet-overlay{ position: absolute; inset: 0; z-index: 100; pointer-events: auto; }

.sheet-bg{ display: block; height: auto; }

/* Le label/inputs restano cliccabili e sopra lo sfondo */
#sheet-form .fld,
#sheet-form .pg-skill,
#sheet-form .pg-skillname{ position: absolute; }
/* Visibilità sezioni per pagina (overlay è fratello immediato di #sheet-stack) */
#sheet-stack + #sheet-form .p1-only,
#sheet-stack + #sheet-form .p2-only,
#sheet-stack + #sheet-form .p3-only{ display: none; }

#sheet-stack[data-front="p1"] + #sheet-form .p1-only{ display: block; }
#sheet-stack[data-front="p2"] + #sheet-form .p2-only{ display: block; }
#sheet-stack[data-front="p3"] + #sheet-form .p3-only{ display: block; }

/* ============ EXPORT PDF — BLOCCO UNICO PULITO ============ */

/* Geometria base della scheda (resta sempre) */
#sheet-capture{ position: relative; width: fit-content; margin: 0 auto; }
#sheet-stack{ position: relative; z-index: 1; }
#sheet-form.sheet-overlay{ position: absolute; inset: 0; z-index: 100; pointer-events: auto; }
.sheet-bg{ display:block; height:auto; }

/* Overlay: elementi posizionati assoluti (come già fai) */
#sheet-form .fld,
#sheet-form .pg-skill,
#sheet-form .pg-skillname{ position:absolute; }

/* Visibilità sezioni p1/p2/p3 (overlay è FRATELLO di #sheet-stack) */
#sheet-stack + #sheet-form .p1-only,
#sheet-stack + #sheet-form .p2-only,
#sheet-stack + #sheet-form .p3-only{ display:none; }
#sheet-stack[data-front="p1"] + #sheet-form .p1-only{ display:block; }
#sheet-stack[data-front="p2"] + #sheet-form .p2-only{ display:block; }
#sheet-stack[data-front="p3"] + #sheet-form .p3-only{ display:block; }
#sheet-stack:not([data-front]) + #sheet-form .p1-only{ display:block; }

/* Textarea: rispetta a-capo (utile anche nel canvas) */
.fld textarea,
.fld--features textarea,
.fld--profs textarea,
.fld--equip textarea{
  white-space: pre-wrap;
  line-height: 1.35;
}

/* ===== Stato exporting (html2canvas) ===== */
body.exporting{
  overflow: hidden !important;
  cursor: progress !important;
}

/* Nascondi UI che non deve finire nel PDF */
body.exporting .export-ignore,
body.exporting #details-panel,
body.exporting nav,
body.exporting .topbar,
body.exporting .global-search{ 
  display: none !important; 
  visibility: hidden !important;
}

/* Non nascondere MAI la scheda catturata */
body.exporting #sheet-capture,
body.exporting #sheet-stack,
body.exporting #sheet-form{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Durante export: lo stack resta relativo; l’overlay deve restare ASSOLUTO */
body.exporting #sheet-stack{
  position: relative !important;
}
body.exporting #sheet-form{
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important; /* niente focus/hover durante la cattura */
}

/* Badge di progresso (facoltativo) */
#pdf-progress{
  position: fixed; right: 12px; bottom: 12px; z-index: 99999;
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111; background: rgba(255,255,255,.95);
  border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15); pointer-events: none;
}
body.exporting #pdf-progress{ display:block; }

/* ===== STAMPA (Ctrl+P — opzionale) ===== */
@page{ size:A4; margin:0; }
@media print{
  html, body{ margin:0 !important; padding:0 !important; background:#fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .export-ignore, nav, .topbar, .global-search, #details-panel{ display:none !important; }
  #sheet-capture{ display:block !important; }
}

/* === PATCH: wrap robusto nelle textarea (schermo + PDF) === */
.fld textarea,
.fld--features textarea,
.fld--profs textarea,
.fld--equip textarea{
  white-space: pre-wrap;
  overflow-wrap: anywhere;   /* spezza parole molto lunghe */
  word-break: break-word;
}

/* ridondanza utile in stampa */
@media print{
  .fld textarea{
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}
/* ================================
   PATCH PDF: allineamenti e wrap
   (incollare in fondo a sheet.css)
   ================================ */

/* 1) Caratteristiche (i 6 numeri a sinistra): centra verticalmente nel PDF */
:root{ --stat-pad: 35px; } /* se restano un pelo alte/basse, ritocca 7–11px */
body.exporting .fld--str input,
body.exporting .fld--dex input,
body.exporting .fld--con input,
body.exporting .fld--int input,
body.exporting .fld--wis input,
body.exporting .fld--cha input{
  box-sizing: border-box;
  padding-top: var(--stat-pad);
  line-height: 1.1;       /* baseline più “compatta” nel canvas */
}

/* 2) Abilità: mantieni SEMPRE il centraggio verticale in export */
body.exporting .pg-skill,
body.exporting .pg-skillname,
body.exporting .fld[class*="skill-"]{
  transform: translateY(-50%) !important;
}

/* 3) Textarea: a capo “aggressivo” anche con parole senza spazi */
.fld textarea,
.fld--features textarea,
.fld--profs textarea,
.fld--equip textarea{
  white-space: pre-wrap;
  overflow-wrap: anywhere;   /* <— spezza parole lunghissime */
  word-break: break-word;
  line-height: 1.35;
}
@media print{
  .fld textarea{
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* ===== EXPORT: numeri caratteristiche/modificatori centrati ===== */

/* stile dei numeri per export */
:root{
  --stat-font: 28px;   /* numero grande nel riquadro */
  --mod-font: 18px;    /* numero nel cerchio del modificatore */
}

/* quando siamo in export, nascondo il testo degli input ma lascio le box */
body.exporting .print-text > input{ opacity: 0 !important; }

/* testo “finto” che disegno io al centro del box */
body.exporting .print-text::after{
  content: attr(data-val);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: .5px;
  line-height: 1;
  pointer-events: none;
}

/* 6 caratteristiche (FOR..CAR) */
body.exporting .fld--str.print-text::after,
body.exporting .fld--dex.print-text::after,
body.exporting .fld--con.print-text::after,
body.exporting .fld--int.print-text::after,
body.exporting .fld--wis.print-text::after,
body.exporting .fld--cha.print-text::after{
  font-weight: 700;
  font-size: var(--stat-font);
}

/* 6 modificatori sotto (cerchietto) */
body.exporting .fld--strmod.print-text::after,
body.exporting .fld--dexmod.print-text::after,
body.exporting .fld--conmod.print-text::after,
body.exporting .fld--intmod.print-text::after,
body.exporting .fld--wismod.print-text::after,
body.exporting .fld--chamod.print-text::after{
  font-weight: 600;
  font-size: var(--mod-font);
}

/* skills: tieni fermo il centraggio verticale in PDF */
body.exporting .pg-skill,
body.exporting .pg-skillname,
body.exporting .fld[class*="skill-"]{
  transform: translateY(-50%) !important;
}

/* textarea: vai a capo anche con parole lunghissime */
.fld textarea,
.fld--features textarea,
.fld--profs textarea,
.fld--equip textarea{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

/* Colore pieno per tutti i numeri stampati nei campi */
.fld--str input, .fld--dex input, .fld--con input, .fld--int input, .fld--wis input, .fld--cha input,
.fld--strmod input, .fld--dexmod input, .fld--conmod input, .fld--intmod input, .fld--wismod input, .fld--chamod input,
.fld[class*="skill-"] input, .fld--prof input {
  color:#111 !important;
  -webkit-text-fill-color:#111;   /* Chrome/Safari */
  opacity:1 !important;
}

/* Anche in export: i numeri generati col ::after restano neri */
.print-text::after,
body.exporting .print-text::after {
  color:#111 !important;
}

/* Forza l'a-capo su parole lunghissime */
.fld textarea { 
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ====== EXPORT/PRINT – blocco snello ====== */

/* Nascondi UI non di scheda quando esporti */
body.exporting .export-ignore,
body.exporting #details-panel,
body.exporting nav,
body.exporting .topbar,
body.exporting .global-search{
  display:none !important;
  visibility:hidden !important;
}

/* Mantieni visibile e stabile lo stack della scheda */
body.exporting #sheet-capture,
body.exporting #sheet-stack,
body.exporting #sheet-form{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:none !important;
}
body.exporting #sheet-stack{ position:relative !important; }
body.exporting #sheet-form{ position:absolute !important; inset:0 !important; pointer-events:none !important; }

/* Badge progresso (se presente) */
body.exporting #pdf-progress{ display:block; }

/* Stampa nativa */
@page{ size:A4; margin:0; }
@media print{
  html, body{ margin:0 !important; padding:0 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact; background:#fff !important; }
  .export-ignore, nav, .topbar, .global-search, #details-panel{ display:none !important; }
  #sheet-capture{ display:block !important; }
}

/* ---  A) Abilità: abbassa i numeri di ~2% della loro altezza --- */
:root{ --skills-vshift: -48%; } /* taratura fine: prova -47.5% o -48.5% */
.fld[class*="skill-"]{
  height:2.6% !important;
  transform: translateY(var(--skills-vshift)) !important;
}
.fld[class*="skill-"] input{
  height:100% !important;
  padding:0 !important;
  line-height:1 !important;   /* niente linea “altra” che spinge in alto */
  text-align:center;
  border:0; background:transparent; outline:none; box-shadow:none;
  color:#111 !important; -webkit-text-fill-color:#111;
}

/* Se i “pallini” sono già perfetti non toccarli. Se li vuoi seguire, scommenta: */
/*
.pg-skill, .pg-skillname{ transform: translateY(var(--skills-vshift)) !important; }
*/

/* ---  B) Mirror delle TEXTAREA per export (wrap sicuro) --- */
.ta-mirror{
  position:absolute; inset:0;
  white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word;
  line-height:1.35; background:transparent;
  border:0; outline:0; box-shadow:none;
  color:#111;
}
body.exporting textarea.ta-hide{ opacity:0 !important; }

/* Per coerenza anche fuori export */
.fld textarea{ white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; line-height:1.35; }

/* ===== EXPORT/PRINT – snello ===== */
:root{ --skills-nudge: 2px; }   /* micro-offset dei numeri abilità */

/* wrap robusto */
.fld textarea,
.fld--features textarea,
.fld--profs textarea,
.fld--equip textarea{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

/* stato exporting: nascondi UI, non toccare la scheda */
body.exporting{
  overflow: hidden !important;
  cursor: progress !important;
}
body.exporting .export-ignore,
body.exporting #details-panel,
body.exporting nav,
body.exporting .topbar,
body.exporting .global-search{ display:none !important; }

/* abilità: centraggio + micro-nudge */
body.exporting .pg-skill,
body.exporting .pg-skillname,
body.exporting .fld[class*="skill-"]{ transform: translateY(-50%) !important; }
body.exporting .fld[class*="skill-"] input{
  padding-top: var(--skills-nudge); line-height:1;
  color:#111 !important; -webkit-text-fill-color:#111; opacity:1 !important;
}

/* checkbox: restano pallini anche nel canvas (senza pseudo-elementi) */
body.exporting input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:12px; height:12px; border:1px solid #222; border-radius:50%;
  background:#fff; vertical-align:middle;
}
body.exporting input[type="checkbox"]:checked{ background:#222; }

/* numeri ben neri */
.fld--str input, .fld--dex input, .fld--con input, .fld--int input, .fld--wis input, .fld--cha input,
.fld--strmod input, .fld--dexmod input, .fld--conmod input, .fld--intmod input, .fld--wismod input, .fld--chamod input,
.fld[class*="skill-"] input, .fld--prof input{
  color:#111 !important; -webkit-text-fill-color:#111; opacity:1 !important;
}

/* stampa (Ctrl+P opzionale) */
@page{ size:A4; margin:0; }
@media print{
  html, body{ margin:0!important; padding:0!important; background:#fff!important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .export-ignore, nav, .topbar, .global-search, #details-panel{ display:none!important; }
  #sheet-capture{ display:block!important; }
}

/* ====== EXPORT/PRINT: pallini competenze (abilita' + TS) ====== */

/* skill bullets */
body.exporting .pg-skill input,
@media print {
  .pg-skill input
}
{
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block;           /* niente baseline che sposta in verticale */
  margin: 0 !important;
  padding: 0 !important;
  width: 12px !important;
  height: 12px !important;
  border: 1px solid #222 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: none !important;
  vertical-align: middle !important;
  cursor: default !important;
}

body.exporting .pg-skill input:checked,
@media print {
  .pg-skill input:checked
}
{
  background: #222 !important;
}

/* tiri salvezza: stessi pallini */
body.exporting .fg--saves input[type="checkbox"],
@media print {
  .fg--saves input[type="checkbox"]
}
{
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  width: 11px !important;
  height: 11px !important;
  border: 1px solid #222 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: none !important;
}
body.exporting .fg--saves input[type="checkbox"]:checked,
@media print {
  .fg--saves input[type="checkbox"]:checked
}
{
  background: #222 !important;
}

/* blocca il centraggio verticale delle 18 righe durante export/print */
body.exporting .pg-skill,
body.exporting .pg-skillname,
body.exporting .fld[class*="skill-"]{
  transform: translateY(-50%) !important;
}
@media print{
  .pg-skill, .pg-skillname, .fld[class*="skill-"]{
    transform: translateY(-50%) !important;
  }
}

/* Export-only: nudge verticale del BONUS DI COMPETENZA */
:root { --prof-pad: 8px; }            /* se serve, prova 6–10px */
body.exporting .fld--prof input{
  box-sizing: border-box;
  padding-top: var(--prof-pad);
  line-height: 1.12;                  /* stabilizza la baseline in canvas */
}

/* P3 — contatori uniformi (trucchetti + slot per livello) */
.fld--cantrips-known input,
[class^="fld--slots-"] input{
  font: 700 20px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
  letter-spacing: 0 !important;
  color:#111 !important; -webkit-text-fill-color:#111 !important;
  text-align:center !important;
  padding-top: 3px !important; /* centratura verticale */
}
/* === P3: contatori uniformi (trucchetti/slot) === */
.p3-only .fld--cantrips-known input,
.p3-only [class^="fld--slots-"] input{
  font-weight: 700 !important;
  font-size: 27px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}
/* Foglio 3 – uniforma numeri trucchetti/slot */
#sheet-form .fld--cantrips-known input,
#sheet-form [class^="fld--slots-"] input{
  font-size: 18px !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding-top: 0 !important;
  letter-spacing: 0 !important;
}
/* Foglio 3: uniforma i numeri dei contatori */
.p3-only .fld--cantrips-known input,
.p3-only [class^="fld--slots-"] input,
body.exporting .fld--cantrips-known input,
body.exporting [class^="fld--slots-"] input{
  font-weight:700 !important;
  font-size:18px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  padding-top:4px !important; /* micro-centratura verticale */
}

/* === DETAILS HEADER: pulsanti sopra la ricerca, puliti === */
#details-panel header{
  display:flex;
  flex-wrap:wrap;            /* consente 2 righe */
  align-items:center;
  gap:8px;
  position: sticky;          /* resta visibile quando scrolli il pannello */
  top:0;
  z-index: 10;
  background: inherit;
  padding: 8px 10px 10px;    /* respiro */
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Barra pulsanti: prima riga, tutta larghezza, allineata a destra */
#details-panel .panel-actions{
  order:-1;                  /* va SOPRA tutto */
  flex: 1 0 100%;
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding-bottom: 6px;
}

/* Pulsanti icona compatti e leggibili sul tema scuro */
#details-panel .icon-btn{
  width:32px;
  height:32px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:#0b1323;
  color:#e5e7eb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: border-color .15s, background .15s, transform .08s;
}
#details-panel .icon-btn:hover{
  border-color:#334155;
  background:#111827;
}
#details-panel .icon-btn:active{
  transform: scale(.96);
}
/* assicura dimensione coerente delle icone inline SVG */
#details-panel .icon-btn svg{
  width:18px; height:18px; display:block;
}

/* Riga titolo + ricerca: la ricerca occupa lo spazio libero */
#details-title{
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  position: static;          /* evita doppie "sticky" sul titolo */
}
#details-title .omni-in-title{
  flex:1 1 auto;
  min-width: 220px;
  max-width: none;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid #334155;
  background:#0b1323;
  color:#e5e7eb;
}

/* --- Header del pannello come riferimento --- */
#details-panel header{
  position: relative;                    /* serve per ancorare i pulsanti */
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding: 10px 60px 10px 10px;          /* spazio a destra per i pulsanti */
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: inherit; z-index: 10;
}
/* --- Stile dei pulsanti testuali --- */
#details-panel .tool-btn{
  height:32px; min-width:68px; padding:0 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:#0b1323; color:#e5e7eb; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none;
  transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
}
#details-panel .tool-btn:hover{
  background:#111827; border-color:#334155;
}
#details-panel .tool-btn:active{
  transform: translateY(1px);
}
#details-panel .tool-btn:focus{
  outline:none; box-shadow:0 0 0 2px rgba(148,163,184,.35);
}

/* --- Input di ricerca coerente --- */
#details-title .omni-in-title{
  flex:1 1 auto; min-width:220px;
  padding:6px 10px; border-radius:8px;
  border:1px solid #334155; background:#0b1323; color:#e5e7eb;
}
#details-title .omni-in-title:focus{ border-color:#64748b; }

/* --- Piccolo adattamento mobile --- */
@media (max-width: 520px){
  #details-panel header{ padding-right:10px; }
  #details-panel .panel-actions{ position:static; order:-1; justify-content:flex-end; }
}

/* --- il contenitore che ospita il pannello deve durare fino al footer --- */
.sheet-layout, .entry-content, main#content, .site-content {
  min-height: calc(100dvh - (var(--wp-adminbar-h,0px) + var(--site-header-h,0px) + var(--site-footer-h,0px)));
}

/* --- pannello: altezza piena tra header e footer, niente max-height che lo accorcia --- */
#details-panel{
  position: sticky;
  top: calc(var(--wp-adminbar-h,0px) + var(--site-header-h,0px));
  height: calc(100dvh - (var(--wp-adminbar-h,0px) + var(--site-header-h,0px) + var(--site-footer-h,0px)));
  max-height: none !important;   /* sovrascrive il vecchio max-height */
  align-self: start;              /* resta agganciato in alto nella colonna */
  overflow: auto;
}

/* --- mobile / layout stretto: fallback a fixed tra header e footer --- */
@media (max-width: 1024px){
  #details-panel{
    position: fixed;
    inset: calc(var(--wp-adminbar-h,0px) + var(--site-header-h,0px)) 0 var(--site-footer-h,0px) auto;
    width: min(520px, 100vw);
    height: auto;                 /* gestito da inset */
    max-height: none !important;
  }
  body{ padding-right: min(520px, 100vw); }
}
/* === DETAILS PANEL: sempre da sotto header a sopra footer === */

/* Desktop / tablet */
@media (min-width: 900px){
  #details-panel{
    position: fixed !important;
    top: calc(var(--wp-adminbar-h,0px) + var(--site-header-h,0px) + 12px);
    bottom: calc(var(--site-footer-h,0px) + 12px);
    right: 24px;
    width: min(520px, 32vw);
    max-height: none !important;
    height: auto;                 /* gestita da top/bottom */
    overflow: auto;
    z-index: 1000;
  }
  /* Riserva spazio al contenuto centrale per non sovrapporsi */
  body{
    padding-right: calc(min(520px, 32vw) + 24px);
  }
}

/* Mobile: pannello a tutta larghezza tra header e footer */
@media (max-width: 899px){
  #details-panel{
    position: fixed !important;
    top: calc(var(--wp-adminbar-h,0px) + var(--site-header-h,0px));
    bottom: var(--site-footer-h,0px);
    left: 0; right: 0;
    width: auto;
    margin: 0;
    border-radius: 0;            /* opzionale: pannello full-bleed su mobile */
    max-height: none !important;
    overflow: auto;
    z-index: 1000;
  }
  body{ padding-right: 0; }
}

/* L’header interno resta appiccicato in cima mentre scrolli nel pannello */
#details-panel > header{
  position: sticky;
  top: 0;
  z-index: 5;
}
/* Fallback variabili (prima che JS le aggiorni) */
:root{
  --details-top: 72px;     /* header ~60 + margine */
  --details-bottom: 12px;  /* gap dal bordo basso */
}

/* Hard override: il pannello è sempre fixed fra header e footer */
#details-panel{
  position: fixed !important;
  top: var(--details-top) !important;
  bottom: var(--details-bottom) !important;
  right: 24px !important;
  width: min(520px, 32vw) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: auto;
  z-index: 1000;
}

/* Spazio al contenuto centrale, per non coprirlo */
body{
  padding-right: calc(min(520px, 32vw) + 24px) !important;
}

/* Mobile: a tutta larghezza */
@media (max-width: 768px){
  #details-panel{
    left: 0 !important; right: 0 !important; width: auto !important;
    border-radius: 0;
  }
  body{ padding-right: 0 !important; }
}

/* Disinnesca vecchi limiti d’altezza appiccicati altrove */
.details-panel, #details-panel{ max-height: none !important; }

/* === HARD OVERRIDE: pannello sempre tra header e footer === */
:root{
  --details-top: 72px;      /* fallback */
  --details-bottom: 12px;   /* fallback */
}
#details-panel{
  position: fixed !important;
  top: var(--details-top) !important;
  bottom: var(--details-bottom) !important;
  right: 24px !important;
  width: min(520px, 32vw) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: auto !important;
  z-index: 1000 !important;
}
/* Mobile full-width */
@media (max-width: 768px){
  #details-panel{
    left: 0 !important; right: 0 !important; width: auto !important; border-radius: 0 !important;
  }
}
/* Disinnesca qualsiasi limite residuo */
.details-panel, #details-panel{ max-height: none !important; }

/* larghezza pannello e gap standard, riusabili */
:root{
  --details-width: min(520px, 32vw);
  --details-gap: 24px;
}

/* pannello a destra: usa le variabili sopra */
#details-panel{
  right: var(--details-gap) !important;
  width: var(--details-width) !important;
}

/* NON riservare più spazio al body (ripara l'header) */
body{ padding-right: 0 !important; }

/* Riserva spazio SOLO al contenuto della scheda (non tocca l'header) */
@media (min-width: 900px){
  #sheet-root{
    padding-right: calc(var(--details-width) + var(--details-gap)) !important;
  }
}

/* Mobile: il pannello è full-width, niente spazio al contenuto */
@media (max-width: 899px){
  #sheet-root{ padding-right: 0 !important; }
}
/* === Altezza minima della pagina: il footer resta fuori viewport === */
.sheet-layout,
.site-content,
#content,
.entry-content,
.site-main,
#primary {
  min-height: calc(100dvh - (var(--wp-adminbar-h,0px) + var(--site-header-h,0px) + var(--site-footer-h,0px))) !important;
}

/* === Pannello laterale SEMPRE tra header e fondo === */
:root{
  --details-top-gap: 60px;
}
#details-panel{
  position: fixed !important;
  top: var(--details-top-gap) !important;  /* <-- qui usiamo la manopola */
  bottom: var(--details-gap) !important;
  right: 24px !important;
  width: min(520px, 32vw) !important;
  height: auto !important;
  max-height: none !important;
  overflow: auto !important;
  z-index: 1000 !important;
}

/* Niente “riserva spazio” sul body: lo diamo solo al contenuto della scheda */
body{ padding-right: 0 !important; }
@media (min-width: 900px){
  #sheet-root{ padding-right: calc(min(520px, 32vw) + 24px) !important; }
}
@media (max-width: 899px){
  #sheet-root{ padding-right: 0 !important; }
  #details-panel{ left: 0 !important; right: 0 !important; width: auto !important; border-radius: 0; }
}

/* Disinnesca VECCHI limiti che accorciano il pannello */
.details-panel, #details-panel{ max-height: none !important; }