/* La Sala: anteprima viva del gioco, che si apre a tutto schermo */
.sala-hero { padding-bottom: clamp(36px, 5vw, 70px); }
.sala { position: relative; height: min(76vh, 760px); min-height: 420px; border: 1px solid var(--line); overflow: hidden; background: #0e0908; }
.sala-frame, .sala-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sala:not(.is-full) .sala-frame { pointer-events: none; }
.sala:not(.is-full) .sala-frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(14, 9, 8, 0) 30%, rgba(14, 9, 8, .55)); }

.sala-enter { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: #f3e6cf; cursor: pointer; }
.sala-enter-t { position: relative; padding: 16px 26px 15px; background: rgba(20, 12, 11, .82); border: 1px solid rgba(243, 230, 207, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: italic 400 clamp(1.4rem, 2.6vw, 2rem)/1 var(--serif); transition: background .4s, color .4s, border-color .4s; }
.sala-enter:hover .sala-enter-t, .sala-enter:focus-visible .sala-enter-t { background: #ffa53d; color: #170f0e; border-color: #ffa53d; }
.sala-enter-s { font: 500 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 230, 207, .75); }
.sala-pulse { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; border: 1px solid rgba(255, 165, 61, .5); animation: sala-pulse 2.8s ease-out infinite; pointer-events: none; }
@keyframes sala-pulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

.sala-close { display: none; }
.sala.is-full { position: fixed; inset: 0; z-index: 200; height: 100%; min-height: 0; border: 0; animation: sala-in .5s var(--ease) both; }
.sala.is-full .sala-enter { display: none; }
.sala.is-full .sala-close { display: inline-flex; align-items: center; gap: 8px; position: absolute; z-index: 3; left: 50%; translate: -50% 0; top: calc(12px + env(safe-area-inset-top, 0px));
  padding: 8px 14px; border: 1px solid rgba(243, 230, 207, .3); background: rgba(20, 12, 11, .85); color: #f3e6cf; cursor: pointer;
  font: 500 .66rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sala-close span[aria-hidden] { font-size: 1.3rem; line-height: .6; }
.sala-close:hover { border-color: #ffa53d; color: #ffa53d; }
@keyframes sala-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
html.sala-open, html.sala-open body { overflow: hidden; }
html.sala-open .site-header { display: none; }

.sala-how { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sala-how li { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--mute); }
.sala-how b { font: italic 400 1.3rem/1 var(--serif); color: var(--accent); }
@media (max-width: 760px) {
  .sala { height: 64vh; }
  .sala-how { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sala-pulse { animation: none; opacity: .5; } .sala.is-full { animation: none; } }

/* la pagina parte subito con il gioco (i testi sono già nella schermata della sala) */
.sala-page .sala-wrap { padding-top: calc(96px + env(safe-area-inset-top, 0px)) !important; }
.sala-page .sala { height: min(calc(100vh - 150px), 820px); height: min(calc(100svh - 150px), 820px); }
.sala-page .sala.is-full { height: 100%; min-height: 0; }