/* Página de realidade virtual (vr.html). Usa o layout e as peças do visualizador (app.css) e acrescenta o botão que
   entra na VR, o aviso de suporte e a lista dos controles. */
.vr-intro { margin-top: 0; }

.vr-enter { min-width: 250px; padding: 17px 20px; font-size: 12.5px; }
.vr-enter svg { width: 22px; height: 22px; }
.vr-enter:disabled { cursor: default; opacity: .4; }
.vr-enter:disabled:hover { background: var(--cor-principal); border-color: var(--cor-principal); }

.vr-status { max-width: 34ch; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--texto-suave); }
.vr-status:empty { display: none; }
#app[data-xr="unsupported"] .vr-status { padding-left: 12px; border-left: 2px solid var(--cor-secundaria); color: var(--cor-principal); }

.vr-controls { margin-top: 28px; }
.vr-controls h2 { font-size: 10.5px; font-weight: 400; letter-spacing: .2em; color: var(--texto-suave); }
.vr-controls ul { display: grid; gap: 8px; margin-top: 12px; list-style: none; }
.vr-controls li { position: relative; max-width: 36ch; padding-left: 18px; font-size: 13px; line-height: 1.45; }
.vr-controls li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--cor-secundaria); }

/* O nome é menor que no visualizador, para nomes de três linhas (MINI ÁGUA QUENTE) deixarem lugar para o botão e os
   controles. Em telas baixas os controles saem (eles também aparecem ao entrar na VR). */
@media (min-width: 900px) {
    #name { font-size: clamp(44px, 4.2vw, 76px); }
}
@media (min-width: 900px) and (max-height: 820px) {
    .vr-controls { display: none; }
}

/* Celular e tablet (sem VR): só o nome, o botão e o aviso. */
@media (max-width: 899px) {
    .vr-controls { display: none; }
    .vr-status { max-width: none; margin-top: 10px; }
    .actions:has(.vr-enter) { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 520px) {
    .vr-controls, .vr-status { display: none; }
    .actions:has(.vr-enter) { grid-template-columns: 1fr; }
    .vr-enter { padding: 12px 14px; }
}