/* SEJM KOMBAT R25R23 — opt-in TV/phone controller host surface. */

:root {
  --r25r23-couch-cyan: #5de7ff;
  --r25r23-couch-pink: #ff4f92;
  --r25r23-couch-gold: #ffd35a;
  --r25r23-couch-ok: #57e3a1;
  --r25r23-couch-danger: #ff6675;
  --r25r23-couch-ink: #060b18;
  --r25r23-couch-panel: rgba(8, 16, 35, .96);
  --r25r23-couch-line: rgba(108, 221, 255, .25);
}

/* This entry is intentionally a quiet secondary action. It has no visual
   effect unless the SELECT integration explicitly renders it. */
.r25r23-couch-tab {
  appearance: none;
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid rgba(129, 220, 244, .38);
  border-radius: 10px;
  background: rgba(5, 14, 29, .78);
  color: #d7f7ff;
  font: 800 12px/1.15 system-ui, sans-serif;
  letter-spacing: .075em;
  text-transform: uppercase;
  box-shadow: inset 0 0 18px rgba(44, 197, 236, .055);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.r25r23-couch-tab:hover,
.r25r23-couch-tab:focus-visible {
  border-color: rgba(105, 225, 255, .72);
  background: rgba(12, 30, 53, .94);
  color: #fff;
  outline: none;
}

.r25r23-couch-tab:active { transform: translateY(1px); }

#r25r23CouchHub {
  position: fixed;
  inset: 0;
  z-index: 2147482600;
  display: none;
  place-items: center;
  box-sizing: border-box;
  padding: clamp(8px, 2vw, 26px);
  overflow: hidden;
  color: #eef9ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.r25r23-couch-open #r25r23CouchHub { display: grid; }

.r25r23-couch-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 24%, rgba(29, 185, 234, .2), transparent 34%),
    radial-gradient(circle at 86% 70%, rgba(255, 57, 132, .16), transparent 37%),
    linear-gradient(135deg, rgba(2, 7, 17, .98), rgba(5, 11, 26, .96));
  backdrop-filter: blur(12px);
}

.r25r23-couch-window {
  position: relative;
  width: min(1120px, 100%);
  max-height: min(760px, calc(100dvh - 18px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(90, 216, 250, .45);
  border-radius: 20px;
  background:
    linear-gradient(150deg, rgba(12, 25, 50, .985), rgba(5, 10, 24, .985)),
    var(--r25r23-couch-panel);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .64), inset 0 1px rgba(255, 255, 255, .06);
}

.r25r23-couch-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--r25r23-couch-line);
  background: rgba(4, 10, 24, .62);
}

.r25r23-couch-kicker {
  margin: 0 0 4px;
  color: var(--r25r23-couch-cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.r25r23-couch-title {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 2.4vw, 31px);
  line-height: 1;
  letter-spacing: .025em;
}

.r25r23-couch-close {
  appearance: none;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid rgba(127, 220, 245, .45);
  border-radius: 12px;
  background: rgba(10, 23, 43, .9);
  color: #eafaff;
  font: 400 28px/1 sans-serif;
  cursor: pointer;
}

.r25r23-couch-close:hover,
.r25r23-couch-close:focus-visible {
  border-color: var(--r25r23-couch-cyan);
  outline: none;
  box-shadow: 0 0 0 3px rgba(93, 231, 255, .14);
}

.r25r23-couch-content {
  min-height: 0;
  overflow: auto;
  padding: clamp(14px, 2.2vw, 25px);
  scrollbar-color: rgba(91, 217, 250, .55) transparent;
}

.r25r23-couch-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 17px;
  padding: 13px 15px;
  border: 1px solid rgba(111, 211, 240, .2);
  border-radius: 13px;
  background: rgba(2, 8, 19, .55);
}

.r25r23-couch-intro p { margin: 0; color: #bfd0df; font-size: 14px; line-height: 1.45; }

.r25r23-couch-room-code {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 5px 12px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .34);
  color: #fff;
  font: 900 18px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .11em;
  white-space: nowrap;
}

.r25r23-couch-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.r25r23-couch-slot {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(158px, .75fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: clamp(13px, 1.8vw, 20px);
  overflow: hidden;
  border: 1px solid rgba(93, 231, 255, .34);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(10, 25, 46, .94), rgba(5, 11, 25, .96));
}

.r25r23-couch-slot[data-seat="p2"] { border-color: rgba(255, 79, 146, .38); }

.r25r23-couch-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(93, 231, 255, .045), transparent 50%);
}

.r25r23-couch-slot[data-seat="p2"]::after {
  background: linear-gradient(105deg, rgba(255, 79, 146, .045), transparent 50%);
}

.r25r23-couch-qr-shell {
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 210px);
  justify-self: center;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38);
}

.r25r23-couch-qr-shell canvas,
.r25r23-couch-qr-shell svg,
.r25r23-couch-qr-shell img {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.r25r23-couch-slot-info { position: relative; z-index: 1; min-width: 0; }

.r25r23-couch-player-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: var(--r25r23-couch-cyan);
  font: 950 21px/1 system-ui, sans-serif;
  letter-spacing: .06em;
}

[data-seat="p2"] .r25r23-couch-player-label { color: var(--r25r23-couch-pink); }

