/* A dedicated illustrated receipt; the collect action still uses the existing
   side-story transaction. Text remains selectable HTML over the paper frame. */
.cl-collection-stage > .backdrop { opacity:.85; filter:brightness(.63) saturate(.8) blur(1px); }
.cl-collection-stage > .cl-scene-shade { background:linear-gradient(#070b0870,#0c0d0a2b 30%,#070b08a1); }
.cl-collection-stage .story-topbar { padding-right:55px; }
.cl-collection-stage .chapter-copy strong { font:20px/1.4 'STKaiti','Kaiti SC',serif; }
.cl-collection-veil { position:absolute; z-index:5; inset:94px 12px 28px; display:grid; place-items:center; }
.cl-collection-dialog { position:relative; isolation:isolate; display:flex; flex-direction:column; width:100%; max-width:436px; max-height:calc(100dvh - 122px); padding:28px 30px 26px; color:#4b341b; text-align:center; color-scheme:light; filter:drop-shadow(0 16px 27px #0008); }
.cl-collection-dialog::before { content:''; position:absolute; z-index:-1; inset:0; border:solid transparent; border-width:45px 33px 52px 31px; border-image:url('./cailou-scroll-assets/scroll-panel.webp') 180 130 210 115 fill / 45px 33px 52px 31px / 0 stretch; pointer-events:none; }
.cl-collection-reading { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#a5895655 transparent; padding:2px 3px 0; }
.cl-collection-kicker { color:#997443; font:11px/1.8 'Songti SC',serif; letter-spacing:.2em; margin:0 0 8px; }
.cl-collection-picture { margin:0 -3px; }
.cl-collection-picture img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; mix-blend-mode:multiply; mask-image:linear-gradient(transparent,#000 5%,#000 86%,transparent); }
.cl-collection-rule { display:flex; align-items:center; justify-content:center; gap:12px; width:88%; margin:3px auto 12px; font-size:12px; color:#b49255; }
.cl-collection-rule::before,.cl-collection-rule::after { content:''; height:1px; flex:1; background:linear-gradient(90deg,transparent,#b4925580); }
.cl-collection-rule::after { transform:scaleX(-1); }
.cl-collection-dialog h1 { margin:0 0 15px; color:#4b3016; font:30px/1.5 'STKaiti','Kaiti SC',serif; font-weight:500; letter-spacing:.09em; }
.cl-collection-dialog #cl-collection-description { margin:0 auto; max-width:19em; color:#755936; font:16px/1.85 'STKaiti','Kaiti SC',serif; text-wrap:pretty; }
.cl-collection-footer { flex-shrink:0; padding:20px 3px 0; }
.cl-collection-dialog .cl-gold-button { min-height:51px; width:100%; padding:13px 25px 13px 31px; background:transparent url('./cailou-scroll-assets/button-gold.webp') center / 100% 100% no-repeat; box-shadow:none; border:0; border-radius:0; color:#513615; font:18px/1.5 'STKaiti','Kaiti SC',serif; letter-spacing:.04em; }
.cl-collection-dialog .cl-gold-button:hover { filter:brightness(1.07); }
.cl-collection-dialog .cl-gold-button:active { transform:translateY(1px); }
.cl-collection-footer > p { color:#a18760; font:10px/1.8 'Songti SC',serif; letter-spacing:.24em; margin:12px 0 0; }
.cl-collection-dialog :focus-visible { outline:2px solid #906634; outline-offset:3px; }
@media(min-width:430px) { .cl-collection-dialog { padding:34px 34px 30px; } .cl-collection-dialog h1 { font-size:35px; } .cl-collection-dialog #cl-collection-description { font-size:18px; } .cl-collection-kicker { font-size:12px; } .cl-collection-footer { padding-top:24px; } .cl-collection-dialog .cl-gold-button { font-size:20px; min-height:57px; } }
@media(max-width:360px) { .cl-collection-veil { inset:84px 6px 18px; } .cl-collection-dialog { padding:23px 26px 22px; } .cl-collection-dialog h1 { font-size:26px; } .cl-collection-dialog #cl-collection-description { font-size:15px; } .cl-collection-stage .chapter-copy strong { font-size:17px; } .cl-collection-footer { padding-top:15px; } .cl-collection-dialog .cl-gold-button { font-size:17px; } }
@media(max-height:650px) { .cl-collection-veil { top:83px; bottom:16px; } .cl-collection-dialog { padding-top:24px; padding-bottom:20px; } .cl-collection-picture img { max-height:27dvh; } .cl-collection-dialog h1 { margin-bottom:8px; } .cl-collection-rule { margin-bottom:8px; } .cl-collection-kicker { margin-bottom:4px; } .cl-collection-footer { padding-top:13px; } .cl-collection-footer > p { margin-top:6px; } }
@media(prefers-reduced-motion:no-preference) { .cl-collection-dialog { animation:cl-collection-reveal .55s ease-out both; } @keyframes cl-collection-reveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } }
@media(max-height:650px) { .cl-collection-dialog { max-height:calc(100dvh - 99px); } }
@media(max-height:450px) and (min-width:600px) {
 .cl-collection-dialog { padding:22px 28px 21px; }
 .cl-collection-reading { display:grid; grid-template-columns:1fr 1.12fr; column-gap:13px; align-items:center; }
 .cl-collection-kicker { grid-column:1 / -1; margin-bottom:9px; font-size:10px; }
 .cl-collection-picture { grid-column:1; grid-row:2 / 4; }
 .cl-collection-picture img { max-height:128px; }
 .cl-collection-rule { display:none; }
 .cl-collection-dialog h1 { grid-column:2; grid-row:2; font-size:24px; letter-spacing:.03em; line-height:1.3; margin-bottom:8px; }
 .cl-collection-dialog #cl-collection-description { grid-column:2; grid-row:3; font-size:14px; line-height:1.7; text-align:left; }
 .cl-collection-footer { padding-top:13px; }
 .cl-collection-dialog .cl-gold-button { min-height:45px; padding-block:10px; font-size:17px; }
 .cl-collection-footer > p { display:none; }
}