@import url("style.mobile-portrait-20260911.css");

/* 肖像只展示头部到肩部。 */
.portrait{width:224px;padding:7px}
.portrait>img{width:100%;height:250px;object-fit:cover;object-position:center 8%}
.portrait-caption,footer{display:none}

.offering-name-label{display:block;font-size:1.12rem;color:#e7e3d4;margin:0 0 9px}
#offering-name{margin-bottom:18px}
.offering-card{position:relative;isolation:isolate}
.ritual-animation{position:absolute;inset:8px;z-index:8;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;opacity:0;transform:scale(.72) translateY(18px);border:2px solid #ecd196;border-radius:12px;background:#101c1cf2;box-shadow:0 14px 36px #000c,0 0 35px #d8bd7566}
.ritual-animation::before{position:relative;z-index:3;padding:12px 16px;border-radius:9px;background:#142221e6;color:#ffe5ad;font-family:"Songti SC","SimSun",serif;font-size:1.45rem;font-weight:600;letter-spacing:2px;text-align:center;white-space:nowrap;box-shadow:0 6px 24px #0008}
.animation-incense::before{content:"清香已点起"}.animation-candle::before{content:"烛光已点亮"}.animation-flower::before{content:"鲜花已献上"}
.is-animating .ritual-animation{animation:ritual-popup 3.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes ritual-popup{0%{opacity:0;transform:scale(.72) translateY(18px)}12%{opacity:1;transform:scale(1.04) translateY(0)}20%,72%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(.9) translateY(-12px)}}
.animation-incense{background:linear-gradient(90deg,#101b1ded 0 24%,#4b554dd9 48%,#101b1ded 80%)}
.animation-incense i{position:absolute;left:34%;bottom:28%;width:16px;height:70px;border:3px solid #f4ead0;border-color:#f4ead0 transparent transparent;border-radius:50%;filter:blur(1px);opacity:0}
.is-animating .animation-incense i{animation:smoke-rise 2.4s ease-out forwards}
.animation-incense i:nth-child(2){left:41%;animation-delay:.25s}.animation-incense i:nth-child(3){left:28%;animation-delay:.5s}
@keyframes smoke-rise{0%{transform:translateY(28px) scale(.5);opacity:0}25%{opacity:.85}100%{transform:translate(18px,-150px) scale(1.8);opacity:0}}
.animation-candle{background:radial-gradient(circle at 50% 46%,#fff2b8e8 0 8%,#f4b634a8 18%,#412d17ed 58%,#101b1df2 100%)}
.is-animating .animation-candle::after{content:"";position:absolute;left:50%;top:20%;width:64px;height:92px;transform:translateX(-50%);border-radius:50% 50% 45% 45%;background:radial-gradient(ellipse at 50% 70%,#fff 0 15%,#ffe073 32%,#ee861e 58%,transparent 62%);filter:drop-shadow(0 0 18px #ffc34e);animation:candle-glow .42s ease-in-out 7 alternate}
@keyframes candle-glow{from{transform:translateX(-50%) scale(.88);filter:drop-shadow(0 0 12px #ffc34e)}to{transform:translateX(-50%) scale(1.08);filter:drop-shadow(0 0 32px #ffcf64)}}
.animation-flower{background:linear-gradient(#14201eed,#34413bf2)}
.animation-flower i{position:absolute;top:-30px;width:24px;height:36px;border-radius:75% 25% 70% 30%;background:#fffdfa;box-shadow:0 0 12px #fff}
.is-animating .animation-flower i{animation:petal-fall 2.7s ease-in forwards}
.animation-flower i:nth-child(1){left:18%;transform:rotate(30deg)}.animation-flower i:nth-child(2){left:48%;animation-delay:.25s}.animation-flower i:nth-child(3){left:76%;animation-delay:.5s}
@keyframes petal-fall{0%{transform:translateY(-20px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(-35px,280px) rotate(290deg);opacity:0}}
.recent-offerings{margin:25px 0 8px;padding:18px;background:#1b2a29;border:1px solid var(--line);border-radius:12px}
.recent-offerings h3{font-size:1.22rem;color:#ead2a5;margin:0 0 8px}
.offering-record{display:grid;grid-template-columns:1fr auto;gap:0 10px;margin:0;padding:10px 0;border-bottom:1px solid var(--line);font-size:1rem;line-height:1.7}
.offering-record:last-child{border-bottom:0}.offering-record strong{color:#f0d4a0}.offering-record span{grid-column:1}.offering-record time{grid-column:2;grid-row:1/3;align-self:center;color:#aebcaf;font-size:.82rem}
.message-manage{min-height:44px;margin-top:12px;padding:7px 14px;border:1px solid #88998b;border-radius:8px;background:transparent;color:#d9e2d7;font-size:.95rem}
.edit-code{display:block;margin:20px auto;padding:8px 20px;width:max-content;border:1px solid #e6ca91;border-radius:10px;color:#ffe1a5;font-size:2.3rem;letter-spacing:8px;line-height:1.4}
.code-warning{color:#f1c8a8;text-align:center}.dialog-close{position:absolute;right:8px;top:8px;width:46px;height:46px;border:1px solid #89998a;border-radius:50%;background:#20342e;color:#fff;font-size:1.8rem}
#manage-form{margin-top:10px}#manage-form textarea{min-height:150px}#manage-status{color:#ffc6b4;min-height:30px}
.manage-actions{display:grid;gap:12px}.danger{min-height:56px;border:1px solid #d69c8c;border-radius:9px;background:transparent;color:#ffc3b1;font-size:1.12rem}
@media(prefers-reduced-motion:reduce){.ritual-animation{display:none}}

/* 第三版：全屏沉浸式祭奠动画。 */
body.ritual-playing{overflow:hidden}
.ritual-animation{position:fixed;inset:0;z-index:80;display:block;overflow:hidden;pointer-events:none;opacity:0;transform:none;border:0;border-radius:0;background:radial-gradient(circle at 50% 44%,#33433ee8 0,#121d1df5 48%,#070d0efa 100%);box-shadow:none}
.ritual-animation::before{position:absolute;z-index:6;left:50%;top:64%;transform:translate(-50%,30px) scale(.75);min-width:240px;padding:13px 24px;border:1px solid #eed49999;border-radius:999px;background:#14201fed;color:#ffe4a9;font:600 1.5rem/1.5 "Songti SC","SimSun",serif;letter-spacing:3px;text-align:center;white-space:nowrap;box-shadow:0 12px 40px #000b,0 0 28px #ddc27f44;opacity:0}
.is-animating .ritual-animation{pointer-events:auto;animation:scene-flow 4.1s cubic-bezier(.18,.76,.2,1) both}
.is-animating .ritual-animation::before{animation:title-rise 4.1s cubic-bezier(.18,.76,.2,1) both}
@keyframes scene-flow{0%{opacity:0;clip-path:circle(0 at 50% 50%)}12%{opacity:1;clip-path:circle(75% at 50% 50%)}78%{opacity:1;clip-path:circle(75% at 50% 50%)}100%{opacity:0;clip-path:circle(0 at 50% 44%)}}
@keyframes title-rise{0%,15%{opacity:0;transform:translate(-50%,35px) scale(.72)}28%{opacity:1;transform:translate(-50%,0) scale(1.06)}36%,76%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-28px) scale(.92)}}

.animation-incense{background:radial-gradient(ellipse at 50% 65%,#6e5039aa 0,#202c2af2 38%,#080f10fb 78%)}
.animation-incense::after{content:"";position:absolute;z-index:2;left:50%;bottom:29%;width:9px;height:190px;border-radius:6px;background:linear-gradient(#ef5535 0 3%,#c89259 4% 88%,#51301e 89%);box-shadow:0 -7px 18px #ff8d48,0 8px 25px #000;transform-origin:50% 100%;opacity:0}
.is-animating .animation-incense::after{animation:incense-enter 4.1s cubic-bezier(.16,.82,.2,1) both}
.animation-incense i{position:absolute;z-index:3;left:50%;bottom:66%;width:70px;height:110px;border:5px solid #eaf1eb;border-color:#eaf1eb transparent transparent;border-radius:50%;filter:blur(3px);opacity:0}
.is-animating .animation-incense i{animation:smoke-dance 2.7s ease-out infinite}
.is-animating .animation-incense i:nth-child(2){animation-delay:.45s}.is-animating .animation-incense i:nth-child(3){animation-delay:.9s}
@keyframes incense-enter{0%,10%{opacity:0;transform:translate(-50%,180px) rotate(8deg)}26%,80%{opacity:1;transform:translate(-50%,0) rotate(0)}100%{opacity:0;transform:translate(-50%,-25px)}}
@keyframes smoke-dance{0%{opacity:0;transform:translate(-50%,25px) scale(.45) rotate(-16deg)}20%{opacity:.78}55%{transform:translate(-25%,-45px) scale(1.05) rotate(15deg);opacity:.48}100%{transform:translate(-80%,-135px) scale(1.8) rotate(-12deg);opacity:0}}

.animation-candle{background:radial-gradient(circle at 50% 48%,#f9c85e9c 0,#5d3d22d9 25%,#1a2424f5 55%,#080e0ffb 100%)}
.animation-candle::after{content:"";position:absolute;z-index:3;left:50%;top:23%;width:92px;height:138px;border-radius:58% 42% 55% 45%;background:radial-gradient(ellipse at 50% 72%,#fff 0 12%,#fff3ad 24%,#ffc74f 44%,#f47c1d 62%,transparent 64%);filter:drop-shadow(0 0 22px #ffc648);opacity:0}
.is-animating .animation-candle::after{animation:flame-leap 4.1s ease-in-out both}
.animation-candle i{position:absolute;z-index:2;left:50%;top:40%;width:80px;height:80px;border:2px solid #ffdc7baa;border-radius:50%;opacity:0}
.is-animating .animation-candle i{animation:light-ring 1.65s ease-out infinite}.is-animating .animation-candle i:nth-child(2){animation-delay:.48s}.is-animating .animation-candle i:nth-child(3){animation-delay:.96s}
@keyframes flame-leap{0%,12%{opacity:0;transform:translateX(-50%) scale(.2) translateY(80px)}27%{opacity:1;transform:translateX(-50%) scale(1.12) rotate(-4deg)}38%{transform:translateX(-50%) scale(.94) rotate(3deg)}48%{transform:translateX(-50%) scale(1.06) rotate(-2deg)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(.75) translateY(-30px)}}
@keyframes light-ring{0%{opacity:.8;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(4.2)}}

.animation-flower{background:radial-gradient(circle at 50% 48%,#778674dd 0,#2c3936f2 42%,#091011fa 100%)}
.animation-flower::after{content:"✿";position:absolute;z-index:3;left:50%;top:38%;color:#fffdf5;font:8.5rem/1 serif;text-shadow:0 0 16px #fff,0 0 44px #d9e4cb;opacity:0}
.is-animating .animation-flower::after{animation:flower-bloom 4.1s cubic-bezier(.16,.86,.25,1) both}
.animation-flower i{position:absolute;z-index:4;top:-50px;width:31px;height:46px;border-radius:80% 20% 75% 25%;background:linear-gradient(145deg,#fff,#ddd9c9);box-shadow:0 0 14px #fff;opacity:0}
.is-animating .animation-flower i{animation:petal-swirl 3.25s cubic-bezier(.35,.02,.55,1) infinite}.animation-flower i:nth-child(1){left:18%}.animation-flower i:nth-child(2){left:50%;animation-delay:.35s}.animation-flower i:nth-child(3){left:80%;animation-delay:.7s}
@keyframes flower-bloom{0%,12%{opacity:0;transform:translate(-50%,-50%) scale(.05) rotate(-100deg)}32%{opacity:1;transform:translate(-50%,-50%) scale(1.18) rotate(10deg)}43%,78%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-62%) scale(.7) rotate(24deg)}}
@keyframes petal-swirl{0%{opacity:0;transform:translate(0,-30px) rotate(0) scale(.6)}15%{opacity:1}50%{transform:translate(-80px,45vh) rotate(320deg) scale(1)}100%{opacity:0;transform:translate(45px,105vh) rotate(720deg) scale(.65)}}
@media(prefers-reduced-motion:reduce){body.ritual-playing{overflow:auto}.is-animating .ritual-animation{display:flex;align-items:center;justify-content:center;animation:reduced-fade 2s ease both}.is-animating .ritual-animation::before{position:static;transform:none;opacity:1;animation:none}.ritual-animation::after,.ritual-animation i{display:none}@keyframes reduced-fade{0%,100%{opacity:0}15%,85%{opacity:1}}}

.pagination{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:16px}
.pagination button{min-height:48px;padding:8px 10px;border:1px solid #a0ae97;border-radius:9px;background:#213130;color:#f0eee4;font-size:1rem}
.pagination button:active:not(:disabled){background:#314641;transform:scale(.97)}
.pagination button:disabled{opacity:.35;cursor:default}
.pagination span{min-width:92px;color:#d9c89e;font-size:.92rem;text-align:center;font-variant-numeric:tabular-nums}