/* GENERATED FILE - DO NOT EDIT.
   Source: public/css/  |  Builder: scripts/build-public-compat.cjs
   Chrome 72 fallbacks applied (inset, clamp, min, max, dvh). flex `gap`
   and `aspect-ratio` are NOT repairable by this transform; the layout
   degrades gracefully (items touch / auto height) and the limitation is
   stated in docs/COMPAT_CHROME72.md, not silently claimed. */
/* =============================================================================
   MixFun Hub - Home Signage styles (2026-08-16)
   =============================================================================
   Public Home page signage mode for homestay / café advertising.
   Loaded by index.html only. Works alongside styles.css; all signage rules
   are namespaced under .signage-root / body.signage-mode so the normal
   Movie / Music / Games experience is untouched when signage is off.

   Design goals (spec §4):
   - warm hospitality palette, readable typography, high contrast
   - portrait AND landscape layouts, safe-area insets for TV boxes
   - reduced-motion support
   - configurable overlay position / logo size via campaign CSS vars
   - kiosk mode (?kiosk=1 → .signage-kiosk) hides every affordance
   ============================================================================= */

/* ----- Design tokens (signage-local so they never fight styles.css) ----- */
.signage-root {
  --signage-bg: #101418;
  --signage-ink: #f7f4ee;
  --signage-ink-dim: rgba(247, 244, 238, 0.78);
  --signage-accent: #d9a441;        /* warm brass — hospitality accent */
  --signage-accent-ink: #17130b;
  --signage-warn: #f2c14e;
  --signage-error: #f28b82;
  --signage-ok: #9fd8a8;
  --signage-overlay-bg: rgba(12, 14, 16, 0.62);
  --signage-status-bg: rgba(12, 14, 16, 0.8);
  --signage-brand-size: 1.4rem;
  --signage-logo-size: 64px;
  --signage-overlay-duration: 12s;  /* matches overlay_duration_seconds set by JS */
  --signage-safe-x: env(safe-area-inset-left, 0px);
  --signage-safe-y: env(safe-area-inset-top, 0px);
}

@supports (width: clamp(64px, 12vw, 160px)) {
  .signage-root {
    --signage-brand-size: 1.4rem;
    --signage-brand-size: clamp(1.4rem, 3.2vw, 3rem);
    --signage-logo-size: 64px;
    --signage-logo-size: clamp(64px, 12vw, 160px);
  }
}

/* ----- Mount + mode ------------------------------------------------------ */

/* The mount is the presentation region. home-display.css positions it
   absolutely inside its grid cell, so the old 60vh content minimum is only a
   fallback for pages that mount it outside that grid — and it must never win
   there, because a fixed 60vh minimum overflows a short landscape panel. */
#signage-home-mount {
  position: relative;
  min-height: 60vh;
  min-height: 0;
  background: #000;
  color: var(--signage-ink);
  border-radius: 14px;
  overflow: hidden;
}

.signage-root {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 60vh;
  background: var(--signage-bg);
  isolation: isolate;
}

.signage-diag {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 100;
  padding: 8px;
  color: #fff;
  background: #111;
  font: 12px/1.4 monospace;
  white-space: normal;
  overflow-wrap: break-word;
  max-height: 40%;
  overflow-y: auto;
  pointer-events: none;
}

.signage-video {
  position: absolute;
  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  /* compat: replaced `inset: 0` (Chromium 87+) */
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* External provider stage (migration 023). Displayed only while a
   provider:// item owns the screen; an empty host must never cover the
   local video (a mounted player's visibility is toggled by the player
   via .signage-provider-visible). */
.signage-provider-host {
  position: absolute;
  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  /* compat: replaced `inset: 0` (Chromium 87+) */
  width: 100%;
  height: 100%;
  display: none;
  background: #000;
}

.signage-provider-host.signage-provider-visible {
  display: block;
}

.signage-provider-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Provider poster floor (2026-10-29).
   The stage must never be black: while a third-party embed loads, and if it
   never becomes ready, the provider's own poster carries the screen (a
   branded gradient when the provider published no poster address at all).
   This is the same rule reStaryHub applies to a hero slide whose embed does
   not play: the visual floor never depends on the third party.
   The element is toggled with the `hidden` attribute, so the display rule is
   written as :not([hidden]) - a class-level `display` would otherwise beat
   the user-agent [hidden] rule and leave the poster stuck on screen. */
.signage-provider-poster {
  position: absolute;
  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  /* compat: replaced `inset: 0` (Chromium 87+) */
  width: 100%;
  height: 100%;
  display: none;
  background: #000;
  overflow: hidden;
}

.signage-provider-poster:not([hidden]) {
  display: block;
}

.signage-provider-poster-media {
  position: absolute;
  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  /* compat: replaced `inset: 0` (Chromium 87+) */
}

