.dragon-race-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    overflow: hidden;
    background: #07172c;
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms ease, visibility 260ms ease;
}

.dragon-race-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.dragon-race-modal[hidden] {
    display: none !important;
}

.dragon-race-modal__close {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    z-index: 12060;
    display: grid;
    place-items: center;
    width: clamp(42px, 4vw, 64px);
    aspect-ratio: 1;
    color: #6f3508;
    font: 900 clamp(24px, 2vw, 36px)/1 "Baloo 2", sans-serif;
    background: linear-gradient(#fffbed, #ffd56c);
    border: 3px solid #eaa329;
    border-radius: 50%;
    box-shadow: 0 6px 0 #91480c, 0 12px 28px rgba(20, 39, 72, 0.34);
    cursor: pointer;
}

.dragon-race-modal__close:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #91480c, 0 7px 18px rgba(20, 39, 72, 0.3);
}

.promise-center {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: grid;
    place-items: center;
    padding: clamp(18px, 3vw, 52px);
    overflow: auto;
    color: #4f280d;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 249, 198, 0.2), transparent 38%),
        linear-gradient(rgba(15, 69, 124, 0.1), rgba(4, 24, 51, 0.52)),
        url("../shared/img/assets_taks/dragon-race/result-bg.webp") center / cover no-repeat;
}

.promise-center[hidden] {
    display: none !important;
}

.promise-center__panel {
    position: relative;
    width: min(1120px, 92vw);
    max-height: min(820px, 88dvh);
    padding: clamp(22px, 3vw, 48px);
    overflow: auto;
    text-align: center;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(255, 243, 199, 0.97));
    border: clamp(3px, 0.35vw, 6px) solid #efb840;
    border-radius: clamp(28px, 3vw, 52px);
    box-shadow:
        0 0 0 clamp(5px, 0.5vw, 10px) rgba(115, 63, 10, 0.32),
        0 28px 70px rgba(17, 42, 80, 0.45);
}

.promise-center__eyebrow {
    margin: 0 0 0.25em;
    color: #b46a13;
    font-size: clamp(11px, 1vw, 17px);
    font-weight: 900;
    letter-spacing: 0.15em;
}

.promise-center__title {
    margin: 0;
    color: #71360b;
    font-size: clamp(28px, 3.1vw, 58px);
    font-weight: 900;
    line-height: 1.04;
}

.promise-center__lead {
    max-width: 720px;
    margin: 0.55em auto 1.1em;
    color: #8a6034;
    font-size: clamp(14px, 1.3vw, 22px);
    font-weight: 700;
    line-height: 1.35;
}

.promise-center__seal {
    display: grid;
    place-items: center;
    width: clamp(66px, 7vw, 112px);
    aspect-ratio: 1;
    margin: -0.15em auto 0.55em;
    color: #fff9c8;
    font: 900 clamp(35px, 4vw, 68px)/1 Georgia, serif;
    background: linear-gradient(145deg, #ffdf65, #ea8d16);
    border: 5px solid #fff0a2;
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(170, 91, 9, 0.26), 0 0 42px rgba(255, 211, 58, 0.64);
    animation: promise-seal-pulse 1.8s ease-in-out infinite;
}

.promise-mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: clamp(12px, 1.6vw, 22px);
    margin-top: clamp(18px, 2vw, 32px);
}

.promise-mission {
    position: relative;
    min-height: 180px;
    padding: clamp(18px, 2vw, 28px);
    color: #5e310f;
    text-align: left;
    background: linear-gradient(145deg, #fffefa, #ffefbf);
    border: 3px solid rgba(211, 142, 35, 0.42);
    border-radius: 26px;
    box-shadow: 0 9px 0 rgba(143, 79, 10, 0.18);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.promise-mission:hover,
.promise-mission:focus-visible {
    transform: translateY(-5px);
    border-color: #e79a1f;
    box-shadow: 0 14px 0 rgba(143, 79, 10, 0.22), 0 18px 32px rgba(109, 67, 13, 0.16);
    outline: none;
}

.promise-mission.is-selected {
    border-color: #18b9dc;
    box-shadow: 0 0 0 5px rgba(49, 204, 235, 0.23), 0 12px 0 rgba(15, 126, 154, 0.25);
}

.promise-mission__icon {
    float: left;
    display: grid;
    place-items: center;
    width: 52px;
    aspect-ratio: 1;
    margin: 0 13px 8px 0;
    font-size: 28px;
    background: #fff8dd;
    border: 2px solid #f2c569;
    border-radius: 16px;
}

.promise-mission strong {
    display: block;
    font-size: clamp(18px, 1.5vw, 26px);
    line-height: 1.08;
}

.promise-mission p {
    clear: both;
    margin: 0.8em 0 0;
    color: #90643b;
    font-size: clamp(13px, 1vw, 17px);
    font-weight: 650;
    line-height: 1.35;
}

.promise-mission small {
    display: inline-block;
    margin-top: 0.8em;
    color: #1684a2;
    font-size: 13px;
    font-weight: 900;
}

.promise-center__actions,
.promise-report-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(22px, 2.5vw, 36px);
}

.promise-action {
    min-width: min(280px, 100%);
    padding: 0.78em 1.4em;
    color: white;
    font: 900 clamp(16px, 1.35vw, 23px)/1.1 "Baloo 2", sans-serif;
    background: linear-gradient(#41cdf1, #129acb);
    border: 3px solid #d9fbff;
    border-radius: 20px;
    box-shadow: 0 7px 0 #08709d, 0 12px 24px rgba(18, 112, 158, 0.24);
    cursor: pointer;
}

.promise-action:disabled {
    opacity: 0.45;
    filter: grayscale(0.35);
    cursor: not-allowed;
}

.promise-action--gold {
    color: #713408;
    background: linear-gradient(#ffe16d, #ffac1f);
    border-color: #fff7ba;
    box-shadow: 0 7px 0 #9a4d0b, 0 12px 24px rgba(154, 77, 11, 0.25);
}

.promise-action--success {
    background: linear-gradient(#4edb8d, #14a65d);
    border-color: #dcffe9;
    box-shadow: 0 7px 0 #087b42, 0 12px 24px rgba(8, 123, 66, 0.22);
}

.promise-action--soft {
    color: #784719;
    background: #fff8df;
    border-color: #edc97c;
    box-shadow: 0 6px 0 #c18a32;
}

.promise-action small {
    display: block;
    margin-top: 0.3em;
    font-size: 0.64em;
    font-weight: 700;
    opacity: 0.82;
}

.promise-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    width: min(780px, 100%);
    margin-inline: auto;
}

.promise-report-grid .promise-action {
    min-width: 0;
    min-height: 88px;
}

.promise-center__truth {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 1em;
    padding: 0.45em 0.9em;
    color: #286c5a;
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 900;
    background: #e7fff4;
    border: 2px solid #a7e9cf;
    border-radius: 999px;
}

.promise-center__reward {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 1.3em auto 0;
}

.promise-center__reward span {
    padding: 0.55em 0.9em;
    color: #743c0c;
    font-size: clamp(14px, 1.1vw, 19px);
    font-weight: 900;
    background: #fff;
    border: 2px solid #f0c565;
    border-radius: 999px;
}

.seal-forge {
    display: grid;
    place-items: center;
    min-height: min(690px, 78dvh);
    padding: clamp(4px, 1vw, 14px);
}

.seal-forge__altar {
    position: relative;
    display: grid;
    width: clamp(230px, 25vw, 380px);
    aspect-ratio: 1;
    margin: clamp(10px, 1.4vw, 22px) auto 0;
    place-items: center;
    border-radius: 50%;
    isolation: isolate;
}

.seal-forge__altar::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 9%;
    z-index: -1;
    width: 70%;
    height: 20%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(62, 36, 11, 0.38), transparent 70%);
    filter: blur(7px);
}

.seal-forge__altar > img {
    position: relative;
    z-index: 4;
    width: 46%;
    height: 46%;
    object-fit: contain;
    filter:
        drop-shadow(0 16px 10px rgba(35, 27, 18, 0.35))
        drop-shadow(0 0 22px rgba(88, 225, 255, 0.74));
    animation: seal-forge-float 3s ease-in-out infinite;
}

.seal-forge__slots {
    position: absolute;
    inset: 9%;
    z-index: 3;
    border: 2px solid rgba(77, 195, 226, 0.42);
    border-radius: 50%;
    box-shadow: 0 0 28px rgba(74, 211, 239, 0.26), inset 0 0 32px rgba(255, 220, 108, 0.16);
}

.seal-forge__slots > i {
    --angle: calc((360deg / var(--slot-count)) * var(--slot));
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(20px, 2.25vw, 36px);
    aspect-ratio: 0.72;
    transform:
        translate(-50%, -50%)
        rotate(var(--angle))
        translateY(clamp(-148px, -9.3vw, -82px))
        rotate(calc(var(--angle) * -1));
    background: linear-gradient(145deg, rgba(221, 235, 235, 0.5), rgba(105, 137, 151, 0.34));
    border: 2px solid rgba(255, 248, 205, 0.56);
    border-radius: 70% 35% 65% 35%;
    clip-path: polygon(50% 0, 100% 28%, 78% 100%, 16% 86%, 0 30%);
    box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.34);
    opacity: 0.56;
}

.seal-forge__slots > i.is-filled {
    background: linear-gradient(145deg, #dffcff, #5edcf2 46%, #1597c8);
    border-color: #fff5a6;
    box-shadow:
        0 0 13px rgba(75, 224, 255, 0.92),
        0 0 24px rgba(255, 215, 82, 0.52),
        inset 0 0 8px rgba(255, 255, 255, 0.9);
    opacity: 1;
}

.seal-forge__aura {
    position: absolute;
    inset: 7%;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 246, 169, 0.48), rgba(67, 207, 235, 0.2) 48%, transparent 70%);
}

.seal-forge__aura i {
    position: absolute;
    inset: 20%;
    border: 2px solid rgba(80, 221, 245, 0.78);
    border-radius: 50%;
    opacity: 0;
    animation: seal-forge-aura 3s ease-out infinite;
}

.seal-forge__aura i:nth-child(2) { animation-delay: -1s; }
.seal-forge__aura i:nth-child(3) { animation-delay: -2s; }

.seal-forge__balance {
    margin-top: -0.2em;
    padding: 0.35em 1.1em;
    color: #fff2a5;
    font-size: clamp(18px, 1.7vw, 28px);
    font-weight: 1000;
    background: linear-gradient(180deg, #2076ae, #0d477d);
    border: 2px solid #f0c85f;
    border-radius: 999px;
    box-shadow: 0 4px 0 #75400a, 0 0 16px rgba(62, 204, 236, 0.38);
}

.seal-forge__overflow {
    margin-top: 0.45em;
    color: #277992;
    font-size: clamp(11px, 0.9vw, 15px);
    font-weight: 900;
}

.seal-forge__altar.is-forging {
    animation: seal-forge-charge 920ms ease-in-out infinite;
}

.seal-forge__altar.is-complete > img {
    width: 72%;
    height: 72%;
    filter:
        drop-shadow(0 20px 12px rgba(35, 27, 18, 0.38))
        drop-shadow(0 0 26px rgba(255, 225, 104, 0.92))
        drop-shadow(0 0 46px rgba(84, 226, 250, 0.72));
}

.seal-forge__particles {
    position: absolute;
    inset: 8%;
    z-index: 2;
}

.seal-forge__particles i {
    position: absolute;
    left: calc(14% + var(--particle-x, 0) * 12%);
    bottom: 18%;
    width: 7px;
    aspect-ratio: 1;
    background: #fff4a0;
    border-radius: 50%;
    box-shadow: 0 0 12px #69e8ff;
    animation: seal-forge-particle 2.4s ease-in infinite;
}

.seal-forge__particles i:nth-child(2) { left: 30%; animation-delay: -0.4s; }
.seal-forge__particles i:nth-child(3) { left: 43%; animation-delay: -1.2s; }
.seal-forge__particles i:nth-child(4) { left: 58%; animation-delay: -0.8s; }
.seal-forge__particles i:nth-child(5) { left: 70%; animation-delay: -1.7s; }
.seal-forge__particles i:nth-child(6) { left: 82%; animation-delay: -0.2s; }

@keyframes seal-forge-float {
    50% { transform: translateY(-4%); }
}

@keyframes seal-forge-aura {
    0% { opacity: 0; transform: scale(0.3); }
    18% { opacity: 0.86; }
    100% { opacity: 0; transform: scale(1.45); }
}

@keyframes seal-forge-charge {
    50% { transform: scale(1.035); filter: brightness(1.24); }
}

@keyframes seal-forge-particle {
    0% { opacity: 0; transform: translateY(20px) scale(0.5); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-150px) scale(1.3); }
}

.task-home-node[data-hero-state="blocked"] {
    filter: saturate(0.75);
}

.task-home-node[data-hero-state="attention"] .task-home-node__hint,
.task-home-node[data-hero-state="attention"] .task-home-node__copy {
    animation: none !important;
}

@keyframes promise-seal-pulse {
    50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(170, 91, 9, 0.22), 0 0 58px rgba(255, 211, 58, 0.8); }
}

