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

/* Celadon writing tray. Original square geometry and every state wash stay. */
body.sz-depth-art .game-wrap {
  background-color: var(--sz-art-glaze);
  background-image: url('./assets/depth-celadon-glaze.svg');
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
body.sz-depth-art .sz-board-wrap { box-shadow: 0 6px 0 #b5c9bd; border-radius: 10px; }
body.sz-depth-art .c { color: var(--sz-art-entry); }
body.sz-depth-art .c.given { color: var(--sz-art-ink); }
body.sz-depth-art .c.wrong { color: var(--sz-art-error); }
body.sz-depth-art .c .nt { color: var(--sz-art-note); }
body.sz-depth-art .c .nt i.hl { color: var(--sz-art-entry); }
body.sz-depth-art .sz-stat small,
body.sz-depth-art .sz-howto,
body.sz-depth-art .sz-opt { color: var(--sz-art-note); }
body.sz-depth-art .sz-stat small { font-size: .72rem; }
body.sz-depth-art .sz-stat b { overflow-wrap: anywhere; }
body.sz-depth-art .sz-modes { border: 1px solid var(--sz-art-border); }
body.sz-depth-art .sz-modes button,
body.sz-depth-art .game-wrap .btn,
body.sz-depth-art .game-wrap .hud .btn,
body.sz-depth-art .sz-link,
body.sz-depth-art #sz-lens :is(summary, button) {
  min-height: var(--sz-art-touch);
  min-width: var(--sz-art-touch);
  max-width: 100%;
  white-space: normal;
}
body.sz-depth-art .sz-hud { flex-wrap: wrap; }
body.sz-depth-art .sz-opt { min-height: var(--sz-art-touch); flex-wrap: wrap; }
body.sz-depth-art .sz-key:not(.full) { background: var(--sz-art-entry); }
body.sz-depth-art .pencil .sz-key:not(.full) { background: #fff; color: var(--sz-art-entry); }
body.sz-depth-art .sz-key small { opacity: 1; font-size: .68rem; }
body.sz-depth-art .sz-tool span { color: var(--sz-art-note); }
body.sz-depth-art .sz-tool[aria-pressed="true"] span { color: #fff; }
@media (max-width: 768px) {
  body.sz-depth-art #color-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.sz-depth-art .sz-key { min-width: var(--sz-art-touch); }
}
@media (max-width: 420px) {
  body.sz-depth-art .sz-hud #sz-new { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.sz-depth-art .game-wrap .btn { transition: none; }
}