.r25r23-couch-seat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 13px currentColor;
}

.r25r23-couch-status {
  min-height: 44px;
  margin: 0 0 8px;
  color: #f5fbff;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.3;
}

.r25r23-couch-help {
  margin: 0;
  color: #9fb2c4;
  font-size: 13px;
  line-height: 1.45;
}

.r25r23-couch-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.r25r23-couch-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(149, 198, 220, .23);
  border-radius: 999px;
  background: rgba(1, 6, 16, .43);
  color: #b9cada;
  font-size: 11px;
  font-weight: 800;
}

.r25r23-couch-slot[data-status="ready"] {
  border-color: rgba(87, 227, 161, .66);
  box-shadow: inset 0 0 25px rgba(87, 227, 161, .055);
}

.r25r23-couch-slot[data-status="ready"] .r25r23-couch-status { color: var(--r25r23-couch-ok); }

.r25r23-couch-slot[data-status="disconnected"],
.r25r23-couch-slot[data-status="error"] { border-color: rgba(255, 102, 117, .68); }

.r25r23-couch-slot[data-status="disconnected"] .r25r23-couch-status,
.r25r23-couch-slot[data-status="error"] .r25r23-couch-status { color: var(--r25r23-couch-danger); }

.r25r23-couch-footer {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 20px;
  border-top: 1px solid var(--r25r23-couch-line);
  background: rgba(2, 7, 18, .72);
}

.r25r23-couch-barrier {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #b9cada;
  font-size: 13px;
  font-weight: 750;
}

.r25r23-couch-barrier::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--r25r23-couch-gold);
  box-shadow: 0 0 12px rgba(255, 211, 90, .65);
}

.r25r23-couch-window[data-all-ready="true"] .r25r23-couch-barrier::before {
  background: var(--r25r23-couch-ok);
  box-shadow: 0 0 12px rgba(87, 227, 161, .65);
}

.r25r23-couch-actions { display: flex; gap: 9px; }

.r25r23-couch-button {
  appearance: none;
  min-width: 130px;
  min-height: 48px;
  padding: 9px 16px;
  border: 1px solid rgba(105, 222, 252, .5);
  border-radius: 11px;
  background: rgba(11, 29, 51, .95);
  color: #f5fcff;
  font: 900 12px/1.15 system-ui, sans-serif;
  letter-spacing: .065em;
  text-transform: uppercase;
  cursor: pointer;
}

.r25r23-couch-button[data-primary="true"] {
  border-color: rgba(93, 231, 255, .78);
  background: linear-gradient(135deg, #087fa9, #075b8b);
  box-shadow: 0 7px 22px rgba(0, 134, 187, .24);
}

.r25r23-couch-button:hover:not(:disabled),
.r25r23-couch-button:focus-visible:not(:disabled) {
  border-color: #8cecff;
  filter: brightness(1.12);
  outline: none;
}

.r25r23-couch-button:disabled {
  cursor: not-allowed;
  opacity: .42;
  filter: saturate(.5);
}

.r25r23-couch-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 820px) {
  .r25r23-couch-window { max-height: calc(100dvh - 10px); border-radius: 14px; }
  .r25r23-couch-slots { grid-template-columns: 1fr; }
  .r25r23-couch-slot { grid-template-columns: 132px minmax(0, 1fr); }
  .r25r23-couch-qr-shell { width: 132px; padding: 7px; }
  .r25r23-couch-intro { grid-template-columns: 1fr; gap: 8px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  #r25r23CouchHub { padding: 5px; }
  .r25r23-couch-window { width: min(1080px, 100%); max-height: calc(100dvh - 10px); border-radius: 12px; }
  .r25r23-couch-header { min-height: 56px; padding: 9px 14px; }
  .r25r23-couch-title { font-size: 21px; }
  .r25r23-couch-close { width: 42px; height: 42px; flex-basis: 42px; }
  .r25r23-couch-content { padding: 9px 12px; }
  .r25r23-couch-intro { margin-bottom: 9px; padding: 8px 11px; }
  .r25r23-couch-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .r25r23-couch-slot { grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 12px; }
  .r25r23-couch-qr-shell { width: 120px; padding: 6px; border-radius: 9px; }
  .r25r23-couch-player-label { margin-bottom: 6px; font-size: 17px; }
  .r25r23-couch-status { min-height: 34px; margin-bottom: 4px; font-size: 14px; }
  .r25r23-couch-help { font-size: 11px; line-height: 1.3; }
  .r25r23-couch-metrics { margin-top: 7px; }
  .r25r23-couch-footer { min-height: 58px; padding: 7px 14px; }
  .r25r23-couch-button { min-height: 44px; }
}

@media (max-width: 560px) {
  .r25r23-couch-slot { grid-template-columns: 100px minmax(0, 1fr); }
  .r25r23-couch-qr-shell { width: 100px; }
  .r25r23-couch-footer { align-items: stretch; flex-direction: column; }
  .r25r23-couch-actions { width: 100%; }
  .r25r23-couch-button { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .r25r23-couch-tab,
  .r25r23-couch-button { transition: none !important; }
  .r25r23-couch-tab:active { transform: none; }
}