@media (max-width: 720px) {
    .promise-report-grid {
        grid-template-columns: 1fr;
    }

    .promise-center__panel {
        width: 94vw;
        padding: 24px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dragon-race-modal,
    .promise-center__seal,
    .task-home-node[data-hero-state="attention"] .task-home-node__hint,
    .task-home-node[data-hero-state="attention"] .task-home-node__copy {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Sổ Hành Trình Hôm Nay: Đua Rồng → Ấn & Lời Hứa ─────────── */
.task-home-room[data-view="overview"] .task-home-room__background {
    filter: brightness(.46) saturate(.92) contrast(1.02);
    transform: scale(1.025);
}

.task-home-room[data-view="overview"] .task-home-room__veil {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(19,69,74,.06) 0 34%, rgba(15,7,2,.42) 76%, rgba(8,3,1,.72) 100%),
        linear-gradient(180deg, rgba(8,4,1,.32), transparent 28% 68%, rgba(8,4,1,.44));
}

.task-home-room[data-view="overview"] .task-home-room__panel {
    width: min(92vw, 1480px);
    height: min(90dvh, 850px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.task-home-room[data-view="overview"] .task-home-room__header {
    position: absolute;
    left: 50%;
    top: -1.5%;
    z-index: 12;
    width: min(64%, 760px);
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateX(-50%);
    pointer-events: none;
}

.task-home-room[data-view="overview"] .task-home-room__title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: clamp(48px, 6.2vw, 82px);
    padding: .42em 3em .5em;
    border: clamp(2px,.22vw,4px) solid #f8d578;
    border-radius: 48% 48% 42% 42% / 34% 34% 64% 64%;
    background:
        linear-gradient(90deg, transparent 0 3%, rgba(255,228,142,.2) 3.5% 4.2%, transparent 4.8% 95.2%, rgba(255,228,142,.2) 95.8% 96.5%, transparent 97%),
        linear-gradient(180deg, #8e4d19, #5a270b 48%, #351304);
    color: #fff2bd;
    font-size: clamp(16px,2.05vw,34px);
    letter-spacing: .035em;
    text-shadow: 0 3px 0 #4a1d05, 0 0 16px rgba(255,221,123,.42);
    box-shadow: 0 6px 0 #281003, 0 10px 24px rgba(28,9,1,.48), inset 0 2px 0 rgba(255,247,205,.42);
}

.task-home-room[data-view="overview"] .task-home-room__title::before,
.task-home-room[data-view="overview"] .task-home-room__title::after {
    content: "◆";
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: clamp(42px,5.5vw,78px);
    aspect-ratio: 1.55;
    background: linear-gradient(90deg,#d99b37,#f7d778 56%,#8d4914);
    color: #64e4ed;
    font-size: clamp(12px,1.5vw,24px);
    text-shadow: 0 0 8px #d9ffff, 0 0 16px #1ba7bf;
    clip-path: polygon(0 50%,24% 12%,100% 30%,76% 50%,100% 70%,24% 88%);
    transform: translateY(-50%);
}

.task-home-room[data-view="overview"] .task-home-room__title::before { right: calc(100% - 8px); }
.task-home-room[data-view="overview"] .task-home-room__title::after {
    left: calc(100% - 8px);
    transform: translateY(-50%) scaleX(-1);
}

.task-home-room[data-view="overview"] .task-home-room__close {
    position: fixed;
    top: max(14px,env(safe-area-inset-top));
    right: max(14px,env(safe-area-inset-right));
    z-index: 30;
    width: clamp(42px,4.5vw,68px);
    height: clamp(42px,4.5vw,68px);
    border: clamp(2px,.2vw,4px) solid #fff0b0;
    background: radial-gradient(circle at 34% 28%,#fff6bf 0 9%,transparent 10%), linear-gradient(180deg,#ffd86d,#e48a19 58%,#994108);
    color: #6a2605;
    font-size: clamp(24px,2.4vw,38px);
    box-shadow: 0 5px 0 #692402, 0 9px 20px rgba(35,10,0,.42), inset 0 2px 0 rgba(255,255,255,.62);
    transform: none;
    pointer-events: auto;
}

.task-home-room[data-view="overview"] .task-home-room__close:is(:hover,:focus-visible) {
    filter: brightness(1.12) saturate(1.1);
    transform: translateY(-2px) scale(1.04);
}

.task-home-room[data-view="overview"] .task-home-room__body {
    position: absolute;
    inset: clamp(38px,4.8vw,66px) 0 0;
    z-index: 5;
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0;
    overflow: visible;
}

.journey-book {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0,1.04fr) auto minmax(0,.86fr) auto;
    width: 100%;
    height: 100%;
    padding: clamp(32px,3.9vw,58px) clamp(48px,6vw,92px) clamp(20px,2.4vw,36px);
    border: clamp(3px,.28vw,5px) solid #e4ad4f;
    border-radius: 7% 7% 6% 6% / 12% 12% 9% 9%;
    background:
        radial-gradient(circle at 50% 42%,rgba(255,250,205,.82),transparent 50%),
        linear-gradient(90deg,rgba(143,73,17,.16),transparent 7% 93%,rgba(143,73,17,.16)),
        repeating-linear-gradient(0deg,rgba(151,88,28,.028) 0 1px,transparent 1px 7px),
        linear-gradient(180deg,#fff0be,#f8d996 48%,#f3cc7e);
    color: #63300f;
    box-shadow: 0 17px 0 -8px #74300b, 0 26px 45px rgba(35,11,1,.62), inset 0 0 0 2px rgba(255,250,214,.78), inset 0 0 35px rgba(139,67,11,.18);
    isolation: isolate;
    animation: journey-book-arrive .52s cubic-bezier(.2,.78,.24,1) both;
}

.journey-book::before,.journey-book::after {
    content: "";
    position: absolute;
    left: 2.2%;
    right: 2.2%;
    z-index: -1;
    height: 6.5%;
    border: clamp(2px,.2vw,4px) solid #e5ad4d;
    background: linear-gradient(90deg,#9d541c,#f6ce73 3%,#ffe5a0 9% 91%,#f2c262 97%,#8e4212);
    box-shadow: inset 0 2px 0 rgba(255,250,213,.72), 0 5px 12px rgba(72,26,3,.26);
}
.journey-book::before { top: -2.3%; border-radius: 50% 50% 20% 20% / 70% 70% 30% 30%; }
.journey-book::after { bottom: -2.3%; border-radius: 20% 20% 50% 50% / 30% 30% 70% 70%; }

.journey-book__binding {
    position: absolute;
    top: 4%;
    bottom: 4%;
    z-index: 4;
    width: clamp(22px,2.2vw,36px);
    border: clamp(2px,.18vw,3px) solid #ca8124;
    background: repeating-linear-gradient(0deg,transparent 0 12%,rgba(104,47,9,.25) 12% 13%), linear-gradient(90deg,#91410e,#ffd979 34%,#fff0ab 50%,#d78a24 70%,#763006);
    box-shadow: 0 0 13px rgba(78,27,2,.35), inset 0 0 4px rgba(255,247,200,.82);
}
.journey-book__binding--left { left: 1.4%; border-radius: 50% 22% 22% 50% / 4%; }
.journey-book__binding--right { right: 1.4%; border-radius: 22% 50% 50% 22% / 4%; }

.journey-book__crest {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 7;
    display: grid;
    place-items: center;
    width: clamp(42px,5vw,76px);
    aspect-ratio: 1;
    border: clamp(3px,.25vw,4px) solid #ffe89a;
    border-radius: 28% 28% 55% 55%;
    background: linear-gradient(145deg,#4df4f5,#159eb8 62%,#07576f);
    color: #fff1a9;
    font-size: clamp(19px,2.25vw,34px);
    text-shadow: 0 2px 0 #8d4e13, 0 0 12px #fff;
    box-shadow: 0 4px 0 #8d4a10, 0 0 18px rgba(33,229,242,.7), inset 0 2px 5px rgba(255,255,255,.76);
    transform: translate(-50%,-35%) rotate(45deg);
}
.journey-book__crest>span { transform: rotate(-45deg); }

.journey-book__chapter {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.journey-book__chapter>header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(8px,1vw,16px);
    flex: 0 0 auto;
    min-height: clamp(40px,4.2vw,64px);
    padding: 0 clamp(6px,.8vw,12px);
}
.journey-book__chapter>header>span:nth-child(2) { display: block; min-width: 0; }
.journey-book__chapter>header small {
    display: block;
    color: #118aa3;
    font-size: clamp(7px,.75vw,12px);
    font-weight: 1000;
    line-height: 1;
    letter-spacing: .13em;
}
.journey-book__chapter>header h3 {
    margin: .08em 0 0;
    color: #6b2e0b;
    font: 1000 clamp(15px,1.65vw,27px)/1 "Baloo 2",cursive;
    text-shadow: 0 1px 0 #fff7d2;
}
.journey-book__chapter>header em {
    min-width: clamp(70px,8vw,122px);
    padding: .42em .85em;
    border: clamp(1px,.12vw,2px) solid #d49738;
    border-radius: 999px;
    background: linear-gradient(180deg,#fff2b7,#f2c868);
    color: #7a3a10;
    font: normal 1000 clamp(8px,.82vw,13px)/1 "Baloo 2",cursive;
    text-align: center;
    box-shadow: inset 0 1px 0 #fffce0, 0 2px 0 rgba(121,55,9,.2);
}

.journey-book__chapter-mark {
    display: grid;
    place-items: center;
    width: clamp(30px,3vw,46px);
    aspect-ratio: 1;
    border: clamp(2px,.16vw,3px) solid #f3d47d;
    border-radius: 50%;
    background: linear-gradient(145deg,#20c9d3,#086d8d);
    color: #fff4b6;
    font: 1000 clamp(12px,1.2vw,20px)/1 "Baloo 2",cursive;
    box-shadow: 0 3px 0 #6d350e, 0 0 12px rgba(20,186,207,.36);
}

.journey-book__race-path {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--attempt-count),minmax(0,1fr));
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(4px,.8vw,12px) clamp(22px,3vw,44px) 0;
}

.journey-book__trail {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 42%;
    height: clamp(8px,.8vw,13px);
    border: clamp(2px,.16vw,3px) solid rgba(143,74,19,.56);
    border-radius: 999px;
    background: repeating-linear-gradient(90deg,#d89934 0 2.5%,#f8df91 2.5% 4.5%,#d89934 4.5% 7%);
    box-shadow: 0 3px 0 rgba(116,53,10,.16), inset 0 1px 0 #fff4bd;
    transform: translateY(-50%);
}

.journey-book__race-stop {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    color: #6b2f0c;
    text-align: center;
    animation: journey-stop-arrive .42s calc(.1s + var(--journey-index)*.075s) both;
}
.journey-book__race-stop:nth-of-type(even) { padding-top: clamp(6px,.75vw,12px); }
.journey-book__trail-star {
    position: absolute;
    left: 50%;
    top: 41%;
    z-index: -1;
    color: #fff2a5;
    font-size: clamp(18px,2.2vw,34px);
    text-shadow: 0 0 10px #f0b53d;
    transform: translate(-50%,-50%);
}

.journey-book__race-medallion {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(58px,6.6vw,106px);
    aspect-ratio: 1;
    border: clamp(3px,.28vw,5px) solid #f9db80;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 58%,rgba(94,229,235,.52),transparent 52%), linear-gradient(145deg,#1494ab,#065d78);
    box-shadow: 0 5px 0 #8d4b14, 0 8px 15px rgba(100,49,10,.26), inset 0 0 0 2px #0b6a80, inset 0 2px 7px rgba(255,255,255,.62);
}
.journey-book__race-stop.is-waiting .journey-book__race-medallion {
    filter: sepia(.3) saturate(.35);
    opacity: .7;
    background: linear-gradient(145deg,#c9ab75,#8b653b);
}
.journey-book__race-medallion::after {
    content: "";
    position: absolute;
    inset: -9%;
    z-index: -1;
    border: clamp(1px,.12vw,2px) solid rgba(227,164,59,.72);
    border-radius: 50%;
    animation: journey-medallion-ring 3s ease-in-out infinite;
}
.journey-book__race-medallion img {
    width: 83%;
    height: 83%;
    object-fit: contain;
    filter: drop-shadow(0 4px 3px rgba(70,28,2,.32));
    transform: translateY(-2%);
}
.journey-book__attempt-number {
    position: absolute;
    left: -8%;
    top: -8%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 31%;
    aspect-ratio: 1;
    border: 2px solid #fff0a9;
    border-radius: 50%;
    background: #b65b18;
    color: #fff5ca;
    font: 1000 clamp(8px,.8vw,13px)/1 "Baloo 2",cursive;
    box-shadow: 0 2px 0 #6a2b08;
}
.journey-book__race-stop>strong { margin-top: clamp(5px,.55vw,9px); font-size: clamp(8px,.86vw,14px); font-weight: 1000; line-height: 1; }
.journey-book__race-stop>small { max-width: 92%; margin-top: .25em; color: #95633a; font-size: clamp(6px,.62vw,10px); font-weight: 800; line-height: 1; }
.journey-book__race-reward {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .28em;
    min-height: clamp(18px,1.75vw,27px);
    margin-top: .25em;
    padding: .12em .52em;
    border: 1px solid rgba(183,116,32,.58);
    border-radius: 999px;
    background: rgba(255,247,205,.72);
    font-size: clamp(7px,.7vw,11px);
    box-shadow: inset 0 1px 0 #fff;
}
.journey-book__race-reward img { width: clamp(14px,1.5vw,23px); aspect-ratio: 1; object-fit: contain; }
.journey-book__race-reward b { white-space: nowrap; }
.journey-book__race-reward--practice { color: #8a5a31; letter-spacing: .04em; }

.journey-book__divider { position: relative; display: grid; place-items: center; height: clamp(18px,2vw,30px); color: #1594aa; }
.journey-book__divider::before,.journey-book__divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 44%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#ce9236);
}
.journey-book__divider::before { left: 1%; }
.journey-book__divider::after { right: 1%; transform: scaleX(-1); }
.journey-book__divider i {
    display: grid;
    place-items: center;
    width: clamp(24px,2.5vw,38px);
    aspect-ratio: 1;
    border: 2px solid #e8bd62;
    background: #fff0ad;
    box-shadow: 0 2px 0 #a85e18;
    transform: rotate(45deg);
}

.journey-book__promise-ribbon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px,1.6vw,26px);
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(5px,.7vw,10px) 2%;
}
.journey-book__promise-ribbon::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    top: 50%;
    height: clamp(18px,2vw,30px);
    border-block: 2px solid #b66b24;
    background: linear-gradient(180deg,rgba(25,166,181,.22),rgba(11,109,132,.15));
    transform: translateY(-50%);
}

.journey-book__promise-letter {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: min(72%,680px);
    height: 90%;
    min-height: 78px;
    border: clamp(2px,.18vw,3px) solid #c5842e;
    border-radius: clamp(8px,.8vw,13px);
    background: radial-gradient(circle at 50% 32%,rgba(255,255,225,.75),transparent 46%), linear-gradient(145deg,#fff2c5,#efc573);
    box-shadow: 0 7px 0 -2px #9b5018, 0 12px 20px rgba(91,38,4,.24), inset 0 0 0 2px rgba(255,247,202,.78);
    overflow: hidden;
    transform: rotate(calc((var(--promise-index) - .5)*.8deg));
    animation: journey-letter-arrive .48s calc(.16s + var(--promise-index)*.09s) both;
}
.journey-book__promise-fold {
    position: absolute;
    inset: 0;
    background: linear-gradient(31deg,transparent 49.2%,rgba(169,98,27,.22) 50%,transparent 50.8%) left bottom/50% 52% no-repeat, linear-gradient(-31deg,transparent 49.2%,rgba(169,98,27,.22) 50%,transparent 50.8%) right bottom/50% 52% no-repeat;
    opacity: .72;
}
.journey-book__promise-copy {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 78%;
    height: 100%;
    padding: clamp(5px,.7vw,11px);
    text-align: center;
}
.journey-book__promise-copy>small { color: #0d8da6; font-size: clamp(6px,.65vw,10px); font-weight: 1000; letter-spacing: .12em; }
.journey-book__promise-copy>strong { max-width: 100%; margin-top: .08em; overflow: hidden; color: #64300e; font-size: clamp(12px,1.35vw,22px); font-weight: 1000; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.journey-book__promise-copy>em { margin-top: .28em; color: #945218; font-size: clamp(7px,.73vw,12px); font-style: normal; font-weight: 1000; letter-spacing: .035em; }
.journey-book__promise-letter.is-kept .journey-book__promise-copy>em { color: #087d78; }
.journey-book__promise-letter:is(.is-not-done,.is-expired) .journey-book__promise-copy>em { color: #9b4d34; }

.journey-book__promise-stamp {
    position: absolute;
    right: 4.5%;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: clamp(40px,4.6vw,70px);
    aspect-ratio: 1;
    border: clamp(3px,.3vw,5px) double #1797a7;
    border-radius: 50%;
    color: #118f9e;
    font-size: clamp(18px,2.2vw,34px);
    font-weight: 1000;
    opacity: .88;
    transform: translateY(-50%) rotate(-9deg);
}
.journey-book__promise-letter.is-active .journey-book__promise-stamp {
    border-color: #cf8a2c;
    color: #d28121;
    animation: journey-promise-heart 1.8s ease-in-out infinite;
}
.journey-book__promise-rewards { display: flex; align-items: center; justify-content: center; gap: clamp(5px,.55vw,9px); margin-top: .32em; }
.journey-book__promise-rewards>span {
    display: inline-flex;
    align-items: center;
    gap: .22em;
    min-height: clamp(18px,1.7vw,27px);
    padding: .08em .48em;
    border: 1px solid rgba(190,126,43,.52);
    border-radius: 999px;
    background: rgba(255,250,219,.86);
    color: #6f350f;
    font-size: clamp(7px,.68vw,11px);
    box-shadow: inset 0 1px 0 #fff;
}
.journey-book__promise-rewards img { width: clamp(13px,1.35vw,21px); aspect-ratio: 1; object-fit: contain; }
.journey-book__promise-rewards i { color: #1cb9c3; font-style: normal; text-shadow: 0 0 6px rgba(27,184,195,.54); }
.journey-book__promise-note { margin-top: .3em; color: #8f6037; font-size: clamp(6px,.66vw,10px); font-weight: 800; }

.journey-book__promise-empty {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: clamp(12px,1.4vw,22px);
    min-width: min(66%,620px);
    min-height: 82%;
    padding: clamp(8px,.9vw,14px) clamp(20px,2.2vw,34px);
    border: clamp(2px,.18vw,3px) dashed rgba(167,100,30,.62);
    border-radius: clamp(10px,1.1vw,18px);
    background: rgba(255,241,192,.58);
    color: #744018;
}
.journey-book__promise-empty>span:last-child { display: flex; flex-direction: column; }
.journey-book__promise-empty strong { font-size: clamp(10px,1.15vw,18px); font-weight: 1000; }
.journey-book__promise-empty small { margin-top: .18em; color: #94633c; font-size: clamp(7px,.76vw,12px); font-weight: 800; }
.journey-book__empty-envelope {
    position: relative;
    width: clamp(54px,6vw,92px);
    aspect-ratio: 1.45;
    border: clamp(2px,.18vw,3px) solid #c98732;
    border-radius: 7px;
    background: linear-gradient(145deg,#fff3c6,#e7b95d);
    box-shadow: 0 4px 0 #95501a;
}
.journey-book__empty-envelope::before,.journey-book__empty-envelope::after { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0,50% 58%,100% 0); }
.journey-book__empty-envelope::before { background: #f3d17e; }
.journey-book__empty-envelope::after { background: rgba(190,119,36,.32); transform: scaleY(-1); }
.journey-book__empty-envelope i {
    position: absolute;
    left: 50%;
    top: 54%;
    z-index: 3;
    display: block;
    width: 24%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #21a7b7;
    box-shadow: 0 0 8px rgba(28,182,196,.5);
    transform: translate(-50%,-50%);
}
.journey-book__footer { display: flex; align-items: center; justify-content: center; gap: clamp(6px,.7vw,12px); min-height: clamp(16px,1.8vw,27px); color: #8b5730; font-size: clamp(6px,.68vw,11px); font-weight: 800; line-height: 1; text-align: center; }
.journey-book__footer p { margin: 0; }
.journey-book__footer span { color: #1693a8; }

@keyframes journey-book-arrive { from { opacity: 0; transform: translateY(4%) scale(.93); } to { opacity: 1; transform: none; } }
@keyframes journey-stop-arrive { from { opacity: 0; transform: translateY(24%) scale(.72); } to { opacity: 1; transform: none; } }
@keyframes journey-letter-arrive { from { opacity: 0; transform: translateY(22%) rotate(-3deg) scale(.9); } to { opacity: 1; transform: rotate(calc((var(--promise-index) - .5)*.8deg)); } }
@keyframes journey-medallion-ring { 0%,100% { opacity: .5; transform: scale(.94); } 50% { opacity: .9; transform: scale(1.05); } }
@keyframes journey-promise-heart { 0%,100% { transform: translateY(-50%) rotate(-9deg) scale(.96); } 50% { transform: translateY(-50%) rotate(-9deg) scale(1.04); } }

@media (max-width: 932px) and (orientation: landscape) {
    .task-home-room[data-view="overview"] .task-home-room__panel { width: min(92vw,860px); height: min(91dvh,430px); }
    .task-home-room[data-view="overview"] .task-home-room__header { top: -.5%; width: 58%; }
    .task-home-room[data-view="overview"] .task-home-room__title { min-height: 38px; padding-block: .32em .38em; font-size: clamp(13px,2.25vw,19px); }
    .task-home-room[data-view="overview"] .task-home-room__body { inset-block-start: 31px; }
    .journey-book { padding: 19px 34px 13px; }
    .journey-book__chapter>header { min-height: 31px; }
    .journey-book__race-medallion { width: clamp(48px,8.2dvh,72px); }
    .journey-book__promise-letter { height: 92%; }
    .journey-book__footer { min-height: 12px; }
}

@media (min-width: 933px) and (max-width: 1366px) and (orientation: landscape) {
    .task-home-room[data-view="overview"] .task-home-room__panel { width: min(90vw,1180px); height: min(88dvh,720px); }
}

@media (prefers-reduced-motion: reduce) {
    .journey-book,.journey-book__race-stop,.journey-book__promise-letter,
    .journey-book__race-medallion::after,.journey-book__promise-letter.is-active .journey-book__promise-stamp {
        animation: none !important;
    }
}

/* ==========================================================================
   Nghi thức Kể Thật v4 — Ấn Biết Kể
   Một sân khấu game duy nhất: lời hứa, Daro, vòng kể chuyện và Ấn trên bệ đá.
   ========================================================================== */

.promise-story {
    --story-cyan: #2ee7e2;
    --story-blue: #087f9d;
    --story-gold: #f5c85a;
    --story-ink: #673716;
    isolation: isolate;
    overflow: hidden;
    container-type: inline-size;
    font-family: "Baloo 2", sans-serif;
}

.promise-story button,
.promise-story textarea {
    font: inherit;
}

.promise-story button {
    -webkit-tap-highlight-color: transparent;
}

.promise-story__warmth {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 77% 58%, rgba(255, 188, 92, 0.2), transparent 25%),
        radial-gradient(circle at 47% 64%, rgba(61, 244, 232, 0.16), transparent 31%),
        linear-gradient(180deg, rgba(31, 159, 210, 0.03), transparent 48%, rgba(118, 73, 24, 0.08));
}

.promise-story__vow {
    position: absolute;
    top: 2.3%;
    left: 2.6%;
    z-index: 8;
    width: 34%;
    aspect-ratio: 2.37 / 1;
    color: var(--story-ink);
    filter: drop-shadow(0 0.55cqw 0.75cqw rgba(80, 55, 25, 0.22));
    transition: opacity 320ms ease, transform 420ms ease;
}

.promise-story__vow > img,
.promise-story__final-letter > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.promise-story__vow-recipient {
    position: absolute;
    top: 22%;
    left: 12%;
    display: flex;
    align-items: center;
    gap: 0.38cqw;
    color: #13829a;
    font-size: clamp(7px, 0.63cqw, 13px);
    font-weight: 1000;
    letter-spacing: 0.08em;
}

.promise-story__vow-recipient img,
.promise-story__final-recipient img {
    width: 1.8cqw;
    height: 1.8cqw;
    border: 0.15cqw solid #eab949;
    border-radius: 50%;
    object-fit: cover;
}

.promise-story__vow > strong {
    position: absolute;
    top: 43%;
    left: 12%;
    width: 74%;
    overflow: hidden;
    font-size: clamp(13px, 1.22cqw, 25px);
    font-weight: 1000;
    line-height: 1.05;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promise-story__vow > small {
    position: absolute;
    top: 62%;
    left: 12%;
    width: 72%;
    overflow: hidden;
    color: #82542c;
    font-size: clamp(7px, 0.65cqw, 13px);
    font-weight: 800;
    line-height: 1.15;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promise-story__daro {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    filter:
        saturate(1.04)
        drop-shadow(0 0.7cqw 0.7cqw rgba(93, 61, 24, 0.2));
    transition: opacity 360ms ease, transform 520ms cubic-bezier(.2, .78, .2, 1);
}

.promise-story__daro-caption {
    position: absolute;
    right: 2.1%;
    bottom: 18%;
    z-index: 12;
    width: 36%;
    box-sizing: border-box;
    padding: 0.65cqw 2.1cqw 0.78cqw;
    border: 0.12cqw solid rgba(139, 235, 237, 0.5);
    border-radius: 1.4cqw;
    background:
        linear-gradient(135deg, rgba(20, 91, 106, 0.88), rgba(31, 112, 116, 0.76));
    box-shadow:
        0 0.45cqw 0 rgba(21, 69, 76, 0.25),
        0 0.65cqw 1cqw rgba(29, 80, 84, 0.18);
    color: #fff9d6;
    text-align: center;
    text-shadow: 0 0.16cqw 0.18cqw rgba(51, 35, 17, 0.68);
    transition: opacity 260ms ease, transform 360ms ease;
}

.promise-story__daro-caption::after {
    content: "";
    position: absolute;
    right: 15%;
    bottom: -0.72cqw;
    width: 1.4cqw;
    height: 1.4cqw;
    background: rgba(28, 101, 109, 0.82);
    border-right: 0.12cqw solid rgba(139, 235, 237, 0.45);
    border-bottom: 0.12cqw solid rgba(139, 235, 237, 0.45);
    transform: rotate(45deg);
}

.promise-story__daro-caption > span {
    display: block;
    color: #75f6ee;
    font-size: clamp(7px, 0.62cqw, 13px);
    font-weight: 1000;
    letter-spacing: 0.18em;
}

.promise-story__daro-caption p {
    margin: 0.08em 0 0;
    font-size: clamp(10px, 0.98cqw, 19px);
    font-weight: 900;
    line-height: 1.18;
}

.promise-story__daro-caption p span {
    display: block;
}

.promise-story__story-engine {
    position: absolute;
    top: 17%;
    left: 19%;
    z-index: 7;
    width: 52%;
    height: 57%;
    opacity: 0.32;
    transform: translateY(1.2cqw) scale(0.94);
    transition: opacity 420ms ease, transform 520ms cubic-bezier(.2, .76, .2, 1);
}

.promise-story__story-engine::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4%;
    z-index: 8;
    width: 0.72cqw;
    height: 23cqw;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 244, 155, 0), #fff0a8 28%, #4ceadd 72%, rgba(60, 224, 214, 0));
    filter: blur(0.16cqw);
    opacity: 0;
    transform: translateX(-50%) rotate(180deg) scaleY(0.2);
    transform-origin: 50% 100%;
    pointer-events: none;
}

.promise-story.is-story-locked .promise-story__story-engine::after {
    animation: promise-story-light-to-seal 760ms ease-out forwards;
}

.promise-story.is-seal-awake .promise-story__story-engine {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.promise-story__projection {
    position: absolute;
    inset: 0 7% 20%;
    display: grid;
    place-items: center;
    perspective: 70cqw;
}

.promise-story__projection::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2%;
    width: 58%;
    height: 18%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse, rgba(103, 255, 238, 0.64), rgba(45, 190, 202, 0.16) 48%, transparent 72%);
    filter: blur(0.35cqw);
    transform: translateX(-50%);
    animation: promise-story-projection-pulse 2.5s ease-in-out infinite;
}

.promise-story__empty {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 11cqw;
    height: 11cqw;
    border: 0.18cqw solid rgba(110, 246, 238, 0.72);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 251, 205, 0.72), rgba(46, 210, 208, 0.22) 52%, transparent 70%);
    box-shadow:
        0 0 1.8cqw rgba(50, 235, 228, 0.5),
        inset 0 0 1.4cqw rgba(255, 255, 255, 0.54);
    color: #fff8bf;
    text-shadow: 0 0 0.8cqw #0bc8cb;
    transition: opacity 280ms ease, transform 360ms ease;
}

.promise-story__empty span {
    font-size: clamp(26px, 3.8cqw, 74px);
    font-weight: 1000;
}

.promise-story__empty small {
    position: absolute;
    bottom: -1.4cqw;
    width: max-content;
    color: #126f83;
    font-size: clamp(7px, 0.65cqw, 13px);
    font-weight: 1000;
    letter-spacing: 0.16em;
    text-shadow: 0 1px 0 #fff;
}

.promise-story.is-seal-awake .promise-story__empty {
    opacity: 0;
    transform: scale(0.64);
    pointer-events: none;
}

.promise-story__scene {
    position: absolute;
    inset: -7% 2% -1%;
    z-index: 3;
    padding: 0;
    border: 0;
    opacity: 0;
    background: transparent;
    transform: translateY(1.2cqw) scale(0.82) rotateY(10deg);
    transition:
        opacity 280ms ease,
        transform 520ms cubic-bezier(.18, .82, .2, 1),
        filter 320ms ease;
    pointer-events: none;
}

.promise-story__scene.is-active {
    opacity: 1;
    filter:
        drop-shadow(0 0.7cqw 0.65cqw rgba(63, 44, 23, 0.2))
        drop-shadow(0 0 1.3cqw rgba(79, 238, 225, 0.28));
    transform: translateY(0) scale(1) rotateY(0);
    pointer-events: auto;
    cursor: pointer;
}

.promise-story__scene img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.promise-story__projection > strong {
    position: absolute;
    left: 50%;
    bottom: 1.7cqw;
    z-index: 5;
    width: max-content;
    max-width: 72%;
    padding: 0.32cqw 1.25cqw 0.38cqw;
    border: 0.12cqw solid rgba(255, 231, 152, 0.9);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(108, 63, 20, 0.9), rgba(74, 44, 17, 0.94));
    box-shadow: 0 0.35cqw 0 rgba(69, 39, 14, 0.3);
    color: #fff6c8;
    font-size: clamp(8px, 0.78cqw, 15px);
    font-weight: 1000;
    letter-spacing: 0.04em;
    text-align: center;
    transform: translateX(-50%);
}

.promise-story__wheel {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 31cqw;
    height: 8.6cqw;
    touch-action: none;
    transform: translateX(-50%);
    cursor: grab;
}

.promise-story__wheel:active {
    cursor: grabbing;
}

.promise-story__wheel-orbit {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 27cqw;
    height: 6.2cqw;
    border: 0.42cqw solid rgba(38, 190, 194, 0.82);
    border-top-color: #ffdc72;
    border-bottom-color: rgba(28, 128, 150, 0.72);
    border-radius: 50%;
    box-shadow:
        0 0 0 0.16cqw rgba(255, 251, 204, 0.82),
        0 0 1.4cqw rgba(34, 220, 216, 0.48),
        inset 0 0 1cqw rgba(255, 255, 255, 0.7);
    transform: translate(-50%, -50%) rotate(var(--story-ring-turn));
    transition: transform 520ms cubic-bezier(.2, .78, .2, 1);
}

.promise-story__wheel-orbit i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.2cqw;
    height: 1.2cqw;
    border: 0.15cqw solid #fff4ae;
    border-radius: 50%;
    background: #26cdd0;
    box-shadow: 0 0 0.7cqw #3bf5ec;
}

.promise-story__wheel-orbit i:nth-child(1) {
    transform: translate(-50%, -50%) translateX(13.5cqw);
}

.promise-story__wheel-orbit i:nth-child(2) {
    transform: translate(-50%, -50%) rotate(120deg) translateX(13.5cqw);
}

.promise-story__wheel-orbit i:nth-child(3) {
    transform: translate(-50%, -50%) rotate(240deg) translateX(13.5cqw);
}

.promise-story__turn,
.promise-story__heart {
    position: absolute;
    top: 48%;
    z-index: 4;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0.14cqw solid #ffe6a1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 32%, #6af4eb, #159ab3 62%, #08637b);
    box-shadow:
        0 0.28cqw 0 #6f4a1b,
        0 0 0 0.18cqw rgba(255, 255, 255, 0.45),
        0 0.5cqw 1cqw rgba(16, 103, 123, 0.28);
    color: #fff7c3;
    cursor: pointer;
    transform: translateY(-50%);
}

.promise-story__turn {
    width: 3.8cqw;
    height: 3.8cqw;
    font-size: clamp(23px, 3cqw, 58px);
    font-weight: 1000;
    line-height: 1;
}

.promise-story__turn--back {
    left: 0;
}

.promise-story__turn--next {
    right: 0;
}

.promise-story__heart {
    left: 50%;
    width: 4.5cqw;
    height: 4.5cqw;
    font-size: clamp(16px, 2.1cqw, 42px);
    transform: translate(-50%, -50%);
    transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

.promise-story__heart:disabled {
    opacity: 0.34;
    cursor: default;
    filter: grayscale(0.5);
}

.promise-story__heart:not(:disabled):hover,
.promise-story__heart:not(:disabled):focus-visible {
    transform: translate(-50%, -50%) scale(1.12);
}

.promise-story__seal-pedestal {
    position: absolute;
    left: 50%;
    bottom: 0.8%;
    z-index: 7;
    width: 19cqw;
    height: 7.2cqw;
    border: 0.22cqw solid #e7b84e;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% 22%, #fdf0c8 0 32%, #b9a584 35% 42%, #756849 45% 56%, #dac58e 59% 65%, #786444 69%);
    box-shadow:
        0 1.15cqw 1.2cqw rgba(73, 52, 25, 0.24),
        0 0 1.4cqw rgba(70, 225, 215, 0.24);
    pointer-events: none;
}

.promise-story__seal-pedestal::before,
.promise-story__seal-pedestal::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    border: 0.12cqw solid rgba(42, 179, 184, 0.72);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.promise-story__seal-pedestal::before {
    width: 12.5cqw;
    height: 3.8cqw;
}

.promise-story__seal-pedestal::after {
    width: 8.8cqw;
    height: 2.3cqw;
    box-shadow: 0 0 1cqw rgba(49, 245, 230, 0.5);
}

.promise-story__seal-pedestal span,
.promise-story__seal-pedestal i {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 7.2cqw;
    height: 1.7cqw;
    border-radius: 50%;
    background: rgba(50, 239, 225, 0.24);
    filter: blur(0.25cqw);
    transform: translate(-50%, -50%);
}

.promise-story__seal {
    position: absolute;
    left: 50%;
    bottom: 3.2%;
    z-index: 16;
    width: 8.8cqw;
    height: 10.8cqw;
    padding: 0;
    border: 0;
    background: transparent;
    filter: drop-shadow(0 0.65cqw 0.48cqw rgba(68, 47, 23, 0.32));
    transform: translateX(-50%);
    transform-origin: 50% 86%;
    cursor: pointer;
}

.promise-story__seal:focus,
.promise-story__seal:focus-visible {
    outline: 0;
}

.promise-story__seal::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7%;
    z-index: -1;
    width: 7.8cqw;
    height: 7.8cqw;
    border: 0.18cqw solid rgba(91, 255, 241, 0.54);
    border-radius: 50%;
    box-shadow:
        0 0 1.6cqw rgba(46, 229, 223, 0.56),
        inset 0 0 1.6cqw rgba(255, 251, 200, 0.42);
    opacity: 0.68;
    transform: translateX(-50%) scale(0.8);
    animation: promise-story-seal-aura 2.2s ease-in-out infinite;
}

.promise-story__seal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms ease, filter 300ms ease;
    pointer-events: none;
}

.promise-story__seal > span {
    position: absolute;
    left: 50%;
    bottom: -0.15cqw;
    width: max-content;
    padding: 0.18cqw 0.6cqw;
    border-radius: 999px;
    background: rgba(39, 86, 91, 0.82);
    color: #fff4be;
    font-size: clamp(7px, 0.57cqw, 12px);
    font-weight: 1000;
    letter-spacing: 0.1em;
    text-shadow: 0 0.1cqw 0.15cqw #3a2816;
    transform: translateX(-50%);
    pointer-events: none;
}

.promise-story__seal:hover img,
.promise-story__seal:focus-visible img {
    filter: brightness(1.08) saturate(1.1);
    transform: translateY(-0.35cqw) scale(1.05);
}

.promise-story.is-seal-awake .promise-story__seal img {
    filter: brightness(1.04) drop-shadow(0 0 0.55cqw rgba(58, 244, 231, 0.64));
}

.promise-story.is-seal-nudged .promise-story__seal {
    animation: promise-story-seal-nudge 480ms ease;
}

.promise-story__instruction {
    position: absolute;
    left: 50%;
    bottom: 0.8%;
    z-index: 20;
    width: 43%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.42cqw 1.4cqw;
    border: 0.12cqw solid rgba(177, 239, 238, 0.65);
    border-radius: 999px;
    background: rgba(27, 82, 92, 0.88);
    color: #fffad9;
    font-size: clamp(8px, 0.72cqw, 14px);
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 0.12cqw 0.18cqw rgba(45, 30, 15, 0.72);
    transform: translateX(-50%);
    pointer-events: none;
}

.promise-story__memory {
    position: absolute;
    top: 28%;
    right: 20%;
    z-index: 18;
    width: 22%;
    height: 31%;
    opacity: 0;
    transform: translateY(1.2cqw) scale(0.74);
    pointer-events: none;
    transition: opacity 360ms ease, transform 520ms cubic-bezier(.2, .8, .2, 1);
}

.promise-story[data-report-state="sharing"] .promise-story__memory {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.promise-story__memory-bubble {
    position: absolute;
    left: 50%;
    top: 41%;
    display: grid;
    place-items: center;
    width: calc(6.8cqw + var(--memory-energy) * 3.1cqw);
    height: calc(6.8cqw + var(--memory-energy) * 3.1cqw);
    padding: 0;
    border: 0.16cqw solid rgba(220, 255, 255, 0.86);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.92), transparent 12%),
        radial-gradient(circle at 55% 58%, rgba(63, 244, 232, 0.6), rgba(69, 155, 218, 0.42) 48%, rgba(122, 86, 214, 0.25) 72%);
    box-shadow:
        inset -0.7cqw -0.8cqw 1.3cqw rgba(44, 91, 188, 0.25),
        inset 0.5cqw 0.5cqw 1cqw rgba(255, 255, 255, 0.72),
        0 0 1.5cqw rgba(51, 239, 229, 0.62);
    color: #fff;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: width 180ms ease, height 180ms ease, filter 220ms ease;
}

.promise-story__memory-core {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 245, 170, calc(0.2 + var(--memory-energy) * 0.62)), transparent 70%);
}

.promise-story__memory-rings {
    position: absolute;
    inset: -15%;
    border: 0.13cqw solid rgba(118, 255, 247, 0.6);
    border-radius: 50%;
    opacity: calc(0.25 + var(--memory-energy) * 0.7);
    animation: promise-story-memory-ring 2.1s ease-out infinite;
}

.promise-story__memory-bubble .material-symbols-outlined {
    position: relative;
    z-index: 2;
    font-size: clamp(20px, 2.1cqw, 42px);
    text-shadow: 0 0 0.6cqw #078a9a;
}

.promise-story.is-listening .promise-story__memory-bubble {
    animation: promise-story-memory-listening 860ms ease-in-out infinite alternate;
}

.promise-story__memory > p {
    position: absolute;
    left: 50%;
    bottom: -0.4cqw;
    width: 118%;
    max-height: 3.4cqw;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.3cqw 0.7cqw;
    border-radius: 0.7cqw;
    background: rgba(255, 250, 216, 0.82);
    box-shadow: 0 0.25cqw 0.5cqw rgba(47, 82, 86, 0.16);
    color: #0d6477;
    font-size: clamp(7px, 0.68cqw, 14px);
    font-weight: 900;
    line-height: 1.18;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    transform: translateX(-50%);
}

.promise-story__quill {
    position: absolute;
    top: 4%;
    right: 4%;
    display: grid;
    place-items: center;
    width: 3.1cqw;
    height: 3.1cqw;
    padding: 0;
    border: 0.14cqw solid #ffe39a;
    border-radius: 50%;
    background: linear-gradient(#54dce0, #0a8199);
    box-shadow: 0 0.28cqw 0 #7c531e;
    color: #fff7c6;
    font-size: clamp(14px, 1.45cqw, 29px);
    cursor: pointer;
}

.promise-story__text-panel {
    position: absolute;
    right: 90%;
    bottom: 8%;
    display: flex;
    width: 19cqw;
    height: 6.6cqw;
    padding: 0.7cqw 0.8cqw;
    border: 0.2cqw solid #d9a846;
    border-radius: 1.1cqw;
    background:
        linear-gradient(135deg, rgba(255, 250, 216, 0.98), rgba(255, 229, 167, 0.98));
    box-shadow: 0 0.6cqw 1.1cqw rgba(75, 49, 20, 0.28);
}

.promise-story__text-panel[hidden] {
    display: none;
}

.promise-story__text-panel textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: #653a19;
    font-size: clamp(8px, 0.7cqw, 14px);
    font-weight: 800;
    line-height: 1.3;
}

.promise-story__text-panel button {
    align-self: flex-end;
    display: grid;
    place-items: center;
    width: 2.6cqw;
    height: 2.6cqw;
    padding: 0;
    border: 0.12cqw solid #fff0a7;
    border-radius: 50%;
    background: #169bad;
    color: #fff;
    cursor: pointer;
}

.promise-story.is-memory-bursting .promise-story__memory-bubble {
    animation: promise-story-memory-burst 760ms ease forwards;
}

.promise-story__final-letter {
    position: absolute;
    top: 15%;
    left: 50%;
    z-index: 13;
    width: 61%;
    aspect-ratio: 2.37 / 1;
    color: var(--story-ink);
    opacity: 0;
    filter: drop-shadow(0 0.85cqw 1.25cqw rgba(71, 48, 19, 0.28));
    transform: translate(-50%, 2cqw) scale(0.84);
    pointer-events: none;
    transition: opacity 420ms ease, transform 620ms cubic-bezier(.2, .78, .2, 1);
}

.promise-story.is-letter-ready .promise-story__final-letter {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.promise-story__final-recipient {
    position: absolute;
    top: 21%;
    left: 12%;
    display: flex;
    align-items: center;
    gap: 0.48cqw;
    color: #13829a;
    font-size: clamp(8px, 0.72cqw, 15px);
    font-weight: 1000;
    letter-spacing: 0.1em;
}

.promise-story__final-letter > strong {
    position: absolute;
    top: 39%;
    left: 12%;
    width: 47%;
    overflow: hidden;
    font-size: clamp(17px, 1.8cqw, 36px);
    font-weight: 1000;
    line-height: 1.08;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promise-story__final-letter > p {
    position: absolute;
    top: 55%;
    left: 12%;
    width: 47%;
    max-height: 21%;
    margin: 0;
    overflow: hidden;
    color: #80502a;
    font-size: clamp(8px, 0.78cqw, 16px);
    font-weight: 800;
    line-height: 1.24;
    text-align: left;
}

.promise-story__first-mark {
    position: absolute;
    top: 28%;
    right: 11%;
    display: grid;
    place-items: center;
    width: 19%;
    aspect-ratio: 1;
}

.promise-story__first-mark img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.78;
}

.promise-story__first-mark b {
    position: relative;
    z-index: 2;
    width: 92%;
    padding: 0.2cqw 0.1cqw;
    border: 0.12cqw solid rgba(213, 255, 248, 0.86);
    border-radius: 999px;
    background: linear-gradient(180deg, #24bdb4, #087f8e);
    box-shadow:
        0 0 0 0.12cqw rgba(11, 105, 119, 0.75),
        0 0.25cqw 0.4cqw rgba(26, 92, 98, 0.28);
    color: #fff9c8;
    font-size: clamp(7px, 0.66cqw, 13px);
    font-weight: 1000;
    letter-spacing: 0.07em;
    opacity: 0;
    text-align: center;
    text-shadow: 0 0.1cqw 0.15cqw rgba(24, 76, 79, 0.7);
    transform: scale(1.45) rotate(-8deg);
}

.promise-story.is-result-stamped .promise-story__first-mark b {
    opacity: 1;
    transform: scale(1) rotate(0);
    transition:
        opacity 160ms 100ms ease,
        transform 520ms 100ms cubic-bezier(.18, 1.5, .38, 1);
}

.promise-story[data-report-state="ready"] .promise-story__story-engine,
.promise-story[data-report-state="stamping"] .promise-story__story-engine,
.promise-story[data-report-state="ready"] .promise-story__memory,
.promise-story[data-report-state="stamping"] .promise-story__memory,
.promise-story[data-report-state="ready"] .promise-story__vow,
.promise-story[data-report-state="stamping"] .promise-story__vow {
    opacity: 0;
    transform: scale(0.82);
    pointer-events: none;
}

.promise-story[data-report-state="ready"] .promise-story__daro,
.promise-story[data-report-state="stamping"] .promise-story__daro {
    opacity: 0.58;
    transform: translateX(3%);
}

.promise-story[data-report-state="ready"] .promise-story__daro-caption,
.promise-story[data-report-state="stamping"] .promise-story__daro-caption {
    right: 1.5%;
    bottom: 12%;
    width: 31%;
}

.promise-story[data-report-state="sharing"] .promise-story__wheel {
    opacity: 0;
    pointer-events: none;
}

.promise-story[data-report-state="sharing"] .promise-story__story-engine {
    left: 15%;
    width: 47%;
}

.promise-story[data-report-state="sharing"] .promise-story__daro-caption {
    right: 3%;
    bottom: 13%;
    width: 35%;
}

.promise-story[data-report-state="stamping"] .promise-story__seal {
    animation: promise-story-final-stamp 1.12s cubic-bezier(.2, .72, .22, 1) forwards;
}

.promise-story__stamp-impact {
    position: absolute;
    left: 69.5%;
    top: 40%;
    z-index: 22;
    width: 3cqw;
    height: 3cqw;
    border: 0.2cqw solid rgba(255, 250, 185, 0.95);
    border-radius: 50%;
    opacity: 0;
    box-shadow:
        0 0 1cqw #fff4a8,
        0 0 2cqw #39e7df;
    transform: translate(-50%, -50%) scale(0.3);
    pointer-events: none;
}

.promise-story.is-result-stamped .promise-story__stamp-impact {
    animation: promise-story-stamp-impact 720ms ease-out forwards;
}

.promise-story__close {
    position: absolute;
    top: 1.4%;
    right: 1.2%;
    z-index: 80;
    display: grid;
    place-items: center;
    width: 4.4cqw;
    height: 4.4cqw;
    padding: 0;
    border: 0.18cqw solid #e6a325;
    border-radius: 50%;
    background: linear-gradient(#fff7cf, #ffd671);
    box-shadow: 0 0.34cqw 0 #9d5d15;
    color: #6d3512;
    font-size: clamp(19px, 2cqw, 40px);
    font-weight: 1000;
    cursor: pointer;
}

.promise-story.is-report-complete > :not(.promise-report-feedback):not(.promise-story__close) {
    pointer-events: none;
}

.promise-story.is-report-complete .promise-story__close {
    opacity: 0;
    pointer-events: none;
}

@keyframes promise-story-projection-pulse {
    0%, 100% {
        opacity: 0.58;
        transform: translateX(-50%) scale(0.9);
    }
    50% {
        opacity: 0.95;
        transform: translateX(-50%) scale(1.08);
    }
}

@keyframes promise-story-seal-aura {
    0%, 100% {
        opacity: 0.48;
        transform: translateX(-50%) scale(0.8) rotate(0);
    }
    50% {
        opacity: 0.9;
        transform: translateX(-50%) scale(1.08) rotate(180deg);
    }
}

@keyframes promise-story-seal-nudge {
    0%, 100% { transform: translateX(-50%) rotate(0); }
    28% { transform: translateX(-56%) rotate(-4deg); }
    72% { transform: translateX(-44%) rotate(4deg); }
}

@keyframes promise-story-memory-ring {
    0% {
        opacity: 0.72;
        transform: scale(0.78);
    }
    100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

@keyframes promise-story-memory-listening {
    from {
        filter: brightness(1) saturate(1);
        transform: translate(-50%, -50%) scale(0.96);
    }
    to {
        filter: brightness(1.22) saturate(1.25);
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes promise-story-memory-burst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    58% {
        opacity: 0.92;
        transform: translate(-50%, -50%) scale(1.42);
        filter: brightness(1.45);
    }
    100% {
        opacity: 0;
        transform: translate(9cqw, 8cqw) scale(0.12);
        filter: brightness(1.8);
    }
}

@keyframes promise-story-light-to-seal {
    0% {
        opacity: 0;
        transform: translateX(-50%) rotate(180deg) scaleY(0.12);
    }
    35% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) rotate(180deg) scaleY(1);
    }
}

@keyframes promise-story-final-stamp {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(1) rotate(0);
    }
    52% {
        opacity: 1;
        transform: translate(calc(-50% + 19.5cqw), -22.5cqw) scale(0.58) rotate(-7deg);
    }
    73% {
        opacity: 1;
        transform: translate(calc(-50% + 19.5cqw), -21cqw) scale(0.68) rotate(0);
    }
    88% {
        opacity: 1;
        transform: translate(calc(-50% + 19.5cqw), -22.2cqw) scale(0.6) rotate(0);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + 19.5cqw), -22.2cqw) scale(0.48);
    }
}

@keyframes promise-story-stamp-impact {
    0% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(0.3);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(4.2);
    }
}

@media (max-aspect-ratio: 4 / 3) {
    .promise-story__vow {
        width: 37%;
    }

    .promise-story__daro-caption {
        right: 1.2%;
        width: 39%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .promise-story *,
    .promise-story *::before,
    .promise-story *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Nghi thức Kể Thật v5 — triển khai đúng bố cục mockup đã duyệt
   Background đã chứa cuộn thư và toàn bộ bệ xoay; CSS chỉ đặt lớp tương tác.
   ========================================================================== */

.promise-story {
    background: #f5d79c;
}

.promise-story .promise-report-ceremony__background {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    filter: none;
}

.promise-story__warmth {
    background:
        radial-gradient(circle at 80% 24%, rgba(255, 225, 149, 0.14), transparent 26%),
        linear-gradient(180deg, transparent 72%, rgba(93, 62, 23, 0.04));
}

/* Thông tin lời hứa nằm bên trong chính cuộn thư lớn, không tạo cuộn thư thứ hai. */
.promise-story__vow {
    top: 17.2%;
    left: 35.3%;
    z-index: 10;
    width: 29.4%;
    height: 9%;
    aspect-ratio: auto;
    filter: none;
    transform: none;
}

.promise-story__vow > img {
    display: none;
}

.promise-story__vow-recipient {
    top: 0;
    left: 0;
    gap: 0.32cqw;
    color: #208e9f;
    font-size: clamp(7px, 0.58cqw, 12px);
    letter-spacing: 0.12em;
}

.promise-story__vow-recipient img,
.promise-story__final-recipient img {
    width: 1.35cqw;
    height: 1.35cqw;
    border-width: 0.1cqw;
}

.promise-story__vow > strong {
    top: 31%;
    left: 0;
    width: 100%;
    color: #754319;
    font-size: clamp(11px, 1.04cqw, 21px);
    text-align: center;
}

.promise-story__vow > small {
    display: none;
}

/* Daro sử dụng đúng pose suy nghĩ của mockup, đứng cùng cụm máy. */
.promise-story__daro {
    inset: auto 5.1% 9.5% auto;
    z-index: 11;
    width: 24.5%;
    height: 58%;
    object-fit: contain;
    object-position: 50% 100%;
    filter:
        saturate(1.04)
        drop-shadow(0 0.75cqw 0.65cqw rgba(93, 58, 21, 0.24));
}

.promise-story__daro-caption {
    top: 18.5%;
    right: 4.8%;
    bottom: auto;
    width: 23%;
    padding: 0.64cqw 1.15cqw 0.72cqw;
    border: 0.12cqw solid rgba(174, 123, 45, 0.62);
    border-radius: 1.35cqw;
    background:
        linear-gradient(145deg, rgba(255, 250, 220, 0.95), rgba(255, 226, 164, 0.92));
    box-shadow:
        0 0.35cqw 0 rgba(127, 79, 23, 0.18),
        0 0.7cqw 1cqw rgba(77, 49, 19, 0.15);
    color: #6a3a16;
    text-shadow: none;
}

.promise-story__daro-caption::after {
    right: 33%;
    bottom: -0.68cqw;
    background: #f8dea1;
    border-color: rgba(174, 123, 45, 0.5);
}

.promise-story__daro-caption > span {
    color: #168b9e;
    font-size: clamp(6px, 0.52cqw, 11px);
}

.promise-story__daro-caption p {
    font-size: clamp(8px, 0.76cqw, 15px);
    line-height: 1.14;
}

/* Engine phủ toàn sân khấu; projection nằm trong parchment, wheel nằm đúng trên máy. */
.promise-story__story-engine,
.promise-story.is-seal-awake .promise-story__story-engine,
.promise-story[data-report-state="sharing"] .promise-story__story-engine {
    inset: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: none;
}

.promise-story__story-engine::after {
    left: 50%;
    top: 35%;
    bottom: auto;
    width: 13cqw;
    height: 34cqw;
    border-radius: 50%;
    background:
        linear-gradient(180deg, rgba(93, 242, 235, 0), rgba(77, 236, 231, 0.22) 26%, rgba(46, 213, 217, 0.44) 76%, rgba(41, 194, 207, 0));
    filter: blur(1.4cqw);
    opacity: 0;
    transform: translateX(-50%) scaleY(0.4);
    transform-origin: 50% 100%;
}

.promise-story.is-story-locked .promise-story__story-engine::after {
    animation: promise-story-v5-light-column 720ms ease-out forwards;
}

.promise-story__projection {
    inset: 19.2% auto auto 37.1%;
    width: 25.8%;
    height: 38.5%;
    overflow: hidden;
    perspective: none;
}

.promise-story__projection::before {
    left: 50%;
    bottom: 5%;
    width: 72%;
    height: 31%;
    background:
        radial-gradient(ellipse, rgba(103, 255, 238, 0.52), rgba(45, 190, 202, 0.12) 52%, transparent 75%);
    filter: blur(0.55cqw);
}

.promise-story__empty {
    width: 8.4cqw;
    height: 8.4cqw;
    border-color: rgba(82, 207, 201, 0.42);
    background:
        radial-gradient(circle, rgba(255, 247, 198, 0.58), rgba(58, 207, 205, 0.14) 54%, transparent 72%);
    box-shadow:
        0 0 1.25cqw rgba(50, 210, 206, 0.26),
        inset 0 0 1.1cqw rgba(255, 255, 255, 0.44);
    color: #bd8a39;
    text-shadow: 0 1px 0 #fff4d0;
}

.promise-story__empty span {
    font-size: clamp(22px, 3cqw, 58px);
}

.promise-story__empty small {
    bottom: -1.1cqw;
    color: #8b632d;
}

.promise-story__scene {
    inset: 0;
    overflow: hidden;
    transform: translateY(0.8cqw) scale(0.9);
}

.promise-story__scene.is-active {
    filter:
        drop-shadow(0 0.5cqw 0.4cqw rgba(74, 52, 24, 0.18))
        drop-shadow(0 0 1.2cqw rgba(75, 226, 216, 0.26));
    transform: none;
}

.promise-story__scene img {
    position: absolute;
    top: -5%;
    left: 50%;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: translateX(-50%);
}

.promise-story__projection > strong {
    left: 50%;
    bottom: 0.55cqw;
    max-width: 88%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #78502a;
    font-size: clamp(8px, 0.72cqw, 15px);
    letter-spacing: 0.08em;
    text-shadow: 0 1px 0 rgba(255, 251, 222, 0.9);
}

/* Vòng điều khiển dùng chính cỗ máy đã nằm trong background. */
.promise-story__wheel {
    left: 50%;
    bottom: 7.2%;
    z-index: 18;
    width: 45%;
    height: 30%;
    transform: translateX(-50%);
}

.promise-story__wheel-orbit {
    display: none;
}

.promise-story__turn,
.promise-story__heart {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #81551e;
    text-shadow:
        0 1px 0 #fff1b1,
        0 0 0.55cqw rgba(68, 228, 218, 0.72);
}

.promise-story__turn {
    top: 34%;
    width: 7.8cqw;
    height: 7.8cqw;
    font-size: clamp(30px, 3.6cqw, 68px);
}

.promise-story__turn--back {
    left: 0.2%;
}

.promise-story__turn--next {
    right: 0.2%;
}

.promise-story__turn:hover,
.promise-story__turn:focus-visible {
    color: #0f9ca7;
    outline: 0;
    transform: translateY(-50%) scale(1.08);
}

.promise-story__heart {
    top: 78%;
    left: 50%;
    width: 10.8cqw;
    height: 6.2cqw;
    color: transparent;
    transform: translate(-50%, -50%);
}

.promise-story__heart span {
    display: none;
}

.promise-story__heart::after {
    content: "CHỌN CẢNH NÀY";
    color: #72502b;
    font-size: clamp(7px, 0.62cqw, 13px);
    font-weight: 1000;
    letter-spacing: 0.06em;
    text-shadow: 0 1px 0 #fff3c4;
}

.promise-story__heart:disabled::after {
    content: "ẤN ĐANG NGỦ";
    opacity: 0.5;
}

.promise-story__heart:not(:disabled):hover,
.promise-story__heart:not(:disabled):focus-visible {
    color: transparent;
    outline: 0;
    transform: translate(-50%, -50%) scale(1.04);
}

.promise-story__heart:not(:disabled):hover::after,
.promise-story__heart:not(:disabled):focus-visible::after {
    color: #0e8995;
}

/* Ấn lớn, đúng tâm socket của cỗ máy. Không còn bệ CSS giả. */
.promise-story__seal-pedestal {
    display: none;
}

.promise-story__seal {
    left: 50%;
    bottom: 19.6%;
    z-index: 22;
    width: 12.6cqw;
    height: 15.2cqw;
    filter:
        drop-shadow(0 0.75cqw 0.55cqw rgba(64, 42, 18, 0.32))
        drop-shadow(0 0 1.2cqw rgba(61, 229, 220, 0.36));
}

.promise-story__seal::before {
    bottom: 1%;
    width: 11.6cqw;
    height: 11.6cqw;
    border-color: rgba(91, 255, 241, 0.46);
    box-shadow:
        0 0 1.9cqw rgba(46, 229, 223, 0.48),
        inset 0 0 1.7cqw rgba(255, 251, 200, 0.34);
}

.promise-story__seal > span {
    display: none;
}

.promise-story__seal:hover img,
.promise-story__seal:focus-visible img {
    transform: translateY(-0.3cqw) scale(1.035);
}

/* Chỉ còn hướng dẫn nhỏ như một phần khắc trên bệ, không còn thanh UI web. */
.promise-story__instruction {
    left: 50%;
    bottom: 1.2%;
    width: 39%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #70502b;
    font-size: clamp(7px, 0.63cqw, 13px);
    text-shadow:
        0 1px 0 rgba(255, 244, 196, 0.94),
        0 0 0.45cqw rgba(255, 241, 172, 0.74);
}

/* Bong bóng xuất hiện giữa Daro và cuộn thư, không che mặt. */
.promise-story__memory {
    top: 29%;
    right: 24.5%;
    width: 18%;
    height: 30%;
}

.promise-story__memory-bubble {
    width: calc(5.6cqw + var(--memory-energy) * 2.5cqw);
    height: calc(5.6cqw + var(--memory-energy) * 2.5cqw);
}

.promise-story__memory > p {
    bottom: -0.2cqw;
    width: 126%;
    padding: 0.25cqw 0.55cqw;
    background: rgba(255, 245, 210, 0.88);
    color: #70502b;
}

.promise-story__quill {
    top: 3%;
    right: 0;
}

.promise-story__text-panel {
    right: 83%;
    bottom: 1%;
}

/* Ở bước đóng dấu, nội dung lời hứa dùng chính parchment nền. */
.promise-story__final-letter {
    top: 18.7%;
    left: 50%;
    z-index: 14;
    width: 30.5%;
    height: 35%;
    aspect-ratio: auto;
    filter: none;
    transform: translate(-50%, 0.8cqw) scale(0.94);
}

.promise-story__final-letter > img {
    display: none;
}

.promise-story.is-letter-ready .promise-story__final-letter {
    transform: translate(-50%, 0) scale(1);
}

.promise-story__final-recipient {
    top: 4%;
    left: 2%;
    font-size: clamp(7px, 0.58cqw, 12px);
}

.promise-story__final-letter > strong {
    top: 24%;
    left: 3%;
    width: 62%;
    font-size: clamp(15px, 1.42cqw, 28px);
}

.promise-story__final-letter > p {
    top: 44%;
    left: 3%;
    width: 58%;
    max-height: 27%;
    font-size: clamp(7px, 0.66cqw, 13px);
}

.promise-story__first-mark {
    top: 27%;
    right: 0;
    width: 31%;
}

.promise-story__first-mark b {
    font-size: clamp(6px, 0.53cqw, 11px);
}

.promise-story[data-report-state="ready"] .promise-story__story-engine,
.promise-story[data-report-state="stamping"] .promise-story__story-engine {
    opacity: 0;
    transform: none;
}

.promise-story[data-report-state="ready"] .promise-story__vow,
.promise-story[data-report-state="stamping"] .promise-story__vow {
    opacity: 0;
    transform: none;
}

.promise-story[data-report-state="ready"] .promise-story__daro,
.promise-story[data-report-state="stamping"] .promise-story__daro {
    opacity: 1;
    transform: none;
}

.promise-story[data-report-state="ready"] .promise-story__daro-caption,
.promise-story[data-report-state="stamping"] .promise-story__daro-caption,
.promise-story[data-report-state="sharing"] .promise-story__daro-caption {
    top: 18.5%;
    right: 4.8%;
    bottom: auto;
    width: 23%;
}

.promise-story[data-report-state="sharing"] .promise-story__wheel {
    opacity: 0.3;
}

.promise-story[data-report-state="stamping"] .promise-story__seal {
    animation: promise-story-v5-final-stamp 1.12s cubic-bezier(.2, .72, .22, 1) forwards;
}

.promise-story__stamp-impact {
    left: 60.8%;
    top: 36%;
}

.promise-story__close {
    top: 1.6%;
    right: 1.2%;
    width: 3.8cqw;
    height: 3.8cqw;
    border-width: 0.14cqw;
    background:
        radial-gradient(circle at 40% 32%, #fff8d4, #f6c660 72%, #cd8127);
    box-shadow:
        0 0.25cqw 0 #93601f,
        0 0.45cqw 0.8cqw rgba(78, 51, 18, 0.2);
    font-size: clamp(17px, 1.7cqw, 34px);
}

@keyframes promise-story-v5-light-column {
    0% {
        opacity: 0;
        transform: translateX(-50%) scaleY(0.15);
    }
    35% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scaleY(1);
    }
}

@keyframes promise-story-v5-final-stamp {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(1) rotate(0);
    }
    50% {
        opacity: 1;
        transform: translate(calc(-50% + 10.8cqw), -22cqw) scale(0.55) rotate(-7deg);
    }
    73% {
        opacity: 1;
        transform: translate(calc(-50% + 10.8cqw), -20.8cqw) scale(0.64) rotate(0);
    }
    88% {
        opacity: 1;
        transform: translate(calc(-50% + 10.8cqw), -21.8cqw) scale(0.57) rotate(0);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + 10.8cqw), -21.8cqw) scale(0.46);
    }
}

/* Đền Lời Hứa: three fixed 2:1 ritual scenes assembled from the supplied layers. */
.promise-center.promise-center--ritual {
    padding: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(107, 229, 255, 0.26), transparent 40%),
        #07172c;
}

.promise-center__panel.promise-center__panel--ritual {
    width: min(100vw, 200dvh);
    max-width: none;
    height: auto;
    max-height: none;
    aspect-ratio: 2 / 1;
    flex: 0 0 auto;
    padding: 0;
    overflow: hidden;
    background: #a8e7ff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.52);
}

.promise-ritual-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    color: #5e300d;
    font-family: "Baloo 2", sans-serif;
    user-select: none;
}

.promise-ritual-stage__background,
.promise-temple__cloud,
.promise-temple__node-art,
.promise-use__cloud,
.promise-use__scroll-art,
.promise-use__main-scroll,
.promise-use__seal-art,
.promise-use__stamp-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.promise-ritual-stage__background {
    z-index: 0;
}

.promise-ritual-back {
    position: absolute;
    top: 3.2%;
    left: 2.1%;
    z-index: 40;
    display: grid;
    align-items: center;
    justify-content: center;
    width: clamp(30px, 3vw, 56px);
    aspect-ratio: 1;
    padding: 0;
    color: #6a350c;
    font: 1000 clamp(22px, 2.25vw, 44px)/0.7 "Baloo 2", sans-serif;
    background: linear-gradient(#fffced, #ffd66c);
    border: max(1px, 0.13vw) solid #e59c23;
    border-radius: 50%;
    box-shadow: 0 0.28vw 0 #91480c, 0 0.65vw 1.1vw rgba(24, 61, 91, 0.22);
    cursor: pointer;
}

.promise-ritual-button {
    min-width: 10em;
    padding: 0.54em 1em;
    color: #6b3409;
    font: 1000 clamp(9px, 0.78vw, 16px)/1.05 "Baloo 2", sans-serif;
    border: max(1px, 0.13vw) solid #fff5ae;
    border-radius: 999px;
    cursor: pointer;
}

.promise-ritual-button--gold {
    background: linear-gradient(#ffe978, #ffae22);
    box-shadow: 0 0.3vw 0 #984b0a, 0 0.65vw 1.1vw rgba(105, 62, 13, 0.26);
}

.promise-ritual-button--soft {
    background: linear-gradient(#fffef7, #ffe9a9);
    border-color: #edc36a;
    box-shadow: 0 0.25vw 0 #bd7d22, 0 0.55vw 1vw rgba(105, 62, 13, 0.18);
}

.promise-ritual-button:disabled {
    opacity: 0.52;
    filter: grayscale(0.48);
    cursor: not-allowed;
}

.promise-ritual-button:not(:disabled):active,
.promise-ritual-back:active {
    transform: translateY(0.22vw);
}

/* Temple gateway */
.promise-temple__cloud {
    z-index: 2;
    animation: promise-temple-cloud-drift 7s ease-in-out infinite alternate;
}

.promise-temple__cloud--2 {
    animation-delay: -3.4s;
    animation-direction: alternate-reverse;
}

.promise-temple__node-art {
    z-index: 4;
    filter: drop-shadow(0 1.2vw 0.9vw rgba(43, 53, 64, 0.2));
    transition: filter 240ms ease, transform 240ms ease;
}

.promise-temple__node {
    position: absolute;
    top: 16%;
    z-index: 10;
    width: 39%;
    height: 69%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 44% 44% 22% 22%;
    cursor: pointer;
}

.promise-temple__node--forge {
    left: 5.4%;
}

.promise-temple__node--use {
    right: 3.2%;
}

.promise-temple__node:focus-visible {
    outline: none;
}

.promise-temple__node-art.is-hovered {
    filter:
        brightness(1.18)
        saturate(1.25)
        drop-shadow(0 0 12px rgba(255, 210, 100, 0.3));
    transform: translate3d(0, -2px, 0);
}

.promise-temple__node-copy {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: max-content;
    min-height: clamp(20px, 2vw, 38px);
    padding: 0.18em 0.9em;
    color: #fff2c5;
    background: linear-gradient(180deg, rgba(111, 59, 18, 0.97), rgba(48, 21, 6, 0.98));
    border: clamp(1px, 0.1vw, 2px) solid rgba(255, 235, 173, 0.94);
    border-radius: 999px;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    transition: filter 220ms ease, transform 220ms ease;
    pointer-events: none;
}

.promise-temple__node-copy strong {
    color: inherit;
    font-size: clamp(7px, 0.72vw, 14px);
    font-weight: 1000;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 2px 3px rgba(38, 13, 2, 0.72);
}

.promise-temple__node:is(:hover, :focus-visible) .promise-temple__node-copy {
    filter: brightness(1.14);
    transform: translate(-50%, -4%) scale(1.025);
}

/* Fragment-forging ritual */
.promise-forge__floating-art,
.promise-forge__piece-layers,
.promise-forge__piece-group,
.promise-forge__piece-layer,
.promise-forge__center-seal,
.promise-forge__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.promise-forge__floating-art {
    z-index: 5;
    contain: layout paint;
    transform: translate3d(0, 0, 0);
    animation: promise-forge-object-float 6.4s ease-in-out infinite;
    will-change: transform;
}

.promise-forge__piece-layers {
    z-index: 1;
}

.promise-forge__piece-group {
    display: block;
}

.promise-forge__piece-group--missing .promise-forge__piece-layer {
    filter:
        grayscale(1)
        brightness(0.64)
        contrast(1.08);
}

.promise-forge__piece-group--collected .promise-forge__piece-layer {
    filter:
        brightness(1.06)
        saturate(1.15)
        drop-shadow(0 0 0.34vw rgba(83, 238, 255, 0.9))
        drop-shadow(0 0 0.68vw rgba(44, 213, 235, 0.58));
}

.promise-forge__piece-layer {
    inset: auto;
    left: var(--asset-x);
    top: var(--asset-y);
    width: var(--asset-w);
    height: var(--asset-h);
    object-fit: contain;
}

.promise-forge__piece-layer.is-just-placed {
    animation: promise-forge-piece-arrive 500ms cubic-bezier(0.18, 0.8, 0.24, 1);
}

.promise-forge__energy-flow {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.promise-forge__energy-path {
    opacity: 0;
    transition: opacity 320ms ease;
}

.promise-forge__energy-path.is-active {
    opacity: 1;
}

.promise-forge__energy-rail,
.promise-forge__energy-stream {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.promise-forge__energy-rail {
    stroke: rgba(32, 255, 202, 0.32);
    stroke-width: 2.4;
    filter: drop-shadow(0 0 3px rgba(4, 100, 91, 0.9));
}

.promise-forge__energy-stream {
    stroke: #cefff0;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-dasharray: 2 25;
    filter:
        drop-shadow(0 0 2px #f1fff9)
        drop-shadow(0 0 5px #1affce)
        drop-shadow(0 0 8px rgba(0, 82, 78, 0.86));
    animation: promise-forge-energy-inflow 1.18s linear infinite;
    animation-delay: var(--energy-delay);
}

.promise-forge.is-ready .promise-forge__energy-rail {
    stroke: rgba(72, 255, 211, 0.55);
    stroke-width: 3.1;
}

.promise-forge.is-ready .promise-forge__energy-stream {
    stroke-width: 4;
    stroke-dasharray: 3 20;
    animation-duration: 0.82s;
}

.promise-forge__ready-piece-aura {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.promise-forge__ready-piece-aura i {
    position: absolute;
    left: var(--aura-x);
    top: var(--aura-y);
    width: 8.6%;
    aspect-ratio: 1;
    opacity: 0;
    background:
        radial-gradient(
            circle,
            rgba(228, 255, 248, 0.5) 0 14%,
            rgba(33, 255, 197, 0.27) 28%,
            rgba(8, 108, 103, 0.1) 46%,
            transparent 68%
        );
    border: 0;
    border-radius: 50%;
    box-shadow:
        0 0 0.65vw rgba(31, 255, 200, 0.68),
        0 0 1.35vw rgba(2, 92, 89, 0.42),
        inset 0 0 0.62vw rgba(219, 255, 245, 0.34);
    transform: translate(-50%, -50%) scale(0.64);
}

.promise-forge.is-ready .promise-forge__ready-piece-aura i {
    animation: promise-forge-ready-piece-pulse 2.65s ease-in-out infinite;
    animation-delay: var(--aura-delay);
}

.promise-forge__seal-aura {
    position: absolute;
    top: 20%;
    left: 41.8%;
    z-index: 2;
    width: 16.4%;
    height: 43%;
    opacity: 0.86;
    pointer-events: none;
    filter:
        saturate(1.42)
        contrast(1.1)
        drop-shadow(0 0 0.42vw rgba(0, 58, 68, 0.48));
    transition: opacity 380ms ease;
}

.promise-forge.is-ready .promise-forge__seal-aura {
    opacity: 0.98;
}

.promise-forge__seal-aura .aura-beam-volumetric {
    position: absolute;
    bottom: 13.5%;
    left: 50%;
    width: 100%;
    height: 90.7%;
    transform: translateX(-50%);
}

.promise-forge__seal-aura .beam-base {
    position: absolute;
    left: 21.65%;
    bottom: 12.1%;
    width: 56.7%;
    height: 9.8%;
}

.promise-forge__seal-aura .beam-base::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 1) 0%,
        rgba(215, 255, 242, 0.82) 20%,
        transparent 62%
    );
    filter: blur(2px);
}

.promise-forge__seal-aura .light-cylinder {
    position: absolute;
    bottom: 13.5%;
    left: 26.4%;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 47.2%;
    height: 88.4%;
    pointer-events: none;
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
    animation: recordBeamFlicker 4s infinite alternate ease-in-out;
}

.promise-forge__seal-aura .cylinder-core {
    position: absolute;
    bottom: -2.6%;
    width: 44.7%;
    height: 102.6%;
    border-radius: 0 0 50% 50% / 0 0 10px 10px;
    background: linear-gradient(to top, var(--beam-color) 0%, transparent 80%);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 30%,
        #000 70%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 30%,
        #000 70%,
        transparent 100%
    );
    mix-blend-mode: screen;
    filter: blur(4px);
}

.promise-forge__seal-aura .cylinder-streaks {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 90%;
    height: 100%;
    opacity: 0.85;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 80%);
    mask-image: linear-gradient(to top, #000 0%, transparent 80%);
}

.promise-forge__seal-aura .cylinder-streaks::before,
.promise-forge__seal-aura .cylinder-streaks::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
}

.promise-forge__seal-aura .cylinder-streaks::before {
    background-image:
        linear-gradient(to top, transparent, var(--beam-color), transparent),
        linear-gradient(to top, transparent, rgba(236, 255, 249, 0.7), transparent);
    background-size: 2px 72px, 1px 98px;
    animation: recordStreakAscend1 3s infinite linear;
}

.promise-forge__seal-aura .cylinder-streaks::after {
    background-image:
        linear-gradient(to top, transparent, var(--ellipse-glow), transparent),
        linear-gradient(to top, transparent, rgba(255, 255, 255, 0.9), transparent);
    background-size: 3px 54px, 2px 82px;
    animation: recordStreakAscend2 4.5s infinite linear;
}

.promise-forge__aura-particles {
    position: absolute;
    inset: 0 8% 4%;
    z-index: 4;
    overflow: visible;
}

.promise-forge__aura-particles i {
    position: absolute;
    left: var(--px);
    bottom: 0;
    width: clamp(1px, var(--ps), 2.8px);
    height: clamp(1px, var(--ps), 2.8px);
    opacity: 0;
    background: #d9fff4;
    border-radius: 50%;
    box-shadow:
        0 0 0.16vw #f2fffb,
        0 0 0.42vw rgba(27, 255, 195, 0.96),
        0 0 0.62vw rgba(0, 80, 78, 0.72);
    animation: promise-forge-particle-rise var(--pd) linear infinite;
    animation-delay: var(--delay);
    will-change: transform, opacity;
}

.promise-forge__center-seal {
    inset: auto;
    left: var(--asset-x);
    top: var(--asset-y);
    width: var(--asset-w);
    height: var(--asset-h);
    z-index: 3;
    object-fit: contain;
    opacity: 1;
    filter:
        grayscale(1)
        brightness(0.76)
        contrast(1.08)
        drop-shadow(0 0.45vw 0.38vw rgba(45, 57, 54, 0.28))
        drop-shadow(0 0 0.55vw rgba(255, 206, 66, 0.36));
    transition: filter 380ms ease;
}

.promise-forge.is-ready .promise-forge__center-seal {
    filter:
        grayscale(1)
        brightness(0.9)
        contrast(1.08)
        drop-shadow(0 0.5vw 0.4vw rgba(45, 57, 54, 0.26))
        drop-shadow(0 0 0.82vw rgba(195, 255, 232, 0.96))
        drop-shadow(0 0 1.4vw rgba(19, 255, 192, 0.84))
        drop-shadow(0 0 1.8vw rgba(0, 75, 78, 0.48));
}

.promise-forge__reward-ready {
    position: absolute;
    top: 24%;
    left: 41.4%;
    z-index: 2;
    width: 17.2%;
    aspect-ratio: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 360ms ease, visibility 360ms ease;
}

.promise-forge.is-ready .promise-forge__reward-ready {
    opacity: 1;
    visibility: visible;
}

.promise-forge__reward-ready .dr-reward-claim-modal__aura {
    inset: 3%;
}

.promise-forge__reward-ready .dr-seal-particles--claim {
    inset: 7% 10% 0;
}

.promise-forge__seal-hit {
    position: absolute;
    top: 31%;
    left: 44.25%;
    z-index: 14;
    width: 11.5%;
    height: 29%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 42%;
    cursor: pointer;
}

.promise-forge__seal-hit:disabled {
    cursor: default;
}

.promise-forge__flight-layer {
    position: absolute;
    inset: 0;
    z-index: 22;
    overflow: hidden;
    pointer-events: none;
}

.promise-forge__flying-shard {
    position: absolute;
    left: var(--forge-flight-x);
    top: var(--forge-flight-y);
    width: 5.4%;
    aspect-ratio: 1;
    object-fit: contain;
    filter:
        brightness(1.12)
        saturate(1.18)
        drop-shadow(0 0 0.48vw rgba(255, 220, 99, 0.96))
        drop-shadow(0 0 0.92vw rgba(77, 233, 245, 0.72));
    animation: promise-forge-shard-flight 680ms cubic-bezier(0.17, 0.78, 0.2, 1) forwards;
    will-change: transform, opacity;
}

.promise-forge__inventory {
    position: fixed;
    right: max(20px, 2.6vw);
    bottom: max(20px, 5.4vh);
    z-index: 26;
    display: grid;
    place-items: center;
    width: clamp(54px, 6.4vw, 124px);
    aspect-ratio: 1;
    padding: 0;
    background:
        radial-gradient(circle at 50% 43%, #fff7c8 0 22%, #47d5df 49%, #087e9c 72%);
    border: max(2px, 0.18vw) solid #ffe68c;
    border-radius: 50%;
    box-shadow:
        0 0.34vw 0 #8b4a0b,
        0 0 0 0.22vw rgba(20, 112, 128, 0.82),
        0 0.8vw 1.4vw rgba(21, 58, 76, 0.3);
    cursor: pointer;
    transition: filter 180ms ease, transform 180ms ease;
}

.promise-forge__inventory:not(:disabled):is(:hover, :focus-visible) {
    filter: brightness(1.13) saturate(1.08);
    transform: translateY(-2%) scale(1.04);
    outline: none;
}

.promise-forge__inventory:not(:disabled):active {
    transform: translateY(4%) scale(0.97);
}

.promise-forge__inventory:disabled {
    cursor: default;
}

.promise-forge__inventory img {
    position: relative;
    z-index: 2;
    width: 108%;
    height: 108%;
    object-fit: contain;
    filter: drop-shadow(0 0.2vw 0.24vw rgba(44, 65, 63, 0.3));
    pointer-events: none;
}

.promise-forge__inventory strong {
    position: absolute;
    right: -9%;
    bottom: -7%;
    z-index: 4;
    display: grid;
    place-items: center;
    min-width: 38%;
    aspect-ratio: 1;
    padding: 0.08em;
    color: #fff7c7;
    font: 1000 clamp(15px, 1.45vw, 29px)/1 "Baloo 2", sans-serif;
    text-shadow: 0 0.12vw 0 #6b350b;
    background: linear-gradient(#f5a725, #a95209);
    border: max(2px, 0.13vw) solid #fff0a3;
    border-radius: 50%;
    box-shadow: 0 0.16vw 0 #663006, 0 0 0.5vw rgba(255, 200, 48, 0.52);
}

.promise-forge__inventory-glow {
    position: absolute;
    inset: -17%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 232, 126, 0.44), transparent 66%);
    animation: promise-forge-inventory-pulse 2.2s ease-in-out infinite;
}

.promise-forge__inventory:disabled .promise-forge__inventory-glow {
    animation: none;
    opacity: 0.2;
}

.promise-forge__seal-hit:focus-visible {
    outline: max(2px, 0.14vw) solid #d9fdff;
    outline-offset: 0.2vw;
}

.promise-forge__video {
    z-index: 55;
    object-fit: cover;
    opacity: 0;
    background: #07172c;
    transition: opacity 180ms ease;
}

.promise-forge.is-video-playing .promise-forge__video {
    opacity: 1;
}

.promise-forge__success {
    position: absolute;
    inset: 0;
    z-index: 56;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    background:
        radial-gradient(
            ellipse at 50% 49%,
            rgba(225, 255, 247, 0.32) 0 8%,
            rgba(21, 238, 201, 0.14) 22%,
            rgba(5, 38, 50, 0.12) 50%,
            rgba(4, 22, 35, 0.36) 100%
        );
    pointer-events: none;
    transition: opacity 420ms ease, visibility 420ms ease;
}

.promise-forge.is-forge-complete .promise-forge__success {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.promise-forge.is-forge-complete .promise-forge__floating-art,
.promise-forge.is-forge-complete .promise-forge__energy-flow,
.promise-forge.is-forge-complete .promise-forge__inventory,
.promise-forge.is-forge-complete .promise-forge__seal-hit {
    opacity: 0;
    visibility: hidden;
}

.promise-forge__success-radiance {
    position: absolute;
    left: 38.5%;
    top: 21%;
    z-index: 2;
    width: 23%;
    aspect-ratio: 1;
    pointer-events: none;
}

.promise-forge__success-radiance .dr-reward-claim-modal__aura {
    inset: -4%;
}

.promise-forge__success-radiance .dr-seal-particles--claim {
    inset: 2% 8% -4%;
}

.promise-forge__success-beam.promise-forge__seal-aura {
    top: 15%;
    left: 39.5%;
    z-index: 1;
    width: 21%;
    height: 57%;
    opacity: 0.96;
}

.promise-forge__success-seal {
    position: absolute;
    left: 40.5%;
    top: 22.5%;
    z-index: 4;
    width: 19%;
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 1.1vw 0.75vw rgba(4, 37, 43, 0.32))
        drop-shadow(0 0 0.72vw rgba(230, 255, 247, 0.96))
        drop-shadow(0 0 1.55vw rgba(24, 255, 202, 0.86))
        drop-shadow(0 0 2.5vw rgba(0, 103, 104, 0.58));
    pointer-events: none;
    transform: translate3d(0, 0, 0) scale(0.76);
    animation: promise-forge-success-seal 4.2s ease-in-out infinite;
    will-change: transform;
}

.promise-forge__success-title {
    position: absolute;
    top: 8.5%;
    left: 50%;
    z-index: 8;
    display: inline-block;
    width: max-content;
    max-width: 82%;
    margin: 0;
    padding: 0.12em 1.8em;
    color: transparent;
    background: linear-gradient(
        180deg,
        #ecfffb 0%,
        #75f7e1 31%,
        #fff2a4 58%,
        #e9a42c 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.035em rgba(91, 48, 12, 0.82);
    filter:
        drop-shadow(0 0.1em 0 #75400e)
        drop-shadow(0 0 0.35em rgba(242, 255, 217, 0.92))
        drop-shadow(0 0 0.76em rgba(25, 255, 218, 0.76));
    font-family: "Baloo", cursive;
    font-size: clamp(19px, 2.25vw, 44px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.13em;
    text-align: center;
    transform: translateX(-50%);
}

.promise-forge__success-title::before,
.promise-forge__success-title::after {
    position: absolute;
    top: 50%;
    color: #9effec;
    -webkit-text-fill-color: #9effec;
    -webkit-text-stroke: 0.045em #9b5c14;
    filter:
        drop-shadow(0 0 0.25em #fff1ac)
        drop-shadow(0 0 0.55em #20f2d2);
    font-size: 0.64em;
    transform: translateY(-52%) rotate(45deg);
    content: "◆";
}

.promise-forge__success-title::before {
    left: 0.22em;
}

.promise-forge__success-title::after {
    right: 0.22em;
}

.promise-forge__success-use {
    position: absolute;
    left: 50%;
    top: 66%;
    z-index: 8;
    min-width: clamp(150px, 16vw, 310px);
    padding: 0.54em 1.5em 0.47em;
    color: #fff8ce;
    background:
        linear-gradient(180deg, rgba(63, 239, 216, 0.98), rgba(8, 145, 153, 0.98));
    border: max(2px, 0.14vw) solid #ffe890;
    border-radius: 999px;
    box-shadow:
        0 0.28vw 0 #875010,
        inset 0 0.13vw 0 rgba(255, 255, 255, 0.72),
        0 0 0.65vw rgba(255, 226, 112, 0.72),
        0 0 1.25vw rgba(21, 245, 215, 0.48);
    cursor: pointer;
    transform: translateX(-50%);
    transition: filter 180ms ease, transform 180ms ease;
}

.promise-forge__success-use span {
    font: 1000 clamp(12px, 1.15vw, 23px)/1 "Baloo 2", sans-serif;
    letter-spacing: 0.06em;
    text-shadow:
        0 0.1em 0 #4f2d08,
        0 0 0.42em rgba(255, 245, 185, 0.92);
}

.promise-forge__success-use:is(:hover, :focus-visible) {
    filter: brightness(1.13) saturate(1.08);
    transform: translate(-50%, -0.12vw) scale(1.025);
}

.promise-forge__success-use:active {
    transform: translate(-50%, 0.14vw) scale(0.99);
}

.promise-forge__success-use:focus-visible {
    outline: max(2px, 0.14vw) solid #f7ffff;
    outline-offset: 0.22vw;
}

/* Promise-scroll selection and stamping ritual */
.promise-use {
    container-type: inline-size;
}

.promise-use .promise-use__cropped-art {
    inset: auto;
    left: var(--asset-x);
    top: var(--asset-y);
    width: var(--asset-w);
    height: var(--asset-h);
    object-fit: fill;
}

.promise-use__cloud {
    z-index: 2;
    animation: promise-use-cloud-float 6.8s ease-in-out infinite alternate;
}

.promise-use__cloud--2,
.promise-use__cloud--4 {
    animation-delay: -3.2s;
    animation-direction: alternate-reverse;
}

.promise-use__cloud--1 {
    animation-name: promise-use-cloud-float-left;
    animation-duration: 8.2s;
    transform-origin: left bottom;
    will-change: transform;
}

.promise-use__cloud--2 {
    animation-name: promise-use-cloud-float-right;
    animation-duration: 8.2s;
    transform-origin: right bottom;
    will-change: transform;
}

.promise-use__focus-dimmer {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 44% 61% at 50% 50%,
            rgba(2, 18, 32, 0.08) 0 31%,
            rgba(2, 17, 30, 0.31) 62%,
            rgba(2, 13, 25, 0.48) 100%
        ),
        rgba(3, 22, 37, 0.18);
    transition: opacity 420ms ease;
}

.promise-use[data-ritual-state="selected"] .promise-use__focus-dimmer {
    opacity: 1;
}

.promise-use__daro {
    position: absolute;
    inset: 0;
    z-index: 7;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    object-fit: fill;
    pointer-events: none;
    transform: translate3d(1.4%, 1.2%, 0);
    transition:
        opacity 360ms ease,
        transform 520ms cubic-bezier(.18, .82, .2, 1);
}

.promise-use[data-ritual-state="selected"] .promise-use__daro--question {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.promise-use.is-promise-complete .promise-use__daro--question {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(1.2%, 0.5%, 0);
}

.promise-use.is-promise-complete .promise-use__daro--happy {
    z-index: 15;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.promise-use__daro-dialogue {
    position: absolute;
    top: 10%;
    right: 12%;
    z-index: 17;
    display: grid;
    width: 20%;
    align-content: center;
    padding: 0.48% 0.9% 0.56%;
    opacity: 0;
    visibility: hidden;
    color: #67330c;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0, rgba(116, 237, 245, 0.16), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 244, 0.98), rgba(255, 231, 157, 0.97));
    border: max(1px, 0.1vw) solid rgba(151, 82, 14, 0.94);
    border-radius: 17% / 38%;
    box-shadow:
        0 0.18vw 0 rgba(110, 54, 8, 0.82),
        0 0 0 0.12vw rgba(255, 249, 194, 0.78) inset,
        0 0.55vw 1vw rgba(1, 17, 28, 0.28);
    pointer-events: none;
    transform: translateY(8%) scale(0.96);
    transition:
        opacity 280ms ease 160ms,
        transform 440ms cubic-bezier(.18, .82, .2, 1.12) 120ms;
}

.promise-use__daro-dialogue.is-three-lines {
    width: 22%;
    min-height: 10%;
    padding: 0.72% 1.1% 0.88%;
    border-radius: 15% / 32%;
    box-sizing: border-box;
}

.promise-use__daro-dialogue::after {
    content: "";
    position: absolute;
    right: 42%;
    bottom: -14%;
    width: 6%;
    aspect-ratio: 1;
    background: #ffe8a2;
    border-right: max(1px, 0.1vw) solid rgba(151, 82, 14, 0.94);
    border-bottom: max(1px, 0.1vw) solid rgba(151, 82, 14, 0.94);
    transform: rotate(42deg) skew(-8deg, -8deg);
}

.promise-use[data-ritual-state="selected"] .promise-use__daro-dialogue {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.promise-use__daro-dialogue p {
    display: grid;
    gap: clamp(1px, 0.12vw, 3px);
    max-width: 100%;
    margin: 0;
    font-size: clamp(9px, 0.78vw, 15px);
    font-weight: 900;
    line-height: 1.18;
}

.promise-use__daro-dialogue p > span {
    display: block;
    white-space: nowrap;
}

.promise-use__scroll-list {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.promise-use__scroll-art,
.promise-use__mission-card {
    transition: opacity 300ms ease, transform 420ms cubic-bezier(.2, .78, .2, 1);
}

.promise-use__scroll-art.is-hovered {
    filter:
        brightness(1.18)
        saturate(1.25)
        drop-shadow(0 0 12px rgba(255, 210, 100, 0.3));
    transform: translate3d(0, -2px, 0);
}

.promise-use__mission-card {
    position: absolute;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 12.8%;
    height: 37.6%;
    padding: 0;
    color: #713c16;
    text-align: center;
    background: transparent;
    border: max(1px, 0.1vw) solid transparent;
    border-radius: 8% 8% 14% 14%;
    cursor: pointer;
}

.promise-use__mission-card--1 {
    top: 17.8%;
    left: 30.5%;
}

.promise-use__mission-card--2 {
    top: 17.7%;
    left: 43.58%;
}

.promise-use__mission-card--3 {
    top: 17.55%;
    left: 56.65%;
}

.promise-use__mission-card:hover,
.promise-use__mission-card:focus-visible {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    filter:
        brightness(1.14)
        saturate(1.12)
        drop-shadow(0 0 0.38vw rgba(255, 210, 100, 0.28));
    outline: none;
    transform: translate3d(0, -2px, 0) scale(1.015);
}

.promise-use__mission-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 68%;
    height: 72%;
    padding: 0;
    transform: translateY(3%);
}

.promise-use__mission-sender {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 0.2vw, 4px);
    max-width: 100%;
    padding:
        clamp(1px, 0.08vw, 2px)
        clamp(3px, 0.26vw, 5px);
    color: #397886;
    font-size: clamp(7px, 0.5vw, 10px);
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    background: rgba(255, 250, 218, 0.78);
    border: max(1px, 0.05vw) solid rgba(171, 117, 35, 0.42);
    border-radius: 999px;
    box-shadow: 0 0.08vw 0.18vw rgba(101, 58, 15, 0.14);
}

.promise-use__mission-sender img {
    display: block;
    width: clamp(12px, 0.92vw, 18px);
    aspect-ratio: 1;
    object-fit: cover;
    border: max(1px, 0.05vw) solid rgba(43, 153, 169, 0.7);
    border-radius: 50%;
}

.promise-use__mission-sender b {
    color: #1b7e94;
    font: inherit;
}

.promise-use__mission-card strong {
    display: -webkit-box;
    align-self: stretch;
    overflow: hidden;
    color: #6c330b;
    font-size: clamp(10px, 0.9vw, 18px);
    font-weight: 1000;
    line-height: 1.08;
    overflow-wrap: anywhere;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.promise-use__mission-message {
    display: -webkit-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: #875d35;
    font-size: clamp(9px, 0.68vw, 13px);
    font-weight: 750;
    line-height: 1.2;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.promise-use__mission-signature {
    color: #9a7044;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(8px, 0.58vw, 11px);
    font-weight: 700;
    line-height: 1;
}

.promise-use__rewards {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(4px, 0.46vw, 9px);
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #137d99;
    font-size: clamp(8px, 0.64vw, 13px);
    font-weight: 1000;
    background: transparent;
}

.promise-use__rewards:empty {
    display: none;
}

.promise-use__reward {
    display: inline-grid;
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: clamp(1px, 0.1vw, 2px);
    min-width: clamp(22px, 1.85vw, 36px);
    padding:
        clamp(2px, 0.17vw, 4px)
        clamp(3px, 0.24vw, 5px)
        clamp(2px, 0.15vw, 3px);
    line-height: 1;
    white-space: nowrap;
    background:
        radial-gradient(circle at 50% 17%, rgba(92, 236, 246, 0.2), transparent 38%),
        linear-gradient(180deg, rgba(255, 250, 222, 0.96), rgba(250, 215, 139, 0.9));
    border: max(1px, 0.06vw) solid rgba(185, 116, 25, 0.88);
    border-radius: 38% 38% 30% 30% / 28% 28% 24% 24%;
    box-shadow:
        0 0 0 max(1px, 0.05vw) rgba(255, 239, 177, 0.76) inset,
        0 0.08vw 0.2vw rgba(102, 54, 11, 0.28),
        0 0 0.28vw rgba(33, 194, 209, 0.2);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.72),
        0 0.08vw 0.18vw rgba(52, 102, 111, 0.18);
}

.promise-use__reward img {
    display: block;
    width: clamp(14px, 1.15vw, 22px);
    aspect-ratio: 1;
    object-fit: contain;
    filter:
        brightness(1.06)
        saturate(1.12)
        drop-shadow(0 0.08vw 0.08vw rgba(77, 44, 12, 0.32));
}

.promise-use__reward b {
    font: inherit;
    font-size: clamp(7px, 0.56vw, 11px);
    font-weight: 1000;
    line-height: 1;
}

.promise-use__main-scroll {
    z-index: 6;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.78) translateY(-2%);
    transition: opacity 300ms ease, transform 520ms cubic-bezier(.18, .86, .2, 1.18);
}

.promise-use__main-copy {
    position: absolute;
    top: 27.5%;
    left: 31.7%;
    z-index: 8;
    display: grid;
    grid-template-rows: repeat(5, auto);
    place-items: center;
    align-content: center;
    row-gap: clamp(4px, 0.42vw, 8px);
    width: 24.6%;
    min-height: 29%;
    padding: 1.15% 1.45% 1.05%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    text-align: center;
    transform: scale(0.9);
    transition: opacity 320ms ease 120ms, transform 480ms cubic-bezier(.18, .86, .2, 1.15) 80ms;
}

.promise-use__recipient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.34vw, 7px);
    max-width: 86%;
    padding:
        clamp(2px, 0.16vw, 4px)
        clamp(6px, 0.48vw, 10px)
        clamp(2px, 0.16vw, 4px)
        clamp(3px, 0.2vw, 5px);
    color: #82501d;
    background: rgba(255, 246, 208, 0.76);
    border: max(1px, 0.06vw) solid rgba(184, 111, 24, 0.72);
    border-radius: 999px;
    box-shadow:
        0 0.12vw 0.3vw rgba(104, 54, 12, 0.2),
        0 0 0.34vw rgba(38, 187, 202, 0.16);
}

.promise-use__recipient img {
    width: clamp(18px, 1.42vw, 29px);
    aspect-ratio: 1;
    object-fit: cover;
    background: #f7df9a;
    border: max(1px, 0.08vw) solid #c57c1d;
    border-radius: 50%;
}

.promise-use__recipient span {
    min-width: 0;
    overflow: hidden;
    font-size: clamp(7px, 0.54vw, 11px);
    font-weight: 850;
    letter-spacing: 0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.promise-use__recipient b {
    color: #1686a2;
    font: inherit;
    font-weight: 1000;
}

.promise-use__main-kicker {
    position: relative;
    display: -webkit-box;
    max-width: 92%;
    padding-bottom: clamp(5px, 0.4vw, 8px);
    overflow: hidden;
    color: #1686a2;
    font-size: clamp(8px, 0.64vw, 13px);
    font-weight: 1000;
    line-height: 1.1;
    letter-spacing: 0.13em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.promise-use__main-kicker::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 0;
    height: max(1px, 0.06vw);
    background: linear-gradient(90deg, transparent, rgba(205, 139, 38, 0.82), transparent);
    box-shadow: 0 0 0.22vw rgba(29, 188, 204, 0.28);
}

.promise-use__main-copy strong {
    max-width: 84%;
    color: #6b330d;
    font-size: clamp(15px, 1.42vw, 28px);
    font-weight: 1000;
    line-height: 1.05;
    text-wrap: balance;
}

.promise-use__main-copy p {
    display: -webkit-box;
    max-width: 78%;
    margin: 0;
    overflow: hidden;
    color: #82562e;
    font-size: clamp(9px, 0.74vw, 15px);
    font-weight: 750;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.promise-use__main-copy .promise-use__rewards {
    position: relative;
    gap: clamp(10px, 0.82vw, 18px);
    width: auto;
    margin-top: clamp(1px, 0.12vw, 3px);
    padding: clamp(7px, 0.55vw, 11px) 0 0;
    color: #147d98;
    font-size: clamp(10px, 0.78vw, 16px);
    font-weight: 1000;
    background: transparent;
}

.promise-use__main-copy .promise-use__rewards::before {
    content: "";
    position: absolute;
    top: 0;
    left: 17%;
    right: 17%;
    height: max(1px, 0.055vw);
    background:
        radial-gradient(circle at center, #28bfcd 0 8%, transparent 10%),
        linear-gradient(90deg, transparent, rgba(203, 139, 42, 0.74) 28% 72%, transparent);
}

.promise-use__rewards--main .promise-use__reward img {
    width: clamp(19px, 1.48vw, 31px);
}

.promise-use__rewards--main .promise-use__reward {
    min-width: clamp(38px, 3vw, 58px);
    padding:
        clamp(4px, 0.3vw, 6px)
        clamp(6px, 0.46vw, 9px)
        clamp(3px, 0.24vw, 5px);
    border-radius: 32% 32% 25% 25% / 23% 23% 20% 20%;
    box-shadow:
        0 0 0 max(1px, 0.06vw) rgba(255, 242, 190, 0.82) inset,
        0 0.12vw 0.28vw rgba(102, 54, 11, 0.3),
        0 0 0.45vw rgba(23, 190, 207, 0.24);
}

.promise-use__rewards--main .promise-use__reward b {
    font-size: clamp(9px, 0.72vw, 15px);
}

/*
 * Full Record Cup aura from Đại Sảnh Vinh Danh.
 * The 360 × 430 source proportions are preserved responsively in this scene.
 */
.promise-use__record-aura {
    position: absolute;
    top: 64.5%;
    left: 50%;
    z-index: 9;
    width: 18.67%;
    height: 44.61%;
    opacity: 0;
    pointer-events: none;
    filter: saturate(1.38) contrast(1.08);
    transform: translate(-50%, -50%);
    transition: opacity 320ms ease, filter 320ms ease;
}

.promise-use.has-seal .promise-use__record-aura {
    opacity: 1;
}

.promise-use__record-aura .aura-beam-volumetric {
    left: 0;
    bottom: 4.65%;
    width: 100%;
    height: 90.7%;
    opacity: 0.94;
    z-index: 1;
    mix-blend-mode: screen;
    transform: none;
}

.promise-use__record-aura .beam-base {
    position: absolute;
    left: 21.67%;
    bottom: 3.25%;
    z-index: 2;
    width: 56.67%;
    height: 9.77%;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.96) 0%,
            var(--ellipse-glow) 42%,
            transparent 72%
        );
    box-shadow:
        0 0 1.35cqw 0.42cqw var(--beam-color),
        inset 0 0 1.15cqw 0.26cqw var(--beam-color);
    mix-blend-mode: screen;
    pointer-events: none;
    transform: none;
    animation: promise-record-beam-flicker 3s infinite alternate ease-in-out;
}

.promise-use__record-aura .beam-base::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.78) 20%,
            transparent 62%
        );
    filter: blur(2px);
}

.promise-use__record-aura .light-cylinder {
    position: absolute;
    bottom: 4.65%;
    left: 26.39%;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 47.22%;
    height: 88.37%;
    pointer-events: none;
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
    mask-image: linear-gradient(to top, #000 0%, #000 50%, transparent 100%);
    animation: promise-record-beam-flicker 4s infinite alternate ease-in-out;
}

.promise-use__record-aura .cylinder-core {
    position: absolute;
    bottom: -2.63%;
    width: 44.71%;
    height: 102.63%;
    border-radius: 0 0 50% 50% / 0 0 10px 10px;
    background: linear-gradient(to top, var(--beam-color) 0%, transparent 80%);
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%);
    mask-image:
        linear-gradient(to right, transparent 0%, #000 30%, #000 70%, transparent 100%);
    filter: blur(4px);
    mix-blend-mode: screen;
}

.promise-use__record-aura .cylinder-streaks {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 90%;
    height: 100%;
    opacity: 0.85;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 80%);
    mask-image: linear-gradient(to top, #000 0%, transparent 80%);
}

.promise-use__record-aura .cylinder-streaks::before,
.promise-use__record-aura .cylinder-streaks::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
}

.promise-use__record-aura .cylinder-streaks::before {
    background-image:
        linear-gradient(to top, transparent, var(--beam-color), transparent),
        linear-gradient(to top, transparent, rgba(255, 255, 255, 0.5), transparent);
    background-size: 2px 72px, 1px 98px;
    animation: promise-record-streak-ascend-1 3s infinite linear;
}

.promise-use__record-aura .cylinder-streaks::after {
    background-image:
        linear-gradient(to top, transparent, var(--ellipse-glow), transparent),
        linear-gradient(to top, transparent, rgba(255, 255, 255, 0.8), transparent);
    background-size: 3px 54px, 2px 82px;
    animation: promise-record-streak-ascend-2 4.5s infinite linear;
}

.promise-use__record-aura-particles {
    position: absolute;
    top: 64.5%;
    left: 50%;
    z-index: 11;
    width: 18.67%;
    height: 44.61%;
    opacity: 0;
    overflow: visible;
    pointer-events: none;
    filter: saturate(1.3) brightness(1.12);
    transform: translate(-50%, -50%);
    transition: opacity 320ms ease;
}

.promise-use.has-seal .promise-use__record-aura-particles {
    opacity: 1;
}

.promise-use__record-aura-particles i {
    position: absolute;
    left: var(--px);
    bottom: 9.46%;
    width: var(--ps);
    height: var(--ps);
    opacity: 0;
    background: #f5fffd;
    border: 1px solid rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    box-shadow:
        0 0 5px 1px #fff,
        0 0 11px 3px var(--beam-color),
        0 0 24px 6px var(--ellipse-glow);
    mix-blend-mode: screen;
    animation: promise-record-particle-rise var(--pd) ease-in-out infinite;
    animation-delay: var(--delay);
}

.promise-use__record-aura-particles i:nth-child(4n) {
    border: 0;
    border-radius: 0;
    clip-path:
        polygon(
            50% 0%,
            62% 37%,
            100% 50%,
            62% 63%,
            50% 100%,
            38% 63%,
            0% 50%,
            38% 37%
        );
}

.promise-use__seal-aura {
    position: absolute;
    top: 45%;
    left: 40.1%;
    z-index: 9;
    width: 19.8%;
    height: 40%;
    opacity: 0;
    overflow: visible;
    isolation: isolate;
    pointer-events: none;
    filter: saturate(1.14);
    transition: opacity 320ms ease, filter 320ms ease;
}

.promise-use.has-seal .promise-use__seal-aura {
    opacity: 0.96;
}

.promise-use__seal-aura::before {
    content: "";
    position: absolute;
    bottom: -4%;
    left: 50%;
    z-index: 0;
    width: 126%;
    height: 102%;
    pointer-events: none;
    background: linear-gradient(
        to top,
        transparent 0%,
        rgba(207, 255, 247, 0.72) 9%,
        rgba(62, 237, 219, 0.42) 30%,
        rgba(54, 237, 219, 0.24) 66%,
        transparent 100%
    );
    -webkit-mask-image:
        conic-gradient(
            from 0deg at 50% 116%,
            #000 0deg,
            rgba(0, 0, 0, 0.72) 16deg,
            rgba(0, 0, 0, 0.24) 25deg,
            transparent 34deg,
            transparent 326deg,
            rgba(0, 0, 0, 0.24) 335deg,
            rgba(0, 0, 0, 0.72) 344deg,
            #000 360deg
        ),
        linear-gradient(
            to top,
            transparent 0%,
            rgba(0, 0, 0, 0.28) 6%,
            #000 16%,
            #000 66%,
            rgba(0, 0, 0, 0.22) 84%,
            transparent 100%
        );
    mask-image:
        conic-gradient(
            from 0deg at 50% 116%,
            #000 0deg,
            rgba(0, 0, 0, 0.72) 16deg,
            rgba(0, 0, 0, 0.24) 25deg,
            transparent 34deg,
            transparent 326deg,
            rgba(0, 0, 0, 0.24) 335deg,
            rgba(0, 0, 0, 0.72) 344deg,
            #000 360deg
        ),
        linear-gradient(
            to top,
            transparent 0%,
            rgba(0, 0, 0, 0.28) 6%,
            #000 16%,
            #000 66%,
            rgba(0, 0, 0, 0.22) 84%,
            transparent 100%
        );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    filter: blur(clamp(13px, 1.18vw, 24px));
    mix-blend-mode: screen;
    opacity: 0.9;
    transform: translateX(-50%);
    animation: promise-use-trapezoid-aura 3.4s ease-in-out infinite;
}

.promise-use__round-aura {
    position: absolute;
    top: 31%;
    left: 50%;
    z-index: 2;
    width: 104%;
    aspect-ratio: 1;
    pointer-events: none;
    background:
        radial-gradient(circle,
            rgba(255, 255, 226, 0.46) 0 7%,
            rgba(255, 232, 137, 0.22) 18%,
            rgba(255, 205, 77, 0.1) 38%,
            transparent 64%);
    border-radius: 50%;
    filter: drop-shadow(0 0 30px rgba(255, 221, 119, 0.62));
    opacity: 1;
    transform: translate3d(-50%, -50%, 0);
    user-select: none;
}

.promise-use__round-aura-ring {
    position: absolute;
    inset: 16%;
    border: clamp(2px, 0.18vw, 4px) solid rgba(255, 225, 125, 0.94);
    border-radius: 50%;
    box-shadow:
        0 0 14px rgba(255, 248, 205, 0.82),
        0 0 28px rgba(255, 211, 95, 0.44),
        inset 0 0 15px rgba(255, 211, 95, 0.3);
    opacity: 0;
    transform: scale(0.48);
    animation: promise-use-round-aura-expand 3.7s ease-out infinite;
    will-change: transform, opacity;
}

.promise-use__round-aura-ring:nth-child(2) {
    animation-delay: -1.4s;
}

.promise-use__round-aura-ring:nth-child(3) {
    animation-delay: -2.8s;
}

.promise-use__round-aura::after {
    content: "";
    position: absolute;
    inset: 8%;
    border: clamp(1px, 0.1vw, 2px) solid rgba(255, 222, 117, 0.48);
    border-radius: 50%;
    box-shadow:
        0 0 16px rgba(255, 225, 125, 0.38),
        inset 0 0 16px rgba(255, 211, 95, 0.16);
    pointer-events: none;
}

.promise-use__seal-aura .aura-beam-volumetric {
    position: absolute;
    bottom: 1%;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: visible;
    mix-blend-mode: screen;
    transform: translateX(-50%);
    filter: none;
}

.promise-use__seal-aura .aura-cylinder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0.98;
    transform: none;
}

.promise-use__seal-aura .aura-cylinder::before {
    content: "";
    position: absolute;
    inset: -6.7% -14.3%;
    background: linear-gradient(
        to top,
        transparent 0%,
        rgba(255, 255, 255, 0.84) 9%,
        var(--beam-color) 22%,
        transparent 100%
    );
    -webkit-mask-image:
        conic-gradient(
            from 0deg at 50% 150%,
            #000 0deg,
            rgba(0, 0, 0, 0.5) 12deg,
            transparent 22deg,
            transparent 338deg,
            rgba(0, 0, 0, 0.5) 348deg,
            #000 360deg
        ),
        linear-gradient(
            to top,
            transparent 0%,
            #000 10%,
            #000 24%,
            rgba(0, 0, 0, 0.2) 70%,
            transparent 100%
        );
    mask-image:
        conic-gradient(
            from 0deg at 50% 150%,
            #000 0deg,
            rgba(0, 0, 0, 0.5) 12deg,
            transparent 22deg,
            transparent 338deg,
            rgba(0, 0, 0, 0.5) 348deg,
            #000 360deg
        ),
        linear-gradient(
            to top,
            transparent 0%,
            #000 10%,
            #000 24%,
            rgba(0, 0, 0, 0.2) 70%,
            transparent 100%
        );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    filter: blur(25px);
    opacity: 1;
    mix-blend-mode: screen;
}

.promise-use__seal-aura .aura-cylinder::after {
    content: none;
}

.promise-use__seal-aura .aura-main {
    position: absolute;
    inset: auto;
    bottom: -3%;
    width: 100%;
    height: 103%;
    border-radius: 0 0 50% 50% / 0 0 8% 8%;
    background: linear-gradient(
        to top,
        transparent 0%,
        rgba(255, 255, 255, 0.94) 9%,
        var(--beam-color) 27%,
        rgba(255, 255, 255, 0.2) 60%,
        transparent 100%
    );
    -webkit-mask-image:
        conic-gradient(
            from 0deg at 50% 150%,
            #000 0deg,
            rgba(0, 0, 0, 0.6) 10deg,
            transparent 18deg,
            transparent 342deg,
            rgba(0, 0, 0, 0.6) 350deg,
            #000 360deg
        ),
        linear-gradient(
            to top,
            transparent 0%,
            #000 10%,
            #000 32%,
            rgba(0, 0, 0, 0.4) 70%,
            transparent 100%
        );
    mask-image:
        conic-gradient(
            from 0deg at 50% 150%,
            #000 0deg,
            rgba(0, 0, 0, 0.6) 10deg,
            transparent 18deg,
            transparent 342deg,
            rgba(0, 0, 0, 0.6) 350deg,
            #000 360deg
        ),
        linear-gradient(
            to top,
            transparent 0%,
            #000 10%,
            #000 32%,
            rgba(0, 0, 0, 0.4) 70%,
            transparent 100%
        );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    filter: blur(15px);
    opacity: 1;
    mix-blend-mode: plus-lighter;
}

.promise-use__seal-aura .aura-main::before {
    content: none;
}

.promise-use__seal-aura .light-cylinder {
    position: absolute;
    bottom: 1%;
    left: 50%;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 47.2%;
    height: 88.4%;
    opacity: 0.62;
    pointer-events: none;
    transform: translateX(-50%);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(
        to top,
        transparent 0%,
        #000 13%,
        #000 50%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to top,
        transparent 0%,
        #000 13%,
        #000 50%,
        transparent 100%
    );
    animation: recordBeamFlicker 4s infinite alternate ease-in-out;
}

.promise-use__seal-aura .cylinder-core {
    position: absolute;
    bottom: -2.6%;
    width: 44.7%;
    height: 102.6%;
    border-radius: 0 0 50% 50% / 0 0 10px 10px;
    background: linear-gradient(
        to top,
        transparent 0%,
        var(--beam-color) 13%,
        transparent 82%
    );
    -webkit-mask-image:
        linear-gradient(to right, transparent, #000 30% 70%, transparent),
        linear-gradient(to top, transparent 0%, #000 14% 58%, transparent 100%);
    mask-image:
        linear-gradient(to right, transparent, #000 30% 70%, transparent),
        linear-gradient(to top, transparent 0%, #000 14% 58%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    filter: blur(4px);
    mix-blend-mode: screen;
}

.promise-use__seal-aura .beam-base {
    position: absolute;
    left: 21.65%;
    bottom: 0%;
    width: 56.7%;
    height: 9.8%;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.88) 0%,
        var(--ellipse-glow) 38%,
        rgba(75, 239, 222, 0.22) 56%,
        transparent 72%
    );
    box-shadow: none;
    filter:
        blur(clamp(2px, 0.16vw, 4px))
        drop-shadow(0 0 0.72vw var(--beam-color));
    opacity: 0.86;
}

.promise-use__aura-particles {
    position: absolute;
    top: 10%;
    right: 21.65%;
    bottom: 4.9%;
    left: 21.65%;
    z-index: 3;
    overflow: visible;
}

.promise-use__aura-particles i {
    position: absolute;
    left: var(--px);
    bottom: 0;
    width: max(var(--ps), clamp(3px, 0.19vw, 4px));
    height: max(var(--ps), clamp(3px, 0.19vw, 4px));
    opacity: 0;
    background: #f4fffd;
    border-radius: 50%;
    box-shadow:
        0 0 0.22vw #ffffff,
        0 0 0.56vw rgba(93, 255, 236, 1),
        0 0 0.95vw rgba(20, 211, 202, 0.88);
    animation: promise-use-particle-rise var(--pd) ease-in-out infinite;
    animation-delay: var(--delay);
}

.promise-use__seal-art {
    z-index: 10;
    filter:
        drop-shadow(0 0.55vw 0.5vw rgba(45, 57, 54, 0.34))
        drop-shadow(0 0 0.8vw rgba(142, 255, 240, 0.78))
        drop-shadow(0 0 1.25vw rgba(42, 220, 210, 0.46));
    transform-origin: 50% 50%;
    transition: filter 240ms ease, opacity 240ms ease;
}

.promise-use__seal-front-light {
    position: absolute;
    top: 45%;
    left: 40.1%;
    z-index: 11;
    width: 19.8%;
    height: 40%;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    transition: opacity 320ms ease, filter 320ms ease;
}

.promise-use.has-seal .promise-use__seal-front-light {
    opacity: 0.56;
}

.promise-use__seal-front-light::before {
    content: "";
    position: absolute;
    inset: 4% -8% 3%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(126, 255, 241, 0.08) 25%,
        rgba(60, 239, 222, 0.19) 52%,
        rgba(171, 255, 244, 0.28) 78%,
        rgba(218, 255, 250, 0.12) 100%
    );
    -webkit-mask-image:
        conic-gradient(
            from 0deg at 50% 116%,
            #000 0deg,
            rgba(0, 0, 0, 0.68) 15deg,
            rgba(0, 0, 0, 0.2) 24deg,
            transparent 33deg,
            transparent 327deg,
            rgba(0, 0, 0, 0.2) 336deg,
            rgba(0, 0, 0, 0.68) 345deg,
            #000 360deg
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.12) 18%,
            #000 43%,
            #000 80%,
            transparent 100%
        );
    mask-image:
        conic-gradient(
            from 0deg at 50% 116%,
            #000 0deg,
            rgba(0, 0, 0, 0.68) 15deg,
            rgba(0, 0, 0, 0.2) 24deg,
            transparent 33deg,
            transparent 327deg,
            rgba(0, 0, 0, 0.2) 336deg,
            rgba(0, 0, 0, 0.68) 345deg,
            #000 360deg
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.12) 18%,
            #000 43%,
            #000 80%,
            transparent 100%
        );
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    filter: blur(clamp(7px, 0.72vw, 15px));
    transform: translateZ(0);
}

.promise-use__seal-art.is-available {
    animation: promise-use-seal-float 3s ease-in-out infinite;
}

.promise-use__seal-art.is-unavailable {
    opacity: 1;
    filter:
        grayscale(1)
        brightness(0.76)
        contrast(1.08)
        drop-shadow(0 0.5vw 0.48vw rgba(45, 57, 54, 0.3));
}

.promise-use__seal-hit {
    position: absolute;
    top: 49.7%;
    left: 43.4%;
    z-index: 13;
    width: 13.4%;
    height: 31%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 42%;
    cursor: pointer;
}

.promise-use__seal-hit:not(:disabled)::before {
    content: none;
}

.promise-use__seal-hit:focus-visible {
    outline: max(2px, 0.16vw) solid #fff2a0;
    outline-offset: 0.25vw;
}

.promise-use__stamp-art {
    z-index: 12;
    opacity: 0;
    clip-path: circle(0 at 61.2% 42%);
    filter: drop-shadow(0 0 1vw #5feeff) drop-shadow(0 0 1.6vw #fff3a2);
    transform-origin: 61.2% 42%;
}

.promise-use__stamp-impact {
    position: absolute;
    top: 31.4%;
    left: 55.95%;
    z-index: 11;
    width: 10.7%;
    aspect-ratio: 1;
    opacity: 0;
    overflow: visible;
    pointer-events: none;
    border: max(1px, 0.09vw) solid rgba(255, 249, 183, 0.88);
    border-radius: 50%;
    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255, 239, 127, 0.92) 0deg 2deg,
            transparent 2deg 13deg
        );
    box-shadow:
        0 0 1.1vw rgba(255, 245, 177, 0.95),
        0 0 2.2vw rgba(67, 230, 249, 0.82),
        inset 0 0 1.15vw rgba(255, 255, 255, 0.88);
}

.promise-use__stamp-impact::before,
.promise-use__stamp-impact::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.promise-use__stamp-impact::before {
    inset: 18%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 0 9%,
        rgba(255, 224, 102, 0.9) 22%,
        rgba(64, 226, 245, 0.52) 48%,
        transparent 72%
    );
    box-shadow:
        0 0 1.2vw rgba(255, 244, 174, 0.96),
        0 0 2.6vw rgba(65, 226, 245, 0.72);
}

.promise-use__stamp-impact::after {
    inset: -18%;
    border: max(1px, 0.1vw) solid rgba(255, 230, 121, 0.88);
    box-shadow:
        0 0 0.75vw rgba(255, 238, 152, 0.88),
        inset 0 0 0.7vw rgba(73, 225, 243, 0.62);
}

.promise-use__nav-art {
    position: absolute;
    inset: 0;
    z-index: 13;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0.72;
    pointer-events: none;
    filter:
        brightness(1.08)
        saturate(1.08)
        drop-shadow(0 0 0.42vw rgba(255, 226, 113, 0.74));
    transition: opacity 180ms ease, filter 180ms ease;
}

.promise-use:has(.promise-use__page-hit--previous:not(:disabled)) .promise-use__nav-art--previous,
.promise-use:has(.promise-use__page-hit--next:not(:disabled)) .promise-use__nav-art--next {
    opacity: 1;
    filter:
        brightness(1.16)
        saturate(1.16)
        drop-shadow(0 0 0.55vw rgba(255, 236, 145, 0.94))
        drop-shadow(0 0 1.05vw rgba(255, 178, 37, 0.68));
}

.promise-use:has(.promise-use__page-hit--previous:is(:hover, :focus-visible)) .promise-use__nav-art--previous,
.promise-use:has(.promise-use__page-hit--next:is(:hover, :focus-visible)) .promise-use__nav-art--next {
    opacity: 1;
    filter:
        brightness(1.34)
        saturate(1.25)
        drop-shadow(0 0 0.7vw rgba(255, 249, 191, 1))
        drop-shadow(0 0 1.4vw rgba(255, 173, 29, 0.88));
}

.promise-use__page-hit {
    position: absolute;
    top: 45.55%;
    z-index: 14;
    width: 7.25%;
    height: 13.7%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.promise-use__page-hit:not(:disabled)::before,
.promise-use__page-hit:not(:disabled)::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.promise-use__page-hit:not(:disabled)::before {
    top: 9%;
    bottom: 9%;
    left: -32%;
    width: 24%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 235, 0.82) 43%,
        rgba(128, 248, 255, 0.7) 58%,
        transparent
    );
    filter: blur(clamp(1px, 0.1vw, 2px));
    opacity: 0;
    transform: translateX(0) skewX(-16deg);
    animation: promise-use-nav-ready-sheen 2.8s ease-in-out infinite;
}

.promise-use__page-hit:not(:disabled)::after {
    top: 12%;
    right: 16%;
    width: clamp(5px, 0.5vw, 10px);
    aspect-ratio: 1;
    background: #fffbd8;
    border-radius: 50%;
    box-shadow:
        0 0 0.32vw #ffffff,
        0 0 0.72vw #ffe474,
        0 0 1.05vw rgba(70, 230, 248, 0.82);
    animation: promise-use-nav-ready-spark 1.35s ease-in-out infinite;
}

.promise-use__page-hit--previous {
    left: 22.28%;
}

.promise-use__page-hit--next {
    right: 23.45%;
}

.promise-use__page-hit:not(:disabled):hover,
.promise-use__page-hit:not(:disabled):focus-visible {
    box-shadow: 0 0 1.5vw rgba(255, 239, 113, 0.92), inset 0 0 1vw rgba(79, 229, 250, 0.55);
    outline: none;
}

.promise-use__page-hit:disabled {
    cursor: default;
}

.promise-use__main-close {
    position: absolute;
    top: 23.4%;
    right: 27.1%;
    z-index: 16;
    display: none;
    place-items: center;
    width: clamp(30px, 3.2vw, 62px);
    aspect-ratio: 1;
    padding: 0;
    color: #6d360c;
    font: 1000 clamp(20px, 2vw, 40px)/1 "Baloo 2", sans-serif;
    font-weight: 1000;
    background:
        radial-gradient(circle at 42% 32%, #fffbe2 0 18%, transparent 19%),
        linear-gradient(180deg, #fff0a8, #f6b72d 72%, #d47a12);
    border: max(2px, 0.14vw) solid #a65409;
    border-radius: 50%;
    box-shadow:
        0 0.28vw 0 #7b3b08,
        0 0 0 0.14vw rgba(255, 244, 176, 0.72),
        0 0 1.1vw rgba(255, 202, 68, 0.68),
        inset 0 0.16vw 0.3vw rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease;
}

.promise-use[data-ritual-state="selected"] .promise-use__main-close {
    display: grid;
}

.promise-use.is-stamped .promise-use__main-close {
    display: none;
}

.promise-use__main-close:not(:disabled):is(:hover, :focus-visible) {
    filter: brightness(1.16) saturate(1.08);
    outline: max(2px, 0.14vw) solid #fff8c7;
    outline-offset: 0.22vw;
    transform: translateY(-4%) scale(1.06);
}

.promise-use__main-close:disabled {
    opacity: 0.52;
    cursor: default;
}

.promise-use[data-ritual-state="selected"] .promise-use__scroll-art,
.promise-use[data-ritual-state="selected"] .promise-use__mission-card,
.promise-use.is-stamping .promise-use__scroll-art,
.promise-use.is-stamping .promise-use__mission-card {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.78) translateY(-5%);
}

.promise-use[data-ritual-state="selected"] .promise-use__main-scroll,
.promise-use[data-ritual-state="selected"] .promise-use__main-copy,
.promise-use[data-ritual-state="empty"] .promise-use__main-scroll,
.promise-use[data-ritual-state="empty"] .promise-use__main-copy {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.promise-use[data-ritual-state="selected"] .promise-use__nav-art,
.promise-use[data-ritual-state="selected"] .promise-use__page-hit {
    display: none;
}

.promise-use[data-ritual-state="empty"] .promise-use__page-hit {
    opacity: 0;
    pointer-events: none;
}

.promise-use.is-seal-charging .promise-use__seal-art {
    animation: promise-use-seal-charge 520ms ease-in-out infinite alternate;
}

.promise-use.is-seal-charging .promise-use__seal-aura {
    opacity: 1;
    filter: brightness(1.38) saturate(1.2);
}

.promise-use.is-seal-charging .promise-use__record-aura,
.promise-use.is-seal-charging .promise-use__record-aura-particles {
    opacity: 1;
    filter: brightness(1.38) saturate(1.2);
}

.promise-use.is-seal-charging .promise-use__seal-front-light {
    opacity: 0.74;
    filter: brightness(1.24) saturate(1.12);
}

.promise-use.is-stamping .promise-use__seal-art {
    z-index: 10;
    animation: promise-use-seal-stamp 1.34s cubic-bezier(.18, .76, .2, 1) both;
}

.promise-use.is-promise-complete .promise-use__seal-art.is-available {
    animation: promise-use-seal-float 3s ease-in-out infinite;
}

.promise-use.is-stamping .promise-use__seal-aura {
    opacity: 1;
    animation: promise-use-aura-draw 940ms ease-out both;
}

.promise-use.is-stamping .promise-use__record-aura,
.promise-use.is-stamping .promise-use__record-aura-particles {
    opacity: 1;
    animation: promise-use-aura-draw 940ms ease-out both;
}

.promise-use.is-stamping .promise-use__seal-front-light {
    opacity: 0.66;
    animation: promise-use-front-light-draw 940ms ease-out both;
}

.promise-use.is-stamped .promise-use__seal-aura {
    opacity: 0.66;
    animation: none;
    filter: saturate(1.05) brightness(0.92);
    transition-duration: 320ms;
}

.promise-use.is-stamped .promise-use__record-aura,
.promise-use.is-stamped .promise-use__record-aura-particles {
    opacity: 0.66;
    animation: none;
    filter: saturate(1.05) brightness(0.92);
    transition-duration: 320ms;
}

.promise-use.is-stamped .promise-use__seal-front-light {
    opacity: 0.26;
    animation: none;
    filter: brightness(0.94);
    transition-duration: 320ms;
}

.promise-use.is-stamped .promise-use__stamp-art {
    opacity: 1;
    animation: promise-use-stamp-reveal 560ms cubic-bezier(.16, .92, .24, 1.12) both;
}

.promise-use.is-stamped .promise-use__stamp-impact {
    animation: promise-use-stamp-impact 720ms cubic-bezier(.12, .82, .24, 1) both;
}

.promise-use.is-stamped .promise-use__stamp-impact::before {
    animation: promise-use-stamp-flash 420ms ease-out both;
}

.promise-use.is-stamped .promise-use__stamp-impact::after {
    animation: promise-use-stamp-shockwave 680ms cubic-bezier(.12, .76, .2, 1) both;
}

.promise-use.is-stamped .promise-use__main-scroll {
    animation: promise-use-scroll-impact 460ms cubic-bezier(.18, .8, .24, 1) both;
}

.promise-use.is-stamped .promise-use__main-copy {
    animation: promise-use-copy-impact 460ms cubic-bezier(.18, .8, .24, 1) both;
}

.promise-use.is-stamped .promise-use__seal-hit,
.promise-use.is-stamped .promise-use__page-hit {
    visibility: hidden;
    pointer-events: none;
}

.promise-use__instruction {
    position: absolute;
    left: 50%;
    bottom: 4.8%;
    z-index: 18;
    max-width: 48%;
    margin: 0;
    padding:
        clamp(5px, 0.42vw, 9px)
        clamp(11px, 0.9vw, 18px);
    overflow: hidden;
    color: #fff4c3;
    font-size: clamp(9px, 0.72vw, 15px);
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(39, 91, 112, 0.94), rgba(15, 51, 75, 0.96));
    border: max(1px, 0.08vw) solid rgba(255, 222, 126, 0.9);
    border-radius: 999px;
    box-shadow:
        0 0.26vw 0 rgba(72, 38, 9, 0.76),
        0 0.65vw 1.1vw rgba(4, 19, 31, 0.38);
    transform: translateX(-50%);
    transition: opacity 220ms ease, transform 220ms ease;
}

.promise-use.is-promise-complete .promise-use__instruction {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 30%);
}

.promise-use__return {
    position: absolute;
    left: 50%;
    bottom: 4.2%;
    z-index: 19;
    min-width: 18%;
    padding:
        clamp(7px, 0.58vw, 12px)
        clamp(14px, 1.2vw, 24px);
    opacity: 0;
    visibility: hidden;
    color: #633006;
    font: 1000 clamp(10px, 0.82vw, 17px)/1 "Baloo 2", sans-serif;
    letter-spacing: 0.04em;
    background:
        radial-gradient(circle at 50% 0, rgba(255, 255, 218, 0.76), transparent 40%),
        linear-gradient(180deg, #ffe978, #f6a91f);
    border: max(2px, 0.12vw) solid #fff1a5;
    border-radius: 999px;
    box-shadow:
        0 0.32vw 0 #884108,
        0 0 1.2vw rgba(255, 211, 84, 0.68);
    cursor: pointer;
    pointer-events: none;
    transform: translate(-50%, 28%);
    transition:
        opacity 240ms ease,
        transform 360ms cubic-bezier(.18, .82, .2, 1.16),
        filter 160ms ease;
}

.promise-use.is-promise-complete .promise-use__return {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%);
}

.promise-use__return:is(:hover, :focus-visible) {
    filter: brightness(1.14) saturate(1.08);
    outline: max(2px, 0.14vw) solid #ffffff;
    outline-offset: 0.22vw;
}

.promise-ritual-loading {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    align-content: center;
    gap: 1.2em;
    color: #fff0a5;
    text-align: center;
    background:
        radial-gradient(circle at 50% 46%, rgba(69, 218, 244, 0.3), transparent 33%),
        linear-gradient(#0b5285, #071c3f);
}

.promise-ritual-loading span {
    width: clamp(54px, 7vw, 124px);
    aspect-ratio: 1;
    border: max(3px, 0.28vw) solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff29c;
    border-radius: 50%;
    box-shadow: 0 0 2vw rgba(74, 228, 252, 0.56);
    animation: promise-ritual-loading-spin 850ms linear infinite;
}

.promise-ritual-loading strong {
    font-size: clamp(16px, 1.8vw, 36px);
    font-weight: 1000;
    letter-spacing: 0.08em;
}

.promise-ritual-loading--error .promise-ritual-button {
    margin-top: 1em;
}

@keyframes promise-temple-cloud-drift {
    from { transform: translate3d(-0.45%, 0.15%, 0) scale(1.002); }
    to { transform: translate3d(0.65%, -0.25%, 0) scale(1.008); }
}

@keyframes promise-use-cloud-float {
    from { transform: translate3d(-3px, 2px, 0); }
    to { transform: translate3d(5px, -3px, 0); }
}

@keyframes promise-use-cloud-float-left {
    from { transform: translate3d(-30px, 5px, 0) scale(1.025); }
    to { transform: translate3d(-3px, 0, 0) scale(1.055); }
}

@keyframes promise-use-cloud-float-right {
    from { transform: translate3d(3px, 0, 0) scale(1.055); }
    to { transform: translate3d(30px, 5px, 0) scale(1.025); }
}

@keyframes promise-forge-object-float {
    0%,
    100% { transform: translate3d(0, 1px, 0); }
    50% { transform: translate3d(0, -3px, 0); }
}

@keyframes promise-forge-success-seal {
    0%,
    100% { transform: translate3d(0, 0, 0) scale(0.76); }
    50% { transform: translate3d(0, -0.65vw, 0) scale(0.79); }
}

@keyframes promise-forge-piece-arrive {
    0% { opacity: 0; filter: brightness(2.4); }
    38% { opacity: 1; filter: brightness(1.85); }
    100% { opacity: 1; filter: brightness(1); }
}

@keyframes recordBeamFlicker {
    0% {
        opacity: 0.78;
        transform: scaleY(0.98);
    }
    100% {
        opacity: 1;
        transform: scaleY(1.02);
    }
}

@keyframes recordStreakAscend1 {
    0% {
        background-position:
            18px 120%,
            70px 160%;
    }
    100% {
        background-position:
            18px -20%,
            70px -40%;
    }
}

@keyframes recordStreakAscend2 {
    0% {
        background-position:
            44px 140%,
            92px 110%;
    }
    100% {
        background-position:
            44px -30%,
            92px -20%;
    }
}

@keyframes promise-record-beam-flicker {
    from { opacity: 0.58; transform: scaleY(0.96); }
    to { opacity: 0.92; transform: scaleY(1.04); }
}

@keyframes promise-record-particle-rise {
    0% { opacity: 0; transform: translateY(0) scale(0.55); }
    14% { opacity: 0.92; }
    72% { opacity: 0.58; }
    100% {
        opacity: 0;
        transform:
            translateY(-9.85cqw)
            translateX(var(--drift, 0px))
            scale(1.08);
    }
}

@keyframes promise-record-streak-ascend-1 {
    from { background-position: 28% 100%, 68% 120%; }
    to { background-position: 28% -40%, 68% -60%; }
}

@keyframes promise-record-streak-ascend-2 {
    from { background-position: 42% 110%, 58% 130%; }
    to { background-position: 42% -50%, 58% -70%; }
}

@keyframes promise-forge-particle-rise {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.55); }
    16% { opacity: 0.9; }
    76% { opacity: 0.52; }
    100% { opacity: 0; transform: translate3d(var(--drift, 0), -19vw, 0) scale(0.82); }
}

@keyframes promise-forge-energy-inflow {
    to { stroke-dashoffset: -27; }
}

@keyframes promise-forge-ready-piece-pulse {
    0%,
    100% {
        opacity: 0.34;
        transform: translate(-50%, -50%) scale(0.76);
    }
    50% {
        opacity: 0.96;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes promise-forge-shard-flight {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.54) rotate(0deg);
    }
    18% {
        opacity: 1;
    }
    72% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform:
            translate(
                calc(var(--forge-flight-dx) - 50%),
                calc(var(--forge-flight-dy) - 50%)
            )
            scale(0.72)
            rotate(420deg);
    }
}

@keyframes promise-forge-inventory-pulse {
    0%,
    100% { opacity: 0.44; transform: scale(0.92); }
    50% { opacity: 0.92; transform: scale(1.08); }
}

@keyframes promise-use-seal-float {
    0%,
    100% {
        filter:
            drop-shadow(0 0.55vw 0.5vw rgba(45, 57, 54, 0.34))
            drop-shadow(0 0 0.8vw rgba(142, 255, 240, 0.76))
            drop-shadow(0 0 1.2vw rgba(42, 220, 210, 0.4));
        transform: translateY(0);
    }
    50% {
        filter:
            drop-shadow(0 0.72vw 0.56vw rgba(45, 57, 54, 0.26))
            drop-shadow(0 0 1.18vw rgba(165, 255, 244, 0.92))
            drop-shadow(0 0 1.65vw rgba(39, 224, 213, 0.58));
        transform: translateY(-0.35cqw);
    }
}

@keyframes promise-use-round-aura-expand {
    0% {
        opacity: 0;
        transform: scale(0.48);
    }

    16% {
        opacity: 0.72;
    }

    68% {
        opacity: 0.24;
    }

    100% {
        opacity: 0;
        transform: scale(1.24);
    }
}

@keyframes promise-use-trapezoid-aura {
    0%,
    100% {
        opacity: 0.76;
        filter: blur(clamp(13px, 1.18vw, 24px)) brightness(0.96);
    }
    50% {
        opacity: 1;
        filter: blur(clamp(14px, 1.28vw, 26px)) brightness(1.14);
    }
}

@keyframes promise-use-front-light-draw {
    0% { opacity: 0.5; filter: brightness(1); }
    38% { opacity: 0.84; filter: brightness(1.4); }
    100% { opacity: 0.42; filter: brightness(1.04); }
}

@keyframes promise-use-nav-ready-sheen {
    0%,
    55%,
    100% {
        opacity: 0;
        transform: translateX(0) skewX(-16deg);
    }
    12% {
        opacity: 0.16;
    }
    28% {
        opacity: 0.8;
    }
    42% {
        opacity: 0;
        transform: translateX(580%) skewX(-16deg);
    }
}

@keyframes promise-use-nav-ready-spark {
    0%,
    100% {
        opacity: 0.42;
        transform: scale(0.72);
    }
    50% {
        opacity: 1;
        transform: scale(1.34);
    }
}

@keyframes promise-use-particle-rise {
    0% {
        opacity: 0.28;
        transform: translate3d(0, 0, 0) scale(0.56);
    }
    10% {
        opacity: 1;
        transform: translate3d(0, -1.2vh, 0) scale(0.82);
    }
    28% {
        opacity: 0.96;
        transform: translate3d(0, -5vh, 0) scale(1);
    }
    72% {
        opacity: 0.78;
        transform: translate3d(var(--drift), -18vh, 0) scale(1.08);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift), -30vh, 0) scale(1.12);
    }
}

@keyframes promise-use-seal-charge {
    from {
        filter:
            drop-shadow(0 0.55vw 0.5vw rgba(45, 57, 54, 0.34))
            drop-shadow(0 0 0.9vw rgba(142, 255, 240, 0.78));
        transform: translateY(-0.175cqw);
    }
    to {
        filter:
            drop-shadow(0 0.55vw 0.5vw rgba(45, 57, 54, 0.34))
            drop-shadow(0 0 1.8vw #bafff4)
            drop-shadow(0 0 2.7vw #25dcca);
        transform: translateY(-0.6cqw);
    }
}

@keyframes promise-use-seal-stamp {
    0% {
        opacity: 1;
        transform: translate(0, -0.6cqw) scale(1.012);
    }
    16% {
        transform: translate(0, -1.5cqw) scale(1.035) rotate(-0.8deg);
    }
    42% {
        transform: translate(9.6cqw, -10.8cqw) scale(0.84) rotate(-2.2deg);
    }
    58% {
        filter:
            brightness(1.24)
            drop-shadow(0 0.35vw 0.38vw rgba(45, 57, 54, 0.42))
            drop-shadow(0 0 1.35vw #fff0a3)
            drop-shadow(0 0 2.15vw #48e2f5);
        transform: translate(11.2cqw, -11.3cqw) scale(0.77) rotate(0);
    }
    67% {
        transform: translate(10.7cqw, -10.4cqw) scale(0.8) rotate(0.35deg);
    }
    78% {
        transform: translate(6.5cqw, -6.7cqw) scale(0.87) rotate(-0.45deg);
    }
    90% {
        opacity: 1;
        transform: translate(1.4cqw, -1.6cqw) scale(0.97) rotate(0.25deg);
    }
    100% {
        opacity: 1;
        filter:
            drop-shadow(0 0.55vw 0.5vw rgba(45, 57, 54, 0.34))
            drop-shadow(0 0 0.8vw rgba(142, 255, 240, 0.78))
            drop-shadow(0 0 1.25vw rgba(42, 220, 210, 0.46));
        transform: translate(0, 0) scale(1) rotate(0);
    }
}

@keyframes promise-use-aura-draw {
    0% {
        opacity: 1;
        filter: brightness(1.36) saturate(1.18);
    }
    68% {
        opacity: 0.92;
        filter: brightness(1.7) saturate(1.3);
    }
    100% {
        opacity: 0.22;
        filter: brightness(1.15) saturate(1.08);
    }
}

@keyframes promise-use-stamp-reveal {
    0% {
        opacity: 0;
        clip-path: circle(0 at 50% 50%);
        filter: brightness(3.2) drop-shadow(0 0 2vw #fff);
    }
    38% {
        opacity: 1;
        clip-path: circle(55% at 50% 50%);
        filter: brightness(1.8) drop-shadow(0 0 1.6vw #55eaff);
    }
    100% {
        opacity: 1;
        clip-path: circle(75% at 50% 50%);
        filter: brightness(1) drop-shadow(0 0 0.7vw rgba(69, 218, 244, 0.72));
    }
}

@keyframes promise-use-stamp-impact {
    0% { opacity: 0; transform: scale(0.18) rotate(-12deg); }
    18% { opacity: 1; transform: scale(0.82) rotate(2deg); }
    38% { opacity: 0.92; transform: scale(1.12) rotate(5deg); }
    100% { opacity: 0; transform: scale(1.85) rotate(14deg); }
}

@keyframes promise-use-stamp-flash {
    0% { opacity: 0; transform: scale(0.2); }
    24% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.72); }
}

@keyframes promise-use-stamp-shockwave {
    0% { opacity: 0; transform: scale(0.28); }
    24% { opacity: 0.95; }
    100% { opacity: 0; transform: scale(1.52); }
}

@keyframes promise-use-scroll-impact {
    0% { filter: brightness(1); transform: none; }
    14% { filter: brightness(1.18); transform: translateY(0.42%) scaleY(0.994); }
    34% { filter: brightness(1.05); transform: translateY(-0.24%) scaleY(1.003); }
    58% { transform: translateY(0.12%); }
    100% { filter: brightness(1); transform: none; }
}

@keyframes promise-use-copy-impact {
    0% { filter: none; transform: none; }
    14% { filter: brightness(1.12); transform: translateY(2.4%) scale(0.988); }
    36% { transform: translateY(-1.1%) scale(1.006); }
    62% { transform: translateY(0.45%); }
    100% { filter: none; transform: none; }
}

@keyframes promise-ritual-loading-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .promise-temple__cloud,
    .promise-use__cloud,
    .promise-forge__floating-art,
    .promise-forge__seal-aura .beam-base,
    .promise-forge__seal-aura .light-cylinder,
    .promise-forge__seal-aura .cylinder-streaks::before,
    .promise-forge__seal-aura .cylinder-streaks::after,
    .promise-forge__aura-particles i,
    .promise-forge__energy-stream,
    .promise-forge__ready-piece-aura i,
    .promise-forge__reward-ready .dr-reward-claim-modal__aura i,
    .promise-forge__reward-ready .dr-seal-particles i,
    .promise-forge__success-seal,
    .promise-forge__success-radiance .dr-reward-claim-modal__aura i,
    .promise-forge__success-radiance .dr-seal-particles i,
    .promise-forge__inventory-glow,
    .promise-use__seal-art.is-available,
    .promise-use__nav-art,
    .promise-use__page-hit:not(:disabled)::before,
    .promise-use__page-hit:not(:disabled)::after,
    .promise-use__seal-aura::before,
    .promise-use__round-aura-ring,
    .promise-use__seal-aura .aura-main,
    .promise-use__seal-aura .beam-base,
    .promise-use__seal-front-light,
    .promise-use__seal-front-light::before,
    .promise-use__aura-particles i,
    .promise-use.is-seal-charging .promise-use__seal-art,
    .promise-use.is-stamping .promise-use__seal-aura,
    .promise-use__record-aura .beam-base,
    .promise-use__record-aura .light-cylinder,
    .promise-use__record-aura .cylinder-streaks::before,
    .promise-use__record-aura .cylinder-streaks::after,
    .promise-use__record-aura-particles i,
    .promise-use.is-stamping .promise-use__record-aura,
    .promise-use.is-stamping .promise-use__record-aura-particles,
    .promise-use.is-stamping .promise-use__seal-front-light,
    .promise-use.is-stamping .promise-use__seal-art,
    .promise-use.is-stamped .promise-use__stamp-art,
    .promise-use.is-stamped .promise-use__stamp-impact,
    .promise-use.is-stamped .promise-use__stamp-impact::before,
    .promise-use.is-stamped .promise-use__stamp-impact::after,
    .promise-use.is-stamped .promise-use__main-scroll,
    .promise-use.is-stamped .promise-use__main-copy,
    .promise-ritual-loading span {
        animation: none !important;
    }

    .promise-use__round-aura-ring {
        opacity: 0.38;
        transform: scale(0.92);
    }

    .promise-use__page-hit:not(:disabled)::before {
        opacity: 0;
    }

    .promise-use__page-hit:not(:disabled)::after {
        opacity: 0.9;
        transform: scale(1);
    }

    .promise-use.is-stamped .promise-use__seal-art {
        opacity: 1;
        transform: none;
    }

    .promise-use.is-stamped .promise-use__stamp-art {
        clip-path: circle(75% at 50% 50%);
    }

    .promise-forge__flying-shard {
        animation-duration: 0.01ms !important;
    }

    .promise-forge__piece-layer,
    .promise-forge__center-seal,
    .promise-use__scroll-art,
    .promise-use__mission-card,
    .promise-use__main-scroll,
    .promise-use__main-copy,
    .promise-use__daro,
    .promise-use__daro-dialogue,
    .promise-use__instruction,
    .promise-use__return {
        transition-duration: 0.01ms !important;
    }
}

/* Chuẩn Label 3–2–i: labels never affect map layout and are discoverable via the HUD i button. */
[data-node-label-scope] [data-node-label] {
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

[data-node-label-scope]:not(.node-labels-on) [data-node-label] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

[data-node-label-scope].node-labels-on [data-node-label] {
    opacity: 1 !important;
    visibility: visible !important;
}

.task-home-current-promise {
    display: grid;
    width: 100%;
    gap: clamp(2px, 0.24vw, 6px);
    margin: 0;
    color: #7b4319;
    font-size: clamp(10px, 0.82vw, 16px);
    line-height: 1;
}

.task-home-current-promise__mission {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    height: clamp(86px, 7.4vw, 142px);
    min-width: 0;
    gap: 0;
    text-transform: none;
    text-shadow: 0 0.04em 0 rgba(114, 67, 28, 0.08);
    transform:
        perspective(clamp(700px, 60vw, 1200px))
        rotateX(32deg)
        rotateZ(0.35deg);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.task-home-current-promise__mission[hidden] {
    display: none;
}

.task-home-current-promise__body {
    display: grid;
    justify-self: start;
    width: 74%;
    min-width: 0;
    place-items: center;
    gap: clamp(4px, 0.38vw, 7px);
}

.task-home-current-promise__label {
    color: #13839e;
    font-size: clamp(9px, 0.73vw, 14px);
    font-weight: 1000;
    letter-spacing: 0.09em;
    line-height: 1;
    mix-blend-mode: multiply;
    text-transform: uppercase;
}

.task-home-current-promise__body > strong {
    display: -webkit-box;
    overflow: hidden;
    color: #7a350d;
    font-size: clamp(16px, 1.62vw, 31px);
    line-height: 1.02;
    mix-blend-mode: multiply;
    text-wrap: balance;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.task-home-current-promise__description {
    width: min(100%, 28em);
    color: #82572f;
    font-size: clamp(9px, 0.73vw, 14px);
    font-weight: 750;
    line-height: 1.1;
    mix-blend-mode: multiply;
    text-align: center;
    text-wrap: balance;
}

.task-home-current-promise__rewards {
    gap: clamp(8px, 0.65vw, 13px);
    margin-top: clamp(2px, 0.18vw, 4px);
}

.task-home-current-promise__rewards .promise-use__reward {
    min-width: clamp(18px, 1.55vw, 30px);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
}

.task-home-current-promise__rewards .promise-use__reward img {
    width: clamp(12px, 1vw, 19px);
    filter: saturate(0.82) contrast(0.94);
}

.task-home-current-promise__rewards .promise-use__reward b {
    color: #70401f;
    font-size: clamp(7px, 0.52vw, 10px);
    mix-blend-mode: multiply;
}

.task-home-current-promise__stamp {
    position: absolute;
    top: 42.5%;
    right: 22%;
    display: block;
    width: 13.5%;
    aspect-ratio: 1;
    object-fit: contain;
    opacity: 0.82;
    filter: saturate(0.88) contrast(1.02);
    mix-blend-mode: multiply;
    transform: translateY(-50%);
}

.task-home-race-attempts {
    display: grid;
    place-items: center;
    gap: clamp(4px, 0.4vw, 8px);
    min-width: 0;
}

.task-home-node--overview .task-home-current-promise .task-home-race-attempts__label {
    color: #864611;
    font-size: clamp(13px, 1.08vw, 21px);
    font-weight: 1000;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.task-home-race-attempts__value {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: clamp(3px, 0.3vw, 7px);
    color: #8a4512;
    white-space: nowrap;
}

.task-home-node--overview .task-home-current-promise .task-home-race-attempts__value strong {
    color: #b35a13;
    font-size: clamp(30px, 3.35vw, 64px);
    line-height: 0.82;
}

.task-home-node--overview .task-home-current-promise .task-home-race-attempts__value span {
    font-size: clamp(12px, 1vw, 19px);
    font-weight: 1000;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.task-home-current-promise[data-mode="promise"] {
    align-items: center;
}

.task-home-current-promise[data-mode="promise"] .task-home-race-attempts {
    display: none;
}

.task-home-node--overview[data-content-mode="promise"] .task-home-node__copy {
    top: 18%;
    width: 78%;
    max-width: 78%;
}

.task-home-node--overview .task-home-node__copy {
    width: 68%;
    max-width: 68%;
}

.task-home-ritual-particles {
    position: absolute;
    inset: 5% 4% 9%;
    z-index: 2;
    overflow: hidden;
    border-radius: 46% 46% 28% 28%;
    pointer-events: none;
}

.task-home-ritual-particles i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: clamp(1.25px, var(--size), 3.8px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff 0 16%, #fff6a7 36%, #ffc44f 66%, rgba(255, 145, 17, 0.2) 100%);
    box-shadow:
        0 0 clamp(2px, 0.24vw, 5px) rgba(255, 248, 181, 0.88),
        0 0 clamp(5px, 0.5vw, 10px) rgba(255, 186, 64, 0.54);
    opacity: 0;
    animation: task-home-ritual-light-float var(--duration) ease-in-out infinite;
    animation-delay: var(--delay);
    will-change: transform, opacity;
}

.task-home-ritual-particles i:nth-child(3n) {
    border-radius: 18%;
    transform: rotate(45deg);
}

.task-home-node--optional[data-hero-state="attention"] .task-home-ritual-particles i {
    box-shadow:
        0 0 clamp(3px, 0.3vw, 6px) rgba(255, 255, 220, 0.96),
        0 0 clamp(6px, 0.58vw, 11px) rgba(255, 187, 55, 0.68);
}

@keyframes task-home-ritual-light-float {
    0% {
        opacity: 0;
        translate: 0 18%;
        scale: 0.42;
    }
    22% {
        opacity: 0.78;
    }
    58% {
        opacity: 0.58;
        translate: calc(var(--drift) * 0.45) calc(var(--rise) * -0.55);
        scale: 1;
    }
    100% {
        opacity: 0;
        translate: var(--drift) calc(var(--rise) * -1);
        scale: 0.68;
    }
}

@media (prefers-reduced-motion: reduce) {
    .task-home-ritual-particles i {
        animation: none !important;
        opacity: 0.5;
    }
}

/* ==========================================================================
   Nghi thức kể lại Lời Hứa
   1. Dùng lại nguyên Cổng Trung Thực của Đấu Trường.
   2. Daro trả đúng Ấn đã giữ.
   3. Bé tự chọn sự thật và tự đóng Ấn lần thứ hai.
   ========================================================================== */

.promise-report,
.promise-report-ceremony {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #5b2a06;
    font-family: "Baloo 2", sans-serif;
    isolation: isolate;
    container-type: inline-size;
}

.dragon-race-modal:has(.promise-center--ritual:not([hidden])) > .dragon-race-modal__close {
    display: none;
}

#report-modal-content .arena-oath-gate {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: #dff7ff;
    color: #5b2a06;
    isolation: isolate;
    contain: layout paint style;
}

.arena-oath-gate__layer {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.arena-oath-gate__bg {
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.arena-oath-gate__dragon-fly {
    left: -18%;
    top: 12%;
    z-index: 1;
    width: clamp(114px, 13.3vw, 266px);
    height: auto;
    object-fit: contain;
    opacity: 0.92;
    animation: arenaOathDragonFly 17s linear infinite;
    will-change: transform;
}

.arena-oath-gate__stage {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.arena-oath-gate__inner-light {
    position: absolute;
    left: 50%;
    top: 3%;
    z-index: 2;
    width: min(44vw, 760px);
    height: min(70vh, 680px);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.94) 0%, rgba(254, 240, 138, 0.7) 32%, rgba(56, 189, 248, 0.2) 62%, transparent 74%);
    opacity: var(--oath-light-opacity, 0.14);
    transform: translateX(-50%) scale(var(--oath-light-scale, 0.82));
    transition: opacity 420ms ease, transform 520ms ease;
}

.arena-oath-gate__portal {
    z-index: 5;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.arena-oath-gate__door {
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: fill;
    will-change: transform;
    transition: transform 480ms cubic-bezier(.2, .8, .2, 1);
}

.arena-oath-gate__door--left {
    transform: translateX(var(--oath-gate-open-left, 0%));
}

.arena-oath-gate__door--right {
    transform: translateX(var(--oath-gate-open-right, 0%));
}

.arena-oath-gate__guardian {
    inset: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    object-fit: fill;
    filter: drop-shadow(0 0.32cqw 0.34cqw rgba(96, 56, 15, 0.22));
}

.arena-oath-gate__seal-button {
    position: absolute;
    left: 49.96%;
    top: 65.2%;
    z-index: 8;
    width: clamp(94px, 11.5vw, 168px);
    height: clamp(94px, 11.5vw, 168px);
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

.arena-oath-gate__seal-button:active {
    transform: translate(-50%, -50%) scale(0.965);
}

.arena-oath-gate__seal-aura {
    position: absolute;
    left: 49.96%;
    top: 65.2%;
    z-index: 6;
    width: clamp(126px, 15.5vw, 228px);
    height: clamp(126px, 15.5vw, 228px);
    border-radius: 999px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.arena-oath-gate__seal-aura span,
.arena-oath-gate__enter-aura span {
    position: absolute;
    inset: 0;
    border: 3px solid rgba(255, 247, 196, 0.74);
    border-radius: inherit;
    box-shadow:
        0 0 16px rgba(255, 255, 255, 0.72),
        0 0 34px rgba(250, 204, 21, 0.58),
        inset 0 0 18px rgba(255, 255, 255, 0.44);
    opacity: 0.66;
    transform: scale(0.58);
    animation: arenaOathAuraPulse 2.65s ease-in-out infinite;
}

.arena-oath-gate__seal-aura span:nth-child(2),
.arena-oath-gate__enter-aura span:nth-child(2) {
    border-color: rgba(125, 249, 255, 0.64);
    animation-delay: 0.52s;
}

.arena-oath-gate__seal-aura span:nth-child(3),
.arena-oath-gate__enter-aura span:nth-child(3) {
    border-color: rgba(255, 255, 255, 0.82);
    animation-delay: 1.04s;
}

.arena-oath-gate__seal {
    inset: 0;
    z-index: 7;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transform-origin: 50% 50%;
    transition: filter 260ms ease, transform 260ms ease, opacity 260ms ease;
    animation: arenaOathWideSealPulse 2.4s ease-in-out infinite;
    filter:
        drop-shadow(0 0 18px rgba(255, 255, 255, 0.34))
        drop-shadow(0 0 28px rgba(250, 204, 21, 0.28));
}

.arena-oath-gate.is-listening .arena-oath-gate__seal {
    filter:
        drop-shadow(0 0 28px rgba(45, 212, 191, 0.75))
        drop-shadow(0 0 42px rgba(250, 204, 21, 0.7));
    transform: none;
}

.arena-oath-gate__mic {
    position: absolute;
    left: 49.96%;
    top: 65.2%;
    z-index: 9;
    display: grid;
    place-items: center;
    width: clamp(54px, 6.8vw, 104px);
    height: clamp(54px, 6.8vw, 104px);
    border: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    background: radial-gradient(circle at 50% 28%, #fff, #fef08a 34%, #f59e0b 72%, #92400e 100%);
    box-shadow: 0 8px 0 rgba(126, 58, 7, 0.62), 0 14px 24px rgba(69, 26, 3, 0.2);
    color: #fff7ed;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.72);
    transition: opacity 220ms ease, transform 260ms cubic-bezier(.2, .9, .25, 1.25);
}

.arena-oath-gate.is-listening .arena-oath-gate__mic {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.arena-oath-gate__mic .material-symbols-outlined {
    font-size: clamp(28px, 3.5vw, 52px);
    text-shadow: 0 3px 0 rgba(120, 53, 15, 0.42);
}

.arena-oath-gate__enter-aura {
    position: absolute;
    left: 49.760766%;
    top: 38.7%;
    z-index: 6;
    width: clamp(116px, 13.8vw, 204px);
    height: clamp(116px, 13.8vw, 204px);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.72);
    transition: opacity 360ms ease, transform 420ms cubic-bezier(.2, .9, .25, 1.18);
}

.arena-oath-gate__enter-seal {
    position: absolute;
    left: 49.760766%;
    top: 38.7%;
    z-index: 7;
    width: clamp(78px, 8vw, 122px);
    aspect-ratio: 0.548;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.72);
    transition: opacity 360ms ease, transform 420ms cubic-bezier(.2, .9, .25, 1.18);
}

.arena-oath-gate__enter-seal img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        hue-rotate(154deg)
        saturate(1.45)
        brightness(1.08)
        drop-shadow(0 0 18px rgba(45, 212, 191, 0.72))
        drop-shadow(0 0 30px rgba(255, 255, 255, 0.46));
}

.arena-oath-gate.is-unlocked .arena-oath-gate__door--left {
    transform: translateX(-12%);
}

.arena-oath-gate.is-unlocked .arena-oath-gate__door--right {
    transform: translateX(12%);
}

.arena-oath-gate.is-unlocked .arena-oath-gate__seal-button,
.arena-oath-gate.is-unlocked .arena-oath-gate__seal-aura,
.arena-oath-gate.is-unlocked .arena-oath-gate__seal,
.arena-oath-gate.is-unlocked .arena-oath-gate__mic {
    opacity: 0;
    pointer-events: none;
}

.arena-oath-gate.is-unlocked .arena-oath-gate__enter-aura,
.arena-oath-gate.is-unlocked .arena-oath-gate__enter-seal {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.arena-oath-gate__progress,
.arena-oath-gate__transcript {
    display: none;
}

.arena-oath-gate__copy {
    position: absolute;
    left: 50%;
    bottom: 11.8%;
    z-index: 11;
    width: 70%;
    text-align: center;
    pointer-events: none;
    transform: translateX(-50%);
}

.arena-oath-gate__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.22rem, 0.62vw, 0.58rem);
    margin: 0;
    color: #fbbf24;
    font-family: "Baloo", "Baloo 2", cursive;
    font-size: clamp(1.35rem, 2.82vw, 3.55rem);
    font-weight: 1000;
    line-height: 1;
    white-space: nowrap;
}

.arena-oath-gate__word {
    background: linear-gradient(180deg, #fffbe6 0%, #ffe28a 24%, #f8b82e 46%, #d97706 68%, #7c2d12 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: clamp(1px, 0.1vw, 1.7px) rgba(96, 37, 7, 0.78);
    transition: filter 180ms ease, transform 180ms ease;
}

.arena-oath-gate__word.is-matched {
    background: linear-gradient(180deg, #ecfeff 0%, #a7f3d0 30%, #2dd4bf 62%, #0f766e 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke-color: rgba(236, 254, 255, 0.9);
    transform: translateY(-2px);
}

.arena-oath-gate__status {
    position: absolute;
    left: calc(50% + clamp(74px, 8.2vw, 148px));
    top: 64%;
    z-index: 12;
    width: min(32vw, 360px);
    margin: 0;
    padding: clamp(0.8rem, 1.8vw, 1.35rem) clamp(1rem, 2vw, 1.55rem);
    border: 3px solid rgba(245, 158, 11, 0.72);
    border-radius: 999px 999px 24px 999px;
    background: linear-gradient(180deg, #fff7d6, #ffedbd);
    box-shadow: 0 8px 0 rgba(180, 83, 9, 0.28), 0 18px 30px rgba(92, 36, 7, 0.18);
    color: #4b2a12;
    font-size: clamp(0.86rem, 1.55vw, 1.28rem);
    font-weight: 900;
    line-height: 1.08;
    text-align: center;
    transform: translateY(-50%);
}

.arena-oath-gate__status:empty,
.arena-oath-gate.is-unlocked .arena-oath-gate__status {
    display: none;
}

.arena-oath-gate__fallback {
    position: absolute;
    left: 50%;
    top: 76%;
    z-index: 13;
    min-width: min(74vw, 360px);
    padding: 0.72rem 1.2rem;
    border: 3px solid #8b4a0b;
    border-radius: 999px;
    color: #fff8df;
    background: linear-gradient(180deg, #2bb8bd, #087f9d);
    box-shadow: 0 5px 0 #075985, 0 12px 24px rgba(8, 63, 95, 0.28);
    font: 1000 clamp(0.78rem, 1.3vw, 1rem)/1 "Baloo 2", sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    transform: translateX(-50%);
}

.arena-oath-gate__fallback:hover,
.arena-oath-gate__fallback:focus-visible {
    filter: brightness(1.08);
    outline: 3px solid rgba(255, 247, 190, 0.92);
    outline-offset: 3px;
}

.arena-oath-gate__fallback:active {
    transform: translate(-50%, 3px);
    box-shadow: 0 2px 0 #075985, 0 8px 18px rgba(8, 63, 95, 0.24);
}

.arena-oath-gate__close {
    position: absolute;
    top: clamp(0.7rem, 2vh, 1.2rem);
    right: clamp(0.7rem, 2vw, 1.4rem);
    z-index: 12;
    display: grid;
    place-items: center;
    width: clamp(44px, 4.4vw, 72px);
    aspect-ratio: 1;
    padding: 0;
    border: clamp(2px, 0.14vw, 3px) solid #a95b12;
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 28%, #fffbe4 0 18%, transparent 19%),
        linear-gradient(180deg, #fff3b6, #f0ad34 72%, #cf7615);
    box-shadow:
        0 clamp(4px, 0.3vw, 6px) 0 #7a3d0b,
        0 0 0 clamp(2px, 0.12vw, 3px) rgba(255, 244, 178, 0.78),
        0 0 clamp(10px, 0.9vw, 18px) rgba(255, 211, 90, 0.46);
    color: #78350f;
    font: 1000 clamp(26px, 2.7vw, 44px)/1 "Baloo 2", sans-serif;
    cursor: pointer;
    transition: filter 160ms ease, transform 160ms ease;
}

.arena-oath-gate__close:hover,
.arena-oath-gate__close:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

.arena-oath-gate__close:active {
    box-shadow:
        0 2px 0 #7a3d0b,
        0 0 0 clamp(2px, 0.12vw, 3px) rgba(255, 244, 178, 0.78),
        0 0 clamp(8px, 0.7vw, 14px) rgba(255, 211, 90, 0.4);
    transform: translateY(2px);
}

.arena-oath-gate__close:focus-visible {
    outline: clamp(2px, 0.14vw, 3px) solid #fff8cb;
    outline-offset: clamp(3px, 0.22vw, 5px);
}

/* Điện Kể Lại: cùng một sân khấu cho mọi lần báo cáo, chỉ giữ ba thao tác có nghĩa. */

.promise-report-ceremony {
    background: #a8e7ff;
    user-select: none;
}

.promise-report-ceremony__background,
.promise-report-ceremony__daro,
.promise-report-feedback__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.promise-report-ceremony__background {
    z-index: 0;
    filter: saturate(0.94) contrast(1.02);
}

.promise-report-ceremony__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(42, 72, 82, 0.08), transparent 25%, transparent 71%, rgba(68, 46, 25, 0.12)),
        radial-gradient(circle at 50% 37%, rgba(255, 247, 190, 0.18), transparent 30%),
        radial-gradient(ellipse at 50% 97%, transparent 52%, rgba(64, 45, 28, 0.12) 100%);
    pointer-events: none;
}

.promise-report-ceremony__header {
    position: absolute;
    top: 2.8%;
    left: 50%;
    z-index: 8;
    width: min(64%, 920px);
    text-align: center;
    transform: translateX(-50%);
    transition: opacity 260ms ease, transform 260ms ease;
}

.promise-report-ceremony__header > span {
    display: inline-block;
    color: #157f9c;
    font-size: clamp(10px, 1.05cqw, 20px);
    font-weight: 1000;
    letter-spacing: 0.14em;
}

.promise-report-ceremony__header h2 {
    margin: 0.08em 0 0;
    color: #763a0c;
    font-size: clamp(22px, 2.8cqw, 54px);
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.72);
}

.promise-report-ceremony__header p {
    margin: 0.25em auto 0;
    color: #87582e;
    font-size: clamp(10px, 1.05cqw, 20px);
    font-weight: 800;
    line-height: 1.25;
}

.promise-report-ceremony__daro {
    z-index: 4;
    opacity: 1;
    filter: saturate(0.9) brightness(0.96) contrast(0.98);
    transition: opacity 420ms ease, transform 620ms cubic-bezier(.2, .78, .2, 1);
}

.promise-report-ceremony::after {
    content: "";
    position: absolute;
    left: 69.5%;
    top: 83.2%;
    z-index: 3;
    width: 20%;
    height: 5.6%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(74, 50, 29, 0.34), rgba(91, 62, 36, 0.16) 45%, transparent 73%);
    filter: blur(0.55cqw);
    opacity: 0.82;
    pointer-events: none;
    transform: skewX(-5deg);
    transition: opacity 240ms ease;
}

.promise-report-ceremony.is-seal-returned::after,
.promise-report-ceremony.is-report-complete::after {
    opacity: 0;
}

.promise-report-ceremony__daro-dialogue {
    position: absolute;
    top: 22%;
    right: 10.5%;
    z-index: 9;
    width: 26%;
    padding: 1.05cqw 1.35cqw;
    border: max(2px, 0.18cqw) solid #eaa329;
    border-radius: 2cqw 2cqw 0.55cqw 2cqw;
    background: linear-gradient(180deg, rgba(255, 254, 236, 0.98), rgba(255, 235, 176, 0.98));
    box-shadow: 0 0.55cqw 0 rgba(145, 72, 12, 0.38), 0 1.2cqw 2.2cqw rgba(41, 70, 86, 0.26);
    transition: opacity 300ms ease, transform 400ms ease;
    box-sizing: border-box;
}

.promise-report-ceremony__daro-dialogue::after {
    content: "";
    position: absolute;
    right: 15%;
    bottom: -1.25cqw;
    width: 2.1cqw;
    height: 2.1cqw;
    border-right: max(2px, 0.18cqw) solid #eaa329;
    border-bottom: max(2px, 0.18cqw) solid #eaa329;
    background: #ffebb0;
    transform: rotate(45deg);
}

.promise-report-ceremony__daro-dialogue p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #673207;
    font-size: clamp(11px, 1.2cqw, 23px);
    font-weight: 900;
    line-height: 1.28;
}

.promise-report-ceremony__daro-dialogue span {
    display: block;
}

.promise-report-ceremony__held-seal {
    position: absolute;
    left: 75.3%;
    top: 56.5%;
    z-index: 7;
    width: 8.2%;
    aspect-ratio: 1;
    object-fit: contain;
    filter:
        drop-shadow(0 0.3cqw 0.28cqw rgba(44, 58, 47, 0.36))
        drop-shadow(0 0 1.4cqw rgba(82, 230, 244, 0.88))
        drop-shadow(0 0 1.8cqw rgba(255, 233, 111, 0.8));
    transform: translate(-50%, -50%);
    transition: left 680ms cubic-bezier(.2, .82, .2, 1), top 680ms cubic-bezier(.2, .82, .2, 1), width 680ms cubic-bezier(.2, .82, .2, 1), opacity 240ms ease;
    pointer-events: none;
}

.promise-report-ceremony__receive,
.promise-report-ceremony__stamp span,
.promise-report-feedback__actions button {
    border: max(2px, 0.18cqw) solid #fff7b8;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe774, #f49b18);
    box-shadow: 0 0.52cqw 0 #94470b, 0 1cqw 2cqw rgba(68, 49, 22, 0.24);
    color: #713408;
    font: 1000 clamp(10px, 1.12cqw, 22px)/1 "Baloo 2", sans-serif;
    letter-spacing: 0.05em;
}

.promise-report-ceremony__receive {
    position: absolute;
    left: 75.3%;
    top: 68%;
    z-index: 10;
    min-width: 14%;
    padding: 0.8cqw 1.4cqw;
    cursor: pointer;
    transform: translateX(-50%);
}

.promise-report-ceremony__receive:active,
.promise-report-feedback__actions button:active {
    translate: 0 0.35cqw;
    box-shadow: 0 0.18cqw 0 #94470b;
}

.promise-report-ceremony[data-report-state="receiving"] .promise-report-ceremony__held-seal {
    left: 50%;
    top: 43%;
    width: 10.5%;
}

.promise-report-ceremony[data-report-state="receiving"] .promise-report-ceremony__receive {
    opacity: 0;
    pointer-events: none;
}

.promise-report-ceremony:not([data-report-state="handoff"]) .promise-report-ceremony__receive {
    opacity: 0;
    pointer-events: none;
}

.promise-report-ceremony__choices {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 380ms ease 180ms;
}

.promise-report-choice {
    position: absolute;
    bottom: 6%;
    width: 26%;
    height: 51%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    filter: saturate(0.86) brightness(0.98) sepia(0.03);
    opacity: 0.88;
    transform: translateY(9%) scale(0.95);
    transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
    isolation: isolate;
}

.promise-report-choice:nth-child(1) { left: 7%; }
.promise-report-choice:nth-child(2) { left: 34%; }
.promise-report-choice:nth-child(3) { left: 59%; }

.promise-report-choice img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.promise-report-choice::before {
    content: "";
    position: absolute;
    left: 13%;
    bottom: 1.5%;
    z-index: 0;
    width: 74%;
    height: 11%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(72, 48, 27, 0.42), rgba(92, 62, 34, 0.2) 48%, transparent 74%);
    filter: blur(0.7cqw);
    transform: scaleY(0.58);
    pointer-events: none;
}

.promise-report-choice:hover,
.promise-report-choice:focus-visible {
    opacity: 1;
    filter: saturate(1.08) brightness(1.06) drop-shadow(0 0 1.15cqw rgba(75, 221, 244, 0.8));
    outline: none;
    transform: translateY(4%) scale(1.01);
}

.promise-report-choice.is-selected {
    z-index: 2;
    opacity: 1;
    filter:
        saturate(1.1)
        brightness(1.08)
        drop-shadow(0 0 1.1cqw rgba(255, 243, 144, 0.96))
        drop-shadow(0 0 2cqw rgba(53, 216, 240, 0.86));
    transform: translateY(2%) scale(1.045);
}

.promise-report-ceremony[data-report-state="choosing"] .promise-report-ceremony__choices,
.promise-report-ceremony[data-report-state="selected"] .promise-report-ceremony__choices,
.promise-report-ceremony[data-report-state="stamping"] .promise-report-ceremony__choices {
    opacity: 1;
    pointer-events: auto;
}

.promise-report-ceremony.is-seal-returned .promise-report-ceremony__daro {
    opacity: 0;
    transform: translateX(6%);
}

.promise-report-ceremony.is-seal-returned .promise-report-ceremony__daro-dialogue {
    opacity: 0;
    pointer-events: none;
    transform: translateX(2cqw);
}

.promise-report-ceremony.is-seal-returned .promise-report-ceremony__held-seal {
    opacity: 0;
}

.promise-report-ceremony__stamp {
    position: absolute;
    left: 50%;
    top: 43%;
    z-index: 12;
    display: grid;
    justify-items: center;
    width: 11.5%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 240ms ease, filter 220ms ease;
}

.promise-report-ceremony__stamp img {
    display: block;
    width: 82%;
    aspect-ratio: 1;
    object-fit: contain;
    filter:
        drop-shadow(0 0.32cqw 0.28cqw rgba(44, 58, 47, 0.38))
        drop-shadow(0 0 1.2cqw rgba(82, 230, 244, 0.9))
        drop-shadow(0 0 1.8cqw rgba(255, 233, 111, 0.82));
}

.promise-report-ceremony__stamp span {
    display: block;
    width: max-content;
    margin-top: -0.1cqw;
    padding: 0.62cqw 1cqw;
    font-size: clamp(8px, 0.78cqw, 15px);
}

.promise-report-ceremony[data-report-state="selected"] .promise-report-ceremony__stamp {
    opacity: 1;
    pointer-events: auto;
}

.promise-report-ceremony__stamp:disabled {
    opacity: 0;
    cursor: default;
}

.promise-report-ceremony[data-report-state="stamping"][data-selected-outcome="not_done"] {
    --report-stamp-x: -32cqw;
}

.promise-report-ceremony[data-report-state="stamping"][data-selected-outcome="partial"] {
    --report-stamp-x: 0cqw;
}

.promise-report-ceremony[data-report-state="stamping"][data-selected-outcome="kept"] {
    --report-stamp-x: 32cqw;
}

.promise-report-ceremony[data-report-state="stamping"] .promise-report-ceremony__stamp {
    opacity: 1;
    animation: promise-report-stamp 1.15s cubic-bezier(.22, .72, .18, 1) both;
}

.promise-report-ceremony[data-report-state="stamping"] .promise-report-ceremony__stamp span {
    opacity: 0;
}

.promise-report-ceremony__stamp-impact {
    position: absolute;
    left: calc(50% + var(--report-stamp-x, 0cqw));
    top: 73%;
    z-index: 11;
    width: 10%;
    aspect-ratio: 1;
    border: 0.18cqw solid rgba(255, 241, 139, 0.9);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 6%, #ffe267 16%, rgba(64, 226, 245, 0.68) 40%, transparent 70%);
    box-shadow: 0 0 2cqw #fff2a0, 0 0 4cqw rgba(58, 219, 241, 0.84);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.4);
}

.promise-report-ceremony.is-result-stamped .promise-report-ceremony__stamp-impact {
    animation: promise-report-impact 720ms ease-out both;
}

.promise-report-ceremony__instruction {
    position: absolute;
    left: 50%;
    bottom: 2.4%;
    z-index: 13;
    width: min(68%, 930px);
    margin: 0;
    padding: 0.5cqw 1.2cqw;
    border: max(1px, 0.1cqw) solid rgba(255, 255, 255, 0.64);
    border-radius: 999px;
    background: rgba(8, 76, 104, 0.76);
    box-shadow: 0 0.4cqw 1.2cqw rgba(17, 49, 66, 0.28);
    color: #fffce4;
    font-size: clamp(9px, 0.95cqw, 18px);
    font-weight: 900;
    text-align: center;
    transform: translateX(-50%);
}

.promise-report-ceremony[data-report-state="choosing"] .promise-report-ceremony__instruction,
.promise-report-ceremony[data-report-state="selected"] .promise-report-ceremony__instruction,
.promise-report-ceremony[data-report-state="stamping"] .promise-report-ceremony__instruction {
    bottom: 0.7%;
}

.promise-report-ceremony__close {
    position: absolute;
    top: 2%;
    right: 1.5%;
    z-index: 30;
    display: grid;
    place-items: center;
    width: 4.2%;
    min-width: 36px;
    aspect-ratio: 1;
    padding: 0;
    border: max(2px, 0.17cqw) solid #eaa329;
    border-radius: 50%;
    background: linear-gradient(#fffbed, #ffd56c);
    box-shadow: 0 0.4cqw 0 #91480c;
    color: #6f3508;
    font: 1000 clamp(20px, 2.2cqw, 42px)/1 "Baloo 2", sans-serif;
    cursor: pointer;
}

.promise-report-feedback {
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: hidden;
    background: #a8e7ff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 440ms ease;
}

.promise-report-feedback__backdrop {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0 47%, rgba(255, 252, 224, 0.72) 60%, rgba(255, 246, 201, 0.94) 100%),
        url("../shared/img/assets_taks/dragon-race/report-ceremony-hall-v2.webp") center / 100% 100% no-repeat;
}

.promise-report-feedback__image {
    z-index: 1;
}

.promise-report-feedback__copy {
    position: absolute;
    top: 18%;
    right: 11%;
    z-index: 3;
    width: 36%;
    padding: 2cqw 2.3cqw;
    border: max(2px, 0.18cqw) solid rgba(229, 167, 47, 0.74);
    border-radius: 2cqw;
    background: linear-gradient(145deg, rgba(255, 255, 242, 0.95), rgba(255, 234, 171, 0.94));
    box-shadow: 0 0.6cqw 0 rgba(143, 74, 9, 0.25), 0 1.5cqw 3cqw rgba(38, 70, 82, 0.24);
    text-align: center;
}

.promise-report-feedback__copy > span {
    color: #1888a2;
    font-size: clamp(9px, 0.95cqw, 18px);
    font-weight: 1000;
    letter-spacing: 0.13em;
}

.promise-report-feedback__copy h3 {
    margin: 0.18em 0;
    color: #77380a;
    font-size: clamp(20px, 2.55cqw, 49px);
    font-weight: 1000;
    line-height: 0.98;
}

.promise-report-feedback__copy > p {
    margin: 0.55em 0 0;
    color: #7d542c;
    font-size: clamp(10px, 1.05cqw, 20px);
    font-weight: 800;
    line-height: 1.3;
}

.promise-report-feedback__rewards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55cqw;
    margin: 1.15cqw 0 0;
}

.promise-report-feedback__rewards span {
    display: inline-flex;
    align-items: center;
    min-height: 2.25cqw;
    padding: 0.35cqw 0.7cqw;
    border: 0.1cqw solid rgba(220, 151, 36, 0.52);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    color: #75420f;
    font-size: clamp(8px, 0.78cqw, 15px);
    font-weight: 1000;
}

.promise-report-feedback__rewards img {
    width: 1.35cqw;
    height: 1.35cqw;
    margin-right: 0.3cqw;
    object-fit: contain;
}

.promise-report-feedback__actions {
    display: flex;
    justify-content: center;
    gap: 0.8cqw;
    margin-top: 1.35cqw;
}

.promise-report-feedback__actions button {
    min-width: 43%;
    padding: 0.72cqw 1cqw;
    cursor: pointer;
}

.promise-report-feedback__actions button + button {
    background: linear-gradient(180deg, #f9ffff, #bbebf0);
    border-color: #fff;
    box-shadow: 0 0.42cqw 0 #34879a;
    color: #176278;
}

.promise-report-ceremony.is-report-complete .promise-report-feedback {
    opacity: 1;
    pointer-events: auto;
}

.promise-report-ceremony.is-report-complete .promise-report-ceremony__close {
    z-index: 35;
}

@keyframes arenaOathDragonFly {
    0% { opacity: 0.92; transform: translate3d(-8vw, 0, 0) scale(0.92); }
    47% { transform: translate3d(58vw, -5vh, 0) scale(1); }
    70%, 100% { opacity: 0.92; transform: translate3d(112vw, 2vh, 0) scale(0.96); }
}

@keyframes arenaOathSealPulse {
    0%, 100% {
        filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.34)) drop-shadow(0 0 24px rgba(250, 204, 21, 0.26));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.66)) drop-shadow(0 0 42px rgba(250, 204, 21, 0.54));
        transform: scale(1.022);
    }
}

@keyframes arenaOathWideSealPulse {
    0%,
    100% {
        filter:
            drop-shadow(0 0 14px rgba(255, 255, 255, 0.34))
            drop-shadow(0 0 24px rgba(250, 204, 21, 0.26));
    }
    50% {
        filter:
            drop-shadow(0 0 24px rgba(255, 255, 255, 0.66))
            drop-shadow(0 0 42px rgba(250, 204, 21, 0.54));
    }
}

@keyframes arenaOathAuraPulse {
    0% { opacity: 0; transform: scale(0.48); }
    28% { opacity: 0.88; }
    100% { opacity: 0; transform: scale(1.34); }
}

@keyframes promise-report-stamp {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    62% {
        transform: translate(calc(-50% + var(--report-stamp-x)), 27cqw) scale(0.8) rotate(-7deg);
    }
    78% {
        transform: translate(calc(-50% + var(--report-stamp-x)), 29cqw) scale(1.02) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--report-stamp-x)), 27cqw) scale(0.72);
    }
}

@keyframes promise-report-impact {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    24% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

@media (orientation: landscape) and (max-height: 520px) {
    .arena-oath-gate__close {
        top: 0.45rem;
        right: 0.6rem;
        width: clamp(38px, 7.4vh, 52px);
    }

    .promise-report-ceremony__daro-dialogue {
        top: 18%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .arena-oath-gate__dragon-fly,
    .arena-oath-gate__seal,
    .arena-oath-gate__seal-aura span,
    .arena-oath-gate__enter-aura span {
        animation: none !important;
    }

    .promise-report-ceremony[data-report-state="stamping"] .promise-report-ceremony__stamp {
        animation-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   Điện Lời Hứa — nghi thức báo cáo v3
   Cùng một địa điểm với lúc nhận nhiệm vụ; một Ấn duy nhất là thao tác chính.
   ========================================================================== */

.promise-report-ceremony {
    background: #9edff8;
}

.promise-report-ceremony::after {
    content: none;
}

.promise-report-ceremony__background {
    z-index: 0;
    filter: saturate(1.02) contrast(1.01);
}

.promise-report-ceremony__veil {
    z-index: 1;
    background:
        radial-gradient(circle at 50% 76%, rgba(255, 243, 166, 0.2), transparent 24%),
        linear-gradient(180deg, rgba(31, 139, 186, 0.03), transparent 54%, rgba(64, 118, 129, 0.08));
}

.promise-report-ceremony__promise-note {
    position: absolute;
    top: 2.8%;
    left: 50%;
    z-index: 8;
    margin: 0;
    color: #137e9e;
    font-size: clamp(9px, 0.86cqw, 17px);
    font-weight: 1000;
    letter-spacing: 0.16em;
    text-align: center;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.9), 0 0 1cqw rgba(255, 255, 255, 0.75);
    transform: translateX(-50%);
    transition: opacity 260ms ease, transform 360ms ease;
}

.promise-report-ceremony__promise-note strong {
    display: block;
    margin-top: 0.08em;
    color: #71401a;
    font-size: clamp(15px, 1.55cqw, 30px);
    letter-spacing: 0.015em;
}

.promise-report-ceremony__daro {
    z-index: 4;
    opacity: 1;
    filter:
        saturate(1.02)
        drop-shadow(0 0.7cqw 0.7cqw rgba(88, 63, 31, 0.22));
    transform: none;
    transition: opacity 360ms ease, transform 540ms cubic-bezier(.22, .78, .24, 1);
}

.promise-report-ceremony__daro-caption {
    position: absolute;
    left: 4%;
    bottom: 20%;
    z-index: 9;
    width: 42%;
    box-sizing: border-box;
    padding: 0.62cqw 2.2cqw 0.7cqw;
    background:
        linear-gradient(90deg, transparent, rgba(30, 84, 94, 0.66) 13%, rgba(25, 75, 88, 0.72) 82%, transparent);
    color: #fffbe1;
    text-align: center;
    text-shadow: 0 0.18cqw 0.22cqw rgba(44, 37, 20, 0.76);
    transition: opacity 280ms ease, transform 360ms ease;
}

.promise-report-ceremony__daro-caption > span {
    display: inline-block;
    margin-right: 0.65cqw;
    color: #6ee6f0;
    font-size: clamp(8px, 0.78cqw, 15px);
    font-weight: 1000;
    letter-spacing: 0.13em;
}

.promise-report-ceremony__daro-caption p {
    display: inline;
    margin: 0;
    font-size: clamp(10px, 1.05cqw, 20px);
    font-weight: 900;
    line-height: 1.25;
}

.promise-report-ceremony__daro-caption p span {
    display: inline;
}

.promise-report-ceremony__daro-caption p span + span::before {
    content: " ";
}

.promise-report-ceremony__choices {
    z-index: 5;
    opacity: 0;
    transition: opacity 420ms ease 120ms;
}

.promise-report-choice {
    bottom: 12%;
    width: 26%;
    height: 60%;
    opacity: 0;
    filter: saturate(0.96) brightness(0.98);
    transform: translateY(9%) scale(0.92);
    transition:
        opacity 320ms ease,
        transform 320ms cubic-bezier(.2, .82, .2, 1),
        filter 240ms ease;
}

.promise-report-choice:nth-child(1) {
    left: 9%;
}

.promise-report-choice:nth-child(2) {
    left: 37%;
}

.promise-report-choice:nth-child(3) {
    left: 65%;
}

.promise-report-choice::before {
    left: 11%;
    bottom: 4%;
    width: 78%;
    height: 8%;
    background: radial-gradient(ellipse, rgba(72, 77, 58, 0.26), rgba(92, 84, 51, 0.1) 48%, transparent 74%);
}

.promise-report-choice img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.promise-report-choice > span {
    position: absolute;
    left: 50%;
    bottom: 16.8%;
    z-index: 3;
    width: 61%;
    color: #754217;
    font-size: clamp(8px, 0.8cqw, 16px);
    font-weight: 1000;
    letter-spacing: 0.015em;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
    transform: translateX(-50%);
    pointer-events: none;
}

.promise-report-choice:hover,
.promise-report-choice:focus-visible {
    opacity: 1;
    filter:
        saturate(1.08)
        brightness(1.04)
        drop-shadow(0 0 1.1cqw rgba(81, 224, 242, 0.72));
    transform: translateY(1%) scale(1.015);
}

.promise-report-choice.is-selected {
    z-index: 3;
    opacity: 1;
    filter:
        saturate(1.08)
        brightness(1.06)
        drop-shadow(0 0 1.2cqw rgba(255, 245, 150, 0.92))
        drop-shadow(0 0 2.2cqw rgba(66, 218, 238, 0.76));
    transform: translateY(-1%) scale(1.045);
}

.promise-report-ceremony[data-report-state="choosing"] .promise-report-choice,
.promise-report-ceremony[data-report-state="selected"] .promise-report-choice,
.promise-report-ceremony[data-report-state="stamping"] .promise-report-choice {
    opacity: 0.94;
    transform: translateY(0) scale(1);
}

.promise-report-ceremony.is-seal-returned .promise-report-ceremony__daro {
    opacity: 0;
    transform: translateX(5%) scale(0.98);
}

.promise-report-ceremony.is-seal-returned .promise-report-ceremony__daro-caption {
    opacity: 0;
    pointer-events: none;
    transform: translateY(1cqw);
}

.promise-report-ceremony.is-seal-returned .promise-report-ceremony__promise-note {
    transform: translateX(-50%) translateY(-0.4cqw) scale(0.94);
}

.promise-report-ceremony__seal {
    position: absolute;
    left: 50%;
    top: 88%;
    z-index: 14;
    display: grid;
    justify-items: center;
    width: 9.8%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: filter 220ms ease, opacity 220ms ease;
}

.promise-report-ceremony__seal::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    z-index: -1;
    width: 105%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 250, 190, 0.8), rgba(67, 231, 242, 0.36) 42%, transparent 72%);
    opacity: 0.72;
    transform: translate(-50%, -50%);
    animation: promise-report-seal-aura 2.4s ease-in-out infinite;
}

.promise-report-ceremony__seal img {
    display: block;
    width: 86%;
    aspect-ratio: 1;
    object-fit: contain;
    filter:
        drop-shadow(0 0.3cqw 0.28cqw rgba(44, 58, 47, 0.35))
        drop-shadow(0 0 1.1cqw rgba(82, 230, 244, 0.86))
        drop-shadow(0 0 1.7cqw rgba(255, 233, 111, 0.72));
    transition: transform 220ms ease, filter 220ms ease;
}

.promise-report-ceremony__seal > span {
    display: block;
    width: max-content;
    margin-top: -0.35cqw;
    color: #fff9ce;
    font-size: clamp(8px, 0.78cqw, 15px);
    font-weight: 1000;
    letter-spacing: 0.07em;
    text-shadow:
        0 0.18cqw 0 #7b4617,
        0 0 0.55cqw rgba(18, 83, 98, 0.9);
    transition: opacity 220ms ease, transform 220ms ease;
}

.promise-report-ceremony__seal:hover img,
.promise-report-ceremony__seal:focus-visible img,
.promise-report-ceremony__seal.is-ready img {
    filter:
        drop-shadow(0 0.35cqw 0.3cqw rgba(44, 58, 47, 0.38))
        drop-shadow(0 0 1.5cqw rgba(82, 230, 244, 0.98))
        drop-shadow(0 0 2.25cqw rgba(255, 233, 111, 0.92));
    transform: translateY(-3%) scale(1.045);
}

.promise-report-ceremony__seal:focus-visible {
    outline: none;
}

.promise-report-ceremony[data-report-state="receiving"] .promise-report-ceremony__seal img {
    animation: promise-report-seal-received 620ms cubic-bezier(.2, .82, .2, 1) both;
}

.promise-report-ceremony[data-report-state="choosing"] .promise-report-ceremony__seal > span {
    opacity: 0;
    transform: translateY(0.3cqw);
}

.promise-report-ceremony[data-report-state="selected"] .promise-report-ceremony__seal > span {
    color: #fff6a9;
}

.promise-report-ceremony[data-report-state="selected"] .promise-report-ceremony__seal > span::before {
    content: "ĐÓNG ẤN · ";
}

.promise-report-ceremony.is-seal-nudged .promise-report-ceremony__seal img {
    animation: promise-report-seal-nudge 420ms ease;
}

.promise-report-ceremony[data-report-state="stamping"][data-selected-outcome="not_done"] {
    --report-stamp-x: -28cqw;
}

.promise-report-ceremony[data-report-state="stamping"][data-selected-outcome="partial"] {
    --report-stamp-x: 0cqw;
}

.promise-report-ceremony[data-report-state="stamping"][data-selected-outcome="kept"] {
    --report-stamp-x: 28cqw;
}

.promise-report-ceremony[data-report-state="stamping"] .promise-report-ceremony__seal {
    opacity: 1;
    animation: promise-report-stamp-v3 1.15s cubic-bezier(.22, .72, .18, 1) both;
}

.promise-report-ceremony[data-report-state="stamping"] .promise-report-ceremony__seal > span,
.promise-report-ceremony[data-report-state="stamping"] .promise-report-ceremony__seal::before {
    opacity: 0;
}

.promise-report-ceremony__stamp-impact {
    left: calc(50% + var(--report-stamp-x, 0cqw));
    top: 77%;
}

.promise-report-ceremony__instruction {
    left: 50%;
    bottom: 1.8%;
    width: auto;
    max-width: 66%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #fffce6;
    font-size: clamp(8px, 0.83cqw, 16px);
    text-shadow:
        0 0.16cqw 0 #684321,
        0 0 0.7cqw rgba(23, 91, 105, 0.92);
    opacity: 0;
    transition: opacity 220ms ease;
}

.promise-report-ceremony[data-report-state="choosing"] .promise-report-ceremony__instruction {
    bottom: 1.8%;
    opacity: 1;
}

.promise-report-ceremony__close {
    right: max(1.5%, calc((100% - 100vw) / 2 + 1.5%));
}

.promise-report-feedback {
    background: #a8e7ff;
}

.promise-report-feedback__backdrop {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 43%, rgba(255, 252, 224, 0.72) 58%, rgba(255, 246, 201, 0.94) 100%),
        url("../shared/img/assets_taks/dragon-race/report-promise-hall-bg-v1.webp") center / 100% 100% no-repeat;
}

.promise-report-feedback__image {
    inset: auto;
    left: 3%;
    bottom: 0;
    z-index: 1;
    width: 52%;
    height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 1cqw 1.4cqw rgba(74, 58, 26, 0.26));
}

.promise-report-feedback__copy {
    top: 16%;
    right: 8%;
    width: 38%;
}

@keyframes promise-report-seal-aura {
    0%, 100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.92);
    }
    50% {
        opacity: 0.88;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@keyframes promise-report-seal-received {
    0% { transform: translateY(-8%) scale(0.92); }
    58% { transform: translateY(-2%) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes promise-report-seal-nudge {
    0%, 100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-5%) rotate(-3deg); }
    70% { transform: translateX(5%) rotate(3deg); }
}

@keyframes promise-report-stamp-v3 {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    55% {
        transform:
            translate(calc(-50% + var(--report-stamp-x)), calc(-50% - 11cqw))
            scale(0.82)
            rotate(-7deg);
    }
    75% {
        transform:
            translate(calc(-50% + var(--report-stamp-x)), calc(-50% - 9.5cqw))
            scale(1.04)
            rotate(0);
    }
    100% {
        opacity: 0;
        transform:
            translate(calc(-50% + var(--report-stamp-x)), calc(-50% - 10cqw))
            scale(0.72);
    }
}

@media (prefers-reduced-motion: reduce) {
    .promise-report-ceremony__seal::before,
    .promise-report-ceremony[data-report-state="receiving"] .promise-report-ceremony__seal img,
    .promise-report-ceremony.is-seal-nudged .promise-report-ceremony__seal img,
    .promise-report-ceremony[data-report-state="stamping"] .promise-report-ceremony__seal {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* v5 final authority: đặt sau toàn bộ CSS báo cáo cũ. */
.promise-report-ceremony.promise-story {
    background:
        url("../shared/img/assets_taks/dragon-race/production/report-story-stage-v2.webp")
        center / 100% 100% no-repeat !important;
}

.promise-story .promise-report-ceremony__background {
    display: none;
}

.promise-story__vow {
    top: 19.2%;
}

.promise-story.is-seal-awake .promise-story__vow {
    opacity: 0;
}

.promise-story__story-engine::before {
    content: "";
    position: absolute;
    top: 34%;
    left: 50%;
    z-index: -1;
    width: 22%;
    height: 34%;
    background:
        linear-gradient(180deg, rgba(104, 255, 248, 0), rgba(73, 235, 229, 0.2) 34%, rgba(44, 207, 214, 0.43));
    clip-path: polygon(27% 0, 73% 0, 100% 100%, 0 100%);
    filter: blur(0.45cqw);
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity 420ms ease;
    pointer-events: none;
}

.promise-story.is-seal-awake .promise-story__story-engine::before {
    opacity: 0.42;
}

.promise-story__scene img {
    top: -5%;
    width: 110%;
    clip-path: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 51%,
        rgba(0, 0, 0, 0.68) 58%,
        transparent 70%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 51%,
        rgba(0, 0, 0, 0.68) 58%,
        transparent 70%
    );
}

.promise-story__projection > strong {
    display: none;
}

.promise-story__heart::after {
    content: attr(data-outcome-label);
    font-size: clamp(6px, 0.56cqw, 12px);
}

.promise-story__heart:disabled::after {
    content: "CHẠM VÀO ẤN";
}

.promise-story__turn {
    color: #168c98;
    font-size: clamp(38px, 4.4vw, 74px) !important;
    -webkit-text-stroke: 0.11cqw #ffe493;
    text-shadow:
        0 0.16cqw 0.12cqw #6e4819,
        0 0 0.85cqw rgba(53, 235, 224, 0.94);
}

.promise-story__daro-caption {
    opacity: 0 !important;
    pointer-events: none !important;
}

.promise-story__close {
    position: fixed;
    top: 1.8%;
    right: 1.2%;
}

/* ==========================================================================
   Nghi thức Kể Thật v6 — màn ghi nhận cuối vẫn là một cảnh game thống nhất.
   Không đổi background, không dựng card web và không phóng asset kết quả
   thành một bức tượng rời bên ngoài cỗ máy.
   ========================================================================== */

.promise-story__heart::after {
    color: #6f4218;
    font-size: clamp(8px, 0.72cqw, 14px);
    line-height: 1;
    text-shadow:
        0 1px 0 #fff2b3,
        0 0 0.42cqw rgba(255, 240, 155, 0.72);
}

.promise-story__heart:disabled::after {
    content: "ĐÁNH THỨC ẤN";
}

.promise-story__instruction {
    font-size: clamp(8px, 0.72cqw, 14px);
    font-weight: 900;
}

.promise-story.is-report-complete .promise-report-feedback {
    isolation: isolate;
    background: transparent;
}

.promise-story.is-report-complete .promise-report-feedback__backdrop {
    z-index: -2;
    background:
        url("../shared/img/assets_taks/dragon-race/production/report-story-stage-v2.webp")
        center / 100% 100% no-repeat;
}

.promise-story.is-report-complete .promise-report-feedback::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 19%;
    z-index: 4;
    width: 12.6cqw;
    height: 15.2cqw;
    background:
        url("../shared/img/assets_taks/dragon-race/promise-seal.webp")
        center / contain no-repeat;
    filter:
        drop-shadow(0 0.72cqw 0.55cqw rgba(64, 42, 18, 0.3))
        drop-shadow(0 0 1.3cqw rgba(61, 229, 220, 0.46));
    transform: translateX(-50%);
    pointer-events: none;
}

.promise-story.is-report-complete .promise-report-feedback::after {
    content: "";
    position: absolute;
    right: 4.6%;
    bottom: 9.4%;
    z-index: 3;
    width: 24.5%;
    height: 58%;
    background:
        url("../shared/img/daro/full/daro-thinking.webp")
        50% 100% / contain no-repeat;
    filter:
        saturate(1.04)
        drop-shadow(0 0.75cqw 0.65cqw rgba(93, 58, 21, 0.24));
    pointer-events: none;
}

.promise-story.is-report-complete .promise-report-feedback__image {
    top: 18.5%;
    left: 34.8%;
    bottom: auto;
    z-index: 2;
    width: 23.5%;
    height: 35.5%;
    object-fit: contain;
    object-position: 50% 0;
    filter:
        drop-shadow(0 0.35cqw 0.38cqw rgba(70, 52, 25, 0.16))
        drop-shadow(0 0 0.9cqw rgba(55, 221, 214, 0.24));
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 50%,
        rgba(0, 0, 0, 0.66) 57%,
        transparent 70%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0%,
        #000 50%,
        rgba(0, 0, 0, 0.66) 57%,
        transparent 70%
    );
}

.promise-story.is-report-complete .promise-report-feedback__copy {
    top: 18.8%;
    right: auto;
    left: 51.5%;
    z-index: 3;
    width: 18%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.promise-story.is-report-complete .promise-report-feedback__copy > span {
    color: #168b9e;
    font-size: clamp(6px, 0.54cqw, 11px);
    letter-spacing: 0.11em;
}

.promise-story.is-report-complete .promise-report-feedback__copy h3 {
    margin: 0.38cqw 0 0;
    color: #714018;
    font-size: clamp(14px, 1.42cqw, 28px);
    line-height: 0.98;
    text-wrap: balance;
}

.promise-story.is-report-complete .promise-report-feedback__copy > p {
    margin: 0.48cqw auto 0;
    color: #76502c;
    font-size: clamp(9px, 0.76cqw, 15px);
    line-height: 1.24;
}

.promise-story.is-report-complete .promise-report-feedback__rewards {
    gap: 0.3cqw;
    margin: 0.68cqw -1.8cqw 0;
}

.promise-story.is-report-complete .promise-report-feedback__rewards span {
    min-height: 1.65cqw;
    padding: 0.16cqw 0.44cqw;
    border-color: rgba(187, 127, 38, 0.45);
    background: rgba(255, 251, 224, 0.78);
    font-size: clamp(7px, 0.58cqw, 11px);
}

.promise-story.is-report-complete .promise-report-feedback__rewards img {
    width: 0.95cqw;
    height: 0.95cqw;
}

.promise-story.is-report-complete .promise-report-feedback__actions {
    gap: 0.45cqw;
    margin: 0.72cqw -2cqw 0;
}

.promise-story.is-report-complete .promise-report-feedback__actions button {
    min-width: 0;
    padding: 0.42cqw 0.62cqw;
    border-width: 0.1cqw;
    border-radius: 999px;
    box-shadow: 0 0.22cqw 0 #8d591c;
    font-size: clamp(8px, 0.64cqw, 13px);
    white-space: nowrap;
}

.promise-story.is-report-complete .promise-report-feedback__actions button + button {
    box-shadow: 0 0.22cqw 0 #34879a;
}

/* ==========================================================================
   Nghi thức báo cáo V7
   Các asset 3760×1879 là layer Photoshop cùng canvas và luôn được chồng nguyên
   tọa độ. Thư và dấu cũ chỉ xuất hiện ở giai đoạn đóng dấu.
   ========================================================================== */

.promise-report-ceremony.promise-report-v7 {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff0c8;
    color: #6b330d;
    isolation: isolate;
    user-select: none;
}

.promise-report-ceremony.promise-report-v7::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 66% 70% at 53% 50%,
            rgba(7, 16, 35, 0.18) 0%,
            rgba(7, 16, 35, 0.3) 48%,
            rgba(5, 12, 29, 0.58) 100%
        ),
        rgba(8, 17, 36, 0.22);
    transition: opacity 620ms ease;
}

