/*
 * VemVer Player no navegador da TV (Samsung, LG, TV Box sem o app).
 * Mesmo desenho das telas do app Android: "luz de tela" sobre o verde-escuro, unidade = % do lado menor.
 * CSS simples de propósito: navegador de TV costuma ser um Chromium antigo.
 */
@font-face { font-family: Gabarito; src: url(assets/fonts/gabarito-bold.ttf); font-weight: 700; }
@font-face { font-family: Gabarito; src: url(assets/fonts/gabarito-semibold.ttf); font-weight: 600; }
@font-face { font-family: Onest; src: url(assets/fonts/onest-regular.ttf); font-weight: 400; }
@font-face { font-family: Martian; src: url(assets/fonts/martian-mono-medium.ttf); font-weight: 500; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; cursor: none; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }

#stage { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #0B130E; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }

.layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; margin: 0; padding: 0; opacity: 0; visibility: hidden; z-index: 0; }
.layer.on { opacity: 1; visibility: visible; }
.layer.fading { visibility: visible; -webkit-transition: opacity .3s linear; transition: opacity .3s linear; }

#video { background: #000; }
#v, #freeze { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
#freeze { display: none; }

.photo { background: #000; overflow: hidden; }
.photo .bg { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; background-size: cover; background-position: center; -webkit-filter: blur(30px) brightness(.45); filter: blur(30px) brightness(.45); }
.photo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }

#widget, #site { background: #0B130E; }

/* ------------------------------ telas da marca ------------------------------ */
.brand { color: #D7E2DA; font-family: Onest, sans-serif; background: radial-gradient(120% 70% at 85% 0%, #21402A 0%, #122016 50%, #0B130E 100%); }
.center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; width: 90%; }

#idle .logo-h { width: 70vmin; }
#idle .logo-v { width: 56vmin; display: none; }
.portrait #idle .logo-h { display: none; }
.portrait #idle .logo-v { display: inline-block; }
#idle .tagline { margin-top: 6vmin; font-size: 4.2vmin; color: rgba(215, 226, 218, .7); }

.pair-logo { width: 42vmin; margin-bottom: 9vmin; }
.portrait .pair-logo { margin-bottom: 16vmin; }
.label { font-family: Martian, monospace; font-weight: 500; letter-spacing: .12em; color: #56BA5D; font-size: 2.6vmin; margin-bottom: 3vmin; }
.boxes span { display: inline-block; width: 11.5vmin; height: 15vmin; line-height: 15vmin; margin: 0 1.1vmin; border-radius: 1.6vmin; background: #22342A; border: 1px solid rgba(215, 226, 218, .12); font-family: Gabarito, sans-serif; font-weight: 700; font-size: 10vmin; color: #D7E2DA; }
.boxes.done span { color: #56BA5D; }
.instructions { margin-top: 5vmin; font-size: 3.2vmin; line-height: 1.25; color: rgba(215, 226, 218, .85); }
.instructions.name { font-family: Gabarito, sans-serif; font-weight: 600; font-size: 4.4vmin; color: #D7E2DA; }
.status { margin-top: 6vmin; font-size: 2.6vmin; color: rgba(215, 226, 218, .7); }
.status i { display: inline-block; width: 1.4vmin; height: 1.4vmin; border-radius: 50%; background: #56BA5D; margin-right: 1.6vmin; vertical-align: middle; }
.status.alert { color: #F2B23E; }
.status.alert i { background: #F2B23E; }
.footer { position: absolute; left: 0; right: 0; bottom: 5vmin; text-align: center; font-family: Martian, monospace; }
.hint { font-size: 1.9vmin; color: rgba(215, 226, 218, .45); white-space: pre; }
.version { margin-top: 1.2vmin; font-size: 1.7vmin; color: rgba(215, 226, 218, .35); }

/* recado por cima de tudo (identificar a tela) */
#notice { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100000; display: none; background: rgba(11, 19, 14, .92); color: #D7E2DA; font-family: Gabarito, sans-serif; font-weight: 700; text-align: center; }
#notice.on { display: table; }
#notice span { display: table-cell; vertical-align: middle; padding: 0 8vmin; }

/* dica de tela cheia (some sozinha; fora do palco, não gira) */
#hint { position: fixed; right: 2vmin; bottom: 2vmin; z-index: 100001; padding: 1.2vmin 2vmin; border-radius: 1vmin; background: #22342A; color: #D7E2DA; font-family: Onest, sans-serif; font-size: 2vmin; display: none; }
#hint.on { display: block; }

/* erro de JavaScript (navegador antigo): na tela, já que a TV não tem console */
#error { position: fixed; left: 2vmin; right: 2vmin; top: 2vmin; z-index: 100002; display: none; padding: 2vmin; border-radius: 1vmin; background: #F2B23E; color: #0B130E; font-family: monospace; font-size: 2.2vmin; white-space: pre-wrap; }