/* Local refinement of the original design; keep artwork and card arrangements. */
body[data-page] :is(button, a, [role="button"]):focus-visible {
  outline: 2px solid #f4dfa0 !important;
  outline-offset: 4px !important;
}

/* Returning through site navigation should show the destination immediately. */
html.is-internal-navigation body.motion-polish-enabled.home-landing-state :is(.home-topbar, .home-heading, .home-subcopy, .home-start-button),
html.is-internal-navigation body.motion-polish-enabled.home-landing-state .home-card-shell img {
  animation: none !important;
}

html.is-internal-navigation body.motion-interaction-enabled[data-page="meanings"] .meaning-library-card:not(.motion-in-view) {
  opacity: 1 !important;
  transform: none !important;
}

/* The original 650px stage clips on short/narrow desktop windows. */
@media (min-width: 900px) and (max-width: 1439px), (min-width: 900px) and (max-height: 899px) {
  body[data-page="draw"]:not(.home-landing-state):not(.draw-result-reference-scale) {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body[data-page="draw"]:not(.home-landing-state):not(.draw-result-reference-scale) .app-shell {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .oracle-desk:not(.is-reading-complete) {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 24px !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .card-grid.selection-mode:has(.tw-eleven-grid) {
    height: auto !important;
    min-height: 0 !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .selection-grid.tw-eleven-grid {
    height: 460px !important;
    min-height: 0 !important;
    transform: translateY(-8px) scale(var(--compact-desk-scale, 0.7)) !important;
    transform-origin: 50% 0 !important;
    margin-bottom: calc(460px * (var(--compact-desk-scale, 0.7) - 1)) !important;
  }

  /* Match the original rule's specificity so its -140px margin cannot win. */
  body[data-page="draw"]:not(.home-landing-state) .card-grid.selection-mode:has(.tw-eleven-grid) .draw-stage-actions {
    margin-top: 16px !important;
  }
}

/* Use the mobile table's space for the existing four rows and guide button. */
@media (max-width: 899px) {
  /* Let one table background fill the space below the actual header height. */
  body[data-page="draw"]:not(.home-landing-state):not(.draw-result-reference-scale) .app-shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    height: auto !important;
  }

  body[data-page="draw"]:not(.home-landing-state):not(.draw-result-reference-scale) .home-landing {
    flex: 0 0 auto !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .oracle-desk:not(.is-reading-complete) {
    flex: 1 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .oracle-desk:not(.is-reading-complete) .spread-section {
    height: auto !important;
    min-height: 0 !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .oracle-desk:not(.is-reading-complete) .spread-section > .section-heading {
    display: block !important;
    /* Keep the deck in place when the mode controls leave during the final flip. */
    min-height: 44px !important;
    margin-bottom: 0 !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .oracle-desk:not(.is-reading-complete) .section-heading::before,
  body[data-page="draw"]:not(.home-landing-state) .oracle-desk:not(.is-reading-complete) .section-heading::after {
    display: none !important;
  }

  /* Keep the section's accessible name while removing the visible title. */
  body[data-page="draw"]:not(.home-landing-state) .oracle-desk:not(.is-reading-complete) #spread-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .oracle-desk:not(.is-reading-complete) .draw-mode-tools {
    margin-bottom: 0 !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .card-grid.selection-mode:has(.mobile-four-row-grid) {
    gap: 0 !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .selection-grid.mobile-four-row-grid {
    height: auto !important;
    margin-top: clamp(20px, 3.5dvh, 32px) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .card-grid.selection-mode:has(.mobile-four-row-grid) .draw-stage-actions {
    margin-top: 16px !important;
  }
}

@media (max-width: 899px) and (max-height: 600px) {
  body[data-page="draw"]:not(.home-landing-state) .oracle-desk:not(.is-reading-complete) {
    padding-top: 8px !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .selection-grid.mobile-four-row-grid {
    margin-top: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body[data-page="draw"]:not(.home-landing-state) .card-grid.selection-mode:has(.mobile-four-row-grid) .draw-stage-actions {
    margin-top: 8px !important;
  }
}

/* Mobile theme buttons follow each spread's occupied height, not one baseline. */
@media (max-width: 680px) {
  body[data-page="theme-draw"] .theme-oracle-stage[data-theme="energy"][data-energy-layout="c"] .theme-guide-button {
    bottom: max(calc(env(safe-area-inset-bottom, 0px) + 10px), clamp(24px, calc(30svh - 150px), 112px)) !important;
  }

  body[data-page="theme-draw"] .theme-oracle-stage[data-theme="chakra"] .theme-guide-button {
    bottom: max(calc(env(safe-area-inset-bottom, 0px) + 10px), clamp(24px, calc(30svh - 162px), 100px)) !important;
  }

  body[data-page="theme-draw"] .theme-oracle-stage[data-theme="shadow"] .theme-guide-button {
    bottom: max(calc(env(safe-area-inset-bottom, 0px) + 10px), clamp(10px, calc(19svh - 122px), 72px)) !important;
  }
}

/* Three shadow rows need their own card-height cap in a short browser window.
   Adjacent row centres are 31% of the fan height; card width/height is 0.63. */
@media (max-width: 680px) and (max-height: 640px) {
  body[data-page="theme-draw"] .theme-deck-fan[data-theme="shadow"] .theme-deck-card {
    width: min(var(--card-width), 18.2vw, calc((100svh - 244px) * 0.1953 - 6px)) !important;
  }
}

/* Full meanings remain in the existing gold-framed dialog, with readable type. */
@media (max-width: 860px) {
  body[data-page] .card-dialog {
    height: auto !important;
  }

  body[data-page] .dialog-body {
    max-height: calc(100dvh - 20px) !important;
    grid-template-rows: max-content max-content !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  body[data-page] .dialog-text p:not(.eyebrow) {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  body[data-page] .dialog-text .keywords span {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  body[data-page] .dialog-close {
    width: 44px !important;
    height: 44px !important;
    top: 6px !important;
    right: 6px !important;
  }
}