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

/* A printed tournament pad; square dimensions and native overlays stay exact. */
body.ttp-depth-art .game-wrap {
  background-color: var(--ttp-art-paper);
  background-image: url('./assets/depth-press-paper.svg');
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
body.ttp-depth-art .ttt-cell:not(.win):not(.hint):not(:hover):not(:active) {
  background-color: var(--ttp-art-paper);
  background-image: url('./assets/depth-press-paper.svg');
}
body.ttp-depth-art .ttt-cell.x,
body.ttp-depth-art .ttt-score .you b { color: var(--ttp-art-x); }
/* The original X legend has an inline red; retain its hue with darker ink. */
body.ttp-depth-art .ttt-how b { color: var(--ttp-art-x) !important; }
body.ttp-depth-art .ttt-cell.o,
body.ttp-depth-art .ttt-score .ai b { color: var(--ttp-art-o); }
body.ttp-depth-art .ttt-score div { min-width: 0; background: var(--ttp-art-wash); }
body.ttp-depth-art .ttt-score b { overflow-wrap: anywhere; }
body.ttp-depth-art .ttt-score span { font-size: 0.72rem; opacity: 1; color: var(--ttp-art-muted); }
body.ttp-depth-art .ttt-how { opacity: 1; color: var(--ttp-art-muted); line-height: 1.5; }
body.ttp-depth-art #status:not([class]) { color: var(--ttp-art-ink); overflow-wrap: anywhere; }
body.ttp-depth-art .ttt-seg button {
  min-width: var(--ttp-art-touch);
  min-height: var(--ttp-art-touch);
  white-space: normal;
}
body.ttp-depth-art .ttt-seg button small { font-size: 0.72rem; line-height: 1.25; }
body.ttp-depth-art .game-wrap .btn,
body.ttp-depth-art .game-wrap .hud .btn,
body.ttp-depth-art #ttt-line-lens :is(summary, select, button) {
  min-width: var(--ttp-art-touch);
  min-height: var(--ttp-art-touch);
  max-width: 100%;
  white-space: normal;
}
body.ttp-depth-art #reset-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--ttp-art-touch);
  min-width: var(--ttp-art-touch);
  max-width: 100%;
  color: var(--ttp-art-violet);
  vertical-align: middle;
}
body.ttp-depth-art .hud,
body.ttp-depth-art .ttt-hudr { flex-wrap: wrap; }
body.ttp-depth-art .ttt-hudr { min-width: 0; max-width: 100%; }
body.ttp-depth-art .ttt-turn { min-width: 0; }
body.ttp-depth-art .ttt-over p { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  body.ttp-depth-art .hud .ttt-turn,
  body.ttp-depth-art .hud .ttt-hudr { flex: 1 1 100%; }
  body.ttp-depth-art .hud .ttt-hudr .btn { flex: 1 1 100px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ttp-depth-art .game-wrap .btn { transition: none; }
}