/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V5. Native flight field and recorder remain authoritative. */
body[data-pip-frame].ad-depth-art {
  --ad-depth-violet: #7C3AED;
  --ad-depth-space: #0f0a1a;
  --ad-depth-ice: #22d3ee;
  --ad-depth-shield: #67e8f9;
  --ad-depth-fuel: #facc15;
  --ad-depth-stone: #cbd5e1;
  --ad-depth-cream: #f8fafc;
  --ad-depth-touch: 48px;
  --ad-depth-marquee: url('./art/depth-spacecraft-marquee.webp');
  background-image: url('./art/depth-flight-etch.svg');
  background-position: center top;
  background-size: min(100%, 800px) auto;
  background-repeat: repeat-y;
}

body[data-pip-frame].ad-depth-art .game-title {
  position: relative;
  padding-top: 128px;
  background-image: url('./art/depth-flight-etch.svg');
  background-position: center top;
  background-size: 100% 120px;
  background-repeat: no-repeat;
}
body[data-pip-frame].ad-depth-art .game-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100%, 356px);
  height: 112px;
  transform: translateX(-50%);
  background-image: var(--ad-depth-marquee);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

body[data-pip-frame].ad-depth-art .game-wrap .btn {
  min-height: var(--ad-depth-touch);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
body[data-pip-frame].ad-depth-art .game-wrap .hud .btn { min-height: var(--ad-depth-touch); }
body[data-pip-frame].ad-depth-art .hud { position: relative; flex-wrap: wrap; }
body[data-pip-frame].ad-depth-art .hud.ad-depth-signal::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--ad-depth-violet);
  pointer-events: none;
  animation: ad-depth-signal-decay 650ms ease-out both;
}
body[data-pip-frame].ad-depth-art .hud.ad-depth-signal-fuel::after { background: var(--ad-depth-fuel); }
body[data-pip-frame].ad-depth-art .hud.ad-depth-signal-shield::after { background: var(--ad-depth-ice); }
body[data-pip-frame].ad-depth-art .hud.ad-depth-signal-absorb::after { background: var(--ad-depth-violet); }

body[data-pip-frame].ad-depth-art #over {
  background: var(--ad-depth-space);
  color: var(--ad-depth-cream);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
body[data-pip-frame].ad-depth-art #over h2,
body[data-pip-frame].ad-depth-art #over .final,
body[data-pip-frame].ad-depth-art #over-help,
body[data-pip-frame].ad-depth-art #over-keys {
  max-width: 100%;
  overflow-wrap: anywhere;
}
body[data-pip-frame].ad-depth-art #over-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 100%;
}
body[data-pip-frame].ad-depth-art #over-stats li { white-space: normal; overflow-wrap: anywhere; }
body[data-pip-frame].ad-depth-art #over-stats b { color: var(--ad-depth-cream); }
body[data-pip-frame].ad-depth-art #over .btn { min-width: 0; max-width: 100%; width: min(100%, 240px); }
body[data-pip-frame].ad-depth-art #over .btn:focus-visible { outline-color: var(--ad-depth-fuel); }

body[data-pip-frame].ad-depth-art #flight-recorder {
  background-color: var(--color-paper-2);
  background-image: url('./art/depth-flight-etch.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-color: var(--ad-depth-violet);
  color: var(--color-ink);
}
body[data-pip-frame].ad-depth-art #flight-recorder input[type='range'] { min-height: var(--ad-depth-touch); }
body[data-pip-frame].ad-depth-art #flight-recorder button:focus-visible,
body[data-pip-frame].ad-depth-art #flight-recorder input:focus-visible { outline-color: var(--ad-depth-violet); }

body[data-pip-frame].ad-depth-art .ad-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 ad-depth-signal-decay { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 340px) {
  body[data-pip-frame].ad-depth-art #over-stats { column-gap: var(--space-xs); }
  body[data-pip-frame].ad-depth-art #over-keys { font-size: var(--text-xs); line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-pip-frame].ad-depth-art .hud.ad-depth-signal::after { animation: none; opacity: 1; }
}