.fortune-lenormand {
  padding: clamp(8px, 2.5vw, 26px);
  background: #fbfffd;
  border: 1px solid #cfe3d7;
  border-radius: 16px;
}

.lenormand-toolbar, .lenormand-reading, .lenormand-board-backs {
  max-width: 48rem;
  margin-inline: auto;
}

.lenormand-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.lenormand-toolbar #action {
  font-weight: 700;
}

.lenormand-audio summary {
  display: list-item;
  align-content: center;
  min-height: 44px;
  padding-inline: 6px;
  cursor: pointer;
}

.lenormand-audio > div {
  display: grid;
  grid-template-columns: auto minmax(6rem, 8rem);
  align-items: center;
  gap: 0 8px;
  padding: 6px 10px;
  border: 1px solid #cfe3d7;
  border-radius: 10px;
}

.lenormand-audio label {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lenormand-audio label:last-of-type, .lenormand-audio #fortune-audio-notice {
  grid-column: 1 / -1;
}

.fortune-lenormand :is(#fortune-audio-notice, #lenormand-error, #journal-note):empty {
  display: none;
}

.fortune-lenormand #lenormand-error {
  color: #932e28;
}

.lenormand-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 6px;
  font-size: .875rem;
}

.lenormand-legend-selected::before, .lenormand-legend-related::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  margin-inline-end: 5px;
  vertical-align: -.12em;
  border-radius: 3px;
}

.lenormand-legend-selected::before {
  border: 3px solid #17634f;
  background: #e5f5ed;
}

.lenormand-legend-related::before {
  border: 2px dashed #8a550d;
  background: #ffefb8;
}

.lenormand-legend-hint {
  margin-inline-start: auto;
}

.lenormand-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: clamp(2px, .6vw, 6px);
  min-width: 0;
}

.lenormand-board .lenormand-tile, .lenormand-board-backs > span {
  position: relative;
  display: grid;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #adc5b6;
  border-radius: clamp(3px, .8vw, 8px);
  background: #f9f5e7;
}

.lenormand-board-backs > span {
  background: #dbece3;
  box-shadow: inset 0 0 0 3px #f1f8f4;
}

.lenormand-art {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: #f9f5e7 url('/fortune/assets/lenormand/cards.webp') no-repeat;
  background-size: 600% 600%;
  background-position: var(--lenormand-atlas-x) var(--lenormand-atlas-y);
}

.lenormand-tile > .lenormand-art {
  border-radius: inherit;
}

.lenormand-tile-number {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  padding: 0 2px;
  border-radius: 2px;
  background: #fffdf3;
  color: #263a32;
  font-size: clamp(9px, 1.2vw, 13px);
  font-weight: 700;
  line-height: 1.25;
}

.lenormand-tile[aria-pressed="true"]::after, .lenormand-tile-related::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.lenormand-tile[aria-pressed="true"]::after {
  border: 3px solid #17634f;
}

.lenormand-tile-related::after {
  border: 2px dashed #8a550d;
  box-shadow: inset 0 0 7px 3px #ffe692;
}

.lenormand-board .lenormand-tile:focus-visible {
  z-index: 1;
  outline: 2px solid #173c76;
  outline-offset: 1px;
}

.lenormand-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lenormand-details {
  margin-top: 14px;
  padding: clamp(10px, 2.5vw, 20px);
  border: 1px solid #cfe3d7;
  border-radius: 12px;
  background: #f3faf5;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.lenormand-selected {
  display: grid;
  grid-template-columns: clamp(60px, 14vw, 112px) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.lenormand-selected-art, .lenormand-relation > .lenormand-art {
  border: 1px solid #adc5b6;
  border-radius: 6px;
  overflow: hidden;
}

.lenormand-details :is(h3, h4, h5, p) {
  margin: 0;
}

.lenormand-details h4 {
  margin-top: 14px;
  font-size: 1rem;
}

.lenormand-details h5 {
  font-size: 1rem;
}

.lenormand-relations {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.lenormand-relation {
  display: grid;
  grid-template-columns: clamp(42px, 10vw, 62px) minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #cfe3d7;
}

.fortune-frame[data-lenormand-reading] {
  height: auto !important;
  min-height: 0;
  overflow: visible;
}

.fortune-frame[data-lenormand-reading] :is(#fortune-canvas, #canvas-access, #fortune-state) {
  display: none;
}

.lenormand-journal-detail {
  min-width: 0;
  padding: clamp(2px, 1vw, 10px);
}

@media (max-width: 420px) {
  .lenormand-legend-hint { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .fortune-lenormand [data-phase="working"] .lenormand-board-backs > span,
  .lenormand-board-deal > .lenormand-tile {
    animation: lenormand-deal-in 230ms ease-out var(--lenormand-deal-delay) both;
  }
}

@keyframes lenormand-deal-in {
  from { opacity: .18; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}