/* Shared ritual viewport: independent scroll viewport + real, persistent action row.
   Keeping controls in a grid row avoids fixed-position containing-block and scene clipping bugs. */
body.jy-atelier dialog.jr-dialog[open] {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  height: 100vh !important;
  height: 100svh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  overscroll-behavior: none;
  box-sizing: border-box;
}

body.jy-atelier dialog.jr-dialog > .jr-scroll {
  grid-row: 1;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body.jy-atelier dialog.jr-dialog > .jr-scroll::-webkit-scrollbar {
  display: none;
}

body.jy-atelier dialog.jr-dialog .jr-shell {
  height: auto !important;
  min-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)) !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 20px !important;
}

body.jy-atelier dialog.jr-dialog > .jr-action-dock {
  position: relative !important;
  z-index: 2147482001 !important;
  grid-row: 2;
  inset: auto !important;
  width: 100% !important;
  max-width: 620px !important;
  min-width: 0;
  margin: 0 auto !important;
  padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  pointer-events: auto !important;
  background: linear-gradient(180deg, rgba(5, 11, 19, .94), rgba(5, 11, 19, .99));
  border-top: 1px solid rgba(222, 200, 158, .24);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .42);
}

body.jy-atelier dialog.jr-dialog > .jr-action-dock > .jr-footer {
  grid-row: 1;
  min-width: 0;
  margin: 0 !important;
  padding: 4px 8px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(222, 200, 158, .32);
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(17, 29, 41, .98), rgba(7, 14, 25, .99));
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .34);
}

body.jy-atelier dialog.jr-dialog > .jr-action-dock > .jr-footer ol {
  min-width: 0;
  margin: 0;
  gap: clamp(5px, 2vw, 10px) !important;
  flex-wrap: wrap;
}

body.jy-atelier dialog.jr-dialog > .jr-action-dock > .jr-footer .jr-skip {
  min-height: 40px !important;
  padding-inline: 8px !important;
  white-space: nowrap;
}

body.jy-atelier dialog.jr-dialog > .jr-action-dock > .jr-next {
  grid-row: 2;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 54px !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .7), 0 3px #79603b, 0 9px 24px rgba(0, 0, 0, .48) !important;
}

