@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 100 900;
}

:root {
  color-scheme: dark;
  --potok-font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", sans-serif;
  --potok-display-font: var(--potok-font-family);
  --potok-ui-font: var(--potok-font-family);
  --potok-bg: #09090f;
  --potok-surface: #0f0f1c;
  --potok-surface-2: #141424;
  --potok-text: #eeeeff;
  --potok-text-strong: #ffffff;
  --potok-muted: #7a78a8;
  --potok-muted-strong: #a7a5cf;
  --potok-panel: rgba(15, 15, 28, 0.74);
  --potok-panel-strong: rgba(20, 20, 36, 0.88);
  --potok-border: rgba(255, 255, 255, 0.11);
  --potok-border-soft: rgba(255, 255, 255, 0.06);
  --potok-cyan: #5ce0c8;
  --potok-purple: #7b70f0;
  --potok-purple-soft: #a89eff;
  --potok-green: #5ce0c8;
  --potok-cache: #5ce0c8;
  --potok-warning: #f0a440;
  --potok-error: #f05a5a;
  --player-padding-x: clamp(1.5rem, 3vw, 3rem);
  --player-padding-y: clamp(1.5rem, 3vw, 2.5rem);
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 56% 44% at 50% 46%, rgba(92, 224, 200, 0.045), transparent 70%),
    radial-gradient(ellipse 42% 34% at 58% 56%, rgba(123, 112, 240, 0.04), transparent 72%),
    var(--potok-bg);
  color: var(--potok-text);
  font-family: var(--potok-ui-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.asset-defs {
  position: absolute;
}

.hidden {
  display: none !important;
}

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

@keyframes ambient-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(var(--ambient-scale, 1));
  }

  50% {
    transform: translate3d(var(--ambient-move-x, 0), var(--ambient-move-y, 0), 0) scale(var(--ambient-scale-peak, 1.08));
  }
}

@keyframes ambient-breathe {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(var(--ambient-scale, 1));
    opacity: var(--ambient-opacity-soft, 0.66);
  }

  50% {
    transform: translate3d(var(--ambient-breathe-x, 0), var(--ambient-breathe-y, 0), 0) scale(var(--ambient-scale-peak, 1.08));
    opacity: var(--ambient-opacity, 0.72);
  }
}

@keyframes status-pulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.76;
  }

  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes halo-breathe {
  0%,
  100% {
    transform: scale(calc(var(--toggle-halo-scale, 1) * 0.96));
  }

  50% {
    transform: scale(calc(var(--toggle-halo-scale, 1) * 1.04));
  }
}

.player-screen {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  --ambient-opacity: 0.72;
  --ambient-opacity-soft: 0.38;
  --ambient-scale: 1;
  --ambient-scale-peak: 1.08;
  --ambient-blur: 94px;
  --stage-glow-opacity: 0.18;
  --stage-glow-scale: 1;
  --stage-glow-blur: 62px;
  --stage-glow-start: rgba(92, 224, 200, 0.11);
  --stage-glow-middle: rgba(123, 112, 240, 0.08);
  --stage-glow-end: rgba(92, 224, 200, 0.025);
  --player-stage-motion-scale: 1;
  --player-stage-motion-opacity: 0;
  --player-stage-motion-x: 0px;
  --player-stage-motion-y: 0px;
}

.player-screen[data-shell-appearance="playing"] {
  --ambient-opacity: 0.48;
  --ambient-opacity-soft: 0.34;
  --ambient-scale: 1.04;
  --ambient-scale-peak: 1.14;
  --ambient-blur: 102px;
  --stage-glow-opacity: 0.26;
  --stage-glow-scale: 1.08;
  --stage-glow-blur: 70px;
}

.player-screen[data-shell-appearance="idle"] {
  --ambient-opacity: 0.3;
  --ambient-opacity-soft: 0.24;
  --ambient-scale: 0.98;
  --ambient-scale-peak: 1.03;
  --ambient-blur: 74px;
  --stage-glow-opacity: 0.16;
  --stage-glow-scale: 0.96;
  --stage-glow-blur: 48px;
}

.player-screen[data-shell-appearance="loading"] {
  --ambient-opacity: 0.36;
  --ambient-opacity-soft: 0.28;
  --ambient-scale: 1.01;
  --ambient-scale-peak: 1.09;
  --ambient-blur: 82px;
  --stage-glow-opacity: 0.22;
  --stage-glow-scale: 1.04;
  --stage-glow-blur: 58px;
}

.player-screen[data-shell-appearance="error"] {
  --ambient-opacity: 0.38;
  --ambient-opacity-soft: 0.32;
  --ambient-scale: 0.96;
  --ambient-scale-peak: 1.01;
  --ambient-blur: 72px;
  --stage-glow-opacity: 0.2;
  --stage-glow-scale: 0.92;
  --stage-glow-blur: 44px;
  --stage-glow-start: rgba(240, 90, 90, 0.12);
  --stage-glow-middle: rgba(123, 112, 240, 0.08);
  --stage-glow-end: rgba(92, 224, 200, 0.025);
}

.player-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 4, 10, 0.46) 0%, rgba(4, 4, 10, 0.1) 22%, rgba(4, 4, 10, 0.3) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 0 18rem, rgba(0, 0, 0, 0.32) 36rem, rgba(0, 0, 0, 0.56) 100%);
  pointer-events: none;
  z-index: -2;
}

.player-screen::after {
  content: "";
  position: absolute;
  inset: -25%;
  opacity: 0.42;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.62), transparent 78%);
}

.ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(var(--ambient-blur));
  pointer-events: none;
  opacity: var(--ambient-opacity);
  animation: ambient-drift var(--ambient-duration, 26s) ease-in-out infinite;
  transition: opacity 360ms ease, filter 360ms ease, background 360ms ease;
}

.player-screen[data-shell-appearance="loading"] .ambient {
  animation-name: ambient-breathe;
}

.ambient-left {
  left: -9rem;
  top: 14%;
  width: 18rem;
  height: 18rem;
  background: rgba(123, 112, 240, 0.075);
  --ambient-duration: 24s;
  --ambient-move-x: 1.3rem;
  --ambient-move-y: -0.9rem;
  --ambient-breathe-x: 0.6rem;
  --ambient-breathe-y: -0.45rem;
}

.ambient-top {
  top: -8rem;
  left: calc(50% - 10rem);
  width: 20rem;
  height: 20rem;
  background: rgba(92, 224, 200, 0.065);
  --ambient-duration: 28s;
  --ambient-move-x: -0.6rem;
  --ambient-move-y: 1.1rem;
  --ambient-breathe-x: -0.3rem;
  --ambient-breathe-y: 0.5rem;
}

.ambient-right {
  right: -7rem;
  top: 20%;
  width: 16rem;
  height: 16rem;
  background: rgba(92, 224, 200, 0.06);
  --ambient-duration: 22s;
  --ambient-move-x: -1rem;
  --ambient-move-y: 1rem;
  --ambient-breathe-x: -0.45rem;
  --ambient-breathe-y: 0.45rem;
}

