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

body.pd-depth-art { background: var(--pd-art-page); color: var(--pd-art-ink); }
body.pd-depth-art .game-wrap {
  width: 100%;
  max-width: 640px;
  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));
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
body.pd-depth-art .pd-how { color: var(--pd-art-muted); font-size: .875rem; line-height: 1.5; }
body.pd-depth-art .pd-hud { display: flex; flex-wrap: wrap; gap: 10px 16px; padding-block: 12px; }
body.pd-depth-art .pd-hud > span { min-width: 0; overflow-wrap: anywhere; }
body.pd-depth-art .pd-hud b { color: var(--pd-art-brass); }
body.pd-depth-art .pd-table {
  border-color: var(--pd-art-brass);
  background: url('./assets/depth-felt-inlay.svg') center / 100% 100% no-repeat, var(--pd-art-felt);
  padding: 12px 8px 18px;
  box-shadow: inset 0 0 16px #08281980, 0 4px 0 #5e350c;
}
body.pd-depth-art #pd-table #status {
  color: #fef3c7;
  background: var(--pd-art-panel);
  border: 1px solid #d9b67580;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.4;
  padding: 10px;
  overflow-wrap: anywhere;
}
body.pd-depth-art .pd-preview { color: var(--pd-art-hint); font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
body.pd-depth-art .pd-dice {
  flex-wrap: wrap;
  column-gap: var(--pd-art-column-gap);
  row-gap: var(--pd-art-row-gap);
  padding: 16px 6px 32px;
}
/* Retain the native nine cells and all six actual PIPS patterns, including red accents. */
body.pd-depth-art .pd-die {
  --s: var(--pd-art-die);
  background: url('./assets/depth-die-edge.svg') center / 100% 100% no-repeat, var(--pd-art-paper);
  border-color: #d4c4a4;
  box-shadow: 0 4px 0 #b6a07a, 0 6px 10px #072d1b99;
}
body.pd-depth-art .pd-die.part { border-color: var(--pd-art-part); }
body.pd-depth-art .pd-die[aria-pressed='true'] {
  border-color: var(--pd-art-brass);
  box-shadow: 0 4px 0 #a16207, 0 0 0 3px var(--pd-art-gold), 0 10px 14px #072d1b99;
}
body.pd-depth-art .pd-die[aria-pressed='true']::after {
  content: 'HELD';
  bottom: -24px;
  min-height: 20px;
  padding: 3px 6px;
  border-radius: 4px;
  color: #422006;
  background: var(--pd-art-gold);
  font-size: .6875rem;
  line-height: 1.2;
  letter-spacing: .05em;
}
body.pd-depth-art .pd-rolls { margin: 6px 0 12px; }
body.pd-depth-art .pd-controls { flex-wrap: wrap; gap: 12px; padding-inline: 4px; }
body.pd-depth-art .game-wrap .btn {
  min-height: var(--pd-art-touch);
  min-width: var(--pd-art-touch);
  padding: 10px 16px;
  background: var(--pd-art-brass);
  color: #fffdf5;
  border-radius: 8px;
  font-size: .9375rem;
  line-height: 1.3;
  white-space: normal;
  box-shadow: 0 3px 0 #5e350c;
}
body.pd-depth-art .game-wrap .pd-hud .btn { min-height: var(--pd-art-touch); }
body.pd-depth-art .pd-controls .btn { flex: 1 1 140px; min-width: 0; font-size: 1rem; }
body.pd-depth-art .game-wrap .pd-roll { color: #422006; background: var(--pd-art-gold); }
body.pd-depth-art .pd-over .btn { background: var(--pd-art-gold); color: #422006; }
body.pd-depth-art .game-wrap .btn:hover { transform: none; }
body.pd-depth-art .pd-streak { color: #fde68a; font-size: .875rem; line-height: 1.4; }
body.pd-depth-art .pd-log { gap: 8px; }
body.pd-depth-art .pd-log li { font-size: .8rem; border-radius: 6px; padding: 5px 8px; }
body.pd-depth-art .pd-chart { font-size: .875rem; padding: 8px 12px; }
body.pd-depth-art .pd-chart summary { min-height: var(--pd-art-touch); display: list-item; padding-block: 12px; line-height: 1.4; }
body.pd-depth-art .pd-chart li { gap: 12px; padding-block: 5px; }
body.pd-depth-art .pd-chart .note { font-size: .8125rem; line-height: 1.5; }
body.pd-depth-art .pd-over { overflow-y: auto; }
body.pd-depth-art .pd-over > * { max-width: 100%; overflow-wrap: anywhere; }
body.pd-depth-art :is(.pd-die, .btn, .pd-chart summary):focus-visible { outline: 3px solid #fde68a; outline-offset: 4px; }
body.pd-depth-art .game-wrap .btn:focus-visible,
body.pd-depth-art .pd-chart summary:focus-visible { outline-color: #7c2d12; }

@media (max-width: 360px) {
  body.pd-depth-art .pd-die { --s: var(--pd-art-die-small); }
}
@media (min-width: 600px) {
  body.pd-depth-art .pd-die { --s: var(--pd-art-die-wide); }
}
@media (prefers-reduced-motion: reduce) {
  body.pd-depth-art :is(.pd-die, .pd-pop, .pd-spark, .pd-table, .btn) { animation: none !important; transition: none !important; }
  body.pd-depth-art :is(.pd-pop, .pd-spark) { display: none; }
}