:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #050711;
  color: #f7f8ff;
}

:root.playback-visible,
body.playback-visible {
  background: transparent;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { width: 100%; min-height: 100%; margin: 0; }

body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(1, 2, 10, .05), rgba(1, 2, 10, .20)),
    url("./orion-cast-logo.png") center center / cover no-repeat,
    url("./orion-cast-background.jpg") center center / cover no-repeat,
    #050711;
}

button, input { font: inherit; }

button {
  border: 0;
  border-radius: 12px;
  padding: 14px 24px;
  color: white;
  background: #5267ff;
  font-weight: 700;
  cursor: pointer;
}

button:focus, input:focus { outline: 4px solid rgba(112, 222, 255, .75); outline-offset: 3px; }
button:disabled { opacity: .4; cursor: default; }
button.secondary { background: rgba(255,255,255,.12); }

.shell { min-height: 100vh; display: grid; place-items: center; padding: 6vw; }

.panel {
  width: 90vw;
  max-width: 760px;
  padding: 64px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background: rgba(10, 14, 30, .82);
  box-shadow: 0 32px 100px rgba(0,0,0,.45);
}

.panel.receiver-linked {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(1, 2, 10, .03), rgba(1, 2, 10, .18)),
    url("./orion-cast-logo.png") center center / cover no-repeat,
    url("./orion-cast-background.jpg") center center / cover no-repeat #02030a;
  box-shadow: none;
}

.receiver-linked .welcome-content {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  width: 82vw;
  max-width: 760px;
  padding: 22px 32px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  background: rgba(2, 3, 10, .78);
  box-shadow: 0 16px 50px rgba(0,0,0,.42);
  transform: translateX(-50%);
}

.receiver-linked .brand-mark,
.receiver-linked .eyebrow,
.receiver-linked .pairing {
  display: none;
}

.receiver-linked h1 {
  margin: 0 0 6px;
  font-size: 30px;
}

.receiver-linked .subtitle {
  margin: 0;
  font-size: 18px;
}

.receiver-linked .connection-status {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0 0;
  color: #f7f8ff;
}

.receiver-linked .connection-status::before {
  width: 18px;
  height: 18px;
  content: "";
  border: 3px solid rgba(255,255,255,.28);
  border-top-color: #70deff;
  border-radius: 50%;
  animation: loading-spin .9s linear infinite;
  margin-right: 12px;
}

.receiver-linked.receiver-online .connection-status::before {
  width: 12px;
  height: 12px;
  border: 0;
  background: #39e6a4;
  box-shadow: 0 0 18px rgba(57,230,164,.8);
  animation: none;
}

.brand-mark {
  width: 88px;
  height: 88px;
  margin: 0 auto 24px;
  display: block;
  object-fit: contain;
  border-radius: 28px;
  box-shadow: 0 15px 45px rgba(82, 103, 255, .36);
}

.eyebrow { color: #8fa0ff; letter-spacing: .2em; font-size: 14px; font-weight: 800; }
h1 { margin: 12px 0; font-size: 56px; line-height: 1.05; }
h2 { margin: 8px 0 28px; font-size: 42px; }
.subtitle { color: #aeb5cc; font-size: 22px; }

.pairing {
  margin: 38px auto 28px;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  color: #aeb5cc;
}

.pairing strong { color: white; font-size: 34px; letter-spacing: .16em; }
.connection-status { color: #70deff; font-size: 18px; }
.startup-retry {
  margin-top: 18px;
  min-width: 190px;
}
.startup-retry[hidden] { display: none; }
.receiver-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.receiver-actions > * + * { margin-left: 12px; }

.receiver-linked .receiver-actions button {
  min-width: 210px;
  padding: 12px 18px;
}
.dev-tools { margin-top: 18px; }

.player-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: #000;
}
.player-panel.playback-visible { background: transparent; }
.player-panel video,
.player-panel .native-player {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player-panel .native-player {
  z-index: 0;
  display: block;
  background: transparent;
}

.player-panel video { z-index: 1; }

.playback-diagnostic {
  position: absolute;
  top: 2vh;
  left: 2vw;
  z-index: 20;
  margin: 0;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .72);
  color: #70deff;
  font: 700 18px/1.2 monospace;
}

.playback-diagnostic[hidden] { display: none; }

.loading-splash {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(1, 2, 10, .03), rgba(1, 2, 10, .18)),
    url("./orion-cast-logo.png") center center / cover no-repeat,
    url("./orion-cast-background.jpg") center center / cover no-repeat #02030a;
}

.loading-splash[hidden] { display: none; }

.loading-message {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  display: flex;
  align-items: center;
  padding: 14px 24px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(2, 3, 10, .78);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.loading-message p { margin: 0; color: #f7f8ff; font-size: 20px; font-weight: 700; }

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,.28);
  border-top-color: #70deff;
  border-radius: 50%;
  animation: loading-spin .9s linear infinite;
  margin-right: 16px;
}

@keyframes loading-spin { to { transform: rotate(360deg); } }

.player-overlay {
  position: absolute;
  left: 5vw;
  right: 5vw;
  bottom: 5vw;
  padding: 32px;
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(5,7,17,.96), rgba(5,7,17,.72));
}