.ambient-bottom {
  left: 14%;
  bottom: -7rem;
  width: 18rem;
  height: 18rem;
  background: rgba(123, 112, 240, 0.07);
  --ambient-duration: 30s;
  --ambient-move-x: 0.9rem;
  --ambient-move-y: -1.1rem;
  --ambient-breathe-x: 0.42rem;
  --ambient-breathe-y: -0.5rem;
}

.player-screen[data-shell-appearance="error"] .ambient-left,
.player-screen[data-shell-appearance="error"] .ambient-bottom {
  background: rgba(171, 100, 255, 0.09);
}

.player-screen[data-shell-appearance="error"] .ambient-right {
  background: rgba(92, 224, 200, 0.05);
}

.player-surface {
  min-height: 100vh;
  padding: var(--player-padding-y) var(--player-padding-x);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1rem, 1.8vh, 1.35rem);
}

.player-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.25rem;
}

.player-meta {
  display: grid;
  gap: clamp(0.64rem, 1.2vw, 0.92rem);
  max-width: min(54rem, 68vw);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: fit-content;
}

.brand-lockup__mark-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(2.35rem, 3.2vw, 2.75rem);
  aspect-ratio: 1 / 1;
  border-radius: 0.72rem;
  background: var(--potok-surface-2);
  border: 1px solid var(--potok-border);
  box-shadow:
    inset 0 0 0 1px rgba(123, 112, 240, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.24);
}

.brand-lockup__mark-shell::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 40%);
  pointer-events: none;
}

.brand-lockup__mark {
  position: relative;
  width: 68%;
  height: 68%;
  filter: none;
}

.brand-lockup__wordmark {
  font-family: var(--potok-display-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--potok-muted);
}

.brand-lockup__accent {
  color: var(--potok-cyan);
}

.status-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
  padding: 0.5rem 0.72rem;
  border-radius: 999px;
  background: var(--potok-panel);
  backdrop-filter: blur(14px);
  border: 1px solid var(--potok-border-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 14px 34px rgba(0, 0, 0, 0.2);
}

.status-pill::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 44%);
  opacity: 0.55;
  pointer-events: none;
}

.status-pill__dot {
  position: relative;
  z-index: 1;
  width: 0.82rem;
  height: 0.82rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  animation: status-pulse 3s ease-in-out infinite;
}

.status-pill[data-tone="online"] {
  color: var(--potok-green);
}

.status-pill[data-tone="loading"] {
  color: var(--potok-cyan);
}

.status-pill[data-tone="cache"] {
  color: var(--potok-cache);
}

.status-pill[data-tone="idle"] {
  color: rgba(197, 205, 246, 0.76);
}

.status-pill[data-tone="warning"] {
  color: var(--potok-warning);
}

.status-pill[data-tone="error"] {
  color: var(--potok-error);
}

.status-pill[data-tone="idle"] .status-pill__dot {
  animation-duration: 4.8s;
}

.status-pill[data-tone="error"] .status-pill__dot {
  animation-duration: 5.2s;
}

.status-pill__label {
  position: relative;
  z-index: 1;
  color: var(--potok-text);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.player-location {
  max-width: min(52rem, 100%);
}

.player-location__name {
  margin: 0;
  font-family: var(--potok-display-font);
  font-size: clamp(1.85rem, 3vw, 2.9rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--potok-text-strong);
}

.player-location__address {
  margin: 0.5rem 0 0;
  max-width: min(36rem, 100%);
  color: var(--potok-muted);
  font-size: clamp(0.88rem, 1.15vw, 1rem);
  line-height: 1.42;
  font-weight: 450;
  letter-spacing: 0.01em;
}

.player-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(0.5rem, 2vh, 1.6rem) 0;
}

.player-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(18rem, 34vw, 30rem);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  transform:
    translate(
      calc(-50% + var(--player-stage-motion-x)),
      calc(-50% + var(--player-stage-motion-y))
    )
    scale(calc(var(--stage-glow-scale) * var(--player-stage-motion-scale)));
  background: radial-gradient(
    circle,
    var(--stage-glow-start) 0%,
    var(--stage-glow-middle) 42%,
    var(--stage-glow-end) 63%,
    transparent 75%
  );
  opacity: calc(var(--stage-glow-opacity) * (1 + (var(--player-stage-motion-opacity) * 0.28)));
  filter: blur(calc(var(--stage-glow-blur) + (var(--player-stage-motion-opacity) * 16px)));
  pointer-events: none;
  transition: opacity 380ms ease, transform 420ms ease, filter 420ms ease, background 420ms ease;
}

.player-stage[data-layout="stacked"] {
  flex-direction: column;
  gap: 1.45rem;
}

.player-stage[data-layout="stacked"] .player-toggle {
  order: 1;
}

.player-stage[data-layout="stacked"] .state-panel {
  order: 2;
}

.player-stage[data-layout="stacked"] .state-panel[data-mode="retry"] .state-panel__icon {
  display: none;
}

.player-stage[data-mode="retryable"] .player-toggle {
  position: relative;
  z-index: 2;
}

.player-stage[data-mode="retryable"] .state-panel {
  pointer-events: none;
}

.player-toggle {
  --toggle-hover-y: 0rem;
  --toggle-hover-scale: 1;
  --toggle-press-y: 0rem;
  --toggle-press-scale: 1;
  --toggle-motion-energy: 0;
  --toggle-motion-beat: 0;
  --toggle-motion-field: 0;
  --toggle-motion-shell-scale: 1;
  --toggle-motion-core-scale: 1;
  --toggle-motion-ring-scale: 1;
  --toggle-motion-tilt: 0deg;
  --toggle-motion-x: 0px;
  --toggle-motion-y: 0px;
  --toggle-halo-scale: 1;
  position: relative;
  width: clamp(12.5rem, 23vw, 16.6rem);
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transform:
    translate3d(
      var(--toggle-motion-x),
      calc(var(--toggle-hover-y) + var(--toggle-press-y) + var(--toggle-motion-y)),
      0
    )
    rotate(var(--toggle-motion-tilt))
    scale(calc(var(--toggle-hover-scale) * var(--toggle-press-scale) * var(--toggle-motion-shell-scale)));
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.28, 1), filter 220ms ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  filter: saturate(calc(1 + (var(--toggle-motion-energy) * 0.14)));
}

.player-toggle:hover:not(:disabled) {
  --toggle-hover-y: -0.16rem;
  --toggle-hover-scale: 1.024;
}

.player-toggle:active:not(:disabled) {
  --toggle-press-y: 0.08rem;
  --toggle-press-scale: 0.985;
}

.player-toggle:focus-visible {
  outline: none;
}

.player-toggle:focus-visible .player-toggle__plate::before {
  box-shadow:
    0 0 0 0.28rem rgba(92, 224, 200, 0.16),
    0 0 0 0.52rem rgba(92, 224, 200, 0.06);
}

.player-toggle:disabled {
  cursor: default;
}

.player-toggle__halo {
  position: absolute;
  inset: -16%;
  border-radius: 999px;
  opacity: calc(0.24 + (var(--toggle-motion-field) * 0.18));
  filter: blur(calc(34px + (var(--toggle-motion-energy) * 8px)));
  animation: halo-breathe 7.4s ease-in-out infinite;
  transition: opacity 220ms ease, filter 260ms ease;
}

.player-toggle__halo--left {
  background: radial-gradient(circle at 34% 50%, rgba(123, 112, 240, 0.32), transparent 64%);
}