@media (max-width: 849px) {
  body.jy-atelier dialog.jr-dialog .jr-shell {
    min-height: calc(100dvh - 132px - env(safe-area-inset-bottom, 0px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.jy-atelier dialog.jr-dialog[data-story] .jr-shell {
    grid-template-rows: auto minmax(clamp(190px, 28dvh, 250px), auto) auto !important;
  }

  body.jy-atelier dialog.jr-dialog:not([data-story]) .jr-shell {
    grid-template-rows: auto auto minmax(clamp(190px, 25dvh, 240px), auto) auto !important;
  }

  body.jy-atelier dialog.jr-dialog .jr-stage {
    height: auto !important;
    min-height: clamp(190px, 28dvh, 250px) !important;
  }

  body.jy-atelier dialog.jr-dialog:not([data-story]) .jr-stage {
    height: clamp(190px, 25dvh, 240px) !important;
    min-height: clamp(190px, 25dvh, 240px) !important;
  }

  body.jy-atelier dialog.jr-dialog .jr-dialogue {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding-bottom: 16px !important;
    scroll-margin-bottom: 16px;
  }
}

@media (max-height: 620px) and (max-width: 849px) {
  body.jy-atelier dialog.jr-dialog .jr-stage {
    min-height: 175px !important;
    height: 175px !important;
  }
}

@media (min-width: 850px) {
  body.jy-atelier dialog.jr-dialog > .jr-action-dock {
    justify-self: end;
    margin-right: max(28px, env(safe-area-inset-right, 0px)) !important;
    width: min(620px, calc(100vw - 56px)) !important;
  }
}

/* Finished card faces use a flat surface. Nested filters and backface culling
   must not make a decoded card transparent on a mobile compositor. */
body.jy-atelier dialog.jr-dialog .jr-flip,
body.jy-atelier dialog.jr-dialog .jr-reveal[aria-pressed="true"] .jr-flip {
  transform: none !important;
  transform-style: flat;
  transition: none !important;
}
body.jy-atelier dialog.jr-dialog .jr-back,
body.jy-atelier dialog.jr-dialog .jr-front {
  transform: none !important;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
body.jy-atelier dialog.jr-dialog .jr-front { visibility: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
body.jy-atelier dialog.jr-dialog .jr-front img,
body.jy-atelier dialog.jr-dialog .jr-front-status { grid-area: 1 / 1; }
body.jy-atelier dialog.jr-dialog .jr-front img { min-width: 0; min-height: 0; object-fit: contain; opacity: 0; }
body.jy-atelier dialog.jr-dialog .jr-front-status { padding: 6px; font-size: 11px; color: #253342; text-align: center; }
body.jy-atelier dialog.jr-dialog .jr-reveal[aria-pressed="true"] .jr-back { visibility: hidden; }
body.jy-atelier dialog.jr-dialog .jr-reveal[aria-pressed="true"] .jr-front { visibility: visible; }
body.jy-atelier dialog.jr-dialog .jr-reveal.is-face-ready .jr-front img { opacity: 1; }
body.jy-atelier dialog.jr-dialog .jr-reveal.is-face-ready .jr-front-status { visibility: hidden; }
/* Cards stay on one flat, decoded surface during reveal, scroll and settling.
   Scene animation can continue without re-promoting every individual face. */
body.jy-atelier dialog.jr-dialog[data-mode="cards"] :is(.jr-reveal-row, .jr-reveal, .jr-flip, .jr-back, .jr-front) {
  perspective: none !important;
  transform-style: flat !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
  animation: none !important;
  transform: none !important;
}
body.jy-atelier dialog.jr-dialog[data-mode="cards"][data-phase] .jr-world {
  position: fixed;
  inset: 0;
}
body.jy-atelier dialog.jr-dialog[data-mode="cards"][data-phase] .jr-world-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: center 44%;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  filter: none !important;
  opacity: .75;
}
body.jy-atelier dialog.jr-dialog[data-mode="cards"] .jr-mist { display: none; }
body.jy-atelier dialog.jr-dialog[data-mode="cards"] .jr-card-label {
  margin: 5px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.jy-atelier dialog.jr-dialog[data-motion="still"] *,
body.jy-atelier dialog.jr-dialog[data-motion="still"] *::before,
body.jy-atelier dialog.jr-dialog[data-motion="still"] *::after {
  animation: none !important;
  transition: none !important;
}

/* All revealed Lenormand cards share one compact overview, including the tail. */
body.jy-atelier dialog.jr-dialog[data-card-overview="true"] .jr-playfield { height: auto !important; min-height: 0 !important; }
body.jy-atelier dialog.jr-dialog[data-card-overview="true"] .jr-reveal-row {
  display: grid;
  grid-template-columns: repeat(var(--jr-card-cols, 3), minmax(0, 1fr));
  gap: clamp(3px, 1vw, 10px);
  align-items: start;
  perspective: none;
  padding: 4px 0 8px;
  transform: none;
  max-width: min(100%, 620px, calc(max(24px, (100svh - 380px) / var(--jr-card-rows, 1) - 24px) * .666667 * var(--jr-visible-cols, 3)));
  margin: 0 auto;
}
body.jy-atelier dialog.jr-dialog[data-card-overview="true"] .jr-reveal {
  width: 100%;
  max-width: none !important;
  min-width: 0;
  animation: none !important;
  transform: none !important;
  filter: none;
  opacity: 1 !important;
}
body.jy-atelier dialog.jr-dialog[data-card-overview="true"] .jr-card-label {
  font-size: clamp(9px, 1.5vw, 12px) !important;
  min-height: 0;
  margin: 5px 0 0 !important;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.jy-atelier dialog.jr-dialog[data-card-layout="grand"] .jr-reveal:nth-child(33) { grid-column: 3; }
body.jy-atelier dialog.jr-dialog[data-card-layout="grand"] .jr-reveal:nth-child(34) { grid-column: 4; }
body.jy-atelier dialog.jr-dialog[data-card-layout="grand"] .jr-reveal:nth-child(35) { grid-column: 5; }
body.jy-atelier dialog.jr-dialog[data-card-layout="grand"] .jr-reveal:nth-child(36) { grid-column: 6; }
body.jy-atelier dialog.jr-dialog[data-card-layout="five"] .jr-reveal:nth-child(1) { grid-column: 1 / 3; }
body.jy-atelier dialog.jr-dialog[data-card-layout="five"] .jr-reveal:nth-child(2) { grid-column: 3 / 5; }
body.jy-atelier dialog.jr-dialog[data-card-layout="five"] .jr-reveal:nth-child(3) { grid-column: 5 / 7; }
body.jy-atelier dialog.jr-dialog[data-card-layout="five"] .jr-reveal:nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
body.jy-atelier dialog.jr-dialog[data-card-layout="five"] .jr-reveal:nth-child(5) { grid-column: 4 / 6; grid-row: 2; }
body.jy-atelier dialog.jr-dialog[data-card-layout="choice"] .jr-reveal:nth-child(4) { grid-column: 2; grid-row: 2; }
body.jy-atelier dialog.jr-dialog[data-card-layout="choice"] .jr-reveal:nth-child(5) { grid-column: 1; grid-row: 3; }
body.jy-atelier dialog.jr-dialog[data-card-layout="choice"] .jr-reveal:nth-child(6) { grid-column: 2; grid-row: 3; }
body.jy-atelier dialog.jr-dialog[data-card-layout="choice"] .jr-reveal:nth-child(7) { grid-column: 3; grid-row: 3; }
@media (max-width: 849px) {
  body.jy-atelier dialog.jr-dialog[data-card-layout^="grand"] .jr-card-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.jy-atelier dialog.jr-dialog .jr-flip { animation: none !important; }
}