/* ============================================================
   Font ospitati sul nostro server.
   Caricarli da Google trasmetterebbe l'indirizzo IP di ogni visitatore
   ai loro server senza consenso: in Europa e' un problema di privacy,
   oltre che una richiesta di rete in piu' su ogni pagina.

   font-display: optional al posto di swap. Con "swap" il testo si disegna
   prima col carattere di sistema e poi salta al nostro: su 4G lento quel
   salto era una delle due cause dello spostamento della pagina (0,21 in
   home, l'unico numero che non passava l'esame di Google). Con "optional"
   il browser usa il carattere solo se e' gia' pronto: la prima visita puo'
   vedere quello di sistema, dalla seconda in poi il nostro, e in nessun
   caso la pagina si muove sotto le dita mentre si legge.
   ============================================================ */
@font-face {
  font-family: "Anton"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("../fonts/anton-400.aca09278214a.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("../fonts/manrope-400.1cc4021015ae.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: optional;
  src: url("../fonts/manrope-700.451683972392.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: optional;
  src: url("../fonts/manrope-800.edba368f9b05.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("../fonts/space-mono-400.756b5974f561.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: optional;
  src: url("../fonts/space-mono-700.a18a1942266d.woff2") format("woff2");
}

/* ============================================================
   EscapeRoomMap — foglio di stile unico
   Palette: blu notte + rosso storico + ottone per i dati.
   Il tema chiaro sovrascrive solo le variabili (theme-light.css).
   ============================================================ */

:root {
  --ink:        #0D1120;
  --ink-2:      #151B2E;
  --ink-3:      #1F2740;
  --red:        #E23B3B;   /* il rosso del marchio: riempimenti, logo, titoli */
  --red-hi:     #FF5C5C;   /* per il testo su fondo scuro: il rosso pieno
                              sarebbe poco leggibile (contrasto 4.4), questo
                              arriva a 6.2 restando ben saturo */
  --red-fill:   #D12F2F;   /* per i FONDI pieni con scritta bianca sopra:
                              su --red il bianco si ferma a 4.27 e la soglia
                              e' 4.5, qui arriva a 5.05. Riguarda il bottone
                              di prenotazione, che e' su ogni pagina. */
  --brass:      #E8B44A;
  --brass-dim:  #A67C2E;
  --mint:       #3FD69A;
  --paper:      #F2EEE4;
  --muted:      #8E97AE;

  --header-bg:  rgba(13,17,32,.9);
  --slot-bg:    #10162A;
  --pin-ink:    #0D1120;
  --on-red:     #FFFFFF;
  --veil-bg:    rgba(13,17,32,.42);
  --veil-chip:  rgba(13,17,32,.92);
  --glow:       rgba(226,59,59,.18);
  --prose-ink:  #D8D3C7;
  --page-bg:    var(--ink);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow: 0 18px 40px -22px rgba(0,0,0,.85);
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--paper);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, p { overflow-wrap: anywhere; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.grid > *, .room-layout > *, .foot-grid > * { min-width: 0; }

/* ---------- tipografia ---------- */
.display {
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  font-weight: 400; letter-spacing: .01em; text-transform: uppercase;
  /* Anton e' un carattere alto e stretto: con interlinea sotto 1 le
     maiuscole accentate della riga di sotto (È, À, Ù) salgono a coprire
     la coda di quella sopra. 1.04 lascia lo spazio senza slegare le righe. */
  line-height: 1.04;
}
h1.display { font-size: clamp(2.1rem, 6vw, 3.9rem); margin: 0 0 .4rem; }
h2.display { font-size: clamp(1.4rem, 3.4vw, 2.1rem); margin: 0 0 1rem; }
.mono { font-family: "Space Mono", ui-monospace, Menlo, monospace; }
.eyebrow {
  font-family: "Space Mono", monospace; font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--red-hi); margin: 0 0 8px;
}
.lead { color: var(--muted); font-size: 1.05rem; max-width: 62ch; }

/* ---------- intestazione ---------- */
.site-header {
  position: sticky; top: 0; z-index: 500;
  background: var(--header-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-3);
}
.site-header .bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  height: 62px; max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
}
.logo { display: flex; align-items: center; gap: 9px; flex: none; }
.logo-text { font-family: "Anton", sans-serif; font-size: 1.24rem; text-transform: uppercase; }
.logo-text b { color: var(--red); font-weight: 400; }
.nav {
  display: flex; gap: 18px; margin-left: auto; min-width: 0;
  font-size: .9rem; font-weight: 600; overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--muted); white-space: nowrap; }
.nav a:hover { color: var(--red-hi); }
@media (max-width: 560px) { .nav .hide-sm { display: none; } }

/* lucchetto animato */
.lock-mark { width: 30px; height: 34px; overflow: visible; }
.lock-shackle {
  fill: none; stroke: var(--red); stroke-width: 3.4; stroke-linecap: round;
  transform-origin: 9px 14px;
  animation: unlatch 4.2s cubic-bezier(.6,.1,.2,1) .6s infinite;
}
.lock-body { fill: var(--red); }
.lock-hole { fill: var(--ink); }
@keyframes unlatch {
  0%, 46% { transform: rotate(0deg); }
  58%, 80% { transform: rotate(-28deg); }
  93%, 100% { transform: rotate(0deg); }
}

/* ---------- hero ---------- */
.hero { padding: 46px 0 8px; position: relative; overflow: hidden; max-width: 100%; }
.hero::before {
  content: ""; position: absolute; inset: -46% 26% auto -12%; height: 470px;
  background: radial-gradient(ellipse at center, var(--glow), transparent 62%);
  pointer-events: none;
}
.hero-inner { position: relative; }
.hero .lead { margin-top: .8rem; }
.counter {
  display: inline-flex; align-items: baseline; gap: 9px; margin-top: 20px;
  padding: 9px 17px; border: 1px solid var(--ink-3); border-radius: 999px;
  background: var(--ink-2);
}
.counter .n { font-family: "Anton", sans-serif; font-size: 1.3rem; color: var(--brass); }
.counter .l { font-size: .84rem; color: var(--muted); }

/* ---------- mappa ---------- */
.map-panel {
  margin-top: 26px; border: 1px solid var(--ink-3); border-radius: var(--r-lg);
  overflow: hidden; background: var(--ink-2); box-shadow: var(--shadow); position: relative;
}
.map-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--ink-3); }
.map-head .eyebrow { margin: 0; }
.map-head .hint { margin-left: auto; font-size: .8rem; color: var(--muted); }
/* L'altezza e' dichiarata qui e non cambia mai: e' lo spazio riservato alla
   mappa prima ancora che Leaflet parta. Quando le mattonelle non arrivano il
   riquadro NON sparisce piu' (map.js) — sparendo si portava via 330px e
   spingeva in su tutto il resto della pagina. */