.player-panel.playback-visible .player-overlay {
  display: none;
}

.diagnostics-enabled .player-panel.playback-visible .player-overlay {
  display: block;
}

.media-artwork {
  float: right;
  width: 28vw;
  max-width: 360px;
  max-height: 203px;
  margin-left: 28px;
  border-radius: 14px;
  object-fit: cover;
}

.media-subtitle { margin-top: -18px; color: #aeb5cc; font-size: 18px; }

.player-overlay label { display: block; margin-bottom: 10px; color: #c5cade; }
.url-row { display: flex; }
.url-row > * + * { margin-left: 12px; }
.url-row input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 14px 18px;
  color: white;
  background: rgba(255,255,255,.08);
}
.controls { display: flex; margin-top: 18px; }
.controls > * + * { margin-left: 12px; }
.diagnostic-tests { display: flex; justify-content: center; margin-top: 18px; }
.diagnostic-tests > * + * { margin-left: 12px; }
.diagnostic-tests[hidden] { display: none; }
#status { margin-bottom: 0; color: #aeb5cc; }

.fullscreen-prompt {
  position: fixed;
  left: 50%;
  bottom: 6vh;
  z-index: 40;
  width: min(760px, 88vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border: 1px solid rgba(112, 222, 255, .4);
  border-radius: 20px;
  background: rgba(5, 7, 17, .94);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .6), 0 0 40px rgba(82, 103, 255, .18);
  transform: translateX(-50%);
}

.fullscreen-prompt div { display: grid; gap: 6px; }
.fullscreen-prompt > button { margin-left: 12px; }
.fullscreen-prompt strong { font-size: 22px; }
.fullscreen-prompt span { color: #aeb5cc; }
.fullscreen-prompt button { min-width: 190px; }

.setup-guide {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 5vw;
  background: rgba(1, 2, 10, .88);
}

.setup-guide-card {
  width: min(760px, 92vw);
  max-height: 88vh;
  overflow: auto;
  padding: 38px;
  border: 1px solid rgba(112, 222, 255, .28);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(15, 21, 45, .98), rgba(6, 9, 22, .98));
  box-shadow: 0 28px 100px rgba(0, 0, 0, .65), 0 0 55px rgba(82, 103, 255, .16);
}

.setup-guide-card h2 { margin-bottom: 14px; }
.setup-guide-card > p:not(.eyebrow) { color: #c5cade; font-size: 19px; line-height: 1.55; }
.setup-guide-card ol { margin: 24px 0; padding-left: 26px; color: #e7eaff; font-size: 18px; line-height: 1.7; }
.setup-guide-status { min-height: 26px; color: #70deff !important; font-weight: 700; }
.setup-guide-actions { display: flex; flex-wrap: wrap; margin-top: 24px; }
.setup-guide-actions > * + * { margin-left: 12px; }

@media (max-width: 700px) {
  .panel { padding: 32px 20px; }
  .pairing, .url-row { flex-direction: column; }
  .receiver-actions, .fullscreen-prompt { flex-direction: column; }
  .receiver-actions button, .fullscreen-prompt button { width: 100%; }
  .receiver-actions > * + *, .fullscreen-prompt > button, .setup-guide-actions > * + * { margin-left: 0; margin-top: 12px; }
  .url-row > * + * { margin-left: 0; margin-top: 12px; }
  .url-row button { width: 100%; }
  .setup-guide-card { padding: 26px 20px; }
  .setup-guide-actions button { width: 100%; }
}

@media (max-width: 1280px) {
  .panel { padding: 42px; }
  .brand-mark { width: 72px; height: 72px; }
  h1 { font-size: 44px; }
  h2 { font-size: 34px; }
  .subtitle { font-size: 19px; }
}

@media (max-width: 700px) {
  .panel { padding: 32px 20px; }
}