/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V5. Original bouncing world and radar remain authoritative. */
body[data-pip-frame].bb-ball-art {
  --bb-ball-rose: #F43F5E;
  --bb-ball-cyan: #22d3ee;
  --bb-ball-violet: #6366f1;
  --bb-ball-combo: #f472b6;
  --bb-ball-gold: #fde047;
  --bb-ball-spring: #4ade80;
  --bb-ball-space: #0f172a;
  --bb-ball-cream: #f8fafc;
  --bb-ball-touch: 48px;
  --bb-ball-marquee: url('./art/depth-playground-marquee.webp');
  background-image: url('./art/depth-ascent-etch.svg');
  background-position: center top;
  background-size: min(100%, 800px) auto;
  background-repeat: repeat-y;
}
body[data-pip-frame].bb-ball-art .game-title {
  position: relative;
  padding-top: 128px;
  background-image: url('./art/depth-ascent-etch.svg');
  background-position: center top;
  background-size: 100% 120px;
  background-repeat: no-repeat;
}
body[data-pip-frame].bb-ball-art .game-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100%, 356px);
  height: 112px;
  transform: translateX(-50%);
  background-image: var(--bb-ball-marquee);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
body[data-pip-frame].bb-ball-art .game-wrap .btn,
body[data-pip-frame].bb-ball-art .game-wrap .hud .btn,
body[data-pip-frame].bb-ball-art #landing-radar button {
  min-height: var(--bb-ball-touch);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
body[data-pip-frame].bb-ball-art .hud { position: relative; flex-wrap: wrap; }
body[data-pip-frame].bb-ball-art #move-count { flex: 1 1 14ch; min-width: 0; overflow-wrap: anywhere; }
body[data-pip-frame].bb-ball-art #landing-radar {
  background-color: var(--color-paper-2);
  background-image: url('./art/depth-ascent-etch.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-color: var(--bb-ball-rose);
}
body[data-pip-frame].bb-ball-art #landing-radar p { color: var(--color-ink); overflow-wrap: anywhere; }
body[data-pip-frame].bb-ball-art #landing-radar button:focus-visible { outline-color: var(--color-focus); }
body[data-pip-frame].bb-ball-art #game-over {
  padding: var(--space-md);
  justify-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bb-ball-space);
}
body[data-pip-frame].bb-ball-art #game-over p { max-width: 100%; overflow-wrap: anywhere; line-height: 1.45; }
body[data-pip-frame].bb-ball-art #game-over .btn { min-width: 0; max-width: 100%; }
body[data-pip-frame].bb-ball-art #game-over .btn:focus-visible { outline-color: var(--bb-ball-gold); }

/* The original canvas alone controls its 500px world and collision geometry.
   The owned SVG is centered on its copied viewport and has no layout footprint. */
body[data-pip-frame].bb-ball-art .bb-ball-field {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--bb-ball-field-width);
  height: 500px;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}
body[data-pip-frame].bb-ball-art .bb-ball-field-ping { pointer-events: none; }
body[data-pip-frame].bb-ball-art .bb-ball-field-ring {
  fill: none;
  stroke: var(--bb-ball-cyan);
  stroke-width: 1.5px;
  stroke-opacity: .65;
  animation: bb-ball-reward-ring 650ms ease-out both;
}
body[data-pip-frame].bb-ball-art .bb-ball-field-ping[data-kind='skip'] .bb-ball-field-ring,
body[data-pip-frame].bb-ball-art .bb-ball-field-ping[data-kind='star'] .bb-ball-field-ring { stroke: var(--bb-ball-gold); }
body[data-pip-frame].bb-ball-art .bb-ball-field-ping[data-kind='combo'] .bb-ball-field-ring { stroke: var(--bb-ball-combo); }
body[data-pip-frame].bb-ball-art .bb-ball-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-ball-reward-ring { from { r: 9px; opacity: 1; } to { r: 15px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body[data-pip-frame].bb-ball-art .bb-ball-field-ring { animation: none; opacity: 1; r: 9px; }
}