.erm-map { height: 430px; width: 100%; background: var(--ink-3); }
@media (max-width: 660px) { .erm-map { height: 330px; } }
/* il fondo va ridichiarato: leaflet.css arriva dopo questo foglio e tinge
   il contenitore di grigio chiaro, che sul tema scuro e' una macchia */
.erm-map.map-ko {
  display: grid; place-content: center; padding: 24px;
  background: var(--ink-3);
}
.map-ripiego { margin: 0; text-align: center; color: var(--muted); font-size: .92rem; }

.pin {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg);
  background: var(--red-fill); border: 2px solid var(--pin-ink);
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.7); display: grid; place-items: center;
}
.pin span {
  transform: rotate(45deg); font-family: "Space Mono", monospace;
  font-size: .74rem; font-weight: 700; color: var(--on-red);
}
.leaflet-popup-content-wrapper { background: var(--ink-2); color: var(--paper); border: 1px solid var(--ink-3); border-radius: var(--r-md); }
.leaflet-popup-tip { background: var(--ink-2); }
.leaflet-popup-content { margin: 12px 14px; font-family: "Manrope", sans-serif; font-size: .88rem; }
.leaflet-popup-content b { color: var(--red-hi); }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }

.map-veil {
  position: absolute; inset: 0; z-index: 400; display: grid; place-items: center;
  border: 0; background: var(--veil-bg); transition: opacity .18s;
}
.map-veil span {
  background: var(--veil-chip); border: 1px solid var(--ink-3); color: var(--paper);
  border-radius: 999px; padding: 9px 16px; font-size: .85rem; font-weight: 700;
}
.map-veil.off { opacity: 0; pointer-events: none; }
.map-panel.map-live { outline: 1px solid var(--red); }
@media (hover: hover) { .map-veil { display: none; } }

/* ---------- filtri ---------- */
.filters { display: flex; gap: 9px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip {
  /* 38px di altezza: sotto il pollice si sbagliava filtro. Con 11px sopra e
     sotto il bersaglio arriva a 44 senza cambiare la forma della pillola. */
  flex: none; padding: 11px 15px; border-radius: 999px; border: 1px solid var(--ink-3);
  background: var(--ink-2); color: var(--muted); font-size: .87rem; font-weight: 600;
  white-space: nowrap; transition: border-color .18s, color .18s, background .18s;
}
.chip:hover { border-color: var(--red); color: var(--paper); }
.chip.on { background: var(--red-fill); border-color: var(--red-fill); color: var(--on-red); }

.viewswitch { display: inline-flex; padding: 3px; gap: 3px; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 999px; }
.viewswitch button { padding: 6px 15px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .85rem; font-weight: 700; }
.viewswitch button.on { background: var(--ink-3); color: var(--red-hi); }
.toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 16px; }
.toolbar .count { font-size: .87rem; color: var(--muted); margin-left: auto; }

/* ============================================================
   CARD STANZA — definita UNA volta sola.
   Struttura: foto con banda dati -> nome struttura + punteggi ->
   titolo -> categorie -> descrizione -> linea di chiusura.
   ============================================================ */
.grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s;
}
.card:hover { transform: translateY(-4px); border-color: var(--red); }

.card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ink-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.card:hover .card-media img { transform: scale(1.05); }
.card-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 64%;
  background: linear-gradient(to top, rgba(8,10,18,.88) 0%, rgba(8,10,18,.45) 48%, rgba(8,10,18,0) 100%);
  pointer-events: none;
}
.card-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 10px 16px 12px;
  font-family: "Space Mono", monospace; font-size: .76rem;
  color: #E9E6DE; text-shadow: 0 1px 4px rgba(0,0,0,.75);
}
.card-strip .price { margin-left: auto; color: #FFC969; font-weight: 700; }

.card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 0; gap: 10px; }

.card-house {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--ink-3);
}
.house-name { font-size: .82rem; font-weight: 700; color: var(--muted); }

.card-title { font-family: "Anton", sans-serif; font-size: 1.22rem; text-transform: uppercase; line-height: 1.05; margin: 0; }
.card-desc { font-size: .87rem; color: var(--muted); line-height: 1.5; margin: 0; }

/* unica linea della card: in fondo, dopo la descrizione */
.card-body::after {
  content: ""; display: block; margin-top: auto;
  border-top: 2px solid var(--ink-3);
  padding-bottom: 18px;
}

