.creature-ceremony-open { overflow: hidden; }
body.creature-ceremony-open > .game-notification { visibility: hidden; pointer-events: none; }
.creature-ceremony-overlay {
    z-index: 20020;
    height: 100dvh;
    padding: 12px;
    overflow: hidden;
    overscroll-behavior: none;
}
.creature-ceremony-overlay--pass { background: #140d0a; backdrop-filter: none; }
.creature-ceremony-frame-art {
    --creature-frame-inset: clamp(38px, 6vw, 70px);
    position: relative;
    width: min(100%, 1100px);
    height: min(780px, calc(100dvh - 24px));
    overflow: hidden;
    background: transparent;
}
.creature-ceremony-frame-art::before {
    content: '';
    position: absolute;
    /* End the paper underneath the opaque rails, inside the artwork's silhouette. */
    inset: calc(var(--creature-frame-inset) * .6);
    pointer-events: none;
    background: #f5e2c1 url('../img/creature_ceremony_parchment.png') center / cover no-repeat;
    box-shadow: 0 28px 85px rgba(0, 0, 0, .8);
}
.creature-ceremony-frame-art::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border: var(--creature-frame-inset) solid transparent;
    border-image: url('../img/creature_ceremony_frame.png') 170 / 1 / 0 stretch;
}
.creature-ceremony-frame-art > .period-modal-sheet.creature-ceremony-sheet {
    position: absolute;
    inset: var(--creature-frame-inset);
    width: auto;
    min-height: 0;
    max-height: none;
    padding: 4px 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}