.player-toggle__halo--right {
  background: radial-gradient(circle at 68% 50%, rgba(92, 224, 200, 0.28), transparent 62%);
  animation-delay: 0.45s;
}

.player-toggle__plate,
.player-toggle__core {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.player-toggle__field,
.player-toggle__ring {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.player-toggle__field {
  inset: -20%;
  background:
    radial-gradient(circle at 50% 50%, rgba(92, 224, 200, 0.08) 0%, rgba(123, 112, 240, 0.08) 42%, transparent 72%);
  opacity: calc(0.08 + (var(--toggle-motion-field) * 0.18));
  filter: blur(calc(30px + (var(--toggle-motion-field) * 16px)));
  transform:
    translate3d(var(--toggle-motion-x), var(--toggle-motion-y), 0)
    scale(calc(0.92 + (var(--toggle-motion-field) * 0.14)));
  transition: opacity 260ms ease, filter 260ms ease, background 260ms ease, transform 260ms ease;
}

.player-toggle__ring {
  inset: -8%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: calc(0.14 + (var(--toggle-motion-energy) * 0.1) + (var(--toggle-motion-beat) * 0.08));
  transform: scale(calc(var(--toggle-motion-ring-scale) * var(--toggle-ring-base-scale, 1)));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 0 calc(10px + (var(--toggle-motion-energy) * 12px)) rgba(92, 224, 200, 0.08);
  transition: opacity 220ms ease, transform 220ms ease, border-color 220ms ease, box-shadow 260ms ease;
}

.player-toggle__ring--outer {
  --toggle-ring-base-scale: 1.018;
  border-color: rgba(92, 224, 200, 0.16);
}

.player-toggle__ring--inner {
  inset: -2%;
  --toggle-ring-base-scale: 0.984;
  border-color: rgba(255, 255, 255, 0.12);
  opacity: calc(0.12 + (var(--toggle-motion-energy) * 0.1) + (var(--toggle-motion-beat) * 0.08));
}

.player-toggle__plate::before {
  content: "";
  position: absolute;
  inset: -0.28rem;
  border-radius: inherit;
  padding: 0.18rem;
  background: conic-gradient(
    from 208deg,
    rgba(92, 224, 200, 0.86),
    rgba(123, 112, 240, 0.72),
    rgba(92, 224, 200, 0.62),
    rgba(123, 112, 240, 0.78)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  box-shadow:
    0 0 calc(16px + (var(--toggle-motion-energy) * 10px)) rgba(92, 224, 200, calc(0.1 + (var(--toggle-motion-beat) * 0.05)));
  transition: box-shadow 220ms ease, background 260ms ease;
}

.player-toggle__plate::after {
  content: "";
  position: absolute;
  inset: 0.42rem;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.62;
}

.player-toggle__core {
  inset: 0.34rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  transform: translateY(0) scale(var(--toggle-motion-core-scale));
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.12), transparent 36%),
    radial-gradient(circle at 52% 64%, rgba(92, 224, 200, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(22, 22, 40, 0.99), rgba(12, 12, 24, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1rem 1.5rem rgba(0, 0, 0, 0.18),
    0 28px 74px rgba(0, 0, 0, 0.28);
  transition: background 260ms ease, box-shadow 260ms ease, transform 220ms ease;
}

.player-toggle__core::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.34) 24%, transparent 48%);
  opacity: 0.28;
}

.player-toggle__core::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.5;
}

.player-toggle__logo {
  position: relative;
  z-index: 1;
  width: 50%;
  height: 50%;
  transform: scale(calc(1 + (var(--toggle-motion-beat) * 0.06)));
  filter:
    drop-shadow(0 0 calc(7px + (var(--toggle-motion-energy) * 5px)) rgba(92, 224, 200, 0.18));
  transition: transform 220ms ease, filter 220ms ease;
}

.player-toggle:hover:not(:disabled) .player-toggle__core {
  transform: translateY(-0.08rem) scale(calc(var(--toggle-motion-core-scale) * 1.01));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1rem 1.5rem rgba(0, 0, 0, 0.16),
    0 28px 72px rgba(0, 0, 0, 0.24);
}

.player-toggle[data-state="paused"] .player-toggle__halo {
  opacity: 0.2;
  animation-duration: 9.5s;
}

.player-toggle[data-state="paused"] .player-toggle__field {
  opacity: 0.06;
  filter: blur(28px);
}

.player-toggle[data-state="paused"] .player-toggle__ring {
  opacity: 0.14;
}

.player-toggle[data-state="paused"] .player-toggle__core {
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.1), transparent 36%),
    radial-gradient(circle at 52% 64%, rgba(92, 224, 200, 0.045), transparent 55%),
    linear-gradient(180deg, rgba(22, 22, 40, 0.99), rgba(12, 12, 24, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1rem 1.35rem rgba(0, 0, 0, 0.18),
    0 22px 56px rgba(0, 0, 0, 0.2);
}

.player-toggle[data-state="playing"] .player-toggle__halo {
  opacity: 0.34;
  filter: blur(36px);
  animation-duration: 6s;
}

.player-toggle[data-state="playing"] .player-toggle__field {
  opacity: calc(0.11 + (var(--toggle-motion-field) * 0.22));
}

.player-toggle[data-state="playing"] .player-toggle__ring--outer {
  border-color: rgba(92, 224, 200, calc(0.22 + (var(--toggle-motion-beat) * 0.1)));
}

.player-toggle[data-state="playing"] .player-toggle__ring--inner {
  border-color: rgba(255, 255, 255, calc(0.12 + (var(--toggle-motion-energy) * 0.08)));
}

.player-toggle[data-state="playing"] .player-toggle__core {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1rem 1.55rem rgba(0, 0, 0, 0.16),
    0 0 30px rgba(92, 224, 200, 0.07),
    0 32px 84px rgba(0, 0, 0, 0.3);
}

.player-toggle[data-state="busy"] .player-toggle__halo {
  opacity: 0.24;
  animation-duration: 6.6s;
}

.player-toggle[data-state="busy"] .player-toggle__field,
.player-toggle[data-state="busy"] .player-toggle__ring {
  opacity: 0.16;
}

.player-toggle[data-state="busy"] .player-toggle__plate::before {
  background: conic-gradient(
    from 205deg,
    rgba(92, 224, 200, 0.88),
    rgba(123, 112, 240, 0.78),
    rgba(92, 224, 200, 0.72),
    rgba(123, 112, 240, 0.84)
  );
}

.player-toggle[data-state="busy"] .player-toggle__core {
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.12), transparent 36%),
    radial-gradient(circle at 52% 64%, rgba(92, 224, 200, 0.055), transparent 55%),
    linear-gradient(180deg, rgba(22, 22, 40, 0.99), rgba(12, 12, 24, 0.98));
}

.player-screen[data-shell-appearance="error"] .player-toggle__halo {
  opacity: 0.3;
}

.player-screen[data-shell-appearance="error"] .player-toggle__field,
.player-screen[data-shell-appearance="error"] .player-toggle__ring {
  opacity: 0.08;
}

