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

/* No cell/clue dimensions, gaps, hit mapping, ink or hatch overrides. */
body.ng-depth-art .shop,
body.ng-depth-art .sheet,
body.ng-depth-art .lvl {
  background-color: var(--ng-cream);
  background-image: url("./assets/depth-ceramic-fleck.svg");
  color: var(--ng-ink);
}
body.ng-depth-art .shop-rail {
  background: url("./assets/depth-print-register.svg") center / auto 100% repeat-x;
}
body.ng-depth-art .press {
  background-image: url("./assets/depth-ceramic-fleck.svg");
}
body.ng-depth-art .btn,
body.ng-depth-art .line-lab .btn,
body.ng-depth-art .line-lab select {
  min-width: var(--ng-touch);
  min-height: var(--ng-touch);
  white-space: normal;
  overflow-wrap: anywhere;
}
body.ng-depth-art .btn:not(.btn--soft):not(.btn--mode):not(.btn--daily) {
  --btn-face: var(--ng-scarlet);
  --btn-ink: var(--ng-cream);
}
body.ng-depth-art .btn--mode[aria-pressed="true"] {
  --btn-ink: var(--ng-ink);
  /* Keep six native ink faces; a cream text backing gives every one contrast. */
  background-image: linear-gradient(var(--ng-cream), var(--ng-cream));
  background-origin: content-box;
  background-repeat: no-repeat;
  outline: 2px solid var(--ng-ink);
  outline-offset: -2px;
}
body.ng-depth-art .btn--mode[data-mode="mark"][aria-pressed="true"] {
  --btn-ink: var(--ng-cream);
  background-image: none;
}
body.ng-depth-art .clue-row,
body.ng-depth-art .clue-col { color: var(--ng-ink); }
body.ng-depth-art .clue-row span,
body.ng-depth-art .clue-col span { background-color: var(--ng-porcelain); font-variant-numeric: tabular-nums; }
body.ng-depth-art .clue-row.is-done,
body.ng-depth-art .clue-col.is-done { color: var(--ng-gold-ink); background-color: var(--ng-gold); }
body.ng-depth-art .clue-row.is-done span,
body.ng-depth-art .clue-col.is-done span { background-color: var(--ng-gold); }
body.ng-depth-art .clue-row.is-aim span,
body.ng-depth-art .clue-col.is-aim span { background-color: var(--ng-cream); }
body.ng-depth-art .cell:not(.is-ink):not(.is-mark):not(.is-wrong-ink):not(.is-wrong-mark):focus-visible {
  outline: 3px solid var(--ng-focus);
  outline-offset: -3px;
}
body.ng-depth-art .ng-depth-scroll-note {
  margin: 0 0 var(--ng-space-2);
  color: var(--ng-muted);
  font-size: .875rem;
  overflow-wrap: anywhere;
}
body.ng-depth-art .press-wrap {
  scrollbar-width: auto;
  scrollbar-color: var(--ng-ink) var(--ng-cream);
  scroll-padding-inline: var(--ng-space-4);
}
body.ng-depth-art .play-head,
body.ng-depth-art .play-head > *,
body.ng-depth-art .sheet .row,
body.ng-depth-art .line-lab { min-width: 0; }
body.ng-depth-art #level-label,
body.ng-depth-art #status,
body.ng-depth-art .win-grid dd { overflow-wrap: anywhere; }
body.ng-depth-art .sheet .row .btn { flex: 1 1 8rem; }
body.ng-depth-art .overlay {
  align-items: safe center;
  padding-block: max(var(--ng-space-4), env(safe-area-inset-top)) max(var(--ng-space-4), env(safe-area-inset-bottom));
}
body.ng-depth-art .btn:focus-visible,
body.ng-depth-art .line-lab select:focus-visible,
body.ng-depth-art .line-lab summary:focus-visible { outline: 3px solid var(--ng-focus); outline-offset: 3px; }
@media (max-width: 420px) {
  body.ng-depth-art .shop { padding-inline: var(--ng-space-3); }
  body.ng-depth-art .shop-rail { margin-inline: calc(-1 * var(--ng-space-3)); }
  body.ng-depth-art .sheet { padding: var(--ng-space-4); }
  body.ng-depth-art .play-head .btn { padding-inline: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.ng-depth-art .btn,
  body.ng-depth-art .lvl { transition: none; transform: none; }
}