.promise-report-ceremony.promise-report-v7.is-stage-two::before {
    opacity: 1;
}

.promise-report-v7,
.promise-report-v7 * {
    box-sizing: border-box;
}

.promise-report-v7__background,
.promise-report-v7__result-layer,
.promise-report-v7__result-layer img,
.promise-report-v7__choice-rig,
.promise-report-v7__frame,
.promise-report-v7__aux-layer,
.promise-report-v7__choice-art,
.promise-report-v7__seal-views,
.promise-report-v7__seal-views img,
.promise-report-v7__talking-daro,
.promise-report-v7__truth-stamp {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.promise-report-v7__background {
    z-index: 0;
    transition: opacity 620ms ease, filter 620ms ease;
}

.promise-report-v7__background--story {
    opacity: 1;
}

.promise-report-v7__background--letter {
    opacity: 0;
}

.promise-report-v7.is-stage-two .promise-report-v7__background--story {
    opacity: 0;
    filter: brightness(1.06);
}

.promise-report-v7.is-stage-two .promise-report-v7__background--letter {
    opacity: 1;
    filter: brightness(0.9) saturate(0.88);
}

.promise-report-v7__story-copy {
    position: absolute;
    top: 23.8%;
    left: 34%;
    z-index: 5;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.35cqw;
    width: 14.7%;
    min-height: 31%;
    padding: 0.55cqw 0.35cqw;
    text-align: center;
    transition: opacity 280ms ease, transform 420ms ease;
}

.promise-report-v7__story-copy > span,
.promise-report-v7__original-letter-copy > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3cqw;
    max-width: 96%;
    color: #167f98;
    font-size: clamp(7px, 0.6cqw, 12px);
    font-weight: 1000;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.promise-report-v7__story-copy > span img,
.promise-report-v7__original-letter-copy > span img {
    width: 1.35cqw;
    aspect-ratio: 1;
    object-fit: cover;
    border: 0.1cqw solid #d18b26;
    border-radius: 50%;
    box-shadow: 0 0.12cqw 0.22cqw rgba(114, 62, 15, 0.2);
}

.promise-report-v7__story-copy h2 {
    display: -webkit-box;
    max-width: 96%;
    margin: 0.08cqw 0 0;
    overflow: hidden;
    color: #66300d;
    font-size: clamp(14px, 1.28cqw, 25px);
    font-weight: 1000;
    line-height: 1.04;
    text-wrap: balance;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.promise-report-v7__story-copy p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #87562b;
    font-size: clamp(8px, 0.64cqw, 13px);
    font-weight: 750;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.promise-report-v7__story-copy > strong {
    position: relative;
    width: 96%;
    margin-top: 0.24cqw;
    padding-top: 0.48cqw;
    color: #9b5919;
    font-size: clamp(9px, 0.72cqw, 14px);
    font-weight: 1000;
    line-height: 1.05;
    letter-spacing: 0.035em;
}

.promise-report-v7__story-copy > strong::before {
    content: "";
    position: absolute;
    top: 0;
    right: 13%;
    left: 13%;
    height: 0.08cqw;
    background: linear-gradient(90deg, transparent, #d3a23b, transparent);
}

.promise-report-v7__story-copy [data-promise-report-preview-rewards] {
    display: grid;
    place-items: center;
    width: 122%;
    min-height: 3.45cqw;
    margin-top: 0.18cqw;
}

.promise-report-v7__reward-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.62cqw;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.promise-report-v7__virtue-reward {
    display: inline-grid;
    grid-template-rows: auto auto;
    place-items: center;
    gap: 0.16cqw;
    min-width: 4.2cqw;
    color: #6d3c16;
    font-weight: 950;
    line-height: 1;
    text-align: center;
}

.promise-report-v7__virtue-token {
    display: grid;
    place-items: center;
    width: 2.55cqw;
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 50% 17%, rgba(92, 236, 246, 0.24), transparent 38%),
        linear-gradient(180deg, rgba(255, 250, 222, 0.97), rgba(250, 215, 139, 0.92));
    border: 0.06cqw solid rgba(185, 116, 25, 0.88);
    border-radius: 38% 38% 30% 30% / 28% 28% 24% 24%;
    box-shadow:
        inset 0 0 0 0.05cqw rgba(255, 239, 177, 0.76),
        0 0.12cqw 0.28cqw rgba(102, 54, 11, 0.28),
        0 0 0.4cqw rgba(33, 194, 209, 0.22);
}

.promise-report-v7__virtue-token img {
    width: 1.85cqw;
    height: 1.85cqw;
    object-fit: contain;
    filter:
        brightness(1.06)
        saturate(1.12)
        drop-shadow(0 0.1cqw 0.09cqw rgba(77, 44, 12, 0.3));
}

.promise-report-v7__virtue-token i {
    color: #21a6b5;
    font-size: clamp(16px, 1.45cqw, 28px);
    font-style: normal;
    text-shadow:
        0 0 0.28cqw rgba(255, 255, 255, 0.9),
        0 0 0.58cqw rgba(66, 232, 226, 0.76);
}

.promise-report-v7__virtue-copy {
    display: grid;
    gap: 0.05cqw;
    justify-items: center;
}

.promise-report-v7__virtue-copy strong,
.promise-report-v7__virtue-copy small {
    font: inherit;
    line-height: 1;
    white-space: nowrap;
}

.promise-report-v7__virtue-copy strong {
    font-size: clamp(8px, 0.62cqw, 12px);
}

.promise-report-v7__virtue-copy small {
    color: #87572a;
    font-size: clamp(7px, 0.5cqw, 10px);
}

.promise-report-v7__resource-reward.promise-use__reward {
    flex: none;
}

.promise-report-v7__result-layer {
    z-index: 7;
}

.promise-report-v7__result-layer img {
    opacity: 0;
    transform: translateY(0.6cqw) scale(0.96);
    transition:
        opacity 300ms ease,
        transform 480ms cubic-bezier(.18, .82, .2, 1.12);
}

.promise-report-v7__result-layer img.is-active {
    opacity: 1;
    transform: none;
}

.promise-report-v7__choice-rig {
    z-index: 12;
    animation: promise-report-v7-rig-float 3.6s ease-in-out infinite;
    transform-origin: 50% 86%;
    transition: filter 620ms ease;
}

.promise-report-v7__frame {
    z-index: 0;
    filter: drop-shadow(0 0.42cqw 0.45cqw rgba(93, 60, 21, 0.26));
}

.promise-report-v7__aux-layer {
    z-index: 1;
    animation: promise-report-v7-rig-counter-float 3.6s ease-in-out infinite;
}

.promise-report-v7__choice-art {
    z-index: 2;
    opacity: 1;
    filter: drop-shadow(0 0.22cqw 0.22cqw rgba(102, 59, 17, 0.18));
    transition:
        filter 240ms ease,
        opacity 240ms ease,
        transform 320ms cubic-bezier(.16, .86, .2, 1.24);
}

.promise-report-v7.is-stage-two .promise-report-v7__choice-rig {
    opacity: 1;
    filter: brightness(0.48) saturate(0.62);
}

.promise-report-v7.is-stage-two .promise-report-v7__frame,
.promise-report-v7.is-stage-two .promise-report-v7__choice-art,
.promise-report-v7.is-stage-two .promise-report-v7__choice-art.is-selected {
    opacity: 1;
    filter: none;
    transform: none;
}

.promise-report-v7.is-stage-two .promise-report-v7__aux-layer {
    opacity: 1;
    filter: none;
}

.promise-report-v7__choice-art:has(+ .promise-report-v7__choice-hit.is-selected),
.promise-report-v7__choice-art.is-selected {
    opacity: 1;
    filter:
        brightness(1.08)
        saturate(1.08)
        drop-shadow(0 0 0.12cqw #fff7bd)
        drop-shadow(0 0 0.72cqw rgba(24, 224, 219, 0.92))
        drop-shadow(0 0.36cqw 0.34cqw rgba(94, 54, 15, 0.25));
    transform: translateY(-0.48cqw) scale(1.025);
}

.promise-report-v7__choice-hit {
    position: absolute;
    z-index: 4;
    padding: 0;
    pointer-events: auto;
    background: transparent;
    border: 0;
    border-radius: 48%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.promise-report-v7__choice-hit::before {
    content: "";
    position: absolute;
    inset: 15%;
    opacity: 0;
    background: radial-gradient(ellipse, rgba(184, 255, 243, 0.58), transparent 68%);
    border-radius: 50%;
    filter: blur(0.28cqw);
    transition: opacity 220ms ease;
}

.promise-report-v7__choice-hit:hover::before,
.promise-report-v7__choice-hit:focus-visible::before,
.promise-report-v7__choice-hit.is-selected::before {
    opacity: 1;
}

.promise-report-v7__choice-hit:focus-visible {
    outline: 0.12cqw solid rgba(255, 251, 199, 0.96);
    outline-offset: 0.12cqw;
}

.promise-report-v7__choice-hit[data-promise-report-choice="not_done"] {
    top: 63.7%;
    left: 31.8%;
    width: 11.6%;
    height: 23.5%;
}

.promise-report-v7__choice-hit[data-promise-report-choice="partial"] {
    top: 63.9%;
    left: 58.9%;
    width: 11.8%;
    height: 23.8%;
}

.promise-report-v7__choice-hit[data-promise-report-choice="kept"] {
    top: 73.7%;
    left: 44.4%;
    width: 11.4%;
    height: 24.1%;
}

.promise-report-v7__choice-hit.is-selected {
    animation: promise-report-v7-choice-pulse 1.8s ease-in-out infinite;
}

.promise-report-v7__seal-views {
    z-index: 10;
    overflow: visible;
    transform-origin: 50% 64.5%;
    animation: promise-report-v7-seal-float 2.8s ease-in-out infinite;
}

.promise-report-v7__seal-views::before,
.promise-report-v7__seal-views::after {
    content: "";
    position: absolute;
    top: 64.5%;
    left: 50%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
}

.promise-report-v7__seal-views::before {
    width: 9.4cqw;
    aspect-ratio: 1;
    background:
        radial-gradient(circle, rgba(255, 255, 225, 0.98) 0 5%, rgba(91, 255, 237, 0.82) 13%, rgba(36, 213, 218, 0.34) 36%, transparent 68%);
    border-radius: 50%;
    mix-blend-mode: screen;
    transform: translate(-50%, -50%) scale(0.32);
}

.promise-report-v7__seal-views::after {
    width: 2.1cqw;
    height: 12.8cqw;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(128, 255, 243, 0.28) 18%,
            rgba(255, 255, 231, 0.98) 48% 52%,
            rgba(128, 255, 243, 0.28) 82%,
            transparent
        );
    filter: blur(0.16cqw);
    transform: translate(-50%, -50%) scaleX(0.25);
}

.promise-report-v7__seal-views img {
    z-index: 1;
    opacity: 0;
    filter:
        drop-shadow(0 0.34cqw 0.3cqw rgba(63, 56, 34, 0.35))
        drop-shadow(0 0 0.52cqw rgba(37, 231, 221, 0.58));
    transform-origin: 50% 64.5%;
    transition: none;
}

.promise-report-v7__seal-views img.is-active {
    opacity: 1;
}

.promise-report-v7__seal-views img.is-leaving {
    z-index: 1;
    animation: promise-report-v7-seal-pose-out 320ms cubic-bezier(.2, .72, .2, 1) both;
    will-change: opacity, transform;
}

.promise-report-v7__seal-views img.is-entering {
    z-index: 2;
    animation: promise-report-v7-seal-pose-in 320ms cubic-bezier(.16, .82, .2, 1.12) both;
    will-change: opacity, transform;
}

.promise-report-v7__seal-views img.is-reaffirming {
    z-index: 2;
    animation: promise-report-v7-seal-reaffirm 360ms cubic-bezier(.16, .82, .2, 1.18) both;
    will-change: transform;
}

.promise-report-v7.is-seal-turning .promise-report-v7__seal-views::before {
    animation: promise-report-v7-seal-turn-burst 320ms ease-out both;
}

.promise-report-v7.is-seal-turning .promise-report-v7__seal-views::after {
    animation: promise-report-v7-seal-turn-sweep 320ms ease-in-out both;
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__seal-views {
    filter: brightness(1.04);
}

.promise-report-v7__seal-aura {
    position: absolute;
    top: 44%;
    left: 50%;
    z-index: 9;
    width: 15%;
    height: 38%;
    pointer-events: none;
    transform: translateX(-50%);
}

.promise-report-v7__seal-beam {
    position: absolute;
    inset: 0 13% 10%;
    opacity: 0.7;
    background:
        linear-gradient(
            90deg,
            transparent 0,
            rgba(99, 249, 244, 0.12) 22%,
            rgba(219, 255, 239, 0.56) 50%,
            rgba(99, 249, 244, 0.12) 78%,
            transparent 100%
        );
    clip-path: polygon(37% 0, 63% 0, 92% 100%, 8% 100%);
    filter: blur(0.28cqw);
    animation: promise-report-v7-seal-beam 2.6s ease-in-out infinite;
}

.promise-report-v7__seal-floor-glow {
    position: absolute;
    right: 5%;
    bottom: 9%;
    left: 5%;
    height: 22%;
    opacity: 0.86;
    background:
        radial-gradient(
            ellipse at center,
            rgba(225, 255, 244, 0.94) 0 9%,
            rgba(55, 237, 226, 0.65) 22%,
            rgba(30, 189, 211, 0.25) 50%,
            transparent 72%
        );
    filter: blur(0.18cqw);
    animation: promise-report-v7-seal-floor-glow 2.4s ease-in-out infinite;
}

.promise-report-v7__seal-rings {
    position: absolute;
    top: 19%;
    left: 50%;
    width: 82%;
    aspect-ratio: 1;
    opacity: 0;
    transform: translateX(-50%) scale(0.72);
    transition:
        opacity 280ms ease,
        transform 520ms cubic-bezier(.18, .84, .22, 1.18);
}

.promise-report-v7:not([data-selected-outcome=""]) .promise-report-v7__seal-rings {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.promise-report-v7__seal-rings i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76%;
    height: 76%;
    border: 0.09cqw solid rgba(210, 255, 246, 0.88);
    border-radius: 50%;
    box-shadow:
        0 0 0.5cqw rgba(45, 225, 226, 0.8),
        inset 0 0 0.36cqw rgba(73, 232, 232, 0.54);
    transform: translate(-50%, -50%);
    animation: promise-report-v7-seal-ring 2s ease-out infinite;
}

.promise-report-v7__seal-rings i:nth-child(2) {
    animation-delay: 0.64s;
}

.promise-report-v7__seal-rings i:nth-child(3) {
    animation-delay: 1.28s;
}

.promise-report-v7__seal-particles {
    position: absolute;
    inset: 2% 16% 15%;
    overflow: hidden;
}

.promise-report-v7__seal-particles i {
    position: absolute;
    bottom: 4%;
    left: calc(8% + var(--particle-index) * 6.2%);
    width: clamp(2px, 0.18cqw, 4px);
    aspect-ratio: 1;
    opacity: 0;
    background: #f9ffcf;
    border-radius: 50%;
    box-shadow:
        0 0 0.34cqw #79fff2,
        0 0 0.7cqw rgba(64, 225, 237, 0.78);
    animation: promise-report-v7-seal-particle 2.25s ease-out infinite;
    animation-delay: calc(var(--particle-index) * -0.17s);
}

/*
 * Reuse the exact aura system from the "Sử dụng Ấn" modal.
 * Only its scene coordinates and layer order differ in the report ceremony.
 */
.promise-report-v7 .promise-use__record-aura.promise-report-v7__seal-aura {
    top: 64.5%;
    left: 50%;
    z-index: 9;
    width: 18.67%;
    height: 44.61%;
    opacity: 1;
    overflow: visible;
    isolation: auto;
    filter: saturate(1.38) contrast(1.08);
    transform: translate(-50%, -50%);
}

.promise-report-v7 .promise-use__record-aura-particles.promise-report-v7__seal-aura-particles {
    top: 64.5%;
    left: 50%;
    z-index: 11;
    width: 18.67%;
    height: 44.61%;
    opacity: 1;
    transform: translate(-50%, -50%);
}

.promise-report-v7 .promise-use__round-aura {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.78);
    transition:
        opacity 280ms ease,
        transform 520ms cubic-bezier(.18, .84, .22, 1.18);
}

.promise-report-v7:not([data-selected-outcome=""]) .promise-use__round-aura {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
}

.promise-report-v7__seal-hit {
    position: absolute;
    top: 52.4%;
    left: 45.9%;
    z-index: 13;
    width: 8.7%;
    height: 21.5%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 42%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.promise-report-v7__seal-hit::before {
    content: "";
    position: absolute;
    inset: 12% 5%;
    opacity: 0;
    background: radial-gradient(ellipse, rgba(212, 255, 248, 0.82), rgba(18, 223, 213, 0.22) 42%, transparent 70%);
    border-radius: 45%;
    filter: blur(0.3cqw);
    transition: opacity 220ms ease;
}

.promise-report-v7__seal-hit:not(:disabled):hover::before,
.promise-report-v7__seal-hit:not(:disabled):focus-visible::before {
    opacity: 1;
}

.promise-report-v7__seal-hit:focus-visible {
    outline: 0.12cqw solid #fff7be;
    outline-offset: 0.12cqw;
}

.promise-report-v7__seal-hit:disabled {
    cursor: default;
}

.promise-report-v7__talking-daro {
    z-index: 14;
    filter: drop-shadow(0 0.5cqw 0.42cqw rgba(102, 57, 13, 0.23));
}

.promise-report-v7__daro-dialogue {
    position: absolute;
    top: 14.2%;
    right: 9.4%;
    z-index: 15;
    display: grid;
    gap: 0.25cqw;
    width: 21%;
    min-height: 10.5%;
    padding: 0.65cqw 0.9cqw 0.7cqw;
    color: #704015;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 254, 231, 0.97), rgba(255, 238, 183, 0.94));
    border: 0.12cqw solid #d49628;
    border-radius: 1.2cqw;
    box-shadow:
        0 0.34cqw 0 rgba(135, 76, 16, 0.26),
        0 0.5cqw 1.1cqw rgba(255, 220, 116, 0.28),
        inset 0 0.1cqw 0 rgba(255, 255, 255, 0.82);
}

.promise-report-v7__daro-dialogue::after {
    content: "";
    position: absolute;
    right: 24%;
    bottom: -0.8cqw;
    width: 1.25cqw;
    height: 1.25cqw;
    background: #ffefbd;
    border-right: 0.12cqw solid #d49628;
    border-bottom: 0.12cqw solid #d49628;
    transform: rotate(45deg);
}

.promise-report-v7__daro-dialogue > span {
    color: #168aa3;
    font-size: clamp(7px, 0.58cqw, 12px);
    font-weight: 1000;
    letter-spacing: 0.18em;
}

.promise-report-v7__daro-dialogue > p {
    display: grid;
    gap: 0.06cqw;
    margin: 0;
    font-size: clamp(9px, 0.76cqw, 15px);
    font-weight: 900;
    line-height: 1.18;
}

.promise-report-v7__story-transcript {
    display: none;
    max-height: 2.8cqw;
    overflow: hidden;
    color: #80552e;
    font-size: clamp(7px, 0.55cqw, 11px);
    font-weight: 700;
    line-height: 1.2;
}

.promise-report-v7.has-story-transcript .promise-report-v7__story-transcript {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.promise-report-v7__story-actions {
    display: flex;
    justify-content: center;
    gap: 0.34cqw;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 240ms ease, opacity 200ms ease;
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__story-actions {
    height: 2.1cqw;
    opacity: 1;
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__daro-dialogue {
    align-content: center;
    width: 20.5%;
    min-height: 6.2%;
    padding: 0.48cqw 0.58cqw 0.55cqw;
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__daro-dialogue > span,
.promise-report-v7[data-report-state="selected"] .promise-report-v7__daro-dialogue > p {
    display: none;
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__story-actions button:first-child {
    flex: 1 1 auto;
    min-height: 1.75cqw;
    padding: 0.1cqw 0.2cqw;
    color: #744114;
    font-size: clamp(8px, 0.66cqw, 13px);
    letter-spacing: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__story-actions button:first-child .material-symbols-outlined {
    display: grid;
    place-items: center;
    width: 1.55cqw;
    aspect-ratio: 1;
    color: #fff9dd;
    font-size: clamp(13px, 1.05cqw, 21px);
    background: linear-gradient(180deg, #35c4d3, #1689a2);
    border: 0.07cqw solid #fff0a7;
    border-radius: 50%;
    box-shadow:
        0 0.13cqw 0 #126c7e,
        0 0 0.52cqw rgba(38, 214, 219, 0.45);
}

.promise-report-v7[data-report-state="selected"].has-story-transcript .promise-report-v7__daro-dialogue {
    min-height: 9.4%;
}

.promise-report-v7__story-actions button,
.promise-report-v7__text-panel button,
.promise-report-v7__completion [data-promise-report-feedback-actions] button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22cqw;
    min-height: 1.45cqw;
    padding: 0.15cqw 0.52cqw;
    color: #fff9dd;
    font: 1000 clamp(7px, 0.54cqw, 11px)/1 "Baloo 2", sans-serif;
    letter-spacing: 0.04em;
    background: linear-gradient(180deg, #34bfd0, #1689a2);
    border: 0.08cqw solid #fff0a7;
    border-radius: 999px;
    box-shadow: 0 0.16cqw 0 #126c7e;
    cursor: pointer;
}

.promise-report-v7__story-actions button:disabled {
    opacity: 0.46;
    cursor: default;
}

.promise-report-v7__story-actions button:last-child {
    min-width: 1.5cqw;
    padding-inline: 0.3cqw;
    color: #774415;
    background: linear-gradient(180deg, #fff3b4, #e8ad3c);
    box-shadow: 0 0.16cqw 0 #a7661d;
}

.promise-report-v7.is-listening .promise-report-v7__story-actions button:first-child {
    color: #fff;
    background: linear-gradient(180deg, #ff7b6d, #d94a42);
    box-shadow:
        0 0.16cqw 0 #9f2d28,
        0 0 0.7cqw rgba(255, 92, 82, 0.72);
    animation: promise-report-v7-listening 1s ease-in-out infinite;
}

.promise-report-v7__listen-tooltip {
    position: absolute;
    top: -0.28cqw;
    left: 50%;
    width: max-content;
    max-width: 13cqw;
    padding: 0.18cqw 0.52cqw;
    color: #6c3a13;
    font-size: clamp(7px, 0.55cqw, 11px);
    font-weight: 950;
    line-height: 1.05;
    text-align: center;
    background: rgba(255, 250, 221, 0.88);
    border: 0.06cqw solid rgba(209, 150, 55, 0.72);
    border-radius: 999px;
    box-shadow:
        0 0.12cqw 0.2cqw rgba(113, 65, 16, 0.2),
        inset 0 0.08cqw 0 rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -100%);
    backdrop-filter: blur(0.2cqw);
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__daro-dialogue {
    top: 12.4%;
    right: 14.3%;
    display: grid;
    place-items: center;
    width: 11.5%;
    min-height: 16%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__daro-dialogue::after {
    display: none;
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__story-actions {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 7.4cqw;
    overflow: visible;
    opacity: 1;
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__listen-orb {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 5.4cqw;
    min-height: 0;
    aspect-ratio: 1;
    padding: 0;
    color: #eaffff;
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.58) 0 7%, transparent 20%),
        radial-gradient(circle at center, rgba(108, 251, 244, 0.22), rgba(19, 159, 181, 0.08) 58%, rgba(255, 255, 255, 0.04) 72%);
    border: 0.09cqw solid rgba(221, 255, 249, 0.76);
    border-radius: 50%;
    box-shadow:
        0 0 0 0.12cqw rgba(76, 231, 226, 0.14),
        0 0 1.2cqw rgba(23, 205, 213, 0.52),
        inset 0 0 0.55cqw rgba(230, 255, 249, 0.55);
    backdrop-filter: blur(0.16cqw);
    animation: promise-report-v7-listen-orb 2.4s ease-in-out infinite;
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__listen-orb::before,
.promise-report-v7[data-report-state="selected"] .promise-report-v7__listen-orb::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__listen-orb::before {
    inset: 9%;
    border: 0.06cqw solid rgba(255, 255, 255, 0.34);
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__listen-orb::after {
    inset: 22%;
    background: radial-gradient(circle, rgba(44, 205, 219, 0.24), transparent 72%);
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__listen-orb .material-symbols-outlined {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    color: #f4fffb;
    font-size: clamp(22px, 2.1cqw, 42px);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow:
        0 0 0.36cqw rgba(255, 255, 255, 0.84),
        0 0 0.82cqw rgba(31, 223, 224, 0.88);
}

.promise-report-v7[data-report-state="selected"] .promise-report-v7__story-actions button:last-child {
    position: absolute;
    right: 0.18cqw;
    bottom: 0.3cqw;
    min-width: 1.55cqw;
    min-height: 1.55cqw;
    padding: 0;
    border-radius: 50%;
    box-shadow:
        0 0.12cqw 0 #a7661d,
        0 0 0.42cqw rgba(255, 222, 124, 0.55);
}

.promise-report-v7[data-report-state="selected"].is-listening .promise-report-v7__listen-orb {
    background:
        radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.62) 0 7%, transparent 20%),
        radial-gradient(circle at center, rgba(255, 137, 125, 0.28), rgba(225, 73, 66, 0.11) 62%, transparent 74%);
    box-shadow:
        0 0 0 0.12cqw rgba(255, 168, 155, 0.16),
        0 0 1.25cqw rgba(255, 91, 82, 0.66),
        inset 0 0 0.55cqw rgba(255, 240, 229, 0.58);
}

.promise-report-v7[data-report-state="selected"].has-story-transcript .promise-report-v7__daro-dialogue {
    min-height: 16%;
}

.promise-report-v7[data-report-state="selected"].has-story-transcript .promise-report-v7__story-transcript {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 15cqw;
    padding: 0.3cqw 0.48cqw;
    color: #75461f;
    background: rgba(255, 249, 219, 0.86);
    border: 0.06cqw solid rgba(209, 150, 55, 0.64);
    border-radius: 0.48cqw;
    transform: translateX(-50%);
}

.promise-report-v7__text-panel {
    position: absolute;
    top: calc(100% + 0.55cqw);
    right: 0;
    z-index: 2;
    display: flex;
    gap: 0.32cqw;
    width: 100%;
    padding: 0.45cqw;
    background: rgba(255, 246, 209, 0.97);
    border: 0.1cqw solid #d49628;
    border-radius: 0.7cqw;
    box-shadow: 0 0.3cqw 0.7cqw rgba(87, 52, 15, 0.3);
}

.promise-report-v7__text-panel[hidden] {
    display: none;
}

.promise-report-v7__text-panel textarea {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 3.5cqw;
    padding: 0.38cqw 0.45cqw;
    resize: none;
    color: #673910;
    font: 750 clamp(8px, 0.62cqw, 12px)/1.25 "Baloo 2", sans-serif;
    background: rgba(255, 254, 237, 0.92);
    border: 0.08cqw solid #d7a44a;
    border-radius: 0.45cqw;
    outline: none;
}

.promise-report-v7__text-panel button {
    align-self: stretch;
    border-radius: 0.5cqw;
}

.promise-report-v7__original-letter {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transform: translateY(1.2cqw) scale(0.86);
    transition:
        opacity 360ms ease 160ms,
        transform 620ms cubic-bezier(.18, .82, .2, 1.08) 120ms;
}

.promise-report-v7__original-letter-art {
    position: absolute;
    top: 14.95%;
    left: 26.38%;
    width: 47.21%;
    height: 39.86%;
    object-fit: fill;
    filter: drop-shadow(0 0.52cqw 0.55cqw rgba(91, 52, 16, 0.26));
}

.promise-report-v7__closed-letter {
    position: absolute;
    top: 13.6%;
    left: 50%;
    z-index: 8;
    width: 10.8%;
    height: auto;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    filter:
        drop-shadow(0 0.42cqw 0.48cqw rgba(91, 52, 16, 0.28))
        drop-shadow(0 0 0.66cqw rgba(43, 224, 221, 0.18));
    transform: translateX(-50%) scale(0.72);
    transform-origin: 50% 50%;
}

.promise-report-v7__original-letter-copy {
    position: absolute;
    top: 20.6%;
    left: 31.1%;
    z-index: 2;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.38cqw;
    width: 22.7%;
    min-height: 27%;
    text-align: center;
    transition: opacity 240ms ease, transform 320ms ease;
}

.promise-report-v7__original-letter-copy > small {
    color: #168aa3;
    font-size: clamp(7px, 0.58cqw, 12px);
    font-weight: 1000;
    letter-spacing: 0.12em;
}

.promise-report-v7__original-letter-copy > strong {
    display: -webkit-box;
    max-width: 90%;
    overflow: hidden;
    color: #69320e;
    font-size: clamp(15px, 1.45cqw, 29px);
    font-weight: 1000;
    line-height: 1.04;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.promise-report-v7__original-letter-copy > p {
    display: -webkit-box;
    max-width: 88%;
    margin: 0;
    overflow: hidden;
    color: #84572f;
    font-size: clamp(8px, 0.68cqw, 14px);
    font-weight: 750;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.promise-report-v7__original-stamp {
    position: absolute;
    top: 26.08%;
    left: 56.92%;
    z-index: 3;
    width: 9.58%;
    aspect-ratio: 1;
    object-fit: contain;
    opacity: 0.86;
    filter: saturate(0.94) contrast(1.02);
    mix-blend-mode: multiply;
    transition: opacity 180ms ease, transform 320ms ease;
}

.promise-report-v7.is-stage-two .promise-report-v7__story-copy,
.promise-report-v7.is-stage-two .promise-report-v7__result-layer {
    opacity: 0;
    transform: translateY(-0.7cqw) scale(0.96);
}

.promise-report-v7.is-stage-two .promise-report-v7__original-letter {
    opacity: 1;
    transform: none;
}

.promise-report-v7__truth-stamp {
    z-index: 9;
    opacity: 0;
    filter: drop-shadow(0 0.24cqw 0.2cqw rgba(16, 120, 126, 0.3));
    transform: scale(1.18);
    transition:
        opacity 180ms ease,
        transform 520ms cubic-bezier(.16, .86, .2, 1.22);
}

.promise-report-v7.is-truth-marked .promise-report-v7__truth-stamp {
    opacity: 0.95;
    transform: none;
}

.promise-report-v7.is-truth-marked .promise-report-v7__original-stamp {
    opacity: 0;
    transform: scale(0.9);
}

.promise-report-v7.is-stamping .promise-report-v7__seal-views {
    z-index: 18;
    animation: promise-report-v7-final-stamp 1.5s cubic-bezier(.18, .72, .2, 1) both;
}

.promise-report-v7__stamp-impact {
    position: absolute;
    top: 30.5%;
    left: 58.4%;
    z-index: 17;
    width: 7.5%;
    aspect-ratio: 1;
    pointer-events: none;
}

.promise-report-v7__stamp-impact::before,
.promise-report-v7__stamp-impact::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    border: 0.16cqw solid rgba(225, 255, 249, 0.94);
    border-radius: 50%;
    box-shadow:
        0 0 1.5cqw rgba(38, 234, 222, 0.88),
        inset 0 0 1cqw rgba(255, 249, 180, 0.72);
}

.promise-report-v7.is-result-stamped .promise-report-v7__stamp-impact::before {
    animation: promise-report-v7-impact 760ms ease-out both;
}

.promise-report-v7.is-result-stamped .promise-report-v7__stamp-impact::after {
    animation: promise-report-v7-impact 760ms ease-out 90ms both;
}

.promise-report-v7__instruction {
    position: absolute;
    bottom: 1.3%;
    left: 50%;
    z-index: 20;
    width: 42%;
    margin: 0;
    color: #fff8d1;
    font-size: clamp(9px, 0.7cqw, 14px);
    font-weight: 1000;
    letter-spacing: 0.025em;
    line-height: 1.1;
    text-align: center;
    text-shadow:
        0 0.1cqw 0 #5d3718,
        0 0 0.45cqw rgba(27, 94, 105, 0.9);
    transform: translateX(-50%);
}

.promise-report-v7__completion {
    position: absolute;
    top: 19.3%;
    left: 30.4%;
    z-index: 12;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.32cqw;
    width: 24.6%;
    min-height: 29.5%;
    padding: 0.5cqw;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transform: translateY(0.5cqw);
    transition: opacity 300ms ease, transform 420ms ease;
}

.promise-report-v7__completion > span {
    color: #168aa3;
    font-size: clamp(7px, 0.58cqw, 12px);
    font-weight: 1000;
    letter-spacing: 0.12em;
}

.promise-report-v7__completion h3 {
    max-width: 94%;
    margin: 0;
    color: #6c330e;
    font-size: clamp(14px, 1.28cqw, 25px);
    font-weight: 1000;
    line-height: 1.02;
}

.promise-report-v7__completion > p {
    display: -webkit-box;
    max-width: 92%;
    margin: 0;
    overflow: hidden;
    color: #82542c;
    font-size: clamp(8px, 0.64cqw, 13px);
    font-weight: 750;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.promise-report-v7__completion [data-promise-report-feedback-rewards],
.promise-report-v7__completion [data-promise-report-feedback-actions] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.28cqw;
    max-width: 120%;
}

.promise-report-v7__completion [data-promise-report-feedback-actions] button {
    color: #714014;
    background: linear-gradient(180deg, #fff1a5, #efa82d);
    border-color: #f9d76f;
    box-shadow: 0 0.16cqw 0 #a7641c;
}

.promise-report-v7__completion [data-promise-report-feedback-actions] button + button {
    color: #fff9dd;
    background: linear-gradient(180deg, #36bfd0, #1689a2);
    box-shadow: 0 0.16cqw 0 #126c7e;
}

.promise-report-v7.is-report-complete .promise-report-v7__original-letter-copy {
    opacity: 0;
    transform: translateY(-0.4cqw);
}

.promise-report-v7.is-report-complete .promise-report-v7__completion {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.promise-report-v7.is-scroll-closing .promise-report-v7__original-letter-copy,
.promise-report-v7.is-scroll-closing .promise-report-v7__completion {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.35cqw) scale(0.96);
}

.promise-report-v7.is-scroll-closing .promise-report-v7__original-letter-art {
    animation: promise-report-v7-scroll-roll 820ms cubic-bezier(.2, .74, .18, 1) both;
}

.promise-report-v7.is-scroll-closing .promise-report-v7__truth-stamp {
    opacity: 0;
    transform: scale(0.72);
}

.promise-report-v7.is-scroll-closed .promise-report-v7__original-letter {
    opacity: 0;
}

.promise-report-v7.is-scroll-closed .promise-report-v7__closed-letter {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    animation: promise-report-v7-closed-scroll-settle 520ms cubic-bezier(.16, .88, .2, 1.16) both;
}

.promise-report-v7__reward-bursts {
    position: absolute;
    inset: 0;
    z-index: 24;
    pointer-events: none;
}

.promise-report-v7__reward-burst {
    position: absolute;
    top: 32%;
    left: calc(50% + var(--burst-x, 0cqw));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2cqw;
    min-width: 4.25cqw;
    min-height: 3.1cqw;
    padding: 0.32cqw 0.6cqw;
    color: #744012;
    font: 1000 clamp(12px, 1.02cqw, 20px)/1 "Baloo 2", sans-serif;
    background:
        radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.95) 0 10%, transparent 24%),
        linear-gradient(180deg, rgba(255, 250, 218, 0.98), rgba(246, 196, 88, 0.94));
    border: 0.08cqw solid rgba(185, 111, 24, 0.84);
    border-radius: 999px;
    box-shadow:
        0 0.18cqw 0.22cqw rgba(93, 52, 14, 0.26),
        0 0 0.6cqw rgba(70, 231, 223, 0.38);
    opacity: 0;
    transform: translate(-50%, 0) scale(0.62);
    animation: promise-report-v7-reward-burst 980ms cubic-bezier(.17, .86, .18, 1.08) both;
    animation-delay: calc(var(--burst-index) * 220ms);
}

.promise-report-v7__reward-burst img {
    width: 1.82cqw;
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 0.08cqw 0.08cqw rgba(89, 52, 15, 0.25));
}

.promise-report-v7__reward-burst i {
    color: #22a8b9;
    font-size: clamp(18px, 1.4cqw, 28px);
    font-style: normal;
    text-shadow: 0 0 0.42cqw rgba(103, 245, 237, 0.78);
}

.promise-report-v7.is-scroll-closed .promise-report-v7__daro-dialogue {
    top: 11.8%;
    right: 7.8%;
    width: 28%;
    min-height: 11.5%;
    padding: 0.9cqw 1.2cqw 1.05cqw;
    align-content: center;
}

.promise-report-v7.is-scroll-closed .promise-report-v7__daro-dialogue > span {
    font-size: clamp(7px, 0.62cqw, 13px);
    letter-spacing: 0.14em;
}

.promise-report-v7.is-scroll-closed .promise-report-v7__daro-dialogue > p {
    display: grid;
    place-items: center;
    gap: 0;
    min-height: 3.8cqw;
    font-size: clamp(13px, 1.2cqw, 24px);
    line-height: 1.08;
    text-align: center;
}

.promise-report-v7.is-scroll-closed .promise-report-v7__daro-dialogue > p > span {
    display: block;
}

.promise-report-v7.is-scroll-closed .promise-report-v7__daro-dialogue::after {
    right: 17%;
}

.promise-expired-notice {
    position: fixed;
    inset: 0;
    z-index: 15000;
    display: grid;
    place-items: center;
    padding: clamp(18px, 3vw, 42px);
}

.promise-expired-notice__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 20, 36, 0.58);
    backdrop-filter: blur(4px);
}

.promise-expired-notice__panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(220px, 0.86fr) minmax(300px, 1fr);
    align-items: center;
    gap: clamp(18px, 2.8vw, 42px);
    width: min(980px, 94vw);
    min-height: min(470px, 78vh);
    padding: clamp(20px, 2.7vw, 38px);
    color: #6d3812;
    background:
        radial-gradient(circle at 27% 76%, rgba(74, 224, 228, 0.18), transparent 28%),
        radial-gradient(circle at 74% 0%, rgba(255, 255, 245, 0.96), transparent 36%),
        linear-gradient(180deg, #fffbe7, #fff0bf);
    border: 4px solid #efb63d;
    border-radius: 34px;
    box-shadow:
        0 0 0 6px rgba(255, 248, 197, 0.18),
        0 28px 68px rgba(18, 40, 73, 0.46);
}

.promise-expired-notice__daro-side {
    position: relative;
    align-self: stretch;
    display: grid;
    align-content: end;
    justify-items: center;
    min-height: 390px;
}

.promise-expired-notice__daro-side img {
    width: min(360px, 34vw);
    max-height: 390px;
    object-fit: contain;
    filter:
        drop-shadow(0 18px 16px rgba(96, 56, 18, 0.26))
        drop-shadow(0 0 28px rgba(78, 225, 229, 0.18));
}

.promise-expired-notice__speech {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: min(330px, 31vw);
    padding: 0.8em 1em 0.9em;
    color: #724014;
    font-size: clamp(16px, 1.4vw, 24px);
    font-weight: 1000;
    line-height: 1.15;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 254, 235, 0.98), rgba(255, 238, 187, 0.96));
    border: 3px solid #e7aa33;
    border-radius: 24px;
    box-shadow:
        0 6px 0 rgba(159, 91, 22, 0.28),
        0 12px 24px rgba(100, 58, 18, 0.16);
    transform: translateX(-50%);
}

.promise-expired-notice__speech::after {
    content: "";
    position: absolute;
    left: 32%;
    bottom: -13px;
    width: 24px;
    height: 24px;
    background: #ffefbb;
    border-right: 3px solid #e7aa33;
    border-bottom: 3px solid #e7aa33;
    transform: rotate(45deg);
}

.promise-expired-notice__content {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: clamp(16px, 2vw, 26px);
    min-width: 0;
    text-align: center;
}

.promise-expired-notice__panel h3 {
    margin: 0;
    color: #6c330e;
    font-family: "Baloo 2", "Baloo", sans-serif;
    font-size: clamp(38px, 4.1vw, 70px);
    font-weight: 1000;
    line-height: 1.06;
    letter-spacing: 0.015em;
    text-wrap: balance;
}

.promise-expired-notice__summary {
    display: grid;
    gap: 0.34em;
    width: min(420px, 100%);
    padding: 1em 1.1em 1.08em;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(235, 176, 68, 0.6);
    border-radius: 24px;
}

.promise-expired-notice__summary strong {
    color: #b16710;
    font-size: clamp(15px, 1.15vw, 20px);
    font-weight: 1000;
    letter-spacing: 0.08em;
}

.promise-expired-notice__summary span {
    color: #704115;
    font-size: clamp(26px, 2.2vw, 38px);
    font-weight: 1000;
    line-height: 1.05;
}

.promise-expired-notice__confirm {
    min-width: min(240px, 82%);
    padding: 0.82em 1.25em;
    color: #713408;
    font: 1000 clamp(16px, 1.35vw, 24px)/1 "Baloo 2", sans-serif;
    background: linear-gradient(180deg, #ffe16d, #ffac1f);
    border: 3px solid #fff6c0;
    border-radius: 999px;
    box-shadow: 0 8px 0 #9a4d0b, 0 18px 28px rgba(154, 77, 11, 0.22);
    cursor: pointer;
}

@media (max-width: 760px) {
    .promise-expired-notice__panel {
        grid-template-columns: 1fr;
        gap: 12px;
        width: min(560px, 94vw);
        min-height: auto;
    }

    .promise-expired-notice__daro-side {
        min-height: 280px;
    }

    .promise-expired-notice__daro-side img {
        width: min(280px, 68vw);
        max-height: 280px;
    }

    .promise-expired-notice__speech {
        width: min(330px, 82vw);
    }
}

.promise-report-v7__final-actions {
    position: absolute;
    bottom: 7.6%;
    left: 50%;
    z-index: 27;
    display: flex;
    justify-content: center;
    transform: translateX(-50%);
}

.promise-report-v7__final-actions[hidden] {
    display: none;
}

.promise-report-v7__final-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25cqw;
    padding: 0.28cqw 0.95cqw;
    color: #714014;
    font: 1000 clamp(9px, 0.7cqw, 14px)/1 "Baloo 2", sans-serif;
    letter-spacing: 0.04em;
    background: linear-gradient(180deg, #fff1a5, #efa82d);
    border: 0.09cqw solid #f9d76f;
    border-radius: 999px;
    box-shadow: 0 0.18cqw 0 #a7641c, 0 0 0.72cqw rgba(255, 218, 88, 0.38);
    cursor: pointer;
}

.promise-report-v7__close {
    position: absolute;
    top: 1.7%;
    right: 1.7%;
    z-index: 30;
    display: grid;
    place-items: center;
    width: clamp(34px, 3.8cqw, 72px);
    aspect-ratio: 1;
    padding: 0;
    color: #71380e;
    font: 1000 clamp(20px, 2.1cqw, 40px)/1 "Baloo 2", sans-serif;
    background:
        radial-gradient(circle at 40% 30%, #fffbe4 0 18%, transparent 19%),
        linear-gradient(180deg, #fff3b6, #f0ad34 72%, #cf7615);
    border: 0.14cqw solid #a95b12;
    border-radius: 50%;
    box-shadow:
        0 0.28cqw 0 #7a3d0b,
        0 0 0 0.12cqw rgba(255, 244, 178, 0.78),
        0 0 0.85cqw rgba(255, 211, 90, 0.46);
    cursor: pointer;
}

.promise-report-v7__close:disabled {
    opacity: 0.46;
    cursor: default;
}

@keyframes promise-report-v7-rig-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.38cqw);
    }
}

@keyframes promise-report-v7-rig-counter-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(0.38cqw);
    }
}

@keyframes promise-report-v7-choice-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.035);
    }
}

@keyframes promise-report-v7-seal-pose-out {
    0%,
    42% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    48%,
    100% {
        opacity: 0;
        transform: translateY(-0.18cqw) scale(0.985);
    }
}

@keyframes promise-report-v7-seal-pose-in {
    0%,
    46% {
        opacity: 0;
        transform: translateY(-0.18cqw) scale(0.985);
    }
    47% {
        opacity: 1;
        transform: translateY(-0.18cqw) scale(0.985);
    }
    72% {
        opacity: 1;
        transform: translateY(-0.3cqw) scale(1.018);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes promise-report-v7-seal-reaffirm {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    48% {
        transform: translateY(-0.28cqw) scale(1.025);
    }
}

@keyframes promise-report-v7-seal-turn-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.32);
    }
    45% {
        opacity: 0.98;
        transform: translate(-50%, -50%) scale(0.92);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.38);
    }
}

@keyframes promise-report-v7-seal-turn-sweep {
    0%,
    18% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0.25);
    }
    46% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleX(1);
    }
    76%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0.38);
    }
}