.state-panel {
  width: min(28rem, 100%);
  padding: clamp(1.15rem, 1.8vw, 1.45rem);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.85rem;
  border-radius: 1rem;
  background: var(--potok-panel);
  border: 1px solid var(--potok-border-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 20px 60px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
}

.state-panel__icon {
  width: clamp(4.5rem, 9vw, 5.75rem);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--potok-surface-2);
  border: 1px solid var(--potok-border);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.025),
    0 16px 34px rgba(0, 0, 0, 0.18);
}

.state-panel[data-tone="loading"] .state-panel__icon {
  background: rgba(92, 224, 200, 0.07);
  border-color: rgba(92, 224, 200, 0.22);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.03),
    0 0 24px rgba(92, 224, 200, 0.08);
}

.state-panel[data-tone="warning"] .state-panel__icon {
  background: rgba(246, 194, 106, 0.08);
  border-color: rgba(246, 194, 106, 0.22);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.03),
    0 0 32px rgba(246, 194, 106, 0.14);
}

.state-panel[data-tone="error"] .state-panel__icon {
  background: rgba(255, 135, 154, 0.09);
  border-color: rgba(255, 135, 154, 0.22);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.03),
    0 0 32px rgba(255, 135, 154, 0.12);
}

.state-panel__logo {
  width: 44%;
  height: 44%;
}

.state-panel__title {
  margin: 0;
  max-width: 26rem;
  font-family: var(--potok-display-font);
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0;
}

.state-panel__message {
  margin: 0;
  max-width: 24rem;
  color: var(--potok-muted);
  font-size: clamp(0.88rem, 1.2vw, 0.98rem);
  line-height: 1.5;
}

.player-reactions {
  display: flex;
  justify-content: center;
  gap: clamp(0.9rem, 2vw, 1.25rem);
  padding-bottom: clamp(1rem, 2vw, 1.6rem);
}

.reaction-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: clamp(9.2rem, 16vw, 11.4rem);
  min-height: clamp(5.7rem, 9vw, 7rem);
  border-radius: 1.2rem;
  border: 1px solid var(--potok-border);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.055), transparent 46%),
    var(--potok-panel);
  color: var(--potok-muted-strong);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.68rem;
  padding: 0.92rem 1.1rem 1rem;
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 34px rgba(0, 0, 0, 0.16);
  transition:
    transform 180ms cubic-bezier(0.2, 0.9, 0.28, 1),
    color 180ms ease,
    opacity 180ms ease,
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.reaction-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.12), transparent 40%),
    linear-gradient(135deg, rgba(92, 224, 200, 0.14), rgba(123, 112, 240, 0.1));
  transition:
    opacity 220ms ease,
    width 100ms linear;
}

.reaction-button:hover:not(:disabled) {
  transform: translateY(-0.12rem);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.07), transparent 48%),
    var(--potok-panel-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 34px rgba(3, 5, 14, 0.16);
}

.reaction-button:active:not(:disabled) {
  transform: translateY(0.04rem) scale(0.985);
}

.reaction-button:disabled {
  cursor: wait;
}

.reaction-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0.2rem rgba(92, 224, 200, 0.16),
    0 0 0 0.42rem rgba(92, 224, 200, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 28px rgba(3, 5, 14, 0.12);
}

.reaction-button[aria-pressed="false"] {
  opacity: 0.82;
}

.reaction-button[aria-pressed="true"] {
  opacity: 1;
  color: var(--potok-text);
  border-color: rgba(123, 112, 240, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(92, 224, 200, 0.09), transparent 46%),
    rgba(123, 112, 240, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 38px rgba(0, 0, 0, 0.18);
}

.reaction-button:disabled[aria-pressed="false"] {
  opacity: 0.52;
}

.reaction-button[data-pending="true"] {
  opacity: 1;
  border-color: rgba(92, 224, 200, 0.32);
  box-shadow:
    0 0 0 0.18rem rgba(92, 224, 200, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 16px 34px rgba(3, 5, 14, 0.16);
}

.reaction-button[data-feedback-state="thanks"] {
  opacity: 1;
  color: var(--potok-text);
  border-color: rgba(92, 224, 200, 0.34);
  animation: reaction-thanks-pulse 1700ms ease-out both;
}

.reaction-button[data-feedback-state="thanks"]::before {
  opacity: 1;
}

.reaction-button--muted {
  color: rgba(206, 215, 243, 0.72);
}

.reaction-button--muted[aria-pressed="true"] {
  color: rgba(227, 237, 255, 0.94);
  border-color: rgba(167, 165, 207, 0.3);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.065), transparent 46%),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 38px rgba(0, 0, 0, 0.18);
}

.reaction-button--muted[data-feedback-state="undo"] {
  min-width: clamp(12.5rem, 22vw, 15.5rem);
  opacity: 1;
  color: rgba(235, 242, 255, 0.96);
  border-color: rgba(92, 224, 200, 0.3);
  background: rgba(92, 224, 200, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 38px rgba(6, 11, 28, 0.22),
    0 0 18px rgba(92, 224, 200, 0.06);
}

.reaction-button--muted[data-feedback-state="undo"]::before {
  inset: 0 auto 0 0;
  width: var(--reaction-progress, 100%);
  opacity: 1;
  background: linear-gradient(90deg, rgba(92, 224, 200, 0.18), rgba(123, 112, 240, 0.1));
}

.reaction-button--muted[data-feedback-state="cancelled"] {
  opacity: 1;
  color: rgba(227, 237, 255, 0.9);
  border-color: rgba(188, 208, 255, 0.24);
}

.reaction-button--muted[data-feedback-state="failed"] {
  opacity: 1;
  color: rgba(255, 219, 219, 0.92);
  border-color: rgba(255, 135, 135, 0.28);
  background: rgba(240, 90, 90, 0.1);
}

.reaction-button__icon {
  width: clamp(2.2rem, 3.4vw, 2.9rem);
  height: clamp(2.2rem, 3.4vw, 2.9rem);
  transition: transform 180ms ease, filter 180ms ease;
  position: relative;
  z-index: 1;
}

.reaction-button:hover:not(:disabled) .reaction-button__icon,
.reaction-button[aria-pressed="true"] .reaction-button__icon {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px currentColor);
}

.reaction-button__label {
  position: relative;
  z-index: 1;
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: 0;
  text-align: center;
}

@keyframes reaction-thanks-pulse {
  0% {
    transform: translateY(0) scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 12px 28px rgba(3, 5, 14, 0.12);
  }

  18% {
    transform: translateY(-0.08rem) scale(1.03);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 18px 38px rgba(18, 11, 37, 0.22),
      0 0 26px rgba(215, 137, 255, 0.16);
  }

  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 12px 28px rgba(3, 5, 14, 0.12);
  }
}

@media (max-width: 980px) {
  body {
    overflow-y: auto;
  }

  .player-surface {
    gap: 1.45rem;
  }

  .player-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .status-pill {
    justify-self: start;
  }

  .player-meta {
    max-width: 100%;
  }

  .player-location__name {
    font-size: clamp(2.4rem, 7vw, 3.7rem);
  }

  .player-stage {
    min-height: min(50vh, 29rem);
  }
}

