* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Le due safe-area passano da qui, non da env() sparso: cosi' nel browser
     si possono FINGERE (tacca e barra home di un iPhone) impostando --sat e
     --sab a mano, ed e' l'unico modo di vedere su un PC quello che succede
     sul telefono. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);

  --purple: #a661e2;
  --purple-d: #8144c4;
  --purple-l: #c79bee;
  --navy: #171233;
  --navy-2: #211a44;
  --panel: #ffffff;
  --ink: #1c2030;
  --accent: var(--purple);
  --card-shadow: 0 3px 0 rgba(20, 14, 40, .28);
  --easy: #37b26b;
  --med: #e0a52e;
  --hard: #d15a7a;
}

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 70% -10%, #2e2358 0%, transparent 60%),
    linear-gradient(180deg, #171233 0%, #120e28 100%);
  background-attachment: fixed;
  color: #eee;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- header ---------- */
header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(15, 11, 33, .95);
  border-bottom: 1px solid rgba(166, 97, 226, .35);
  position: sticky; top: 0; z-index: 20;
}
header .hback {
  font: inherit; font-size: 22px; line-height: 1;
  width: 34px; height: 34px; padding: 0;
  border-radius: 9px; border: 1px solid rgba(166,97,226,.5);
  background: rgba(166,97,226,.14); color: var(--purple-l); cursor: pointer;
  flex-shrink: 0;
}
header .logo { font-size: 22px; font-weight: 800; letter-spacing: .5px;
  color: var(--purple); flex-shrink: 0; white-space: nowrap; }
