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

/* Original seven tracks, six rows, gaps, cells and disc transforms stay native. */
body.c4-depth-art #card-grid {
  background-color: var(--c4-enamel);
  background-image: url("./assets/depth-enamel.svg");
  box-shadow: 0 4px 0 var(--c4-deep), 0 8px 14px #0c264a33;
}
body.c4-depth-art .disc.p1 {
  background-image: url("./assets/depth-scarlet-chip.svg");
  color: var(--c4-scarlet);
}
body.c4-depth-art .disc.p2 {
  background-image: url("./assets/depth-saffron-chip.svg");
  color: var(--c4-saffron);
}
body.c4-depth-art .disc.p1,
body.c4-depth-art .disc.p2,
body.c4-depth-art .cell.ghost .disc,
body.c4-depth-art .drop-btn.sel .hover-disc,
body.c4-depth-art .drop-btn.hint .hover-disc {
  background-size: contain;
  background-repeat: no-repeat;
}
body.c4-depth-art .cell.ghost .disc,
body.c4-depth-art .drop-btn.sel .hover-disc,
body.c4-depth-art .drop-btn.hint .hover-disc {
  background-image: url("./assets/depth-scarlet-chip.svg");
}
body.c4-depth-art .drop-btn { min-height: var(--c4-touch); }
body.c4-depth-art[data-pip-frame] .game-wrap {
  background-color: var(--c4-paper);
  color: var(--c4-ink);
}
body.c4-depth-art[data-pip-frame] .game-wrap .btn,
body.c4-depth-art .diff-btn,
body.c4-depth-art .tool-btn,
body.c4-depth-art #column-lab select,
body.c4-depth-art #column-lab button {
  min-width: var(--c4-touch);
  min-height: var(--c4-touch);
  white-space: normal;
  overflow-wrap: anywhere;
}
/* This original button declares44px in its own style attribute. */
body.c4-depth-art #new-game { min-height: var(--c4-touch) !important; }
body.c4-depth-art[data-pip-frame] .game-wrap .btn {
  color: var(--c4-paper);
  background-color: var(--c4-enamel);
  box-shadow: 0 4px 0 var(--c4-deep);
}
body.c4-depth-art .diff-btn,
body.c4-depth-art .tool-btn { color: var(--c4-enamel); background: var(--c4-paper); border-color: var(--c4-enamel); }
body.c4-depth-art .diff-btn.active { color: var(--c4-paper); background-color: var(--c4-enamel); }
body.c4-depth-art .hud { flex-wrap: wrap; gap: var(--c4-space-2); }
body.c4-depth-art .hud > span { min-width: 0; overflow-wrap: anywhere; }
body.c4-depth-art #starter,
body.c4-depth-art .howto { color: var(--c4-muted); overflow-wrap: anywhere; }
body.c4-depth-art #streak { color: var(--c4-ink); }
body.c4-depth-art #overlay {
  background: var(--c4-deep);
  color: var(--c4-paper);
  overflow-y: auto;
  justify-content: safe center;
}
body.c4-depth-art #ov-sub,
body.c4-depth-art #ov-record,
body.c4-depth-art #ov-streak { color: var(--c4-paper); overflow-wrap: anywhere; }
body.c4-depth-art #see-board { border-color: var(--c4-paper); color: var(--c4-paper); background-color: var(--c4-deep); }
body.c4-depth-art .ov-btns .btn { flex: 1 1 8rem; }
@media (max-width: 400px) {
  body.c4-depth-art .tools-row #move-count { flex: 1 1 100%; }
  body.c4-depth-art .tool-btns { display: flex; flex: 1 1 100%; }
  body.c4-depth-art .tool-btns .tool-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.c4-depth-art[data-pip-frame] .game-wrap .btn,
  body.c4-depth-art[data-pip-frame] .game-wrap .btn:hover,
  body.c4-depth-art[data-pip-frame] .game-wrap .btn:active { transition: none; transform: none; }
}