/* Sized in vh so the layout is identical on 720p, 1080p and 4K screens.
   Kept deliberately light for the Xbox: no blur, no box shadows. */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--text);
  font-family: var(--font);
}

video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Twitch's embedded player (Twitch channels) sits where the video does. */
.twitch-player { position: fixed; inset: 0; background: #000; }
.twitch-player .twitch-mount, .twitch-player iframe { width: 100%; height: 100%; border: 0; }
/* Not clickable: no controller cursor or Twitch menus inside it. */
.twitch-player iframe { pointer-events: none; }
/* Clickable (with a visible cursor) while Twitch waits for a click. */
.twitch-player.clickable iframe { pointer-events: auto; }

/* --- Chat overlay --- */
.chat {
  position: fixed;
  overflow: hidden;
  background: var(--bg-chat, rgba(0, 0, 0, 0.45));
  padding: 0.5em 0.7em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
body:not([data-status="playing"]) .chat { display: none; }

/* The list keeps its full height and overflows upward, where the box clips
   it, so the newest messages always stay visible at the bottom. */
.chat-lines { flex: none; }

.msg {
  font-weight: 500;
  line-height: 1.3;
  margin: 0.15em 0;
  overflow-wrap: anywhere;
  text-shadow: 0 0 0.15em #000, 0 0 0.15em #000;
}

.emote {
  height: var(--emote, 1.6em);
  vertical-align: middle;
  margin: -0.2em 0.05em;
}
.emote.zero-width { margin-left: calc(var(--emote, 1.6em) * -1); }

/* --- Status + notices --- */
.status {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 70vw;
  padding: 2.5vh 4vh;
  border: 0.3vh solid var(--line);
  background: rgba(0, 0, 0, 0.88);
  color: var(--fg);
  font-size: 3.2vh;
}
body[data-status="error"] .status { color: var(--warn); border-color: var(--warn); }
.status small { display: block; margin-top: 1vh; font-size: 0.6em; color: var(--dim); }

.badge {
  position: fixed;
  left: 3vh;
  bottom: 3vh;
  padding: 0.8vh 1.6vh;
  border: 0.2vh solid var(--line);
  background: rgba(0, 0, 0, 0.8);
  color: var(--fg);
  font-size: 2.2vh;
}

/* --- Pairing / boot screen --- */
.pairing {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4vh;
  padding: 6vh 9vw;
  background: var(--bg);
}
body[data-status="playing"] .pairing { display: none; }
/* Twitch's player won't start while it's covered, so don't cover it with the
   start screen while a Twitch channel loads. */
body[data-status="loading"][data-platform="twitch"] .pairing,
body[data-status="loading"][data-platform="twitch"] .status,
body[data-status="loading"][data-platform="twitch"] .badge { display: none !important; }
/* …except to ask for a click when Twitch is waiting for one. */
body[data-platform="twitch"].twitch-click .badge:not([hidden]) { display: block !important; }

.pairing h1 { margin: 0; font-size: 4vh; color: var(--fg); font-weight: 700; }
.pair-grid { display: flex; align-items: center; gap: 6vh; }

.qr { display: block; width: 30vh; height: 30vh; background: #fff; padding: 1vh; }

.pair-text { font-size: 2.8vh; color: var(--text); }
.pair-text p { margin: 1.2vh 0; }
.step { font-size: 3.6vh; color: var(--fg); }
.or { color: var(--dim); }
.or strong { color: var(--text); font-weight: 400; }
.code { font-size: 10vh; color: var(--fg); font-weight: 700; letter-spacing: 0.12em; }
.remotes { color: var(--dim); }
.remotes.connected { color: var(--fg); }

/* Inverted, unmistakable focus: the main complaint about the official app. */
.start {
  align-self: flex-start;
  font: inherit;
  font-size: 3vh;
  padding: 1.2vh 3vh;
  border: 0.3vh solid var(--fg);
  background: transparent;
  color: var(--fg);
}
.start:focus { outline: none; background: var(--fg); color: #000; }
.start.started { border-color: var(--line); color: var(--dim); background: transparent; }

.version { position: absolute; right: 3vh; bottom: 3vh; font-size: 1.8vh; color: var(--faint); }

/* Hide the mouse/controller cursor in fullscreen. A works anywhere on the
   page, so the cursor isn't needed. */
html:fullscreen, html:fullscreen * { cursor: none !important; }
html:-webkit-full-screen, html:-webkit-full-screen * { cursor: none !important; }
html.show-cursor:fullscreen, html.show-cursor:fullscreen * { cursor: auto !important; }
html.show-cursor:-webkit-full-screen, html.show-cursor:-webkit-full-screen * { cursor: auto !important; }