header .logo span { color: #f2eefb; }
header .sub { font-size: 13px; color: #b9aee0;
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header select, header #timer { flex-shrink: 0; }
header .spacer { flex: 1; }
header select {
  font: inherit;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(166,97,226,.5);
  background: #221a44; color: #eee;
  cursor: pointer;
}
#timer { font-variant-numeric: tabular-nums; font-size: 14px; color: #cdbff0; min-width: 48px; text-align: right; }

/* ---------- zone select ---------- */
.zones-wrap { max-width: 940px; margin: 30px auto; padding: 0 16px; }
.zones-wrap h1 { font-size: 30px; margin-bottom: 4px; color: #fff; }
.zones-wrap .subtitle { color: #b9aee0; margin-bottom: 22px; }
/* Le due regole che non si capiscono da sole guardando le schede: che le zone
   si possono fare in qualunque ordine, e che i bonus di una zona dipendono da
   QUELLA zona. Sta qui e non nelle Regole perche' li' ci arriva chi ha gia'
   un dubbio, e questa e' roba da sapere prima di scegliere. */
.zones-wrap .zones-how {
  color: #cfc4ee; font-size: 14px; line-height: 1.5;
  margin: -14px 0 22px; padding: 11px 13px;
  border-radius: 12px; border: 1px solid rgba(166,97,226,.28);
  background: rgba(36,28,73,.55);
}
.zones-wrap .zones-how b { color: #ece7fa; }
.zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}
.zone-card {
  position: relative;
  min-height: 190px;
  border-radius: 18px;
  border: 2px solid rgba(166,97,226,.55);
  background-size: cover; background-position: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  cursor: pointer;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .1s, box-shadow .1s;
}
.zone-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(166,97,226,.35); }
.zone-card .zone-meta { padding: 16px 18px; z-index: 1; }
.zone-card .zone-name { font-size: 24px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.zone-card .zone-sub { font-size: 13px; color: #e7ddfb; margin-top: 2px;
  text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.zone-card .zone-prog { font-size: 12px; color: #cbbdf0; margin-top: 8px; font-weight: 600; }
.zone-card .zone-play {
  position: absolute; top: 14px; right: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--purple); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; box-shadow: 0 3px 0 var(--purple-d);
}
.zone-card.soon {
  background: repeating-linear-gradient(45deg, #221a44, #221a44 12px, #1c1638 12px, #1c1638 24px);
  border-style: dashed; cursor: default; opacity: .6;
  align-items: center; justify-content: center;
}
.zone-card.soon:hover { transform: none; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.zone-card.soon .zone-meta { text-align: center; }
.zone-card.soon .zone-name { font-size: 40px; opacity: .5; }

/* ---------- level select ---------- */
.home { max-width: 900px; margin: 26px auto; padding: 0 16px; }
.home h1 { font-size: 26px; margin-bottom: 4px; color: #fff; }
.home p.subtitle, .home p.zone { color: #b9aee0; margin-bottom: 20px; }
.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 14px;
}
.level-card {
  background: #241c49;
  border: 1px solid rgba(166,97,226,.4);
  border-left: 5px solid var(--purple);
  border-radius: 12px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
  padding: 12px 13px;
  cursor: pointer;
  color: #ece7fa;
  transition: transform .08s, box-shadow .08s;
  min-height: 96px;
  display: flex; flex-direction: column;
}
.level-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(166,97,226,.3); }
.level-card.d1 { border-left-color: var(--easy); }
.level-card.d2 { border-left-color: var(--med); }
.level-card.d3 { border-left-color: var(--hard); }
.level-card.tut { border-left-color: var(--purple-l); background: #2b2152; }
.level-card .lc-top { display: flex; align-items: center; justify-content: space-between; }
.level-card .num { font-size: 12px; color: #a99cd0; font-weight: 700; }
.level-card .nm { font-weight: 700; margin: 6px 0; flex: 1; line-height: 1.25; }
.level-card .lc-bot { display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: #a99cd0; }
.level-card .difftext { font-weight: 700; }
.level-card.d1 .difftext { color: var(--easy); }
.level-card.d2 .difftext { color: var(--med); }
.level-card.d3 .difftext { color: var(--hard); }
.level-card.done { border-color: var(--easy); }
.level-card.done .nm::after { content: " ✓"; color: var(--easy); }

/* ---------- tutorial ---------- */
.tutbar {
  margin: 12px 16px 0;
  padding: 12px 16px;
  background: #fff8e1;
  color: #2a2410;
  border: 2px solid #1c2030;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  font-size: 14.5px;
  line-height: 1.45;
}
.tutbar .tag {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 6px;
  padding: 2px 8px;
  margin-right: 8px;
}
.tutbar .tut-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.tutbar .tut-head button {
  font: inherit; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 8px;
  border: 2px solid #c9cdde; background: #fff; cursor: pointer;
}
.level-card.tut { background: #fff8e1; }

/* ---------- indizi generali ---------- */
.genclues {
  background: #2b2152;
  border: 1px solid rgba(166,97,226,.5);
  border-left: 5px solid var(--purple);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  color: #ece7fa;
}
.genclues .gc-title {
  font-size: 12px; font-weight: 800; letter-spacing: .5px;
  color: var(--purple-l); margin-bottom: 6px; text-transform: uppercase;
}
.genclues ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.genclues li {
  font-size: 13px; line-height: 1.35; padding-left: 14px; position: relative;
}
.genclues li::before {
  content: "•"; color: var(--purple); position: absolute; left: 2px; font-weight: 800;
}

/* ---------- game layout ---------- */
.game {
  display: grid;
  grid-template-columns: 300px 1fr 170px;
  gap: 16px;
  padding: 16px;
  align-items: start;
}
/* elementi mobile: nascosti su desktop */
.mbar, .mstrip, .mclue, .msubmit { display: none; }

@media (max-width: 980px) {
  .game { grid-template-columns: 1fr; gap: 0; padding: 8px; }
  .game > .suspects, .game > .tools { display: none; }
  header { padding: 8px 10px; gap: 8px; }
  header .sub { font-size: 12px; }

  /* i figli di grid/flex non scendono sotto il min-content senza questo */
  .game > *, .board-zone > * { min-width: 0; max-width: 100%; }

  .board-zone { display: flex; flex-direction: column; gap: 10px; }
  .board-wrap { order: 1; }

  .mbar {
    order: 2;
    display: flex;
    gap: 6px;
    justify-content: center;
  }
  .mbar button {
    flex: 1 1 0;
    min-width: 0;
    max-width: 86px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font: inherit; font-size: 16px;
    padding: 8px 2px;
    border-radius: 12px;
    border: 2px solid #1c2030;
    background: var(--panel);
    box-shadow: var(--card-shadow);
    cursor: pointer;
  }
  .mbar button span {
    font-size: clamp(8px, 2.8vw, 11px);
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mbar button.active { background: #1c2030; color: #fff; }
  .mbar button:disabled { opacity: .4; }

  .mstrip {
    order: 3;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 2px;
    -webkit-overflow-scrolling: touch;
  }
  .mav { flex: 0 0 auto; text-align: center; cursor: pointer; width: 62px; }
  .mav .ava {
    width: 54px; height: 54px; margin: 0 auto;
    border-radius: 14px;
    border: 3px solid #1c2030;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800; color: #fff;
  }
  .mav.sel .ava { outline: 3px solid var(--accent); outline-offset: 2px; }
  .mav.placed { opacity: .45; }
  .mav.victim .ava { border-color: #b33; }
  .mav .nm { font-size: 11px; font-weight: 700; margin-top: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .mclue {
    order: 4;
    display: block;
    color: #1c2030;
    background: var(--panel);
    border: 2px solid #1c2030;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.4;
    min-height: 48px;
  }
  .mclue.victim { background: #fdeeee; }

  .msubmit {
    order: 5;
    display: block;
    width: 100%;
    font: inherit; font-size: 17px; font-weight: 800;
    padding: 14px;
    border-radius: 14px;
    border: 2px solid #1c2030;
    background: var(--accent); color: #fff;
    box-shadow: var(--card-shadow);
    cursor: pointer;
  }
  .msubmit:disabled { background: #b9c2d6; color: #eef; }
  .tutbar { margin: 8px 8px 0; font-size: 13.5px; }
}

/* suspects panel */
.suspects h2 { font-size: 15px; text-align: center; margin-bottom: 2px; color: #fff; }
.suspects .hint-line { font-size: 11px; color: #b9aee0; text-align: center; margin-bottom: 10px; }
.suspect-card {
  background: var(--panel);
  color: #1c2030;
  border: 2px solid #1c2030;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  padding: 8px 10px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
}
.suspect-card.selected { outline: 3px solid var(--accent); }
.suspect-card.placed { opacity: .45; }
.suspect-card.victim { background: #fdeeee; }
.suspect-card .avatar {
  width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
  flex-shrink: 0; border: 2px solid #1c2030;
  overflow: hidden;
}
.suspect-card .avatar img,
.mav .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suspect-card .txt .nm { font-weight: 700; font-size: 14px; }
.suspect-card .txt .clue { font-size: 12.5px; color: #334; margin-top: 2px; }

/* board */
.board-wrap {
  display: flex; justify-content: center; overflow-x: auto;
  /* la cella si misura su QUESTO contenitore (100cqi), non sul viewport:
     con 100vw bisognava indovinare a mano quanto tolgono padding, bordi e
     safe-area, e bastava sbagliare di pochi pixel perche' la griglia uscisse
     dallo schermo. Cosi' invece il conto e' esatto su ogni dispositivo. */
  container-type: inline-size;
}
.board {
  /* dimensione cella fluida: si adatta alla larghezza del contenitore E
     all'altezza del viewport. --n (numero colonne) arriva dall'inline style;
     --bx e' quanto si mangiano bordo e padding della griglia stessa. */
  /* bordo (4px per lato) piu' l'anello mint del tema, che sta fuori dal bordo
     e verrebbe tagliato dallo scorrimento se non gli si lasciasse il posto */
  --bx: 12px;
  --cs: clamp(30px, min(calc((100cqi - var(--bx)) / var(--n, 6)),
                        calc((100vh - 180px) / var(--n, 6))), 78px);
  display: grid;
  border: 4px solid #101420;
  border-radius: 6px;
  background: #101420;
  gap: 0;
  box-shadow: 8px 10px 0 rgba(28,32,48,.18);
}
@media (max-width: 980px) {
  .board {
    --cs: clamp(26px, min(calc((100cqi - var(--bx)) / var(--n, 6)),
                          calc((100vh - 400px) / var(--n, 6))), 78px);
  }
}
.cell {
  width: var(--cs, 72px);
  height: var(--cs, 72px);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cs, 72px) * .52);
  cursor: pointer;
  user-select: none;
  background-repeat: repeat;
  /* griglia sempre leggibile: velo chiaro interno che affianca la linea scura
     del bordo, cosi' il reticolo si vede anche sulle texture scure */
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,.22);
}

/* -------------------------------------------------------------------------
   Pavimenti cartoon procedurali (pattern CSS sopra il --floor della stanza).
   I pattern usano rgba nere/bianche cosi' restano coerenti su ogni colore.
   ------------------------------------------------------------------------- */

/* Legno: assi orizzontali con fughe scure — Molo (Ponte usa la texture) */
.cell.floor-molo {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.13) 0, rgba(0,0,0,.13) 2px,
      transparent 2px, transparent calc(var(--cs,72px) / 3)),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.06) 0, rgba(0,0,0,.06) 1px,
      transparent 1px, transparent 6px);
}

/* Metallo/casse: assi verticali — Stiva */
.cell.floor-stiva {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.11) 0, rgba(0,0,0,.11) 2px,
      transparent 2px, transparent calc(var(--cs,72px) / 3)),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 40%);
}

/* Piastrelle: fughe a scacchi — Cambusa / Faro */
.cell.floor-cambusa, .cell.floor-faro {
  background-image:
    linear-gradient(rgba(0,0,0,.07) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(0,0,0,.07) 1.5px, transparent 1.5px);
  background-size:
    calc(var(--cs,72px) / 2) calc(var(--cs,72px) / 2),
    calc(var(--cs,72px) / 2) calc(var(--cs,72px) / 2);
}
.cell.floor-faro {
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.06) 25%, transparent 25%,
      transparent 75%, rgba(0,0,0,.06) 75%),
    linear-gradient(45deg, rgba(0,0,0,.06) 25%, transparent 25%,
      transparent 75%, rgba(0,0,0,.06) 75%);
  background-size:
    calc(var(--cs,72px) / 2) calc(var(--cs,72px) / 2),
    calc(var(--cs,72px) / 2) calc(var(--cs,72px) / 2);
  background-position: 0 0, calc(var(--cs,72px) / 4) calc(var(--cs,72px) / 4);
}

/* Tappeto/pannelli: trama diagonale fitta — Cabina / Plancia */
.cell.floor-cabina {
  background-image:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.05) 0, rgba(0,0,0,.05) 2px,
      transparent 2px, transparent 6px);
}
.cell.floor-plancia {
  background-image:
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.10) 0, rgba(255,255,255,.10) 2px,
      transparent 2px, transparent 7px),
    repeating-linear-gradient(45deg,
      rgba(0,0,0,.05) 0, rgba(0,0,0,.05) 1px,
      transparent 1px, transparent 7px);
}

/* Sabbia: stipple a puntini — Spiaggia */
.cell.floor-spiaggia {
  background-image:
    radial-gradient(rgba(0,0,0,.10) 1px, transparent 1.4px),
    radial-gradient(rgba(0,0,0,.08) 1px, transparent 1.4px);
  background-size:
    calc(var(--cs,72px) / 5) calc(var(--cs,72px) / 5),
    calc(var(--cs,72px) / 5) calc(var(--cs,72px) / 5);
  background-position: 0 0,
    calc(var(--cs,72px) / 10) calc(var(--cs,72px) / 10);
}
.cell .furn { pointer-events: none; }
.cell .furn.img { width: 86%; height: 86%; object-fit: contain; }
.cell .furn.img.overlay { width: 96%; height: 96%; }
.cell .furn.overlay { opacity: 1; }
.cell .xmark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  animation: xpop .18s ease-out;
}
.cell .xmark img {
  width: 40%; height: 40%; object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.cell .xmark.auto img { opacity: .5; }
@keyframes xpop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.cell .room-label {
  position: absolute; left: 3px; bottom: 2px;
  font-size: clamp(7px, calc(var(--cs, 72px) * .17), 11px);
  font-weight: 800; color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 1px 1px 0 #000;
  letter-spacing: .5px; pointer-events: none; text-transform: uppercase;
  z-index: 3;
}
.cell .pawn {
  position: absolute; inset: 8%;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cs, 72px) * .4);
  font-weight: 800; color: #fff;
  border: 3px solid #101420;
  z-index: 2;
  box-shadow: 0 2px 3px rgba(0,0,0,.35);
  overflow: hidden;
}
.cell .pawn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cell .pawn.hasface { inset: 6%; }
.cell .pawn.wrong { outline: 3px solid #d33; }
.cell.blocked { cursor: not-allowed; }

/* tools */
.tools { display: flex; flex-direction: column; gap: 10px; }
.tools button {
  font: inherit; font-weight: 700;
  padding: 12px 10px;
  border-radius: 10px;
  border: 2px solid #1c2030;
  background: var(--panel);
  box-shadow: var(--card-shadow);
  cursor: pointer;
}
.tools button:disabled { opacity: .45; cursor: not-allowed; }
.tools button.primary { background: var(--accent); color: #fff; }
.tools .small { font-size: 11px; font-weight: 400; color: #667; }

/* modal */
.modal-bg {
  position: fixed; inset: 0; background: rgba(16,20,32,.55);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  background: #fff; border: 3px solid #101420; border-radius: 14px;
  padding: 26px 30px; max-width: 380px; text-align: center;
  box-shadow: 0 6px 0 rgba(0,0,0,.3);
}
.modal h2 { margin-bottom: 8px; }
.modal p { margin-bottom: 16px; color: #334; }
.modal button {
  font: inherit; font-weight: 700; padding: 10px 22px;
  border-radius: 10px; border: 2px solid #101420;
  background: var(--accent); color: #fff; cursor: pointer; margin: 0 4px;
}
.modal button.alt { background: #fff; color: var(--ink); }

/* ==========================================================================
   Visual refresh v19
   ========================================================================== */
:root {
  --purple: #b66df3;
  --purple-d: #7d3fc0;
  --purple-l: #e3c4ff;
  --navy: #0d0a1f;
  --navy-2: #18102f;
  --panel: #fffdf8;
  --ink: #171523;
  --line: rgba(220, 186, 255, .22);
  --muted: #aaa0c6;
  --gold: #f4be55;
  --card-shadow: 0 8px 22px rgba(4, 2, 14, .22);
}

html { color-scheme: dark; }

body {
  background:
    radial-gradient(circle at 50% -18%, rgba(125, 63, 192, .35), transparent 38rem),
    radial-gradient(circle at 110% 45%, rgba(42, 106, 137, .16), transparent 34rem),
    linear-gradient(145deg, #100b25 0%, #090817 74%);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.01em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .14;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

button, select, .zone-card, .level-card, .suspect-card, .cell {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible, select:focus-visible, .zone-card:focus-visible,
.level-card:focus-visible, .suspect-card:focus-visible, .cell:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

header {
  min-height: 64px;
  padding: 10px clamp(14px, 3vw, 38px);
  background: rgba(9, 6, 23, .95);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(3, 2, 12, .16);
}

header .logo {
  font-size: 24px;
  letter-spacing: -.7px;
  text-shadow: 0 0 24px rgba(182, 109, 243, .28);
}

header .logo span { color: #fff; }
header .sub { color: #c9bedf; font-weight: 550; }

header .hback {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 26px;
  background: rgba(255,255,255,.07);
  border-color: rgba(227,196,255,.3);
  transition: background .18s ease, transform .18s ease;
}

header .hback:hover { background: rgba(182,109,243,.22); transform: translateX(-2px); }

header select {
  min-height: 40px;
  padding: 6px 34px 6px 12px;
  border-radius: 12px;
  background: #1b1236;
  border-color: rgba(227,196,255,.28);
}

#timer {
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: #e9dcfb;
}

.zones-wrap {
  max-width: 1160px;
  margin: clamp(34px, 6vh, 72px) auto;
  padding: 0 clamp(16px, 3vw, 28px);
}

.zones-wrap h1, .home h1 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.zones-wrap .subtitle, .home p.subtitle {
  margin-top: 9px;
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 18px);
}

.zone-grid { gap: 22px; }

.zone-card {
  min-height: 250px;
  border-radius: 24px;
  border: 1px solid rgba(227,196,255,.34);
  box-shadow: 0 18px 45px rgba(2, 1, 10, .34);
  isolation: isolate;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.zone-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(8,5,20,.88) 100%);
  pointer-events: none;
}

.zone-card:hover {
  transform: translateY(-6px);
  border-color: rgba(227,196,255,.72);
  box-shadow: 0 24px 56px rgba(95, 45, 143, .28);
}

.zone-card .zone-meta { padding: 24px 26px; z-index: 1; }
.zone-card .zone-name { font-size: clamp(25px, 2.4vw, 34px); letter-spacing: -.035em; }
.zone-card .zone-sub { margin-top: 5px; font-size: 14px; color: #eee7f7; }
.zone-card .zone-prog { margin-top: 13px; color: #d8c8eb; letter-spacing: .02em; }

.zone-card .zone-play {
  z-index: 2;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: rgba(182,109,243,.94);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 7px 20px rgba(71,28,112,.45), inset 0 1px rgba(255,255,255,.35);
}

.zone-card.soon {
  border-color: rgba(227,196,255,.18);
  background: rgba(255,255,255,.025);
}

.zone-card.soon::after { display: none; }

.home {
  max-width: 1180px;
  margin: clamp(30px, 5vh, 58px) auto;
  padding: 0 clamp(16px, 3vw, 28px) 40px;
}

.level-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

.level-card {
  min-height: 134px;
  padding: 17px 18px;
  border: 1px solid rgba(227,196,255,.18);
  border-left: 4px solid var(--purple);
  border-radius: 17px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.06), transparent 45%),
    #201641;
  box-shadow: 0 10px 24px rgba(3,2,13,.24);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.level-card:hover {
  transform: translateY(-4px);
  background-color: #291b52;
  border-color: rgba(227,196,255,.38);
  box-shadow: 0 16px 30px rgba(42,20,75,.34);
}

.level-card .num { color: #bfb2d8; font-size: 11px; letter-spacing: .08em; }
.level-card .nm { margin: 10px 0; font-size: 16px; line-height: 1.25; }
.level-card .lc-bot { color: #b9afcb; }

.level-card.tut {
  color: #251d15;
  border-color: #f2d385;
  border-left-color: #e4a92e;
  background: linear-gradient(145deg, #fff9df, #f5e8b9);
}

.level-card.tut .num, .level-card.tut .lc-bot { color: #665936; }
.level-card.tut .nm { color: #2b2318; }

.tutbar {
  max-width: 1440px;
  margin: 16px auto 0;
  padding: 14px 18px;
  border: 1px solid rgba(220, 184, 93, .7);
  border-radius: 16px;
  background: linear-gradient(135deg, #fffbed, #f9f0ce);
  box-shadow: 0 12px 30px rgba(3,2,13,.2);
}

.tutbar .tag {
  background: #8e49cc;
  letter-spacing: .08em;
}

.tutbar .tut-head button {
  min-height: 34px;
  border: 1px solid #cbbf9f;
  border-radius: 10px;
  color: #2a2418;
}

.game {
  width: min(100%, 1480px);
  margin: 0 auto;
  grid-template-columns: minmax(260px, 310px) minmax(0, 1fr) minmax(150px, 180px);
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(18px, 2.4vw, 30px);
}

.suspects {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  box-shadow: 0 16px 42px rgba(3,2,13,.18);
}

.suspects h2 { font-size: 17px; letter-spacing: -.02em; }
.suspects .hint-line { margin: 5px 4px 14px; color: #aaa0c6; line-height: 1.35; }

.suspect-card {
  margin-bottom: 8px;
  padding: 9px;
  border: 1px solid rgba(21,18,31,.18);
  border-radius: 13px;
  box-shadow: 0 6px 14px rgba(4,2,12,.16);
  transition: transform .15s ease, box-shadow .15s ease, outline-color .15s ease;
}

.suspect-card:hover { transform: translateX(3px); box-shadow: 0 9px 20px rgba(4,2,12,.2); }
.suspect-card.selected { outline: 3px solid var(--purple); outline-offset: 2px; }
.suspect-card .avatar { width: 46px; height: 46px; border-radius: 11px; }
.suspect-card .txt { min-width: 0; }
.suspect-card .txt .clue { line-height: 1.3; color: #474255; }

.genclues {
  border: 1px solid rgba(227,196,255,.22);
  border-left: 4px solid var(--purple);
  border-radius: 13px;
  background: #26194b;
}

.board-zone { min-width: 0; }

.board-wrap {
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 10%, rgba(182,109,243,.11), transparent 70%),
    rgba(255,255,255,.025);
  box-shadow: 0 20px 48px rgba(3,2,13,.26);
}

.board {
  --cs: clamp(30px, min(calc((100cqi - var(--bx)) / var(--n, 6)),
                        calc((100vh - 210px) / var(--n, 6))), 82px);
  overflow: hidden;
  border-radius: 11px;
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
}

.cell { transition: filter .12s ease, transform .12s ease; }
.cell:not(.blocked):hover { filter: brightness(1.08); z-index: 4; }
.cell .pawn { box-shadow: 0 3px 7px rgba(0,0,0,.42), 0 0 0 2px rgba(255,255,255,.34); }

.tools {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  box-shadow: 0 16px 42px rgba(3,2,13,.18);
}

.tools button {
  min-height: 48px;
  color: var(--ink);
  border: 1px solid rgba(28,32,48,.24);
  border-radius: 13px;
  box-shadow: 0 7px 16px rgba(3,2,13,.2);
  transition: transform .14s ease, box-shadow .14s ease;
}

.tools button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(3,2,13,.25); }
.tools button.primary { background: linear-gradient(135deg, #ad61e8, #7f42bd); }
.tools button.primary { color: #fff; }
.suspects #backBtn { color: var(--ink); }

.modal-bg { backdrop-filter: blur(8px); }
.modal { border: 1px solid #b9afc9; border-radius: 20px; box-shadow: 0 26px 80px rgba(0,0,0,.42); }

@media (max-width: 980px) {
  header {
    min-height: 54px;
    padding: 7px 10px;
  }

  header .logo { font-size: 21px; }
  header .hback { width: 38px; height: 38px; }
  header .sub { max-width: 34vw; }
  header select { min-height: 38px; padding-left: 10px; }
  #timer { display: none; }

  .zones-wrap, .home { margin-top: 30px; }
  .zones-wrap h1, .home h1 { font-size: clamp(29px, 8vw, 38px); }
  .zone-grid { grid-template-columns: 1fr; gap: 16px; }
  .zone-card { min-height: 200px; border-radius: 20px; }
  .zone-card .zone-meta { padding: 20px; }

  .level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .level-card { min-height: 120px; padding: 14px; border-radius: 15px; }
  .level-card .nm { font-size: 15px; }

  .tutbar {
    margin: 10px 9px 0;
    padding: 11px 13px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.38;
  }

  .game {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 8px 22px;
  }

  .board-zone { gap: 9px; }
  .board-wrap {
    padding: 5px;
    border-radius: 14px;
    scrollbar-color: var(--purple) rgba(255,255,255,.08);
    scrollbar-width: thin;
  }

  .board {
    --bx: 10px;              /* qui il bordo e' 3px per lato */
    --cs: clamp(24px, min(calc((100cqi - var(--bx)) / var(--n, 6)),
                          calc((100svh - 350px) / var(--n, 6))), 72px);
    border-width: 3px;
    border-radius: 8px;
  }

  .mbar {
    gap: 5px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(18,12,40,.92);
    box-shadow: 0 10px 30px rgba(3,2,13,.26);
  }

  .mbar button {
    min-height: 52px;
    max-width: none;
    color: var(--ink);
    padding: 6px 2px;
    border: 1px solid rgba(28,32,48,.2);
    border-radius: 11px;
    box-shadow: 0 5px 12px rgba(3,2,13,.18);
  }

  .mbar button span { font-size: 10px; }
  .mbar button.active {
    background: linear-gradient(145deg, #a45ee0, #763ab2);
    color: #fff;
    border-color: rgba(255,255,255,.3);
  }

  .mstrip {
    gap: 8px;
    padding: 7px 3px 9px;
    scroll-snap-type: x proximity;
  }

  .mav { width: 58px; scroll-snap-align: start; }
  .mav .ava { width: 50px; height: 50px; border: 2px solid #f7f2ff; border-radius: 13px; }
  .mav.sel .ava { outline-color: var(--gold); }
  .mav .nm { color: #e8e0f3; }

  .mclue {
    padding: 12px 14px;
    border: 1px solid rgba(28,32,48,.18);
    border-left: 5px solid var(--purple);
    border-radius: 13px;
    box-shadow: 0 8px 20px rgba(3,2,13,.2);
  }

  .msubmit {
    min-height: 54px;
    border: 1px solid rgba(255,255,255,.25);
    background: linear-gradient(135deg, #ad61e8, #7f42bd);
    box-shadow: 0 10px 24px rgba(74,34,111,.34);
  }
}

@media (max-width: 520px) {
  header .sub {
    max-width: 24vw;
    font-size: 11px;
  }

  header select { max-width: 106px; }

  .zones-wrap { padding-inline: 15px; }
  .zone-card { min-height: 188px; }
  .zone-card .zone-play { width: 44px; height: 44px; top: 14px; right: 14px; }

  .home { padding-inline: 12px; }
  .level-grid { gap: 9px; }
  .level-card { min-height: 112px; padding: 12px; }
  .level-card .nm { margin: 8px 0; font-size: 14px; }

  .tutbar .tut-head {
    gap: 8px;
    align-items: flex-start;
  }

  .tutbar .tut-head button {
    flex-shrink: 0;
    padding: 4px 8px;
    font-size: 11px;
  }

  .board-wrap { justify-content: flex-start; }
  .board {
    --cs: clamp(22px, calc((100cqi - var(--bx)) / var(--n, 6)), 60px);
    flex: 0 0 auto;
  }

  .cell .room-label { left: 2px; bottom: 1px; letter-spacing: .02em; }
  .cell .pawn { border-width: 2px; }
}

/* ==========================================================================
   Hypothesis placement + object visibility v21
   ========================================================================== */
.suspect-card,
.mav { position: relative; }

.candidate-count {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 5;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  border: 2px solid var(--cartoon-line);
  border-radius: 999px;
  background: var(--sun);
  color: var(--cartoon-line);
  box-shadow: 0 2px 0 var(--cartoon-line);
  font-size: 11px;
  font-weight: 950;
  line-height: 19px;
  text-align: center;
}

.suspect-card.has-candidates:not(.selected) {
  border-color: #8e6220;
  background: #fff9df;
}

.cell .furn {
  position: relative;
  z-index: 1;
}

.cell.has-pawn-on-object .furn {
  position: absolute;
  left: 2%;
  bottom: 2%;
  z-index: 3;
  width: 48%;
  height: 48%;
  padding: 2%;
  border: 2px solid var(--cartoon-line);
  border-radius: 8px;
  background: rgba(255,250,240,.88);
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(23,22,42,.8));
}

.cell.has-pawn-on-object .pawn {
  inset: 5% 5% 28% 28%;
  z-index: 4;
}

.pencils {
  position: absolute;
  inset: 3px;
  z-index: 5;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 2px;
  pointer-events: none;
}

.pencil {
  width: clamp(13px, calc(var(--cs, 72px) * .28), 24px);
  height: clamp(13px, calc(var(--cs, 72px) * .28), 24px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--cartoon-line);
  border-radius: 50%;
  background: var(--foam);
  color: var(--cartoon-line);
  box-shadow: 0 1px 0 rgba(23,22,42,.65);
  font-size: 9px;
  font-weight: 900;
  opacity: .84;
}

.pencil img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72);
}

.tools button.mode-active,
.mbar button.pencil-mode {
  color: var(--cartoon-line) !important;
  background: linear-gradient(145deg, #ffe89a, #ffc95c) !important;
  box-shadow: 0 4px 0 #8d6421 !important;
}

@media (max-width: 980px) {
  .mbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mbar button {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 520px) {
  .cell.has-pawn-on-object .furn {
    border-width: 1px;
    border-radius: 5px;
  }

  .pencils {
    inset: 2px;
    gap: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Cartoon UI v20
   ========================================================================== */
:root {
  --ocean: #102743;
  --ocean-deep: #09182d;
  --ocean-light: #1e5270;
  --foam: #fffaf0;
  --foam-2: #f4ecd9;
  --grape: #8e54d6;
  --grape-dark: #5b318e;
  --coral: #f06f65;
  --sun: #ffc95c;
  --mint: #56cfad;
  --cartoon-line: #17162a;
  --cartoon-shadow: 0 5px 0 #17162a;
  --cartoon-shadow-soft: 0 6px 0 rgba(8, 12, 28, .75);
}

body {
  background:
    radial-gradient(circle at 15% 5%, rgba(86, 207, 173, .14), transparent 28rem),
    radial-gradient(circle at 90% 15%, rgba(142, 84, 214, .24), transparent 34rem),
    linear-gradient(160deg, var(--ocean) 0%, var(--ocean-deep) 72%);
}

body::before {
  opacity: .2;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.13) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.5px);
  background-size: 28px 28px, 28px 28px;
  background-position: 0 0, 14px 14px;
}

header {
  background: rgba(9, 24, 45, .92);
  border-bottom: 3px solid rgba(255,255,255,.12);
  box-shadow: 0 4px 0 rgba(5,10,23,.7);
}

header .logo {
  color: #c884ff;
  font-weight: 900;
  letter-spacing: -1.2px;
  transform: rotate(-1deg);
  text-shadow: 2px 2px 0 var(--cartoon-line);
}

header .hback,
header select {
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 3px 0 rgba(3,7,17,.8);
}

header .hback:active,
button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(3,7,17,.8);
}

.zones-wrap h1,
.home h1 {
  color: #fff;
  font-weight: 900;
  text-shadow: 3px 3px 0 rgba(8,10,26,.7);
}

.zone-card {
  border: 3px solid #cf94ff;
  box-shadow: 0 7px 0 var(--cartoon-line), 0 18px 38px rgba(2,6,18,.35);
}

.zone-card:hover {
  transform: translateY(-5px) rotate(-.25deg);
  box-shadow: 0 11px 0 var(--cartoon-line), 0 22px 48px rgba(2,6,18,.42);
}

.zone-card .zone-name {
  font-weight: 950;
  text-shadow: 3px 3px 0 var(--cartoon-line);
}

.zone-card .zone-play {
  border: 3px solid var(--cartoon-line);
  background: var(--coral);
  box-shadow: 0 5px 0 var(--cartoon-line);
}

.zone-card .zone-play::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
}

.level-card {
  border: 2px solid var(--cartoon-line);
  border-left-width: 7px;
  border-radius: 16px 20px 17px 19px;
  background: linear-gradient(155deg, #34285c, #221a43);
  box-shadow: var(--cartoon-shadow-soft);
}

.level-card:nth-child(3n + 2) { transform: rotate(.25deg); }
.level-card:nth-child(3n) { transform: rotate(-.2deg); }
.level-card:hover { transform: translateY(-4px) rotate(0); }
.level-card .nm { font-weight: 850; }

.level-card.tut {
  border: 2px solid var(--cartoon-line);
  border-left: 7px solid var(--sun);
  background: linear-gradient(145deg, #fff7c9, #ffe99a);
  box-shadow: 0 6px 0 #6f5722;
}

.tutbar {
  border: 3px solid var(--cartoon-line);
  background: linear-gradient(145deg, #fff9d9, #f8e9a9);
  box-shadow: 0 5px 0 #725a25;
}

.tutbar .tag {
  border: 2px solid var(--cartoon-line);
  background: var(--grape);
  box-shadow: 0 2px 0 var(--cartoon-line);
}

.tutbar .tut-head button {
  border: 2px solid var(--cartoon-line);
  background: #fff;
  box-shadow: 0 3px 0 var(--cartoon-line);
}

.game {
  align-items: start;
}

.suspects,
.tools,
.board-wrap {
  border: 2px solid rgba(255,255,255,.16);
  background: rgba(8, 20, 40, .7);
  box-shadow: 0 6px 0 rgba(4,9,22,.85);
}

.suspects h2 {
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--cartoon-line);
}

.suspect-list {
  display: flex;
  flex-direction: column;
}

.suspect-card {
  border: 2px solid var(--cartoon-line);
  border-radius: 13px 16px 14px 15px;
  background: var(--foam);
  box-shadow: 0 4px 0 var(--cartoon-line);
}

.suspect-card:nth-child(even) { transform: rotate(.12deg); }
.suspect-card:hover { transform: translateX(4px) rotate(0); }
.suspect-card.selected {
  outline: 4px solid var(--sun);
  background: #fff6cf;
}

.suspect-card.placed {
  opacity: .64;
  filter: saturate(.55);
}

.suspect-card.victim {
  background: #ffe5e1;
  border-color: #681e27;
}

.suspect-card .avatar {
  border: 2px solid var(--cartoon-line);
  box-shadow: 0 2px 0 var(--cartoon-line);
}

.genclues {
  border: 2px solid var(--cartoon-line);
  border-left: 7px solid var(--mint);
  background: linear-gradient(145deg, #eafff7, #cbf4e7);
  color: #152b2a;
  box-shadow: 0 4px 0 var(--cartoon-line);
}

.genclues .gc-title {
  color: #174d43;
  font-weight: 950;
}

.genclues li {
  color: #183633;
  font-weight: 600;
}

.genclues li::before { color: #16856f; }

.mobile-genclues { display: none; }
.mobile-genclues summary {
  cursor: pointer;
  list-style: none;
  font-weight: 950;
  color: #174d43;
}

.mobile-genclues summary::-webkit-details-marker { display: none; }
.mobile-genclues summary::after {
  content: "−";
  float: right;
  width: 24px;
  height: 24px;
  border: 2px solid var(--cartoon-line);
  border-radius: 50%;
  background: #fff;
  text-align: center;
  line-height: 18px;
}

.mobile-genclues:not([open]) summary::after { content: "+"; }
.mobile-genclues[open] summary { margin-bottom: 8px; }

.board-wrap {
  border-radius: 21px 24px 20px 23px;
  background:
    radial-gradient(circle at 50% 10%, rgba(86,207,173,.12), transparent 60%),
    rgba(8,20,40,.78);
}

.board {
  border: 4px solid var(--cartoon-line);
  box-shadow: 7px 8px 0 var(--cartoon-line);
}

.cell .pawn {
  border: 3px solid var(--cartoon-line);
  box-shadow: 0 3px 0 var(--cartoon-line), inset 0 0 0 2px rgba(255,255,255,.35);
}

.tools button,
.suspects #backBtn {
  border: 2px solid var(--cartoon-line) !important;
  border-radius: 12px 15px 13px 14px !important;
  background: var(--foam) !important;
  box-shadow: 0 4px 0 var(--cartoon-line);
  font-weight: 850;
}

.tools button.primary {
  color: #fff;
  background: linear-gradient(145deg, #a86be5, #7d43bb) !important;
}

.tools button:disabled {
  color: #655f70;
  background: #cfc8d2 !important;
}

@media (min-width: 981px) {
  .game.large-grid {
    width: min(100%, 1580px);
    grid-template-columns: minmax(420px, 470px) minmax(0, 1fr) 160px;
    gap: 18px;
  }

  .game.large-grid .suspects {
    position: sticky;
    top: 80px;
    max-height: calc(100svh - 96px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--mint) rgba(255,255,255,.08);
  }

  .game.large-grid .suspect-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
  }

  .game.large-grid .suspect-card {
    min-width: 0;
    min-height: 72px;
    margin: 0;
    padding: 7px;
    gap: 7px;
    align-items: flex-start;
  }

  .game.large-grid .suspect-card .avatar {
    width: 38px;
    height: 38px;
  }

  .game.large-grid .suspect-card .txt .nm { font-size: 13px; }
  .game.large-grid .suspect-card .txt .clue {
    font-size: 11px;
    line-height: 1.25;
  }

  .game.large-grid .genclues {
    max-height: 190px;
    overflow-y: auto;
    margin-bottom: 12px;
  }

  .game.large-grid .board {
    --cs: clamp(24px, min(calc((100cqi - var(--bx)) / var(--n, 12)),
                          calc((100svh - 135px) / var(--n, 12))), 54px);
  }

  .game.large-grid .tools {
    position: sticky;
    top: 80px;
  }
}

@media (max-width: 980px) {
  .board-zone .mobile-genclues {
    order: 0;
    display: block;
    margin: 0;
    padding: 11px 13px;
    border-radius: 14px 17px 14px 16px;
  }

  .board-wrap { order: 1; }
  .mbar { order: 2; }
  .mstrip { order: 3; }
  .mclue { order: 4; }
  .msubmit { order: 5; }

  .mbar {
    border: 2px solid var(--cartoon-line);
    background: rgba(9,24,45,.96);
    box-shadow: 0 5px 0 var(--cartoon-line);
  }

  .mbar button {
    border: 2px solid var(--cartoon-line);
    border-radius: 11px 14px 12px 13px;
    background: var(--foam);
    box-shadow: 0 3px 0 var(--cartoon-line);
    font-weight: 850;
  }

  .mbar button.active {
    background: var(--grape);
    box-shadow: 0 3px 0 var(--grape-dark);
  }

  .mav .ava {
    border: 3px solid var(--cartoon-line);
    box-shadow: 0 3px 0 var(--cartoon-line);
  }

  .mav.sel .ava { outline: 4px solid var(--sun); }

  .mclue {
    border: 2px solid var(--cartoon-line);
    border-left: 7px solid var(--grape);
    border-radius: 13px 17px 14px 15px;
    background: var(--foam);
    box-shadow: 0 4px 0 var(--cartoon-line);
    font-weight: 650;
  }

  .msubmit {
    border: 3px solid var(--cartoon-line);
    background: linear-gradient(145deg, #a86be5, #7d43bb);
    box-shadow: 0 5px 0 var(--cartoon-line);
  }
}

@media (max-width: 520px) {
  .board-zone .mobile-genclues {
    font-size: 12.5px;
    line-height: 1.32;
  }

  .mobile-genclues ul {
    max-height: 128px;
    overflow-y: auto;
    padding-right: 4px;
  }

  .level-card {
    border-left-width: 6px;
    box-shadow: 0 4px 0 rgba(4,9,22,.85);
  }
}

/* ---------- profilo ---------- */
header .hprofile {
  font: inherit; font-size: 17px; line-height: 1;
  width: 34px; height: 34px; padding: 0; flex-shrink: 0;
  border-radius: 50%; border: 1px solid rgba(166,97,226,.5);
  background: rgba(166,97,226,.14); color: var(--purple-l);
  cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
header .hprofile img { width: 100%; height: 100%; object-fit: cover; }
header .hprofile .picon {
  width: 60%; height: 60%;
  color: #fff;                 /* l'icona e' bianca, non del colore del bottone */
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
header .hprofile .picon path { fill: none; }

.profile-wrap { max-width: 720px; margin: 26px auto 60px; padding: 0 16px; }
.profile-wrap h1 { font-size: 26px; color: #fff; margin: 0; }
.profile-wrap .subtitle { color: #b9aee0; margin: 2px 0 0; font-size: 14px; }

.phead { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.phead > div:nth-child(2) { min-width: 0; flex: 1; }
.pavatar {
  width: 58px; height: 58px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; background: rgba(166,97,226,.2);
  border: 2px solid rgba(166,97,226,.55);
}
.pavatar img { width: 100%; height: 100%; object-fit: cover; }

/* l'avatar e' un bottone: si tocca per cambiarlo, e la matita lo dice senza
   aggiungere un'altra riga di testo alla testata */
.pavatar { position: relative; padding: 0; cursor: pointer; }
.pav-edit {
  position: absolute; right: -2px; bottom: -2px;
  width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
  color: #0c1a16; background: var(--lime, #b7f55b);
  border: 2px solid var(--k, #071523);
}

.av-modal .av-grid {
  display: grid; gap: 8px; margin: 12px 0 4px;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  max-height: 44vh; overflow-y: auto;
}
/* `.modal button` (che arriva sia dal tema chiaro sia dalla veste cartoon)
   batte `.av-opt` per specificita' e riempiva i ritratti di lime, padding e
   ombra: qui il ritratto E' il bottone, e serve una regola piu' specifica di
   quella generica per riprendersi la casella. */
.modal button.av-opt {
  padding: 0; margin: 0; aspect-ratio: 1; overflow: hidden;
  border-radius: 50%; border: 2px solid rgba(16,35,31,.25);
  background: rgba(16,35,31,.06); box-shadow: none; cursor: pointer;
}
.modal button.av-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal button.av-opt.sel {
  border-color: #17a37f;
  box-shadow: 0 0 0 3px rgba(23,163,127,.35);
}

/* il popup del trofeo appena preso vive dentro il modale, che ha il fondo
   CHIARO: i colori del profilo (pensati per la scheda scura) sparirebbero */
.trophy-pop { grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
.trophy-pop .bg {
  background: rgba(16,35,31,.06);
  border-color: rgba(16,35,31,.22);
}
.trophy-pop .bg-nm { color: #10231f; }
.trophy-pop .bg-how { color: #4a6b66; }
.trophy-pop .bg-got { color: #17a37f; }
/* "Cambia nome" e' un BOTTONE, non un collegamento: la veste cartoon gli
   mette bordo e ombra come a tutti gli altri comandi, e un testo sottolineato
   dentro un riquadro sembra un errore. Sottolineatura via, spazio dentro il
   bordo, e non si allarga oltre la propria riga. */
.plink {
  font: inherit; font-size: 13px; font-weight: 800; line-height: 1.1;
  color: #10231f; background: var(--foam, #eafff8);
  padding: 7px 11px; border-radius: 11px;
  border: none; cursor: pointer;
  text-decoration: none; flex-shrink: 0; align-self: center;
  max-width: 40%; overflow-wrap: anywhere;
}

.pstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.pstat {
  background: rgba(34,26,68,.72); border: 1px solid rgba(166,97,226,.28);
  border-radius: 12px; padding: 14px 10px; text-align: center;
}
.pstat .pv { font-size: 24px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.pstat .pv small { font-size: 14px; font-weight: 600; color: #9d8fc9; }
.pstat .pl { font-size: 12px; color: #b9aee0; margin-top: 3px; }

.pcard {
  background: rgba(34,26,68,.72); border: 1px solid rgba(166,97,226,.28);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.pcard h2 { font-size: 15px; color: #e6dcff; margin: 0 0 12px; letter-spacing: .3px; }

.prow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.prow .pz { flex: 0 0 34%; color: #e9e3ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .pbar { flex: 1; height: 8px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.prow .pbar span { display: block; height: 100%; background: linear-gradient(90deg, #a661e2, #d2a6ff); }
.prow .pn, .prow .pt { flex-shrink: 0; color: #b9aee0; font-variant-numeric: tabular-nums; font-size: 13px; }
.prow .pt { min-width: 56px; text-align: right; }

.pbest { list-style: none; padding: 0; margin: 0; }
.pbest li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 14px; color: #e9e3ff;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pbest li:last-child { border-bottom: none; }
.pbest b { color: var(--purple-l); font-variant-numeric: tabular-nums; }

.pnote { color: #b9aee0; font-size: 13.5px; line-height: 1.5; margin: 0; }
.pbtns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pbtns button {
  font: inherit; font-size: 14px; padding: 10px 16px; cursor: pointer;
  border-radius: 10px; border: 1px solid rgba(166,97,226,.5);
  background: linear-gradient(145deg, #a86be5, #7d43bb); color: #fff; font-weight: 600;
}
.pbtns button.alt { background: rgba(166,97,226,.14); color: var(--purple-l); }

.wintime { font-size: 15px; color: #b9aee0; }
.winrec { font-size: 14px; color: #ffd479; font-weight: 600; }

@media (max-width: 520px) {
  .pstats { gap: 8px; }
  .pstat { padding: 12px 6px; }
  .pstat .pv { font-size: 20px; }
  .prow .pz { flex-basis: 30%; }
}

/* ---------- leggibilità mappa ----------
   I pavimenti a colori pieni + texture rubavano contrasto agli oggetti,
   soprattutto sulle griglie grandi (celle piccole). Due correzioni:
   1. un velo chiaro sopra il pavimento (piu' forte quando la griglia e'
      grande) che ne abbassa la saturazione senza toccare i colori del tema;
   2. alone chiaro + ombra su TUTTI gli arredi, non solo sugli overlay, cosi'
      la sagoma dell'oggetto si stacca da qualunque fondo.                   */
.cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--floor-wash, rgba(250,249,255,.20));
  pointer-events: none;
  z-index: 0;
}

/* griglie grandi: celle piccole, servono fondi ancora piu' spenti */
.game.large-grid .cell::after { --floor-wash: rgba(250,249,255,.40); }

/* il contorno degli arredi sta ora in un blocco unico in fondo al file
   ("contorno degli oggetti"), valido sia per le immagini sia per gli overlay */

/* Etichetta stanza: contorno NERO pieno.
   Il testo e' bianco, quindi l'alone deve essere scuro: con l'alone chiaro
   spariva sui pavimenti chiari (sala del trono, cucine, cappella). Il tratto
   con paint-order da' un bordo netto dove supportato; le ombre nelle otto
   direzioni fanno da riserva ovunque. */
.cell .room-label {
  z-index: 3;
  paint-order: stroke fill;
  /* il testo e' piccolo (7-11px): oltre i 2px il tratto chiude gli occhielli
     delle lettere */
  -webkit-text-stroke: 2px #000;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 0 4px rgba(0,0,0,.95);
}

/* la croce deve restare il segno piu' evidente della cella */
.cell .xmark { z-index: 2; }

/* ---------- pavimenti dei temi nuovi ----------
   Finché non ci sono le texture in assets/floors/, le stanze di spazio /
   fantasy / natale riusano i pattern procedurali già definiti, scelti per
   materiale. Basta aggiungere la chiave al gruppo giusto.                   */

/* legno: officina, stalla, salotto, ufficio, magazzino, cucine, mensa */
.cell.floor-officina, .cell.floor-stalla, .cell.floor-salotto,
.cell.floor-ufficio, .cell.floor-magazzino, .cell.floor-lettere,
.cell.floor-cucina_nat, .cell.floor-cucine, .cell.floor-mensa {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.13) 0, rgba(0,0,0,.13) 2px,
      transparent 2px, transparent calc(var(--cs,72px) / 3)),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.06) 0, rgba(0,0,0,.06) 1px,
      transparent 1px, transparent 6px);
}

/* metallo/pannelli: tutta la stazione orbitale */
.cell.floor-comando, .cell.floor-laboratorio, .cell.floor-hangar,
.cell.floor-criosonno, .cell.floor-motori, .cell.floor-antenne {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.11) 0, rgba(0,0,0,.11) 2px,
      transparent 2px, transparent calc(var(--cs,72px) / 3)),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.10) 0, rgba(255,255,255,.10) 1px,
      transparent 1px, transparent calc(var(--cs,72px) / 3));
}

/* pietra: castello */
.cell.floor-trono_sala, .cell.floor-biblioteca, .cell.floor-armeria,
.cell.floor-segrete, .cell.floor-torre, .cell.floor-cappella {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.10) 0, rgba(0,0,0,.10) 2px,
      transparent 2px, transparent calc(var(--cs,72px) / 2)),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.10) 0, rgba(0,0,0,.10) 2px,
      transparent 2px, transparent calc(var(--cs,72px) / 2));
}

/* terreno/neve: serra, cortile, giardino */
.cell.floor-serra, .cell.floor-cortile, .cell.floor-giardino {
  background-image:
    radial-gradient(rgba(0,0,0,.10) 1px, transparent 1.4px),
    radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size:
    calc(var(--cs,72px) / 5) calc(var(--cs,72px) / 5),
    calc(var(--cs,72px) / 5) calc(var(--cs,72px) / 5);
  background-position: 0 0,
    calc(var(--cs,72px) / 10) calc(var(--cs,72px) / 10);
}

/* fondo delle card-zona finché non ci sono le immagini in assets/zones/:
   il gradiente inline resta sopra, sotto ci va un colore a tema */
.zone-card[data-zone="spazio"]  { background-color: #1b2547; }
.zone-card[data-zone="fantasy"] { background-color: #2e2340; }
.zone-card[data-zone="natale"]  { background-color: #1f3b34; }

/* ---------- sfida quotidiana ---------- */
.daily-card {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px; padding: 14px 16px; cursor: pointer;
  border-radius: 14px;
  border: 1px solid rgba(166,97,226,.45);
  background: linear-gradient(135deg, rgba(166,97,226,.22), rgba(34,26,68,.85));
  box-shadow: 0 4px 0 rgba(4,9,22,.6);
}
.daily-card:hover { filter: brightness(1.07); }
.daily-card.done { border-color: rgba(120,200,150,.5); }
.dc-left { flex: 1; min-width: 0; }
.dc-day { font-size: 12px; color: #b9aee0; text-transform: capitalize; }
.dc-title { font-size: 19px; font-weight: 800; color: #fff; }
.dc-meta { font-size: 12.5px; color: #cdbff0; margin-top: 2px; }
.dc-right { flex-shrink: 0; text-align: right; }
.dc-play {
  display: inline-block; padding: 9px 15px; border-radius: 10px;
  background: linear-gradient(145deg, #a86be5, #7d43bb);
  color: #fff; font-weight: 700; font-size: 14px;
}
.dc-done { display: block; color: #8fdcae; font-weight: 700; font-size: 14px; }
.dc-time { font-size: 13px; color: #b9aee0; font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
  .daily-card { padding: 12px; gap: 10px; }
  .dc-title { font-size: 17px; }
}

/* ---------- casi bonus ---------- */
.bonus-sec { margin-top: 34px; }
.bonus-sec h2 {
  font-size: 17px; color: #e6dcff; margin: 0 0 4px;
  display: flex; align-items: center; gap: 10px;
}
.bonus-sec h2 .ok {
  font-size: 12px; font-weight: 700; color: #8fdcae;
  border: 1px solid rgba(143,220,174,.45); border-radius: 999px; padding: 2px 9px;
}
.bonus-sec .subtitle { margin: 0 0 14px; font-size: 13.5px; }
.level-card.bonus { border-left-color: #e0b64f; }
.level-card.bonus .num { color: #e0b64f; }
.level-card.locked {
  opacity: .55; cursor: help;
  filter: grayscale(.6);
}
.level-card.locked .nm { color: #b9aee0; font-style: italic; }

/* ---------- aiuti ---------- */
.hintleft { display: inline-block; margin-top: 10px; font-size: 13px; color: #b9aee0; }
/* Le premesse di un aiuto: i passaggi che reggono la conclusione. Staccate e
   piu' smorte della conclusione, che resta la riga da leggere per prima. */
.premesse { margin: 0 0 12px; padding: 0 0 0 18px; list-style: none; }
.premesse li { position: relative; margin-bottom: 6px; font-size: 14px; color: #b9aee0; }
.premesse li::before { content: "·"; position: absolute; left: -12px; }
.shop { margin-top: 14px; }
.shop #adBtn {
  font: inherit; font-size: 14px; font-weight: 700; width: 100%;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(166,97,226,.5); color: #fff;
  background: linear-gradient(145deg, #a86be5, #7d43bb);
}
.shop #adBtn:disabled { opacity: .45; cursor: not-allowed; }

/* pavimenti dei temi west / egitto / hotel (stessi gruppi per materiale) */
.cell.floor-saloon, .cell.floor-emporio, .cell.floor-sceriffo,
.cell.floor-stalle, .cell.floor-stazione,
.cell.floor-hall, .cell.floor-sala_ballo, .cell.floor-ristorante,
.cell.floor-suite, .cell.floor-biliardo_s {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.13) 0, rgba(0,0,0,.13) 2px,
      transparent 2px, transparent calc(var(--cs,72px) / 3)),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.06) 0, rgba(0,0,0,.06) 1px,
      transparent 1px, transparent 6px);
}

.cell.floor-banca, .cell.floor-miniera,
.cell.floor-camera_faraone, .cell.floor-offerte, .cell.floor-corridoio,
.cell.floor-tesoro, .cell.floor-cripta, .cell.floor-colonne,
.cell.floor-granaio, .cell.floor-cucine_h, .cell.floor-cantina {
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.10) 0, rgba(0,0,0,.10) 2px,
      transparent 2px, transparent calc(var(--cs,72px) / 2)),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.10) 0, rgba(0,0,0,.10) 2px,
      transparent 2px, transparent calc(var(--cs,72px) / 2));
}

.cell.floor-canyon, .cell.floor-cortile_t, .cell.floor-giardino_i {
  background-image:
    radial-gradient(rgba(0,0,0,.10) 1px, transparent 1.4px),
    radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size:
    calc(var(--cs,72px) / 5) calc(var(--cs,72px) / 5),
    calc(var(--cs,72px) / 5) calc(var(--cs,72px) / 5);
  background-position: 0 0,
    calc(var(--cs,72px) / 10) calc(var(--cs,72px) / 10);
}

.zone-card[data-zone="west"]   { background-color: #4a3524; }
.zone-card[data-zone="egitto"] { background-color: #4a3f1e; }
.zone-card[data-zone="hotel"]  { background-color: #33283c; }

/* ---------- nome dell'oggetto toccato ---------- */
#objname {
  position: fixed; left: 50%; bottom: 86px; transform: translate(-50%, 8px);
  z-index: 60; pointer-events: none;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(20, 16, 40, .93);
  border: 1px solid rgba(166, 97, 226, .55);
  color: #f2eefb; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  opacity: 0; transition: opacity .15s ease, transform .15s ease;
}
#objname.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 520px) { #objname { bottom: 120px; font-size: 13.5px; } }

/* celle piccole: tratto piu' sottile, le lettere sono di 7-8px */
@media (max-width: 520px) {
  .cell .room-label { -webkit-text-stroke-width: 1.5px; }
}

/* ---------- contorno degli oggetti ----------
   Sulle griglie grandi le celle diventano piccole e gli arredi, che ora sono
   disegni pieni di dettaglio, si impastano col pavimento. Serve una linea di
   contorno scura che ne stacchi la sagoma — come il bordo nero dei fumetti.

   Il contorno si ottiene incatenando quattro drop-shadow a distanza zero nelle
   quattro direzioni: ogni ombra si applica al risultato della precedente,
   quindi il bordo cresce attorno alla figura senza sfocarla. Dopo il bordo
   scuro c'e' un alone chiaro largo, che serve al caso opposto: oggetti scuri
   su pavimenti scuri (segrete, torre, sala macchine).                      */
.cell .furn {
  --ink: #14111f;
  /* Il contorno si misura sulla CELLA, non in pixel fissi: su una griglia
     16x16 la cella scende sotto i 25px e un bordo da 1,5px e' il 6% del
     disegno. Ma soprattutto le ombre sono SFOCATE e centrate, non spostate
     nelle quattro direzioni: quattro ombre dure incatenate si sommano in
     diagonale e sulle sagome sottili (le gambe di un pianoforte, il leggio)
     diventavano punte, non un bordo. Due ombre sfocate sovrapposte danno una
     linea piena e uniforme, che rimpicciolendosi si assottiglia invece di
     sfrangiarsi. */
  --o: clamp(.5px, calc(var(--cs, 60px) * .022), 1.5px);
  filter:
    drop-shadow(0 0 var(--o) var(--ink))
    drop-shadow(0 0 var(--o) var(--ink))
    drop-shadow(0 0 calc(var(--o) * 2.4) rgba(255,255,255,.45));
}

/* l'arredo che finisce sotto una pedina e' gia' dentro un riquadro suo */
.cell.has-pawn-on-object .furn { --o: .6px; }

/* ==========================================================================
   Notte tropicale + installable app v34
   ========================================================================== */
:root {
  --purple: #63efd0;
  --purple-d: #11877f;
  --purple-l: #a5ffea;
  --navy: #071523;
  --navy-2: #0b2a3a;
  --panel: #f4fff9;
  --ink: #10231f;
  --accent: #b7f55b;
  --mint: #63efd0;
  --lime: #b7f55b;
  --coral: #ff786d;
  --deep: #071523;
  --deep-2: #0b2637;
  --line-glow: rgba(99, 239, 208, .35);
  --card-shadow: 0 8px 24px rgba(0, 8, 18, .34);
}

html {
  background: var(--deep);
  color-scheme: dark;
  min-height: 100%;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 88% 4%, rgba(24, 128, 149, .35), transparent 30rem),
    radial-gradient(circle at 8% 26%, rgba(32, 119, 105, .22), transparent 28rem),
    linear-gradient(155deg, #0b3041 0%, #071523 58%, #050e19 100%);
  background-attachment: fixed;
  color: #eefcf9;
}

body::before {
  opacity: .22;
  background-image:
    radial-gradient(circle, rgba(99,239,208,.16) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(183,245,91,.07) 1px, transparent 1.5px);
  background-size: 28px 28px, 28px 28px;
  background-position: 0 0, 14px 14px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

header {
  min-height: calc(58px + var(--sat));
  padding: calc(8px + var(--sat)) clamp(11px, 3vw, 34px) 8px;
  /* Fondo QUASI opaco invece di `backdrop-filter: blur()`. L'header e' sticky:
     con la sfocatura il telefono deve rifare il blur di quello che ci scorre
     dietro a OGNI fotogramma, ed e' la causa classica dello scorrimento a
     scatti. A .96 di opacita' la differenza a occhio e' minima, il costo per
     fotogramma sparisce. Stesso motivo per .board-wrap piu' sotto. */
  background: rgba(5, 20, 34, .96);
  border-bottom: 1px solid rgba(99,239,208,.28);
  box-shadow: 0 8px 28px rgba(0,8,18,.32);
}

header .logo {
  color: var(--mint);
  text-shadow: 0 0 20px rgba(99,239,208,.35), 2px 2px 0 #04131d;
}

header .logo span { color: #f5fffb; }
header .sub { color: #b8d7d3; }

header .hback,
header .hprofile,
header .hinstall,
header select {
  color: #effffa;
  background: rgba(14, 60, 75, .72);
  border: 1px solid rgba(99,239,208,.48);
  box-shadow: 0 4px 12px rgba(0,8,18,.34);
}

header .hinstall {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 13px;
  font: 900 22px/1 system-ui;
  cursor: pointer;
  animation: installPulse 2.2s ease-in-out infinite;
}

header .hinstall[hidden] { display: none; }

@keyframes installPulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0,8,18,.34); }
  50% { box-shadow: 0 0 0 4px rgba(183,245,91,.14), 0 4px 18px rgba(99,239,208,.35); }
}

#timer {
  color: #d7fff5;
  background: rgba(99,239,208,.1);
}

.zones-wrap h1,
.home h1,
.profile-wrap h1 {
  color: #f4fffb;
  text-shadow: 0 0 22px rgba(99,239,208,.16), 2px 3px 0 rgba(0,8,18,.75);
}

.zones-wrap .subtitle,
.home p.subtitle,
.profile-wrap .subtitle { color: #9fc5c2; }

.daily-card {
  color: #f2fffb;
  background:
    radial-gradient(circle at 90% 20%, rgba(183,245,91,.14), transparent 28%),
    linear-gradient(135deg, rgba(17,101,105,.92), rgba(10,42,64,.96));
  border: 1px solid rgba(99,239,208,.6);
  box-shadow: 0 12px 32px rgba(0,8,18,.35), inset 0 1px rgba(255,255,255,.1);
}

.daily-card .dc-day { color: #9fffe8; }
.daily-card .dc-title { color: #fff; }
.daily-card .dc-play {
  color: #10231f;
  background: var(--lime);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 5px 16px rgba(183,245,91,.24);
}

.zone-card {
  border: 2px solid rgba(99,239,208,.62);
  box-shadow: 0 12px 34px rgba(0,8,18,.42), inset 0 0 0 1px rgba(255,255,255,.06);
}

.zone-card::after {
  background: linear-gradient(180deg, rgba(4,17,29,.04) 18%, rgba(4,17,29,.92) 100%);
}

.zone-card:hover {
  border-color: var(--lime);
  box-shadow: 0 18px 46px rgba(0,8,18,.5), 0 0 0 3px rgba(183,245,91,.1);
}

.zone-card .zone-play {
  color: #10231f;
  background: var(--lime);
  border-color: #071523;
  box-shadow: 0 4px 0 #071523, 0 0 20px rgba(183,245,91,.28);
}

.zone-card .zone-prog { color: #9fffe8; }

.zone-card.soon {
  background: rgba(7,28,43,.7);
  border-color: rgba(99,239,208,.22);
}

.level-card {
  color: #effffa;
  background:
    linear-gradient(145deg, rgba(17,74,89,.82), rgba(8,30,49,.95));
  border-color: rgba(99,239,208,.24);
  border-left-color: var(--mint);
  box-shadow: 0 8px 22px rgba(0,8,18,.36);
}

.level-card:hover {
  background-color: #10475a;
  border-color: rgba(99,239,208,.65);
  box-shadow: 0 12px 30px rgba(0,8,18,.46), 0 0 18px rgba(99,239,208,.08);
}

.level-card .num,
.level-card .lc-bot { color: #a8cdc9; }
.level-card.d1 { border-left-color: #58ddb3; }
.level-card.d2 { border-left-color: #ffd166; }
.level-card.d3 { border-left-color: #ff786d; }
.level-card.d1 .difftext { color: #72f0c2; }
.level-card.d2 .difftext { color: #ffd166; }
.level-card.d3 .difftext { color: #ff8c82; }

.level-card.tut {
  color: #122c29;
  background: linear-gradient(145deg, #eaffb8, #b7f55b);
  border-color: #071523;
  border-left-color: #63efd0;
  box-shadow: 0 6px 0 #071523;
}

.level-card.tut .nm,
.level-card.tut .num,
.level-card.tut .lc-bot { color: #122c29; }

.tutbar {
  color: #132c29;
  background: linear-gradient(145deg, #f5ffe5, #dcff9e);
  border-color: #071523;
  box-shadow: 0 5px 0 #071523;
}

.tutbar .tag {
  color: #10231f;
  background: var(--mint);
  border-color: #071523;
}

.suspects,
.tools,
.board-wrap {
  background: rgba(5, 23, 38, .93);
  border-color: rgba(99,239,208,.28);
  box-shadow: 0 12px 34px rgba(0,8,18,.35);
}

.suspects .hint-line { color: #9fc5c2; }

.suspect-card {
  color: #10231f;
  background: #f2fff9;
  border-color: #071523;
  box-shadow: 0 4px 0 #071523;
}

.suspect-card.selected {
  outline-color: var(--lime);
  background: #f2ffd7;
}

.suspect-card.has-candidates:not(.selected) {
  background: #e6fff7;
  border-color: #168f83;
}

.candidate-count {
  color: #10231f;
  background: var(--lime);
  border-color: #071523;
}

.genclues {
  color: #12322d;
  background: linear-gradient(145deg, #eafff8, #bff5e7);
  border-color: #071523;
  border-left-color: var(--mint);
  box-shadow: 0 4px 0 #071523;
}

.genclues .gc-title,
.mobile-genclues summary { color: #12675d; }
.genclues li { color: #183c37; }

.board {
  border-color: #071523;
  box-shadow: 0 0 0 2px var(--mint), 0 10px 0 #03101b, 0 18px 36px rgba(0,8,18,.5);
}

/* Ipotesi del sospettato selezionato: cornice dello stesso verde della sua
   carta, che pulsa piano. Il riquadro e' `inset`, non `outline`, perche' la
   griglia ha `overflow: hidden` e un contorno esterno verrebbe tagliato sui
   bordi. Anima solo il box-shadow: niente reflow a ogni fotogramma. */
.cell.cand-sel {
  z-index: 3;
  animation: candPulse 2.4s ease-in-out infinite;
}

@keyframes candPulse {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--lime), inset 0 0 12px rgba(183,245,91,.25); }
  50%      { box-shadow: inset 0 0 0 3px rgba(183,245,91,.45), inset 0 0 4px rgba(183,245,91,.12); }
}

/* chi ha chiesto meno animazioni si tiene la cornice ferma, non nessuna
   cornice: qui l'informazione sta nel riquadro, non nel lampeggio */
@media (prefers-reduced-motion: reduce) {
  .cell.cand-sel {
    animation: none;
    box-shadow: inset 0 0 0 3px var(--lime);
  }
}

.cell .pawn {
  border-color: #071523;
  box-shadow: 0 3px 0 #071523, 0 0 0 2px rgba(183,245,91,.8);
}

.pencil { border-color: #071523; background: #eafff8; }

.tools button,
.suspects #backBtn,
.mbar button {
  color: #10231f !important;
  background: #effff9 !important;
  border-color: #071523 !important;
  box-shadow: 0 4px 0 #071523 !important;
}

.tools button.primary,
.mbar button.active {
  color: #10231f !important;
  background: var(--lime) !important;
  box-shadow: 0 4px 0 #071523, 0 0 18px rgba(183,245,91,.2) !important;
}

.tools button.mode-active,
.mbar button.pencil-mode {
  color: #10231f !important;
  background: var(--mint) !important;
  box-shadow: 0 4px 0 #071523 !important;
}

.mclue {
  color: #10231f;
  background: #f2fff9;
  border-color: #071523;
  border-left-color: var(--mint);
  box-shadow: 0 4px 0 #071523;
}

.msubmit {
  color: #10231f;
  background: linear-gradient(145deg, #cfff75, #9ce542);
  border-color: #071523;
  box-shadow: 0 5px 0 #071523;
}

.profile-wrap .pcard,
.profile-wrap .pstat {
  background: rgba(8, 34, 50, .86);
  border-color: rgba(99,239,208,.28);
  box-shadow: 0 10px 28px rgba(0,8,18,.32);
}

/* il nome del detective sta sullo sfondo della pagina: il riquadro sotto
   faceva a pugni con le schede vere sotto di lui */
.profile-wrap .phead {
  background: none;
  border: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.profile-wrap .pv,
.profile-wrap h2 { color: #effff9; }
.profile-wrap .pl,
.profile-wrap .pnote { color: #a5cbc7; }
.profile-wrap .pbar { background: rgba(99,239,208,.12); }
.profile-wrap .pbar span { background: linear-gradient(90deg, var(--mint), var(--lime)); }

.modal-bg {
  background: rgba(2, 11, 20, .72);
  backdrop-filter: blur(12px);
}

.modal {
  color: #10231f;
  background: #f2fff9;
  border-color: #071523;
  box-shadow: 0 10px 0 #071523, 0 28px 80px rgba(0,0,0,.45);
}

.modal button {
  color: #10231f;
  background: var(--lime);
  border-color: #071523;
}

#objname {
  color: #eafff8;
  background: rgba(5,25,39,.94);
  border-color: rgba(99,239,208,.58);
}

* { scrollbar-color: rgba(99,239,208,.62) rgba(3,16,27,.5); }

@media (max-width: 980px) {
  body { padding-bottom: var(--sab); }

  .zones-wrap,
  .home,
  .profile-wrap {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .game {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: calc(96px + var(--sab));
  }

  .board-zone { gap: 11px; }

  .mbar {
    position: fixed;
    z-index: 45;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(7px + var(--sab));
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    padding: 7px;
    border: 1px solid rgba(99,239,208,.42);
    border-radius: 20px;
    background: rgba(5, 21, 35, .94);
    box-shadow: 0 12px 36px rgba(0,8,18,.6), inset 0 1px rgba(255,255,255,.06);
    /* niente blur: la barra sta ferma sopra la griglia che scorre */
  }

  .mbar button {
    min-height: 54px;
    padding: 5px 1px;
    border-width: 1px !important;
    border-radius: 13px;
    box-shadow: none !important;
  }

  .mbar button span {
    font-size: clamp(7px, 2.1vw, 9px);
    letter-spacing: -.02em;
  }

  .mbar button.active,
  .mbar button.pencil-mode {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(183,245,91,.2) !important;
  }

  .mstrip { padding-bottom: 7px; }
  .mav .ava { border-color: #071523; box-shadow: 0 3px 0 #071523; }
  .mav.sel .ava { outline-color: var(--lime); }

  .zone-card {
    min-height: 205px;
    border-radius: 24px;
  }

  .daily-card { border-radius: 20px; }
}

@media (max-width: 520px) {
  header {
    padding-left: max(9px, env(safe-area-inset-left));
    padding-right: max(9px, env(safe-area-inset-right));
  }

  header .sub { max-width: 24vw; }
  header .hinstall,
  header .hprofile { width: 36px; height: 36px; }

  .zones-wrap { margin-top: 24px; }
  .zones-wrap h1,
  .home h1 { letter-spacing: -.045em; }

  .level-grid { gap: 10px; }
  .level-card { border-radius: 17px; }

  .mbar { gap: 4px; padding: 6px; }
  .mbar button { min-height: 52px; font-size: 15px; }
}

@media (display-mode: standalone) {
  body { user-select: none; -webkit-user-select: none; }
  header { position: sticky; top: 0; }
  header .hinstall { display: none !important; }
}

/* ---------- lista casi a pagine (v37) ---------- */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin: 18px 0 4px;
}
.pager .pg-arrow {
  font: inherit; font-weight: 700; font-size: 14px;
  padding: 9px 14px; border-radius: 13px; cursor: pointer;
  color: #effffa; background: rgba(14, 60, 75, .72);
  border: 1px solid rgba(99,239,208,.48);
}
.pager .pg-arrow[disabled] { opacity: .38; cursor: default; }
.pg-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pg-dot {
  font: inherit; font-weight: 800; font-size: 13px;
  min-width: 36px; min-height: 36px; padding: 0 6px;
  border-radius: 11px; cursor: pointer;
  color: #d7fff5; background: rgba(99,239,208,.10);
  border: 1px solid rgba(99,239,208,.28);
}
.pg-dot.on {
  color: #071523; background: var(--lime); border-color: var(--lime);
}
/* la riga con "Pagina 2 di 5" va a capo da sola e resta sotto ai comandi */
.pg-info { flex-basis: 100%; text-align: center; font-size: 13px; color: #a5cbc7; }

@media (max-width: 520px) {
  .pager { gap: 6px; }
  .pager .pg-arrow { padding: 8px 11px; font-size: 13px; }
  .pg-dot { min-width: 34px; min-height: 34px; }
}

/* Il punteggio 1-100 e i pallini di difficolta' sono stati tolti: sulla stessa
   scheda dicevano la stessa cosa tre volte (numero, pallini, parola in basso),
   e il nome del caso — la cosa da leggere — ci finiva in mezzo. Resta la
   parola, con lo stesso vocabolario delle schede in cima. */
.level-card { position: relative; }

/* ---------- v39 ---------- */

/* Le ✕ sulle griglie grandi: la cella scende sotto i 30px e un segno al 40%
   con opacità .5 sparisce. Cresce in proporzione e resta più marcato. */
.cell .xmark img { width: 52%; height: 52%; }
.cell .xmark.auto img { opacity: .72; }
.board { --xw: 52%; }
@media (max-width: 980px) {
  .cell .xmark img { width: 58%; height: 58%; }
  .cell .xmark.auto img { opacity: .78; }
}

/* schede delle fasce di difficoltà */
.band-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 16px;
}
.band-tab {
  font: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 14px; border-radius: 14px;
  color: #d7fff5; background: rgba(14, 60, 75, .55);
  border: 1px solid rgba(99,239,208,.28);
}
.band-tab .bt-name { font-weight: 800; font-size: 14px; letter-spacing: .2px; }
.band-tab .bt-n { font-size: 11px; opacity: .75; }
.band-tab.on {
  color: #071523; background: var(--lime); border-color: var(--lime);
}
.band-tab.on .bt-n { opacity: .8; }
.band-tab.full:not(.on) { border-color: rgba(183,245,91,.6); }

/* barra di gioco: nome del caso e cronometro grande */
.playbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; margin-bottom: 8px;
  border-radius: 14px;
  background: rgba(8, 34, 50, .8);
  border: 1px solid rgba(99,239,208,.24);
}
.playbar .pb-name {
  font-weight: 800; font-size: 15px; color: #effff9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.playbar .pb-timer {
  font-variant-numeric: tabular-nums; font-weight: 900; font-size: 19px;
  color: var(--lime); flex-shrink: 0;
}

/* Zoom della mappa: si cambia `--cs`, la misura della cella, quindi la
   griglia si allarga per davvero e il riquadro sa da solo quanto c'e' da
   scorrere. Qui non serve nessuna regola: il perché sta nel commento di
   `abilitaZoom()` in app.js. Serve invece che la griglia possa scorrere in
   verticale, non solo in orizzontale, quando la si ingrandisce. */
.board-wrap { overflow: auto; }

/* E serve che la griglia NON venga schiacciata. Il riquadro è un contenitore
   flessibile: ingrandendo gli si fissa l'altezza (se no la mappa cresce in giù
   e si scorre la pagina invece della mappa), e senza queste due righe la
   griglia — che è un elemento flessibile — viene stirata a quell'altezza e le
   righe in fondo finiscono tagliate da `overflow: hidden`, irraggiungibili. */
.board { flex: 0 0 auto; align-self: flex-start; }

/* si torna a 1× con un tocco: dopo un pinch, riportarla a mano alla misura
   giusta e' impossibile */
.playbar .pb-zoom {
  font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
  flex-shrink: 0; padding: 4px 9px; border-radius: 10px;
  color: #0c1a16; background: var(--lime);
  border: 2px solid var(--k, #071523);
  font-variant-numeric: tabular-nums;
}
.playbar .pb-zoom[hidden] { display: none; }

/* archivio delle sfide passate */
.archive-link {
  display: block; width: 100%; margin: 10px 0 0;
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  padding: 10px; border-radius: 14px;
  color: #d7fff5; background: rgba(14, 60, 75, .55);
  border: 1px solid rgba(99,239,208,.28);
}
.archive { display: flex; flex-direction: column; gap: 8px; }
.ar-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 14px;
  background: rgba(8, 34, 50, .8);
  border: 1px solid rgba(99,239,208,.22);
}
.ar-row.done { border-color: rgba(183,245,91,.45); }
.ar-day { font-weight: 800; color: #effff9; text-transform: capitalize; }
.ar-meta { grid-column: 1; grid-row: 2; font-size: 12px; color: #a5cbc7; }
.ar-state { font-size: 12px; font-weight: 700; }
.ar-done { color: var(--lime); }
.ar-today { color: #ffd66e; }
.ar-open { color: #9fe8ff; }
.ar-missed { color: #8fa7b5; }
.ar-btn {
  font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  padding: 8px 12px; border-radius: 11px;
  color: #071523; background: var(--lime); border: 1px solid var(--lime);
}
.ar-row:not(.done) .ar-btn[data-lock="1"] {
  color: #d7fff5; background: rgba(99,239,208,.12);
  border-color: rgba(99,239,208,.35);
}

/* distintivi: cosmetici, quindi devono stare comodi ma non rubare la scena */
.pcard.badges .bg-count { font-weight: 600; font-size: 12px; opacity: .7; }
/* "Niente pubblicità": la scheda che si paga. Il bordo ottone la stacca dalle
   altre senza urlare — è l'unica cosa in vendita del gioco, e deve trovarsi
   ma non sembrare un banner. Attiva, diventa menta: è uno stato, non
   un'offerta. */
.pcard.premium { border-color: rgba(232,178,74,.55); }
.pcard.premium h2 { color: #ffd98a; }
.pcard.premium button { width: 100%; margin-top: 10px; }
.pcard.premium.on { border-color: rgba(99,239,208,.55); }
.pcard.premium.on h2 { color: var(--lime, #b7f55b); }

/* Trofei: una riga a testa, non un'icona muta. A sinistra il simbolo, a
   destra il nome, la condizione e — per quelli presi — la prova coi numeri
   veri. Chi non l'ha ancora preso vede quanto gli manca. */
.bg-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.bg {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 13px; text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(99,239,208,.14);
  opacity: .62; filter: grayscale(1);
}
.bg.on {
  opacity: 1; filter: none;
  background: rgba(99,239,208,.10);
  border-color: rgba(99,239,208,.42);
}
.bg-ico { font-size: 24px; line-height: 1.1; flex-shrink: 0; }
.bg-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bg-nm { font-size: 13px; font-weight: 800; color: #d7fff5; line-height: 1.2; }
.bg-how { font-size: 11.5px; color: #9fc5c2; line-height: 1.3; }
.bg-got { font-size: 11.5px; font-weight: 700; color: var(--lime, #b7f55b); line-height: 1.3; }
.bg-todo { font-size: 11px; font-weight: 700; color: #8fb0ad; font-variant-numeric: tabular-nums; }
.bg-bar {
  display: block; height: 4px; margin-top: 2px; border-radius: 3px;
  background: rgba(255,255,255,.10); overflow: hidden;
}
.bg-bar i { display: block; height: 100%; background: rgba(99,239,208,.55); }

@media (max-width: 520px) {
  .band-tab { padding: 8px 11px; }
  .band-tab .bt-name { font-size: 13px; }
  .playbar { padding: 7px 11px; }
  .playbar .pb-timer { font-size: 17px; }
  .bg-grid { grid-template-columns: minmax(0, 1fr); }
}

/* casi già chiusi: spenti nella lista, così l'occhio va su quelli da fare */
.level-card.done {
  opacity: .62;
  filter: saturate(.35);
}
.level-card.done .nm { color: #cfe3de; }
.level-card.done::after {
  content: "✓";
  position: absolute; bottom: 6px; right: 8px;
  font-size: 13px; font-weight: 900; color: var(--lime); opacity: .9;
}

/* La carta del tutorial e' l'unica CHIARA della lista: il grigio dei casi
   chiusi (pensato per le carte scure) e il ✓ verde lime ci finiscono sopra
   quasi invisibili, e dopo averlo fatto il tutorial diventava illeggibile.
   Qui il testo torna scuro e il segno di spunta prende un verde che si vede
   sul lime. */
.level-card.done.tut { opacity: .78; }
.level-card.done.tut .nm,
.level-card.done.tut .num,
.level-card.done.tut .lc-bot { color: #122c29; }
.level-card.done.tut::after,
.level-card.done.tut .nm::after { color: #14603f; opacity: 1; }
.playbar.replay { border-color: rgba(255,214,110,.45); }
.playbar .pb-name em {
  font-style: normal; font-weight: 600; font-size: 11px;
  color: #ffd66e; opacity: .9;
}

/* regole, interruttori audio, link in home */
/* lo stacco sotto e' generoso di proposito: sopra finisce il blocco della
   sfida del giorno, sotto comincia la scelta della zona, e sono due cose
   diverse — appiccicate sembravano un elenco solo */
.home-links { display: flex; gap: 8px; margin-top: 10px; margin-bottom: 34px; }
.home-links .archive-link { margin: 0; flex: 1; }
.rules { display: flex; flex-direction: column; gap: 12px; }
.rule {
  padding: 13px 15px; border-radius: 15px;
  background: rgba(8, 34, 50, .82);
  border: 1px solid rgba(99,239,208,.22);
}
.rule h3 { margin: 0 0 5px; font-size: 15px; color: var(--lime); }
.rule p { margin: 0; font-size: 14px; line-height: 1.5; color: #d7e9e5; }
.rule b { color: #effff9; }
.sw-row { display: flex; gap: 16px; flex-wrap: wrap; }
.sw { display: flex; align-items: center; gap: 7px; font-size: 14px; color: #d7fff5; cursor: pointer; }
.sw input { width: 18px; height: 18px; accent-color: var(--lime); cursor: pointer; }
.sw.off { opacity: .45; cursor: default; }

.privacy-link { margin: 14px 0 0; text-align: center; font-size: 13px; }
.privacy-link a { color: #9fc5c2; }

/* ---------- classifica della sfida del giorno (v65) ---------- */
.lb { list-style: none; padding: 0; margin: 0; display: flex;
      flex-direction: column; gap: 6px; }
.lb-row {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center;
  gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(36,28,73,.55); border: 1px solid rgba(166,97,226,.25);
}
.lb-row.me { border-color: rgba(99,239,208,.55); background: rgba(14,60,75,.5); }
.lb-pos { font-weight: 800; color: #b9aee0; text-align: right; }
.lb-row:nth-child(1) .lb-pos { color: #ffd166; }
.lb-row:nth-child(2) .lb-pos { color: #d8d8e8; }
.lb-row:nth-child(3) .lb-pos { color: #e0a978; }
/* il nome e' scelto dal giocatore: puo' essere lungo, e non deve spingere
   fuori il tempo, che e' il dato per cui si guarda la classifica */
.lb-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; }
.lb-name em { font-style: normal; font-weight: 400; color: #63efd0; }
.lb-ms { font-variant-numeric: tabular-nums; font-weight: 800; color: #d7fff5; }
.sw-note { color: #a99cd0; font-size: 12.5px; line-height: 1.45; margin: 8px 0 0; }

/* due classifiche, una accanto all'altra: quella del giorno e la generale */
.lb-tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.lb-tabs .band-tab { flex: 1; }
.lb-ms small { font-weight: 600; color: #a99cd0; margin-left: 6px; }

/* Quanto è tosto il caso, 1-100: percentile sul catalogo intero.
   Prima era un numerino in un angolo e non diceva niente — 42 rispetto a
   cosa? Ora è una barra: si legge di colpo quanto è piena, e il numero resta
   per chi lo vuole preciso. */
.level-card .tosto { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.level-card .tosto-bar {
  flex: 1; height: 6px; border-radius: 99px; overflow: hidden;
  background: rgba(255,255,255,.13);
}
.level-card .tosto-bar i { display: block; height: 100%; border-radius: 99px; background: var(--easy); }
.level-card.d2 .tosto-bar i { background: var(--med); }
.level-card.d3 .tosto-bar i { background: var(--hard); }
.level-card .tosto-n { font-size: 11px; font-weight: 800; color: #a99cd0;
                       font-variant-numeric: tabular-nums; min-width: 20px; text-align: right; }


/* Pulsante di beta: volutamente diverso da tutto il resto, perché non deve
   sembrare una funzione del gioco. Sparisce mettendo BETA_AIUTI a false. */
.beta {
  display: block; width: 100%; margin: 12px 0 0; padding: 11px;
  font: inherit; font-weight: 800; font-size: 13px; letter-spacing: .5px;
  cursor: pointer; border-radius: 12px;
  color: #1b1140; background: repeating-linear-gradient(45deg,
    #ffcc4d 0 12px, #ffd97a 12px 24px);
  border: 3px solid rgba(12, 6, 32, .55);
  box-shadow: 0 3px 0 rgba(20, 14, 40, .35);
}
.beta:disabled { opacity: .55; cursor: default; }

/* Icone disegnate della barra: prendono il colore dal bottone, quindi seguono
   lo stato attivo senza doverle ridisegnare. Tratto spesso e giunzioni tonde,
   lo stesso segno del resto. */
.mico {
  width: 20px; height: 20px; display: block; margin: 0 auto 2px;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   VESTE CARTOON (v71)
   ============================================================
   Secondo tentativo. Il primo (v68) e' fallito per un motivo preciso: avevo
   dato bordo grosso e ombra piena a metà dei componenti, e l'altra metà era
   rimasta morbida — il risultato leggeva come incoerenza, non come stile.
   Qui si copre TUTTO quello che ha una superficie, con tre valori soli e
   sempre gli stessi. Le convenzioni sono quelle del neobrutalismo, che è la
   famiglia giusta per un puzzle colorato: bordo scuro spesso, ombra
   SCOSTATA e senza sfocatura, niente gradienti sulle superfici.

   Due cose restano fuori di proposito:
   - le celle della griglia, che a 16×16 diventerebbero un reticolo illeggibile;
   - i ritratti, che sono illustrazioni e hanno gia' la loro cornice dipinta. */

:root {
  --k: #1a0f38;                 /* il "nero" di tutti i bordi: viola scurissimo,
                                   non nero puro, se no stona col fondo */
  --b: 3px;
  --sh: 4px 4px 0 var(--k);     /* scostata in diagonale, zero sfocatura */
  --sh-sm: 3px 3px 0 var(--k);
  --r: 16px;
}

/* --- superfici --- */
.zone-card, .level-card, .pcard, .rule, .modal, .lb-row, .daily-card,
.zones-how, .genclues, .clue-card, .suspect-card, .ar-row, .board-wrap {
  border: var(--b) solid var(--k);
  border-radius: var(--r);
  box-shadow: var(--sh);
}
/* il bordo colorato per fascia resta, ma diventa una fascia spessa a
   sinistra invece di un filetto: si vede a colpo d'occhio quanto e' tosto */
.level-card { border-left-width: 10px; }

/* --- comandi --- */
.archive-link, .band-tab, .mbar button, .msubmit, .beta, .ar-btn,
.pg-arrow, .pg-dot, .plink, .modal button {
  border: var(--b) solid var(--k);
  border-radius: 13px;
  box-shadow: var(--sh-sm);
  font-weight: 800;
  transition: transform .06s, box-shadow .06s;
}
/* premendo, l'elemento scende SULL'ombra: e' il movimento che rende fisico un
   bottone, e costa meno di un'animazione */
.archive-link:active, .band-tab:active, .msubmit:active:not(:disabled),
.beta:active, .ar-btn:active, .modal button:active,
.mbar button:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--k);
}
.mbar button.active, .band-tab.on {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--k);
  background: var(--purple);
  color: #fff;
}
.mbar button:disabled, .msubmit:disabled {
  transform: translate(3px, 3px); box-shadow: 0 0 0 var(--k); opacity: .45;
}

/* --- schede e carte in movimento --- */
.zone-card, .level-card { transition: transform .07s, box-shadow .07s; }
.zone-card:hover, .level-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--k); }
.zone-card:active, .level-card:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--k); }

/* --- titoli --- */
.zones-wrap h1, .home h1 {
  -webkit-text-stroke: 3px var(--k);
  paint-order: stroke fill;
  letter-spacing: -.5px;
  text-shadow: 3px 3px 0 var(--k);
}

/* --- la barra della difficoltà, in tinta con il resto --- */
.level-card .tosto-bar { border: 2px solid var(--k); height: 10px; background: rgba(255,255,255,.18); }
.level-card .tosto-bar i { border-radius: 0; }

/* La casella del sospettato selezionato, quando è già piazzato. Serve un
   segnale che si veda anche a 16×16, dove il ritratto è pochi pixel: anello
   spesso, alone e un battito lento. L'anello sta FUORI (outline) così non
   sposta la griglia di un pixel. */
.cell.qui-sta {
  outline: 4px solid #63efd0;
  outline-offset: -4px;
  box-shadow: 0 0 0 3px rgba(99, 239, 208, .35), 0 0 18px rgba(99, 239, 208, .55);
  z-index: 3;
  animation: battito 1.4s ease-in-out infinite;
}
@keyframes battito {
  0%, 100% { outline-color: #63efd0; }
  50%      { outline-color: #ffffff; }
}
/* chi preferisce lo schermo fermo non deve subirlo */
@media (prefers-reduced-motion: reduce) { .cell.qui-sta { animation: none; } }

/* Il nome dell'oggetto: era una targhetta smorta in fondo allo schermo e a
   metà partita non la si notava più. Più grande, in tinta col gioco, e con
   lo stesso bordo spesso del resto. */
#objname {
  bottom: 96px;
  padding: 12px 22px;
  font-size: 17px; font-weight: 800; letter-spacing: .2px;
  color: #1a0f38;
  background: #ffd166;
  border: 3px solid #1a0f38;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #1a0f38;
}
@media (max-width: 520px) { #objname { bottom: 128px; font-size: 15.5px; } }

/* Il bordo delle schede zona non si vedeva: è scuro come lo sfondo della
   foto che ci sta dietro. Serve un anello CHIARO fuori da quello scuro —
   così stacca sia sulle immagini chiare sia su quelle notturne. */
.zone-card {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 4px 4px 0 var(--k);
}
.zone-card:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.75), 6px 6px 0 var(--k); }
.zone-card:active { box-shadow: 0 0 0 3px rgba(255,255,255,.55), 2px 2px 0 var(--k); }

/* ---------- correzioni dal campo (v73) ---------- */

/* SCORRIMENTO A SCATTI. `background-attachment: fixed` obbliga il browser a
   ridisegnare tutto lo sfondo a ogni fotogramma di scorrimento: su desktop non
   si nota, su un telefono e' la causa classica degli scatti. Lo sfondo qui e'
   un gradiente su tutta la pagina, quindi "fisso" non aggiunge niente che si
   veda -- si toglie e si ancora al viewport, che ottiene lo stesso effetto
   senza ridisegnare. Le schede vengono promosse a livello proprio, cosi' i
   loro bordi e ombre non si ricalcolano mentre la lista scorre. */
body { background-attachment: scroll; }
@supports (background-attachment: local) {
  body { background-size: 100% 100vh; background-repeat: no-repeat; }
}
.level-grid, .zone-grid { contain: paint; }
.level-card, .zone-card { will-change: transform; }

/* TESTO SU MENTA. Il tema vero non è viola: un secondo `:root` più in basso
   rimappa `--purple` sul menta #63efd0. La mia regola cartoon metteva testo
   BIANCO su quel fondo, e "Principiante" spariva. Su un fondo chiaro il testo
   va scuro — e si prende il verde più cupo della stessa famiglia, non nero. */
.mbar button.active, .band-tab.on { color: #06231d; }
.band-tab.on .bt-n { color: #06231d; opacity: .8; }

/* ETICHETTE DELLA BARRA. Erano 10-11px: leggibili solo da fermi. La barra ha
   sette bottoni, quindi lo spazio è poco, ma 13px ci stanno se si stringe il
   riempimento invece del testo. */
.mbar button span { font-size: 13px !important; font-weight: 800; letter-spacing: 0; }
.mbar button { padding-inline: 2px; }
@media (max-width: 520px) {
  .mbar button span { font-size: 12px !important; }
  .mico { width: 17px; height: 17px; }
}

/* ---------- correzioni di layout (v76) ---------- */

/* IL PULSANTE "RISOLVI IL CASO" FINIVA SOTTO LA BARRA. Su mobile `.mbar` è
   `position: fixed` in fondo: il pulsante, che sta nel flusso normale, ci
   scivolava sotto e su certe griglie non lo si raggiungeva. Serve spazio in
   fondo alla pagina pari all'altezza della barra più la safe-area. */
@media (max-width: 900px) {
  /* `--mbar-h` la misura `spazioSottoLaBarra()` a ogni disegno: la barra ha
     sette bottoni e in orizzontale va a capo, da 96 a 129 pixel. Il 96 qui e'
     solo il ripiego per il primo fotogramma. */
  .game { padding-bottom: calc(var(--mbar-h, 96px) + 22px + var(--sab)); }
  .msubmit { margin-bottom: 6px; }
}

/* I BORDI DELLE ZONE SPARIVANO IN ORIZZONTALE. Colpa mia: `contain: paint`,
   messo in v73 per lo scorrimento, ritaglia tutto ciò che viene disegnato
   FUORI dal riquadro — compreso l'anello chiaro che sta 3px oltre il bordo
   delle schede. In verticale le schede hanno margine attorno e non si nota;
   in orizzontale arrivano a filo e l'anello viene tagliato via.
   `contain: layout` dà lo stesso beneficio senza ritagliare. */
.level-grid, .zone-grid { contain: layout; padding: 3px; }

/* Riscatto codici nel profilo. */
.codebox { display: flex; gap: 8px; margin-top: 4px; }
.codebox input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; font-weight: 700;
  padding: 10px 12px; border-radius: 12px;
  border: var(--b, 3px) solid var(--k, #1a0f38);
  background: rgba(255,255,255,.92); color: #10231f;
}
.codebox input::placeholder { color: #7d8b88; font-weight: 600; }
.codebox button {
  font: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
  padding: 10px 16px; border-radius: 12px;
  border: var(--b, 3px) solid var(--k, #1a0f38);
  background: var(--purple); color: #06231d;
  box-shadow: var(--sh-sm, 3px 3px 0 #1a0f38);
}
.codebox button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--k, #1a0f38); }
.sw-note.ok { color: #72f0c2; font-weight: 700; }
.sw-note.ko { color: #ff8c82; font-weight: 700; }

/* LE ETICHETTE DELLA BARRA VANNO A CAPO. Erano su una riga sola con i puntini
   di sospensione: "Ricomincia" e "Aiuto (5)" venivano tagliati a metà proprio
   sui telefoni stretti, e un bottone che dice "Ricomi…" non dice niente.
   Due righe ci stanno: si stringe l'interlinea invece del carattere, così il
   testo resta a 13px e leggibile. */
.mbar button span {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.12;
  display: block;
  /* `hyphens: auto` da solo non basta per "Ricomincia": e' una parola sola e
     senza un punto di rottura resta su una riga e viene tagliata. `anywhere`
     le da' il permesso di spezzarsi, e la sillabazione italiana (il documento
     e' `lang="it"`) fa in modo che si spezzi dove ha senso. */
  hyphens: auto;
  overflow-wrap: anywhere;
}
.mbar button {
  min-height: 60px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  line-height: 1.1;
}
@media (max-width: 380px) {
  /* schermi molto stretti: il numero degli aiuti va sotto la parola */
  .mbar button span { font-size: 11.5px !important; }
}

/* "Valuta l'app" e "Cancella i miei dati": stesso trattamento testuale
   dell'informativa a cui stanno accanto, non riquadri da bottone — la
   cancellazione è color di allarme perché non si annulla, valutare no. */
.privacy-link .rate,
.privacy-link .wipe {
  font: inherit; font-size: 12px; font-weight: 700;
  margin-left: 14px; padding: 0; cursor: pointer;
  background: none; border: none;
  text-decoration: underline;
}
.privacy-link .rate { color: #9fc5c2; }
.privacy-link .wipe { color: #ff8c82; }

/* ---------------- sblocco completo (iOS) ----------------
 * I casi a pagamento restano leggibili (sono la vetrina dell'acquisto) ma si
 * vede che sono chiusi: lucchetto in alto a destra e scheda smorzata. Su
 * Android e web queste classi non compaiono mai. */
.level-card.pay { opacity: .62; }
.level-card.pay .tosto { opacity: .7; }
.level-card .lc-lock { font-size: 14px; line-height: 1; }
.pay-banner {
  display: block; width: 100%; margin: 4px 0 14px; padding: 12px 14px;
  font: inherit; font-weight: 800; font-size: 15px; text-align: center;
  color: #10231f; background: var(--lime, #b7f55b);
  border: var(--b, 2px) solid var(--k, #10202a); border-radius: 14px;
  box-shadow: var(--sh, 0 3px 0 #10202a); cursor: pointer;
}
.pay-banner:active { transform: translateY(2px); box-shadow: none; }
.modal .pay-free { font-size: 13px; opacity: .8; }
.modal .pay-ko { font-size: 13px; font-weight: 700; color: #b3261e; }
/* tre pulsanti in un modale stretto: uno sotto l'altro, il principale in fondo */
.modal-bg.paywall .modal > div { display: flex; flex-direction: column-reverse; gap: 8px; }
.modal-bg.paywall .modal > div button { width: 100%; margin: 0; }

/* ============================================================
   UNA VESTE SOLA (v103)
   ============================================================
   La veste cartoon della v71 aveva una regola chiara: bordo scuro spesso,
   ombra scostata senza sfocatura, niente gradienti sulle superfici. Ma sotto
   era rimasto il tema "notte tropicale" di prima, e le due cose si vedevano
   insieme: fondo a sfumature, aloni attorno ai bottoni, schede del profilo
   morbide e traslucide, un viola avanzato dal tema ancora precedente, emoji
   al posto delle icone. Qui si chiude il lavoro, con poche regole:

   - UN inchiostro (`--k`), blu notte come il resto: bordi e ombre.
   - Fondo PIATTO e un tono piu' chiaro dell'inchiostro, se no le ombre
     scostate non si vedono.
   - Due superfici sole: `--surface` (scheda scura) e `--paper` (carta
     chiara, per quello che si legge da vicino o si preme).
   - Colore con un compito: lime = l'azione principale, menta = marchio e
     selezione, corallo = pericolo e vittima, oro = record e acquisto.
   - Niente sfumature, aloni, sfocature. Resta solo il velo scuro sotto il
     testo delle foto delle zone, che serve a leggerlo. */

:root {
  --k: #071523;
  --ground: #0e3243;
  --surface: #17495b;
  --well: #103846;
  --paper: #f2fff9;
  --text: #eefcf9;
  --muted: #a9cdc9;
  --sh: 4px 4px 0 var(--k);
  --sh-sm: 3px 3px 0 var(--k);
}

/* --- fondo e testata --- */
html { background: var(--ground); }
body { background: var(--ground); color: var(--text); }
body::before { content: none; }

header {
  background: var(--k);
  border-bottom: 0;
  box-shadow: none;
}
header .logo { text-shadow: 2px 2px 0 #02090f; }
header .hback,
header .hprofile,
header .hinstall,
header select {
  color: var(--text);
  background: var(--surface);
  border: 2px solid #2b6f80;
  box-shadow: none;
}
header .hinstall { animation: none; }
header .hinstall .ico { width: 20px; height: 20px; }
/* "Italiano" veniva tagliato a "Italiar": il limite di larghezza era piu'
   stretto della parola piu' la freccia */
header select { max-width: none; width: auto; padding-right: 6px; }

/* --- icone disegnate, al posto delle emoji ---
   Stesso tratto di quelle della barra di gioco (`.mico`), ma in riga col
   testo: prendono colore e misura da cio' che hanno accanto. */
.ico {
  display: inline-block; width: 1.05em; height: 1.05em;
  vertical-align: -.16em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico.pieno { fill: currentColor; stroke-width: 1.6; }

/* --- titoli --- */
.zones-wrap h1, .home h1, .profile-wrap h1 {
  color: var(--text);
  -webkit-text-stroke: 3px var(--k);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--k);
}
.zones-wrap .subtitle, .home p.subtitle, .profile-wrap .subtitle { color: var(--muted); }

/* --- home --- */
.daily-card {
  background: var(--surface);
  box-shadow: var(--sh);
}
.daily-card .dc-play {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--k);
  box-shadow: var(--sh-sm);
}
.archive-link { color: var(--text); background: var(--surface); }

/* La spiegazione delle zone era dentro un riquadro viola: e' una frase, non
   una scheda. Senza riquadro si legge come testo e la pagina ha una scatola
   in meno. */
.zones-wrap .zones-how {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 0; color: var(--muted);
}
.zones-wrap .zones-how b { color: var(--text); }

/* La foto della zona con la cornice chiara di una stampa: stacca su tutte le
   immagini, chiare o notturne, senza l'anello semitrasparente di prima. */
.zone-card,
.zone-card:hover,
.zone-card:active { border-color: var(--paper); }
.zone-card { box-shadow: var(--sh); }
.zone-card:hover { box-shadow: 6px 6px 0 var(--k); }
.zone-card:active { box-shadow: 2px 2px 0 var(--k); }
.zone-card .zone-sub { text-shadow: none; }
.zone-card .zone-prog { color: var(--mint); }
.zone-card .zone-play {
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--k);
  box-shadow: var(--sh-sm);
}
.zone-card .zone-play .ico { width: 18px; height: 18px; margin-left: 2px; }
.zone-card.soon { background: var(--well); border-color: var(--surface); }

/* --- lista dei casi --- */
.band-tab { color: var(--text); background: var(--surface); }
.band-tab.full:not(.on) { border-color: var(--k); }

/* La fascia colorata a sinistra e' tolta: dentro una scheda tutti i casi
   sono della stessa difficolta', quindi era la stessa striscia ripetuta
   trenta volte. Quanto e' tosto un caso lo dice gia' la sua barra. */
.level-card,
.level-card:hover {
  color: var(--text);
  background: var(--surface);
  border: var(--b) solid var(--k);
}
.level-card { box-shadow: var(--sh); }
.level-card:hover { box-shadow: 6px 6px 0 var(--k); }
.level-card:active { box-shadow: 2px 2px 0 var(--k); }
.level-card .num, .level-card .lc-bot, .level-card .tosto-n { color: var(--muted); }
.level-card .tosto-bar { background: var(--well); }
.level-card.tut {
  color: #122c29; background: var(--lime);
  border-color: var(--k); box-shadow: var(--sh);
}
.level-card.tut .num .ico { width: 20px; height: 20px; }
.level-card .lc-lock { color: var(--muted); }
.pager .pg-arrow, .pg-dot { color: var(--text); background: var(--surface); }
.pg-dot.on { color: var(--k); background: var(--lime); border-color: var(--k); }
.pay-banner { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* --- profilo ---
   Era la schermata rimasta piu' indietro: schede traslucide col bordo menta
   e l'ombra sfumata, due bottoni viola. Ora sono le stesse schede del resto. */
.profile-wrap .pcard,
.profile-wrap .pstat {
  background: var(--surface);
  border: var(--b) solid var(--k);
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.pcard h2 { color: var(--text); letter-spacing: 0; }
.pcard.premium, .pcard.premium.on { border-color: var(--k); }
.pcard.premium h2 { color: var(--gold, #ffd166); }
.pcard.premium.on h2 { color: var(--lime); }
.pcard.premium h2 .ico { margin-right: 4px; }
.pavatar {
  color: var(--muted); background: var(--surface);
  border: var(--b) solid var(--k);
}
.pavatar > .ico { width: 30px; height: 30px; }
.pav-edit .ico { width: 11px; height: 11px; stroke-width: 3; }
.plink { box-shadow: var(--sh-sm); }
.pstat .pv small, .pstat .pl, .pnote, .sw-note,
.prow .pn, .prow .pt { color: var(--muted); }
.prow .pz, .pbest li { color: var(--text); }
.pbest b { color: var(--mint); }
.profile-wrap .pbar, .prow .pbar { background: var(--well); }
.profile-wrap .pbar span { background: var(--mint); }
.pstat .pv .ico { color: var(--gold, #ffd166); }
.sw-note.ok { color: var(--mint); }
.sw-note.ko { color: #ff9c93; }

.pbtns button {
  font-weight: 800; color: #10231f; background: var(--lime);
  border: var(--b) solid var(--k); border-radius: 13px;
  box-shadow: var(--sh-sm);
  transition: transform .06s, box-shadow .06s;
}
.pbtns button.alt { color: #10231f; background: var(--paper); }
.pbtns button:active, .plink:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--k); }

/* trofei: righe dentro la scheda, un tono sotto, senza filetto luminoso */
.bg { background: var(--well); border: 0; }
.bg.on { background: var(--well); box-shadow: inset 0 0 0 2px var(--mint); }
.bg-ico { display: flex; color: var(--muted); }
.bg-ico .ico { width: 24px; height: 24px; }
.bg.on .bg-ico { color: var(--lime); }
.bg-nm { color: var(--text); }
.bg-how, .bg-todo { color: var(--muted); }
.bg-bar i { background: var(--mint); }
.trophy-pop .bg, .trophy-pop .bg.on { background: rgba(16,35,31,.07); box-shadow: none; }
.trophy-pop .bg-ico { color: #17a37f; }

/* --- classifica, archivio, regole --- */
.lb-row, .ar-row, .rule { background: var(--surface); }
.lb-row.me { background: var(--surface); box-shadow: inset 0 0 0 2px var(--mint), var(--sh); }
.lb-pos, .lb-ms small { color: var(--muted); }
.ar-row.done { border-color: var(--k); }
.ar-meta { color: var(--muted); }
.ar-meta .ico, .level-card .difftext .ico { margin-right: 2px; }
.ar-btn { display: inline-flex; align-items: center; gap: 5px; border-color: var(--k); }
.ar-row:not(.done) .ar-btn[data-lock="1"] {
  color: #10231f; background: var(--paper); border-color: var(--k);
}

/* --- partita --- */
.suspects, .tools {
  background: var(--surface);
  border: var(--b) solid var(--k);
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.board-wrap { background: var(--well); }
.suspects .hint-line { color: var(--muted); }
.suspects .suspect-card,
.suspect-card { box-shadow: var(--sh-sm); }
.board { box-shadow: 0 0 0 2px var(--mint); }

/* nome del caso e cronometro: una riga sopra la griglia, non un'altra scatola */
.playbar, .playbar.replay {
  background: none; border: 0; box-shadow: none;
  padding-left: 4px; padding-right: 4px;
}

.tools button,
.suspects #backBtn {
  box-shadow: var(--sh-sm) !important;
  text-transform: none;
}
.tools button.primary { box-shadow: var(--sh-sm) !important; }
.tools button:active:not(:disabled),
.suspects #backBtn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--k) !important; }

.genclues, .mclue, .tutbar {
  border: var(--b) solid var(--k);
  box-shadow: var(--sh-sm);
}
.genclues { background: #dffaf0; }
.tutbar { background: #eaffc4; }
.genclues .gc-title, .mobile-genclues summary {
  display: flex; align-items: center; gap: 6px;
}
.msubmit { background: var(--lime); box-shadow: var(--sh); }
.winrec { display: inline-flex; align-items: center; gap: 5px; color: #9a6a00; }

/* i segnali sulla griglia restano, ma pieni: un anello, non un alone */
.cell.qui-sta { box-shadow: 0 0 0 3px rgba(99, 239, 208, .5); }
@keyframes candPulse {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--lime); }
  50%      { box-shadow: inset 0 0 0 3px rgba(183,245,91,.45); }
}

#objname { color: var(--k); border-color: var(--k); box-shadow: var(--sh); }

/* --- finestre --- */
.modal-bg { background: rgba(4, 16, 26, .84); backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal { border-color: var(--k); box-shadow: 6px 6px 0 var(--k); }
.modal button .ico { margin-right: 4px; }

@media (max-width: 980px) {
  /* LA BARRA DI GIOCO. Aveva sei colonne e sette bottoni: "Ricomincia"
     restava solo su una seconda riga, spezzato in "Ricomin-cia". Ora le righe
     sono due di proposito: sopra i quattro modi di segnare, sotto le tre
     azioni. Su uno schermo largo stanno tutti e sette in fila. */
  .mbar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--surface);
    border: var(--b) solid var(--k);
    border-radius: 18px;
    box-shadow: var(--sh);
  }
  .mbar button {
    border-width: 2px !important;
    box-shadow: none !important;
    transform: none;
  }
  .mbar button.active,
  .mbar button.pencil-mode {
    transform: none;
    box-shadow: none !important;
  }
  .mbar button:disabled { transform: none; }
  .mbar button:active:not(:disabled) { transform: scale(.96); box-shadow: none !important; }
  .mav .ava { border-color: var(--k); box-shadow: var(--sh-sm); }
  .zone-card { border-radius: var(--r); }
  .daily-card { border-radius: var(--r); }
}
@media (max-width: 560px) {
  .mbar { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .mbar button { grid-column: span 3; min-height: 50px; }
  .mbar button:nth-child(n+5) { grid-column: span 4; }
  .mbar button span { hyphens: manual; overflow-wrap: normal; }
  .level-card { border-radius: var(--r); border-left-width: var(--b); }
}

/* ritocchi dopo aver guardato le schermate */
.level-card.d1, .level-card.d2, .level-card.d3,
.level-card.tut { border-left-color: var(--k); }
.band-tab.on { border-color: var(--k); }
.daily-card .dc-meta { color: var(--muted); }
.daily-card .dc-day { color: var(--mint); }
.mbar button.active { box-shadow: var(--sh-sm) !important; }
.zone-card { background-color: var(--well); }
.bonus-sec h2 { color: var(--text); }
.level-card.bonus { border-left-color: var(--k); }
.level-card.bonus .num { color: var(--gold, #ffd166); }
.level-card.locked .nm { color: var(--muted); font-style: normal; }
/* il bottone "guarda un annuncio" dentro il modale chiaro: era l'ultimo viola */
.modal .shop #adBtn {
  color: #10231f; background: var(--lime);
  border: var(--b) solid var(--k); border-radius: 13px;
  box-shadow: var(--sh-sm);
}
/* testo secondario dentro i modali chiari: il lilla su carta non si leggeva */
.modal .hintleft, .modal .premesse li, .modal .wintime { color: #4a6b66; }
.bonus-sec h2 .ok { color: var(--mint); border: 2px solid var(--mint); }
header #timer:empty { display: none; }
.zones-wrap .zones-how { max-width: 68ch; }

/* ---------- prova sul primo iPhone vero (v105, 12 nov 2026) ---------- */

/* LA SCHERMATA DI GIOCO NON STAVA NELLO SCHERMO. Su un iPhone 11 la pagina
   era 111 punti piu' alta: per vedere "Risolvi il caso" si trascinava la
   pagina col dito sulla mappa, e la pagina rimbalzava. Tre cause:
   - la cella si calcolava con `100svh - 350px`, e 350 non contava ne' la
     tacca ne' la barra home (e era basso di suo). Ora l'altezza che resta
     alla griglia la MISURA `adattaAltezza()` e arriva in `--hmax`; la formula
     qui sotto e' solo il primo fotogramma;
   - lo spazio per la barra home era contato due volte, su `body` e su `.game`;
   - "Risolvi il caso" occupava 70 punti anche da spento. Ora compare solo
     quando tutti i sospettati sono piazzati, cioe' quando serve, e prende il
     posto del riquadro dell'indizio (che a quel punto non ha niente da dire,
     finche' non si tocca un sospettato). */
@media (max-width: 980px) {
  .game .board,
  .game.large-grid .board {
    /* `--w` e' la cella che starebbe in larghezza. L'altezza la puo'
       stringere liberamente fino a 28 punti; sotto, non piu' del 12%: su un
       telefono basso (360x740) una griglia 11x11 scenderebbe da 29 a 23
       punti e gli arredi non si leggerebbero piu'. Li' la pagina scorre
       ancora di poco: meglio che celle minuscole.
       Il limite fisso a 28 serve ai casi con gli INDIZI GENERALI, che sopra
       la griglia mettono un riquadro di 80 punti: con il solo 12% una 9x9 su
       iPhone 11 restava a 36 punti e l'indizio del sospettato finiva sotto
       la barra. Cosi' scende a 29 e sta tutto nello schermo. */
    --w: calc((100cqi - var(--bx)) / var(--n, 6));
    --cs: clamp(22px,
      min(var(--w),
          max(calc(var(--hmax, calc(100svh - var(--sat) - var(--sab) - 450px)) / var(--n, 6)),
              min(calc(var(--w) * .88), 28px))),
      72px);
  }
  /* la griglia limitata in altezza e' piu' stretta del riquadro: al centro.
     Coi margini automatici, non con `justify-content`: quando la si
     ingrandisce e sporge, il margine va a zero e si scorre fin dall'inizio */
  .board { margin-inline: auto; }
  .game { padding-bottom: calc(var(--mbar-h, 122px) + 15px); }
  .msubmit:disabled { display: none; }
  .msubmit { order: 3; margin-bottom: 0; }
  .mclue.vuota { display: none; }
}

/* LA PAGINA RIMBALZAVA. Su iOS trascinare un dito sulla mappa tirava tutta la
   pagina, con l'elastico, anche quando non c'era niente da scorrere. In gioco
   non serve: si toglie l'elastico alla pagina e si tiene dentro il riquadro
   lo scorrimento della mappa ingrandita. `manipulation` toglie anche l'attesa
   del doppio tocco: una cella toccata risponde subito. */
html:has(.game) { overscroll-behavior: none; }
.board-wrap { overscroll-behavior: contain; }
.cell, .mbar button, .mav { touch-action: manipulation; }

/* durante il pinch la mappa si ingrandisce con una trasformazione (vedi
   `abilitaZoom`): l'origine in alto a sinistra rende il conto dello
   scorrimento lo stesso di quando poi si cambia davvero la misura */
.board.pizzico { transform-origin: 0 0; will-change: transform; }

/* LA MATITA SULL'IMMAGINE DEL PROFILO ERA TAGLIATA: il cerchio ritagliava
   tutto quello che sporgeva, matita compresa. Ora si ritaglia solo la foto. */
.pavatar { overflow: visible; }
.pavatar > img { border-radius: 50%; }
.pav-edit { right: -6px; bottom: -6px; width: 24px; height: 24px; }

/* attesa del negozio: un cerchio che gira, perche' fra il tocco su "Compra" e
   il foglio dell'App Store passano secondi in cui lo schermo era fermo */
.gira {
  display: block; width: 34px; height: 34px; margin: 4px auto 14px;
  border-radius: 50%;
  border: 4px solid rgba(7, 21, 35, .18);
  border-top-color: var(--k, #071523);
  animation: gira .8s linear infinite;
}
button .gira {
  display: inline-block; width: 16px; height: 16px; margin: 0 8px -3px 0;
  border-width: 3px;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* GLI OGGETTI SI CONFONDEVANO COL PAVIMENTO. Certi pavimenti sono pieni di
   disegni che sembrano arredi (le monete della Camera del Tesoro, le tavole
   della Sala delle Offerte, i cartigli del corridoio), e a 32 punti di cella
   non si capiva cosa fosse un oggetto e cosa no. Ogni oggetto che BLOCCA la
   casella ora sta su una tessera chiara col bordo scuro: si stacca da
   qualunque pavimento, e dice anche la regola — li' non si piazza nessuno.
   Troni e sedie, dove un sospettato puo' stare, restano senza. Scelta di
   Marco, 12 nov 2026 (confronto in store/design-v103/oggetti-prima-dopo.png).
   Bordo e raggio seguono la cella, cosi' reggono lo zoom e le griglie 16x16. */
.cell.blocked::before {
  content: "";
  position: absolute; inset: 7%;
  border-radius: 24%;
  background: rgba(246, 239, 226, .84);
  --tb: clamp(1px, calc(var(--cs, 60px) * .045), 2.5px);
  box-shadow: 0 0 0 var(--tb) rgba(7, 21, 35, .85),
              0 var(--tb) 0 var(--tb) rgba(7, 21, 35, .85);
  pointer-events: none;
  z-index: 0;
}
/* sulla tessera l'alone bianco attorno all'arredo non serve piu': un filtro
   in meno per oggetto, che su telefono si sente */
.cell.blocked .furn {
  filter:
    drop-shadow(0 0 var(--o) var(--ink))
    drop-shadow(0 0 var(--o) var(--ink));
}

/* v106: la barra della difficolta' senza etichetta si leggeva come un
   avanzamento. La parola davanti toglie il dubbio. */
.level-card .tosto-l { font-size: 11px; font-weight: 700; color: var(--muted); }

/* =====================================================================
   v106 — VETRO (13 nov 2026). Scelta di Marco fra tre proposte
   (store/look/proposte.html): schede di vetro che galleggiano su un fondo
   con luci, tasti a pillola, barra di navigazione in basso.
   Cosa NON cambia, di proposito: la mappa dentro i casi e i ritratti dei
   sospettati (`.mav .ava`, `.suspect-card`), che restano col bordo scuro.

   La sfocatura vera (`backdrop-filter`) sta SOLO su quello che è fisso e
   unico: testata, barra in basso, barra di gioco, finestre. Le schede delle
   liste sono 24 per pagina: sfocarle tutte fa scattare lo scorrimento sui
   telefoni vecchi, e sopra un fondo sfumato la differenza non si vede. Per
   loro il vetro è un gradiente traslucido con il filo di luce in alto.
   ===================================================================== */
:root {
  --g-bg: linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.06));
  --g-bg-hi: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.11));
  --g-line: rgba(255,255,255,.24);
  --g-line-lo: rgba(255,255,255,.09);
  --g-sh: 0 10px 24px rgba(0,8,14,.32), inset 0 1px 0 rgba(255,255,255,.28);
  --g-sh-sm: 0 6px 14px rgba(0,8,14,.28), inset 0 1px 0 rgba(255,255,255,.26);
  --g-lime: linear-gradient(160deg, #dcff8f, #9be33a);
  --g-lime-sh: 0 8px 18px rgba(0,8,14,.36), inset 0 1px 0 rgba(255,255,255,.8);
  --g-paper: rgba(244,255,249,.95);
  --g-blur: blur(16px) saturate(1.3);
  --r: 22px;
  --ground: #061722;
  --bnav-h: 62px;
}

/* --- fondo: luci ferme dietro, la pagina ci scorre sopra. Un elemento fisso
   si compone da solo; `background-attachment: fixed` invece ridisegnava
   tutto a ogni fotogramma (vedi "scorrimento a scatti", v73) --- */
html { background: var(--ground); }
body { background: none; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; opacity: 1;
  pointer-events: none;
  background:
    radial-gradient(60vmax 44vmax at 88% -4%, rgba(99,239,208,.30), transparent 70%),
    radial-gradient(52vmax 46vmax at -6% 46%, rgba(183,245,91,.13), transparent 70%),
    radial-gradient(58vmax 50vmax at 104% 96%, rgba(72,140,255,.22), transparent 70%),
    linear-gradient(170deg, #0d3a4c, #061722);
}

/* --- testata --- */
header {
  background: rgba(6,23,34,.55);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-bottom: 1px solid var(--g-line-lo);
}
header .logo { text-shadow: none; }
header .hback, header .hprofile, header .hinstall, header select {
  background: var(--g-bg); border: 1px solid var(--g-line);
  box-shadow: var(--g-sh-sm);
}
header .hback, header .hprofile, header .hinstall { border-radius: 50%; }
header select { border-radius: 99px; padding-left: 12px; }

/* --- titoli: senza contorno e senza ombra netta --- */
.zones-wrap h1, .home h1, .profile-wrap h1 {
  -webkit-text-stroke: 0; text-shadow: none; letter-spacing: -.02em;
}

/* --- superfici --- */
.level-card, .level-card:hover, .pcard, .rule, .lb-row, .daily-card, .ar-row,
.profile-wrap .pcard, .profile-wrap .pstat, .suspects, .tools, .board-wrap {
  background: var(--g-bg);
  border: 1px solid var(--g-line);
  border-right-color: var(--g-line-lo); border-bottom-color: var(--g-line-lo);
  border-radius: var(--r);
  box-shadow: var(--g-sh);
}
.level-card, .level-card:hover { border-left-width: 1px; border-left-color: var(--g-line); }
.level-card.d1, .level-card.d2, .level-card.d3, .level-card.bonus { border-left-color: var(--g-line); }
.board-wrap { background: rgba(4,18,27,.5); }
/* `contain: paint` ritagliava le ombre sfumate ai bordi della griglia (la
   stessa trappola dell'anello chiaro, vedi HANDOFF): si tiene il contenimento
   del layout, che è quello che serve allo scorrimento, senza il ritaglio */
.level-grid, .zone-grid { contain: layout style; }

.zone-card, .level-card { transition: transform .12s ease-out, box-shadow .12s ease-out; }
.level-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,8,14,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.level-card:active { transform: scale(.97); box-shadow: var(--g-sh-sm); }
.level-card.tut, .level-card.tut:hover {
  color: #0f2606; background: var(--g-lime);
  border-color: rgba(255,255,255,.6); box-shadow: var(--g-lime-sh);
}
.level-card .tosto-bar { border: 0; height: 6px; background: rgba(255,255,255,.16); }
.level-card .tosto-bar i { border-radius: 99px; }
.level-card.locked { background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); }

/* --- zone --- */
.zone-card, .zone-card:hover, .zone-card:active {
  border: 1px solid rgba(255,255,255,.32); border-radius: 26px;
}
.zone-card { box-shadow: 0 16px 32px rgba(0,8,14,.45); }
.zone-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px rgba(0,8,14,.5); }
.zone-card:active { transform: scale(.985); box-shadow: 0 10px 22px rgba(0,8,14,.45); }
.zone-card .zone-play {
  color: #0f2606; background: var(--g-lime);
  border: 1px solid rgba(255,255,255,.6); box-shadow: var(--g-lime-sh);
}
.zone-card.soon { background: var(--g-bg); border-color: var(--g-line); box-shadow: none; }

/* --- comandi --- */
.archive-link, .band-tab, .beta, .ar-btn, .pg-arrow, .pg-dot, .plink {
  color: var(--text); background: var(--g-bg);
  border: 1px solid var(--g-line); border-radius: 99px;
  box-shadow: var(--g-sh-sm);
  transition: transform .1s ease-out;
}
.band-tab { border-radius: 18px; }
.archive-link:active, .band-tab:active, .beta:active, .ar-btn:active,
.plink:active, .pg-arrow:active, .pg-dot:active {
  transform: scale(.95); box-shadow: var(--g-sh-sm);
}
.band-tab.on, .pg-dot.on, .daily-card .dc-play, .msubmit,
.pbtns button, .modal button, .modal .shop #adBtn,
.ar-row:not(.done) .ar-btn:not([data-lock="1"]) {
  color: #0f2606; background: var(--g-lime);
  border: 1px solid rgba(255,255,255,.6); border-radius: 99px;
  box-shadow: var(--g-lime-sh);
  transform: none;
}
.band-tab.on { border-radius: 18px; }
.band-tab.on .bt-n { color: #0f2606; }
.band-tab.full:not(.on) { border-color: rgba(183,245,91,.55); }
.daily-card .dc-play { padding: 11px 18px; }
.plink, .pbtns button.alt, .modal button.alt,
.ar-row:not(.done) .ar-btn[data-lock="1"] {
  color: #10231f; background: var(--g-paper);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 6px 14px rgba(0,8,14,.28);
}
.pbtns button:active, .modal button:active, .msubmit:active:not(:disabled) {
  transform: scale(.96); box-shadow: var(--g-sh-sm);
}

/* --- profilo, classifica, archivio --- */
.pavatar { background: var(--g-bg); border: 1px solid var(--g-line); box-shadow: var(--g-sh-sm); }
.bg, .bg.on { background: rgba(255,255,255,.07); border-radius: 16px; }
.bg.on { box-shadow: inset 0 0 0 1.5px var(--mint); }
.profile-wrap .pbar, .prow .pbar { background: rgba(255,255,255,.14); }
.lb-row.me { background: var(--g-bg-hi); box-shadow: inset 0 0 0 1.5px var(--mint), var(--g-sh); }
.ar-row.done { border-color: var(--g-line); }

/* --- partita: la mappa non si tocca, cambia quello che le sta intorno --- */
.genclues, .mclue, .tutbar {
  border: 1px solid rgba(255,255,255,.7); border-radius: 18px;
  box-shadow: 0 8px 18px rgba(0,8,14,.3);
}
.mclue { background: var(--g-paper); }
#objname {
  color: #10231f; background: var(--g-paper);
  border: 1px solid rgba(255,255,255,.7); border-radius: 99px;
  box-shadow: 0 10px 24px rgba(0,8,14,.4);
}
.tools button, .suspects #backBtn {
  border-radius: 99px !important;
  box-shadow: 0 6px 14px rgba(0,8,14,.28) !important;
}
.tools button:active:not(:disabled), .suspects #backBtn:active {
  transform: scale(.96); box-shadow: 0 6px 14px rgba(0,8,14,.28) !important;
}

@media (max-width: 980px) {
  .mbar {
    background: rgba(8,30,42,.62);
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-line); border-radius: 26px;
    box-shadow: 0 14px 30px rgba(0,8,14,.45), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .mbar button {
    color: var(--text) !important;
    background: var(--g-bg-hi) !important;
    border: 1px solid var(--g-line) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
  }
  .mbar button.active {
    color: #0f2606 !important; background: var(--g-lime) !important;
    border-color: rgba(255,255,255,.6) !important;
    box-shadow: var(--g-lime-sh) !important;
  }
  .mbar button.pencil-mode {
    color: #06231d !important; background: linear-gradient(160deg, #a5ffea, #4fdcbc) !important;
    border-color: rgba(255,255,255,.6) !important;
    box-shadow: var(--g-lime-sh) !important;
  }
  .mbar button:disabled { opacity: .4; }
  .zone-card { border-radius: 26px; }
  .daily-card { border-radius: var(--r); }
}
@media (max-width: 560px) { .level-card { border-radius: 20px; border-left-width: 1px; } }

/* --- finestre: carta chiara su fondo sfocato --- */
.modal-bg {
  background: rgba(4,16,26,.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.modal {
  background: var(--g-paper);
  border: 1px solid rgba(255,255,255,.8); border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0,8,14,.55);
}
.modal button { padding-inline: 20px; }

/* --- barra di navigazione in basso --- */
.bnav {
  position: fixed; z-index: 40;
  left: 50%; transform: translateX(-50%);
  bottom: calc(10px + var(--sab));
  width: min(calc(100% - 24px), 460px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px;
  padding: 5px;
  background: rgba(8,30,42,.62);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-line); border-radius: 99px;
  box-shadow: 0 14px 30px rgba(0,8,14,.5), inset 0 1px 0 rgba(255,255,255,.28);
}
.bnav button {
  display: grid; justify-items: center; gap: 2px;
  min-height: 50px; padding: 7px 2px 6px;
  font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--muted); background: none; border: 1px solid transparent;
  border-radius: 99px; cursor: pointer;
  touch-action: manipulation;
  transition: transform .1s ease-out, color .15s;
}
.bnav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bnav button .ico { width: 21px; height: 21px; stroke-width: 2.1; }
.bnav button:active { transform: scale(.94); }
.bnav button.on {
  color: #0f2606; background: var(--g-lime);
  border-color: rgba(255,255,255,.6); box-shadow: var(--g-lime-sh);
}
.bnav button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
/* la pagina finisce sopra la barra, non sotto */
body:has(.bnav) #app { padding-bottom: calc(var(--bnav-h) + 26px + var(--sab)); }

/* senza `backdrop-filter` (WebView vecchie) il vetro delle barre fisse
   sarebbe troppo trasparente per leggerci sopra: fondo quasi pieno */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header, .bnav, .mbar { background: rgba(8,30,42,.94); }
  .modal-bg { background: rgba(4,16,26,.86); }
}
@media (prefers-reduced-motion: reduce) {
  .zone-card, .level-card, .bnav button { transition: none; }
}

/* la riga del codice e le schede della classifica, rimaste col bordo spesso */
.codebox input {
  border: 1px solid rgba(255,255,255,.7); border-radius: 99px;
  box-shadow: inset 0 2px 5px rgba(0,8,14,.16); padding-left: 16px;
}
.codebox button {
  color: #0f2606; background: var(--g-lime);
  border: 1px solid rgba(255,255,255,.6); border-radius: 99px;
  box-shadow: var(--g-lime-sh); padding-inline: 18px;
}
.codebox button:active { transform: scale(.96); box-shadow: var(--g-sh-sm); }
.lb-tabs { margin-top: 14px; }

/* --- profilo (v106): prima i numeri del giocatore, in fondo le impostazioni.
   I trofei chiusi erano 14 righe uguali ("Ancora da conquistare"): ora sono
   tessere su due colonne col solo nome, e quelli presi occupano la riga
   intera perche' hanno la condizione e la prova da dire. --- */
.bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bg.on { grid-column: 1 / -1; }
.bg.lock { align-items: center; padding: 9px 10px; gap: 8px; }
.bg.lock .bg-ico .ico { width: 18px; height: 18px; }
.bg.lock .bg-nm { font-size: 13px; line-height: 1.25; }
.bg-hint { margin: -4px 0 12px; }
/* il nome della zona veniva troncato ("Il Castello di Val...") per far posto
   alla barra: nome e conto su una riga, barra sotto */
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; margin-bottom: 14px; }
.prow:last-child { margin-bottom: 2px; }
.prow .pz { white-space: normal; overflow: visible; font-weight: 700; }
.prow .pbar { grid-column: 1 / -1; height: 6px; border-radius: 99px; }
.prow .pbar span { border-radius: 99px; }
.pstats { margin-top: 4px; }

/* --- il sito con la sola sfida del giorno (v108) --- */
.bnav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.sito { max-width: 620px; margin-inline: auto; }
.sito .sito-n { margin: 14px 0 8px; font-weight: 800; color: var(--mint); letter-spacing: .02em; }
.sito .daily-card { padding-block: 20px; }
.sito .daily-card .dc-title { font-size: 22px; }
.sito-fatto { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 4px; }
.sito-fatto .sw-note { margin: 0; }
.sito-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 10px 20px;
  font: inherit; font-weight: 800; text-decoration: none; cursor: pointer;
  color: #0f2606; background: var(--g-lime);
  border: 1px solid rgba(255,255,255,.6); border-radius: 99px;
  box-shadow: var(--g-lime-sh);
  transition: transform .1s ease-out;
}
.sito-btn.alt {
  color: #10231f; background: var(--g-paper);
  border-color: rgba(255,255,255,.7); box-shadow: 0 6px 14px rgba(0,8,14,.28);
}
.sito-btn:active { transform: scale(.96); }
.sito-btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.sito-tut {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; margin: 16px 0 22px; padding: 10px 16px;
  font: inherit; font-weight: 800; cursor: pointer;
}
.sito-app h2 { margin-bottom: 6px; }
.sito-store { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.sito-store .sito-btn { flex: 1 1 140px; }

/* --- sito: rimandi alle guide e testo di riserva senza JavaScript (v109) --- */
.sito-piede { margin: 22px 0 8px; text-align: center; font-size: 14px; }
.sito-piede a { color: var(--mint); }
.sito-guida { display: inline-block; padding: 8px 4px; font-weight: 800; }
.sito-piede ul {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2px 14px; margin: 6px 0 0; padding: 0;
}
.sito-piede li a { display: inline-block; padding: 8px 2px; color: #a9d6cc; text-decoration: none; }
.sito-piede li a:hover { text-decoration: underline; }
#info { max-width: 620px; margin: 0 auto; padding: 24px 16px; line-height: 1.55; }
#info h1 { font-size: 28px; line-height: 1.15; }
#info a { color: var(--mint); }