@keyframes promise-report-v7-seal-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.34cqw);
    }
}

@keyframes promise-report-v7-seal-beam {
    0%,
    100% {
        opacity: 0.48;
        transform: scaleX(0.9);
    }
    50% {
        opacity: 0.82;
        transform: scaleX(1.06);
    }
}

@keyframes promise-report-v7-seal-floor-glow {
    0%,
    100% {
        opacity: 0.66;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.96;
        transform: scale(1.08);
    }
}

@keyframes promise-report-v7-seal-ring {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.48);
    }
    28% {
        opacity: 0.94;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.65);
    }
}

@keyframes promise-report-v7-seal-particle {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.55);
    }
    18% {
        opacity: 0.9;
    }
    76% {
        opacity: 0.55;
    }
    100% {
        opacity: 0;
        transform: translateY(-7.6cqw) scale(1.2);
    }
}

@keyframes promise-report-v7-listening {
    0%,
    100% {
        filter: brightness(1);
        transform: scale(1);
    }
    50% {
        filter: brightness(1.16);
        transform: scale(1.04);
    }
}

@keyframes promise-report-v7-listen-orb {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-0.22cqw) scale(1.025);
    }
}

@keyframes promise-report-v7-final-stamp {
    0% {
        filter: brightness(1);
        transform: translate(0, 0) scale(1) rotate(0);
    }
    38% {
        filter: brightness(1.18);
        transform: translate(11.2%, -29.3%) scale(0.92) rotate(-4deg);
    }
    55% {
        filter: brightness(1.32);
        transform: translate(11.2%, -27.4%) scale(0.98) rotate(0);
    }
    68% {
        filter: brightness(1.2);
        transform: translate(11.2%, -29.1%) scale(0.9) rotate(0);
    }
    100% {
        filter: brightness(1);
        transform: translate(0, 0) scale(1) rotate(0);
    }
}

