/* Hallmark · source candidate: P4 H4 E4 S5 R5 V4. Raster enamel surround; authored corner etch. Browser pending. */
@import url('./assets/depth-tokens.css');
body[data-pip-frame].bp-depth-art .game-wrap {
  background-color: var(--bp-depth-wash);
  background-image: url('./assets/depth-enamel.webp');
  background-size: var(--bp-depth-grain);
  border-color: var(--bp-depth-cast);
  padding-bottom: max(var(--bp-depth-safe), env(safe-area-inset-bottom));
}
body[data-pip-frame].bp-depth-art .game-title {
  background-image: url('./assets/depth-corner-etch.svg');
  background-position: right top;
  background-size: 96px 32px;
  background-repeat: no-repeat;
}
body[data-pip-frame].bp-depth-art .game-title h1 { color: var(--bp-depth-ink); }
body[data-pip-frame].bp-depth-art .facts span { background: var(--bp-depth-paper); color: var(--bp-depth-quiet); border-color: var(--bp-depth-rule); }
body[data-pip-frame].bp-depth-art .hud { color: var(--bp-depth-ink); border-color: var(--bp-depth-rule); }
body[data-pip-frame].bp-depth-art #status:not([class]) { color: var(--bp-depth-ink); }
body[data-pip-frame].bp-depth-art #status.flash { background-color: var(--bp-depth-ink); }
body[data-pip-frame].bp-depth-art #game-canvas:focus-visible { outline-color: var(--bp-depth-focus); }
body[data-pip-frame].bp-depth-art .game-wrap .btn {
  min-height: var(--bp-depth-touch);
  background: var(--bp-depth-cyan);
  color: var(--bp-depth-white);
  box-shadow: 0 4px 0 var(--bp-depth-cast);
}
body[data-pip-frame].bp-depth-art .game-wrap .btn:focus-visible { outline-color: var(--bp-depth-focus); }
body[data-pip-frame].bp-depth-art #overlay .btn.btn-ghost { min-height: var(--bp-depth-touch); }
body[data-pip-frame].bp-depth-art #overlay .btn:focus-visible { outline-color: var(--bp-depth-paper); }
body[data-pip-frame].bp-depth-art .shot-planner { background: var(--bp-depth-paper); border-color: var(--bp-depth-rule); }
body[data-pip-frame].bp-depth-art .shot-planner button { min-height: var(--bp-depth-touch); color: var(--bp-depth-quiet); }
@media (max-width: 400px) {
  body[data-pip-frame].bp-depth-art .hud { flex-wrap: wrap; }
  body[data-pip-frame].bp-depth-art #move-count { flex-basis: 100%; }
}