/* ---------- etichette categoria ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; background: var(--ink-3); color: var(--muted);
}
.tag-escape-room-horror { background: rgba(217,69,95,.17); color: #F2818F; }
.tag-detective          { background: rgba(96,165,250,.15); color: #93C0FB; }
.tag-mistero            { background: rgba(167,139,250,.16); color: #BFA9FC; }
.tag-avventura          { background: rgba(63,214,154,.14); color: #6FE0B4; }
.tag-bambini            { background: rgba(232,180,74,.16); color: var(--brass); }
.tag-storia             { background: rgba(212,164,120,.15); color: #DCBA95; }
.tag-nuove              { background: var(--red-fill); color: var(--on-red); }

/* ---------- punteggi Google / Tripadvisor ---------- */
.ratings { display: flex; flex-wrap: wrap; gap: 8px; }
.score {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r-sm);
  padding: 6px 11px; font-family: "Space Mono", monospace; font-size: .8rem; white-space: nowrap;
}
.score .src { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.score .val { font-weight: 700; color: var(--paper); }
.score .cnt { color: var(--muted); font-size: .74rem; }
.score .mark { width: 13px; height: 13px; flex: none; }
.score-google { border-color: rgba(232,180,74,.34); }
.score-google .val { color: var(--brass); }
.score-ta { border-color: rgba(0,170,108,.36); }
.score-ta .val { color: #2FC08B; }
.card .ratings { margin-left: auto; gap: 7px; }
.card .score { padding: 5px 10px; font-size: .78rem; }

.avail-flag { display: inline-flex; align-items: center; gap: 6px; font-family: "Space Mono", monospace; font-size: .74rem; color: var(--mint); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.dot.live { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .34; } }

/* ---------- vista raggruppata per struttura ---------- */
.venue-block {
  border: 1px solid var(--ink-3); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(31,39,64,.42), transparent 42%);
  padding: 22px; margin-bottom: 26px;
}
.venue-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.venue-head h3 { font-family: "Anton", sans-serif; font-size: 1.3rem; text-transform: uppercase; margin: 0; }
.venue-head .addr { font-size: .86rem; color: var(--muted); margin: 2px 0 0; }

/* ---------- scheda stanza ---------- */
.room-layout { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 18px; }
@media (min-width: 940px) { .room-layout { grid-template-columns: 1.9fr 1fr; } }
.crumbs { font-size: .84rem; color: var(--muted); margin-top: 18px; }
.crumbs a:hover { color: var(--red-hi); }
.room-hero { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ink-3); margin-top: 14px; }
.room-hero img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.specs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.spec {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--r-sm); padding: 9px 14px;
  /* i riquadri non devono restringersi sotto il loro contenuto: su schermo
     stretto il valore andava a capo carattere per carattere */
  flex: 0 0 auto;
}
.spec .k { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.spec .v { font-family: "Space Mono", monospace; font-weight: 700; font-size: .92rem; white-space: nowrap; }

.prose { margin-top: 22px; color: var(--prose-ink); }
.prose p { margin: 0 0 1rem; }

.booking { position: sticky; top: 82px; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.booking-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--ink-3);
  background: linear-gradient(180deg, rgba(226,59,59,.12), transparent);
}
.booking-head h2 { margin: 0; font-family: "Anton", sans-serif; font-size: 1.05rem; text-transform: uppercase; }
.badge-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: "Space Mono", monospace; font-size: .7rem; color: var(--mint);
  background: rgba(63,214,154,.1); border: 1px solid rgba(63,214,154,.3);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.stamp { margin-left: auto; font-family: "Space Mono", monospace; font-size: .72rem; color: var(--muted); }

.days { max-height: 322px; overflow-y: auto; padding: 14px 16px; }
.day + .day { margin-top: 15px; }
.day-label { font-family: "Space Mono", monospace; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.slots { display: flex; flex-wrap: wrap; gap: 7px; }
.slot {
  border: 1px solid var(--ink-3); background: var(--slot-bg); color: var(--paper);
  border-radius: var(--r-sm); padding: 7px 10px;
  font-family: "Space Mono", monospace; font-size: .84rem;
  transition: border-color .16s, background .16s, transform .16s;
}
.slot:hover { border-color: var(--red); background: rgba(226,59,59,.1); transform: translateY(-1px); }
.slot .p { color: var(--brass); font-size: .74rem; margin-left: 4px; }
.slot-form { display: inline; }
.empty-note { color: var(--muted); font-size: .9rem; padding: 16px; }

.booking-foot { padding: 14px 16px 16px; border-top: 1px solid var(--ink-3); }
.btn-book {
  display: block; width: 100%; text-align: center; background: var(--red-fill); color: var(--on-red);
  border: 0; border-radius: var(--r-md); padding: 14px 16px; font-weight: 800; font-size: .98rem;
  transition: filter .16s, transform .16s;
}
.btn-book:hover { filter: brightness(1.08); transform: translateY(-1px); }
.fineprint { font-size: .76rem; color: var(--muted); margin: 9px 0 0; line-height: 1.5; }
.callnote { text-align: center; font-size: .84rem; color: var(--muted); margin-top: 10px; }

/* ---------- sezioni ---------- */
.section { margin-top: 46px; }
.section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.section-head .more { margin-left: auto; font-size: .86rem; color: var(--red-hi); }

.cities { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr)); }
.city-card { border: 1px solid var(--ink-3); background: var(--ink-2); border-radius: var(--r-md); padding: 15px 16px; transition: border-color .2s, transform .2s; }
.city-card:hover { border-color: var(--red); transform: translateY(-2px); }
.city-card .n { font-family: "Anton", sans-serif; font-size: 1.14rem; text-transform: uppercase; margin: 0; }
.city-card .c { font-family: "Space Mono", monospace; font-size: .76rem; color: var(--muted); margin: 2px 0 0; }

/* ---------- piè di pagina ---------- */
.site-footer { margin-top: 70px; border-top: 1px solid var(--ink-3); padding: 34px 0 40px; color: var(--muted); font-size: .88rem; }
.foot-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(208px, 100%), 1fr)); }
.foot-grid a:hover { color: var(--red-hi); }
.foot-col { display: flex; flex-direction: column; gap: 7px; }
.foot-col .h { color: var(--paper); font-weight: 700; margin-bottom: 3px; }
.legal { margin-top: 26px; font-size: .76rem; opacity: .7; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }



/* ---------- barra categorie scorrevole ---------- */
.filters-wrap { position: relative; }

/* sfumature ai bordi: compaiono solo se c'e' altro da vedere */
.filters-wrap::before,
.filters-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 10px; width: 46px;
  pointer-events: none; opacity: 0; transition: opacity .18s; z-index: 2;
}
.filters-wrap::before {
  left: 0; background: linear-gradient(to right, var(--ink) 12%, transparent);
}
.filters-wrap::after {
  right: 0; background: linear-gradient(to left, var(--ink) 12%, transparent);
}
.filters-wrap.can-left::before,
.filters-wrap.can-right::after { opacity: 1; }