@keyframes promise-report-v7-impact {
    0% {
        opacity: 0.96;
        transform: scale(0.35);
    }
    100% {
        opacity: 0;
        transform: scale(2.2);
    }
}

@keyframes promise-report-v7-reward-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, 0.9cqw) scale(0.58);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -0.3cqw) scale(1.12);
    }
    72% {
        opacity: 1;
        transform: translate(-50%, -3.2cqw) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -4.45cqw) scale(0.84);
    }
}

@keyframes promise-report-v7-scroll-roll {
    0% {
        opacity: 1;
        transform: scaleX(1) scaleY(1);
        filter: drop-shadow(0 0.52cqw 0.55cqw rgba(91, 52, 16, 0.26));
    }
    58% {
        opacity: 1;
        transform: scaleX(0.28) scaleY(1.04);
        filter:
            drop-shadow(0 0.4cqw 0.44cqw rgba(91, 52, 16, 0.26))
            brightness(1.04);
    }
    100% {
        opacity: 0;
        transform: scaleX(0.08) scaleY(1.04);
        filter:
            drop-shadow(0 0.32cqw 0.36cqw rgba(91, 52, 16, 0.18))
            brightness(1.08);
    }
}

@keyframes promise-report-v7-closed-scroll-settle {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.72);
    }
    62% {
        opacity: 1;
        transform: translateX(-50%) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .promise-report-v7__choice-rig,
    .promise-report-v7__aux-layer,
    .promise-report-v7__seal-views,
    .promise-report-v7__seal-beam,
    .promise-report-v7__seal-floor-glow,
    .promise-report-v7__seal-rings i,
    .promise-report-v7__seal-particles i,
    .promise-report-v7__choice-hit.is-selected,
    .promise-report-v7__listen-orb,
    .promise-report-v7__seal-views::before,
    .promise-report-v7__seal-views::after,
    .promise-report-v7__seal-views img.is-entering,
    .promise-report-v7__seal-views img.is-leaving,
    .promise-report-v7__seal-views img.is-reaffirming,
    .promise-report-v7.is-stamping .promise-report-v7__seal-views,
    .promise-report-v7.is-listening .promise-report-v7__story-actions button:first-child,
    .promise-report-v7__reward-burst,
    .promise-report-v7.is-scroll-closing .promise-report-v7__original-letter-art,
    .promise-report-v7.is-scroll-closed .promise-report-v7__closed-letter {
        animation: none !important;
    }

    .promise-report-v7__background,
    .promise-report-ceremony.promise-report-v7::before,
    .promise-report-v7__result-layer img,
    .promise-report-v7__original-letter,
    .promise-report-v7__truth-stamp,
    .promise-report-v7__closed-letter,
    .promise-report-v7__reward-bursts,
    .promise-report-v7__reward-burst {
        transition-duration: 1ms !important;
    }
}