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

body.snap-depth-art { background: var(--sn-art-page); color: var(--sn-art-ink); }
body.snap-depth-art .game-wrap {
  width: 100%; max-width: 560px; border: 0; background: transparent; box-shadow: none; 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.snap-depth-art .game-header { flex-wrap: wrap; gap: 4px 16px; }
body.snap-depth-art .game-header a { display: inline-flex; align-items: center; min-height: var(--sn-art-touch); color: #991b1b; }
body.snap-depth-art .game-header .game-tag { overflow-wrap: anywhere; }
body.snap-depth-art .facts span { color: #991b1b; background: #fceae3; }
body.snap-depth-art .hud { flex-wrap: wrap; gap: 12px; }
body.snap-depth-art .snap-how { color: var(--sn-art-muted); font-size: .875rem; line-height: 1.5; }
body.snap-depth-art .snap-stats { flex-wrap: wrap; gap: 10px 16px; color: var(--sn-art-muted); font-size: .8125rem; line-height: 1.4; }
body.snap-depth-art .snap-stats > span { min-width: 0; overflow-wrap: anywhere; }
body.snap-depth-art .snap-stats b { color: var(--sn-art-ink); }
body.snap-depth-art .snap-stats .snap-lives { color: var(--sn-art-red); }
body.snap-depth-art #status { font-size: .9375rem; overflow-wrap: anywhere; }
body.snap-depth-art #status[data-tone='bad'] { color: var(--sn-art-red); }
body.snap-depth-art #status[data-tone='gold'] { color: #92400e; }
body.snap-depth-art #status[data-tone='level'] { color: #6d28d9; }
body.snap-depth-art .snap-table {
  min-height: 320px; padding: 24px 12px 16px;
  background: url('./assets/depth-felt-inlay.svg') center / 100% 100% no-repeat, var(--sn-art-felt);
  box-shadow: inset 0 0 0 2px #0c3022, 0 4px 0 #64332c;
}
body.snap-depth-art .snap-pair { gap: var(--sn-art-gap); }
body.snap-depth-art .snap-card {
  width: var(--sn-art-card); flex: 0 0 auto;
  background: url('./assets/depth-cardstock.svg') center / 100% 100% no-repeat, var(--sn-art-paper);
}
body.snap-depth-art .snap-card .r1,
body.snap-depth-art .snap-card .r2 { font-size: 22px; }
body.snap-depth-art .snap-card .pip { font-size: 50px; }
body.snap-depth-art .snap-card.back { background: url('./assets/depth-card-back.svg') center / 100% 100% no-repeat, var(--sn-art-red); }
/* Golden remains the original earned state. No art-created match or timing cue. */
body.snap-depth-art .snap-card.golden { background: url('./assets/depth-cardstock.svg') center / 100% 100% no-repeat, #fffbeb; }
body.snap-depth-art .snap-timer { height: 8px; max-width: 300px; }
body.snap-depth-art .snap-combo { font-size: 1rem; line-height: 1.4; }
body.snap-depth-art .game-wrap .btn {
  min-height: var(--sn-art-touch); min-width: var(--sn-art-touch); padding: 10px 16px;
  color: var(--sn-art-paper); background: var(--sn-art-red); border-radius: 8px;
  font-size: .9375rem; line-height: 1.35; white-space: normal;
}
body.snap-depth-art .game-wrap .hud .btn { min-height: var(--sn-art-touch); }
body.snap-depth-art #color-btns .snap-btn { min-height: 72px; max-width: 360px; font-size: 1.6rem; }
body.snap-depth-art .snap-overlay { justify-content: flex-start; overflow-y: auto; padding: 16px; }
body.snap-depth-art .snap-overlay h2 { margin-top: auto; }
body.snap-depth-art .snap-overlay .btn { margin-bottom: auto; flex: 0 0 auto; }
body.snap-depth-art .snap-overlay p { font-size: .875rem; line-height: 1.5; }
body.snap-depth-art .snap-ov-stats { font-size: .8125rem; line-height: 1.4; gap: 4px 16px; }
body.snap-depth-art .snap-ov-stats dt { color: #cbd5e1; }
body.snap-depth-art .snap-drill .btn { min-height: var(--sn-art-touch); }
body.snap-depth-art .game-wrap .btn:focus-visible { outline: 3px solid #7f1d1d; outline-offset: 3px; }
body.snap-depth-art .snap-overlay .btn:focus-visible { outline-color: var(--sn-art-gold); }
@media (max-width: 360px) {
  body.snap-depth-art .snap-card { width: var(--sn-art-card-small); }
  body.snap-depth-art .snap-pair { gap: 20px; }
}
@media (min-width: 600px) {
  body.snap-depth-art .snap-card { width: var(--sn-art-card-wide); }
  body.snap-depth-art .snap-pair { gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  body.snap-depth-art :is(.snap-table, .snap-card, .snap-btn, .btn) { animation: none !important; transition: none !important; }
  body.snap-depth-art :is(.snap-float, .snap-spark) { display: none; }
}