@media (max-width: 640px) {
  .player-surface {
    padding: 1.2rem 1.1rem 1.6rem;
  }

  .brand-lockup {
    gap: 0.7rem;
  }

  .brand-lockup__mark-shell {
    width: 3rem;
    border-radius: 1rem;
  }

  .brand-lockup__wordmark {
    font-size: 0.82rem;
    letter-spacing: 0.23em;
  }

  .player-location__name {
    font-size: clamp(2.1rem, 8vw, 3rem);
  }

  .player-location__address {
    margin-top: 0.58rem;
    font-size: 1rem;
  }

  .player-stage {
    min-height: 18rem;
  }

  .player-toggle__field {
    inset: -18%;
  }

  .player-stage[data-layout="stacked"] {
    gap: 1.2rem;
  }

  .status-pill {
    padding: 0.76rem 1rem;
  }

  .player-reactions {
    width: 100%;
  }

  .reaction-button {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient,
  .status-pill__dot,
  .player-toggle__halo,
  .reaction-button[data-feedback-state="thanks"] {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }

  .player-stage::before,
  .player-toggle,
  .player-toggle__field,
  .player-toggle__ring,
  .player-toggle__core,
  .player-toggle__logo,
  .reaction-button,
  .reaction-button::before,
  .reaction-button__icon {
    transition-duration: 0ms;
  }
}

/* Active paired player polish: late overrides for the runtime-bound selectors. */
body {
  background:
    radial-gradient(ellipse 58% 44% at 50% 46%, rgba(92, 224, 200, 0.04), transparent 70%),
    radial-gradient(ellipse 42% 34% at 58% 56%, rgba(123, 112, 240, 0.035), transparent 72%),
    #09090f;
}

.player-screen {
  --ambient-opacity: 0.22;
  --ambient-opacity-soft: 0.18;
  --ambient-blur: 108px;
  --stage-glow-opacity: 0.14;
  --stage-glow-blur: 76px;
  --stage-glow-start: rgba(92, 224, 200, 0.09);
  --stage-glow-middle: rgba(123, 112, 240, 0.065);
  --stage-glow-end: rgba(92, 224, 200, 0.02);
}

.player-screen[data-shell-appearance="playing"] {
  --ambient-opacity: 0.32;
  --ambient-opacity-soft: 0.24;
  --stage-glow-opacity: 0.22;
  --stage-glow-scale: 1.08;
}

.player-screen::before {
  background:
    linear-gradient(180deg, rgba(4, 4, 10, 0.5) 0%, rgba(4, 4, 10, 0.08) 24%, rgba(4, 4, 10, 0.32) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 0 18rem, rgba(0, 0, 0, 0.3) 37rem, rgba(0, 0, 0, 0.58) 100%);
}

.player-screen::after {
  opacity: 0.36;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.58), transparent 78%);
  mix-blend-mode: normal;
}

.ambient-left {
  background: rgba(123, 112, 240, 0.055);
}

.ambient-top,
.ambient-right {
  background: rgba(92, 224, 200, 0.045);
}

.ambient-bottom {
  background: rgba(123, 112, 240, 0.05);
}

.player-surface {
  gap: clamp(0.9rem, 1.7vh, 1.25rem);
  padding: clamp(1.35rem, 2.4vw, 2.25rem) clamp(1.35rem, 3vw, 2.6rem);
}

.player-meta {
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
  max-width: min(48rem, 70vw);
}

.brand-lockup {
  gap: 0;
}

.brand-lockup__mark-shell {
  width: clamp(2.55rem, 3.5vw, 3rem);
  border-radius: 0.86rem;
  background: #141424;
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 0 0 0 1px rgba(123, 112, 240, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.24);
}

.brand-lockup__mark {
  filter: none;
}

.brand-lockup__wordmark {
  color: #7a78a8;
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 700;
  letter-spacing: 0.18em;
}

.brand-lockup__accent {
  color: #5ce0c8;
}

.status-pill {
  gap: 0.52rem;
  padding: 0.5rem 0.74rem;
  background: rgba(15, 15, 28, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 14px 34px rgba(0, 0, 0, 0.2);
}

.status-pill__dot {
  width: 0.62rem;
  height: 0.62rem;
  box-shadow: 0 0 12px currentColor;
}

.status-pill[data-tone="online"] {
  color: #5ce0c8;
}

.status-pill__label {
  color: #eeeeff;
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.player-location__name {
  max-width: min(44rem, 72vw);
  font-size: clamp(3rem, 4.35vw, 3.5rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0;
}

.player-location__address {
  margin-top: 0.48rem;
  color: #7a78a8;
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  line-height: 1.4;
}

.player-stage::before {
  width: clamp(17rem, 31vw, 28rem);
}

#player-toggle.player-toggle {
  width: clamp(12.4rem, 23vw, 17rem);
}

.player-toggle__halo {
  inset: -14%;
  opacity: calc(0.2 + (var(--toggle-motion-field) * 0.14));
  filter: blur(calc(36px + (var(--toggle-motion-energy) * 8px)));
}

.player-toggle[data-state="playing"] .player-toggle__halo {
  opacity: 0.28;
  filter: blur(38px);
}

.player-toggle__halo--left {
  background: radial-gradient(circle at 34% 50%, rgba(123, 112, 240, 0.28), transparent 64%);
}

.player-toggle__halo--right {
  background: radial-gradient(circle at 68% 50%, rgba(92, 224, 200, 0.24), transparent 62%);
}

.player-toggle__field {
  inset: -18%;
  background:
    radial-gradient(circle at 50% 50%, rgba(92, 224, 200, 0.065) 0%, rgba(123, 112, 240, 0.06) 42%, transparent 72%);
  opacity: calc(0.06 + (var(--toggle-motion-field) * 0.16));
  filter: blur(calc(32px + (var(--toggle-motion-field) * 14px)));
}

.player-toggle__ring {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.015),
    0 0 calc(10px + (var(--toggle-motion-energy) * 10px)) rgba(92, 224, 200, 0.06);
}

.player-toggle__plate::before {
  inset: -0.26rem;
  padding: 0.17rem;
  background: conic-gradient(
    from 208deg,
    rgba(92, 224, 200, 0.84),
    rgba(123, 112, 240, 0.68),
    rgba(92, 224, 200, 0.54),
    rgba(123, 112, 240, 0.74)
  );
  box-shadow: 0 0 16px rgba(92, 224, 200, 0.1);
}

.player-toggle__core {
  inset: 0.34rem;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.13), transparent 36%),
    radial-gradient(circle at 52% 64%, rgba(92, 224, 200, 0.065), transparent 55%),
    linear-gradient(180deg, rgba(22, 22, 40, 0.99), rgba(12, 12, 24, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1rem 1.5rem rgba(0, 0, 0, 0.18),
    0 28px 74px rgba(0, 0, 0, 0.28);
}

.player-toggle[data-state="playing"] .player-toggle__core {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1rem 1.55rem rgba(0, 0, 0, 0.16),
    0 0 28px rgba(92, 224, 200, 0.06),
    0 32px 84px rgba(0, 0, 0, 0.3);
}

.player-toggle__core::before {
  opacity: 0.3;
}

.player-toggle__logo {
  filter: drop-shadow(0 0 calc(7px + (var(--toggle-motion-energy) * 5px)) rgba(92, 224, 200, 0.16));
}

.player-reactions {
  gap: clamp(0.9rem, 2vw, 1.25rem);
}

.reaction-button {
  min-width: clamp(9.2rem, 16vw, 11.4rem);
  min-height: clamp(5.7rem, 9vw, 7rem);
  border-radius: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.055), transparent 46%),
    rgba(15, 15, 28, 0.76);
  color: #a7a5cf;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 34px rgba(0, 0, 0, 0.16);
}

