:root {
  --pink: #f6b0c2;
  --pink-light: #fbd4de;
  --pink-deep: #e8738f;
  --red: #d94a68;
  --blue: #3f7fbf;
  --navy: #1b2a5c;
  --cream: #fff4f1;
  --radius: 16px;
  /* curve più incisive di quelle di default */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--pink);
  color: var(--navy);
  font-family: 'Fredoka', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--pink-deep); color: #fff; }

button, input { font: inherit; color: inherit; }
button, select, summary, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, .pageTitle { text-wrap: balance; }

/* ---------- header ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;
}
.brand {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.me {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--cream);
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 150ms var(--ease-out);
}
.me:active { transform: scale(.97); }
.me.static { padding: 8px 16px; cursor: default; }
.who { display: flex; align-items: center; gap: 10px; }
.btn.small { padding: 5px 12px; font-size: .85rem; }
.me img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.me.empty { padding: 10px 18px; background: var(--blue); color: #fff; border-color: var(--navy); }

/* ---------- viste ---------- */
/* ogni cambio di schermata entra con una breve dissolvenza; `backwards` così
   a fine animazione non resta nessun transform che blocchi hover e figli */
#view { max-width: 1500px; margin: 0 auto; padding: 0 16px 32px; }
#view > * { animation: enter 220ms var(--ease-out) backwards; }
#view > .menu { animation: none; }
@keyframes enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.stage {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.stage > img { display: block; width: 100%; height: auto; pointer-events: none; }

/* finestre cliccabili: al passaggio si accende la luce, solo sul vetro.
   Si spegne piano (come una lampada), si accende di scatto (come un interruttore). */

/* ---------- stanza ---------- */
.roomBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.roomBar h1 { margin: 0; font-size: 1.4rem; flex: 1; min-width: 160px; }

.btn {
  padding: 9px 18px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--navy);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out),
    opacity 160ms var(--ease-out), filter 160ms var(--ease-out);
}
.btn:active:not(:disabled) { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 var(--navy); }
.btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.btn.ghost { background: var(--cream); color: var(--navy); }
.btn.red { background: var(--red); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* quando un bottone si abilita, un piccolo "tic" per farlo notare */
.btn.ready { animation: ready 220ms var(--ease-out); }
@keyframes ready {
  from { transform: scale(1.05); }
  to { transform: none; }
}
@keyframes avatarIn {
  from { opacity: 0; transform: translate(-50%, -100%) scale(.9); }
  to { opacity: 1; transform: translate(-50%, -100%); }
}
/* mentre lo trascini il personaggio si "solleva" */

/* ---------- dialog ---------- */
/* entra in 180ms, esce in 130ms: veloce dove risponde il sistema */
dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 24px;
  border: 3px solid var(--navy);
  border-radius: 20px;
  background: var(--cream);
  color: var(--navy);
  box-shadow: 0 8px 0 var(--navy);
  overflow: auto;
  opacity: 0;
  transform: scale(.96);
  transition: opacity 130ms ease-out, transform 130ms ease-out,
    overlay 130ms allow-discrete, display 130ms allow-discrete;
}
dialog[open] {
  opacity: 1;
  transform: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out),
    overlay 180ms allow-discrete, display 180ms allow-discrete;
}
@starting-style {
  dialog[open] { opacity: 0; transform: scale(.96); }
}
dialog.wide { width: min(900px, calc(100vw - 32px)); }
dialog::backdrop {
  background: rgba(27, 42, 92, .45);
  opacity: 0;
  transition: opacity 130ms ease-out, overlay 130ms allow-discrete, display 130ms allow-discrete;
}
dialog[open]::backdrop { opacity: 1; transition-duration: 180ms; }
@starting-style {
  dialog[open]::backdrop { opacity: 0; }
}
dialog h2 { margin: 0 0 8px; }
dialog p { line-height: 1.5; }
.x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.x::after { content: ''; position: absolute; inset: -6px; } /* area di tocco da 46px */
.x:active { transform: scale(.92); }
.hint { margin: 0 0 12px; color: var(--red); min-height: 1.2em; }

/* ---------- carta personale ---------- */

.editGrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.fields label { display: block; margin-bottom: 12px; font-weight: 500; }
.fields input[type=text], #fName {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 12px;
  border: 2px solid var(--navy);
  border-radius: 12px;
  background: #fff;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.fields input[type=file] { display: block; margin-top: 4px; max-width: 100%; }