.signage-provider-poster-gradient {
  position: absolute;
  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  /* compat: replaced `inset: 0` (Chromium 87+) */
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(79, 195, 247, 0.32), transparent 62%),
    linear-gradient(135deg, #16324a 0%, #101418 58%, #090b0d 100%);
}

.signage-provider-poster-image {
  position: absolute;
  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  /* compat: replaced `inset: 0` (Chromium 87+) */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signage-provider-caption {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  max-width: 82%;
  padding: 0.45rem 1rem;
  border-radius: 10px;
  background: var(--signage-overlay-bg);
  color: var(--signage-ink);
  font-size: 0.9rem;

  font-size: clamp(0.9rem, 1.8vw, 1.4rem);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signage-audio { display: none; }

/* Frozen frame held while a publication switch buffers (no second decoder).
   Static by design: no transition, no blur — a low-memory screen only paints
   a small canvas that CSS scales up to the presentation area. */
.signage-frame {
  position: absolute;
  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  /* compat: replaced `inset: 0` (Chromium 87+) */
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.signage-frame-visible {
  opacity: 1;
  visibility: visible;
}

/* ----- Brand overlay ------------------------------------------------------ */

.signage-brand {
  position: absolute;
  top: calc(18px + var(--signage-safe-y));
  left: calc(22px + var(--signage-safe-x));
  font-size: var(--signage-brand-size);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--signage-ink);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
  max-width: 70vw;

  max-width: min(70vw, 720px);
  line-height: 1.15;
  pointer-events: none;
  animation: signage-fade-in 900ms ease both;
}

/* ----- Hospitality info overlay (promo / contact / QR) -------------------- */

.signage-overlay-info {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.9rem 1.1rem;
  background: var(--signage-overlay-bg);
  /* Low-memory profile (approved 2026-10-27): no backdrop blur. The
     translucent background keeps the same read without the GPU cost. */
  border-radius: 12px;
  color: var(--signage-ink);
  max-width: 46vw;

  max-width: min(46vw, 420px);
  pointer-events: none;
  animation: signage-overlay-cycle var(--signage-overlay-duration) ease-in-out infinite alternate;
  font-size: 0.95rem;

  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
}
.signage-overlay-info[data-position="top-left"]     { top: calc(16px + var(--signage-safe-y)); left: calc(16px + var(--signage-safe-x)); }
.signage-overlay-info[data-position="top-right"]    { top: calc(16px + var(--signage-safe-y)); right: calc(16px + var(--signage-safe-x)); }
.signage-overlay-info[data-position="bottom-left"]  { bottom: calc(16px + var(--signage-safe-y)); left: calc(16px + var(--signage-safe-x)); }
.signage-overlay-info:not([data-position]),
.signage-overlay-info[data-position="bottom-right"] { bottom: calc(16px + var(--signage-safe-y)); right: calc(16px + var(--signage-safe-x)); }

.signage-promo {
  font-weight: 700;
  color: var(--signage-accent);
}
.signage-contact {
  color: var(--signage-ink-dim);
  white-space: pre-line;
}
.signage-qr {
  width: 84px;
  width: clamp(84px, 10vw, 132px);
  height: auto;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}

/* ----- Status line + start button ---------------------------------------- */

.signage-status {
  position: absolute;
  bottom: calc(10px + var(--signage-safe-y));
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--signage-status-bg);
  color: var(--signage-ink-dim);
  font-size: 0.75rem;

  font-size: clamp(0.75rem, 1.1vw, 0.95rem);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  max-width: 90%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.signage-status.signage-status-visible { opacity: 1; }
.signage-status[data-level="warn"]  { color: var(--signage-warn); }
.signage-status[data-level="error"] { color: var(--signage-error); }

.signage-start {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  min-width: 44px;
  min-height: 44px;               /* touch target accessibility floor */
  padding: 0.5rem 0.85rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--signage-accent-ink);
  background: var(--signage-accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: none;
}
.signage-start[hidden] { display: none; }
.signage-start:focus-visible {
  outline: 3px solid var(--signage-ink);
  outline-offset: 3px;
}

/* ----- body.signage-mode: presentation chrome ------------------------------
   Hide personal-application controls (mini player, playlist, admin link,
   user menu, debug UI, install/update prompts). The SLIM TOP NAVIGATION
   STAYS VISIBLE: the approved 2026-10-27 reference keeps HOME / GAMES /
   MUSIC / MOVIE / LIVE on the managed Home display, so nav-tabs are no
   longer hidden here. Normal tabs are untouched when the class is absent. */

body.signage-mode #mini-player,
body.signage-mode #mini-player-sheet,
body.signage-mode .btn-emu-control,
body.signage-mode #admin-panel-btn,
body.signage-mode #user-dropdown,
body.signage-mode .user-menu,
body.signage-mode .debug-panel,
body.signage-mode #pwa-update-toast {
  display: none !important;
}

/* Keep the brand row visible but muted so the property name reads clearly. */
body.signage-mode #main-nav .nav-brand { opacity: 0.9; }

/* In signage mode the home section itself becomes the presentation. The
   rail + media grid and the homestay strip are styled by home-display.css;
   the mount fills its grid cell, so the old full-height rules are gone. */
body.signage-mode #home-section .home-dashboard,
body.signage-mode #home-section .quick-tabs {
  display: none !important;
}

