/**
 * Poper's Game — venue background rendering layer.
 *
 * IMPORTANT INTEGRATION NOTE:
 * The application's foreground container (e.g. #app / main) must have
 * position: relative; z-index: 1; and a transparent background where
 * photography should be visible. Do not blindly apply this to existing
 * pages until the v0.33.13 DOM/CSS has been reviewed.
 */
.pg-venue-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: #111920; /* Clean fallback while the photograph loads. */
}

.pg-venue-background__image,
.pg-venue-background__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pg-venue-background__image {
  display: block;
  object-fit: cover;
  object-position: center center;
  transform-origin: center;
}

.pg-venue-background__shade {
  background: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.2));
}

/*
 * Example integration only; use this variable with the actual foreground
 * panels once the current production CSS has been supplied:
 * background-color: rgba(255, 255, 255, var(--pg-venue-panel-opacity, .78));
 */

/*
 * The photographic layer is used on Play ONLY. All ordinary controls are
 * stacked above it; this never changes pointer events or the scoring surface.
 * The body background from v0.33.13 is suppressed ONLY for this page.
 */
body.pg-venue-play {
  background: #0a1015;
}
/*
 * v0.33.14.3 — HEADER POPOVER STACKING FIX
 * ---------------------------------------
 * The menu is positioned inside .site-header. Previously the header and main
 * each had z-index: 1, so the later main element painted OVER the opened menu.
 *
 * Give the complete header its own higher stacking level. This ensures its
 * menu and language feedback appear over the play panel without changing
 * their internal positioning or altering the decorative image layer.
 * The remaining foreground elements still sit safely above the photograph.
 */
body.pg-venue-play > .site-header {
  position: relative;
  z-index: 50;
}

body.pg-venue-play > main,
body.pg-venue-play > footer {
  position: relative;
  z-index: 1;
}
body.pg-venue-play #playPanel .preview {
  background-color: rgba(0, 0, 0, var(--pg-venue-panel-opacity, .78));
}
/* Keep the white notation paper opaque to protect score legibility. */
body.pg-venue-play #noteStaff {
  isolation: isolate;
}

.pg-venue-photo-credits {
  margin-top: 16px;
  padding: 10px 14px;
  background: rgba(0,0,0,.43);
  border: 1px solid rgba(255,255,255,.25);
  font-size: .83rem;
}
.pg-venue-photo-credits summary { cursor: pointer; }
.pg-venue-photo-credits p { margin: 6px 0; }
.pg-venue-photo-credits a { color: #aaddff; }