/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V5. Existing arcade tokens and native arena stay authoritative. */
body.bb-depth-art {
  --bb-depth-metal: var(--bounce-bg);
  --bb-depth-panel: var(--bounce-panel);
  --bb-depth-edge: var(--bounce-border);
  --bb-depth-cream: var(--bounce-cream);
  --bb-depth-primary: var(--bounce-yellow);
  --bb-depth-signal: var(--bounce-cyan);
  --bb-depth-warning: var(--bounce-pink);
  --bb-depth-gain: var(--bounce-green);
  --bb-depth-touch: 48px;
  --bb-depth-title-art: url('./art/depth-prismatic-marquee.webp');
  background-color: var(--bb-depth-metal);
  background-image: url('./art/depth-cabinet-etch.svg');
  background-size: min(100%, 800px) auto;
  background-position: center top;
  background-repeat: repeat-y;
  background-attachment: scroll;
}

body.bb-depth-art::before { background-image: none; }

body.bb-depth-art #title-screen .hero-card {
  position: relative;
  padding-top: 120px;
  background-image: url('./art/depth-cabinet-etch.svg');
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  border-color: var(--bb-depth-edge);
  box-shadow: 0 5px 0 var(--bb-depth-panel), 0 6px 0 var(--bb-depth-primary);
}
body.bb-depth-art #title-screen .hero-card::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: min(calc(100% - var(--space-md)), 416px);
  height: 104px;
  transform: translateX(-50%);
  background-image: var(--bb-depth-title-art);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

body.bb-depth-art .hero-card h1 {
  color: var(--bb-depth-cream);
  background: none;
  -webkit-text-fill-color: var(--bb-depth-cream);
  overflow-wrap: anywhere;
  min-width: 0;
  font-style: normal;
}

body.bb-depth-art #levels-screen .hero-card,
body.bb-depth-art .how-container,
body.bb-depth-art .modal-sheet {
  background-image: url('./art/depth-cabinet-etch.svg');
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
  border-color: var(--bb-depth-edge);
}

body.bb-depth-art .level-card,
body.bb-depth-art .arcade-facts li {
  background-image: url('./art/depth-cabinet-etch.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

body.bb-depth-art .level-card.is-unlocked { border-color: var(--bb-depth-primary); }
body.bb-depth-art .level-card:focus-visible,
body.bb-depth-art .btn:focus-visible { outline-color: var(--bb-depth-signal); }

body.bb-depth-art .modal-sheet {
  max-height: calc(100dvh - 2 * var(--space-md));
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.bb-depth-art .bounce-lab summary,
body.bb-depth-art .bounce-lab input[type='range'],
body.bb-depth-art .bounce-lab__buttons .btn { min-height: var(--bb-depth-touch); }
body.bb-depth-art .bounce-lab__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The engine measures this HUD's original dimensions. Only its decoration is
   changed; no added padding, min-height, border thickness or visible row. */
body.bb-depth-art .play-hud { position: relative; }
body.bb-depth-art .play-hud.bb-depth-signal::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--bb-depth-primary);
  pointer-events: none;
  animation: bb-depth-signal-decay 700ms ease-out both;
}
body.bb-depth-art .play-hud.bb-depth-signal-life-lost::after { background: var(--bb-depth-warning); }
body.bb-depth-art .play-hud.bb-depth-signal-life-gained::after { background: var(--bb-depth-gain); }
body.bb-depth-art .play-hud.bb-depth-signal-powerup::after { background: var(--bb-depth-signal); }
body.bb-depth-art .bb-depth-live-output {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
@keyframes bb-depth-signal-decay { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 520px) {
  body.bb-depth-art .bounce-lab__fields { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 430px) {
  body.bb-depth-art .modal-btn-stack .btn {
    min-height: var(--bb-depth-touch);
    padding-inline: var(--space-xs);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
  body.bb-depth-art .bonus-list li { flex-wrap: wrap; }
  body.bb-depth-art .arcade-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.bb-depth-art .powerup-guide-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  body.bb-depth-art .play-hud.bb-depth-signal::after { animation: none; opacity: 1; }
}