/* frecce: solo dove c'e' un puntatore */
.scroll-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 32px; height: 32px; display: none; place-items: center;
  border: 1px solid var(--ink-3); border-radius: 50%;
  background: var(--ink-2); color: var(--paper);
  font-size: 1.15rem; line-height: 1; padding: 0 0 2px;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .18s;
}
.scroll-arrow.left { left: -4px; }
.scroll-arrow.right { right: -4px; }
.scroll-arrow:hover { border-color: var(--red); color: var(--red); }
@media (hover: hover) {
  .scroll-arrow { display: grid; }
  .filters-wrap.can-left .scroll-arrow.left,
  .filters-wrap.can-right .scroll-arrow.right { opacity: 1; }
}

/* su touch: l'ultimo elemento resta tagliato a meta', invito naturale a scorrere */
.filters { padding-right: 30px; }



/* ---------- selettore giorno e fascia oraria ---------- */
.daybar { margin: 26px 0 6px; }
.rf-label {
  display: block; font-family: "Space Mono", monospace; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 9px;
}
.days-scroll {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;
  scrollbar-width: none;
}
.days-scroll::-webkit-scrollbar { display: none; }
.days-scroll .chip { flex: none; }
.days-scroll .chip.we { border-color: var(--brass-dim); }
.slotbar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.chip.on { background: var(--red-fill); border-color: var(--red-fill); color: #FFFFFF; }

/* ---------- barra ordinamento ---------- */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 4px; }
.sel {
  /* la spunta e il menu a tendina si toccano prendendo l'etichetta intera:
     era alta 34px, sotto il polpastrello, ed e' il comando principale
     della pagina citta' */
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: 999px; padding: 11px 14px;
}
.sel > span {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.sel .cbx { text-transform: none; font-size: .84rem; letter-spacing: 0; }
.sel input[type="checkbox"] { accent-color: var(--red); width: 16px; height: 16px; }
.sel select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; color: var(--paper);
  font-family: inherit; font-size: .88rem; font-weight: 700;
  padding: 2px 24px 2px 0; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 10px center, right 5px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
/* il colore da solo non basta a dire "sono qui": il contorno resta quando
   il fuoco arriva dalla tastiera, e sparisce quando arriva dal dito */
.sel select:focus { color: var(--red-hi); }
.sel select:focus:not(:focus-visible) { outline: none; }
.sel select option { background: var(--ink-2); color: var(--paper); }
.toolbar .count { margin-left: auto; font-size: .85rem; color: var(--muted); }

/* segnali sulla card */
.avail-flag, .feature-flag { margin: 0; font-size: .78rem; }
.feature-flag { color: var(--muted); }
.tag-promo {
  background: transparent; border: 1px solid var(--brass-dim); color: var(--brass);
}
#view-rooms.vuoto .grid::after {
  content: "Nessuna stanza libera con questi criteri. Prova un altro giorno.";
  grid-column: 1 / -1; color: var(--muted); padding: 26px 0;
}
@media (max-width: 760px) { .toolbar .count { margin-left: 0; width: 100%; } }
.tag-attori { background: rgba(217,69,95,.16); color: #F2818F; }
.tag-en     { background: rgba(96,165,250,.15); color: #93C0FB; }

/* ---------- modulo pubblico (aggiungi la tua escape room) ---------- */
.wrap.narrow { max-width: 720px; }
.form { margin-top: 28px; }
.form fieldset {
  border: 1px solid var(--ink-3); border-radius: var(--r-lg);
  padding: 20px 20px 8px; margin: 0 0 20px;
}
.form legend {
  font-family: "Space Mono", monospace; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red-hi);
  padding: 0 8px;
}
.campo { display: block; margin-bottom: 16px; }
.campo > span {
  display: block; font-size: .8rem; font-weight: 700;
  color: var(--muted); margin-bottom: 6px;
}
.campo input, .campo textarea, .campo select {
  width: 100%; box-sizing: border-box;
  background: var(--slot-bg); color: var(--paper);
  border: 1px solid var(--ink-3); border-radius: var(--r-sm);
  padding: 11px 13px; font-family: inherit; font-size: .95rem;
}
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--red); background: var(--ink-2);
}
.campo.ko input, .campo.ko textarea { border-color: var(--red); }
.campo em { display: block; color: var(--red-hi); font-size: .78rem; margin-top: 5px; font-style: normal; }
.campo-inline { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: .9rem; }
.campo-inline input { accent-color: var(--red); width: 17px; height: 17px; }
.errore { color: var(--red-hi); font-weight: 700; }
.esito { padding: 40px 0; }
.esito .btn-book { display: inline-block; width: auto; padding: 12px 26px; margin-top: 18px; }
.cta-aggiungi {
  margin: 46px 0 0; padding: 18px 20px; text-align: center;
  border: 1px dashed var(--ink-3); border-radius: var(--r-lg);
  color: var(--muted); font-size: .9rem;
}
.cta-aggiungi a { color: var(--red-hi); font-weight: 700; }

/* ---------- segnaposto per le stanze senza foto ----------
   Non simula una fotografia: e' un motivo grafico dichiarato,
   con una tinta stabile ricavata dal nome della stanza.        */