.statInputs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.statInputs label { margin: 0; font-size: .85rem; }
.statInputs label div { display: flex; align-items: center; gap: 6px; }
.statInputs input[type=range] { flex: 1; min-width: 0; accent-color: var(--blue); }
.statInputs output { width: 1.5em; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.preview { position: sticky; top: 0; text-align: center; }
@media (max-width: 720px) {
  .editGrid { grid-template-columns: 1fr; }
  .statInputs { grid-template-columns: 1fr; }
  .preview { position: static; order: -1; }
}


/* ---------- toast ---------- */
/* entra in 220ms, esce in 140ms; è una transizione, quindi si ritarga se ne arrivano due di fila */
#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  max-width: calc(100vw - 32px);
  padding: 10px 20px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--cream);
  transform: translate(-50%, 12px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-duration: 220ms;
  transition-timing-function: var(--ease-out);
}

/* ---------- login, menu, admin ---------- */
.pageTitle { text-align: center; margin: 8px 0 18px; }
.panel {
  max-width: 560px;
  margin: 0 auto 16px;
  padding: 20px;
  border: 3px solid var(--navy);
  border-radius: 20px;
  background: var(--cream);
  box-shadow: 0 6px 0 var(--navy);
}
.panel h1, .panel h2 { margin: 0 0 12px; }
.panel label { display: block; margin-bottom: 12px; font-weight: 500; }
.panel input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 12px;
  border: 2px solid var(--navy);
  border-radius: 12px;
  background: #fff;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
/* stato di focus ben visibile su tutti i campi di testo */
.panel input:not([type=checkbox]):not([type=radio]):focus-visible,
#fName:focus-visible, .pathSelect:focus-visible, .adminForm select:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(63, 127, 191, .35);
}

