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

/* Material only on the existing surfaces. The 32 scene palettes, --wheel,
   --letter, --cell, --gap, card coordinates and native reveal selectors stay
   in the original renderer/style. Grid cells retain their native 22–46px size. */
body.ww-depth-art .ww-hud {
  background: var(--ww-art-paper);
  color: var(--ww-art-ink);
  border-bottom: 1px solid var(--ww-art-paper-edge);
  gap: 4px;
}
body.ww-depth-art .ww-hud__title { min-width: 0; }
body.ww-depth-art :is(.ww-hud__pack, .ww-hud__level, .ww-hud__progress) {
  color: var(--ww-art-ink);
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.ww-depth-art .ww-hud__pack { opacity: 1; }
body.ww-depth-art .ww-hud__progress { font-size: 12px; line-height: 1.4; }
body.ww-depth-art :is(.ww-hud__btn, .ww-coins) {
  min-height: var(--ww-art-control);
  flex-shrink: 0;
  background: var(--ww-art-paper-edge);
  color: var(--ww-art-amber-dark);
}
body.ww-depth-art .ww-hud__btn { min-width: var(--ww-art-control); }
body.ww-depth-art .ww-board__plank {
  background-color: var(--ww-art-walnut);
  background-image: url('./assets/depth-walnut-grain.webp');
  background-size: 512px auto;
  /* The original 12px padding, 3px border and all grid dimensions are kept. */
}
body.ww-depth-art .ww-cell:not(.ww-cell--void) {
  background-color: var(--ww-art-paper);
  background-image: url('./assets/depth-cellstock.svg');
  color: var(--ww-art-ink);
}
body.ww-depth-art .ww-wheel {
  background: var(--ww-art-paper) url('./assets/depth-wheel-rim.svg') center / 100% 100% no-repeat;
  border-color: var(--ww-art-walnut);
}
body.ww-depth-art .ww-wheel::before { border-color: var(--ww-art-paper-edge); }
body.ww-depth-art .ww-letter {
  background: var(--ww-art-paper);
  color: var(--ww-art-ink);
  text-shadow: none;
  box-shadow: 0 3px 0 var(--ww-art-paper-edge), 0 4px 8px #451a0326;
}
body.ww-depth-art .ww-letter.is-on {
  background: var(--ww-art-amber-dark);
  color: var(--ww-art-paper);
  box-shadow: 0 3px 0 var(--ww-art-walnut), 0 0 0 2px var(--ww-art-paper);
}
body.ww-depth-art .is-drawing .ww-letter:not(.is-on) { opacity: .85; }
body.ww-depth-art :is(.ww-tool, .ww-wheel__shuffle) {
  background: var(--ww-art-paper);
  color: var(--ww-art-amber-dark);
}
body.ww-depth-art .ww-tool.is-active { background: var(--ww-art-amber-dark); color: var(--ww-art-paper); }
body.ww-depth-art :is(.ww-tool__price, .ww-jar__count) { font-size: 12px; line-height: 1.3; }
body.ww-depth-art .ww-jar__count { color: var(--ww-art-jar); }
body.ww-depth-art :is(.ww-wheel__enter, .ww-hunt, .ww-onboard__skip, .btn, .ww-cal__nav, .ww-cal__day, .ww-toggle) {
  min-height: var(--ww-art-control);
}
body.ww-depth-art .ww-wheel__enter {
  background: var(--ww-art-amber-dark);
  color: var(--ww-art-paper);
}
body.ww-depth-art .ww-play { padding-bottom: 68px; }
body.ww-depth-art .ww-ribbon__text { color: var(--ww-art-ink); background: var(--ww-art-paper); }
body.ww-depth-art .ww-ribbon__text.is-good { background: var(--ww-art-good); color: var(--ww-art-paper); }
body.ww-depth-art .ww-ribbon__text.is-bad { background: var(--ww-art-bad); color: var(--ww-art-paper); }
body.ww-depth-art .ww-ribbon__text.is-bonus { background: var(--ww-art-bonus); color: var(--ww-art-paper); }
body.ww-depth-art :is(button, a, [tabindex]):focus-visible {
  outline: 3px solid var(--ww-art-focus);
  outline-offset: 3px;
}
body.ww-depth-art .overlay {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
body.ww-depth-art .sheet {
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
  overflow-x: hidden;
  overscroll-behavior: contain;
}
body.ww-depth-art :is(.ww-streak, .ww-jarline, .sheet-actions) { flex-wrap: wrap; gap: var(--ww-art-gap); }
body.ww-depth-art .ww-cal {
  grid-template-columns: repeat(7, minmax(var(--ww-art-control), 1fr));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: var(--ww-art-gap);
  scrollbar-color: var(--ww-art-walnut) var(--ww-art-paper-edge);
  scrollbar-width: auto;
}
body.ww-depth-art .ww-cal__day { min-width: var(--ww-art-control); }
@media (max-width: 359px) {
  body.ww-depth-art .ww-hud { padding-inline: 6px; }
  body.ww-depth-art .ww-hud__level { font-size: 19px; }
}
@media (max-width: 600px) {
  /* At375px the original56px shoulder overlaps the extreme8-letter tile.
     Utility boxes narrow to48px; wheel/grid coordinates and hit math stay native. */
  body.ww-depth-art .ww-tool { width: var(--ww-art-control); min-width: var(--ww-art-control); min-height: var(--ww-art-control); }
  body.ww-depth-art .ww-notebook-open small { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) {
  body.ww-depth-art :is(.ww-letter, .ww-tool, .ww-wheel__enter, .ww-hud__btn) { transition: none; }
}