/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V5. Authored etch; generated paper is separate. */
@import url('./assets/depth-tokens.css');

body[data-pip-frame].cf-depth-art {
  background-color: var(--cf-depth-paper);
  background-image: url('./art/depth-gouache-paper.webp');
  background-size: 512px 512px;
  color: var(--cf-depth-ink);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body[data-pip-frame].cf-depth-art .game-wrap {
  background-color: var(--cf-depth-paper);
  background-image: url('./assets/depth-registration-etch.svg'), url('./art/depth-gouache-paper.webp');
  background-position: center top, left top;
  background-size: 100% 180px, 512px 512px;
  background-repeat: no-repeat, repeat;
}

/* Decorative header row; no image overlaps native text or interactive paint. */
body[data-pip-frame].cf-depth-art .game-title {
  padding-top: 104px;
  background-image: url('./art/depth-gouache-pots.webp');
  background-position: center top;
  background-size: min(100%, 288px) auto;
  background-repeat: no-repeat;
}

/* Native hues, shapes, stock badges and all legal/selected/Planner cues remain native. */
body[data-pip-frame].cf-depth-art #card-grid .tile,
body[data-pip-frame].cf-depth-art .swatch {
  color: var(--cf-depth-glyph);
  text-shadow: none;
}

body[data-pip-frame].cf-depth-art .btn,
body[data-pip-frame].cf-depth-art .game-wrap .hud .btn {
  min-height: var(--cf-depth-touch);
  min-width: var(--cf-depth-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body[data-pip-frame].cf-depth-art .cf-tool,
body[data-pip-frame].cf-depth-art #ov-alt,
body[data-pip-frame].cf-depth-art .cf-planner summary,
body[data-pip-frame].cf-depth-art .cf-planner select {
  min-height: var(--cf-depth-touch);
}

body[data-pip-frame].cf-depth-art .hud,
body[data-pip-frame].cf-depth-art .cf-meta,
body[data-pip-frame].cf-depth-art .cf-tools {
  flex-wrap: wrap;
  gap: var(--cf-depth-gap);
}

body[data-pip-frame].cf-depth-art .hud #move-count {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Scroll the existing card on short screens; the fixed overlay and board keep their bounds. */
body[data-pip-frame].cf-depth-art .ov-card {
  max-height: calc(100dvh - 2 * var(--cf-depth-room));
  overflow: auto;
}

/* No new animation or transitions. Native reduced-motion painting/FX are unchanged. */