/* =====================================================================
   rida screen player
   Everything is absolutely positioned and toggled with `visibility`,
   never `display`, so swapping an item never triggers a layout reflow.
   ===================================================================== */

:root {
  --pair-bg: #0f172a;      /* deep slate — replace with rida brand */
  --pair-accent: #38bdf8;
  --ink: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: none;                    /* no mouse pointer on a TV */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------
   Stage + orientation
   The class name is the INVERSE of the logical angle on purpose:
   a panel physically rotated 90deg needs its content rotated the other way.
   --------------------------------------------------------------------- */

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

.stage.rot-90,
.stage.rot-270 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vw;
  transform-origin: center;
}
.stage.rot-90   { transform: translate(-50%, -50%) rotate(90deg); }
.stage.rot-180  { transform: rotate(180deg); }
.stage.rot-270  { transform: translate(-50%, -50%) rotate(270deg); }

/* ---------------------------------------------------------------------
   Layers
   --------------------------------------------------------------------- */

.layer {
  position: absolute;
  inset: 0;
  background: #000;
  visibility: hidden;
  overflow: hidden;
  will-change: opacity, transform;
}

.media {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

img.media   { object-fit: contain; }   /* overridden per item from `fit` */
video.media { object-fit: contain; }
iframe.web  { background: #fff; }

/* ---------------------------------------------------------------------
   Pairing / message screen
   --------------------------------------------------------------------- */

.msg {
  background: var(--pair-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.msg-inner { padding: 4vh 4vw; }

.msg-code {
  font-size: 14vw;
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 6vh;
  font-variant-numeric: tabular-nums;
}
.msg-code:empty { display: none; }

.msg-title {
  font-size: 2.6vw;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

.msg-sub {
  font-size: 1.8vw;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 1.5vh;
  color: rgba(255, 255, 255, 0.65);
}

/* ---------------------------------------------------------------------
   Identify overlay — "which TV am I?"
   Deliberately loud. You are standing in a room with four screens
   trying to work out which one is "Lobby Left".
   --------------------------------------------------------------------- */

.identify {
  background: var(--pair-accent);
  color: #06283d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: identify-pulse 1s ease-in-out infinite alternate;
}
.identify-name { font-size: 8vw; font-weight: 700; line-height: 1.1; }
.identify-id   { font-size: 3vw;  font-weight: 400; margin-top: 2vh;
                 letter-spacing: 0.2em; opacity: 0.7; }

@keyframes identify-pulse {
  from { filter: brightness(1); }
  to   { filter: brightness(1.35); }
}

/* ---------------------------------------------------------------------
   Debug overlay
   --------------------------------------------------------------------- */

.debug {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  max-width: 44ch;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.82);
  color: #7CFC9B;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
  pointer-events: none;
  border-bottom-right-radius: 6px;
}
.debug b { color: #fff; font-weight: 600; }
.debug .warn { color: #fbbf24; }
.debug .err  { color: #f87171; }