/* login: casa illuminata, titolo, spiegazione, campi */
.loginHero {
  display: block;
  width: 200px;
  margin: 24px auto 0;
  overflow: hidden;
  border: 3px solid var(--navy);
  border-radius: 20px;
  background: #f4a3b7;
  box-shadow: 0 6px 0 var(--navy);
}
.loginHero svg { display: block; width: 100%; height: auto; padding: 12px 12px 0; }
.loginHero .glass { fill: #fff8ee; animation: lampOn 900ms var(--ease-out) 350ms forwards; }
@keyframes lampOn { to { fill: #ffd96a; } }
.login { max-width: 380px; margin-top: 20px; animation-delay: 60ms; }
.login h1 { font-size: 1.8rem; margin-bottom: 4px; }
.login .sub { margin: 0 0 16px; color: #5b6a90; line-height: 1.4; }
.login .btn { width: 100%; padding: 11px 18px; }

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}
.menu .menuBtn { flex: 0 1 calc((100% - 32px) / 3); min-width: 220px; }
.menuBtn {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid var(--navy);
  border-radius: 20px;
  background: #f08fa8;
  box-shadow: 0 6px 0 var(--navy);
  color: var(--cream);
  text-decoration: none;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
/* i tile salgono in cascata (50ms l'uno dall'altro) */
.menu .menuBtn { animation: rise 260ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.menuBtn.casa, .menuBtn.citta { background: #f4a3b7; }
.menuBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--navy); transition-duration: 90ms; }
.menuBtn:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.menuBtn .art { padding: 14px 14px 0; }
.menuBtn svg { display: block; width: 100%; height: auto; }
.menuBtn .glass { transition: fill 320ms ease; }
.menuBtn:focus-visible .glass { fill: #ffd96a; transition-duration: 90ms; transition-timing-function: var(--ease-out); }
.menuBtn .shine { transition: opacity 320ms ease; }
.plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  padding: 9px 10px;
  background: var(--navy);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}
.plate small { font-size: .75rem; font-weight: 400; opacity: .8; font-variant-numeric: tabular-nums; }

.quiz { max-width: 720px; }
.quiz fieldset { margin: 0 0 18px; padding: 0; border: 0; }
.quiz legend { padding: 0; margin-bottom: 8px; font-weight: 500; line-height: 1.35; }
.scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.scale label { margin: 0; }
.scale input { position: absolute; opacity: 0; width: 0; height: 0; }
.scale span {
  display: block;
  padding: 8px 0;
  border: 2px solid var(--navy);
  border-radius: 10px;
  background: #fff;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.scale span:active { transform: scale(.94); }
.scale input:checked + span { background: var(--blue); color: #fff; transform: translateY(-2px); animation: pop 220ms var(--ease-out); }
@keyframes pop {
  0% { transform: translateY(-2px) scale(.94); }
  55% { transform: translateY(-2px) scale(1.07); }
  100% { transform: translateY(-2px) scale(1); }
}
.scale input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.hint.ok { color: #5b6a90; }
@media (max-width: 520px) { .scale { grid-template-columns: repeat(5, 1fr); } }


.adminForm { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 10px; align-items: start; max-width: 800px; }
.adminForm h2, .adminForm .hint { grid-column: 1 / -1; margin: 0; }
.adminForm input { margin: 0; }
.adminForm, .percorsiForm, .group { max-width: 1000px; }
.userRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--pink); }
.userRow img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.userRow .info { width: 150px; display: flex; flex-direction: column; }
.userRow small { color: #5b6a90; }
.pathSelect, .adminForm select {
  flex: 1; min-width: 140px; margin: 0; padding: 6px 10px;
  border: 2px solid var(--navy); border-radius: 12px; background: #fff; color: inherit; font: inherit;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.adminForm select { padding: 8px 12px; width: 100%; min-width: 0; }
@media (max-width: 720px) { .adminForm { grid-template-columns: 1fr; } }

/* l'anello di selezione è un box-shadow, così entra in transizione */

/* sblocchi per percorso: una sola riga orizzontale */
.unlocks { flex-basis: 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 0 0 8px; font-size: .8rem; overflow-x: auto; white-space: nowrap; }
.panel .chip { margin: 0; font-weight: 400; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.chip span {
  display: block; padding: 3px 10px; border: 2px solid var(--navy); border-radius: 999px; background: #fff;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.chip:active span { transform: scale(.96); }
.chip input:checked + span { background: var(--blue); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }

.percorsiForm { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; }
.percorsiForm h2, .percorsiForm .hint, .percorsiList { grid-column: 1 / -1; margin: 0; }
.percorsiForm input { margin: 0; }
.percorsiList { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pTag { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 12px; border: 2px solid var(--navy); border-radius: 999px; background: var(--pink-light); }
.pTag button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; line-height: 1; transition: background-color 150ms var(--ease-out); }
.group h2 { font-size: 1.1rem; }
.group .userRow:first-of-type { border-top: 0; }

.noUnlock { display: block; margin-bottom: 8px; color: #5b6a90; }

/* ---------- admin: tab e riepilogo ---------- */
/* nessuna animazione: l'admin cambia tab di continuo */
.tabs { display: flex; justify-content: center; gap: 8px; margin: 0 auto 16px; }
.tab { padding: 7px 18px; border: 2px solid var(--navy); border-radius: 999px; background: var(--cream); color: var(--navy); text-decoration: none; font-weight: 500; }
.tab:active { transform: scale(.97); }
.tab.on { background: var(--navy); color: var(--cream); }
.summaryBar { display: flex; gap: 10px; max-width: 1200px; margin: 0 auto 12px; }
.summaryBar select { flex: 0 1 280px; }
.panel.summary { max-width: 1200px; padding: 0; overflow: hidden; }
.tableWrap { overflow-x: auto; }
.summary table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .85rem; }
.summary th, .summary td { padding: 6px 8px; border-bottom: 1px solid var(--pink); white-space: nowrap; }
.summary thead th { background: var(--pink-light); text-align: center; font-weight: 600; }
.summary th.stat { white-space: normal; min-width: 78px; max-width: 90px; font-size: .75rem; font-weight: 500; }
.summary th.g { border-bottom: 1px solid var(--navy); }
.summary th.who { position: sticky; left: 0; z-index: 1; background: var(--cream); text-align: left; }
.summary thead th.who { background: var(--pink-light); }
.summary td.v { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.summary td.empty { color: #9aa5c4; font-weight: 400; }
.summary tfoot th, .summary tfoot td { border-top: 2px solid var(--navy); border-bottom: 0; background: var(--pink-light); }

/* ---------- hover: solo dove esiste davvero (niente "hover incollato" sul touch) ---------- */
@media (hover: hover) and (pointer: fine) {
  .me:hover { background: #fff; }
  .btn:hover:not(:disabled) { filter: brightness(1.07); }
  .menuBtn:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--navy); }
  .menuBtn:hover:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--navy); }
  .menuBtn:hover .glass { fill: #ffd96a; transition-duration: 90ms; transition-timing-function: var(--ease-out); }
  .menuBtn:hover .shine { opacity: .2; }
  .scale span:hover { background: var(--pink-light); }
  .scale input:checked + span:hover { background: var(--blue); }
  .chip:hover span { background: var(--pink-light); }
  .chip input:checked + span:hover { background: var(--blue); }
  .x:hover { background: var(--pink-light); }
  .pTag button:hover { background: #fff; }
  .tab:not(.on):hover { background: #fff; }
}


/* ---------- movimento ridotto: via spostamenti e scale, restano dissolvenze e colori ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #view > *, .menu .menuBtn, .avatar.enter { animation-name: fade; }
  .btn.ready, .scale input:checked + span { animation: none; }
  .loginHero .glass { animation: none; fill: #ffd96a; }
  .btn:active:not(:disabled), .menuBtn:active, .menuBtn:hover, .scale span:active, .pickItem:active img,
  .pickItem:hover img, .chip:active span, .x:active, .me:active, .tab:active { transform: none !important; }
  .scale input:checked + span { transform: none; }
  dialog, dialog[open] { transform: none; }
  @starting-style { dialog[open] { transform: none; } }
  #toast, #toast.show { transform: translateX(-50%); }
}


/* ---------- admin: importazione ---------- */
.importBox { max-width: 1000px; }
.importBox summary { cursor: pointer; font-weight: 600; }
.importBox textarea {
  display: block; width: 100%; margin: 8px 0 10px; padding: 10px 12px;
  border: 2px solid var(--navy); border-radius: 12px; background: #fff; font: inherit; resize: vertical;
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.importBox textarea:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(63, 127, 191, .35); }
.importBox .sub { margin: 8px 0 0; color: #5b6a90; line-height: 1.4; }
.importOut { margin-top: 10px; }
.importOut p { margin: 4px 0; }


/* ======================================================================
   Co-housing: tessere dei ruoli, carta personale, scheda del ruolo, casa e stanze
   ====================================================================== */
:root {
  --lime: #cdf941;
  --pervinca: #9d93f2;
  --turchese: #23dfde;
  --rosa-carta: #f6607b;
}

/* Tessera del ruolo: fondo dell'area della competenza primaria, bordo rosa */
.roleTile {
  --bw: 4px;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 17%;
  background: #eee;
  box-shadow: inset 0 0 0 var(--bw) var(--rosa-carta);
  overflow: hidden;
}
.roleTile img { display: block; width: 100%; height: 100%; padding: 8%; object-fit: contain; }
.roleTile.area-cognitive { background: var(--lime); }
.roleTile.area-emotive { background: var(--pervinca); }
.roleTile.area-relazionali { background: var(--turchese); }
.roleTile.area-none { background: #f3e9ec; display: grid; place-items: center; color: #b08a96; font-weight: 600; font-size: 1.6rem; }
.roleTile.small { --bw: 3px; width: 44px; flex: none; }
.roleTile.chip { --bw: 2px; width: 34px; flex: none; border-radius: 12px; }

/* Carta personale 16:9: dimensioni e testi seguono la larghezza della carta */
.pcardWrap { container-type: inline-size; width: 100%; max-width: 1100px; margin: 0 auto 14px; }
.pcard {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2cqw;
  aspect-ratio: 16 / 9;
  padding: 2.4cqw;
  border: 0.55cqw solid var(--rosa-carta);
  border-radius: 2.4cqw;
  background: #fffdfb;
  color: var(--navy);
}
.pc-left {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2cqw; padding-right: 2cqw; text-align: center;
  border-right: 0.15cqw solid var(--rosa-carta);
}
.pc-left .roleTile { --bw: 0.6cqw; width: 80%; }
.pc-role { font-size: 2cqw; font-weight: 500; line-height: 1.15; }
.pc-role.empty { color: #a9758a; font-style: italic; }
.pc-name { display: flex; flex-direction: column; font-size: 4.4cqw; font-weight: 600; line-height: 1.02; text-transform: uppercase; overflow-wrap: anywhere; }
.pc-right { display: flex; flex-direction: column; min-width: 0; }
.pc-right h3 { margin: 0 0 1.2cqw; text-align: center; font-size: 3cqw; text-transform: uppercase; letter-spacing: 0.02em; }
.pc-cols { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqw; min-height: 0; }
.pc-col h4 { margin: 0 0 0.6cqw; text-align: center; color: var(--rosa-carta); font-size: 2.3cqw; text-transform: uppercase; }
.pc-col ul { display: flex; flex-direction: column; height: calc(100% - 3.4cqw); margin: 0; padding: 0; list-style: none; }
.pc-col li {
  flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1cqw;
  border-bottom: 0.14cqw solid var(--rosa-carta); font-size: 1.5cqw; line-height: 1.15;
}
.pc-col li:last-child { border-bottom: 0; }
.pc-val {
  display: grid; place-items: center; width: 3.5cqw; height: 3.5cqw;
  border: 0.22cqw solid var(--rosa-carta); border-radius: 50%;
  font-size: 1.9cqw; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pc-val.empty { color: #c9a5b2; font-weight: 400; }

/* carta stretta (telefono): colonne una sotto l'altra, misure in rem */
@container (max-width: 600px) {
  .pcard { grid-template-columns: 1fr; aspect-ratio: auto; padding: 16px; gap: 14px; border-width: 4px; border-radius: 18px; }
  .pc-left { padding: 0 0 14px; border-right: 0; border-bottom: 2px solid var(--rosa-carta); }
  .pc-left .roleTile { --bw: 4px; width: 130px; }
  .pc-role { font-size: 1rem; }
  .pc-name { font-size: 1.9rem; }
  .pc-right h3 { font-size: 1.1rem; margin-bottom: 8px; }
  .pc-cols { grid-template-columns: 1fr; gap: 12px; }
  .pc-col h4 { font-size: 1rem; margin-bottom: 4px; }
  .pc-col ul { height: auto; }
  .pc-col li { padding: 6px 0; font-size: 0.9rem; }
  .pc-val { width: 28px; height: 28px; font-size: 0.95rem; border-width: 2px; }
}

/* Scheda di presentazione del ruolo */
.rsheet { display: grid; grid-template-columns: minmax(150px, 30%) 1fr; gap: 28px; align-items: start; color: var(--navy); }
.rs-left { position: sticky; top: 0; text-align: center; }
.rs-left .roleTile { --bw: 5px; max-width: 260px; margin: 0 auto 10px; }
.rs-name { font-weight: 600; font-size: 1.15rem; }
.rs-right h2 { margin: 0 0 10px; font-family: Georgia, 'Times New Roman', serif; font-size: 2.1rem; line-height: 1.1; }
.rs-descr { margin: 0 0 14px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.55; }
.rs-block { margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--rosa-carta); }
.rs-block h5 { margin: 0 0 4px; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }
.rs-block p, .rs-block li { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.rs-block ul { margin: 0; padding-left: 18px; }
.rs-block li + li { margin-top: 4px; }
.roleDlg { width: min(1000px, calc(100vw - 32px)); }
.charBtns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
@media (max-width: 640px) {
  .rsheet { grid-template-columns: 1fr; gap: 14px; }
  .rs-left { position: static; }
  .rs-left .roleTile { max-width: 150px; }
  .rs-right h2 { font-size: 1.6rem; }
}
#viewDlg { width: min(1100px, calc(100vw - 32px)); padding: 16px; }
#viewDlg .pcardWrap { margin-bottom: 0; }

/* Scelta del ruolo */
.roleIntro { margin: 0 auto 14px; max-width: 760px; text-align: center; line-height: 1.45; }
.rolePanel { max-width: 1000px; }
.roleGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 14px; }
.roleItem { padding: 0; border: 0; background: none; cursor: pointer; text-align: center; animation: rise 240ms var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 8) * 30ms); }
.roleItem .roleTile { transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.roleItem span { display: block; min-height: 2.4em; margin-top: 6px; font-size: 0.9rem; line-height: 1.2; text-wrap: balance; transition: color 150ms var(--ease-out); }
.roleItem:active .roleTile { transform: scale(0.97); }
.roleItem.on .roleTile { box-shadow: inset 0 0 0 var(--bw) var(--rosa-carta), 0 0 0 3px var(--cream), 0 0 0 7px var(--red); }
.roleItem.on span { color: var(--red); font-weight: 600; }
.roleItem:focus-visible { outline: none; }
.roleItem:focus-visible .roleTile { box-shadow: inset 0 0 0 var(--bw) var(--rosa-carta), 0 0 0 3px var(--cream), 0 0 0 7px var(--blue); }
@media (hover: hover) and (pointer: fine) { .roleItem:hover .roleTile { transform: scale(1.05); } }
@media (max-width: 720px) { .roleGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Editor admin: la carta occupa tutta la larghezza */
.editGrid { grid-template-columns: 1fr; }
.preview { position: static; order: 2; }
.preview .btn { margin-top: 6px; }

/* ---------- la casa ---------- */
.casa, .stanza { max-width: 1500px; margin: 0 auto; }
.casaCaption { flex: 1; margin: 0; min-width: 200px; text-align: center; font-size: 1.05rem; min-height: 1.4em; transition: color 200ms var(--ease-out); }
.casa:not(.inside) .casaCaption { color: #6b5470; }
.toggleBtn { transition: padding 200ms var(--ease-out), font-size 200ms var(--ease-out), transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), opacity 160ms var(--ease-out), filter 160ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.casa:not(.inside) .toggleBtn { padding: 12px 26px; font-size: 1.08rem; }
.casaStage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; container-type: inline-size;
  overflow: hidden; border: 3px solid var(--navy); border-radius: 18px;
  background: var(--pink-light); box-shadow: 0 6px 0 var(--navy);
}
.casaStage img {
  position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none;
  transition: opacity 350ms var(--ease-in-out), transform 350ms var(--ease-in-out), filter 350ms var(--ease-in-out);
}
/* entrare in casa: la facciata si avvicina alla porta mentre sfuma, l'interno si mette a fuoco */
.casaStage .ext { transform-origin: 50% 85%; }
.casaStage .int { opacity: 0; filter: blur(3px); transform: scale(0.985); }
.casaStage.inside .int { opacity: 1; filter: none; transform: none; }
.casaStage.inside .ext { opacity: 0; filter: blur(3px); transform: scale(1.06); }
/* l'immagine della stanza che la transizione condivisa ingrandisce / rimpicciolisce */
.casaStage img.roomZoom { inset: auto; transition: none; filter: none; transform: none; opacity: 1; pointer-events: none; }
.hotspots { position: absolute; inset: 0; width: 100%; height: 100%; }
.hotspots .room { fill: transparent; stroke: transparent; stroke-width: 5; stroke-linejoin: round; cursor: pointer; outline: none; transition: fill 150ms var(--ease-out), stroke 150ms var(--ease-out); }
.hotspots .room:focus-visible { fill: rgba(255, 217, 106, 0.35); stroke: #fff; }
.casaStage:not(.inside) .hotspots { pointer-events: none; }
.door {
  position: absolute; left: 50.3%; top: 67.5%; width: 8.4%; height: 25.5%;
  border: 0; border-radius: 40% 40% 0 0 / 14% 14% 0 0; background: transparent; cursor: pointer;
  transition: background-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.door:focus-visible { outline: none; background: rgba(255, 217, 106, 0.3); box-shadow: 0 0 0 4px #fff; }
.casaStage.inside .door { display: none; }
/* un leggero richiamo sulla porta: 2 pulsazioni appena arrivati, poi si ferma */
.casaStage:not(.inside) .door { animation: doorHint 1.6s ease-in-out 0.8s 2; }
@keyframes doorHint {
  0%, 100% { background-color: rgba(255, 217, 106, 0); box-shadow: 0 0 0 0 rgba(255, 217, 106, 0); }
  50% { background-color: rgba(255, 217, 106, 0.24); box-shadow: 0 0 0 0.7cqw rgba(255, 217, 106, 0.4); }
}
.door, .hotspots .room { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (hover: hover) and (pointer: fine) {
  .hotspots .room:hover { fill: rgba(255, 217, 106, 0.38); stroke: var(--navy); }
  .door:hover { background: rgba(255, 217, 106, 0.3); box-shadow: 0 0 0 4px #fff; }
}

/* i 4 posti di ogni stanza, in basso nella stanza */
.badges { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease-out) 150ms; }
.casaStage.inside .badges { opacity: 1; }
.slotsRow { position: absolute; display: flex; justify-content: center; gap: 0.3cqw; transform: translateY(-125%); }
.dot { flex: none; width: 2cqw; height: 2cqw; border-radius: 50%; }
.dot .roleTile { --bw: 0.25cqw; border-radius: 50%; box-shadow: inset 0 0 0 var(--bw) var(--rosa-carta), 0 0.15cqw 0.3cqw rgba(27, 42, 92, 0.4); }
.dot.empty { border: 0.2cqw dashed rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.3); }
.dot.mine { outline: 0.3cqw solid var(--red); outline-offset: 0.1cqw; }
.dot.pop { animation: dotIn 200ms var(--ease-out); }
.dot.out { animation: fade 160ms var(--ease-out); }
@keyframes dotIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: none; }
}

/* ---------- transizione condivisa: la stanza si ingrandisce fino alla vista aperta ---------- */
.vt-stanza { view-transition-name: stanza; }
::view-transition-group(stanza) { animation-duration: 380ms; animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
.vt #view > * { animation: none; }
.vt .roomFig img { transition: none; opacity: 1; }

/* ---------- la stanza ---------- */
.stanza .roomBar h1 { font-size: 1.6rem; }
.roomGrid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.roomSide { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.roomFig { display: flex; justify-content: center; align-items: flex-end; margin: 0; }
.roomFig img {
  display: block; max-width: 100%; max-height: 64vh; width: auto; height: auto;
  filter: drop-shadow(0 6px 0 rgba(27, 42, 92, 0.25));
  opacity: 0; transition: opacity 220ms var(--ease-out);
}
.roomFig img.loaded { opacity: 1; }
.roomText { max-width: none; margin: 0; padding: 16px 18px; font-size: 1rem; line-height: 1.5; }
.roomText p { margin: 0 0 10px; }
.rt-descr { color: #35457a; }
.rt-adatta { margin-top: 14px; padding-left: 12px; border-left: 3px solid var(--rosa-carta); font-weight: 600; }
.roomInfo { margin: 0; color: #5b6a90; font-size: 0.95rem; }
.slotWrap { display: contents; }
.slotsTitle { margin: 6px 0 0; font-size: 1.1rem; }
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.slot.empty { display: grid; place-items: center; min-height: 128px; border: 3px dashed rgba(27, 42, 92, 0.35); border-radius: 18px; color: #5b6a90; }

.miniCard {
  display: flex; flex-direction: column; gap: 10px; min-height: 128px; padding: 12px;
  border: 3px solid var(--navy); border-radius: 18px; background: var(--cream); box-shadow: 0 5px 0 var(--navy);
  color: var(--navy); text-align: left; cursor: pointer;
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.miniCard:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--navy); }
.miniCard:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .miniCard:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--navy); } }
.miniCard { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 8px 10px; }
.miniCard .roleTile.small { width: 52px; }
.mc-text { min-width: 0; align-self: center; }
.mc-text b { display: block; font-size: 1.05rem; line-height: 1.15; overflow-wrap: anywhere; }
.mc-text small { display: block; margin-top: 2px; color: #5b6a90; font-size: 0.85rem; }
.mc-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mc-group { display: flex; align-items: flex-end; gap: 2px; height: 30px; padding-bottom: 1px; border-bottom: 2px solid var(--navy); }
.mc-group i {
  flex: 1; height: 100%; transform-origin: bottom; transform: scaleY(max(var(--v), 0.1));
  border: 1px solid var(--navy); border-bottom: 0; border-radius: 2px 2px 0 0;
}
/* quando una carta compare, la carta sale e le barrette crescono una dopo l'altra */
.miniCard.enter { animation: rise 260ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
.miniCard.enter .mc-group i { animation: barGrow 380ms var(--ease-out) backwards; animation-delay: calc(var(--j, 0) * 18ms + 120ms); }
@keyframes barGrow { from { transform: scaleY(0.15); } }
.mc-group.area-cognitive i { background: var(--lime); }
.mc-group.area-emotive i { background: var(--pervinca); }
.mc-group.area-relazionali i { background: var(--turchese); }
.mc-group i.zero { opacity: 0.3; }

@media (max-width: 900px) {
  .roomGrid { grid-template-columns: 1fr; }
  .roomFig img { max-height: 44vh; }
}
@media (max-width: 520px) { .slots { grid-template-columns: 1fr; } }

/* movimento ridotto: niente dissolvenze lunghe tra esterno e interno */
@media (prefers-reduced-motion: reduce) {
  .casaStage img { transition: opacity 150ms linear; }
  .casaStage .ext, .casaStage.inside .ext { transform: none; filter: none; }
  .casaStage .int, .casaStage.inside .int { transform: none; filter: none; }
  .badges { transition-duration: 150ms; }
  .casaStage:not(.inside) .door, .dot.pop, .dot.out, .miniCard.enter .mc-group i { animation: none; }
  .miniCard.enter, .roleItem { animation-name: fade; }
}