:root {
  --bg: #08090c;
  --bg-elevated: #101218;
  --card: #14161d;
  --border: #23262f;
  --text: #eef0f4;
  --text-dim: #8b8f9c;
  --accent: #5b8cff;
  --accent-dim: #3a5cc4;
  --danger: #ff5c6a;
  --success: #34d399;
  --warn: #f5a623;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  overflow: hidden;
}

.screen {
  min-height: 100vh;
  width: 100%;
}

/* Several elements below (.screen, .overlay, .banner, ...) set their own
   `display` value, which otherwise silently wins over the UA stylesheet's
   [hidden]{display:none} rule (author CSS always beats UA CSS regardless of
   specificity). Without this, toggling the hidden property/attribute in JS
   has no visual effect and hidden elements stay stacked on top, intercepting
   clicks meant for what's underneath. This one rule covers every current and
   future use of the native hidden attribute anywhere in the app. */
[hidden] {
  display: none !important;
}

/* ===================== Login screen ===================== */

#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(91, 140, 255, 0.08), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(91, 140, 255, 0.05), transparent 40%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}

.brand h1 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.brand-dim {
  color: var(--text-dim);
  font-weight: 400;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.auth-form input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--text);
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: 0.02em;
}

#totp-input {
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.auth-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.15);
}

.btn-primary {
  margin-top: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
  font-family: var(--font);
}

.btn-primary:hover {
  background: #6f98ff;
}

.btn-primary:active {
  transform: scale(0.98);
}

.error-msg {
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0 0;
  min-height: 16px;
  padding: 8px 10px;
}

.error-msg:not(:empty) {
  background: rgba(255, 92, 106, 0.12);
  border: 1px solid rgba(255, 92, 106, 0.35);
  border-radius: 6px;
}

/* ===================== Player screen ===================== */

#player-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background: #000;
}

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(245, 166, 35, 0.12);
  border-bottom: 1px solid rgba(245, 166, 35, 0.35);
  color: #f5c877;
  font-size: 13px;
  padding: 10px 16px;
}

.banner-dismiss {
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  flex-shrink: 0;
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  z-index: 5;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot--idle { background: var(--text-dim); }
.status-dot--connecting { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
.status-dot--connected { background: var(--success); }
.status-dot--disconnected { background: var(--danger); }
.status-dot--offline { background: var(--danger); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-ghost:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

#remote-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(8, 9, 12, 0.85);
  backdrop-filter: blur(4px);
  text-align: center;
  padding: 24px;
}

.btn-start {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  box-shadow: 0 8px 30px rgba(91, 140, 255, 0.35);
  transition: transform 0.05s ease, background 0.15s ease;
}

.btn-start:hover {
  background: #6f98ff;
}

.btn-start:active {
  transform: scale(0.97);
}

.btn-start--retry {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: none;
}

.overlay-hint {
  color: var(--text-dim);
  font-size: 13px;
  max-width: 340px;
  margin: 0;
}

.offline-msg {
  color: var(--danger);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}