/* Room player - [healthbeat_player type="room"]. Everything else (Tailwind,
   fonts, .glass, .glass-dark, .grad-border, .gold-text, .orb, .float, .bg-night)
   comes from the theme head. Scoped to .hbr so the generic names below
   cannot touch the rest of the site. */

/* The server prints every state's sessions and backgrounds; the groups of the
   other states carry the hidden attribute. Tailwind's preflight loses to its
   own display classes (flex, grid, contents), so hidden wins here. */
.hbr [hidden] { display: none !important; }

/* Room stage: the screen (the video, the top buttons and Play) and the panel
   (the controls and the mixer) are two children of #hbr-stage. */
.hbr .stage { position: relative; }
.hbr .hbr-screen { position: relative; overflow: hidden; }
.hbr .hbr-panel { position: relative; }
.hbr .scrim { background: linear-gradient(180deg, rgba(14,12,44,0.55) 0%, rgba(14,12,44,0) 18%, rgba(14,12,44,0) 50%, rgba(14,12,44,0.78) 100%); }
@media (min-width: 1024px) {
  /* Desktop and landscape tablets: the stage is 16:9, the screen fills it, the panel lies over the video at the bottom. */
  .hbr .stage { aspect-ratio: 16 / 9; }
  .hbr .hbr-screen { position: absolute; inset: 0; }
  .hbr .hbr-panel { position: absolute; left: 0; right: 0; bottom: 0; }
  /* The mixer opens with the page here; "Effects" (M) closes it. */
  .hbr .stage.fx-closed .hbr-mixer { display: none; }
  .hbr .stage:not(.fx-closed) #hbr-fx-toggle { background: rgba(255, 255, 255, 0.2); }
}
@media (max-width: 1023.98px) {
  /* Phones and portrait tablets, "like YouTube": the whole video on top, 16:9
     across the width, the panel under it. The ratio is fixed up front, so the
     screen does not move when the video loads, the background changes or the
     mixer opens. A phone held sideways gets a screen no taller than the window
     (dark bands at the sides, the video whole). */
  .hbr .hbr-screen { width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 6rem); max-height: calc(100svh - 6rem); }
  /* The mixer starts folded here; "Effects" (M) opens it. */
  .hbr .stage:not(.fx-open) .hbr-mixer { display: none; }
  .hbr .stage.fx-open #hbr-fx-toggle { background: rgba(255, 255, 255, 0.2); }
  /* Nothing lies over the bottom of the screen: only the top buttons need the shade. */
  .hbr .scrim { background: linear-gradient(180deg, rgba(14,12,44,0.55) 0%, rgba(14,12,44,0) 22%); }
}
/* Full screen: the screen fills it, the panel lies over the bottom and scrolls
   when it does not fit (a phone held upright, the mixer open); the top buttons stay free. */
.hbr .stage:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
.hbr .stage:-webkit-full-screen { aspect-ratio: auto; width: 100vw; height: 100vh; border-radius: 0; }
/* iPhone Safari has no element full screen: the stage covers the window instead. */
.hbr .stage.pseudo-fs { position: fixed; inset: 0; z-index: 9999; aspect-ratio: auto; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
.hbr .stage:fullscreen .hbr-screen { position: absolute; inset: 0; width: auto; aspect-ratio: auto; max-height: none; }
.hbr .stage:-webkit-full-screen .hbr-screen { position: absolute; inset: 0; width: auto; aspect-ratio: auto; max-height: none; }
.hbr .stage.pseudo-fs .hbr-screen { position: absolute; inset: 0; width: auto; aspect-ratio: auto; max-height: none; }
.hbr .stage:fullscreen .hbr-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 3.75rem); overflow-y: auto; }
.hbr .stage:-webkit-full-screen .hbr-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 3.75rem); overflow-y: auto; }
.hbr .stage.pseudo-fs .hbr-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100% - 3.75rem); overflow-y: auto; }
.hbr .stage:fullscreen .scrim { background: linear-gradient(180deg, rgba(14,12,44,0.55) 0%, rgba(14,12,44,0) 18%, rgba(14,12,44,0) 50%, rgba(14,12,44,0.78) 100%); }
.hbr .stage:-webkit-full-screen .scrim { background: linear-gradient(180deg, rgba(14,12,44,0.55) 0%, rgba(14,12,44,0) 18%, rgba(14,12,44,0) 50%, rgba(14,12,44,0.78) 100%); }
.hbr .stage.pseudo-fs .scrim { background: linear-gradient(180deg, rgba(14,12,44,0.55) 0%, rgba(14,12,44,0) 18%, rgba(14,12,44,0) 50%, rgba(14,12,44,0.78) 100%); }
html.hbr-noscroll, html.hbr-noscroll body { overflow: hidden; }
/* The glow behind the stage reaches past the page edge on phones: clip it sideways only
   (clip keeps the vertical glow; Safari before 16 knows only hidden). */
.hbr #player { overflow-x: hidden; overflow-x: clip; }
/* The scene inside a narrower column (the account's tab, V2.7) is not at the page edge: its clip would cut the frame's shadow there
   (it showed as a pale box with the glow). No glow is printed there (the template), so nothing reaches past a phone's edge. */
