* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #000; color: #fff; font: 16px/1.4 system-ui, sans-serif; }
#scena { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#video, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
#video.specchio { transform: scaleX(-1); }

#banner {
  position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); padding: 8px 18px; border-radius: 999px;
  background: rgba(10, 6, 30, .85); font-size: 20px; font-weight: 800; white-space: nowrap; display: none;
}
#banner.vis { display: block; }

#barra {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; align-items: center;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.6); font-size: 13px;
}
#barra .spazio { flex: 1; }
#barra button { font-size: 22px; background: rgba(255,255,255,.15); border: 0; border-radius: 10px; padding: 6px 10px; color: #fff; }

#avvio { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(10, 6, 30, .95); padding: 20px; overflow: auto; }
#avvio .box { max-width: 460px; text-align: center; }
#avvio h1 { font-size: 28px; margin-bottom: 10px; }
#avvio p { margin: 10px 0; }
#avvio .piccolo { font-size: 13px; opacity: .75; }
#avvio input { font: inherit; font-size: 32px; font-weight: 900; width: 6em; text-align: center; letter-spacing: .15em; padding: 6px; border-radius: 12px; border: 3px solid #ffd23f; }
#avvio button { font: inherit; font-size: 24px; font-weight: 900; padding: 12px 28px; border: 0; border-radius: 999px; background: #ffd23f; color: #1a1240; margin-top: 10px; }
#avvio details { margin-top: 16px; text-align: left; font-size: 14px; opacity: .85; }
body.avviata #avvio { display: none; }

#guida {
  position: fixed; left: 50%; top: 10px; transform: translateX(-50%); max-width: 94vw; text-align: center;
  padding: 6px 16px; border-radius: 12px; background: rgba(31, 122, 74, .9); font-size: 17px; font-weight: 800; z-index: 2;
}
#guida.spento { background: rgba(160, 40, 50, .92); }