@property --gb-victory-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.flipdot-wall.is-led-matte,
.ggtv-wall.is-led-matte {
  isolation: isolate;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  /* Letterbox poza goldboard.svg; LED tylko w .gb-frame. */
  background: #000000;
}

.flipdot-wall.is-led-matte::before,
.flipdot-wall.is-led-matte::after,
.ggtv-wall.is-led-matte::before,
.ggtv-wall.is-led-matte::after {
  display: none;
}

/* Tapeta + LED wypełniają stage 16:9 (raster webp: dokładnie 16:9, np. 1920×1080; SVG viewBox osobno). */
.gb-frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  -webkit-flex: none;
  flex: none;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: hidden;
}

.gb-bg,
.gb-bloom,
.gb-flash,
.gb-matte {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  pointer-events: none;
}

.gb-bg,
.gb-bloom,
.gb-flash {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.gb-matte {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.gb-bg {
  z-index: 0;
  background-color: var(--gb-bg-left, #000000);
  filter: saturate(var(--gb-bg-sat, 1.8)) brightness(var(--gb-bg-bright, 1.3));
  transition: filter 0.25s ease, background 0.25s ease;
}

.gb-bg.is-gradient {
  background: linear-gradient(
    90deg,
    var(--gb-bg-left) 0%,
    var(--gb-bg-left) calc(50% - var(--gb-blend-soft, 24%)),
    var(--gb-bg-right) calc(50% + var(--gb-blend-soft, 24%)),
    var(--gb-bg-right) 100%
  );
}

.gb-bloom {
  z-index: 1;
  opacity: var(--gb-bloom, 0.45);
  filter: blur(28px) saturate(1.6);
  background: linear-gradient(
    90deg,
    var(--gb-bg-left) 0%,
    var(--gb-bg-left) calc(50% - var(--gb-blend-soft, 24%)),
    var(--gb-bg-right) calc(50% + var(--gb-blend-soft, 24%)),
    var(--gb-bg-right) 100%
  );
  transform: scale(1.08);
}

.gb-bloom.is-solid {
  background: var(--gb-bg-left);
}

.gb-bloom.is-victory-gradient {
  opacity: 0.36;
  filter: blur(28px) saturate(1.35);
  transform: scale(1.08);
}

.gb-bloom.is-victory-gradient.is-anim {
  animation-duration: var(--gb-led-dur, 7s);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.gb-bloom.is-victory-gradient.is-anim--victory-sweep-lr {
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation-name: gb-victory-scroll-x;
}

.gb-bloom.is-victory-gradient.is-anim--victory-sweep-tb {
  background-size: 100% 200%;
  background-position: 50% 0%;
  animation-name: gb-victory-scroll-y;
}

.gb-bloom.is-victory-gradient.is-anim--victory-radial {
  --gb-victory-angle: 0deg;
  background-size: cover;
  background-position: center;
  animation-name: gb-victory-spin;
}

.gb-bloom.is-victory-gradient.is-anim--victory-rings {
  background-size: 100% 100%;
  background-position: center;
  animation-name: gb-victory-rings-expand;
}

.gb-flash {
  z-index: 2;
  opacity: 0;
  filter: blur(20px) saturate(1.4);
  transform: scale(1.06);
}

.gb-flash.is-solid {
  background: var(--gb-flash-color, #ffffff);
}

.flipdot-wall.is-edge-flash .gb-flash,
.ggtv-wall.is-edge-flash .gb-flash {
  filter: blur(14px) saturate(1.3);
}

.gb-matte {
  z-index: 3;
  opacity: 1;
}

.gb-matte svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Gold Grid: siatka w oknie goldboard. Flip-dot: contentPad = --flipdot-ui-pad na pełnej 16:9 (jak Statyczne). */
.ggtv-board.is-goldboard-stage .ggtv-ui {
  top: var(--gb-stage-top);
  right: var(--gb-stage-right);
  bottom: var(--gb-stage-bottom);
  left: var(--gb-stage-left);
}

.gb-bg.is-anim {
  animation-duration: var(--gb-led-dur, 7s);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.gb-bg.is-anim--victory-sweep-lr {
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation-name: gb-victory-scroll-x;
}

.gb-bg.is-anim--victory-sweep-tb {
  background-size: 100% 200%;
  background-position: 50% 0%;
  animation-name: gb-victory-scroll-y;
}

.gb-bg.is-anim--victory-radial {
  --gb-victory-angle: 0deg;
  background-size: cover;
  background-position: center;
  animation-name: gb-victory-spin;
}

.gb-bg.is-anim--victory-rings {
  background-size: 100% 100%;
  background-position: center;
  animation-name: gb-victory-rings-expand;
}

@keyframes gb-victory-scroll-x {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes gb-victory-scroll-y {
  0% { background-position: 50% 0%; }
  100% { background-position: 50% 100%; }
}

@keyframes gb-victory-spin {
  to { --gb-victory-angle: 360deg; }
}

@keyframes gb-victory-rings-expand {
  0% { background-size: 100% 100%; }
  100% { background-size: 200% 200%; }
}

@media (prefers-reduced-motion: reduce) {
  .gb-bloom,
  .gb-bg.is-anim,
  .gb-flash {
    animation: none !important;
    transition: none !important;
  }
}