html.menagerie-open, body.menagerie-open { overflow: hidden !important; }
[data-menagerie-launch][hidden] { display: none !important; }
.menagerie-dialog {
    position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 12px; border: 0; background: transparent; overflow: hidden;
    color: #382718; font-family: var(--period-text); overscroll-behavior: none;
}
.menagerie-dialog[open] { display: grid; place-items: center; }
.menagerie-dialog::backdrop { background: rgba(16, 10, 7, .94); }
.menagerie-dialog *, .menagerie-dialog *::before, .menagerie-dialog *::after { box-sizing: border-box; }
.menagerie-frame {
    --record-frame-inset: clamp(38px, 5.8vw, 72px);
    position: relative; width: min(100%, 1160px); height: min(850px, calc(100dvh - 24px));
    overflow: hidden;
}
.menagerie-frame::before {
    content: ''; position: absolute; inset: calc(var(--record-frame-inset) * .55);
    background: #ecd5ae url('../img/Menagerie/menagerie_records_page_background.png') center / cover no-repeat;
    pointer-events: none;
}
.menagerie-frame::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border: var(--record-frame-inset) solid transparent;
    border-image: url('../img/Menagerie/menagerie_records_frame_overlay.png') 210 / 1 / 0 stretch;
}
.menagerie-sheet {
    position: absolute; inset: var(--record-frame-inset); display: flex; flex-direction: column;
    min-width: 0; min-height: 0; overflow: hidden;
}
.menagerie-header {
    flex: 0 0 auto; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px; align-items: center; text-align: center; padding: 0 8px 10px;
}
.menagerie-dialog h1.menagerie-title {
    display: grid; place-items: center; width: min(100%, 360px); aspect-ratio: 3 / 1;
    margin: 0; padding: 24px 44px 8px; color: #3d291a; font: 700 clamp(1.25rem, 2.7vw, 2rem) var(--period-display);
    background: url('../img/Menagerie/menagerie_records_title_cartouche.png') center / contain no-repeat;
    letter-spacing: .01em; text-transform: none; text-shadow: none;
}
.menagerie-action {
    max-width: 100%; min-height: 40px; padding: 7px 18px; border: 1px solid #987144;
    background: rgba(236, 219, 183, .6); color: #492d1d; font: 600 1rem var(--period-text);
    cursor: pointer; white-space: normal; overflow-wrap: anywhere;
}
.menagerie-close { grid-column: 3; grid-row: 1; font-size: .85rem; }
.menagerie-action:hover { background: #dfc292; }
.menagerie-navigation {
    display: flex; grid-column: 2; grid-row: 1; justify-content: center;
}
.menagerie-list-return { font-size: .85rem; }
.menagerie-list-return[hidden] { display: none; }
.menagerie-dialog button:focus-visible, .menagerie-body:focus-visible { outline: 2px solid #74492b; outline-offset: -3px; }
.menagerie-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px clamp(8px, 2vw, 22px) 24px;
    overscroll-behavior: contain; scrollbar-gutter: stable both-edges; scrollbar-width: thin; scrollbar-color: #8d693d #dbc395;
}
.menagerie-summary { margin: 0 0 12px; text-align: center; color: #705137; font-size: .84rem; letter-spacing: .06em; }
.menagerie-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; }
.menagerie-list li { min-width: 0; }
.menagerie-entry {
    display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 170px;
    padding: 4px 14px 10px; border: 23px solid transparent;
    border-image: url('../img/Menagerie/menagerie_record_entry_panel.png') 160 190 fill / 1 / 0 stretch;
    background: transparent; color: #3c291b; cursor: pointer; font-family: var(--period-text);
    overflow-wrap: anywhere;
}
.menagerie-entry:hover .menagerie-entry-name { text-decoration: underline; text-underline-offset: 4px; }
.menagerie-entry-name { font: 700 1.9rem/1.1 var(--period-display); max-width: 100%; margin: 0 0 5px; }
.menagerie-entry-breeder { font-size: .92rem; max-width: 100%; }
.menagerie-entry-round { font-size: .8rem; margin-top: 7px; color: #73543b; }
.menagerie-temperament-ornament {
    display: flex; justify-content: center; align-items: center; gap: 20px; width: min(100%, 200px);
    margin: 0 auto 10px; padding: 5px 12px; min-height: 42px;
    border-top: 1px solid var(--record-ink-left); border-bottom: 2px solid var(--record-ink-right);
    background: linear-gradient(90deg, color-mix(in srgb, var(--record-ink-left) 9%, transparent), color-mix(in srgb, var(--record-ink-right) 9%, transparent));
    line-height: 1.15; font-size: 1.7rem;
}
.menagerie-basic .menagerie-temperament-ornament { min-height: 34px; font-size: 1.35rem; border-top: 0; border-bottom-width: 1px; background: transparent; }
.menagerie-ornament-familiar { border-bottom: 2px solid currentColor; border-radius: 50%; padding: 0 5px; }
.menagerie-ornament-feral { font-size: .9em; letter-spacing: .08em; }
.menagerie-ornament-esoteric { outline: 1px solid currentColor; outline-offset: 1px; padding: 0 4px; }
.menagerie-empty { max-width: 540px; margin: 20px auto; text-align: center; font-size: 1.05rem; line-height: 1.6; }
.menagerie-dialog .menagerie-empty h2 { color: #503522; font: 600 1.8rem var(--period-display); }
.menagerie-divider { display: block; width: min(100%, 260px); height: auto; margin: -12px auto -6px; }
.menagerie-certificate { padding: 4px clamp(8px, 2vw, 24px) 16px; border-left: 4px double var(--record-ink-left); border-right: 4px double var(--record-ink-right); }
.menagerie-certificate.menagerie-basic { border-left-width: 2px; border-right-width: 2px; border-left-style: solid; border-right-style: solid; }
.menagerie-institution { margin: 0 0 6px; text-align: center; color: #715236; font-size: .8rem; letter-spacing: .06em; }
.menagerie-dialog h2.menagerie-champion-name {
    width: min(100%, 600px); margin: 0 auto 10px; padding: 8px 14px;
    border: solid transparent; border-width: 32px 48px;
    border-image: url('../img/Menagerie/menagerie_record_nameplate.png') 245 350 fill / 1 / 0 stretch;
    background: transparent; color: #3a2319; font: italic 700 clamp(1.8rem, 3.5vw, 3rem)/1.05 var(--period-display);
    text-align: center; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere;
}
.menagerie-facts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin: 12px 0 0; text-align: center; }
.menagerie-facts dt { font-size: .76rem; color: #745539; text-transform: uppercase; letter-spacing: .08em; }
.menagerie-facts dd { margin: 4px 0 0; font: 600 1.4rem/1.2 var(--period-display); overflow-wrap: anywhere; }
.menagerie-facts dd.menagerie-number, .menagerie-entry-round, .menagerie-card-list dd {
    font-family: var(--period-text); font-variant-numeric: lining-nums tabular-nums;
}
.menagerie-record-columns { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: clamp(16px, 3vw, 36px); }
.menagerie-dialog h3 { margin: 0 0 12px; color: #4e3423; font: 700 1.4rem var(--period-display); }
.menagerie-traits h3 { color: var(--record-ink-left); }
.menagerie-narrative h3 { color: var(--record-ink-right); }
.menagerie-card-list { margin: 0; }
.menagerie-card-list > div { padding: 9px 0; border-bottom: 1px solid rgba(119, 79, 38, .27); }
.menagerie-card-list dt { font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.menagerie-card-list dd { margin: 4px 0 0; font-size: .81rem; color: #72533a; }
.menagerie-narrative p { margin: 0 0 14px; font-size: 1.05rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.menagerie-register-seal { display: block; width: 78px; height: auto; margin: 18px auto 4px; transform: rotate(-7deg); }
.menagerie-refined .menagerie-temperament-ornament { border-bottom: 3px double #ad8036; }
.menagerie-refined .menagerie-divider { filter: brightness(1.08); }
.menagerie-portrait { margin-top: 28px; padding-top: 18px; border-top: 1px solid #a58457; text-align: center; }
.menagerie-portrait h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; }
.menagerie-portrait p { margin: 8px 0 12px; }
.menagerie-copy-status { min-height: 1.5em; font-size: .85rem; }
.menagerie-prompt-fallback { text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; font: .9rem/1.5 var(--period-text); user-select: text; }
@media (max-width: 700px) {
    .menagerie-dialog { padding: 6px; }
    .menagerie-frame { --record-frame-inset: 34px; height: calc(100dvh - 12px); }
    .menagerie-header { display: block; padding-inline: 0; }
    .menagerie-close { position: static; display: block; margin: 0 auto; min-height: 34px; padding: 4px 12px; }
    .menagerie-dialog h1.menagerie-title { max-width: 300px; margin-inline: auto; padding: 18px 30px 4px; font-size: clamp(1.1rem, 4.5vw, 1.6rem); }
    .menagerie-navigation { margin-top: 6px; }
    .menagerie-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .menagerie-entry { min-height: 150px; padding-inline: 2px; border-width: 20px; }
    .menagerie-entry-name { font-size: 1.65rem; }
    .menagerie-record-columns { grid-template-columns: minmax(0, 1fr); }
    .menagerie-facts { grid-template-columns: 1fr 1fr; }
    .menagerie-facts > div:first-child { grid-column: 1 / -1; }
    .menagerie-certificate { padding-inline: 8px; }
    .menagerie-dialog h2.menagerie-champion-name { border-width: 24px 28px; padding: 5px 2px; font-size: 1.7rem; }
}
@media (max-height: 560px) {
    .menagerie-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; }
    .menagerie-dialog h1.menagerie-title { width: 200px; padding: 14px 25px 4px; font-size: 1.05rem; margin: 0; }
    .menagerie-close { position: static; margin: 0; }
    .menagerie-navigation { margin: 0; }
}