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

body.war-depth-art { background: var(--war-art-page); color: var(--war-art-ink); }
body.war-depth-art .game-wrap {
  width: 100%; max-width: 640px; border: 0; box-shadow: none; background: transparent; overflow: visible;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
body.war-depth-art .game-header { flex-wrap: wrap; gap: 4px 16px; background: var(--war-art-paper); border-bottom-color: var(--war-art-claret); }
body.war-depth-art .game-header a { display: inline-flex; align-items: center; min-height: var(--war-art-touch); color: var(--war-art-claret); }
body.war-depth-art .game-tag { overflow-wrap: anywhere; }
body.war-depth-art .hud { flex-wrap: wrap; gap: 12px; font-size: .8125rem; }
body.war-depth-art .facts span { background: #f2e0da; color: var(--war-art-claret); }
body.war-depth-art #status { font-size: .9375rem; line-height: 1.45; overflow-wrap: anywhere; }
body.war-depth-art .wc-how { font-size: .8125rem; line-height: 1.45; color: var(--war-art-muted); }
body.war-depth-art .wc-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.war-depth-art .wc-mode { min-width: 0; min-height: var(--war-art-touch); }
body.war-depth-art .wc-mode small { font-size: .6875rem; line-height: 1.25; }
body.war-depth-art #card-grid { min-height: 272px; }
body.war-depth-art .wc-table {
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); gap: 8px;
  padding: 18px 18px 22px; border-radius: 14px;
  background: url('./assets/depth-felt-inlay.svg') center / 100% 100% no-repeat, var(--war-art-felt);
}
body.war-depth-art .wc-lbl { font-size: .875rem; color: var(--war-art-paper); }
body.war-depth-art .wc-lbl b { color: var(--war-art-paper); }
body.war-depth-art .wc-slot { width: var(--war-art-face); margin-top: 24px; }
body.war-depth-art .wc-card {
  background: url('./assets/depth-cardstock.svg') center / 100% 100% no-repeat, var(--war-art-paper);
  color: var(--war-art-ink); border-color: var(--war-art-ink);
}
body.war-depth-art .wc-card.red { color: var(--war-art-claret); }
body.war-depth-art .wc-card .i { font-size: 19px; line-height: 1; }
body.war-depth-art .wc-card .pip { font-size: 40px; }
body.war-depth-art .wc-card.face .rank { font-size: 42px; }
body.war-depth-art .wc-card.back,
body.war-depth-art .wc-downs span,
body.war-depth-art .wc-hand .back {
  background: url('./assets/depth-card-back.svg') center / 100% 100% no-repeat, var(--war-art-claret);
}
body.war-depth-art .wc-card.empty { background: transparent; }
body.war-depth-art .wc-mid { min-width: 0; align-self: start; }
body.war-depth-art .wc-vs { max-width: 100%; padding: 6px 4px; font-size: .8125rem; color: var(--war-art-ink); text-align: center; overflow-wrap: anywhere; }
body.war-depth-art .wc-vs.war { color: #fff; }
body.war-depth-art .wc-pot { font-size: .75rem; line-height: 1.35; color: var(--war-art-paper); overflow-wrap: anywhere; }
/* The original peek / win / lose / beats / ties classes retain their cues. */
body.war-depth-art .wc-hand { flex-wrap: wrap; gap: var(--war-art-gap); padding: 0 0 10px; margin: 18px 0 6px; }
body.war-depth-art .wc-hand button { flex: 0 0 var(--war-art-hand); width: var(--war-art-hand); min-width: var(--war-art-touch); min-height: var(--war-art-touch); }
body.war-depth-art .wc-hand button .wc-card .pip { font-size: 32px; }
body.war-depth-art .wc-hand button .wc-card.face .rank { font-size: 36px; }
body.war-depth-art .wc-hand kbd { font-size: .75rem; }
body.war-depth-art .game-wrap .btn {
  min-height: 52px; min-width: var(--war-art-touch); padding: 10px 16px;
  white-space: normal; font-size: .9375rem; line-height: 1.35; background: var(--war-art-claret); color: #fff;
}
body.war-depth-art .game-wrap .hud .btn { min-height: 52px; }
body.war-depth-art .game-wrap .btn.wc-alt[aria-pressed='true'] { background: var(--war-art-ink); }
/* Native result appears in document flow so its buttons stay reachable. */
body.war-depth-art .wc-over { position: relative; inset: auto; margin-top: 16px; padding: 8px 0; background: transparent; backdrop-filter: none; }
body.war-depth-art .wc-over-in { max-width: 380px; background: var(--war-art-paper); }
body.war-depth-art .wc-over p { line-height: 1.45; overflow-wrap: anywhere; }
body.war-depth-art .wc-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 320px; gap: 8px; font-size: .8125rem; }
body.war-depth-art .wc-stats :is(dt, dd) { overflow-wrap: anywhere; }
body.war-depth-art .game-wrap .btn:focus-visible,
body.war-depth-art .wc-mode:focus-visible,
body.war-depth-art .wc-hand button:focus-visible { outline: 3px solid var(--war-art-focus); outline-offset: 3px; }
@media (max-width: 360px) {
  body.war-depth-art .game-wrap { padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  body.war-depth-art :is(.wc-card, .wc-downs span, .wc-vs, .wc-lbl b, .wc-over-in, .wc-hand button, .wc-meter i) { animation: none !important; transition: none !important; }
  body.war-depth-art .wc-fx { display: none; }
}