.reaction-button--muted {
  color: #9b99bf;
}

.reaction-button__icon {
  width: clamp(2.2rem, 3.4vw, 2.9rem);
  height: clamp(2.2rem, 3.4vw, 2.9rem);
}

.reaction-button__label {
  color: inherit;
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  font-weight: 650;
  letter-spacing: 0;
}

.reaction-button:hover:not(:disabled) {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.07), transparent 48%),
    rgba(20, 20, 36, 0.88);
}

@media (max-width: 980px) {
  .player-location__name {
    max-width: 100%;
    font-size: clamp(2.45rem, 6.2vw, 3.25rem);
  }
}

@media (max-width: 640px) {
  .brand-lockup__wordmark {
    font-size: 18px;
  }

  .player-location__name {
    font-size: clamp(2.1rem, 8vw, 2.85rem);
  }

  #player-toggle.player-toggle {
    width: clamp(11.5rem, 58vw, 15rem);
  }

  .reaction-button {
    min-height: 5.7rem;
  }
}

/* Reference player.html alignment: main kiosk screen only. */
:root {
  --potok-bg: #08080f;
  --potok-text: #eeeeff;
  --potok-text-strong: #eeeeff;
  --potok-muted: #8a88b8;
  --potok-muted-strong: #8a88b8;
  --potok-faint: #46446e;
  --potok-border: rgba(255, 255, 255, 0.07);
  --potok-border-strong: rgba(255, 255, 255, 0.12);
  --potok-grad: linear-gradient(135deg, #5ce0c8, #7b70f0);
  --player-padding-x: max(20px, env(safe-area-inset-left));
  --player-padding-y: max(20px, env(safe-area-inset-top));
}

html,
body {
  height: 100%;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(123, 112, 240, 0.1), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 60%, rgba(92, 224, 200, 0.06), transparent 72%),
    #08080f;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
}

.player-screen {
  min-height: 100dvh;
  background: transparent;
  --ambient-opacity: 0.45;
  --ambient-opacity-soft: 0.3;
  --ambient-blur: 70px;
  --stage-glow-opacity: 0;
  --stage-glow-scale: 1;
  --stage-glow-blur: 0px;
}

.player-screen[data-shell-appearance="playing"] {
  --ambient-opacity: 0.45;
  --ambient-opacity-soft: 0.32;
  --stage-glow-opacity: 0;
}

.player-screen[data-shell-appearance="idle"],
.player-screen[data-shell-appearance="loading"],
.player-screen[data-shell-appearance="error"] {
  --stage-glow-opacity: 0;
}

.player-screen::before {
  z-index: -4;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45)),
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(123, 112, 240, 0.1), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 60%, rgba(92, 224, 200, 0.06), transparent 72%),
    #08080f;
}

.player-screen::after {
  inset: 0;
  z-index: -3;
  opacity: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 48%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 48%, #000, transparent 75%);
}

.ambient {
  z-index: -2;
  filter: blur(70px);
  opacity: var(--ambient-opacity);
}

.ambient-left {
  top: 8%;
  left: 18%;
  width: 46vmin;
  height: 46vmin;
  background: radial-gradient(circle, rgba(92, 224, 200, 0.5), transparent 68%);
  --ambient-duration: 19s;
  --ambient-move-x: 4vw;
  --ambient-move-y: -3vh;
}

.ambient-right {
  top: auto;
  right: 14%;
  bottom: 4%;
  width: 52vmin;
  height: 52vmin;
  background: radial-gradient(circle, rgba(123, 112, 240, 0.5), transparent 68%);
  --ambient-duration: 23s;
  --ambient-move-x: -5vw;
  --ambient-move-y: 3vh;
}

.ambient-top {
  top: 46%;
  left: 60%;
  width: 30vmin;
  height: 30vmin;
  background: radial-gradient(circle, rgba(155, 139, 240, 0.35), transparent 70%);
  --ambient-duration: 27s;
  --ambient-move-x: -4vw;
  --ambient-move-y: 3vh;
}

.ambient-bottom {
  display: none;
}

