/* nikoala.tv Screen OS — vanilla client (client/generic) */

:root {
  --scaffold: #1e2127;
  --surface: #282c34;
  --primary: #6dc078;
  --primary-dim: #8ad194;
  --fg2: rgba(255, 255, 255, 0.7);
  --fg3: rgba(255, 255, 255, 0.45);
  --outline: rgba(255, 255, 255, 0.14);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Self-hosted fonts — no CDN, so text renders offline and on old TV engines.
   Static (non-variable) weights for Chromium M56 (Tizen 4) compatibility. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/montserrat-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/montserrat-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/montserrat-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-latin-800-normal.woff2') format('woff2');
}

/* Inline SVG icons (see js/icons.js) inherit color via currentColor. */
.nik-icon {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}

html,
body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
}

#stage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

#canvas {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform-origin: center;
  background: var(--surface);
}

#root {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* ── Pairing (ui-kits/client-ui-kit) ───────────────────────── */

.pairing-frame {
  background:
    radial-gradient(100% 100% at 50% 0%, #1c606c2e, transparent 55%),
    var(--scaffold);
}

.pairing-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pairing-logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

.pairing-title {
  font: 800 64px/1.1 'Montserrat', sans-serif;
  letter-spacing: -0.02em;
  margin: 30px 0 0;
}

.pairing-hint {
  font: 500 34px/1.4 'Montserrat', sans-serif;
  color: var(--fg2);
  margin: 18px 0 0;
  text-align: center;
  max-width: 1000px;
}

.pairing-hint strong {
  color: var(--primary-dim);
  font-weight: 700;
}

.pairing-code {
  display: flex;
  margin-top: 56px;
}

/* Flex `gap` is Chrome 84 — use sibling margins for old TV engines. */
.pairing-code > * + * {
  margin-left: 20px;
}

.pairing-digit {
  width: 128px;
  height: 160px;
  border-radius: 24px;
  background: var(--surface);
  border: 2px solid var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 92px/1 'JetBrains Mono', monospace;
}

.pairing-status {
  font: 500 26px/1 'Montserrat', sans-serif;
  color: var(--fg3);
  margin: 54px 0 0;
  display: flex;
  align-items: center;
}

.pairing-status > * + * {
  margin-left: 12px;
}

.pairing-wifi {
  color: var(--primary);
  margin-right: 12px;
}

.pairing-success {
  margin-top: 56px;
}

.pairing-success-badge {
  width: 160px;
  height: 160px;
  border-radius: 24px;
  background: var(--surface);
  border: 2px solid var(--outline);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pairing-success-badge .nik-icon {
  color: var(--primary);
}

/* ── Player ────────────────────────────────────────────────── */

#root.portrait #canvas,
#canvas.portrait-mode {
  width: 1080px;
  height: 1920px;
}

.player-stage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
}

.player-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.8s var(--ease-standard);
}

.player-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.player-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#root.portrait .player-media {
  object-fit: cover;
}

.player-empty,
.player-placeholder,
.player-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--fg2);
  font-size: 32px;
  text-align: center;
  padding: 80px;
}

.player-empty > * + *,
.player-placeholder > * + *,
.player-error > * + * {
  margin-top: 20px;
}

.player-empty .nik-icon,
.player-placeholder .nik-icon {
  color: var(--primary-dim);
}

.player-error {
  color: #f48fb1;
  font-size: 28px;
}