/* 本页专用布局；公共配色、组件与动效开关沿用 base.css / motion.js。 */
.inner-page .daily-svg-defs { position:absolute; pointer-events:none }
.inner-page .icon-ink,.inner-page .small-icon { fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round }
.inner-page main { position:relative; isolation:isolate }
.inner-page main::before { content:""; position:absolute; inset:360px 0 170px; z-index:-1; pointer-events:none; background:url('../img/art/daily/landscape-v2.webp') right top / auto 900px repeat-y; opacity:.21; mask-image:linear-gradient(90deg,#000,transparent 28%,transparent 74%,#000),repeating-linear-gradient(to bottom,transparent,#000 130px,#000 760px,transparent 900px); mask-composite:intersect }
.inner-page .sec { padding:30px 0 }
.inner-page .sec-head { margin-bottom:24px }
.inner-page .sec-head h2 { font-size:clamp(28px,3.1vw,40px) }
.inner-page .sec-head h2::before,.inner-page .sec-head h2::after { width:clamp(20px,6vw,85px) }
.inner-page main .card { border-radius:2px; box-shadow:0 3px 16px rgba(70,50,20,.045) }
.page-hero { position:relative; isolation:isolate; overflow:hidden; border-bottom:1px solid var(--gold-line) }
.page-scene { position:absolute; inset:-12px 0 -34px; z-index:-3; will-change:transform }
.page-scene>img,.page-water,.page-water img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:65% center }
.page-water { pointer-events:none; filter:url(#lj-water); mask-image:radial-gradient(24% 15% at 55% 78%,#000 25%,transparent) }
.page-water img { animation:page-river 3.8s ease-in-out -.6s infinite alternate; will-change:transform }
@keyframes page-river { from { transform:translate3d(-6px,-1px,0) scale(1.015) } to { transform:translate3d(6px,2px,0) scale(1.015) } }
.page-mist { position:absolute; inset:25% -15% 0; pointer-events:none; z-index:-2; background:radial-gradient(ellipse at 30% 45%,rgba(251,247,238,.7),transparent 65%); animation:page-mist 26s ease-in-out -10s infinite alternate }
@keyframes page-mist { from { transform:translateX(-3%); opacity:.25 } to { transform:translateX(4%); opacity:.6 } }
.page-hero__inner { position:relative; min-height:380px; padding-top:50px; padding-bottom:48px }
.page-hero h1 { font:400 clamp(70px,7.5vw,100px)/1.15 var(--brush); letter-spacing:.025em; max-width:800px }
.page-slogan { font-size:29px; margin:14px 0 8px; line-height:1.45 }
.page-intro { color:var(--ink-2); font-size:19px; margin-bottom:22px; max-width:34em }
.breadcrumbs { display:flex; gap:12px; color:var(--ink-3); font-size:16px; margin-bottom:14px }
.breadcrumbs a { text-decoration:none }
.paper-note { display:inline-block; padding:3px 13px; border:1px solid var(--gold-line); border-radius:3px; background:rgba(239,230,212,.75); font-size:16px; color:var(--gold) }
.three-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px }
.info-card { padding:24px; position:relative; isolation:isolate; overflow:hidden; display:flex; gap:18px; min-height:158px }
.info-card h3 { font-size:24px; margin-bottom:9px }
.info-card p { font-size:16px; color:var(--ink-2); max-width:20em }
.info-card>img { position:absolute; right:0; bottom:0; width:75%; height:100%; object-fit:cover; object-position:right center; opacity:.25; z-index:-1; mask-image:linear-gradient(135deg,transparent 20%,#000) }
.faq-list { max-width:1000px; margin:auto; display:grid; gap:12px }
.faq-item { padding:0 20px; background:rgba(251,247,238,.94) }
.faq-item::before,.faq-item::after { display:none }
.faq-item summary { display:flex; align-items:center; gap:12px; position:relative; padding:15px 25px 15px 0; font-size:18px; font-weight:700; list-style:none; cursor:pointer }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::before { content:"问"; display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; color:var(--paper-card); background:var(--gold); font-size:15px }
.faq-item summary::after { content:""; position:absolute; right:2px; top:24px; width:8px; height:8px; border-right:1px solid var(--gold); border-bottom:1px solid var(--gold); transform:rotate(45deg); transition:transform .2s }
.faq-item[open] summary::after { transform:rotate(225deg) }
.faq-item p { padding:0 0 18px 38px; font-size:16px; color:var(--ink-2) }
.faq-item[open] p { animation:page-faq .25s ease }
@keyframes page-faq { from { opacity:0; transform:translateY(-3px) } to { opacity:1; transform:none } }
.notice-strip { display:flex; align-items:center; gap:15px; padding:17px 24px; background:rgba(239,230,212,.8); color:var(--ink-2); font-size:16px }
.notice-strip .small-icon { width:25px; height:25px; flex:none; color:var(--gold) }
.inner-page .end-band { padding:35px 16px 38px }
.page-end-art { position:absolute; inset:-35px 0; width:100%; height:calc(100% + 70px); object-fit:cover; object-position:center 72%; z-index:-2; mask-image:linear-gradient(transparent,#000 30%) }
.inner-page .end-band::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse,rgba(251,247,238,.97),rgba(251,247,238,.6) 40%,transparent 72%) }
.inner-page .end-band h2 { font-size:39px }
.inner-page .end-band p { color:var(--ink-2); margin-bottom:16px }
.page-cta { text-align:center; margin-top:22px }
@media (max-width:1000px) { .info-card { padding:20px 18px; gap:12px } .info-card h3 { font-size:21px } .info-card .icon-ink { width:32px } }
@media (max-width:767px) {
 .page-hero__inner { min-height:455px; padding-top:172px; padding-bottom:40px }
 .page-hero__inner::before { content:""; position:absolute; inset:130px -20px 0; z-index:-1; background:radial-gradient(ellipse,rgba(251,247,238,.97),rgba(251,247,238,.8) 43%,transparent 76%) }
 .page-hero h1 { font-size:clamp(50px,12.5vw,76px) }
 .page-slogan { font-size:25px; margin-top:12px }
 .page-intro { font-size:17px; max-width:25em }
 .page-scene>img,.page-water img { object-position:72% center }
 .page-water { mask-image:radial-gradient(43% 13% at 38% 73%,#000 30%,transparent) }
 .inner-page .sec { padding:25px 0 }
 .inner-page .sec-head { margin-bottom:20px }
 .inner-page .sec-head h2 { font-size:27px; letter-spacing:0; gap:8px }
 .inner-page .sec-head h2::before,.inner-page .sec-head h2::after { width:17px }
 .inner-page .sec-head p { max-width:22em; margin-left:auto; margin-right:auto }
 .three-cards { grid-template-columns:minmax(0,1fr); gap:16px }
 .info-card { min-height:150px; padding:22px; gap:17px }
 .info-card>img { width:55% }
 .faq-item { padding:0 14px }
 .faq-item summary { font-size:17px; align-items:flex-start; line-height:1.7; gap:10px }
 .faq-item p { padding-left:0 }
 .notice-strip { padding:16px; align-items:flex-start }
 .inner-page .end-band h2 { font-size:31px }
 .page-end-art { opacity:.65; object-position:65% center }
 .inner-page .site-footer { padding-bottom:78px }
}
@media (max-width:360px) { .inner-page .sec-head h2 { font-size:24px; gap:5px } .page-slogan { font-size:23px } }
html.motion-off .inner-page *,html.no-js .inner-page * { transition:none }
html.motion-off .inner-page .faq-item[open] p { animation:none; opacity:1; transform:none }
html.no-js .page-water,html.no-js .inner-page .motion-toggle { display:none }
html.no-js .page-mist { animation:none }
@media (prefers-reduced-motion:reduce) { .inner-page * { transition:none } .inner-page .faq-item[open] p { animation:none } }

/* 榜单承接 rank.js 输出的 .p1 / .avatar / .metric 等结构。 */
.board-sec { background:rgba(251,247,238,.38) }
.tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; max-width:780px; margin:0 auto 12px }
.tab { min-height:46px; border:1px solid var(--gold-line); border-radius:3px; background:var(--paper-card); color:var(--ink-2); font:600 17px/1.3 var(--serif); cursor:pointer; transition:background-color .2s,color .2s }
.tab.is-active { color:var(--paper-card); background:var(--cinnabar); border-color:var(--cinnabar) }
.tab:hover:not(.is-active) { color:var(--cinnabar) }
.board-shell { min-height:330px; max-width:960px; margin:auto; padding:12px 20px 20px; background:radial-gradient(ellipse,rgba(251,247,238,.92),transparent 75%) }
.board-caption { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 18px; text-align:center }
.board-caption h3 { font-size:22px }
#board-updated,.board-rule { font-size:16px; color:var(--ink-3) }
.board-rule { text-align:center; margin:8px 0 36px }
.board-state { text-align:center; max-width:34em; margin:50px auto 12px; padding:35px 22px; border:1px solid var(--gold-line); background:rgba(251,247,238,.9); color:var(--ink-2); font-size:18px }
.board-state:empty { display:none }
.podium { list-style:none; margin:0 auto; padding:0; max-width:830px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:end }
.podium:empty { display:none }
.podium li { text-align:center; padding:34px 16px 20px; min-width:0; background:var(--paper-card) url('../img/art/daily/landscape-v2.webp') right bottom / auto 100% no-repeat; background-blend-mode:soft-light }
.podium .p1 { order:2; padding-top:52px }
.podium .p2 { order:1 }
.podium .p3 { order:3 }
.medal { position:absolute; top:-21px; left:50%; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--paper-card); font-size:26px; font-weight:700; box-shadow:inset 0 0 0 3px rgba(255,255,255,.4),0 3px 10px rgba(70,50,20,.15) }
.p1 .medal { width:54px; height:54px; top:-27px; background:radial-gradient(circle at 35% 25%,#eccc82,#a87a32) }
.p2 .medal { background:radial-gradient(circle at 35% 25%,#dfe3e5,#7b858c) }
.p3 .medal { background:radial-gradient(circle at 35% 25%,#e8b78c,#9d5f3e) }
.avatar { display:grid; place-items:center; border-radius:50%; overflow:hidden; background:var(--dai-deep); color:var(--paper-card); flex:none }
.avatar img { width:100%; height:100%; object-fit:cover }
.podium .avatar { width:76px; height:76px; margin:0 auto 13px; font-size:29px; box-shadow:0 0 0 3px var(--paper-card),0 0 0 4px var(--gold-line) }
.podium .p1 .avatar { width:88px; height:88px }
.podium .name { font-size:20px; font-weight:700; overflow-wrap:anywhere }
.podium .metric { color:var(--cinnabar); font-size:26px; font-weight:700; margin-top:7px }
.podium .sub { color:var(--ink-3); font-size:16px }
.ranktable { margin:18px auto 0; max-width:880px; overflow:hidden }
.ranktable:has(ol:empty) { display:none }
.ranktable ol { list-style:none; margin:0; padding:5px 0 }
.ranktable li { display:grid; grid-template-columns:42px 42px minmax(0,1fr) auto; align-items:center; gap:16px; padding:13px 22px }
.ranktable li:nth-child(odd) { background:var(--paper-2) }
.ranktable .no { text-align:center; color:var(--gold); font-size:19px }
.ranktable .avatar { width:40px; height:40px }
.ranktable .name { font-weight:700; overflow-wrap:anywhere }
.ranktable .sub { font-size:16px; color:var(--ink-3) }
.ranktable .metric { text-align:right; font-size:19px; white-space:nowrap }
.ranktable .metric small { display:block; font-size:16px; color:var(--ink-3) }
.demo-badge { font-size:16px; color:var(--gold); margin-left:8px }
.rank-page .honor-sec { padding-top:0 }
.honor { display:grid; grid-template-columns:1fr 1.05fr; gap:24px; padding:28px }
.honor-copy h2 { font-size:36px; margin-bottom:13px }
.honor-copy p { font-size:18px; max-width:24em; margin-bottom:20px }
.honor-sample { border:1px solid var(--gold-line); padding:16px 20px; background:var(--paper) }
.honor-preview { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; margin-top:13px }
.honor-preview h3 { font-size:18px }
.honor-preview strong { display:block; font-size:23px }
.honor-preview p { font-size:16px; color:var(--ink-3); margin-top:8px }
.certificate { border:4px double var(--gold-line); text-align:center; padding:16px 8px; background:var(--paper-card) }
.certificate .icon-ink { margin:auto; width:32px; height:32px }
.certificate h3 { font-size:28px; margin-top:6px; letter-spacing:.12em }
.honor .notice-strip { grid-column:1/-1; margin:0 }
@media(max-width:767px) {
 .tabs { gap:5px }
 .tab { font-size:16px }
 .board-shell { padding:12px 0 10px; min-height:280px }
 .board-state { font-size:17px; margin-top:30px; padding:28px 16px }
 .podium { gap:8px }
 .podium li { padding:28px 6px 15px }
 .podium .p1 { padding-top:44px }
 .podium .avatar { width:52px; height:52px; font-size:24px }
 .podium .p1 .avatar { width:62px; height:62px }
 .podium .name { font-size:17px }
 .podium .metric { font-size:22px }
 .ranktable li { grid-template-columns:28px 32px minmax(0,1fr) auto; gap:8px; padding:12px 10px }
 .ranktable .avatar { width:32px; height:32px }
 .ranktable .metric { font-size:17px }
 .honor { grid-template-columns:minmax(0,1fr); padding:22px 18px; gap:20px }
 .honor-copy h2 { font-size:31px }
 .honor-copy p { font-size:17px }
 .honor-sample { padding:14px }
 .honor-preview { gap:12px }
 .certificate h3 { font-size:24px }
}