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

/* Original court faces, ornate backs and live legal/motion classes are retained. */
body.ps-depth-art {
  --card-width: var(--ps-art-card-width);
  --card-height: var(--ps-art-card-height);
  --tableau-gap: var(--ps-art-space);
  background: var(--ps-art-felt-deep);
}
body.ps-depth-art #game-app {
  min-height: 0;
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
body.ps-depth-art .table-felt {
  flex: initial;
  min-width: 0;
  background: var(--ps-art-felt);
  border-color: #38270e;
  box-shadow: inset 0 0 24px #072b1a80, 0 4px 14px #071b1680;
}
body.ps-depth-art .table-felt::before {
  background: url('./assets/depth-felt-inlay.svg') center top / 720px 480px repeat-y;
  opacity: 1;
}
body.ps-depth-art :is(.hud-bar, .bottom-bar) {
  background: var(--ps-art-panel);
  backdrop-filter: none;
  border-color: #cba45766;
  flex-wrap: wrap;
  gap: var(--ps-art-space);
  padding: 10px;
}
body.ps-depth-art .hud-stat__label { color: var(--ps-art-muted); font-size: .75rem; }
body.ps-depth-art .hud-stat__value { font-size: 1.05rem; overflow-wrap: anywhere; }
body.ps-depth-art .hud-group { flex: 1; justify-content: space-between; min-width: 0; }
body.ps-depth-art .hud-tools { flex-wrap: wrap; gap: 8px; }
body.ps-depth-art .btn-pill {
  min-height: var(--ps-art-touch);
  min-width: var(--ps-art-touch);
  justify-content: center;
  white-space: normal;
  font-size: .875rem;
  line-height: 1.3;
  padding: 8px 10px;
}
body.ps-depth-art .btn-pill:hover:not(:disabled) { transform: none; }
body.ps-depth-art .btn-pill--primary {
  color: var(--ps-art-ink);
  background: var(--ps-art-gold);
}
body.ps-depth-art :is(.deal-bar, .bottom-bar__left, .bottom-bar__right, .modal-actions) {
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
body.ps-depth-art .how-line { color: var(--ps-art-muted); font-size: .8125rem; line-height: 1.5; }

/* Full-size seven-column rack, with native scrollbars instead of squeezed cards. */
body.ps-depth-art :is(.top-row, .tableau-grid) {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: #d4b774 var(--ps-art-panel);
  scrollbar-width: auto;
  padding: 8px 6px 20px;
  scroll-padding-inline: 6px;
}
body.ps-depth-art :is(.top-row, .tableau-grid)::-webkit-scrollbar { height: 10px; }
body.ps-depth-art :is(.top-row, .tableau-grid)::-webkit-scrollbar-track { background: var(--ps-art-panel); }
body.ps-depth-art :is(.top-row, .tableau-grid)::-webkit-scrollbar-thumb { background: #d4b774; border-radius: 6px; }
body.ps-depth-art .top-row { justify-content: space-between; align-items: flex-start; }
body.ps-depth-art :is(.stock-waste-group, .foundations-group, .card-slot) { flex-shrink: 0; }
/* Original Draw-3 renderer offsets two underlying cards by round(84 * .3)=25px. */
body.ps-depth-art .stock-waste-group { padding-right: 52px; }
body.ps-depth-art .card-slot { border-color: #adcdb5a6; }
body.ps-depth-art .watermark-symbol { opacity: 1; font-size: 1.8rem; }
body.ps-depth-art :is(.watermark--spades, .watermark--clubs) { color: var(--ps-art-text); }
body.ps-depth-art :is(.watermark--hearts, .watermark--diamonds) { color: #fecaca; }
body.ps-depth-art .stock-count-badge { font-size: .8rem; min-width: 28px; padding: 3px 5px; }
body.ps-depth-art .recycle-prompt { font-size: .75rem; opacity: 1; }
body.ps-depth-art .tableau-grid {
  grid-template-columns: repeat(7, var(--ps-art-card-width));
  align-items: start;
  min-height: 0;
}
/* Override only tableau paint geometry. The renderer's inline top/min-height,
   original card order and delegated handlers are unchanged. Drag reads real
   consecutive rectangles and its separate drag-layer clones remain absolute. */
body.ps-depth-art .tableau-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: var(--ps-art-card-height) !important;
}
body.ps-depth-art .tableau-col > .card {
  position: relative;
  top: auto !important;
  left: auto;
  flex: 0 0 var(--ps-art-card-height);
  margin-bottom: calc(var(--ps-art-up-step) - var(--ps-art-card-height));
}
body.ps-depth-art .tableau-col > .card--facedown {
  margin-bottom: calc(var(--ps-art-down-step) - var(--ps-art-card-height));
}
body.ps-depth-art .tableau-col > .card:last-child { margin-bottom: 0; }
body.ps-depth-art .tableau-empty-slot { color: var(--ps-art-muted); border-color: #adcdb5a6; }
body.ps-depth-art .card__face--front .card-bg { fill: var(--ps-art-paper); }
body.ps-depth-art .card__face--front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('./assets/depth-cardstock.svg') center / 100% 100%;
  pointer-events: none;
}
body.ps-depth-art :is(.card, .stock-slot, .btn-pill):focus-visible {
  outline: 3px solid var(--ps-art-focus);
  outline-offset: 3px;
}
body.ps-depth-art .overlay-backdrop {
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}
body.ps-depth-art .modal-sheet { max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px))); overflow-y: auto; padding: 18px; }
body.ps-depth-art .game-toast { border-radius: 12px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 600px) {
  body.ps-depth-art .hud-group { flex-basis: 100%; }
  body.ps-depth-art .hud-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  body.ps-depth-art .hud-tools .btn-pill { flex: initial; font-size: .875rem; padding: 8px; }
  body.ps-depth-art .bottom-bar > div { width: 100%; display: flex; }
  body.ps-depth-art .bottom-bar .btn-pill { flex: 1 1 100px; }
  body.ps-depth-art .modal-actions .btn-pill { flex: 1 1 100px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Original cascade timers/RNG remain owned by the controller; suppress paint. */
  body.ps-depth-art .cascade-canvas { display: none; }
  body.ps-depth-art :is(.card, .card__inner, .card-slot, .btn-pill, .modal-sheet, .overlay-backdrop, .game-toast) {
    animation: none !important;
    transition: none !important;
  }
  body.ps-depth-art .is-hint-src { transform: none; }
}