/* ----- Kiosk mode (?kiosk=1 / /display) -----------------------------------
   Personal controls stay gone; the slim navigation and the business rail
   remain, matching the approved reference. The display grid fills the
   viewport under the nav so a TV never shows dead space.               */

.signage-kiosk .signage-brand {
  top: calc(28px + var(--signage-safe-y));
  left: calc(34px + var(--signage-safe-x));
}
.signage-kiosk .signage-status { display: none; }
body.signage-mode.signage-kiosk #home-section {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
}
/* The Home grid already fills the measured viewport in home-display.css; this
   is the pre-measurement fallback only (dvh first, vh for older engines). */
body.signage-mode.signage-kiosk .home-display {
  min-height: calc(100vh - 190px);
  min-height: calc(100dvh - var(--home-nav-h, 76px) - var(--home-strip-h, 56px) - 24px);
}

/* ----- Lightweight branded waiting state (signage-bootstrap.js) -----------
   Shown while signage is disabled or nothing has been published yet, and as
   the safe fallback after a takedown. Deliberately static: no media, no
   backdrop-filter, no animation, no hidden player.

   2026-10-28: the waiting state must occupy EXACTLY the media region in every
   state (waiting / loading / reconnecting / paused / fault), so a guest never
   sees a small floating card where the player will be. The Home grid already
   sizes .home-main; these rules make the panel fill that box. */

#signage-home-mount.signage-mount-waiting {
  min-height: 0;
  display: flex;
}

.signage-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0.75rem;

  padding: clamp(0.75rem, 3vh, 1.75rem);
  border: 1px solid rgba(217, 164, 65, 0.35);
  border-left-width: 4px;
  border-radius: var(--biz-panel-radius, 12px);
  background: var(--signage-bg, #101418);
  color: var(--signage-ink, #f7f4ee);
  text-align: center;
  overflow: hidden;
}
.signage-waiting-brand {
  font-size: 0.7rem;
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signage-accent, #d9a441);
  margin: 0;
}
.signage-waiting-headline {
  margin: 0;
  font-size: 1rem;

  font-size: clamp(1rem, 2.6vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
}
.signage-waiting-message {
  margin: 0;
  font-size: 0.8rem;

  font-size: clamp(0.8rem, 1.7vw, 1.15rem);
  color: var(--signage-ink-dim, rgba(247, 244, 238, 0.78));
  /* Long honest sentences must not push the card open-ended on a 480px panel. */
  max-width: 62ch;
}
.signage-waiting-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--signage-ink-dim, rgba(247, 244, 238, 0.78));
}

/* Managed display (?kiosk=1 / /display) and the read-only preview: the waiting
   state IS the programme surface, with TV overscan-safe padding. */
.signage-waiting-full {
  position: absolute;
  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  /* compat: replaced `inset: 0` (Chromium 87+) */
  margin: 0;
  justify-content: center;
  border: 0;
  border-radius: 0;
  padding: 2.5rem;

  padding: max(6%, 2.5rem);
}

/* ----- Portrait / landscape adaptations ----------------------------------- */

@media (orientation: portrait) {
  .signage-brand { max-width: 86vw; }
  .signage-overlay-info {
    max-width: 82vw;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    bottom: calc(64px + var(--signage-safe-y));
  }
  .signage-video { object-fit: cover; }
}

@media (orientation: landscape) and (max-height: 480px) {
  .signage-brand { font-size: clamp(1.1rem, 4vh, 1.6rem); }
  .signage-overlay-info { font-size: clamp(0.8rem, 2.4vh, 1rem); }
}

/* ----- High contrast preference ------------------------------------------ */

@media (prefers-contrast: more) {
  .signage-overlay-info { background: rgba(0, 0, 0, 0.9); }
  .signage-status { color: #fff; }
}

/* ----- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .signage-brand,
  .signage-overlay-info {
    animation: none;
  }
  .signage-status { transition: none; }
}

/* ----- Animations ---------------------------------------------------------- */

@keyframes signage-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes signage-overlay-cycle {
  0%   { opacity: 0.55; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0.7; }
}