.hbr #player.hbr-bare { overflow-x: visible; }
.hbr .bg-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hbr .bg-layer.on { opacity: 1; }
/* A video is shown whole (an own portrait clip gets dark bands), except in full
   screen held sideways, where it fills the screen. */
.hbr video.bg-layer { object-fit: contain; }
@media (orientation: landscape) {
  .hbr .stage:fullscreen video.bg-layer { object-fit: cover; }
  .hbr .stage:-webkit-full-screen video.bg-layer { object-fit: cover; }
  .hbr .stage.pseudo-fs video.bg-layer { object-fit: cover; }
}
.hbr .hide-on-idle { transition: opacity .6s ease; }
.hbr .stage.idle .hide-on-idle { opacity: 0; pointer-events: none; }
.hbr .stage.idle { cursor: none; }

/* iPhone and iPad: the phone's buttons set the volume (audio.volume is
   ignored), so the slider is not shown; and the advice about Safari removing
   site data applies - unless the site opens from the Home Screen as an app
   (the display-mode, or html.hbr-standalone from the inline script). */
.hbr .hbr-ios { display: none; }
@supports (-webkit-touch-callout: none) {
  .hbr .hbr-ios { display: inline; }
  .hbr #hbr-volume { display: none; }
  .hbr #hbr-vol-wrap { width: auto; }
}
@media (display-mode: standalone) { .hbr .hbr-ios { display: none; } }
html.hbr-standalone .hbr .hbr-ios { display: none; }

/* Own files (V2.9, owner 2026-10-31): the count by each add button - a mark per place, the lit ones in the state's colour - and
   "2 of 10"; a full list's button is dimmed (a click says why). In the mixer's narrow line on a phone, the words only. */
.hbr .hbr-marks { display: inline-flex; gap: 3px; }
.hbr .hbr-marks i { display: block; width: 5px; height: 10px; border-radius: 2px; background: currentColor; opacity: .3; }
.hbr .hbr-marks i.on { background: var(--accent, #a892ff); opacity: 1; }
@media (max-width: 639.98px) { .hbr .hbr-mixer .hbr-marks { display: none; } }
.hbr [data-add][data-full] { opacity: .55; }
/* The tile that adds a video: a card beside a card; alone in its row (data-wide) it takes the row, its words in one line. */
.hbr .hbr-add-video { aspect-ratio: 16 / 9; flex-direction: column; gap: .375rem; padding: .5rem; text-align: center; }
.hbr .hbr-add-video[data-wide] { grid-column: 1 / -1; aspect-ratio: auto; flex-direction: row; flex-wrap: wrap; gap: .5rem 1rem; padding: 1.1rem 1rem; }

/* Ranges */
.hbr .range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 9999px; outline: none;
  background: linear-gradient(90deg, var(--accent, #a892ff) var(--fill, 50%), rgba(255,255,255,0.16) var(--fill, 50%)); }
.hbr .range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 9999px; background: #fff; box-shadow: 0 0 0 4px rgba(168,146,255,.25); cursor: pointer; }
.hbr .range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 9999px; background: #fff; cursor: pointer; }
.hbr .range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(168,146,255,.55); }

/* Progress */
.hbr .progress { position: relative; height: 6px; border-radius: 9999px; background: rgba(255,255,255,0.12); cursor: pointer; touch-action: none; }
.hbr .progress-fill { position: absolute; inset: 0 auto 0 0; border-radius: 9999px; background: linear-gradient(90deg,#a892ff,#6fa9ff,#ffb866); }
.hbr .progress-knob { position: absolute; top: 50%; width: 14px; height: 14px; margin-left: -7px; margin-top: -7px; border-radius: 9999px; background: #fff; box-shadow: 0 30px 80px -20px rgba(120,90,255,.45), 0 0 0 4px rgba(168,146,255,.25); }

/* Equalizer */
.hbr .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.hbr .eq i { display: block; width: 3px; border-radius: 2px; background: #c5b4ff; animation: hbr-eq 1s ease-in-out infinite; }
.hbr .eq i:nth-child(2) { animation-delay: -.35s; }
.hbr .eq i:nth-child(3) { animation-delay: -.7s; }
.hbr .eq.paused i { animation-play-state: paused; }
/* The bars are printed on every row and shown on the current one by the class: the rule above would beat Tailwind's .hidden. */
.hbr .eq.hidden { display: none; }
/* Labels with text the script shows by the class: without the script there is no Tailwind, and every tab would read "In the room". */
.hbr [data-in-room].hidden, .hbr [data-revert].hidden, .hbr #hbr-np-hint.hidden { display: none; }
@keyframes hbr-eq { 0%,100% { height: 4px } 50% { height: 14px } }

.hbr .nice-scroll::-webkit-scrollbar { width: 8px; }
.hbr .nice-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 9999px; }
.hbr .spin { animation: hbr-spin 1s linear infinite; }
@keyframes hbr-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .hbr .float, .hbr .float-slow, .hbr .eq i { animation: none; } }