.card-media.senza-foto, .room-hero.senza-foto {
  background: var(--ph-a);
  background-image:
    radial-gradient(circle at 22% 26%, rgba(255,255,255,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 68%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    linear-gradient(135deg, var(--ph-a), var(--ph-b));
  background-size: 34px 34px, 46px 46px, 100% 100%;
}
.senza-foto .ph {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 22px; text-align: center;
}
.room-hero.senza-foto { position: relative; aspect-ratio: 16/9; }
.ph-lock { width: 34px; height: 40px; color: rgba(255,255,255,.62); }
.ph-grande .ph-lock { width: 52px; height: 60px; }
.ph-nome {
  font-family: "Anton", sans-serif; text-transform: uppercase;
  font-size: 1.05rem; line-height: 1.05; color: rgba(255,255,255,.9);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.ph-grande .ph-nome { font-size: 1.6rem; }
.ph-invito { font-size: .8rem; color: rgba(255,255,255,.72); }
.ph-invito a { color: #fff; text-decoration: underline; }

/* sei tinte stabili: la stanza ha sempre lo stesso colore */
.t0 { --ph-a:#3E2A4D; --ph-b:#1B1430; }
.t1 { --ph-a:#123A44; --ph-b:#0E2030; }
.t2 { --ph-a:#4A2320; --ph-b:#241322; }
.t3 { --ph-a:#1F3A2C; --ph-b:#13202B; }
.t4 { --ph-a:#3C3320; --ph-b:#241C2E; }
.t5 { --ph-a:#2C2A4E; --ph-b:#161A2E; }

/* la banda dati resta leggibile anche sul segnaposto */
.card-media.senza-foto::after { background: linear-gradient(to top, rgba(8,10,18,.72), transparent 58%); }

/* ---------- telefono su richiesta ---------- */
.mostra-tel {
  background: transparent; border: 1px solid var(--ink-3);
  border-radius: 999px; padding: 9px 18px;
  color: var(--paper); font-size: .88rem; font-weight: 700;
  transition: border-color .16s, color .16s;
}
.mostra-tel::before { content: "☏"; margin-right: 8px; color: var(--red-hi); }
.mostra-tel:hover { border-color: var(--red); color: var(--red-hi); }
.mostra-tel:disabled { opacity: .6; }
.tel-link {
  display: inline-block; font-family: "Space Mono", monospace;
  font-size: 1.02rem; font-weight: 700; color: var(--red-hi);
  border: 1px solid var(--red); border-radius: 999px; padding: 9px 18px;
}

/* ---------- immagine di apertura delle pagine editoriali ---------- */
.hero-figura {
  margin: 30px 0 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--ink-3); position: relative;
}
.hero-figura img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.hero-figura figcaption {
  padding: 8px 14px; font-size: .76rem; color: var(--muted);
  background: var(--ink-2);
}
.hero-figura.senza-foto { aspect-ratio: 21/9; }
.score-ta.vuoto .src { color: #2FC08B; text-transform: none; letter-spacing: 0; font-size: .78rem; }

/* ---------- province in home ---------- */
.cities { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.prov-card {
  border: 1px solid var(--ink-3); background: var(--ink-2);
  border-radius: var(--r-md); padding: 15px 17px 14px;
  transition: border-color .2s;
}
.prov-card:hover { border-color: var(--red); }
/* Il titolo apre il capoluogo ed era una riga alta 21px, difficile da
   centrare col pollice. Portarlo a 44px pero' lasciava 11px di aria sotto
   il testo, che si sommavano ai 5px del conteggio: "34 strutture · 118
   stanze" finiva a 14px dal titolo e a 9 dall'elenco, cioe' piu' vicino ai
   comuni che alla provincia a cui si riferisce. Il raggruppamento nasce
   dalla differenza fra le distanze, non dalla loro dimensione, e cosi' si
   scioglieva. I margini negativi tolgono l'aria dal flusso e lasciano il
   bersaglio: 44px da toccare, la spaziatura di prima da guardare. */
.prov-testa {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; margin-top: -11px; margin-bottom: -11px;
}
.prov-nome {
  font-family: "Anton", sans-serif; font-size: 1.12rem;
  text-transform: uppercase; line-height: 1.05;
}
.prov-sigla { font-size: .72rem; color: var(--red-hi); }
.prov-conta { font-size: .72rem; color: var(--muted); margin: 3px 0 9px; }
/* "Parabiago Lainate Bussero Pieve Emanuele" stavano su una riga alta 22px:
   col pollice si apriva spesso la citta' sbagliata, ed e' la navigazione
   principale della home. Ogni nome diventa un bersaglio piu' alto; lo spazio
   fra le righe ora e' il padding del collegamento, non piu' il gap.
   36 e non 44: qui i nomi sono tanti e vanno a capo, e a 44 la scheda Milano
   passava da 154 a 193px facendo perdere una provincia per schermata. 36
   resta molto sopra il minimo delle linee guida di accessibilita' (24px);
   i 44px restano dove non costano spazio, cioe' menu, chip e titoli. */
.prov-citta { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: .84rem; }
.prov-citta a { color: var(--muted); display: inline-flex; align-items: center; min-height: 36px; }
.prov-citta a:hover { color: var(--red-hi); }
.prov-citta .citta-primaria { color: var(--paper); font-weight: 700; }

/* ---------- strutture di cui non conosciamo ancora le stanze ---------- */
.venue-mini {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--ink-3); background: var(--ink-2);
  border-radius: var(--r-md); padding: 14px 16px;
  transition: border-color .2s, transform .2s;
}
.venue-mini:hover { border-color: var(--red); transform: translateY(-2px); }
.vm-nome { font-family: "Anton", sans-serif; font-size: 1.02rem; text-transform: uppercase; line-height: 1.1; }
.vm-addr { font-size: .8rem; color: var(--muted); }
.vm-voto { font-size: .76rem; color: var(--brass); }

/* ---------- esperienze all'aperto: distinte a colpo d'occhio ---------- */
.card-media { position: relative; }
.room-hero { position: relative; }
.badge-outdoor {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px; border-radius: 999px;
  background: rgba(8,10,18,.82); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.22);
  color: #7FE3B4; font-size: .72rem; font-weight: 700;
  letter-spacing: .02em; text-shadow: none;
}
.badge-outdoor svg { width: 14px; height: 14px; flex: none; }
.badge-outdoor.grande {
  top: 14px; left: 14px; font-size: .84rem; padding: 7px 14px 7px 11px;
}
.badge-outdoor.grande svg { width: 17px; height: 17px; }
.tag-outdoor { background: rgba(63,214,154,.14); color: #6FE0B4; }

/* ---------- azioni sulla scheda struttura ---------- */
.venue-azioni {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 18px 0 6px;
}
.venue-azioni form { margin: 0; }
.btn-sito { width: auto; padding: 12px 22px; font-size: .92rem; }
.venue-dati {
  display: flex; flex-direction: column; gap: 7px;
  margin: 20px 0 4px; padding: 15px 18px;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--r-md); font-size: .9rem; color: var(--muted);
}
.venue-dati b { color: var(--paper); font-weight: 700; margin-right: 6px; }

/* ---------- elenco filtrato senza risultati ---------- */
.vuoto-blocco {
  margin: 30px 0; padding: 30px 26px; text-align: center;
  border: 1px dashed var(--ink-3); border-radius: var(--r-lg);
  color: var(--muted);
}
.vuoto-blocco .btn-book { display: inline-block; width: auto; margin-top: 14px; }

/* ---------- menu principale ---------- */
.site-header .bar { justify-content: space-between; }
.menu-btn {
  /* era 42x38: il bersaglio che apre il menu su ogni pagina stava sotto i
     44px raccomandati. Le tre righe restano larghe 26px come prima. */
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 9px; flex: none;
  background: transparent; border: 1px solid var(--ink-3);
  border-radius: 10px; transition: border-color .18s;
}
.menu-btn span {
  display: block; height: 2px; background: var(--paper); border-radius: 2px;
  transition: transform .22s, opacity .18s;
}
.menu-btn:hover { border-color: var(--red); }
.menu-btn.aperto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.aperto span:nth-child(2) { opacity: 0; }
.menu-btn.aperto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
  border-top: 1px solid var(--ink-3);
  background: var(--ink-2);
  box-shadow: var(--shadow);
}
.menu-inner {
  display: grid; gap: 22px 34px; padding-top: 22px; padding-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.menu-col { display: flex; flex-direction: column; gap: 9px; }
.menu-tit {
  font-family: "Space Mono", monospace; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-hi); margin: 0 0 3px;
}
/* le voci erano righe alte 24px: 19 collegamenti su ogni pagina, tutti
   piu' piccoli del polpastrello. Il padding le porta a 44 e lo spazio fra
   una e l'altra arriva ora dal padding, non piu' dal gap della colonna. */
.menu-col { gap: 0; }
.menu-col a {
  display: flex; align-items: center; min-height: 44px; padding: 4px 0;
  font-size: .95rem; font-weight: 600; color: var(--muted);
}
.menu-col a:hover { color: var(--paper); }
body.menu-aperto { overflow: hidden; }
@media (max-width: 640px) {
  .menu { max-height: calc(100vh - 62px); overflow-y: auto; }
  .menu-inner { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- etichetta sopra i titoli: va letta ---------- */
.eyebrow {
  font-size: .82rem;
  letter-spacing: .12em;
  font-weight: 700;
  color: var(--red-hi);
}
.chip-outdoor { border-color: rgba(63,214,154,.45); color: #6FE0B4; }
.chip-outdoor:hover { border-color: var(--mint); }
.card-desc-vuota { color: var(--muted); opacity: .72; font-style: italic; }
.prose.senza-testo { color: var(--muted); }

/* ---------- listino prezzi nella scheda stanza ---------- */
.listino { margin-top: 26px; }
.listino h2 {
  font-family: "Anton", sans-serif; font-size: 1.2rem;
  text-transform: uppercase; margin: 0 0 4px;
}
.listino-nota { font-size: .82rem; color: var(--muted); margin: 0 0 14px; }
.tab-prezzi {
  width: 100%; border-collapse: collapse; margin-bottom: 16px;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--r-md); overflow: hidden;
}
.tab-prezzi caption {
  text-align: left; padding: 10px 14px; font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--red-hi);
  background: var(--ink-3);
}
.tab-prezzi td { padding: 10px 14px; border-top: 1px solid var(--ink-3); font-size: .9rem; }
.tab-prezzi tr:first-child td { border-top: 0; }
.tab-prezzi .t { text-align: right; color: var(--brass); font-weight: 700; white-space: nowrap; }
.tab-prezzi .p { text-align: right; color: var(--muted); font-size: .82rem; white-space: nowrap; }
.card-strip .price i { font-style: normal; opacity: .72; font-size: .68rem; }
.tab-prezzi .g b { color: var(--paper); font-weight: 700; }
.hero-azioni { margin-top: 20px; }
.hero-azioni .btn-book { display: inline-block; width: auto; padding: 13px 26px; }

/* ---------- ricerca per posizione ---------- */
.hero-compatto { padding-bottom: 8px; }
.cerca-citta { margin: 4px 0 18px; }
.cerca-citta label {
  display: block; font-size: .8rem; font-weight: 700;
  color: var(--muted); margin-bottom: 7px;
}
.cerca-riga { display: flex; gap: 9px; flex-wrap: wrap; }
.cerca-riga input {
  flex: 1 1 240px; min-width: 0;
  background: var(--slot-bg); color: var(--paper);
  border: 1px solid var(--ink-3); border-radius: var(--r-sm);
  padding: 12px 14px; font-family: inherit; font-size: .95rem;
}
.cerca-riga input:focus { outline: none; border-color: var(--red); }
.cerca-riga .btn-book { width: auto; padding: 12px 24px; flex: none; }
.cerca-nota { font-size: .82rem; color: var(--muted); margin: 9px 0 0; }
.link-simile {
  background: none; border: 0; padding: 0;
  color: var(--red-hi); font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}
.mappa-grande { height: min(62vh, 520px); }
.prose-citta { max-width: 68ch; }
.prose-citta h2 { font-family: "Anton", sans-serif; font-size: 1.24rem; text-transform: uppercase; }
.days-attesa { min-height: 64px; display: flex; align-items: center; }
.days-attesa { min-height: 90px; display: flex; align-items: center; }
.days-attesa .fineprint { margin: 0; }


/* ---------- respiro nel blocco prenotazione ---------- */
.booking-foot { padding: 14px 16px 16px; }
.booking-foot .fineprint { margin: 10px 2px 0; line-height: 1.45; }
.booking-foot .callnote { margin: 12px 2px 0; }
.booking-head { padding: 14px 16px 0; }
#disponibilita { padding: 0 16px; }
#disponibilita .fineprint { margin: 12px 0; }
.listino-nota { padding-right: 8px; }

/* ---------- orari della struttura ---------- */
.orari { margin-top: 24px; }
.orari h2 { font-family: "Anton", sans-serif; font-size: 1.14rem; text-transform: uppercase; margin: 0 0 10px; }
.tab-orari { width: 100%; max-width: 380px; border-collapse: collapse;
  background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r-md); overflow: hidden; }
.tab-orari td { padding: 8px 14px; border-top: 1px solid var(--ink-3); font-size: .88rem; }
.tab-orari tr:first-child td { border-top: 0; }
.tab-orari .o { text-align: right; color: var(--muted); white-space: nowrap; }
.orari .fineprint { margin-top: 8px; }

/* ---------- pannello prenotazione: spaziature ---------- */
/* il calendario ha il suo respiro interno: senza, il testo tocca il bordo
   della scheda */
#disponibilita { padding: 12px 16px 4px; }
#disponibilita .fineprint { margin: 0 0 8px; }
/* quando il calendario e' nascosto, il piede e' l'unico contenuto e non
   deve avere la riga di separazione sopra */
#blocco-disponibilita[hidden] + .booking-foot { border-top: 0; }
.booking-foot .fineprint:first-child { margin-top: 0; }

/* ---------- "dove si trova" nella scheda stanza ---------- */
.dove {
  display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center;
  justify-content: space-between;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--r-lg); padding: 20px 22px;
}
.dove-testo { flex: 1 1 260px; min-width: 0; }
.dove-nome {
  font-family: "Anton", sans-serif; font-size: 1.24rem;
  text-transform: uppercase; margin: 4px 0 6px; line-height: 1.1;
}
.dove-nome a { color: var(--paper); }
.dove-nome a:hover { color: var(--red-hi); }
.dove-via { margin: 0; color: var(--muted); font-size: .92rem; }
.dove-dati { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0 0; }
.dove-dati span {
  font-size: .78rem; color: var(--muted);
  border: 1px solid var(--ink-3); border-radius: 999px; padding: 3px 11px;
}
.dove-dati:empty { display: none; }
.dove-azioni { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.dove-azioni .btn-book { width: auto; padding: 12px 20px; font-size: .88rem; }
@media (max-width: 560px) {
  .dove-azioni { width: 100%; }
  .dove-azioni .btn-book, .dove-azioni .mostra-tel { flex: 1 1 100%; text-align: center; }
}

/* ---------- indirizzo sotto il titolo della stanza ---------- */
.sotto-titolo {
  margin: 6px 0 0; font-size: .9rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.sotto-titolo .chiuso-nota { color: var(--red-hi); font-weight: 600; }
.eyebrow a { color: inherit; }
.eyebrow a:hover { color: var(--red-hi); }
/* mappa nella scheda stanza: piccola, serve a orientarsi non a esplorare */
/* La mappa sta dentro .dove, che e' un contenitore flex: senza una base
   di larghezza il riquadro collassa a zero, Leaflet si inizializza in uno
   spazio largo 0 e non carica nessuna mattonella. Restava l'altezza vuota
   e sembrava una mappa rotta. */
.mappa-piccola {
  flex: 1 1 100%; width: 100%; min-width: 0;
  height: 180px; border-radius: var(--r-md); margin-bottom: 12px;
}

/* ---------- leggibilità della mappa ----------
   Lo strato scuro di CARTO è pensato come sfondo decorativo: strade e
   confini restano quasi invisibili. Il filtro agisce solo sulle mattonelle,
   non sui segnaposto, che mantengono il rosso pieno del marchio. */
[data-theme="chiaro"] .leaflet-tile-pane {
  filter: contrast(1.06) saturate(.95);
}
/* Il guscio avvolge SOLO la mappa: il velo di attivazione non deve spegnere
   il testo e i bottoni intorno. Le misure sono dichiarate esplicitamente
   perche' il velo e' posizionato in modo assoluto rispetto a questo. */
.map-guscio {
  position: relative;
  display: block;
  line-height: 0;              /* niente spazio fantasma sotto la mappa */
  border-radius: var(--r-md);
  overflow: hidden;            /* il velo non deborda oltre gli angoli */
}
.map-guscio > .erm-map { display: block; }

/* ---------- modulo contatti ---------- */
.prose-stretta { max-width: 68ch; }
.form-contatti { margin-top: 18px; }
.form-contatti .campo { margin-bottom: 16px; }
.form-contatti label {
  display: block; font-size: .82rem; font-weight: 700;
  color: var(--muted); margin-bottom: 6px;
}
.form-contatti input[type="text"],
.form-contatti input[type="email"],
.form-contatti select,
.form-contatti textarea {
  width: 100%; background: var(--slot-bg); color: var(--paper);
  border: 1px solid var(--ink-3); border-radius: var(--r-sm);
  padding: 11px 13px; font-family: inherit; font-size: .95rem;
}
/* Questo era ".form-contatti :focus": toglieva il contorno a QUALSIASI
   elemento del modulo, bottone compreso. Sui campi il bordo rosso fa da
   sostituto, ma il bottone non ha bordo e chi naviga da tastiera non
   vedeva piu' dove si trovava. Restringiamo ai soli campi: al bottone
   torna il contorno generale definito una volta per tutte piu' sopra. */
.form-contatti input:focus,
.form-contatti select:focus,
.form-contatti textarea:focus { outline: none; border-color: var(--red); }
.form-contatti .btn-book { width: auto; padding: 13px 28px; }
.aiuto { font-size: .78rem; color: var(--muted); margin: 5px 0 0; }
.errore-campo { font-size: .8rem; color: var(--red-hi); margin: 5px 0 0; }
.avviso-ok {
  background: rgba(14,122,80,.14); border: 1px solid rgba(14,122,80,.4);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 18px;
}
.avviso-ok p { margin: 0; }

/* ---------- scelta iniziale nel modulo di segnalazione ---------- */
.scelta-scopo { margin-bottom: 22px; }
.scelta {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer; transition: border-color .16s;
}
.scelta:hover { border-color: var(--red); }
.scelta input { margin-top: 2px; accent-color: var(--red); }
.scelta span { font-size: .94rem; line-height: 1.35; }
.scelta-scopo .fineprint { margin: 10px 2px 0; }
/* blocco di uscita in fondo alla scheda struttura */
.venue-uscita .lead { margin-bottom: 16px; }
.venue-uscita .venue-azioni { margin-top: 0; }
.attori-nota {
  margin: 14px 0 0; padding: 10px 13px;
  background: var(--ink-2); border-left: 3px solid var(--red);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .87rem; line-height: 1.45; color: var(--muted);
}
.mostra-altre {
  display: block; width: 100%; margin: 18px 0 0; padding: 13px 18px;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--r-sm); color: var(--ink-fg);
  font-family: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
  transition: border-color .16s;
}
.mostra-altre:hover { border-color: var(--red); }
.grid.nascoste { margin-top: 14px; }
/* Le stanze oltre la quarantesima arrivano con l'attributo "hidden", ma
   ".grid { display: grid }" lo scavalcava: restavano tutte in pagina e il
   bottone "mostra le altre" non mostrava niente perche' c'erano gia'. */
.grid[hidden] { display: none; }
/* quante stanze restano applicando un filtro */
.sel .quante {
  font-style: normal; font-size: .76rem; color: var(--muted);
  background: var(--ink-3); border-radius: 999px; padding: 1px 7px;
  margin-left: 5px;
}

/* scorciatoie per citta' nelle pagine di elenco nazionali */
.citta-filtro { margin: 22px 0 26px; }
.citta-filtro-titolo {
  margin: 0 0 10px; font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.citta-filtro ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.citta-filtro a {
  display: inline-block; padding: 7px 13px;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: 999px; color: var(--ink-fg);
  font-size: .88rem; text-decoration: none;
  transition: border-color .16s;
}
.citta-filtro a:hover { border-color: var(--red); }
.citta-filtro a i {
  font-style: normal; color: var(--muted); font-size: .8rem; margin-left: 4px;
}

/* elenco delle strutture piu' vicine, in "escape room vicino a me" */
.vicine { margin: 14px 0 0; }
.vicine-titolo {
  margin: 0 0 8px; font-size: .8rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.vicine ul { list-style: none; margin: 0; padding: 0; }
.vicine li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ink-3);
}
.vicine li:last-child { border-bottom: 0; }
.vicine a { color: var(--ink-fg); text-decoration: none; font-weight: 600; }
.vicine a:hover { color: var(--red); }
.vicine .km {
  font-size: .82rem; color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* mappa nella scheda della struttura: piu' alta di quella nella stanza,
   perche' qui e' un'informazione principale e non un rimando */
.mappa-struttura {
  width: 100%; height: 260px;
  border-radius: var(--r-md); margin: 0 0 22px;
}
@media (max-width: 660px) { .mappa-struttura { height: 200px; } }

/* indice di tutte le strutture */
.mappa-indice { width: 100%; height: 380px; border-radius: var(--r-md); margin: 0 0 30px; }
@media (max-width: 660px) { .mappa-indice { height: 280px; } }
.regione { margin: 0 0 34px; }
.regione > h2 {
  margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--ink-3); font-size: 1.32rem;
}
.regione-citta { margin: 0 0 18px; }
.regione-citta h3 { margin: 0 0 6px; font-size: 1rem; }
.regione-citta h3 a { color: var(--red); text-decoration: none; }
.indice-strutture { list-style: none; margin: 0; padding: 0; }
.indice-strutture > li { margin: 0 0 10px; }
.indice-nome { color: var(--ink-fg); font-weight: 700; text-decoration: none; }
.indice-nome:hover { color: var(--red); }
.indice-stanze {
  list-style: none; margin: 3px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 10px;
}
.indice-stanze a {
  color: var(--muted); font-size: .87rem; text-decoration: none;
}
.indice-stanze a:hover { color: var(--red); }
.indice-stanze li:not(:last-child) a::after { content: " ·"; color: var(--ink-3); }
.alfabeto { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; }
.alfabeto a {
  display: inline-block; min-width: 30px; text-align: center;
  padding: 5px 8px; background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--r-sm); color: var(--ink-fg);
  font-weight: 700; font-size: .88rem; text-decoration: none;
}
.alfabeto a:hover { border-color: var(--red); color: var(--red); }
.regione > h2 { scroll-margin-top: 80px; }

/* durata, giocatori e difficolta' sopra l'immagine della scheda breve */
.card-dati {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  display: flex; flex-wrap: wrap; gap: 5px; pointer-events: none;
}
.card-dati span {
  padding: 3px 8px; border-radius: 999px;
  background: rgba(12, 12, 14, .74);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: #fff; font-size: .74rem; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap;
}
.card-dati span.d1 { background: rgba(24, 107, 63, .92); }
.card-dati span.d2 { background: rgba(138, 98, 16, .92); }
.card-dati span.d3 { background: rgba(168, 60, 24, .88); }
.card-dati span.d4 { background: rgba(122, 26, 26, .92); }

/* realta' virtuale: colore proprio, diverso dai temi e da "all'aperto",
   perche' non e' un genere ma un modo di giocare completamente diverso */
.tag-vr {
  background: rgba(78, 52, 158, .16);
  border-color: rgba(120, 88, 220, .5);
  color: #a794ee;
}
/* l'indirizzo porta alla mappa: serve anche quando il riquadro non parte */
.via-link { color: inherit; text-decoration: underline; text-underline-offset: 3px;
            text-decoration-color: var(--ink-3); }
.via-link:hover { color: var(--red); text-decoration-color: var(--red); }
/* alternativa alla mappa quando il riquadro non puo' essere disegnato */
.apri-mappa { margin: 0 0 14px; font-size: .9rem; }
.apri-mappa a { color: var(--red); text-decoration: none; font-weight: 700; }
.apri-mappa a:hover { text-decoration: underline; }
/* titolo di provincia senza collegamento: il capoluogo non ha strutture */
.prov-testa-muta { cursor: default; }
.prov-testa-muta .prov-nome { color: var(--ink-fg); }