@import "./assets/depth-tokens.css";

/* The native8 tracks,3px gaps,6px board padding and entire cells stay intact. */
body.rf-depth-art #rf-board {
  background-color: var(--rf-art-frame);
  background-image: url("./assets/depth-linen.svg");
  box-shadow: 0 5px 0 #0e2c26, 0 9px 16px #153e362b;
}
body.rf-depth-art .rf-cell {
  background-color: var(--rf-art-linen);
  background-image: url("./assets/depth-linen.svg");
}
/* Original keyframes own both timed flip halves, including delayed/fill frames. */
body.rf-depth-art .rf-disc.b:not(.flip) { background-image: url("./assets/depth-onyx.svg"); }
body.rf-depth-art .rf-disc.w:not(.flip) { background-image: url("./assets/depth-porcelain.svg"); }
body.rf-depth-art .rf-disc.b:not(.flip),
body.rf-depth-art .rf-disc.w:not(.flip) { background-size: contain; background-repeat: no-repeat; }
body.rf-depth-art[data-pip-frame] .game-wrap {
  color: var(--rf-art-ink);
  background-color: var(--rf-art-ivory);
}
body.rf-depth-art[data-pip-frame] .game-wrap .btn,
body.rf-depth-art .rf-level,
body.rf-depth-art .rf-corner-watch summary,
body.rf-depth-art .rf-watch-content select {
  min-height: var(--rf-art-touch);
  min-width: var(--rf-art-touch);
  white-space: normal;
  overflow-wrap: anywhere;
}
body.rf-depth-art[data-pip-frame] .game-wrap .btn {
  background-color: var(--rf-art-frame);
  color: var(--rf-art-ivory);
  box-shadow: 0 4px 0 #0e2c26;
}
body.rf-depth-art[data-pip-frame] .game-wrap .btn.rf-alt {
  background-color: var(--rf-art-ivory);
  color: var(--rf-art-frame);
  box-shadow: inset 0 0 0 2px var(--rf-art-frame);
}
body.rf-depth-art .rf-levels { max-width: 100%; flex-wrap: wrap; background: #153e3614; }
body.rf-depth-art .rf-level { color: var(--rf-art-frame); }
body.rf-depth-art .rf-level[aria-checked="true"] { background: var(--rf-art-frame); color: var(--rf-art-ivory); }
body.rf-depth-art .rf-hud { flex-wrap: wrap; gap: var(--rf-art-space-2); }
body.rf-depth-art #rf-record { color: var(--rf-art-muted); overflow-wrap: anywhere; }
body.rf-depth-art .rf-how { color: var(--rf-art-muted); overflow-wrap: anywhere; }
body.rf-depth-art .rf-level:focus-visible { outline: 3px solid #b45309; outline-offset: -3px; }
body.rf-depth-art #rf-over { overflow-y: auto; padding: var(--rf-art-space-2); }
body.rf-depth-art .rf-card { background: var(--rf-art-ivory); color: var(--rf-art-ink); }
body.rf-depth-art #rf-over-score,
body.rf-depth-art #rf-over-extra,
body.rf-depth-art .rf-card h2 { overflow-wrap: anywhere; }
body.rf-depth-art #rf-over-extra { color: var(--rf-art-muted); }
body.rf-depth-art .rf-over-btns .btn { flex: 1 1 8rem; }
@media (max-width: 400px) {
  body.rf-depth-art #rf-record { order: 3; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.rf-depth-art[data-pip-frame] .game-wrap .btn,
  body.rf-depth-art[data-pip-frame] .game-wrap .btn:hover,
  body.rf-depth-art[data-pip-frame] .game-wrap .btn:active { transition: none; transform: none; }
}