:root {
  --sfondo: #111111;
  --testo: #ffffff;
  --testo-tenue: rgba(255, 255, 255, 0.72);
  --vetro: rgba(17, 17, 17, 0.62);
  --bordo: rgba(255, 255, 255, 0.18);
  --accento: #6a3db8;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html, body { margin: 0; height: 100%; background: var(--sfondo); color: var(--testo); overflow: hidden; }

.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) 16px 16px;
  background: linear-gradient(rgba(0, 0, 0, 0.55), transparent);
  pointer-events: none;
}
.testata > * { pointer-events: auto; }
.titolo { margin: 0; font-weight: 600; font-size: 18px; }
.sottotitolo { margin: 2px 0 0; font-size: 13px; color: var(--testo-tenue); }

.azioni { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.azioni button {
  font: inherit; font-size: 14px; color: var(--testo); background: var(--vetro);
  border: 1px solid var(--bordo); border-radius: 999px; padding: 8px 14px; cursor: pointer;
  backdrop-filter: blur(8px);
}
.azioni button.in-attesa { animation: richiamo 1.6s ease-in-out infinite; }
@keyframes richiamo { 50% { box-shadow: 0 0 0 6px rgba(106, 61, 184, 0.45); } }
.azioni button:hover, .azioni button[aria-pressed="true"], .azioni button[aria-expanded="true"] { background: var(--accento); border-color: var(--accento); }

.elenco-stanze {
  position: fixed; z-index: 10; top: 72px; right: 16px; margin: 0; padding: 8px;
  list-style: none; background: var(--vetro); border: 1px solid var(--bordo); border-radius: 14px;
  backdrop-filter: blur(8px); max-height: calc(100% - 200px); overflow: auto; min-width: 220px;
}
.elenco-stanze button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 15px; color: var(--testo);
  background: none; border: 0; border-radius: 8px; padding: 10px 12px; cursor: pointer;
}
.elenco-stanze button:hover { background: rgba(255, 255, 255, 0.1); }
.elenco-stanze button[aria-current="true"] { background: var(--accento); }

.didascalia {
  position: fixed; z-index: 10; left: 0; right: 0; bottom: 0;
  padding: 48px 16px max(20px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}
.nome-stanza { margin: 0; font-size: 24px; font-weight: 700; }
.testo-stanza { margin: 6px 0 0; font-size: 17px; line-height: 1.45; max-width: 60ch; color: var(--testo-tenue); }
.suggerimento { margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); }

.stato-offline {
  position: fixed; z-index: 10; left: 16px; top: 70px; margin: 0; font-size: 12px;
  color: var(--testo-tenue); background: var(--vetro); padding: 4px 10px; border-radius: 999px;
}

/* Modo TV (50"): only the caption, larger, no controls. */
body.tv .azioni, body.tv .elenco-stanze, body.tv .suggerimento, body.tv .stato-offline { display: none !important; }
body.tv .titolo { font-size: 2vw; }
body.tv .sottotitolo { display: none; }
body.tv .nome-stanza { font-size: 3.2vw; }
body.tv .testo-stanza { font-size: 1.9vw; max-width: 70vw; }
body.tv .didascalia { padding: 6vw 4vw 3vw; }
body.tv .a-enter-vr { display: none; }

@media (max-width: 560px) {
  .azioni button { padding: 6px 10px; font-size: 13px; }
  .nome-stanza { font-size: 20px; }
  .testo-stanza { font-size: 15px; }
}