:root {
  color-scheme: dark;
  --gold: #d7aa5a;
  --red: #b71717;
  --ink: #050505;
  --soft: #e9deca;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(215, 170, 90, 0.16), transparent 34%),
    radial-gradient(circle at 15% 45%, rgba(183, 23, 23, 0.18), transparent 22%),
    radial-gradient(circle at 85% 45%, rgba(183, 23, 23, 0.12), transparent 22%),
    linear-gradient(135deg, #090909, #15100c 48%, #030303);
  color: var(--soft);
  font-family: Arial, sans-serif;
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  padding: clamp(22px, 3vw, 50px);
}

.brand {
  text-align: center;
}

.mark {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border: 1px solid rgba(215, 170, 90, 0.68);
  border-radius: 50%;
  color: var(--gold);
  font-size: 32px;
  box-shadow: 0 0 32px rgba(183, 23, 23, 0.25);
}

.brand p {
  margin: 0;
  color: var(--red);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

h1 {
  margin: 8px 0 14px;
  color: #fff0c2;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 500;
  line-height: 0.95;
  text-shadow: 0 0 28px rgba(215, 170, 90, 0.18);
}

#status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 16px;
  border: 1px solid rgba(215, 170, 90, 0.45);
  border-radius: 999px;
  color: #d4c5ac;
  background: rgba(0, 0, 0, 0.42);
  font-weight: 800;
}

#status.live {
  color: white;
  border-color: rgba(183, 23, 23, 0.75);
  background: rgba(183, 23, 23, 0.34);
}

.player-card {
  position: relative;
  width: min(1500px, 100%);
  align-self: center;
  justify-self: center;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(215, 170, 90, 0.6);
  background: #000;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62), inset 0 0 46px rgba(215, 170, 90, 0.08);
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

.offline {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 48px;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(215, 170, 90, 0.12), transparent 38%),
    rgba(0, 0, 0, 0.82);
}

.offline[hidden],
.sound[hidden] {
  display: none !important;
}

.offline strong {
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4vw, 66px);
  font-weight: 500;
}

.offline p {
  max-width: 680px;
  margin: 0;
  color: #d7d0c5;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.35;
}

.sound {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  padding: 12px 18px;
  border: 1px solid rgba(215, 170, 90, 0.75);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff0c2;
  font: 800 16px Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(183, 23, 23, 0.28);
}

footer {
  text-align: center;
  color: rgba(215, 170, 90, 0.86);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}