/* The deck shares the Lenormand typography and card frames. */
.lenormand-library { padding-top: 24px; }
.lenormand-library-back { margin: 0 0 24px -14px; text-align: left; }
.lenormand-library .lenormand-heading { margin-bottom: 40px; }
.lenormand-library-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; margin-bottom: 56px; }
.lenormand-library-card { display: block; min-width: 0; border-radius: 12px; scroll-margin-block: 100px; transition: transform .2s ease; }
.lenormand-library-card .lenormand-card-front { width: 100%; height: 100%; padding: 8px 8px 20px; transform: none; animation: none; box-shadow: 0 7px 20px #40293712; }
.lenormand-library-card .lenormand-card-number { top: 15px; left: 17px; font-size: 21px; }
.lenormand-library-card figcaption > span { font-size: 1.75rem; overflow-wrap: anywhere; }
.lenormand-library-card figcaption small { font-size: max(0.625rem, var(--mobile-caption-min, 0px)); line-height: 1.6; letter-spacing: 0; overflow-wrap: anywhere; }
.lenormand-library-card:target { outline: 2px solid var(--gold); outline-offset: 5px; }
.lenormand-library-retry { margin-bottom: 40px; }

@media (hover: hover) {
    .lenormand-library-card:hover { transform: translateY(-5px); }
    .lenormand-library-card:hover .lenormand-card-front { box-shadow: 0 12px 28px #40293728; }
}

.lenormand-card-dialog {
    position: relative;
    width: min(860px, 100%);
    max-width: calc(100vw - 32px);
    margin: 0 auto 40px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
    text-align: left;
    scroll-margin-block: 100px;
}

/* Reserve a real, non-scrolling header row so Safari cannot paint text under the close icon. */
.lenormand-dialog-header { display: flex; justify-content: flex-end; flex: 0 0 auto; padding: 10px 10px 0; }
.lenormand-dialog-content { padding: 12px 36px 36px; }
/* Initial focus belongs to the reading area; interactive controls keep their keyboard outlines. */
.lenormand-dialog-content:focus { outline: none; }
.lenormand-card-dialog:modal { position: fixed; display: flex; flex-direction: column; max-height: calc(100dvh - 32px); margin: auto; overflow: hidden; overscroll-behavior: contain; }
.lenormand-card-dialog:modal .lenormand-dialog-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.lenormand-card-dialog::backdrop { background: #171119b8; }
html.lenormand-dialog-open { overflow: hidden; }
.lenormand-dialog-close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; color: var(--plum); font-size: 1.75rem; line-height: 1; }
.lenormand-dialog-close:hover { background: var(--soft); }
.lenormand-dialog-bottom-close { display: none; }
.lenormand-detail-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 36px; }
.lenormand-detail-layout .lenormand-card-front { width: 240px; max-width: 100%; text-align: center; }
.lenormand-detail-layout .rune-image-wrap { width: 240px; margin-inline: auto; }
.lenormand-detail-copy { min-width: 0; }
.lenormand-detail-copy h2 { margin: 10px 0 14px; font-size: 44px; overflow-wrap: anywhere; }
.lenormand-detail-description { margin-bottom: 0; font-size: 0.875rem; line-height: 1.9; white-space: pre-line; }

@media (max-width: 1000px) {
    .lenormand-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 700px) {
    .lenormand-library { padding-top: 16px; }
    .lenormand-library-back { margin-bottom: 18px; }
    .lenormand-library .lenormand-heading { margin-bottom: 28px; }
    .lenormand-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 40px; }
    .lenormand-dialog-content { padding: 12px 24px 28px; }
    .lenormand-dialog-bottom-close { display: flex; width: 100%; margin-top: 24px; font-size: 1rem; }
    .lenormand-detail-layout { grid-template-columns: 1fr; gap: 28px; }
    .lenormand-detail-layout .lenormand-card-front,
    .lenormand-detail-layout .rune-image-wrap { width: 216px; margin-inline: auto; }
    .lenormand-detail-copy h2 { font-size: 36px; }
}

@media (max-width: 480px) {
    .lenormand-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
    .lenormand-library-card figcaption > span { font-size: 1.625rem; }
    .lenormand-dialog-content { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .lenormand-library-card { transition: none; }
}