.player-surface {
  min-height: 100dvh;
  padding:
    max(20px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  gap: 0;
  grid-template-rows: auto 1fr auto;
}

.player-header {
  gap: 16px;
}

.player-meta {
  gap: 0;
  max-width: min(46rem, 72vw);
}

.brand-lockup__wordmark {
  color: #eeeeff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.brand-lockup__accent {
  color: #5ce0c8;
}

.player-location {
  margin-top: 28px;
}

.player-location__name {
  max-width: min(44rem, 72vw);
  color: #eeeeff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}

.player-location__address {
  margin-top: 8px;
  color: #46446e;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.status-pill {
  gap: 7px;
  padding: 7px 14px;
  border-radius: 100px;
  background: rgba(92, 224, 200, 0.08);
  border: 1px solid rgba(92, 224, 200, 0.22);
  color: #5ce0c8;
  box-shadow: none;
  backdrop-filter: none;
}

.status-pill::before {
  display: none;
}

.status-pill__dot {
  width: 8px;
  height: 8px;
  color: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: status-pulse 2s ease-in-out infinite;
}

.status-pill__label {
  color: currentColor;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0;
}

.status-pill[data-tone="online"],
.status-pill[data-tone="loading"],
.status-pill[data-tone="cache"] {
  background: rgba(92, 224, 200, 0.08);
  border-color: rgba(92, 224, 200, 0.22);
  color: #5ce0c8;
}

.status-pill[data-tone="idle"] {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #8a88b8;
}

.status-pill[data-tone="warning"] {
  background: rgba(240, 164, 64, 0.08);
  border-color: rgba(240, 164, 64, 0.22);
  color: #f0a440;
}

.status-pill[data-tone="error"] {
  background: rgba(240, 90, 90, 0.08);
  border-color: rgba(240, 90, 90, 0.24);
  color: #f05a5a;
}

.status-pill[data-tone="idle"] .status-pill__dot,
.status-pill[data-tone="warning"] .status-pill__dot,
.status-pill[data-tone="error"] .status-pill__dot {
  animation: none;
  box-shadow: none;
}

.player-stage {
  z-index: 1;
  flex-direction: column;
  gap: 44px;
  padding: 0;
}

.player-stage::before {
  width: min(150vmin, 1400px);
  background:
    radial-gradient(circle, transparent 0, transparent calc(20% - 1px), rgba(255, 255, 255, 0.035) 20%, transparent calc(20% + 1px)),
    radial-gradient(circle, transparent 0, transparent calc(33% - 1px), rgba(255, 255, 255, 0.028) 33%, transparent calc(33% + 1px)),
    radial-gradient(circle, transparent 0, transparent calc(47% - 1px), rgba(255, 255, 255, 0.02) 47%, transparent calc(47% + 1px));
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(circle, #000, transparent 70%);
  mask-image: radial-gradient(circle, #000, transparent 70%);
}

.player-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(66vmin, 560px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(92, 224, 200, 0.08) 0%, rgba(123, 112, 240, 0.07) 42%, transparent 74%);
  filter: blur(44px);
  pointer-events: none;
}

#player-toggle.player-toggle {
  width: clamp(200px, 42vmin, 360px);
  max-width: calc(100vw - 40px);
}

.player-toggle {
  border: 0;
  background: transparent;
  filter: none;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1);
}

.player-toggle:hover:not(:disabled) {
  --toggle-hover-y: 0rem;
  --toggle-hover-scale: 1.03;
}

.player-toggle:active:not(:disabled) {
  --toggle-press-y: 0rem;
  --toggle-press-scale: 0.97;
}

.player-toggle__wave {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(92, 224, 200, 0.35);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.player-toggle__wave--two {
  animation-delay: 1.13s;
}

.player-toggle__wave--three {
  animation-delay: 2.26s;
}

.player-toggle[data-state="playing"] .player-toggle__wave {
  animation: player-wave 3.4s ease-out infinite;
}

.player-toggle__field {
  display: none;
}

.player-toggle__ring {
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 1;
  box-shadow: none;
  transform: none;
}

.player-toggle__ring--inner {
  display: none;
}

.player-toggle__halo {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(92, 224, 200, 0) 30%,
    #5ce0c8 50%,
    #7b70f0 70%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  opacity: 0.55;
  filter: none;
  pointer-events: none;
  animation: none;
}

.player-toggle[data-state="playing"] .player-toggle__halo {
  animation: player-spin 6s linear infinite;
}

.player-toggle__plate {
  display: none;
}

.player-toggle__core {
  inset: 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(circle at 38% 30%, #20203a, #0c0c18 78%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: none;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease, border-color 0.18s ease;
}

.player-toggle__core::before {
  top: 8%;
  left: 14%;
  right: 14%;
  bottom: auto;
  height: 34%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.07), transparent);
  opacity: 1;
}

.player-toggle__core::after {
  display: none;
}

.player-toggle:hover:not(:disabled) .player-toggle__core {
  box-shadow:
    0 28px 68px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: none;
}

.player-toggle:focus-visible .player-toggle__core {
  outline: 2px solid rgba(92, 224, 200, 0.42);
  outline-offset: 8px;
}

.player-toggle__play-icon {
  position: relative;
  z-index: 1;
  width: clamp(48px, 12vmin, 96px);
  height: clamp(48px, 12vmin, 96px);
  filter: drop-shadow(0 0 10px rgba(92, 224, 200, 0.18));
}

.player-toggle__pause-icon {
  position: relative;
  z-index: 1;
  display: none;
  align-items: flex-end;
  gap: clamp(5px, 1.3vmin, 9px);
  height: clamp(40px, 9vmin, 74px);
}

.player-toggle__pause-icon span {
  width: clamp(6px, 1.5vmin, 11px);
  height: 30%;
  border-radius: 6px;
  background: var(--potok-grad);
}

.player-toggle[data-state="playing"] .player-toggle__play-icon {
  display: none;
}

.player-toggle[data-state="playing"] .player-toggle__pause-icon {
  display: flex;
}

.player-toggle[data-state="playing"] .player-toggle__pause-icon span {
  animation: player-eqbar 0.8s ease-in-out infinite alternate;
  animation-delay: var(--bar-delay);
}

.player-toggle__logo {
  display: none;
}

.reaction-button {
  min-height: 64px;
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.07);
  background: #0f0f1c;
  color: #8a88b8;
  font-family: inherit;
  gap: 6px;
  padding: 12px;
}

.reaction-button__icon {
  width: 26px;
  height: 26px;
}

.reaction-button__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.state-panel {
  width: min(31rem, 100%);
  padding: clamp(1.25rem, 2vw, 1.65rem);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(92, 224, 200, 0.075), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    rgba(15, 15, 28, 0.88);
  border-color: rgba(255, 255, 255, 0.085);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 26px 78px rgba(0, 0, 0, 0.34);
}

.state-panel__icon {
  position: relative;
  isolation: isolate;
  width: clamp(5.4rem, 11vw, 6.8rem);
  background:
    radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.12), transparent 36%),
    radial-gradient(circle at 52% 64%, rgba(92, 224, 200, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(22, 22, 40, 0.99), rgba(12, 12, 24, 0.98));
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.46),
    0 0 38px rgba(92, 224, 200, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -0.8rem 1.4rem rgba(0, 0, 0, 0.22);
  animation: state-orb-breathe 4.8s ease-in-out infinite;
}

.state-panel__icon::before,
.state-panel__icon::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.state-panel__icon::before {
  inset: -10px;
  z-index: -2;
  border: 1px solid rgba(92, 224, 200, 0.15);
  background:
    radial-gradient(circle, rgba(92, 224, 200, 0.08), transparent 64%);
  opacity: 0.8;
}

.state-panel__icon::after {
  inset: 7%;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 44%);
  filter: blur(0.2px);
}

.state-panel[data-tone="loading"] .state-panel__icon::before,
.state-panel[data-tone="online"] .state-panel__icon::before {
  border-color: rgba(92, 224, 200, 0.18);
}

.state-panel[data-tone="warning"] .state-panel__icon::before,
.state-panel[data-tone="cache"] .state-panel__icon::before {
  border-color: rgba(240, 164, 64, 0.18);
  background: radial-gradient(circle, rgba(240, 164, 64, 0.08), transparent 64%);
}

.state-panel[data-tone="error"] .state-panel__icon::before {
  border-color: rgba(240, 90, 90, 0.16);
  background: radial-gradient(circle, rgba(240, 90, 90, 0.075), transparent 64%);
}

.state-panel__logo {
  width: 48%;
  height: 48%;
  filter: drop-shadow(0 0 12px rgba(92, 224, 200, 0.18));
}

.player-stage[data-layout="stacked"] .state-panel[data-mode="retry"] .state-panel__icon {
  display: grid;
}

.state-panel__title {
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  font-weight: 650;
}

.state-panel__message {
  color: #8a88b8;
  font-size: 14px;
}

.status-pill[data-tone="online"] {
  background: rgba(92, 224, 200, 0.08);
  border-color: rgba(92, 224, 200, 0.22);
  color: #5ce0c8;
}

.status-pill[data-tone="loading"] {
  background: rgba(123, 112, 240, 0.1);
  border-color: rgba(123, 112, 240, 0.24);
  color: #a89eff;
}

.status-pill[data-tone="cache"] {
  background: rgba(240, 164, 64, 0.1);
  border-color: rgba(240, 164, 64, 0.26);
  color: #f0a440;
}

.status-pill[data-tone="idle"] {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #8a88b8;
}

.status-pill[data-tone="warning"] {
  background: rgba(240, 164, 64, 0.08);
  border-color: rgba(240, 164, 64, 0.22);
  color: #f0a440;
}

.status-pill[data-tone="error"] {
  background: rgba(240, 90, 90, 0.08);
  border-color: rgba(240, 90, 90, 0.24);
  color: #f05a5a;
}

