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

body.ws-depth-art .game-wrap {
  background: var(--ws-art-porcelain) url('./assets/depth-porcelain-bench.webp') center / 512px 512px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px #d5e1d7;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
body.ws-depth-art .game-title h1 { color: var(--ws-art-ink); }
body.ws-depth-art .facts span {
  background: #e2eeea;
  color: var(--ws-art-ink);
  border-radius: 5px;
}
body.ws-depth-art .hud {
  gap: var(--ws-art-space);
  flex-wrap: wrap;
  color: var(--ws-art-ink);
}
body.ws-depth-art #move-count { min-width: 0; overflow-wrap: anywhere; }
body.ws-depth-art .ws-howto { color: var(--ws-art-quiet); }
/* Only the uncovered glass surface changes. Native liquid stays opaque above it. */
body.ws-depth-art .ws-tube {
  background: #173f4c url('./assets/depth-glass-refraction.svg') center / 100% 100%;
}
body.ws-depth-art .ws-seg { color: var(--ws-art-glyph); }
body.ws-depth-art .ws-seg[style*="#a16207"] { color: var(--ws-art-pale-glyph); }
body.ws-depth-art .ws-tool,
body.ws-depth-art .ws-preview select,
body.ws-depth-art .ws-preview button,
body.ws-depth-art .ws-preview summary,
body.ws-depth-art .ws-lv,
body.ws-depth-art .btn { min-height: var(--ws-art-touch); }
body.ws-depth-art .ws-tool,
body.ws-depth-art .ws-preview select,
body.ws-depth-art .ws-preview button {
  color: var(--ws-art-ink);
  border-color: var(--ws-art-rule);
}
body.ws-depth-art .ws-tool { border-radius: 9px; }
body.ws-depth-art .ws-tool[aria-pressed="true"],
body.ws-depth-art .btn:not(.ws-alt) {
  color: #ffffff;
  background: var(--ws-art-action);
}
body.ws-depth-art .ws-preview {
  background: #f7fbf7;
  border-color: var(--ws-art-rule);
}
body.ws-depth-art .ws-card {
  background: #ffffff url('./assets/depth-porcelain-bench.webp') center / 512px 512px;
}
body.ws-depth-art .ws-preview summary { display: list-item; }
/* Same native indices, order, cap, heights and hit handlers; extra rows flow. */
@media (max-width: 400px) {
  body.ws-depth-art #card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  body.ws-depth-art .ws-level-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* No added animation. Native reduced-motion selection, hint and pour rules apply. */