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

/* Original board tracks, square hitboxes, indices and native cues stay intact. */
body.ck-depth-art #card-grid { border-color: var(--ck-ink); }
body.ck-depth-art .sq.lt { background-color: var(--ck-cream); }
body.ck-depth-art .sq.dk:not(.tgt):not(.last) { background-color: var(--ck-walnut); }
body.ck-depth-art .sq { background-image: url("./assets/depth-marquetry.svg"); }
body.ck-depth-art .sq.tgt:not(.hint)::after { background-color: var(--ck-gold); opacity: 1; }
body.ck-depth-art .sq.sel:not(.hint) { box-shadow: inset 0 0 0 3px var(--ck-gold); }
body.ck-depth-art .pc {
  height: auto;
  aspect-ratio: 1;
  background-size: contain;
  background-repeat: no-repeat;
}
body.ck-depth-art .pc.red { background-image: url("./assets/depth-scarlet-counter.svg"); }
body.ck-depth-art .pc.black { background-image: url("./assets/depth-charcoal-counter.svg"); }
body.ck-depth-art .crown {
  color: var(--ck-gold);
  background-color: var(--ck-charcoal);
  font-size: 1.125rem;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.ck-depth-art[data-pip-frame] .game-wrap {
  background-color: var(--ck-cream);
  background-image: url("./assets/depth-marquetry.svg");
  color: var(--ck-ink);
}
body.ck-depth-art[data-pip-frame] .game-wrap .btn,
body.ck-depth-art .ck-diff button,
body.ck-depth-art .ck-exp-content select {
  min-width: var(--ck-touch);
  min-height: var(--ck-touch);
  white-space: normal;
  overflow-wrap: anywhere;
}
body.ck-depth-art[data-pip-frame] .game-wrap .btn {
  background-color: var(--ck-scarlet);
  color: var(--ck-cream);
  box-shadow: 0 4px 0 #68171c;
}
body.ck-depth-art[data-pip-frame] .game-wrap .btn.ghost {
  background-color: var(--ck-cream);
  color: var(--ck-ink);
  box-shadow: inset 0 0 0 2px var(--ck-ink);
}
body.ck-depth-art .ck-diff { border-color: var(--ck-ink); }
body.ck-depth-art .ck-diff button { color: var(--ck-ink); background: var(--ck-cream); }
body.ck-depth-art .ck-diff button[aria-pressed="true"] { background-color: var(--ck-charcoal); color: var(--ck-cream); }
body.ck-depth-art .hud { flex-wrap: wrap; gap: var(--ck-space-2); }
body.ck-depth-art #move-count { overflow-wrap: anywhere; }
body.ck-depth-art .ck-how,
body.ck-depth-art .ck-record { color: var(--ck-muted); }
body.ck-depth-art .ck-how,
body.ck-depth-art .ck-record,
body.ck-depth-art #status,
body.ck-depth-art #ov-stats,
body.ck-depth-art #ov-record { overflow-wrap: anywhere; }
body.ck-depth-art #overlay {
  padding: var(--ck-space-3);
  overflow-y: auto;
  justify-content: safe center;
  background-color: var(--ck-cream);
  background-image: url("./assets/depth-marquetry.svg");
}
body.ck-depth-art #overlay h2 { color: var(--ck-scarlet); }
body.ck-depth-art #overlay p { color: var(--ck-muted); }
body.ck-depth-art #overlay .ck-best { color: #166534; }
body.ck-depth-art #overlay .ck-ov-btns .btn { flex: 1 1 8rem; }
body.ck-depth-art .ck-exp-content select:focus-visible,
body.ck-depth-art .ck-diff button:focus-visible { outline: 3px solid var(--ck-focus); outline-offset: -3px; }
@media (max-width: 400px) {
  body.ck-depth-art #move-count { flex: 1 1 100%; }
  body.ck-depth-art .ck-tools { display: flex; flex: 1 1 100%; }
  body.ck-depth-art .ck-tools .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.ck-depth-art[data-pip-frame] .game-wrap .btn,
  body.ck-depth-art[data-pip-frame] .game-wrap .btn:hover,
  body.ck-depth-art[data-pip-frame] .game-wrap .btn:active { transition: none; transform: none; }
}