.status-pill[data-tone="cache"] .status-pill__dot,
.status-pill[data-tone="idle"] .status-pill__dot,
.status-pill[data-tone="warning"] .status-pill__dot,
.status-pill[data-tone="error"] .status-pill__dot {
  animation: none;
  box-shadow: none;
}

.player-header {
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
}

.player-meta,
.player-location {
  min-width: 0;
  max-width: none;
}

.player-location__name,
.player-location__address {
  max-width: min(44rem, 100%);
  overflow-wrap: anywhere;
}

.status-pill {
  flex: 0 0 auto;
  justify-self: end;
  align-self: start;
  white-space: nowrap;
}

.connect-page {
  min-height: 100vh;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 42%, rgba(92, 224, 200, 0.06), transparent 34rem),
    radial-gradient(circle at 72% 72%, rgba(123, 112, 240, 0.05), transparent 28rem),
    #08080f;
  color: #eeeeff;
  font-family: var(--potok-ui-font);
}

.connect-page .connect-card {
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    rgba(15, 15, 28, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.44);
}

.connect-page main {
  min-height: 100dvh;
}

.connect-page .connect-card > div:first-child {
  background: rgba(255, 255, 255, 0.012);
}

.connect-page .potok-brand {
  font-family: var(--potok-display-font);
  color: #8a88b8;
  letter-spacing: 0.14em;
}

.connect-page .potok-brand-accent {
  color: #5ce0c8;
}

.connect-page .device-tile,
.connect-page #session-view > div,
.connect-page .border-t > div {
  background: rgba(20, 20, 36, 0.82);
  border-color: rgba(255, 255, 255, 0.08);
}

.connect-page .device-tile {
  border-radius: 999px;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.connect-page .status-banner {
  background: rgba(20, 20, 36, 0.84);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.connect-page .status-banner-info {
  border-color: rgba(123, 112, 240, 0.24);
}

.connect-page .status-banner-success {
  border-color: rgba(92, 224, 200, 0.28);
}

.connect-page .status-banner-warning {
  border-color: rgba(240, 164, 64, 0.3);
}

.connect-page .status-banner-error {
  border-color: rgba(240, 90, 90, 0.34);
}

.connect-page .code-slot {
  background: rgba(20, 20, 36, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #eeeeff;
}

.connect-page .code-slot.is-placeholder {
  color: rgba(138, 136, 184, 0.58);
}

.connect-page .connect-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(92, 224, 200, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 50% 0%, rgba(92, 224, 200, 0.12), transparent 48%),
    linear-gradient(180deg, rgba(24, 24, 44, 0.98), rgba(13, 13, 27, 0.98));
  color: #eeeeff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(92, 224, 200, 0.1),
    0 14px 32px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(92, 224, 200, 0.07);
  opacity: 1;
  transform: translateY(0);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease,
    background 0.16s ease,
    opacity 0.16s ease;
}

.connect-page .connect-primary::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(92, 224, 200, 0.24), rgba(123, 112, 240, 0.1));
  opacity: 0.16;
  pointer-events: none;
}

.connect-page .connect-primary:hover:not(:disabled) {
  border-color: rgba(92, 224, 200, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 50% 0%, rgba(92, 224, 200, 0.15), transparent 50%),
    linear-gradient(180deg, rgba(27, 27, 49, 0.99), rgba(14, 14, 29, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(92, 224, 200, 0.13),
    0 16px 36px rgba(0, 0, 0, 0.3),
    0 0 28px rgba(92, 224, 200, 0.1);
}

.connect-page .connect-primary:focus-visible {
  outline: 2px solid rgba(92, 224, 200, 0.42);
  outline-offset: 3px;
}

.connect-page .connect-primary:active:not(:disabled) {
  transform: translateY(1px);
  border-color: rgba(92, 224, 200, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    inset 0 10px 24px rgba(0, 0, 0, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.24),
    0 0 16px rgba(92, 224, 200, 0.06);
}

.connect-page .connect-primary:disabled {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    rgba(20, 20, 36, 0.62);
  color: rgba(238, 238, 255, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 22px rgba(0, 0, 0, 0.16);
  opacity: 1;
}

.connect-page #session-pill {
  border-color: rgba(92, 224, 200, 0.28);
  background: rgba(92, 224, 200, 0.1);
  color: #5ce0c8;
}

@keyframes player-wave {
  0% {
    transform: scale(0.72);
    opacity: 0.5;
    border-color: rgba(92, 224, 200, 0.4);
  }

  100% {
    transform: scale(1.18);
    opacity: 0;
    border-color: rgba(123, 112, 240, 0.1);
  }
}

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

@keyframes player-eqbar {
  from {
    height: 16%;
  }

  to {
    height: 100%;
  }
}

@keyframes state-orb-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 18px 48px rgba(0, 0, 0, 0.46),
      0 0 38px rgba(92, 224, 200, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -0.8rem 1.4rem rgba(0, 0, 0, 0.22);
  }

  50% {
    transform: translateY(-2px) scale(1.018);
    box-shadow:
      0 20px 54px rgba(0, 0, 0, 0.48),
      0 0 46px rgba(92, 224, 200, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -0.8rem 1.4rem rgba(0, 0, 0, 0.22);
  }
}

@media (max-width: 980px) {
  body {
    overflow-y: auto;
  }

  .player-header {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0.9rem;
  }

  .player-meta {
    max-width: 100%;
  }

  .status-pill {
    justify-self: end;
  }

  .player-location {
    margin-top: 22px;
  }

  .player-location__name {
    max-width: 100%;
    font-size: 36px;
  }
}

@media (max-width: 640px) {
  .player-surface {
    padding:
      max(20px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  .brand-lockup__wordmark {
    font-size: 18px;
  }

  .player-location {
    margin-top: 16px;
  }

  .player-location__name {
    font-size: 28px;
  }

  .player-location__address {
    font-size: 12px;
  }

  .status-pill {
    padding: 6px 10px;
    gap: 6px;
  }

  .status-pill__label {
    font-size: 12px;
  }

  .player-stage {
    gap: 28px;
    min-height: 20rem;
  }

  #player-toggle.player-toggle {
    width: min(78vmin, 300px);
  }

  .player-reactions {
    width: 100%;
    gap: 10px;
    padding-bottom: 0;
  }

  .reaction-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 64px;
  }
}

@media (max-width: 430px) {
  .player-header {
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: start;
    gap: 0.75rem;
  }

  .status-pill {
    z-index: 2;
    justify-self: end;
    align-self: start;
    margin-top: 0;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .player-surface {
    gap: 8px;
  }

  .player-location {
    margin-top: 12px;
  }

  .player-location__name {
    font-size: 28px;
  }

  .player-location__address {
    margin-top: 5px;
    font-size: 11px;
  }

  .player-stage {
    min-height: 0;
  }

  #player-toggle.player-toggle {
    width: min(48vmin, 260px);
  }

  .reaction-button {
    min-height: 56px;
  }

  .state-panel {
    width: min(27rem, 100%);
    padding: 1rem;
    gap: 0.65rem;
  }

  .state-panel__icon {
    width: 4.6rem;
  }
}

@media (min-height: 900px) and (min-width: 760px) {
  .player-stage {
    gap: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-toggle__wave,
  .player-toggle__halo,
  .state-panel__icon,
  .player-toggle__pause-icon span {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}