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

body.speed-depth-art { background: var(--sp-art-page); color: var(--sp-art-ink); }
body.speed-depth-art .game-wrap {
  width: 100%; max-width: 640px; 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.speed-depth-art .game-header { flex-wrap: wrap; gap: 4px 16px; }
body.speed-depth-art .game-header a { display: inline-flex; align-items: center; min-height: var(--sp-art-touch); color: var(--sp-art-copper); }
body.speed-depth-art .game-header .game-tag { overflow-wrap: anywhere; }
body.speed-depth-art .facts span { color: var(--sp-art-copper); background: #fcebd2; }
body.speed-depth-art .hud { flex-wrap: wrap; gap: 12px; }
body.speed-depth-art #status { font-size: .9375rem; line-height: 1.45; overflow-wrap: anywhere; }
body.speed-depth-art .sc-board {
  min-height: 380px; padding: 16px 12px;
  background: url('./assets/depth-felt-inlay.svg') center / 100% 100% no-repeat, var(--sp-art-felt);
  box-shadow: inset 0 0 0 2px #0d3526, 0 4px 0 #73512b;
}
body.speed-depth-art .sc-row,
body.speed-depth-art .sc-meta { gap: 8px; min-width: 0; font-size: .8125rem; }
body.speed-depth-art .sc-cpu-hand { gap: 6px; margin: 12px 0 8px; min-height: 51px; }
body.speed-depth-art .sc-back { width: 36px; height: 50.4px; background: url('./assets/depth-card-back.svg') center / 100% 100% no-repeat, var(--sp-art-copper); }
body.speed-depth-art .sc-mid { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; margin: 16px 0; }
body.speed-depth-art .sc-side { width: 44px; height: 68px; color: #dcfce7; font-size: .9375rem; }
body.speed-depth-art .sc-side.has { background: url('./assets/depth-card-back.svg') center / 100% 100% no-repeat, #154734; color: #fff; }
body.speed-depth-art .sc-pile { width: min(100%, 88px); }
body.speed-depth-art .sc-card { background: url('./assets/depth-cardstock.svg') center / 100% 100% no-repeat, var(--sp-art-paper); }
body.speed-depth-art .sc-card .c { font-size: 16px; }
body.speed-depth-art .sc-hand { grid-template-columns: repeat(3, var(--sp-art-card)); justify-content: center; gap: var(--sp-art-gap); margin-top: 12px; }
body.speed-depth-art .sc-hand .sc-card { font-size: 1.8rem; min-width: var(--sp-art-touch); }
/* Empty/disabled and legal/bad/glow states remain original native facts. */
body.speed-depth-art .sc-hand .sc-card.empty { background: transparent; }
body.speed-depth-art .sc-foot { flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; font-size: .8125rem; line-height: 1.4; }
body.speed-depth-art .sc-foot > span { overflow-wrap: anywhere; }
body.speed-depth-art .game-wrap .btn,
body.speed-depth-art .sc-lvl {
  min-height: var(--sp-art-touch); min-width: var(--sp-art-touch); padding: 10px 16px;
  font-size: .9375rem; line-height: 1.35; white-space: normal;
}
body.speed-depth-art .game-wrap .btn { color: var(--sp-art-paper); background: var(--sp-art-copper); border-radius: 8px; }
body.speed-depth-art .game-wrap .hud .btn { min-height: var(--sp-art-touch); }
body.speed-depth-art .sc-lvl[aria-pressed='true'] { background: var(--sp-art-copper); }
body.speed-depth-art .sc-lvls { flex-wrap: wrap; justify-content: center; }
body.speed-depth-art .sc-over { justify-content: flex-start; overflow-y: auto; padding: 16px; }
body.speed-depth-art .sc-over h2 { margin-top: auto; }
body.speed-depth-art .sc-over > :last-child { margin-bottom: auto; flex: 0 0 auto; }
body.speed-depth-art .sc-over p { font-size: .875rem; }
body.speed-depth-art .sc-stats div { font-size: .8125rem; line-height: 1.4; padding: 8px 4px; overflow-wrap: anywhere; }
body.speed-depth-art .sc-stats b { font-size: 1rem; }
body.speed-depth-art #sc-chain-guide button { min-height: var(--sp-art-touch); min-width: var(--sp-art-touch); }
body.speed-depth-art #sc-chain-guide button:focus-visible { outline: 3px solid var(--sp-art-copper); outline-offset: 3px; }
body.speed-depth-art .game-wrap .btn:focus-visible { outline: 3px solid var(--sp-art-copper); outline-offset: 3px; }
body.speed-depth-art .sc-over .btn:focus-visible { outline-color: var(--sp-art-focus); }
@media (max-width: 360px) {
  body.speed-depth-art .sc-hand { grid-template-columns: repeat(3, var(--sp-art-card-small)); }
}
@media (min-width: 600px) {
  body.speed-depth-art .sc-hand { grid-template-columns: repeat(5, var(--sp-art-card-wide)); }
}
@media (prefers-reduced-motion: reduce) {
  body.speed-depth-art :is(.sc-card, .sc-back, .sc-pile, #status, .sc-chain, .sc-bar i, .btn) { animation: none !important; transition: none !important; }
  body.speed-depth-art .sc-bit { display: none; }
}