@import url('./assets/depth-tokens.css');

body.mz-depth-art[data-pip-frame] .game-wrap {
  background: var(--mz-art-paper) url('./assets/depth-vellum.webp') center / 512px 512px;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
body.mz-depth-art .game-title h1 { color: var(--mz-art-ink); }
body.mz-depth-art[data-pip-frame] .facts span {
  color: var(--mz-art-ink);
  background: var(--mz-art-lilac) url('./assets/depth-lilac-rubbing.svg');
  border-color: var(--mz-art-rule);
  border-radius: 6px;
}
body.mz-depth-art[data-pip-frame] .hud {
  gap: var(--mz-art-space);
  flex-wrap: wrap;
  color: var(--mz-art-ink);
}
body.mz-depth-art .mz-how,
body.mz-depth-art .mz-dim { color: var(--mz-art-quiet); }
body.mz-depth-art[data-pip-frame] .game-wrap .btn,
body.mz-depth-art #mz-school button,
body.mz-depth-art #mz-school select { min-height: var(--mz-art-touch); }
body.mz-depth-art[data-pip-frame] .game-wrap .btn:not(.mz-alt) {
  color: #ffffff;
  background: #5b21b6;
}
body.mz-depth-art[data-pip-frame] .game-wrap .mz-ov-btns .btn.mz-alt {
  color: var(--mz-art-ink);
  background: var(--mz-art-lilac);
}
/* Existing pad size/gaps/order, pressed transform, focus and Hint wash remain native. */
body.mz-depth-art .mz-key:not(:active):not(.mz-hint) {
  background: #fbf8f4;
  color: var(--mz-art-ink);
}
body.mz-depth-art .mz-card {
  /* Solid paper protects the original small purple score copy from dark fibers. */
  background: var(--mz-art-paper);
  max-height: 100%;
  overflow: auto;
}
/* No canvas/stage dimension or touch-action declarations and no added animation. */