.creature-ceremony-document::before,
.creature-ceremony-document::after {
    content: none;
}
.creature-ceremony-sheet header.creature-ceremony-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
    width: 100%;
    min-height: 0;
    padding: 0 clamp(10px, 2vw, 24px) 8px;
    margin: 0;
    border: 0;
    text-align: center;
    flex: 0 0 auto;
}
.creature-ceremony-header::after { content: none; }
.creature-ceremony-body {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 4px clamp(10px, 2vw, 24px) 14px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    scrollbar-color: #9b7745 #e6d0a1;
    scrollbar-width: thin;
}
.creature-ceremony-introduction {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.creature-ceremony-trophy {
    display: block;
    width: auto;
    height: clamp(40px, 7dvh, 64px);
    max-width: 100%;
    object-fit: contain;
    margin: 2px 0;
    flex: 0 0 auto;
}
.creature-ceremony-kicker {
    max-width: 100%;
    color: #522b22;
    font-family: var(--period-display);
    font-size: clamp(.95rem, 1.8vw, 1.35rem);
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.2;
    text-wrap: balance;
}
.creature-ceremony-sheet h2.creature-ceremony-award {
    width: min(100%, 50dvh, 500px);
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    line-height: 0;
}
.creature-ceremony-award-banner {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.creature-ceremony-sheet p.creature-ceremony-winner {
    margin: 0;
    color: #382315;
    font-family: var(--period-display);
    font-size: clamp(1.4rem, 2.7vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
}
.creature-ceremony-sheet p.creature-ceremony-frame {
    margin: 5px 0 0;
    color: #654634;
    font-family: var(--period-text);
    font-size: clamp(.98rem, 1.5vw, 1.1rem);
    font-style: italic;
    line-height: 1.3;
}
.creature-ceremony-round {
    margin-top: 4px;
    color: #835d30;
    font-family: var(--period-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
}
.creature-ceremony-rule {
    width: min(100%, 540px);
    height: 15px;
    margin: 7px auto 0;
    text-align: center;
    background: linear-gradient(90deg, transparent, #a77c3b 23% 47%, transparent 47% 53%, #a77c3b 53% 77%, transparent) center / 100% 1px no-repeat;
}
.creature-ceremony-rule::after {
    content: '✦';
    display: inline-block;
    color: #8d5823;
    background: #e9d3a4;
    padding: 0 5px;
    font-size: .8rem;
}
.creature-ceremony-sheet .creature-ceremony-story {
    width: min(100%, 62ch);
    max-width: none;
    margin: 11px auto 0;
    padding: 13px clamp(16px, 3vw, 38px) 5px;
    color: #392718;
    border: 1px solid rgba(122, 76, 34, .52);
    border-top: 2px solid rgba(136, 86, 38, .66);
    background: linear-gradient(rgba(255, 249, 226, .34), rgba(251, 239, 204, .26));
    box-shadow: 0 2px 0 rgba(115, 73, 35, .12), inset 0 0 0 4px rgba(255, 248, 218, .3);
    text-align: left;
    font-family: var(--period-text);
    font-size: clamp(1.12rem, 1.85vw, 1.36rem);
    line-height: 1.42;
    flex: 0 0 auto;
}
.creature-ceremony-sheet p.creature-ceremony-beat {
    margin: 0 0 9px;
    color: #392718;
    font-size: inherit;
    line-height: inherit;
}
.creature-ceremony-beat--new { animation: creature-ink-reveal 200ms ease-out both; }
.creature-ceremony-footer { display: flex; justify-content: center; width: 100%; margin-top: 10px; }
.creature-ceremony-continue {
    position: relative;
    min-width: 170px;
    min-height: 66px;
    margin: 14px auto 24px;
    padding: 6px 22px 24px;
    color: #44291c;
    border: 0;
    background: transparent;
    font-family: var(--period-display);
    font-size: 1.85rem;
    font-weight: 700;
    cursor: pointer;
}
.creature-ceremony-continue::after {
    content: '✦';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #97672e;
    font-size: .8rem;
}
.creature-ceremony-continue:hover,
.creature-ceremony-continue:focus-visible { color: #8c2927; }
.creature-ceremony-continue:focus-visible { outline: 1px solid #97672e; outline-offset: 4px; }
.creature-ceremony-main-action { margin: 5px auto 0; font-size: 1.05rem; }
.creature-ceremony-register {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 680px);
    margin: 10px auto 0;
    padding: 12px 16px 6px;
    border-top: 2px solid rgba(143, 91, 38, .5);
    text-align: center;
    flex: 0 0 auto;
}
.creature-ceremony-sheet p.creature-ceremony-register-intro {
    margin: 0;
    color: #4d3021;
    font-family: var(--period-display);
    font-size: clamp(1.35rem, 2.1vw, 1.8rem);
    font-style: italic;
    line-height: 1.2;
}
.creature-ceremony-name-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin: 4px 0 12px; }
.creature-ceremony-name-option {
    min-width: 105px;
    max-width: 100%;
    min-height: 41px;
    padding: 7px 12px;
    color: #4a2b1b;
    border: 1px solid #9d7034;
    background: linear-gradient(#f9ebc8, #e3c995);
    box-shadow: inset 0 0 0 2px rgba(255, 249, 227, .55), 0 2px 3px rgba(89, 51, 19, .18);
    font-family: var(--period-display);
    font-size: 1.2rem;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.creature-ceremony-name-option:hover,
.creature-ceremony-name-option[aria-pressed="true"] { border-color: #702b2b; background: linear-gradient(#e7caa0, #cfaa71); }
.creature-ceremony-own-option { min-width: 175px; }
.creature-ceremony-name-label { margin: 3px 0 7px; color: #4a2b1b; font-family: var(--period-text); font-size: 1.1rem; font-weight: 700; }
.creature-ceremony-name-input {
    width: min(100%, 440px);
    min-height: 52px;
    padding: 6px 12px;
    color: #352014;
    border: 1px solid #9a6730;
    border-radius: 2px;
    background: rgba(255, 250, 226, .7);
    box-shadow: inset 0 0 0 3px rgba(174, 119, 49, .14);
    font-family: var(--period-display);
    font-size: 1.65rem;
    text-align: center;
}
.creature-ceremony-name-input::placeholder { color: #9a8062; font-style: italic; }
.creature-ceremony-sheet p.creature-ceremony-name-help { margin: 4px 0 5px; color: #755638; font-size: .82rem; }
.creature-ceremony-sheet p.creature-ceremony-name-error { margin: 1px 0 7px; color: #8b2526; font-size: .9rem; font-weight: 700; }
.creature-ceremony-name-display {
    width: min(100%, 480px);
    margin: 3px 0 11px;
    padding: 5px 15px;
    color: #3a2018;
    border-bottom: 1px solid #9e7138;
    font-family: var(--period-display);
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-style: italic;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.creature-ceremony-sealed-record { display: flex; flex-direction: column; align-items: center; width: 100%; }
.creature-ceremony-seal {
    width: clamp(88px, 12vw, 120px);
    height: auto;
    margin: -4px 0 16px;
    object-fit: contain;
    animation: creature-seal-stamp 300ms cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes creature-seal-stamp {
    0% { opacity: 0; transform: translateY(-18px) scale(1.12) rotate(-7deg); }
    70% { opacity: 1; transform: translateY(2px) scale(.97) rotate(-7deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(-7deg); }
}
.creature-ceremony-pass { justify-content: center !important; gap: 16px !important; min-height: min(410px, calc(100dvh - 24px)) !important; max-height: calc(100dvh - 24px); overflow-y: auto; }
@media (prefers-reduced-motion: reduce) {
    .creature-ceremony-beat--new, .creature-ceremony-seal { animation-duration: 1ms; }
}
@media (max-width: 600px) {
    .creature-ceremony-overlay { padding: 7px; align-items: center; }
    .creature-ceremony-frame-art { --creature-frame-inset: 38px; width: 100%; height: calc(100dvh - 14px); }
    .creature-ceremony-frame-art > .period-modal-sheet.creature-ceremony-sheet { padding: 4px 0 0; }
    .creature-ceremony-sheet header.creature-ceremony-header { padding-inline: 9px; }
    .creature-ceremony-body { padding: 4px 9px 14px; }
    .creature-ceremony-story { padding: 12px 16px 4px; }
    .creature-ceremony-register { padding-inline: 2px; }
    .creature-ceremony-name-option { flex: 1 1 105px; min-width: min(105px, 100%); }
    .creature-ceremony-own-option { flex-basis: 100%; }
}
@media (max-height: 600px) {
    .creature-ceremony-kicker { max-width: none; font-size: .95rem; }
    .creature-ceremony-trophy { height: 36px; margin: 4px 0; }
    .creature-ceremony-sheet h2.creature-ceremony-award { width: min(100%, 270px); }
}