/* Le due strade per l'esame: stessa famiglia della mappa della Sala comune (notte, oro, pergamena). */
:root {
  --notte: #120e24;
  --notte-2: #1c1638;
  --oro: #f3d58a;
  --oro-scuro: #b8893e;
  --pergamena: #fbf0d4;
  --carta: #fff7df;
  --inchiostro: #3a2508;
  --inchiostro-2: #6b5132;
  --rosso: #7c1f2e;
  --blu: #24456e;
}
* { box-sizing: border-box; }
html { background: var(--notte); }
body { margin: 0; color: var(--carta); font: 17px/1.55 Georgia, "Times New Roman", serif; background: var(--notte); }
a { color: var(--oro); }
button { font: inherit; cursor: pointer; }

.testata { text-align: center; padding: 36px 20px 18px; }
.occhiello { margin: 0; color: var(--oro); font-style: italic; font-size: 15px; }
.testata h1 { margin: 6px 0 0; font-size: clamp(26px, 4.6vw, 46px); letter-spacing: .08em; text-transform: uppercase; font-weight: 400; color: var(--oro); }
.motto { margin: 10px auto 0; max-width: 640px; color: #cfc4f0; font-style: italic; }

.impianto { max-width: 1240px; margin: 0 auto; padding: 0 16px 40px; }

/* la mappa: i medaglioni sono in percentuale sull'immagine, quindi seguono i luoghi */
.mappa { margin: 0; overflow-x: auto; border-radius: 14px; -webkit-overflow-scrolling: touch; }
.tela { position: relative; min-width: 820px; }
.tela img { display: block; width: 100%; height: auto; border-radius: 14px; }
.medaglione {
  position: absolute; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--pergamena); color: var(--inchiostro);
  border: 3px solid var(--oro-scuro); font-weight: 700; font-size: 19px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px rgba(18, 14, 36, .55), 0 6px 14px rgba(0, 0, 0, .45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.medaglione.strada-a { border-color: var(--rosso); }
.medaglione.strada-b { border-color: var(--blu); background: #e6edf7; }
.medaglione:hover, .medaglione:focus-visible { transform: translate(-50%, -50%) scale(1.12); outline: none; box-shadow: 0 0 0 4px var(--oro), 0 6px 16px rgba(0, 0, 0, .5); }
.medaglione[aria-pressed="true"] { background: var(--oro); box-shadow: 0 0 0 5px var(--oro), 0 0 22px 6px rgba(243, 213, 138, .7); }
.medaglione::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(243, 213, 138, .7);
  animation: respiro 2.6s ease-in-out infinite;
}
@keyframes respiro { 0%, 100% { opacity: 0; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .medaglione::after { animation: none; opacity: 0; } }

.etichetta {
  position: absolute; white-space: nowrap; pointer-events: none;
  padding: 4px 10px; border-radius: 6px;
  background: var(--pergamena); color: var(--inchiostro); border: 1px solid var(--oro-scuro);
  font-size: 14px; font-weight: 400; font-style: italic; letter-spacing: .01em;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}
.lato-dx { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
.lato-sx { right: calc(100% + 10px); top: 50%; transform: translateY(-50%); }
.lato-su { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.lato-su-dx { bottom: calc(100% + 10px); left: -8px; }
.lato-giu { top: calc(100% + 10px); left: 50%; transform: translateX(-50%); }
.strada-a .etichetta { border-color: var(--rosso); }
.strada-b .etichetta { border-color: var(--blu); }
.medaglione[aria-pressed="true"] .etichetta { background: var(--oro); }
.medaglione:hover .etichetta, .medaglione:focus-visible .etichetta { background: var(--carta); }

/* il fantasma delle sincrone: vaga fra la casa e il cancello del 15, e quando lo tocchi si ferma */
.fantasma {
  position: absolute; left: 24%; top: 42%; z-index: 3;
  padding: 0; background: none; border: 0; color: inherit;
  transform: translate(-50%, -50%);
  animation: vaga 26s ease-in-out infinite;
}
.fantasma .disegno-fantasma { display: block; animation: ondeggia 3.2s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255, 247, 223, .8)); }
.disegno-fantasma .corpo { fill: rgba(255, 250, 238, .82); stroke: rgba(184, 137, 62, .9); stroke-width: 1.5; }
.disegno-fantasma .occhio, .disegno-fantasma .bocca { fill: var(--notte); }
.fantasma[aria-pressed="true"], .fantasma[aria-pressed="true"] .disegno-fantasma { animation-play-state: paused; }
.fantasma[aria-pressed="true"] .disegno-fantasma { filter: drop-shadow(0 0 14px var(--oro)); }
.fantasma:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; border-radius: 50%; }
.fantasma .etichetta { border-color: var(--rosso); font-style: italic; }
@keyframes vaga {
  0%   { left: 24%; top: 42%; }
  20%  { left: 33%; top: 33%; }
  40%  { left: 20%; top: 26%; }
  60%  { left: 14%; top: 44%; }
  80%  { left: 30%; top: 50%; }
  100% { left: 24%; top: 42%; }
}
@keyframes ondeggia { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .fantasma, .fantasma .disegno-fantasma { animation: none; } }
.segno-fantasma { background: var(--notte-2); border-color: var(--oro-scuro); }

.scorri { margin: 8px 0 0; text-align: center; color: #cfc4f0; font-size: 14px; font-style: italic; }

/* la scheda della tappa scelta */
.scheda {
  margin: 18px auto 0; max-width: 760px; padding: 20px 24px;
  background: var(--pergamena); color: var(--inchiostro); border-radius: 14px;
  border: 2px solid var(--oro-scuro); box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
}
.scheda[data-strada="A"] { border-color: var(--rosso); }
.scheda[data-strada="B"] { border-color: var(--blu); }
.scheda-vuota { margin: 0; text-align: center; color: var(--inchiostro-2); font-style: italic; }
.scheda-strada { margin: 0; color: var(--rosso); font-style: italic; font-size: 15px; }
.scheda[data-strada="B"] .scheda-strada { color: var(--blu); }
.scheda h2 { margin: 2px 0 8px; font-size: 25px; font-weight: 400; letter-spacing: .03em; }
.scheda p { margin: 0 0 10px; }
.scheda a { color: var(--rosso); }
.scheda-faq { font-size: 15px; color: var(--inchiostro-2); }
.scheda-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 6px; }
.scheda-nav button { background: transparent; color: var(--inchiostro); border: 1px solid var(--oro-scuro); border-radius: 20px; padding: 6px 14px; font-size: 15px; }
.scheda-nav button:hover { background: var(--carta); }

/* l'elenco di tutte le tappe */
.elenco { margin: 34px auto 0; max-width: 760px; }
.elenco h2 { color: var(--oro); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; font-size: 20px; text-align: center; }
.elenco ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.elenco li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; background: var(--notte-2); border: 1px solid rgba(243, 213, 138, .25); border-radius: 12px; cursor: pointer; }
.elenco li:hover { border-color: var(--oro); }
.segno { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--pergamena); color: var(--inchiostro); border: 2px solid var(--oro-scuro); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.segno.strada-a { border-color: var(--rosso); }
.segno.strada-b { border-color: var(--blu); background: #e6edf7; }
.elenco h3 { margin: 2px 0 4px; font-size: 18px; font-weight: 400; color: var(--oro); }
.quale { font-size: 13px; font-style: italic; color: #cfc4f0; margin-left: 6px; }
.elenco p { margin: 0; color: #e9e2f7; font-size: 16px; }
.rimando { color: #cfc4f0; font-size: 14px; font-style: italic; white-space: nowrap; }
.occhiello a { color: var(--oro); text-decoration: none; }
.occhiello a:hover { text-decoration: underline; }

.avviso { margin: 28px auto 0; max-width: 760px; padding: 14px 18px; border: 1px dashed var(--oro-scuro); border-radius: 12px; color: #e9e2f7; font-style: italic; text-align: center; }
.piede { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; max-width: 1240px; margin: 0 auto; padding: 18px 20px 30px; color: #cfc4f0; font-size: 15px; }
.piede span { font-style: italic; color: var(--oro); }
.medaglione.cartello { background: var(--oro); border-color: #1c1638; color: #1c1638; }
.medaglione.cartello .etichetta { background: var(--oro); border-color: #1c1638; font-weight: 700; }
.scheda-passi { margin: 0 0 10px; padding-left: 22px; }
.scheda-passi li { margin-bottom: 6px; }
.scheda-nota { font-size: 15px; font-style: italic; color: var(--inchiostro-2); }