/* 红莲宫活动：统一样式文件。按分区维护，顺序保留原页面的样式优先级。 */

/* ==================== 01 基础布局与响应式 ==================== */
.hero .hero-scene { background-image: none; opacity: 1; }
.hero .eyebrow::after { content: ""; width: 6.25px; height: 6.25px; background: rgb(184, 90, 67); transform: rotate(45deg); }
.poster-preview .invite-qr { width: 137.5px; height: 137.5px; max-height: none; object-fit: contain; background: rgb(255, 255, 255); padding: 5px; margin: 5px auto 7.5px; display: block; }
.poster-preview > small { font-size: 12.5px; color: rgb(141, 157, 142); display: block; }
.preview-inline { display: block; margin: 22.5px auto 0px; font-size: 13.75px; border-bottom: 1.25px dashed rgba(138, 119, 80, 0.4); }
.qr-placeholder { width: 187.5px; height: 187.5px; margin: 25px auto; border: 1.25px dashed rgb(164, 147, 102); display: flex; align-items: center; justify-content: center; flex-direction: column; color: rgb(208, 195, 159); background: rgb(29, 48, 41); font-size: 18.75px; }
.qr-placeholder small { font-size: 15px; color: rgb(141, 159, 142); margin-top: 8.75px; }
:root { --bg: #0b191a; --panel: #122324; --panel2: #182b2b; --gold: #c9ae77; --gold-light: #f0d8a2; --gold-dim: #8c774f; --line: #c5a56733; --text: #ebe9dc; --muted: #9faea6; --red: #a34839; --green: #99b99d; --serif: "STKaiti","KaiTi","Noto Serif SC","Songti SC","SimSun",serif; --sans: "Microsoft YaHei","PingFang SC",system-ui,sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 115px; }
body { margin: 0px; background: var(--bg); color: var(--text); font: 16px/1.7 var(--sans); }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 32.5px; height: 32.5px; fill: none; stroke: currentcolor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
button { border: 0px; background: none; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 6.25px; }
button:disabled { cursor: default; opacity: 0.52; }
p, h1, h2, h3 { margin: 0px; }
.svg-library { position: absolute; width: 0px; height: 0px; overflow: hidden; }
.container { width: min(1450px, 100% - 100px); margin: auto; }
.site-header { position: absolute; top: 0px; left: 0px; right: 0px; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 33.75px 60px; border-bottom: 1.25px solid rgba(191, 163, 107, 0.094); }
.brand { display: flex; align-items: center; gap: 12.5px; color: var(--gold-light); }
.brand-mark { width: 55px; height: 62.5px; stroke-width: 1; }
.brand > span { font: 700 28px/1 var(--serif); letter-spacing: 5px; }
.brand small { display: block; font: 10px / 1.7 Georgia, serif; letter-spacing: 3.75px; margin-top: 10px; }
.header-right { display: flex; align-items: center; gap: 31.25px; }
.preview-trigger { font-size: 15px; color: rgb(198, 198, 184); border: 1.25px solid rgba(195, 174, 121, 0.25); padding: 6.25px 12.5px; letter-spacing: 1.25px; }
.preview-trigger span { margin-left: 15px; }
.account { font-size: 17.5px; color: rgb(229, 213, 179); }
.hero { position: relative; min-height: 987.5px; isolation: isolate; overflow: hidden; background: rgb(15, 38, 38); }
.hero-scene { position: absolute; inset: 0px; z-index: -3; background: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/adventurers.png") 75% center / cover no-repeat; opacity: 0.55; }
.hero-scene.ready { background-image: none; opacity: 1; }
.hero-shade { position: absolute; inset: 0px; z-index: -2; background: linear-gradient(90deg, rgba(5, 19, 23, 0.87), rgba(7, 23, 23, 0.53) 44%, rgba(4, 18, 19, 0.08) 75%), linear-gradient(0deg, rgb(11, 25, 26) 0%, rgba(11, 25, 26, 0.02) 35%, rgba(9, 28, 33, 0.25)); }
.hero-content { padding-top: 231.25px; padding-bottom: 268.75px; }
.eyebrow { font-size: 15px; letter-spacing: 3.25px; color: var(--gold); display: flex; align-items: center; gap: 16.25px; }
.hero .eyebrow { font-size: 17.5px; letter-spacing: 5px; }
.eyebrow > span { width: 37.5px; height: 1.25px; background: var(--gold); }
h1 { font: 900 clamp(66px,7vw,104px)/1.13 var(--serif); letter-spacing: 10px; margin: 37.5px 0px 27.5px; text-shadow: rgba(9, 24, 25, 0.314) 0px 3.75px 31.25px; color: rgb(231, 208, 150); }
h1 em { font-style: normal; color: rgb(201, 173, 114); }
.hero-subtitle { font: 20px/1.8 var(--serif); letter-spacing: 3.75px; color: rgb(208, 212, 198); }
.hero-actions { display: flex; align-items: center; gap: 22.5px; margin-top: 37.5px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 25px; min-height: 67.5px; padding: 15px 40px; border: 1.25px solid rgb(210, 179, 124); font-weight: 600; font-size: 20px; letter-spacing: 1.25px; transition: filter 0.18s, transform 0.18s; background: rgb(21, 41, 41); }
.button.primary { background: linear-gradient(115deg, rgb(199, 168, 102), rgb(228, 201, 148) 55%, rgb(189, 156, 96)); color: rgb(36, 42, 34); box-shadow: rgb(23, 36, 28) 0px 0px 0px 3.75px inset, rgba(225, 196, 138, 0.5) 0px 0px 0px 5px inset; }
.button:not(:disabled):hover { filter: brightness(1.14); transform: translateY(-2.5px); }
.button svg { width: 27.5px; height: 27.5px; }
.button.small { min-height: 57.5px; padding: 11.25px 30px; font-size: 17.5px; }
.button.secondary { border-color: rgba(145, 125, 83, 0.31); color: var(--gold-light); background: rgb(24, 41, 40); }
.hero-share { width: 65px; height: 65px; border: 1.25px solid rgba(197, 170, 113, 0.4); border-radius: 50%; display: grid; place-items: center; color: var(--gold-light); }
.hero-date { margin-top: 26.25px; font-size: 15px; color: rgb(168, 179, 166); letter-spacing: 1.25px; }
.hero-date span { margin-left: 15px; color: rgb(213, 198, 162); font: 17.5px Georgia, serif; letter-spacing: 1.5px; }
.hero-seal { position: absolute; right: max(10vw, 75px); top: 375px; display: flex; flex-direction: column; align-items: center; border: 1.25px solid rgba(211, 174, 118, 0.333); padding: 32.5px 27.5px; color: rgb(225, 200, 142); background: rgba(23, 35, 30, 0.26); backdrop-filter: blur(5px); outline: rgba(211, 174, 118, 0.15) solid 1.25px; outline-offset: 10px; }
.hero-seal span { font: 18px var(--serif); letter-spacing: 6.25px; }
.hero-seal strong { font: 32px var(--serif); margin: 10px 0px; letter-spacing: 5px; }
.hero-seal small { font: 10px Georgia, serif; letter-spacing: 2.5px; }
.hero-bottom { position: absolute; bottom: 45px; left: 0px; right: 0px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); padding-top: 35px; }
.hero-bottom > div { display: flex; align-items: center; justify-content: center; gap: 22.5px; }
.hero-bottom > div + div { border-left: 1px solid var(--line); }
.hero-bottom svg { width: 47.5px; height: 47.5px; color: var(--gold); stroke-width: 1; }
.hero-bottom strong { display: block; color: rgb(218, 196, 150); font: 22px var(--serif); letter-spacing: 2.5px; }
.hero-bottom small { font-size: 15px; color: rgb(152, 167, 157); letter-spacing: 1.25px; }
.quick-nav { position: sticky; top: 0px; z-index: 9; background: rgba(12, 28, 29, 0.96); backdrop-filter: blur(22.5px); border-block: 1px solid var(--line); }
.quick-nav > .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.quick-nav a { padding: 26.25px 7.5px; text-align: center; color: rgb(167, 178, 167); position: relative; font-size: 18.75px; letter-spacing: 1.25px; }
.quick-nav span { color: rgb(119, 132, 119); font: 15px Georgia, serif; margin-right: 12.5px; }
.quick-nav a.active { color: rgb(232, 205, 148); background: linear-gradient(0deg, rgba(212, 177, 106, 0.063), transparent); }
.quick-nav a.active::after { content: ""; position: absolute; bottom: -1.25px; left: 20%; right: 20%; height: 2.5px; background: var(--gold); }
.activity-body { background: radial-gradient(at 0px 25%, rgba(46, 76, 56, 0.118), transparent 50%), radial-gradient(at 100% 65%, rgba(148, 113, 66, 0.07), transparent 40%); }
.section { padding-top: 125px; }
.section-heading { display: flex; align-items: center; gap: 30px; margin-bottom: 47.5px; }
.section-no { font: italic 72.5px Georgia, serif; color: rgba(100, 115, 101, 0.376); border-right: 1.25px solid rgba(183, 153, 98, 0.184); padding-right: 27.5px; }
.section-heading .eyebrow { font: 12.5px Georgia, serif; letter-spacing: 3.125px; margin-bottom: 12.5px; }
.section-heading h2 { font: 32px var(--serif); color: rgb(230, 209, 165); letter-spacing: 3.75px; }
.section-heading h2 i { font-style: normal; color: rgb(175, 191, 175); margin-left: 15px; }
.section-heading > p { margin-left: auto; color: rgb(157, 169, 158); font: 15px/1.8 var(--serif); letter-spacing: 2.5px; }
.section-heading > .text-button { margin-left: auto; }
.reward-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22.5px; margin-bottom: 35px; }
.reward-card { position: relative; min-height: 306.25px; padding: 30px; display: flex; align-items: center; flex-direction: column; text-align: center; background: linear-gradient(155deg, rgba(39, 56, 47, 0.4), rgb(17, 35, 34)); border: 1.25px solid rgba(189, 163, 112, 0.22); }
.reward-card::before { content: ""; position: absolute; inset: 6.25px; border: 1.25px solid rgba(189, 163, 112, 0.082); pointer-events: none; }
.reward-card.locked { background: linear-gradient(150deg, rgba(38, 50, 42, 0.133), rgb(16, 33, 32)); }
.reward-label { position: absolute; left: 18.75px; top: 18.75px; font-size: 13.75px; letter-spacing: 1.25px; color: rgb(172, 180, 168); }
.reward-medal { width: 85px; height: 85px; border: 1.25px solid rgba(193, 165, 109, 0.43); outline: rgba(193, 165, 109, 0.133) solid 1.25px; outline-offset: 6.25px; display: grid; place-items: center; transform: rotate(45deg); margin: 20px 0px 35px; color: rgb(216, 186, 121); background: radial-gradient(circle, rgba(189, 155, 68, 0.19), rgb(14, 34, 32)); }
.reward-medal svg { transform: rotate(-45deg); width: 47.5px; height: 47.5px; stroke-width: 1; }
.reward-card h3 { font: 22px var(--serif); letter-spacing: 2.5px; color: rgb(217, 195, 147); }
.reward-card p { margin-top: 11.25px; color: var(--muted); font-size: 16.25px; }
.reward-card .reward-status { margin-top: 25px; min-width: 181.25px; min-height: 45px; border: 1.25px solid rgba(182, 162, 109, 0.333); font-size: 16.25px; color: rgb(222, 200, 151); }
.reward-card .reward-status.claimable { background: rgb(181, 147, 83); color: rgb(20, 35, 30); }
.reward-card .reward-status.claimed { border-color: transparent; color: rgb(158, 175, 153); }
.framed { border: 1.25px solid rgba(169, 144, 91, 0.31); position: relative; background: linear-gradient(120deg, rgba(32, 51, 45, 0.467), rgba(16, 33, 35, 0.8)); }
.framed::before, .framed::after { content: ""; position: absolute; width: 21.25px; height: 21.25px; border-color: rgb(192, 161, 107); border-style: solid; pointer-events: none; }
.framed::before { top: -1.25px; left: -1.25px; border-width: 2.5px 0px 0px 2.5px; }
.framed::after { bottom: -1.25px; right: -1.25px; border-width: 0px 2.5px 2.5px 0px; }
.team-panel { padding: 37.5px 42.5px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18.75px; }
.panel-heading h3 { font: 22px var(--serif); letter-spacing: 2.5px; }
.panel-heading h3 > span { font: 22.5px Georgia, serif; color: rgb(217, 191, 132); margin-left: 18.75px; letter-spacing: 2.5px; }
.panel-heading p { font-size: 16.25px; color: rgb(161, 175, 164); margin-top: 10px; }
.text-button { color: rgb(194, 170, 121); font-size: 16.25px; padding: 5px 0px; line-height: 1.7; }
.text-button:hover { color: var(--gold-light); }
.team-grid { display: grid; grid-template-columns: repeat(8, minmax(0px, 1fr)); gap: 20px; margin: 45px 0px 35px; }
.member { position: relative; min-width: 0px; text-align: center; }
.avatar { width: 90px; height: 90px; border-radius: 50%; border: 1.25px solid rgba(208, 178, 115, 0.5); outline: rgba(208, 178, 115, 0.133) solid 1.25px; outline-offset: 6.25px; margin: auto auto 21.25px; display: grid; place-items: center; background: rgb(34, 53, 46); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; mix-blend-mode: luminosity; opacity: 0.9; }
.avatar.job-avatar { background: rgb(34, 53, 46); }
.avatar.job-avatar img { object-position: center; mix-blend-mode: normal; opacity: 1; }
.avatar.avatar-art { background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/adventurers.png"); background-size: 310% auto; background-position: 12% 43%; }
.member:nth-child(2n) .avatar-art { background-position: 47% 44%; }
.member:nth-child(3n) .avatar-art { background-position: 86% 37%; }
.leader-tag { position: absolute; top: -12.5px; left: 50%; transform: translateX(-50%); padding: 0px 8.75px; background: rgb(179, 153, 96); color: rgb(24, 41, 32); font-size: 12.5px; white-space: nowrap; z-index: 1; }
.member strong { display: block; font-size: 15px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member small { display: block; color: rgb(125, 144, 132); font-size: 13.75px; margin-top: 2.5px; }
.member.empty { cursor: pointer; }
.member.empty .avatar { background: rgb(11, 29, 27); border-style: dashed; color: rgb(184, 164, 117); font: 35px Georgia; }
.member.empty strong { color: rgb(183, 164, 122); }
.member.empty:hover .avatar { background: rgb(38, 57, 47); }
.team-footer { border-top: 1.25px solid rgba(161, 140, 91, 0.15); padding-top: 28.75px; display: flex; justify-content: space-between; align-items: center; gap: 18.75px; }
.team-footer p { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgb(148, 166, 154); }
.team-footer p svg { width: 21.25px; height: 21.25px; color: rgb(164, 146, 100); }
.section-note { display: flex; justify-content: space-between; gap: 17.5px; align-items: center; margin-top: 20px; font-size: 15px; color: rgb(128, 146, 135); }
.points-overview { display: grid; grid-template-columns: 1fr 1.55fr; border: 1px solid var(--line); background: rgba(22, 41, 37, 0.533); padding: 36.25px 43.75px; gap: 50px; }
.personal-points { display: flex; gap: 28.75px; align-items: center; position: relative; border-right: 1px solid var(--line); }
.personal-points > svg { width: 65px; height: 65px; color: rgb(187, 161, 106); stroke-width: 0.9; }
.personal-points p { font-size: 16.25px; color: rgb(169, 181, 167); }
.personal-points strong { display: block; font: 55px / 1.3 Georgia, serif; color: rgb(237, 212, 156); margin: 6.25px 0px; }
.personal-points small { font-size: 15px; color: rgb(141, 160, 147); }
.personal-points small b { font-weight: 400; color: rgb(199, 205, 187); }
.points-unit { position: absolute; right: 31.25px; top: 50%; font: 12.5px Georgia; color: rgb(109, 124, 109); letter-spacing: 2.5px; transform: rotate(-90deg); }
.squad-points { align-self: center; }
.points-title { display: flex; justify-content: space-between; align-items: center; gap: 12.5px; font-size: 17.5px; color: rgb(184, 195, 182); }
.points-title strong { font: 35px Georgia; color: rgb(218, 194, 139); }
.points-title b { font-weight: 400; }
.points-title small { font-size: 20px; color: rgb(122, 141, 128); }
.progress-track { height: 6.25px; background: rgb(52, 68, 56); margin: 25px 0px 17.5px; }
.progress-track span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, rgb(130, 108, 64), rgb(215, 182, 117)); }
.squad-points p { display: flex; align-items: center; gap: 8.75px; color: rgb(163, 178, 152); font-size: 15px; }
.squad-points p svg { width: 21.25px; height: 21.25px; }
.task-header { display: flex; align-items: center; justify-content: space-between; margin: 42.5px 0px 27.5px; border-bottom: 1.25px solid rgba(169, 145, 92, 0.133); }
.task-header > span { font-size: 15px; color: rgb(132, 150, 138); }
.task-tabs { display: flex; gap: 35px; }
.task-tabs button { padding: 13.75px 0px; color: rgb(141, 159, 146); font-size: 17.5px; border-bottom: 2.5px solid transparent; }
.task-tabs button[aria-selected="true"] { color: rgb(227, 201, 142); border-color: rgb(189, 159, 103); }
.task-tabs span { font: 15px Georgia; margin-left: 7.5px; color: rgb(148, 135, 104); }
.task-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.task-card { display: grid; grid-template-columns: 60px 1fr; gap: 22.5px 20px; padding: 31.25px; border: 1.25px solid rgba(179, 154, 98, 0.2); background: rgba(21, 39, 34, 0.667); }
.task-icon { width: 56.25px; height: 56.25px; color: rgb(197, 170, 114); display: grid; place-items: center; border: 1.25px solid rgba(161, 140, 80, 0.22); border-radius: 50%; }
.task-card .task-points { place-self: center end; color: rgb(214, 190, 137); font: 31.25px Georgia; }
.task-points small { font: 12px var(--sans); margin-left: 3.75px; color: rgb(142, 158, 143); }
.task-card h3 { font: 18px var(--serif); letter-spacing: 1.25px; }
.task-card p { font-size: 15px; color: rgb(142, 159, 145); margin-top: 6.25px; }
.task-card .task-info { grid-column: 1 / -1; min-height: 67.5px; }
.task-card .task-bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding-top: 16.25px; border-top: 1.25px solid rgba(180, 156, 97, 0.133); }
.task-kind { font-size: 13.75px; color: rgb(134, 151, 135); }
.task-action { font-size: 16.25px; color: rgb(223, 196, 140); border: 1.25px solid rgba(177, 155, 103, 0.333); min-width: 112.5px; min-height: 43.75px; padding: 5px 16.25px; }
.task-action.ready { background: rgb(192, 165, 108); color: rgb(26, 41, 32); border-color: rgb(192, 165, 108); }
.task-action.done { border-color: transparent; color: rgb(131, 152, 133); }
.lottery-panel { background: radial-gradient(at 50% 15%, rgba(132, 117, 59, 0.08), transparent 65%), rgb(17, 34, 31); padding: 50px 60px 53.75px; }
.pool { text-align: center; padding-bottom: 40px; border-bottom: 1.25px solid rgba(180, 157, 99, 0.2); }
.tag { font-size: 13.75px; letter-spacing: 1.25px; color: rgb(187, 172, 133); border: 1.25px solid rgba(167, 142, 91, 0.29); padding: 6.25px 16.25px; }
.pool p { font: 17px var(--serif); letter-spacing: 3.75px; color: rgb(176, 182, 162); margin: 27.5px 0px 12.5px; }
.pool > strong { display: block; color: rgb(227, 198, 132); font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: normal; font-stretch: normal; font-size: 75px; line-height: 1.2; font-family: Georgia; letter-spacing: 10px; }
.pool-total { display: block; font-size: 15px; color: rgb(141, 155, 135); margin-top: 15px; }
.lottery-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 68.75px; align-items: center; padding-top: 28.75px; }
.lottery-machine { text-align: center; }
.machine-top { display: flex; align-items: center; justify-content: center; gap: 17.5px; color: rgb(193, 164, 113); margin: 0px 0px 22.5px; }
.machine-top > span { width: 81.25px; height: 1.25px; background: linear-gradient(90deg, transparent, rgba(163, 139, 92, 0.533)); }
.machine-top > span:last-child { transform: rotate(180deg); }
.machine-top > svg { width: 27.5px; height: 27.5px; }
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11.25px; padding: 11.25px; border: 1.25px solid rgba(186, 159, 99, 0.4); background: rgb(7, 23, 19); box-shadow: rgba(180, 155, 96, 0.125) 0px 0px 0px 5px; }
.reel { height: 168.75px; border: 1.25px solid rgba(184, 161, 102, 0.29); background: linear-gradient(rgb(28, 45, 36), rgb(57, 69, 53) 48%, rgb(23, 42, 32)); display: flex; align-items: center; justify-content: center; flex-direction: column; color: rgb(212, 186, 126); font: 47.5px Georgia; overflow: hidden; }
.reel > svg { width: 53.75px; height: 53.75px; stroke-width: 1; }
.reel small { font: 14px var(--serif); letter-spacing: 6.25px; margin-top: 11.25px; }
.reels.spinning .reel { animation: 0.15s ease 0s infinite alternate none running reelflicker; }
.reels.winner .reel { box-shadow: rgba(216, 177, 111, 0.2) 0px 0px 37.5px inset; border-color: rgb(228, 193, 127); }
@keyframes reelflicker { 
  100% { filter: brightness(1.5); transform: translateY(2.5px); }
}
.machine-hint { font-size: 15px; color: rgb(142, 158, 137); margin: 18.75px 0px 27.5px; }
.draw-button { min-width: 85%; }
.draw-cost { font-size: 15px; color: rgb(152, 165, 143); margin-top: 16.25px; }
.draw-cost b, .draw-cost strong { font-weight: 400; color: rgb(217, 194, 141); }
.eligibility { border-left: 1.25px solid rgba(188, 162, 99, 0.18); padding-left: 37.5px; }
.eligibility h3 { font: 19px var(--serif); letter-spacing: 1.25px; color: rgb(214, 195, 151); margin-bottom: 25px; }
.condition { display: flex; gap: 12.5px; align-items: center; font-size: 16.25px; color: rgb(168, 182, 160); margin: 17.5px 0px; }
.condition svg { width: 22.5px; height: 22.5px; color: rgb(148, 182, 155); }
.condition.missing { color: rgb(208, 180, 125); }
.condition.missing svg { color: rgb(168, 136, 81); }
.condition > span:last-child { margin-left: auto; font: 16.25px Georgia; color: rgb(148, 166, 141); }
.lottery-tip { margin-top: 28.75px; border-top: 1.25px solid rgba(191, 164, 104, 0.15); padding-top: 22.5px; }
.lottery-tip p { font-size: 15px; color: rgb(128, 145, 126); line-height: 1.9; margin-bottom: 12.5px; }
.rules-section { padding-bottom: 112.5px; }
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0px 55px; }
.rules-grid details { border-top: 1px solid var(--line); padding: 25px 0px; align-self: start; }
.rules-grid summary { list-style: none; cursor: pointer; font-size: 18.75px; color: rgb(197, 180, 140); display: flex; align-items: center; justify-content: space-between; }
.rules-grid summary::-webkit-details-marker { display: none; }
.rules-grid summary > span { color: rgb(164, 141, 97); }
.rules-grid details[open] summary > span { transform: rotate(45deg); }
.rules-grid details > div { margin-top: 22.5px; }
.rules-grid p { font-size: 16.25px; line-height: 1.9; color: rgb(146, 162, 145); margin-top: 12.5px; }
footer { padding: 50px 25px 43.75px; text-align: center; border-top: 1px solid var(--line); background: rgb(7, 21, 20); }
footer .brand { justify-content: center; opacity: 0.7; }
footer > p { font: 17px var(--serif); letter-spacing: 5px; margin: 27.5px 0px; color: rgb(149, 161, 141); }
footer > small { display: block; font-size: 13.75px; color: rgb(102, 125, 110); line-height: 1.9; }
.back-top { position: fixed; right: 27.5px; bottom: 31.25px; width: 50px; height: 50px; border: 1.25px solid rgba(192, 163, 108, 0.4); display: grid; place-items: center; background: rgba(16, 36, 32, 0.91); color: rgb(201, 178, 128); z-index: 8; }
.modal { border: 1.25px solid rgb(187, 160, 109); color: var(--text); padding: 47.5px; max-width: 650px; width: calc(100% - 40px); max-height: 110dvh; background: linear-gradient(145deg, rgb(38, 57, 48), rgb(14, 33, 31)); box-shadow: rgba(0, 0, 0, 0.533) 0px 31.25px 125px; overflow-y: auto; }
.modal::backdrop { background: rgba(2, 14, 16, 0.808); backdrop-filter: blur(8.75px); }
#modalContent { position: relative; }
.modal-close { position: absolute; right: 15px; top: 10px; font: 35px Georgia; color: rgb(187, 165, 117); width: 43.75px; height: 43.75px; line-height: 1; cursor: pointer; z-index: 2; }
.modal-close:hover { color: rgb(242, 214, 160); }
.modal h2 { font: 27px var(--serif); color: rgb(228, 202, 144); letter-spacing: 2.5px; text-align: center; margin: 12.5px 0px 25px; }
.modal p { font-size: 17.5px; color: rgb(169, 181, 164); margin: 16.25px 0px; line-height: 1.9; }
.modal .modal-icon { display: block; margin: 0px auto 21.25px; width: 52.5px; height: 52.5px; color: rgb(209, 180, 119); stroke-width: 1; }
.modal .actions { display: flex; gap: 15px; margin-top: 33.75px; }
.modal .actions .button { flex: 1 1 0%; padding: 13.75px 20px; font-size: 17.5px; gap: 10px; }
.modal .notice { padding: 16.25px 20px; background: rgba(194, 167, 108, 0.043); border-left: 2.5px solid rgb(165, 142, 90); font-size: 15px; line-height: 1.8; color: rgb(189, 183, 155); }
.modal .reward-number { text-align: center; font: 57.5px Georgia; color: rgb(234, 208, 149); margin: 25px 0px; }
.modal .reward-number small { font: 16px var(--serif); }
.modal .preview-options { display: grid; gap: 12.5px; }
.modal .preview-options button { border: 1.25px solid rgba(166, 140, 87, 0.29); background: rgb(27, 48, 41); text-align: left; padding: 16.25px 20px; font-size: 17.5px; }
.modal .preview-options button:hover { border-color: rgb(210, 180, 119); }
.modal .preview-options small { display: block; color: rgb(159, 172, 153); font-size: 15px; }
.modal .share-art { width: 100%; height: 225px; object-fit: cover; object-position: center 44%; margin-bottom: 10px; }
.modal .share-link { width: 100%; background: rgb(12, 28, 24); border: 1.25px solid rgba(180, 155, 99, 0.267); color: rgb(207, 188, 146); padding: 12.5px; font-size: 15px; }
.modal table { width: 100%; border-collapse: collapse; font-size: 16.25px; }
.modal th, .modal td { padding: 12.5px 7.5px; text-align: left; border-bottom: 1.25px solid rgba(172, 149, 96, 0.17); }
.modal th { color: rgb(211, 187, 133); font-weight: 400; }
.modal td { color: rgb(166, 179, 159); }
.modal .pagination { display: flex; justify-content: space-between; margin-top: 25px; }
.modal .pagination button { color: rgb(202, 178, 124); font-size: 16.25px; }
.modal label { display: block; font-size: 16.25px; color: rgb(172, 185, 159); margin-top: 18.75px; }
.modal select { width: 100%; background: rgb(19, 40, 31); color: rgb(221, 210, 175); border: 1.25px solid rgba(161, 138, 86, 0.333); padding: 15px; margin-top: 10px; }
.invite-heading { text-align: center; letter-spacing: 3.75px; font: 15px Georgia !important; color: rgb(198, 170, 115) !important; }
.toast { position: fixed; top: auto; left: 50%; right: auto; bottom: 68.75px; width: max-content; height: auto; margin: 0; border: 0; overflow: visible; transform: translate(-50%, 18.75px); padding: 15px 27.5px; background: rgb(222, 208, 171); color: rgb(20, 36, 27); z-index: 100; opacity: 0; pointer-events: none; transition: 0.2s; font-size: 17.5px; max-width: calc(100% - 37.5px); text-align: center; box-shadow: rgba(0, 0, 0, 0.267) 0px 8.75px 43.75px; }
.toast.visible { opacity: 1; transform: translate(-50%, 0px); }
.empty-state { text-align: center; padding: 31.25px; color: rgb(155, 170, 148); }
.poster-preview { border: 1.25px solid rgba(181, 154, 96, 0.267); padding: 17.5px; background: rgb(12, 33, 30); text-align: center; }
.poster-preview img { width: 100%; max-height: 287.5px; object-fit: cover; }
.poster-preview strong { display: block; font: 25px var(--serif); margin: 16.25px 0px; color: rgb(230, 205, 150); }
.poster-preview p { font-size: 15px; }
.muted { color: var(--muted); }
@media (min-width: 1550px) {
  .hero { min-height: 1087.5px; }
  .hero-content { padding-top: 268.75px; }
  .hero-seal { right: 21.25vw; top: 437.5px; }
}
@media (max-width: 1000px) {
  .container { width: calc(100% - 60px); }
  .site-header { padding: 30px; }
  .hero { min-height: 937.5px; }
  .hero-seal { right: 56.25px; top: 387.5px; }
  .hero-content { padding-top: 212.5px; }
  .team-grid { gap: 12.5px; }
  .avatar { width: 75px; height: 75px; }
  .team-panel { padding: 31.25px; }
  .lottery-panel { padding: 40px; }
  .lottery-body { gap: 37.5px; }
  .eligibility { padding-left: 30px; }
  .reel { font-size: 37.5px; height: 147.5px; }
  .task-card { padding: 25px; }
  .section-heading > p { font-size: 16.25px; }
  .points-unit { display: none; }
}
@media (max-width: 700px) {
  body { font-size: 18.75px; }
  .container { width: calc(100% - 45px); }
  .site-header { padding: 22.5px; }
  .brand > span { font-size: 30px; }
  .brand-mark { width: 41.25px; height: 50px; }
  .brand small { font-size: 8.75px; }
  .header-right { gap: 15px; }
  .preview-trigger { font-size: 12.5px; padding: 5px 7.5px; }
  .preview-trigger span { display: none; }
  .account { font-size: 15px; padding: 0px; }
  .hero { min-height: 962.5px; }
  .hero-scene { background-position: 64% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(6, 27, 32, 0.5), rgba(8, 26, 32, 0.19)), linear-gradient(0deg, rgb(11, 25, 26) 3%, rgba(8, 27, 31, 0.133) 55%, rgba(6, 27, 32, 0.314)); }
  .hero-content { text-align: center; padding-top: 212.5px; padding-bottom: 300px; }
  .hero .eyebrow { justify-content: center; letter-spacing: 2.5px; font-size: 13.75px; }
  .hero .eyebrow > span { width: 25px; }
  h1 { font-size: 81.25px; line-height: 1.2; letter-spacing: 6.25px; margin: 28.75px 0px 25px; text-shadow: rgb(5, 26, 27) 0px 5px 25px; }
  .hero-subtitle { font-size: 20px; letter-spacing: 2.5px; }
  .hero-actions { justify-content: center; gap: 16.25px; margin-top: 32.5px; }
  .hero .button { min-height: 65px; padding: 15px 30px; }
  .hero-share { width: 55px; height: 55px; }
  .hero-date { font-size: 13.75px; }
  .hero-date span { font-size: 15px; margin-left: 8.75px; }
  .hero-seal { display: none; }
  .hero-bottom { bottom: 36.25px; padding-top: 30px; gap: 12.5px; }
  .hero-bottom > div { flex-direction: column; gap: 12.5px; text-align: center; }
  .hero-bottom svg { width: 35px; height: 35px; }
  .hero-bottom strong { font-size: 18.75px; letter-spacing: 0px; }
  .hero-bottom small { font-size: 12.5px; letter-spacing: 0px; white-space: nowrap; }
  .quick-nav > .container { width: 100%; }
  .quick-nav a { font-size: 15px; padding: 21.25px 2.5px; letter-spacing: 0px; }
  .quick-nav span { display: none; }
  .section { padding-top: 72.5px; }
  .section-heading { gap: 16.25px; margin-bottom: 31.25px; }
  .section-no { font-size: 45px; padding-right: 16.25px; }
  .section-heading .eyebrow { font-size: 10px; letter-spacing: 1.75px; margin-bottom: 8.75px; }
  .section-heading h2 { font-size: 31.25px; letter-spacing: 1.25px; }
  .section-heading h2 i { font-size: 26.25px; margin-left: 6.25px; }
  .section-heading > p { display: none; }
  .section-heading > .text-button { font-size: 13.75px; max-width: 102.5px; text-align: right; }
  .reward-grid { gap: 10px; margin-bottom: 25px; }
  .reward-card { padding: 25px 6.25px 20px; min-height: 260px; }
  .reward-label { font-size: 11.25px; left: 10px; top: 10px; }
  .reward-medal { width: 52.5px; height: 52.5px; margin: 17.5px 0px 30px; outline-offset: 3.75px; }
  .reward-medal svg { width: 32.5px; height: 32.5px; }
  .reward-card h3 { font-size: 21.25px; letter-spacing: 0px; }
  .reward-card p { font-size: 12.5px; margin-top: 7.5px; }
  .reward-card .reward-status { min-width: 0px; width: 85%; font-size: 13.75px; margin-top: 20px; min-height: 38.75px; padding: 3.75px; }
  .team-panel { padding: 28.75px 23.75px; }
  .panel-heading h3 { font-size: 23.75px; letter-spacing: 1.25px; }
  .panel-heading h3 > span { font-size: 18.75px; margin-left: 7.5px; }
  .panel-heading p { font-size: 15px; max-width: 262.5px; }
  .panel-heading > .text-button { font-size: 13.75px; white-space: nowrap; }
  .team-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 28.75px 15px; margin: 37.5px 0px 30px; }
  .avatar { width: 66.25px; height: 66.25px; margin-bottom: 15px; outline-offset: 3.75px; }
  .member strong { font-size: 13.75px; }
  .member small { font-size: 12.5px; }
  .team-footer { flex-direction: column; padding-top: 22.5px; gap: 22.5px; }
  .team-footer > p { font-size: 13.75px; line-height: 1.6; }
  .team-footer .button { width: 100%; }
  .section-note { align-items: flex-start; flex-direction: column; gap: 6.25px; font-size: 12.5px; margin-top: 15px; }
  .section-note button { font-size: 13.75px; }
  .points-overview { grid-template-columns: 1fr; padding: 27.5px; gap: 27.5px; }
  .personal-points { border-right: 0px; border-bottom: 1px solid var(--line); padding-bottom: 27.5px; gap: 21.25px; }
  .personal-points > div { display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%; gap: 3.75px 12.5px; }
  .personal-points strong { grid-area: 1 / 2 / 3; font-size: 48.75px; margin: 0px; }
  .personal-points > svg { width: 47.5px; height: 47.5px; }
  .personal-points p { font-size: 15px; }
  .personal-points small { font-size: 13.75px; }
  .points-title { font-size: 16.25px; }
  .points-title strong { font-size: 30px; }
  .squad-points p { align-items: flex-start; font-size: 13.75px; }
  .task-header { margin-top: 28.75px; display: block; }
  .task-header > span { display: block; font-size: 12.5px; padding: 11.25px 0px 16.25px; }
  .task-tabs { gap: 28.75px; }
  .task-tabs button { font-size: 16.25px; }
  .task-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12.5px; }
  .task-card { padding: 20px 15px; gap: 16.25px 8.75px; grid-template-columns: 43.75px 1fr; }
  .task-icon { width: 42.5px; height: 42.5px; }
  .task-icon svg { width: 27.5px; height: 27.5px; }
  .task-card .task-points { font-size: 27.5px; }
  .task-points small { font-size: 12.5px; }
  .task-card h3 { font-size: 21.25px; letter-spacing: 0px; }
  .task-card p { font-size: 13.75px; line-height: 1.7; }
  .task-card .task-info { min-height: 80px; }
  .task-card .task-bottom { display: block; text-align: center; padding-top: 12.5px; }
  .task-kind { font-size: 12.5px; display: block; margin-bottom: 8.75px; }
  .task-action { width: 100%; min-width: 0px; min-height: 42.5px; font-size: 15px; }
  .lottery-panel { padding: 32.5px 25px; }
  .pool { padding-bottom: 31.25px; }
  .pool p { font-size: 18.75px; letter-spacing: 2.5px; margin-top: 26.25px; }
  .pool > strong { font-size: 50px; letter-spacing: 5px; }
  .pool-total { font-size: 12.5px; }
  .tag { font-size: 12.5px; }
  .lottery-body { grid-template-columns: 1fr; gap: 37.5px; padding-top: 25px; }
  .reel { height: 130px; font-size: 36.25px; }
  .reel > svg { width: 43.75px; height: 43.75px; }
  .draw-button { width: 100%; }
  .eligibility { border-left: 0px; border-top: 1px solid var(--line); padding: 31.25px 0px 0px; }
  .eligibility h3 { font-size: 22.5px; }
  .condition { font-size: 15px; }
  .lottery-tip { margin-top: 22.5px; display: flex; gap: 15px; align-items: center; justify-content: space-between; }
  .lottery-tip p { font-size: 12.5px; margin: 0px; }
  .lottery-tip .text-button { font-size: 13.75px; max-width: 125px; }
  .rules-grid { grid-template-columns: 1fr; gap: 0px; }
  .rules-grid summary { font-size: 17.5px; }
  .rules-grid p { font-size: 15px; }
  .rules-section { padding-bottom: 56.25px; }
  .back-top { right: 11.25px; bottom: 18.75px; width: 40px; height: 40px; }
  .modal { padding: 40px 28.75px; }
  .modal h2 { font-size: 30px; }
  .modal p { font-size: 16.25px; }
  .modal .actions .button { font-size: 15px; padding: 12.5px; }
  .modal table { font-size: 15px; }
  .modal th, .modal td { padding: 10px 5px; }
  footer > small { font-size: 12.5px; }
  footer > p { font-size: 18.75px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}

/* ==================== 02 红莲主题 ==================== */
.site-header .official-brand { display: block; flex: 0 0 auto; }
.official-brand .logo-crop { display: block; position: relative; width: 225px; aspect-ratio: 3231 / 1767; overflow: hidden; letter-spacing: 0px; }
.logo-crop > img { position: absolute; left: -32.81%; top: -36.95%; width: 154.75%; max-width: none; height: auto; display: block; }
.site-header:has(.official-brand) { padding-top: 12.5px; padding-bottom: 12.5px; }
@media (max-width: 700px) {
  .official-brand .logo-crop { width: 156.25px; }
  .site-header:has(.official-brand) { padding-top: 10px; padding-bottom: 10px; }
  .site-header .header-right { gap: 11.25px; }
}
@media (max-width: 700px) {
  .hero .hero-bottom strong { font-size: 17.5px; white-space: nowrap; }
}
.hero .hero-scene { mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 68%, transparent 100%); }
@font-face { font-family: HonglianDisplay; src: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/FZCYSJW-GB1-0.ttf") format("truetype"); font-display: swap; font-weight: 400; }
:root { --bg: #140f23; --panel: #23172f; --panel2: #302039; --gold: #dbb779; --gold-light: #ffe2a4; --gold-dim: #b58751; --line: #c8946040; --text: #f3e8d9; --muted: #b7a6bb; --red: #c14146; --green: #cfb489; --serif: HonglianDisplay,"STKaiti","KaiTi","SimSun",serif; }
body { background: rgb(20, 15, 35); color: rgb(241, 231, 221); }
.site-header { position: absolute; background: linear-gradient(rgba(11, 9, 29, 0.918), rgba(22, 14, 35, 0.2)); padding: 23.75px 50px; border-bottom-color: rgba(210, 178, 117, 0.145); }
.brand { color: rgb(246, 210, 154); }
.brand > span { font-family: HonglianDisplay, serif; font-weight: 400; letter-spacing: 2.5px; }
.brand-mark { color: rgb(232, 192, 130); }
.header-right .account { color: rgb(228, 207, 184); }
.preview-trigger { background: rgba(27, 17, 42, 0.533); border-color: rgba(224, 187, 104, 0.31); color: rgb(230, 205, 172); }
.hero { min-height: 0px; background: rgb(20, 15, 35); overflow: hidden; }
.hero .hero-scene { height: clamp(512.5px, 43.75vw, 900px); background-image: none; background-size: max(1750px, 125vw) auto; background-position: center top; opacity: 1; }
.hero-shade { background: linear-gradient(transparent 0%, transparent 30%, rgba(20, 15, 35, 0.25) 42%, rgba(20, 15, 35, 0.91) 59%, rgb(20, 15, 35) 72%); z-index: -1; }
.hero-content { padding-top: clamp(450px, 36.25vw, 862.5px); padding-bottom: 237.5px; text-align: center; position: relative; width: min(1575px, 100% - 50px); }
.hero-content > .eyebrow { justify-content: center; color: rgb(242, 198, 136); letter-spacing: 6.25px; font-family: HonglianDisplay, serif; }
.hero-content > .eyebrow::before { content: ""; width: 50px; height: 1.25px; background: rgb(189, 116, 96); }
.hero-content > .eyebrow > span { display: none; }
.hero-content > .eyebrow::after { width: 50px; height: 1.25px; background: rgb(189, 116, 96); transform: none; }
.hero h1 { font-family: HonglianDisplay, serif; font-weight: 400; font-size: 110px; line-height: 1.2; letter-spacing: 3.75px; color: rgb(255, 223, 157); text-shadow: rgb(146, 50, 61) 2.5px 3.75px 0px, rgba(190, 37, 57, 0.36) 0px 0px 25px; margin: 16.25px 0px 7.5px; }
.hero h1 br { display: none; }
.hero h1 em { color: inherit; margin-left: 37.5px; }
.hero-title-image { display: block; width: min(1350px, 100%); height: auto; margin: -31.25px auto -18.75px; }
.hero h1.has-art { font-size: 0px; line-height: 0; letter-spacing: 0px; margin: 0px; }
.hero-subtitle { display: inline-block; border: 1.25px solid rgb(200, 136, 87); border-radius: 37.5px; padding: 8.75px 43.75px; background: linear-gradient(90deg, rgb(142, 36, 78), rgb(199, 70, 72), rgb(142, 36, 78)); color: rgb(255, 224, 165); font: 22.5px / 1.6 HonglianDisplay, serif; letter-spacing: 3.75px; box-shadow: rgba(105, 32, 64, 0.533) 0px 0px 0px 3.75px, rgba(217, 151, 89, 0.25) 0px 0px 0px 3.75px inset; }
.hero-subtitle br { display: none; }
.hero-actions { justify-content: center; margin-top: 31.25px; }
.hero-share { border-color: rgba(221, 167, 112, 0.533); color: rgb(246, 205, 146); background: rgba(44, 24, 56, 0.55); }
.hero-date { color: rgb(186, 156, 174); }
.hero-date span { color: rgb(230, 193, 151); }
.hero-seal { display: none; }
.hero-bottom { border-top-color: rgba(206, 155, 102, 0.333); bottom: 37.5px; }
.hero-bottom > div + div { border-left-color: rgba(189, 132, 86, 0.23); }
.hero-bottom strong { color: rgb(242, 208, 149); font-family: HonglianDisplay, serif; letter-spacing: 1.25px; }
.hero-bottom small { color: rgb(176, 158, 175); }
.hero-bottom svg { color: rgb(217, 174, 118); }
.button.primary { background: linear-gradient(100deg, rgb(110, 21, 58), rgb(187, 57, 74) 50%, rgb(116, 32, 64)); color: rgb(255, 226, 163); border: 1.25px solid rgb(218, 162, 103); box-shadow: rgb(83, 26, 50) 0px 0px 0px 3.75px inset, rgba(211, 155, 98, 0.5) 0px 0px 0px 5px inset, rgba(155, 24, 59, 0.19) 0px 3.75px 22.5px; font-family: HonglianDisplay, serif; font-weight: 400; font-size: 22.5px; letter-spacing: 2.5px; }
.button.secondary { background: rgb(45, 27, 55); border-color: rgba(157, 115, 92, 0.54); color: rgb(236, 208, 164); }
.button.primary.small { font-size: 18.75px; }
.quick-nav { background: rgba(27, 19, 42, 0.937); border-color: rgba(180, 123, 85, 0.333); box-shadow: rgba(8, 4, 22, 0.376) 0px 6.25px 30px; }
.quick-nav a { font-family: HonglianDisplay, serif; font-size: 22.5px; color: rgb(188, 163, 193); padding: 21.25px 7.5px; }
.quick-nav span { color: rgb(148, 106, 141); }
.quick-nav a.active { color: rgb(255, 220, 146); background: linear-gradient(0deg, rgba(163, 40, 69, 0.173), transparent); }
.quick-nav a.active::after { background: rgb(212, 164, 101); }
.activity-body { background: radial-gradient(at 0px 15%, rgba(94, 36, 79, 0.14), transparent 55%), radial-gradient(at 100% 65%, rgba(120, 33, 69, 0.125), transparent 40%), rgb(23, 17, 40); }
.section { padding-top: 106.25px; }
.section-heading { justify-content: center; position: relative; min-height: 118.75px; gap: 0px; margin-bottom: 42.5px; text-align: center; }
.section-heading > p, .section-no, .section-heading .eyebrow { display: none; }
.section-heading h2 { font: 52.5px HonglianDisplay, serif; color: rgb(231, 189, 129); letter-spacing: 2.5px; text-shadow: rgb(79, 32, 56) 1.25px 3.75px 0px; }
.section-heading h2 i { color: rgb(245, 211, 156); font-size: inherit; }
.section-heading > .text-button { position: absolute; right: 0px; bottom: -25px; color: rgb(201, 164, 126); font-size: 15px; }
.art-ready .section-heading > div { width: min(1000px, 100%); }
.art-ready .section-heading h2 { width: 100%; height: auto; aspect-ratio: 6.8 / 1; background-image: none; background-repeat: no-repeat; background-size: 100% 400%; background-position: center top; font-size: 0px; line-height: 0; text-shadow: none; color: transparent; }
.art-ready .section-heading h2 i { font-size: 0px; color: transparent; }
.art-ready #tasks .section-heading h2 { background-position: center 33.333%; }
.art-ready #lottery .section-heading h2 { background-position: center 66.667%; }
.art-ready #rules .section-heading h2 { background-position: center 100%; }
.reward-grid { gap: 28.75px; }
.reward-card, .reward-card.locked { background: linear-gradient(135deg, rgba(78, 36, 62, 0.55), rgb(36, 24, 50) 60%, rgb(55, 27, 51)); border: 1.25px solid rgba(196, 154, 98, 0.4); min-height: 330px; }
.reward-card::before { border-color: rgba(201, 141, 89, 0.19); }
.reward-label { color: rgb(177, 139, 156); font: 13.75px Georgia; }
.reward-medal { width: 97.5px; height: 96.25px; background: none center center / 100% 100% no-repeat; border: 0px; outline: 0px; transform: none; color: rgb(141, 53, 69); filter: drop-shadow(rgba(0, 0, 0, 0.267) 0px 3.75px 12.5px); margin: 12.5px 0px 27.5px; }
.reward-medal svg { transform: none; width: 56.25px; height: 56.25px; stroke-width: 1.3; }
.reward-card h3 { font: 31.25px HonglianDisplay, serif; color: rgb(237, 196, 141); }
.reward-card p { color: rgb(186, 161, 178); }
.reward-card .reward-status { border-color: rgba(173, 118, 84, 0.48); color: rgb(219, 184, 141); background: rgb(49, 24, 49); }
.reward-card .reward-status.claimable { background: linear-gradient(90deg, rgb(131, 34, 62), rgb(192, 68, 76), rgb(140, 41, 69)); color: rgb(255, 221, 161); border-color: rgb(215, 164, 104); }
.reward-card .reward-status.claimed { color: rgb(199, 172, 139); background: none; }
.framed { background: linear-gradient(135deg, rgba(54, 32, 58, 0.533), rgba(29, 21, 44, 0.88)); border-color: rgba(198, 148, 96, 0.333); }
.framed::before, .framed::after { border-color: rgb(210, 163, 105); }
.team-panel { padding: 40px 45px; }
.panel-heading h3 { font-family: HonglianDisplay, serif; color: rgb(235, 203, 159); }
.panel-heading h3 > span { color: rgb(223, 181, 128); }
.panel-heading p { color: rgb(184, 163, 180); }
.text-button { color: rgb(210, 172, 132); }
.avatar { border-color: rgba(217, 163, 109, 0.6); outline-color: rgba(193, 120, 100, 0.2); background: rgb(50, 33, 59); }
.avatar.avatar-art { box-shadow: rgba(166, 59, 87, 0.19) 0px 0px 18.75px; }
.leader-tag { background: rgb(165, 53, 72); color: rgb(255, 221, 161); border: 1.25px solid rgb(214, 161, 109); }
.member strong { color: rgb(226, 207, 205); }
.member small { color: rgb(163, 138, 166); }
.member.empty .avatar { background: rgb(40, 25, 49); color: rgb(219, 175, 128); border-color: rgba(164, 110, 114, 0.533); }
.member.empty strong { color: rgb(200, 162, 132); }
.member.empty:hover .avatar { background: rgb(75, 38, 62); }
.team-footer { border-color: rgba(183, 127, 87, 0.227); }
.team-footer p { color: rgb(176, 153, 176); }
.team-footer p svg { color: rgb(185, 138, 109); }
.section-note { color: rgb(161, 135, 159); }
.points-overview { background: linear-gradient(100deg, rgba(56, 32, 55, 0.6), rgb(33, 22, 47)); border-color: rgba(193, 147, 90, 0.31); }
.personal-points { border-color: rgba(185, 142, 91, 0.267); }
.personal-points p { color: rgb(196, 171, 185); }
.personal-points strong { color: rgb(246, 211, 154); }
.personal-points small { color: rgb(170, 139, 164); }
.personal-points small b { color: rgb(215, 189, 198); }
.points-unit { color: rgb(139, 96, 127); }
.points-title { color: rgb(196, 167, 185); }
.points-title strong { color: rgb(242, 206, 150); }
.points-title small { color: rgb(162, 135, 160); }
.progress-track { height: 8.75px; background: rgb(60, 41, 67); border: 1.25px solid rgba(117, 65, 93, 0.4); }
.progress-track span { background: linear-gradient(90deg, rgb(134, 35, 63), rgb(202, 75, 80) 60%, rgb(228, 174, 107)); }
.squad-points p { color: rgb(199, 173, 146); }
.task-header { border-color: rgba(166, 114, 92, 0.2); }
.task-header > span { color: rgb(166, 140, 168); }
.task-tabs button { color: rgb(171, 143, 175); }
.task-tabs button[aria-selected="true"] { color: rgb(248, 210, 148); border-color: rgb(200, 100, 84); }
.task-tabs span { color: rgb(187, 140, 139); }
.task-card { background: linear-gradient(145deg, rgb(55, 33, 58), rgb(36, 24, 47)); border-color: rgba(174, 126, 90, 0.333); box-shadow: rgba(20, 15, 34, 0.133) 0px 0px 0px 5px inset; }
.task-icon { background: radial-gradient(circle, rgb(100, 54, 75), rgb(40, 27, 51)); color: rgb(225, 182, 133); border-color: rgba(190, 144, 103, 0.3); }
.task-card .task-points { color: rgb(246, 201, 144); }
.task-points small { color: rgb(166, 139, 164); }
.task-card h3 { font-family: HonglianDisplay, serif; font-size: 25px; color: rgb(235, 205, 173); }
.task-card p { color: rgb(178, 154, 176); }
.task-card .task-bottom { border-color: rgba(178, 131, 91, 0.2); }
.task-kind { color: rgb(169, 136, 165); }
.task-action { color: rgb(243, 200, 146); background: rgb(89, 32, 57); border-color: rgba(187, 134, 92, 0.467); }
.task-action.ready { background: linear-gradient(90deg, rgb(132, 38, 64), rgb(177, 59, 74)); color: rgb(255, 224, 160); border-color: rgb(206, 155, 103); }
.task-action.done { background: none; color: rgb(182, 156, 158); }
.lottery-panel { background: radial-gradient(at center 15%, rgba(106, 41, 67, 0.196), transparent 70%), linear-gradient(145deg, rgb(50, 32, 58), rgb(27, 21, 42)); padding: 55px 60px; }
.pool { border-color: rgba(178, 122, 82, 0.267); }
.tag { background: rgba(99, 35, 60, 0.333); border-color: rgba(170, 108, 83, 0.44); color: rgb(223, 184, 144); }
.pool p { font-family: HonglianDisplay, serif; color: rgb(221, 193, 166); }
.pool > strong { color: rgb(255, 223, 163); text-shadow: rgb(113, 48, 70) 0px 5px 0px, rgba(185, 80, 51, 0.19) 0px 0px 31.25px; }
.pool-total { color: rgb(174, 146, 169); }
.machine-top { color: rgb(210, 161, 110); }
.machine-top > span { background: linear-gradient(90deg, transparent, rgb(203, 149, 90)); }
.reels { background: rgb(21, 13, 33); border-color: rgb(207, 160, 96); box-shadow: rgba(111, 48, 72, 0.29) 0px 0px 0px 5px, rgba(160, 42, 68, 0.145) 0px 0px 37.5px; padding: 12.5px; }
.reel { background: linear-gradient(rgb(48, 27, 50), rgb(89, 51, 69) 48%, rgb(48, 26, 48)); border-color: rgba(184, 135, 91, 0.6); color: rgb(243, 204, 142); box-shadow: rgba(11, 7, 24, 0.4) 0px 0px 27.5px inset; }
.reel > svg { color: rgb(220, 169, 113); }
.machine-hint { color: rgb(179, 148, 173); }
.draw-cost { color: rgb(184, 151, 170); }
.draw-cost b, .draw-cost strong { color: rgb(242, 200, 141); }
.eligibility { border-color: rgba(183, 129, 83, 0.267); }
.eligibility h3 { font-family: HonglianDisplay, serif; color: rgb(239, 208, 161); font-size: 26.25px; }
.condition { color: rgb(196, 171, 186); }
.condition svg { color: rgb(213, 175, 128); }
.condition > span:last-child { color: rgb(198, 162, 121); }
.condition.missing { color: rgb(237, 175, 156); }
.condition.missing svg { color: rgb(217, 126, 121); }
.lottery-tip { border-color: rgba(177, 127, 87, 0.267); }
.lottery-tip p { color: rgb(176, 150, 171); }
.rules-grid details { border-color: rgba(180, 126, 87, 0.267); }
.rules-grid summary { font-family: HonglianDisplay, serif; font-size: 23.75px; color: rgb(217, 181, 136); }
.rules-grid summary > span { color: rgb(181, 125, 100); }
.rules-grid p { color: rgb(178, 156, 178); }
.rules-section { padding-bottom: 87.5px; }
footer { background: rgb(14, 11, 24); border-color: rgba(161, 110, 69, 0.267); }
footer > p { color: rgb(180, 154, 172); }
footer > small { color: rgb(141, 118, 143); }
.back-top { background: rgba(41, 21, 46, 0.93); color: rgb(225, 184, 132); border-color: rgba(168, 112, 93, 0.533); }
.modal { background: linear-gradient(145deg, rgb(65, 37, 61), rgb(34, 22, 45)); border-color: rgb(198, 153, 100); box-shadow: rgba(101, 48, 71, 0.267) 0px 0px 0px 5px, rgba(0, 0, 0, 0.533) 0px 31.25px 125px; }
.modal::backdrop { background: rgba(8, 4, 21, 0.85); }
.modal h2 { font-family: HonglianDisplay, serif; font-size: 37.5px; color: rgb(242, 201, 149); }
.modal p { color: rgb(204, 180, 195); }
.modal .notice { background: rgba(182, 84, 69, 0.063); border-color: rgb(183, 126, 96); color: rgb(201, 173, 188); }
.modal .reward-number { color: rgb(247, 211, 144); text-shadow: rgb(124, 52, 72) 0px 3.75px; }
.modal .preview-options button { background: rgb(52, 29, 54); border-color: rgba(161, 113, 93, 0.4); }
.modal .preview-options small { color: rgb(178, 150, 175); }
.modal label { color: rgb(203, 176, 157); }
.modal select { background: rgb(43, 27, 51); color: rgb(237, 206, 167); border-color: rgba(164, 118, 90, 0.467); }
.modal .share-link { background: rgb(32, 20, 41); color: rgb(216, 184, 150); border-color: rgba(165, 119, 88, 0.467); }
.modal th { color: rgb(232, 193, 143); }
.modal td { color: rgb(201, 177, 195); }
.modal th, .modal td { border-color: rgba(165, 116, 85, 0.267); }
.poster-preview { background: rgb(35, 23, 46); border-color: rgba(164, 113, 85, 0.467); }
.poster-preview strong { font-family: HonglianDisplay, serif; color: rgb(241, 206, 151); }
.poster-preview > small { color: rgb(188, 160, 180); }
.qr-placeholder { background: rgb(50, 32, 57); border-color: rgb(178, 141, 104); color: rgb(219, 192, 161); }
.qr-placeholder small { color: rgb(179, 156, 175); }
.toast { background: rgb(231, 194, 146); color: rgb(56, 25, 46); }
.empty-state { color: rgb(184, 160, 182); }
@media (min-width: 1550px) {
  .hero { min-height: 0px; }
  .hero-content { padding-top: 36.25vw; }
  .hero-title-image { width: 1450px; }
}
@media (max-width: 1000px) {
  .hero h1 { font-size: 82.5px; }
  .hero-content { padding-top: 450px; padding-bottom: 225px; }
  .hero-title-image { margin: -10px auto 0px; }
  .hero-subtitle { font-size: 20px; padding: 7.5px 30px; letter-spacing: 2.5px; }
  .section-heading h2 { font-size: 45px; }
}
@media (max-width: 700px) {
  .site-header { padding: 20px 21.25px; }
  .brand > span { font-size: 28.75px; }
  .hero { min-height: 0px; }
  .hero .hero-scene { height: 462.5px; background-size: auto 825px; background-position: 55% top; }
  .hero-shade { background: linear-gradient(transparent 0%, rgba(20, 15, 35, 0) 25%, rgba(20, 15, 35, 0.376) 42%, rgb(20, 15, 35) 59%); }
  .hero-content { padding-top: 343.75px; padding-bottom: 200px; width: calc(100% - 25px); }
  .hero-content > .eyebrow { font-size: 13.75px; letter-spacing: 2.5px; }
  .hero-content > .eyebrow::before, .hero-content > .eyebrow::after { width: 25px; }
  .hero h1 { font-size: 55px; letter-spacing: 0px; margin: 23.75px 0px; }
  .hero h1 em { margin-left: 12.5px; }
  .hero-title-image { width: 100%; margin: -2.5px auto 0px; }
  .hero-subtitle { font-size: 16.25px; letter-spacing: 0px; padding: 7.5px 20px; border-radius: 25px; max-width: 95%; }
  .hero-actions { margin-top: 30px; }
  .hero .button.primary { font-size: 20px; }
  .hero-date { font-size: 12.5px; margin-top: 20px; }
  .hero-bottom { bottom: 30px; padding-top: 25px; }
  .hero-bottom strong { font-size: 20px; }
  .hero-bottom small { font-size: 12.5px; }
  .quick-nav a { font-size: 18.75px; padding: 20px 1.25px; }
  .section { padding-top: 65px; }
  .section-heading { min-height: 87.5px; margin-bottom: 27.5px; }
  .section-heading h2 { font-size: 31.25px; letter-spacing: 0px; }
  .section-heading h2 i { font-size: 31.25px; margin-left: 10px; }
  .art-ready .section-heading h2 { aspect-ratio: 5.8 / 1; background-size: 100% 400%; }
  .section-heading > .text-button { font-size: 12.5px; bottom: -16.25px; max-width: none; }
  .reward-grid { gap: 10px; }
  .reward-card, .reward-card.locked { min-height: 270px; padding: 23.75px 6.25px 17.5px; }
  .reward-medal { width: 70px; height: 70px; margin: 10px 0px 21.25px; }
  .reward-medal svg { width: 41.25px; height: 41.25px; }
  .reward-card h3 { font-size: 22.5px; }
  .reward-card p { font-size: 12.5px; }
  .reward-card .reward-status { font-size: 13.75px; margin-top: 18.75px; }
  .team-panel { padding: 27.5px 21.25px; }
  .panel-heading h3 { font-size: 25px; }
  .team-footer .button.primary { font-size: 18.75px; }
  .task-card h3 { font-size: 21.25px; line-height: 1.5; }
  .task-card { padding: 20px 15px; }
  .task-card .task-info { min-height: 97.5px; }
  .lottery-panel { padding: 33.75px 23.75px; }
  .eligibility h3 { font-size: 25px; }
  .rules-grid summary { font-size: 22.5px; }
  .modal h2 { font-size: 32.5px; }
  .modal .button.primary { font-size: 17.5px; }
  .button.primary.small { font-size: 17.5px; }
  .personal-points { border-bottom-color: rgba(180, 135, 90, 0.333); }
}
.hero-actions { --cta-width: 425px; display: grid; grid-template-columns: minmax(0,1fr) var(--cta-width) minmax(0,1fr); column-gap: 22.5px; align-items: center; margin-top: 37.5px; }
.hero-actions > .primary { grid-column: 2; width: 100%; min-height: 90px; padding: 17.5px 35px; gap: 27.5px; position: relative; isolation: isolate; overflow: hidden; border-color: rgb(244, 201, 132); background: linear-gradient(105deg, rgb(114, 24, 55), rgb(196, 65, 79) 48%, rgb(132, 34, 67)); font-size: 30px; letter-spacing: 2.5px; box-shadow: rgb(84, 20, 45) 0px 0px 0px 3.75px inset, rgba(237, 191, 116, 0.533) 0px 0px 0px 5px inset, rgba(208, 43, 72, 0.27) 0px 6.25px 37.5px; }
.hero-actions > .primary::before { content: ""; position: absolute; inset: 5px; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 225, 166, 0.22) 48%, transparent 66%); transform: translateX(-130%); animation: 4.2s ease-in-out 0s infinite normal none running rally-sheen; z-index: -1; }
.hero-actions > .primary > svg { width: 68.75px; height: 45px; flex: 0 0 auto; stroke: none; filter: drop-shadow(rgb(120, 41, 54) 0px 2.5px 0px) drop-shadow(rgba(255, 195, 108, 0.4) 0px 0px 6.25px); animation: 2.6s ease-in-out 0s infinite normal none running rally-arrow; }
.hero-actions > .primary:hover, .hero-actions > .primary:focus-visible { border-color: rgb(255, 237, 191); box-shadow: rgb(84, 20, 45) 0px 0px 0px 3.75px inset, rgba(237, 191, 116, 0.533) 0px 0px 0px 5px inset, rgba(231, 68, 98, 0.42) 0px 6.25px 45px; }
.hero-actions > .primary:focus-visible, .hero-actions > .hero-share:focus-visible { outline: rgb(255, 229, 171) solid 2.5px; outline-offset: 6.25px; }
.hero-actions > .hero-share { grid-column: 3; justify-self: start; width: 65px; height: 65px; transition: background 0.2s, border-color 0.2s; }
.hero-actions > .hero-share:hover { background: rgb(84, 35, 62); border-color: rgb(242, 202, 142); }
@keyframes rally-arrow { 
  0%, 38%, 76%, 100% { transform: translateX(0px); }
  52%, 65% { transform: translateX(8.75px); }
  59% { transform: translateX(3.75px); }
}
@keyframes rally-sheen { 
  0%, 40% { transform: translateX(-130%); }
  76%, 100% { transform: translateX(130%); }
}
@media (max-width: 700px) {
  .hero-actions { --cta-width: min(287.5px,calc(100% - 130px)); column-gap: 12.5px; margin-top: 32.5px; }
  .hero-actions > .primary { min-height: 77.5px; padding: 15px; gap: 12.5px; font-size: 22.5px; letter-spacing: 1.25px; }
  .hero-actions > .primary > svg { width: 47.5px; height: 36.25px; }
  .hero-actions > .hero-share { width: 55px; height: 55px; }
}
@media (max-width: 360px) {
  .hero-actions > .primary { font-size: 20px; gap: 8.75px; }
  .hero-actions > .primary > svg { width: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-actions > .primary::before, .hero-actions > .primary > svg { animation: auto ease 0s 1 normal none running none; }
  .hero-actions > .primary::before { display: none; }
}

/* ==================== 03 页面排版 ==================== */
:root { --bg: #191124; --text: #f4eadd; --muted: #c1adc4; --gold: #e9c395; --line: #cfa77c4d; }
html { scroll-padding-top: 105px; }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 21.25px; line-height: 1.7; background: rgb(25, 17, 36); }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button[hidden] { display: none !important; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: rgb(245, 216, 166) solid 2.5px; outline-offset: 6.25px; }
strong { font-weight: 600; }
.container { width: min(1400px, 100% - 80px); }
.site-header:has(.official-brand) { position: relative; padding: 15px max(35px, -800px + 62.5vw); background: rgb(25, 17, 36); border-bottom: 1.25px solid rgba(189, 146, 111, 0.2); min-height: 122.5px; display: flex; justify-content: space-between; align-items: center; }
.official-brand .logo-crop { width: 177.5px; }
.site-header .account { color: rgb(233, 209, 176); font: 21.25px / 1.5 "Microsoft YaHei", sans-serif; min-height: 57.5px; padding: 12.5px 0px; }
.site-header .account:hover { color: rgb(255, 228, 185); }
.hero { position: relative; isolation: isolate; min-height: 0px; background: rgb(25, 17, 36); }
.hero .hero-scene { height: 925px; background-image: none; background-size: cover; background-position: center 40%; opacity: 1; mask-image: linear-gradient(rgb(0, 0, 0) 58%, transparent 100%); }
.hero-shade { background: linear-gradient(transparent 0%, transparent 40%, rgba(25, 17, 36, 0.533) 65%, rgb(25, 17, 36) 87%); }
.hero .hero-content { padding-top: 600px; padding-bottom: 192.5px; width: min(1450px, 100% - 60px); text-align: center; }
.hero h1.title-art { width: 100%; max-width: 1350px; aspect-ratio: 7.5 / 1; height: auto; margin: 0px auto; font-size: 0px; line-height: 0; background: none center 0px / 100% 500% no-repeat; text-shadow: none; filter: drop-shadow(rgb(22, 12, 40) 0px 5px 15px); }
.hero .hero-subtitle { display: block; border: 0px; border-radius: 0px; padding: 0px; background: none; box-shadow: none; color: rgb(242, 214, 181); font: 23.75px / 1.7 "Microsoft YaHei", sans-serif; letter-spacing: 1.25px; margin: 20px auto 0px; }
.hero-actions { --cta-width: 412.5px; display: grid; grid-template-columns: minmax(0,1fr) var(--cta-width) minmax(0,1fr); gap: 22.5px; margin-top: 42.5px; align-items: center; }
.hero-actions > .primary { grid-column: 2; width: 100%; min-height: 90px; font-size: 31.25px; position: relative; overflow: visible; gap: 17.5px; }
.hero-actions > .primary > svg { position: absolute; top: -28.75px; left: calc(50% - 30px); width: 60px; height: 42.5px; color: rgb(231, 195, 153); stroke-width: 1.1; fill: rgb(111, 48, 74); filter: drop-shadow(rgb(19, 10, 36) 0px 2.5px 6.25px); animation: 3s ease-in-out 0s infinite normal none running lotus-breathe; }
.hero-actions > .primary::before { display: none; }
.hero-actions > .hero-share { grid-column: 3; justify-self: start; width: 65px; height: 65px; background: rgb(35, 23, 49); color: rgb(230, 192, 144); border: 1.25px solid rgb(181, 134, 97); border-radius: 50%; }
.hero-date { font-size: 18.75px; color: rgb(197, 173, 191); margin-top: 28.75px; }
.hero-date span { font: 20px / 1.5 "Microsoft YaHei", sans-serif; letter-spacing: 1.25px; color: rgb(223, 189, 157); }
.hero-bottom { bottom: 35px; border-top: 1.25px solid rgba(188, 139, 102, 0.24); padding-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 27.5px; }
.hero-bottom > div { display: flex; justify-content: center; align-items: center; gap: 18.75px; }
.hero-bottom > div + div { border-left: 1.25px solid rgba(197, 153, 116, 0.22); }
.hero-bottom svg { width: 38.75px; height: 38.75px; stroke-width: 1.7; color: rgb(228, 189, 148); }
.hero-bottom strong { font: 26.25px / 1.5 "Microsoft YaHei", sans-serif; color: rgb(238, 212, 182); letter-spacing: 0px; white-space: nowrap; }
.quick-nav { background: rgba(37, 25, 50, 0.96); backdrop-filter: blur(15px); border-color: rgba(197, 152, 112, 0.3); top: 0px; }
.quick-nav > .container { width: min(1400px, 100%); }
.quick-nav a { font: 23.75px / 1.6 "Microsoft YaHei", sans-serif; padding: 25px 7.5px; color: rgb(201, 179, 199); }
.quick-nav a.active { color: rgb(247, 214, 168); background: linear-gradient(0deg, rgba(172, 63, 99, 0.22), transparent); }
.quick-nav a.active::after { height: 3.75px; background: rgb(212, 154, 118); }
.activity-body { background: radial-gradient(at 0px 20%, rgba(101, 54, 83, 0.133), transparent 35%), radial-gradient(at 100% 65%, rgba(128, 65, 81, 0.133), transparent 45%), rgb(25, 17, 36); }
.section { padding-top: 115px; }
.feedback-ready .section-heading { display: flex; position: relative; justify-content: center; align-items: center; gap: 10px; margin-bottom: 30px; min-height: 150px; }
.feedback-ready .section-heading > div:not(.character-medallion) { width: min(1062.5px, 100%); }
.feedback-ready .section-heading > .character-medallion { width: 145px; height: 145px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: rgb(243, 230, 218); border: 3.75px solid rgb(172, 121, 105); box-shadow: rgba(86, 54, 75, 0.267) 0px 0px 0px 7.5px; }
.character-medallion > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 10%; }
#tasks .character-medallion > img { object-position: 35% 8%; }
#lottery .character-medallion { background: radial-gradient(rgb(109, 51, 72), rgb(44, 26, 53)); border: 0px; box-shadow: none; overflow: visible; }
#lottery .character-medallion > img { object-fit: contain; }
.section-intro { max-width: 1225px; margin: 0px auto 43.75px; text-align: center; font-size: 21.25px; line-height: 1.95; color: rgb(207, 189, 206); }
.section-intro strong { color: rgb(241, 198, 158); }
.section-tools { display: flex; justify-content: flex-end; margin-bottom: 22.5px; }
.section-tools .text-button { font-size: 21.25px; }
.button.primary, .reward-status.claimable, .task-action.ready { background: radial-gradient(at 50% 115%, rgb(187, 86, 117), transparent 75%), linear-gradient(105deg, rgb(112, 43, 76), rgb(150, 59, 88), rgb(101, 35, 65)); border: 1.25px solid rgb(218, 166, 128); box-shadow: rgb(50, 23, 47) 0px 0px 0px 3.75px inset, rgba(214, 163, 123, 0.376) 0px 0px 0px 5px inset; color: rgb(255, 225, 178); font-family: "Microsoft YaHei", sans-serif; font-size: 23.75px; font-weight: 600; letter-spacing: 1.25px; position: relative; }
.button.primary { border-radius: 11.25px 2.5px; background-image: none, radial-gradient(at 50% 115%, rgb(187, 86, 117), transparent 75%), linear-gradient(105deg, rgb(112, 43, 76), rgb(150, 59, 88), rgb(101, 35, 65)); background-size: 162.5px 67.5px, auto, auto; background-position: right center, center center, center center; background-repeat: no-repeat; }
.button.primary.small { font: 600 22.5px / 1.5 "Microsoft YaHei", sans-serif; min-height: 65px; }
.button.secondary { font-family: "Microsoft YaHei", sans-serif; font-size: 22.5px; color: rgb(220, 195, 178); border-color: rgba(188, 148, 107, 0.6); background: rgb(46, 32, 56); box-shadow: rgb(32, 21, 38) 0px 0px 0px 3.75px inset; border-radius: 10px 2.5px; }
.button:not(:disabled):hover { filter: brightness(1.13); }
.text-button { color: rgb(224, 182, 143); font: 20px / 1.65 "Microsoft YaHei", sans-serif; min-height: 50px; }
.text-button:hover { color: rgb(255, 224, 180); }
.reward-grid { gap: 27.5px; }
.reward-card, .reward-card.locked { padding: 35px 22.5px 25px; min-height: 400px; background: linear-gradient(145deg, rgba(65, 36, 59, 0.533), rgb(36, 23, 47)); border: 1.25px solid rgba(177, 140, 105, 0.467); border-radius: 17.5px 3.75px; }
.reward-card::before { border-color: rgba(185, 150, 114, 0.2); border-radius: 12.5px 0px; }
.reward-card.available { background: radial-gradient(at center top, rgba(124, 62, 84, 0.25), transparent 75%), rgb(46, 29, 54); }
.reward-card .reward-medal { display: block; width: 115px; height: 115px; background: none; border: 0px; outline: 0px; margin: 5px auto 20px; filter: none; color: inherit; }
.reward-medal img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; border: 1.25px solid rgba(178, 139, 101, 0.333); }
.reward-card h3 { font: 27.5px / 1.45 "Microsoft YaHei", sans-serif; color: rgb(234, 208, 176); letter-spacing: 0px; }
.reward-card h3 b { font-size: 40px; margin-right: 3.75px; }
.reward-card h3 span { margin-left: 10px; }
.reward-card p { font-size: 18.75px; color: rgb(189, 165, 187); margin-top: 10px; }
.reward-card .reward-status { display: block; width: 100%; min-height: 60px; font: 21.25px / 1.5 "Microsoft YaHei", sans-serif; border: 1.25px solid rgba(187, 144, 105, 0.48); margin: 27.5px auto 0px; border-radius: 5px; padding: 11.25px 6.25px; background: rgb(48, 32, 53); color: rgb(215, 188, 166); }
.reward-card .reward-status.claimable { background: linear-gradient(100deg, rgb(120, 48, 76), rgb(172, 74, 98)); color: rgb(255, 224, 179); border-color: rgb(217, 166, 119); box-shadow: rgba(57, 27, 50, 0.6) 0px 0px 0px 3.75px inset; }
.reward-card .reward-status.claimed { border-color: rgba(152, 124, 104, 0.467); color: rgb(172, 154, 170); background: rgb(39, 28, 46); box-shadow: rgba(28, 20, 35, 0.267) 0px 0px 0px 3.75px inset; }
.framed { background: linear-gradient(135deg, rgba(58, 38, 61, 0.533), rgba(36, 24, 46, 0.933)); border-color: rgba(178, 138, 103, 0.467); border-radius: 12.5px; }
.framed::before, .framed::after { display: none; }
.team-panel { padding: 40px; margin-top: 37.5px; }
.panel-heading { align-items: flex-start; gap: 25px; }
.panel-heading h3 { font: 600 31.25px / 1.6 "Microsoft YaHei", sans-serif; letter-spacing: 0px; }
.panel-heading p { font: 21.25px / 1.75 "Microsoft YaHei", sans-serif; color: rgb(198, 173, 191); max-width: none; }
.panel-heading > .text-button { font-size: 21.25px; white-space: nowrap; }
.team-grid { grid-template-columns: repeat(8, minmax(0px, 1fr)); gap: 22.5px; margin: 46.25px 0px; }
.member { position: relative; min-width: 0px; }
.avatar { width: 110px; max-width: 100%; height: auto; aspect-ratio: 1; border-width: 2.5px; outline: 0px; box-shadow: rgba(189, 146, 115, 0.165) 0px 0px 0px 5px; margin-bottom: 17.5px; }
.avatar.avatar-art { background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/adventurers.png"); background-size: 345% auto; background-position: 24% 45%; box-shadow: rgba(189, 146, 115, 0.165) 0px 0px 0px 5px; }
.member:nth-child(3n+2) .avatar-art { background-position: 52% 45%; }
.member:nth-child(3n) .avatar-art { background-position: 84% 45%; }
.member strong { font: 20px / 1.6 "Microsoft YaHei", sans-serif; color: rgb(232, 215, 217); overflow-wrap: anywhere; display: block; min-height: 65px; }
.member.empty strong { color: rgb(212, 178, 143); }
.member.empty .avatar { color: rgb(230, 194, 146); background: rgb(44, 29, 53); font-size: 42.5px; }
.leader-tag { position: absolute; left: -1.25px; top: -7.5px; z-index: 2; background: rgb(220, 177, 120); color: rgb(69, 37, 55); font: 15px / 1.1 "Microsoft YaHei", sans-serif; writing-mode: vertical-rl; padding: 7.5px 5px 15px; clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 50% 86%, 0px 100%); border: 0px; box-shadow: none; }
.team-footer { gap: 25px; padding-top: 30px; }
.team-footer p { font-size: 20px; color: rgb(198, 176, 196); line-height: 1.75; }
.team-footer p svg { width: 27.5px; height: 27.5px; flex: 0 0 auto; }
.team-footer .button { white-space: nowrap; }
.section-note { font-size: 18.75px; line-height: 1.8; margin-top: 22.5px; color: rgb(190, 165, 191); }
.section-note .text-button { font-size: 20px; }
.points-overview { padding: 37.5px; grid-template-columns: 387.5px 1fr; gap: 43.75px; background: rgb(42, 28, 51); border-color: rgba(178, 139, 105, 0.4); }
.personal-points { gap: 25px; }
.personal-points > svg { width: 57.5px; height: 57.5px; color: rgb(212, 174, 132); }
.personal-points p { font-size: 25px; color: rgb(222, 197, 210); }
.personal-points strong { font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: normal; font-stretch: normal; font-size: 60px; line-height: 1.3; font-family: Arial, sans-serif; color: rgb(246, 212, 155); display: block; }
.points-title { font-size: 25px; }
.points-title strong { font: 37.5px / 1.4 Arial, sans-serif; }
.points-title small { font-size: 21.25px; }
.squad-points p { font-size: 18.75px; line-height: 1.75; margin-top: 20px; }
.squad-points p > svg { width: 25px; height: 25px; flex: 0 0 auto; margin-top: 3.75px; }
.progress-track { height: 11.25px; }
.task-header { margin-top: 35px; }
.task-tabs { gap: 35px; }
.task-tabs button { font: 22.5px / 1.6 "Microsoft YaHei", sans-serif; padding: 16.25px 0px; }
.task-header > span { font-size: 17.5px; color: rgb(191, 167, 189); }
.task-grid { gap: 25px; }
.task-card { padding: 30px; gap: 25px 15px; grid-template-columns: 60px 1fr; background: rgb(43, 29, 52); border-color: rgba(170, 128, 101, 0.396); border-radius: 12.5px; }
.task-icon { width: 60px; height: 60px; background: rgb(73, 44, 71); border: 1.25px solid rgba(183, 139, 104, 0.467); }
.task-icon svg { width: 36.25px; height: 36.25px; stroke-width: 1.7; }
.task-card .task-points { font: 40px / 1.4 Arial, sans-serif; color: rgb(240, 195, 144); }
.task-points small { font: 17.5px / 1.5 "Microsoft YaHei", sans-serif; margin-left: 6.25px; }
.task-card h3 { font: 600 23.75px / 1.5 "Microsoft YaHei", sans-serif; letter-spacing: 0px; color: rgb(237, 213, 195); }
.task-card p { font-size: 18.75px; line-height: 1.7; margin-top: 10px; }
.task-card .task-info { min-height: 120px; }
.task-kind { font-size: 17.5px; color: rgb(191, 169, 191); }
.task-action { font: 20px / 1.5 "Microsoft YaHei", sans-serif; min-height: 56.25px; min-width: 125px; border-radius: 5px; background: rgb(83, 37, 64); border-color: rgba(183, 141, 108, 0.5); padding: 10px 15px; }
.task-action.ready { font-size: 20px; letter-spacing: 0px; }
.task-action.done { border: 1.25px solid rgba(150, 121, 96, 0.533); background: rgb(37, 25, 46); color: rgb(169, 145, 166); }
.lottery-panel { padding: 42.5px 47.5px; }
.pool { padding-bottom: 37.5px; }
.tag { font: 20px / 1.6 "Microsoft YaHei", sans-serif; padding: 6.25px 17.5px; background: none; border: 0px; color: rgb(200, 173, 191); }
.pool p { font: 27.5px / 1.6 "Microsoft YaHei", sans-serif; letter-spacing: 1.25px; margin-top: 18.75px; }
.pool > strong { font-style: normal; font-variant: lining-nums tabular-nums; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: normal; font-stretch: normal; font-size: 80px; line-height: 1.3; font-family: Arial, sans-serif; color: rgb(244, 212, 163); letter-spacing: 2.5px; text-shadow: none; }
.pool-total { font-size: 18.75px; line-height: 1.8; color: rgb(197, 170, 190); margin-top: 15px; }
.lottery-body { grid-template-columns: minmax(0px, 1fr) 362.5px; gap: 37.5px; padding-top: 37.5px; }
.reels { padding: 15px; gap: 12.5px; border: 1.25px solid rgb(209, 161, 114); border-radius: 10px; background: rgb(28, 19, 38); box-shadow: rgba(93, 51, 71, 0.2) 0px 0px 0px 5px inset, rgba(125, 49, 74, 0.1) 0px 0px 32.5px; }
.reel { height: 200px; position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(rgb(117, 66, 92), rgb(53, 33, 55) 80%); border: 1.25px solid rgba(169, 125, 103, 0.467); border-radius: 5px; padding: 0px; font-family: Arial, sans-serif; }
.reel > svg { width: 90px; height: 62.5px; stroke-width: 1; fill: rgb(199, 120, 130); stroke: rgb(229, 178, 151); color: rgb(229, 178, 151); filter: drop-shadow(rgba(225, 128, 94, 0.2) 0px 0px 15px); }
.reel-number { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-style: normal; font-variant: lining-nums tabular-nums; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: 600; font-stretch: normal; font-size: clamp(37.5px, 4vw, 60px); line-height: 1; font-family: Arial, sans-serif; letter-spacing: -1.25px; color: rgb(255, 224, 163); }
.reels.spinning .reel { animation: auto ease 0s 1 normal none running none; }
.reels.spinning .reel-number { animation: 0.11s linear 0s infinite normal none running reel-slide; }
.reels.winner .reel { background: radial-gradient(rgb(146, 81, 55), rgb(65, 37, 53)); border-color: rgb(226, 177, 126); }
.machine-caption { display: flex; justify-content: space-between; gap: 18.75px; align-items: center; padding: 20px 0px 23.75px; }
.machine-caption > p { font-size: 18.75px; color: rgb(198, 170, 191); margin: 0px; }
.machine-caption > .text-button { font-size: 17.5px; white-space: nowrap; }
.draw-button { width: 100%; min-height: 77.5px; font-size: 27.5px !important; }
.draw-cost { font-size: 20px; margin-top: 21.25px; color: rgb(198, 173, 192); }
.draw-cost strong, .draw-cost b { padding: 0px 5px; color: rgb(239, 195, 147); }
.eligibility { padding-left: 32.5px; border-color: rgba(161, 121, 98, 0.376); }
.eligibility h3 { font: 600 26.25px / 1.5 "Microsoft YaHei", sans-serif; color: rgb(232, 198, 165); margin-bottom: 25px; }
.condition { font-size: 18.75px; gap: 11.25px; margin: 22.5px 0px; line-height: 1.65; flex-wrap: wrap; color: rgb(210, 185, 205); }
.condition > svg { width: 25px; height: 25px; flex: 0 0 auto; }
.condition > span:last-child { font: 17.5px / 1.6 "Microsoft YaHei", sans-serif; color: rgb(217, 181, 142); }
.condition.missing { color: rgb(237, 164, 168); }
.condition.missing > span:last-child { color: rgb(237, 164, 168); }
.rules-section { padding-bottom: 100px; }
.rules-list { list-style: decimal; margin: 22.5px 0px 0px; padding: 0px 0px 0px 37.5px; }
.rules-list li { padding: 0px 0px 25px 15px; font-size: 20px; line-height: 1.95; color: rgb(203, 183, 202); }
.rules-list li::marker { font: 600 23.75px "Microsoft YaHei", sans-serif; color: rgb(232, 188, 140); }
.rules-list strong { color: rgb(237, 187, 144); font-weight: 600; }
footer { background: rgb(18, 13, 27); border-top: 1.25px solid rgba(185, 145, 104, 0.22); padding: 40px; display: flex; justify-content: center; }
footer .official-brand .logo-crop { width: 237.5px; }
.back-top { background: rgb(45, 28, 55); color: rgb(237, 195, 154); border-color: rgb(181, 140, 107); }
.modal { width: min(800px, 100% - 40px); max-width: none; max-height: 110dvh; border: 1.25px solid rgb(201, 154, 118); border-radius: 15px 3.75px; background: radial-gradient(at 50% 0px, rgba(101, 64, 79, 0.333), transparent 65%), rgb(42, 28, 52); color: rgb(240, 221, 207); padding: 45px; box-shadow: rgba(5, 2, 11, 0.6) 0px 37.5px 150px, rgb(60, 37, 63) 0px 0px 0px 6.25px inset; overscroll-behavior: contain; }
.modal::backdrop { background: rgba(13, 7, 25, 0.808); backdrop-filter: blur(6.25px); }
.modal h2 { font: 600 35px / 1.5 "Microsoft YaHei", sans-serif; letter-spacing: 1.25px; color: rgb(242, 206, 164); text-align: center; margin: 6.25px 0px 30px; outline: none; }
.modal p { font: 21.25px / 1.85 "Microsoft YaHei", sans-serif; color: rgb(223, 200, 215); margin: 17.5px 0px; text-align: center; }
.modal .modal-icon { width: 57.5px; height: 57.5px; margin: 0px auto 22.5px; stroke-width: 1.6; color: rgb(214, 173, 135); }
.modal .notice { font-size: 18.75px; line-height: 1.9; text-align: center; background: rgba(196, 139, 103, 0.063); border-left: 0px; border-top: 1.25px solid rgba(172, 130, 103, 0.318); border-bottom: 1.25px solid rgba(172, 130, 103, 0.318); padding: 20px; color: rgb(199, 175, 195); }
.modal .actions { margin-top: 32.5px; gap: 17.5px; }
.modal .actions .button { font: 600 22.5px / 1.5 "Microsoft YaHei", sans-serif; min-height: 65px; padding: 15px; letter-spacing: 0px; }
.modal .role-details p { text-align: left; margin: 10px 0px; }
.modal label { font-size: 20px; color: rgb(223, 195, 207); margin-top: 20px; }
.modal select, .modal input { font: 21.25px / 1.5 "Microsoft YaHei", sans-serif; min-height: 60px; width: 100%; padding: 15px; border: 1.25px solid rgba(173, 132, 104, 0.46); background: rgb(28, 20, 39); color: rgb(234, 211, 190); border-radius: 5px; margin-top: 10px; }
.modal .share-link { font-size: 17.5px; }
.modal table { font: 20px / 1.6 "Microsoft YaHei", sans-serif; width: 100%; table-layout: fixed; }
.modal th, .modal td { text-align: center; padding: 16.25px 6.25px; overflow-wrap: anywhere; border-color: rgba(166, 128, 101, 0.333); color: rgb(216, 192, 209); }
.modal th { color: rgb(238, 205, 167); }
.modal .pagination { align-items: center; gap: 15px; font-size: 20px; margin-top: 27.5px; }
.modal .pagination button { font-size: 20px; padding: 12.5px 7.5px; color: rgb(230, 187, 151); }
.modal .pagination button:disabled { color: rgb(148, 126, 147); }
.dialog-back { text-align: center; margin-top: 22.5px; }
.dialog-back .text-button { font-size: 20px; min-height: 55px; padding: 5px 25px; }
.prize-amount { font: 600 42.5px / 1.5 Arial, sans-serif; color: rgb(245, 202, 145); margin: 0px 11.25px; }
.poster-preview { max-width: 456.25px; margin: 0px auto; padding: 0px; border: 1.25px solid rgb(198, 161, 130); background: rgb(255, 249, 237); overflow: hidden; }
.poster-preview .official-poster { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; margin: 0px; }
.poster-caption { display: flex; align-items: center; gap: 10px; padding: 17.5px 12.5px; text-align: left; }
.poster-caption > div { flex: 1 1 0%; min-width: 0px; }
.poster-caption p { font: 12.5px / 1.6 "Microsoft YaHei", sans-serif; color: rgb(76, 48, 67); text-align: left; margin: 0px 0px 6.25px; }
.poster-caption strong { font: 600 18.75px / 1.6 "Microsoft YaHei", sans-serif; color: rgb(162, 47, 75); margin: 0px; }
.poster-caption .invite-qr { display: block; width: 107.5px; height: 107.5px; max-height: none; flex: 0 0 auto; object-fit: contain; background: rgb(255, 255, 255); }
.modal .share-hint { font-size: 17.5px; color: rgb(195, 168, 191); }
.qr-placeholder { margin: 27.5px auto; width: 200px; height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1.25px dashed rgb(200, 157, 119); background: rgb(53, 35, 60); color: rgb(228, 195, 166); font-size: 25px; }
.qr-placeholder small { font-size: 17.5px; }
.toast { font-size: 20px; line-height: 1.6; background: rgb(232, 195, 159); color: rgb(67, 35, 53); bottom: 40px; }
@keyframes lotus-breathe { 
  0%, 100% { transform: translateY(0px); filter: drop-shadow(rgba(224, 168, 120, 0.267) 0px 0px 3.75px); }
  50% { transform: translateY(-3.75px); filter: drop-shadow(rgba(224, 168, 120, 0.533) 0px 0px 11.25px); }
}
@keyframes reel-slide { 
  0% { transform: translateY(-25%); opacity: 0.4; }
  100% { transform: translateY(20%); opacity: 1; }
}
@media (min-width: 1600px) {
  .hero .hero-scene { height: 1062.5px; background-position: center 48%; }
  .hero .hero-content { padding-top: 737.5px; }
}
@media (max-width: 1100px) {
  .container { width: calc(100% - 60px); }
  .hero .hero-content { padding-top: 525px; }
  .hero .hero-scene { height: 825px; background-position: 65% 40%; }
  .team-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 32.5px; }
  .avatar { width: 112.5px; }
  .member strong { min-height: 32.5px; }
  .points-overview { grid-template-columns: 312.5px 1fr; gap: 30px; padding: 32.5px; }
  .task-card { padding: 25px; }
  .task-card .task-info { min-height: 137.5px; }
  .task-bottom { gap: 12.5px; }
  .task-kind { font-size: 16.25px; }
  .task-action { min-width: 112.5px; padding: 10px; font-size: 18.75px; }
  .lottery-body { grid-template-columns: 1fr; }
  .eligibility { border-left: 0px; border-top: 1.25px solid rgba(161, 121, 98, 0.333); padding: 31.25px 0px 0px; }
  .eligibilityList { display: grid; }
  .condition { margin: 15px 0px; }
  .hero-bottom strong { font-size: 22.5px; }
  .hero-bottom > div { gap: 15px; }
  .section-heading { gap: 0px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 85px; }
  .container { width: calc(100% - 40px); }
  .site-header:has(.official-brand) { min-height: 97.5px; padding: 12.5px 21.25px; }
  .official-brand .logo-crop { width: 132.5px; }
  .site-header .account { font-size: 17.5px; max-width: 56%; text-align: right; overflow-wrap: anywhere; }
  .hero .hero-scene { height: 550px; background-size: auto 568.75px; background-position: 73% top; mask-image: linear-gradient(rgb(0, 0, 0) 55%, transparent 100%); }
  .hero-shade { background: linear-gradient(transparent 35%, rgba(25, 17, 36, 0.565) 54%, rgb(25, 17, 36) 69%); }
  .hero .hero-content { padding-top: 443.75px; padding-bottom: 187.5px; width: calc(100% - 15px); }
  .hero h1.title-art { aspect-ratio: 7.5 / 1; width: 100%; filter: drop-shadow(rgba(0, 0, 0, 0.533) 0px 2.5px 5px); }
  .hero .hero-subtitle { font-size: 17.5px; letter-spacing: 0px; line-height: 1.8; max-width: 92%; margin-top: 15px; }
  .hero-actions { --cta-width: min(310px,calc(100% - 135px)); gap: 12.5px; margin-top: 40px; }
  .hero-actions > .primary { min-height: 77.5px; padding: 15px; font-size: 23.75px !important; }
  .hero-actions > .primary > svg { width: 50px; height: 36.25px; left: calc(50% - 25px); top: -25px; }
  .hero-actions > .hero-share { width: 55px; height: 55px; }
  .hero-date { font-size: 15px; margin-top: 27.5px; }
  .hero-date span { font-size: 16.25px; margin-left: 6.25px; letter-spacing: 0px; }
  .hero-bottom { bottom: 30px; gap: 10px; padding-top: 25px; width: calc(100% - 30px); }
  .hero-bottom > div { flex-direction: column; gap: 11.25px; }
  .hero-bottom svg { width: 33.75px; height: 33.75px; }
  .hero .hero-bottom strong { font: 17.5px / 1.5 "Microsoft YaHei", sans-serif; white-space: nowrap; }
  .quick-nav a { font: 18.75px / 1.6 "Microsoft YaHei", sans-serif; padding: 21.25px 2.5px; }
  .section { padding-top: 72.5px; }
  .feedback-ready .section-heading { min-height: 95px; margin-bottom: 26.25px; gap: 0px; }
  .feedback-ready .section-heading > div:not(.character-medallion) { width: 100%; }
  .feedback-ready .section-heading > .character-medallion { position: absolute; width: 72.5px; height: 72.5px; top: -16.25px; left: 1.25px; transform: translateY(-50%); border-width: 2.5px; box-shadow: rgba(86, 54, 75, 0.267) 0px 0px 0px 3.75px; }
  .section-intro { font-size: 18.75px; line-height: 1.9; margin-bottom: 32.5px; text-align: left; }
  .reward-grid { gap: 11.25px; }
  .reward-card, .reward-card.locked { padding: 22.5px 7.5px 17.5px; min-height: 343.75px; border-radius: 11.25px 2.5px; }
  .reward-card .reward-medal { width: 75px; height: 75px; margin: 0px auto 15px; }
  .reward-medal img { border-radius: 12.5px; }
  .reward-card h3 { font-size: 22.5px; }
  .reward-card h3 b { font-size: 36.25px; }
  .reward-card h3 span { display: block; margin: 2.5px 0px 0px; font-size: 22.5px; }
  .reward-card p { font-size: 15px; margin-top: 10px; }
  .reward-card .reward-status { font-size: 17.5px; min-height: 57.5px; padding: 10px 2.5px; margin-top: 21.25px; white-space: nowrap; }
  .team-panel { padding: 27.5px 20px; margin-top: 27.5px; }
  .panel-heading { display: block; }
  .panel-heading h3 { font-size: 28.75px; }
  .panel-heading p { font-size: 20px; line-height: 1.8; margin-top: 8.75px; max-width: none; }
  .panel-heading > .text-button { font-size: 20px; margin-top: 11.25px; }
  .team-grid { gap: 30px 15px; margin: 33.75px 0px; }
  .avatar { width: 80px; margin-bottom: 12.5px; }
  .member strong { font-size: 17.5px; line-height: 1.6; min-height: 55px; }
  .leader-tag { left: -3.75px; font-size: 13.75px; }
  .member.empty .avatar { font-size: 36.25px; }
  .team-footer { padding-top: 22.5px; flex-direction: column; align-items: stretch; gap: 22.5px; }
  .team-footer p { font-size: 18.75px; line-height: 1.85; }
  .team-footer .button { width: 100%; min-height: 65px; font-size: 22.5px !important; }
  .section-note { display: block; font-size: 17.5px; line-height: 1.9; margin-top: 20px; }
  .section-note button { display: block; font-size: 18.75px; }
  .points-overview { display: block; padding: 27.5px; }
  .personal-points { border-right: 0px; border-bottom: 1.25px solid rgba(175, 137, 100, 0.286); padding-bottom: 23.75px; gap: 22.5px; }
  .personal-points > div { display: flex; align-items: center; justify-content: space-between; gap: 12.5px; width: 100%; }
  .personal-points p { font-size: 23.75px; }
  .personal-points strong { font-size: 52.5px; }
  .personal-points > svg { width: 45px; height: 45px; flex: 0 0 auto; }
  .squad-points { padding-top: 26.25px; }
  .points-title { font-size: 22.5px; }
  .points-title strong { font-size: 32.5px; }
  .points-title small { font-size: 18.75px; }
  .squad-points p { font-size: 17.5px; line-height: 1.8; }
  .task-header { margin-top: 27.5px; display: block; }
  .task-tabs { gap: 30px; }
  .task-tabs button { font-size: 21.25px; }
  .task-header > span { font-size: 16.25px; display: block; padding: 12.5px 0px 18.75px; }
  .task-grid { grid-template-columns: 1fr; gap: 17.5px; }
  .task-card { padding: 25px; grid-template-columns: 56.25px 1fr; gap: 17.5px 12.5px; }
  .task-card .task-info { min-height: 0px; }
  .task-card h3 { font-size: 23.75px; }
  .task-card p { font-size: 18.75px; }
  .task-card .task-points { font-size: 36.25px; }
  .task-points small { font-size: 17.5px; }
  .task-card .task-bottom { display: flex; text-align: left; justify-content: space-between; align-items: center; margin-top: 2.5px; padding-top: 18.75px; }
  .task-kind { font-size: 17.5px; margin: 0px; }
  .task-action, .task-action.ready { width: auto; min-width: 157.5px; font-size: 21.25px; min-height: 57.5px; }
  .section-tools { margin-top: -7.5px; }
  .section-tools .text-button { font-size: 20px; }
  .lottery-panel { padding: 28.75px 17.5px; }
  .pool { padding-bottom: 30px; }
  .tag { font-size: 17.5px; padding: 0px; }
  .pool p { font-size: 23.75px; letter-spacing: 0px; margin-top: 17.5px; }
  .pool > strong { font-size: 55px; letter-spacing: 1.25px; }
  .pool-total { font-size: 17.5px; line-height: 1.8; display: block; max-width: 362.5px; margin: 15px auto 0px; }
  .lottery-body { gap: 27.5px; padding-top: 30px; }
  .reels { padding: 10px; gap: 8.75px; }
  .reel { height: 143.75px; }
  .reel > svg { width: 67.5px; height: 47.5px; }
  .reel-number { font-size: clamp(31.25px, 9.375vw, 42.5px); letter-spacing: -1.25px; }
  .machine-caption { display: block; padding: 16.25px 0px 21.25px; text-align: center; }
  .machine-caption > p { font-size: 17.5px; }
  .machine-caption > .text-button { font-size: 17.5px; min-height: 45px; }
  .draw-button { min-height: 72.5px; font-size: 26.25px !important; }
  .draw-cost { font-size: 17.5px; }
  .eligibility { padding-top: 27.5px; }
  .eligibility h3 { font-size: 25px; margin-bottom: 18.75px; }
  .condition { font-size: 17.5px; gap: 10px; }
  .condition > span:last-child { font-size: 16.25px; }
  .rules-section { padding-bottom: 56.25px; }
  .rules-list { padding-left: 28.75px; margin-top: 2.5px; }
  .rules-list li { font-size: 18.75px; line-height: 1.95; padding-left: 7.5px; padding-bottom: 22.5px; }
  .rules-list li::marker { font-size: 21.25px; }
  .modal { width: calc(100% - 30px); padding: 31.25px 25px; max-height: 112.5dvh; }
  .modal h2 { font-size: 30px; line-height: 1.55; margin-bottom: 25px; letter-spacing: 0px; }
  .modal p { font-size: 20px; line-height: 1.85; }
  .modal .notice { font-size: 17.5px; padding: 17.5px 12.5px; }
  .modal .actions { gap: 12.5px; margin-top: 28.75px; }
  .modal .actions .button { font-size: 20px; padding: 13.75px 10px; min-height: 60px; }
  .modal label { font-size: 20px; }
  .modal select { font-size: 20px; }
  .modal table { font-size: 17.5px; }
  .modal th, .modal td { padding: 15px 5px; }
  .modal .pagination, .modal .pagination button { font-size: 17.5px; }
  .modal .role-details p { font-size: 20px; overflow-wrap: anywhere; }
  .poster-caption { padding: 15px 10px; gap: 6.25px; }
  .poster-caption p { font-size: 11.25px; }
  .poster-caption strong { font-size: 16.25px; }
  .poster-caption .invite-qr { width: 90px; height: 90px; }
  .modal .share-hint { font-size: 17.5px; }
  .prize-amount { font-size: 37.5px; }
  footer .official-brand .logo-crop { width: 206.25px; }
}
@media (max-width: 360px) {
  .site-header .account { font-size: 16.25px; }
  .hero .hero-subtitle { font-size: 15px; }
  .hero .hero-bottom strong { font-size: 15px; }
  .hero-actions > .primary { font-size: 21.25px !important; }
  .reward-card .reward-status { font-size: 15px; }
  .reward-card h3 span { font-size: 20px; }
  .avatar { width: 64px; }
  .team-grid { gap: 22px 8px; }
  .member strong { font-size: 14px; min-height: 40px; }
  .member.empty .avatar { font-size: 28px; }
  .modal .actions { flex-wrap: wrap; }
  .modal .actions .button { flex-basis: 100%; }
  .poster-caption strong { font-size: 13.75px; }
  .poster-caption .invite-qr { width: 80px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { scroll-behavior: auto !important; animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
@media (min-width: 701px) {
  .hero .hero-scene { height: 825px; background-position: center 36%; }
  .hero .hero-content { padding-top: 325px; padding-bottom: 190px; }
  .hero h1.title-art { width: 61%; max-width: 875px; margin-left: 0px; }
  .hero .hero-subtitle { text-align: left; max-width: 825px; margin: 10px 0px 0px; font-size: 21.25px; }
  .hero-actions { margin-top: 43.75px; }
  .hero-date { margin-top: 25px; }
}
.hero h1.title-art { aspect-ratio: 5.36 / 1; background-size: 140% 500%; }
.hero-actions > .primary > svg { stroke: rgb(233, 189, 147); fill: rgb(114, 47, 75); }
@media (max-width: 700px) {
  .reward-card .reward-status { font-size: 18.75px; }
  .reward-card p { font-size: 15px; white-space: nowrap; }
  .hero .hero-content { padding-top: 421.25px; }
}

/* ==================== 04 配色与弹窗 ==================== */
:root { --bg: #21191b; --text: #f6e9d5; --muted: #c6b6a7; --gold: #edc78c; --line: #c69b6255; }
body, .hero { background: rgb(33, 25, 27); color: var(--text); }
.site-header:has(.official-brand) { background: rgb(33, 25, 27); border-bottom-color: rgba(189, 146, 111, 0.22); }
.hero-shade { background: linear-gradient(transparent 0%, transparent 40%, rgba(33, 25, 27, 0.533) 65%, rgb(33, 25, 27) 87%); }
.hero-actions > .hero-share { background: rgb(56, 39, 41); color: rgb(241, 205, 150); }
.hero-actions > .primary > svg { fill: rgb(136, 59, 61); stroke: rgb(241, 202, 145); }
.hero-date { color: rgb(202, 180, 165); }
.hero-date span { color: rgb(234, 208, 170); }
.quick-nav { background: rgba(46, 35, 33, 0.96); border-color: rgba(190, 148, 91, 0.4); }
.quick-nav a { color: rgb(210, 193, 176); }
.quick-nav a.active { color: rgb(255, 224, 161); background: linear-gradient(0deg, rgba(189, 135, 80, 0.19), transparent); }
.quick-nav a.active::after { background: rgb(225, 182, 111); }
.activity-body { overflow-x: clip; background: radial-gradient(at 0px 15%, rgba(134, 75, 51, 0.15), transparent 38%), radial-gradient(at 100% 65%, rgba(152, 76, 54, 0.125), transparent 40%), rgb(33, 25, 27); }
.section-intro { color: rgb(206, 190, 174); }
.section-intro strong { color: rgb(242, 200, 137); }
.button.primary, .reward-status.claimable, .task-action.ready { color: rgb(255, 229, 176); border-color: rgb(222, 183, 123); background: linear-gradient(110deg, rgb(128, 55, 60), rgb(175, 88, 75), rgb(112, 48, 50)); box-shadow: rgb(60, 35, 34) 0px 0px 0px 3.75px inset, rgba(227, 187, 123, 0.4) 0px 0px 0px 5px inset; }
.button.primary { background-image: none, radial-gradient(at 50% 115%, rgb(199, 128, 93), transparent 75%), linear-gradient(110deg, rgb(128, 55, 60), rgb(175, 88, 75), rgb(112, 48, 50)); background-size: 162.5px 67.5px, auto, auto; background-position: right center, center center, center center; background-repeat: no-repeat; }
.button.secondary { background: rgb(59, 45, 39); color: rgb(237, 207, 170); box-shadow: rgb(37, 29, 27) 0px 0px 0px 3.75px inset; border-color: rgb(195, 155, 102); }
.text-button { color: rgb(228, 188, 131); }
.text-button:hover { color: rgb(255, 224, 164); }
.reward-card, .reward-card.locked { background: linear-gradient(145deg, rgb(73, 51, 40), rgb(44, 34, 32)); border-color: rgba(186, 144, 91, 0.5); }
.reward-card.available { background: radial-gradient(at center top, rgba(167, 106, 60, 0.23), transparent 80%), rgb(56, 41, 31); }
.reward-card p { color: rgb(197, 178, 162); }
.reward-card .reward-status { background: rgb(67, 49, 36); color: rgb(228, 201, 161); }
.reward-card .reward-status.claimable { background: linear-gradient(105deg, rgb(141, 64, 58), rgb(179, 101, 76)); border-color: rgb(220, 178, 114); box-shadow: rgba(73, 43, 35, 0.6) 0px 0px 0px 3.75px inset; }
.reward-card .reward-status.claimed { background: rgb(48, 38, 34); color: rgb(188, 174, 157); border-color: rgba(165, 138, 104, 0.467); box-shadow: none; }
.framed { background: linear-gradient(135deg, rgb(66, 48, 37), rgba(43, 33, 31, 0.933)); border-color: rgba(188, 149, 94, 0.467); }
.panel-heading p, .team-footer p { color: rgb(205, 187, 172); }
.member strong { color: rgb(237, 223, 202); }
.member.empty .avatar { background: rgb(53, 41, 36); color: rgb(233, 199, 142); }
.leader-tag { background: rgb(227, 187, 119); color: rgb(75, 48, 37); }
.section-note { color: rgb(196, 178, 166); }
#tasks { position: relative; isolation: isolate; padding-bottom: 80px; margin-top: 70px; }
#tasks::before { content: ""; position: absolute; z-index: -1; inset: 0px auto 0px 50%; width: 125vw; transform: translateX(-50%); background: radial-gradient(at 50% 0px, rgba(189, 138, 65, 0.25), transparent 55%), linear-gradient(rgb(52, 39, 31), rgb(69, 49, 32) 50%, rgb(48, 36, 30)); border-top: 1.25px solid rgba(216, 173, 97, 0.29); border-bottom: 1.25px solid rgba(179, 138, 80, 0.25); pointer-events: none; }
#tasks .section-intro { color: rgb(224, 203, 176); }
#tasks .section-intro strong { color: rgb(255, 221, 160); }
#tasks .character-medallion { border-color: rgb(215, 171, 99); box-shadow: rgba(211, 161, 92, 0.13) 0px 0px 0px 7.5px; }
.points-overview { background: linear-gradient(110deg, rgb(113, 81, 49), rgb(78, 56, 37) 65%, rgb(99, 72, 43)); border-color: rgba(214, 173, 109, 0.6); box-shadow: rgba(247, 219, 166, 0.17) 0px 1.25px inset, rgba(28, 19, 15, 0.14) 0px 17.5px 50px; }
.personal-points > svg { color: rgb(240, 198, 118); }
.personal-points p, .points-title { color: rgb(243, 223, 187); }
.personal-points strong, .points-title strong { color: rgb(255, 226, 162); }
.points-title small { color: rgb(205, 183, 143); }
.personal-points { border-color: rgba(217, 177, 106, 0.333); }
.squad-points p { color: rgb(225, 205, 173); }
.squad-points p > svg { color: rgb(240, 202, 122); }
.progress-track { background: rgb(45, 33, 25); box-shadow: rgba(20, 14, 11, 0.467) 0px 1.25px 3.75px inset; }
.progress-track span { background: linear-gradient(90deg, rgb(181, 124, 57), rgb(243, 209, 131)); box-shadow: rgba(224, 177, 91, 0.22) 0px 0px 17.5px; }
.task-header > span, .task-kind { color: rgb(207, 185, 144); }
.task-tabs button { color: rgb(207, 185, 145); }
.task-tabs button[aria-selected="true"] { color: rgb(255, 224, 160); border-color: rgb(234, 195, 122); }
.task-tabs button[aria-selected="true"]::after { background: rgb(234, 195, 122); }
.task-card { background: linear-gradient(140deg, rgb(133, 98, 57), rgb(96, 69, 43) 60%, rgb(83, 59, 39)); border-color: rgba(215, 172, 102, 0.58); box-shadow: rgba(255, 225, 165, 0.15) 0px 1.25px inset, rgba(22, 15, 16, 0.125) 0px 10px 27.5px; }
.task-icon { background: linear-gradient(145deg, rgb(179, 137, 72), rgb(119, 82, 46)); border-color: rgba(235, 198, 127, 0.533); color: rgb(255, 230, 173); }
.task-card h3 { color: rgb(255, 240, 208); }
.task-card p { color: rgb(228, 209, 175); }
.task-card .task-points { color: rgb(255, 226, 160); }
.task-points small { color: rgb(223, 200, 152); }
.task-bottom { border-color: rgba(213, 174, 107, 0.25); }
.task-action { background: rgb(72, 51, 35); color: rgb(249, 216, 147); border-color: rgba(215, 175, 108, 0.667); }
.task-action.ready { background: linear-gradient(115deg, rgb(215, 168, 94), rgb(242, 211, 148), rgb(208, 163, 90)); color: rgb(73, 50, 29); border-color: rgb(255, 226, 163); box-shadow: rgb(140, 97, 42) 0px 0px 0px 3.75px inset, rgba(255, 230, 178, 0.4) 0px 0px 0px 5px inset; text-shadow: none; }
.task-action.done { background: rgb(69, 53, 37); color: rgb(203, 187, 158); border-color: rgba(190, 164, 115, 0.4); opacity: 1; }
.pool .tag, .pool-total, .draw-cost, .machine-caption > p { color: rgb(203, 183, 164); }
.reels { background: rgb(36, 28, 25); border-color: rgb(205, 165, 106); box-shadow: rgba(149, 99, 60, 0.133) 0px 0px 0px 5px inset; }
.reel { background: radial-gradient(rgb(132, 82, 55), rgb(60, 43, 37) 80%); border-color: rgba(179, 138, 98, 0.4); }
.reel > svg { fill: rgb(181, 113, 80); stroke: rgb(239, 208, 154); }
.reels.winner .reel { background: radial-gradient(rgb(157, 104, 58), rgb(80, 50, 41)); border-color: rgb(240, 195, 124); }
.condition { color: rgb(221, 200, 175); }
.condition > span:last-child { color: rgb(233, 196, 134); }
.rules-list li { color: rgb(203, 189, 174); }
.rules-list strong { color: rgb(232, 189, 128); }
footer { background: rgb(25, 20, 21); border-color: rgba(190, 145, 91, 0.22); }
.back-top { background: rgb(61, 44, 37); color: rgb(240, 205, 146); }
.modal { background: radial-gradient(at 50% 0px, rgba(164, 117, 66, 0.25), transparent 65%), rgb(48, 36, 31); color: rgb(240, 221, 191); box-shadow: rgba(16, 11, 9, 0.6) 0px 37.5px 150px, rgba(97, 69, 43, 0.4) 0px 0px 0px 6.25px inset; }
.modal::backdrop { background: rgba(17, 12, 11, 0.808); }
.modal h2 { color: rgb(244, 210, 152); }
.modal p, .modal label, .modal th, .modal td { color: rgb(223, 204, 179); }
.modal .notice, .modal .share-hint { color: rgb(205, 187, 164); }
.modal select, .modal input { background: rgb(33, 26, 22); color: rgb(239, 218, 182); border-color: rgba(192, 155, 102, 0.333); }
.qr-placeholder { background: rgb(67, 48, 34); color: rgb(242, 210, 157); }
.toast { background: rgb(234, 205, 153); color: rgb(64, 44, 32); }
@media (max-width: 700px) {
  .hero-shade { background: linear-gradient(transparent 35%, rgba(33, 25, 27, 0.565) 54%, rgb(33, 25, 27) 69%); }
  #tasks { margin-top: 45px; padding-bottom: 50px; }
  #tasks .character-medallion { box-shadow: rgba(211, 161, 92, 0.13) 0px 0px 0px 3.75px; }
  .personal-points { border-bottom-color: rgba(217, 177, 106, 0.333); }
}

/* ==================== 05 视觉细节与动效 ==================== */
.site-header:has(.official-brand) { position: absolute; inset: 0px 0px auto; z-index: 5; background: linear-gradient(rgba(22, 14, 36, 0.79), transparent); border: 0px; min-height: 106.25px; padding-top: 15px; padding-bottom: 15px; }
.hero { height: 125svh; min-height: 850px; background: rgb(25, 17, 36); overflow: hidden; }
.hero .hero-scene { position: absolute; inset: 0px; width: 100%; height: 100%; background: none center center / cover no-repeat; mask-image: none; z-index: -3; }
.hero-companions-layer { position: absolute; z-index: -2; top: 37.5px; left: 50%; transform: translateX(-50%); width: min(1375px, 115vw); height: 72%; object-fit: contain; object-position: center top; max-width: none; mask-image: linear-gradient(rgb(0, 0, 0) 75%, transparent); }
.hero .hero-shade { position: absolute; inset: 0px; z-index: -1; background: linear-gradient(rgba(32, 17, 39, 0.07) 15%, transparent 32%, rgba(27, 16, 40, 0.3) 49%, rgba(25, 17, 36, 0.875) 72%, rgb(25, 17, 36) 98%); }
.hero .hero-content { position: absolute; left: 50%; bottom: 95px; transform: translateX(-50%); padding: 0px; width: min(1450px, 96%); text-align: center; }
.hero h1.title-art { width: min(1225px, 100%); max-width: none; height: clamp(162.5px, 23.75svh, 243.75px); aspect-ratio: auto; margin: 0px auto; background: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/title-main.png") center center / contain no-repeat; filter: drop-shadow(rgba(16, 7, 25, 0.8) 0px 7.5px 15px); }
.hero .hero-subtitle { width: 100%; max-width: none; margin: 0px auto 12.5px; text-align: center; color: rgb(255, 226, 170); font-size: clamp(27.5px, 2.625vw, 40px); font-weight: 800; line-height: 1.5; letter-spacing: 1.25px; text-shadow: rgb(78, 24, 40) 0px 3.75px 0px, rgb(18, 8, 25) 0px 6.25px 15px, rgb(14, 7, 26) 0px 0px 25px; }
.hero-actions { --cta-width: 487.5px; margin-top: 10px; gap: 22.5px; }
.hero-actions > .primary { height: 122.5px; min-height: 0px; padding: 25px 55px 15px; font-size: 32.5px !important; }
.hero-actions > .primary > svg { display: none; }
.hero-actions > .hero-share { background: rgba(49, 27, 53, 0.7); border-color: rgb(209, 161, 94); color: rgb(242, 208, 144); }
.hero-date { margin-top: 10px; font-size: 17.5px; }
.hero-date span { font-size: 18.75px; }
.hero-bottom { display: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 21.25px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0px; color: rgb(222, 196, 157); font-size: 15px; letter-spacing: 3.75px; line-height: 1.4; padding: 7.5px 31.25px; text-decoration: none; }
.scroll-cue span { margin-bottom: 6.25px; }
.scroll-cue i { display: block; width: 12.5px; height: 12.5px; border-right: 2.5px solid rgb(235, 197, 130); border-bottom: 2.5px solid rgb(235, 197, 130); transform: rotate(45deg); animation: 2s ease-in-out 0s infinite normal none running scroll-hint; }
.scroll-cue i + i { animation-delay: 0.2s; margin-top: -3.75px; }
@keyframes scroll-hint { 
  0%, 100% { opacity: 0.35; translate: 0px -2.5px; }
  50% { opacity: 1; translate: 0px 3.75px; }
}
.button.primary, .button.primary.small, .reward-card .reward-status.claimable, .task-action.ready, .modal .actions .button.primary { background: none center center / 100% 100% no-repeat transparent; border: 0px; border-radius: 0px; box-shadow: none; color: rgb(255, 240, 185); text-shadow: rgb(83, 25, 30) 0px 2.5px 2.5px, rgb(43, 11, 18) 0px 0px 10px; position: relative; filter: drop-shadow(rgba(22, 9, 27, 0.4) 0px 3.75px 7.5px); font-weight: 700; }
.button.primary::before, .button.primary::after { display: none; }
.button.primary { padding: 20px 47.5px 12.5px; min-height: 87.5px; }
.button.primary.small { min-height: 85px; padding: 20px 43.75px 12.5px; }
.reward-card .reward-status.claimable { min-height: 75px; padding: 18.75px 15px 11.25px; }
.task-action.ready { min-height: 67.5px; min-width: 150px; padding: 17.5px 27.5px 10px; }
.modal .actions .button.primary { min-height: 80px; padding: 20px 27.5px 12.5px; }
.button.primary:not(:disabled):hover, .task-action.ready:hover, .reward-status.claimable:hover { filter: brightness(1.15) drop-shadow(rgba(221, 135, 55, 0.3) 0px 0px 12.5px); }
.button.primary:active, .task-action.ready:active { transform: translateY(2.5px); }
.activity-body { background: rgb(28, 19, 42); }
#squad, #lottery { position: relative; isolation: isolate; padding-bottom: 80px; }
#squad::before, #lottery::before { content: ""; position: absolute; inset: 0px auto 0px 50%; width: 125vw; transform: translateX(-50%); z-index: -1; background: radial-gradient(at 50% 10%, rgba(117, 64, 102, 0.267), transparent 70%), linear-gradient(rgb(36, 23, 48), rgb(26, 18, 38)); pointer-events: none; }
#squad .reward-card { background: linear-gradient(140deg, rgb(75, 46, 73), rgb(44, 30, 55)); border-color: rgba(189, 145, 107, 0.533); }
#squad .reward-card.available { background: radial-gradient(at center top, rgba(169, 83, 89, 0.267), transparent 80%), rgb(53, 32, 61); }
#squad .team-panel, #lottery .lottery-panel { background: linear-gradient(140deg, rgb(60, 38, 72), rgb(35, 24, 47)); border-color: rgba(190, 148, 117, 0.5); }
#squad .member.empty .avatar { background: rgb(54, 36, 64); }
#squad .reward-status.claimed { background: rgb(48, 35, 57); color: rgb(187, 168, 189); }
#tasks { margin-top: 0px; }
.quick-nav { background: rgba(39, 26, 49, 0.96); }
#lottery { padding-top: 100px; }
.reels { background: rgb(28, 18, 42); border-color: rgb(216, 177, 110); }
.reel { background: radial-gradient(rgb(120, 71, 85), rgb(52, 32, 62) 85%); }
.reel > svg { width: 132.5px; height: 125px; fill: none; stroke: none; filter: drop-shadow(rgb(22, 11, 34) 0px 5px 10px); }
.reels.winner .reel { background: radial-gradient(rgb(140, 88, 58), rgb(70, 40, 64)); box-shadow: rgba(244, 200, 97, 0.145) 0px 0px 27.5px inset; }
.leader-tag { top: -11.25px; left: 50%; transform: translateX(-50%); writing-mode: horizontal-tb; clip-path: polygon(0px 0px, 100% 0px, 91% 50%, 100% 100%, 0px 100%, 9% 50%); padding: 5px 15px; font-size: 15px; line-height: 1.2; min-width: 65px; white-space: nowrap; box-shadow: rgb(23, 13, 34) 0px 2.5px 5px; z-index: 3; background: linear-gradient(rgb(255, 229, 166), rgb(197, 145, 69)); color: rgb(77, 42, 44); }
.points-overview { padding: 40px 42.5px; grid-template-columns: 425px 1fr; gap: 50px; border: 2.5px solid rgb(235, 198, 126); background: radial-gradient(at 0px 0px, rgba(214, 163, 85, 0.267), transparent 75%), linear-gradient(110deg, rgb(121, 88, 51), rgb(80, 57, 34)); box-shadow: rgba(209, 162, 89, 0.075) 0px 0px 0px 6.25px, rgba(22, 15, 21, 0.2) 0px 15px 43.75px, rgba(255, 233, 178, 0.267) 0px 1.25px inset; }
.personal-points > svg { width: 110px; height: 110px; flex: 0 0 auto; filter: drop-shadow(rgba(44, 22, 13, 0.533) 0px 5px 8.75px); }
.personal-points p, .points-title { font-size: 30px; font-weight: 700; }
.personal-points strong { font-size: 77.5px; line-height: 1.25; text-shadow: rgba(219, 166, 61, 0.2) 0px 0px 25px; }
.points-title strong { font-size: 50px; }
.points-title small { font-size: 23.75px; }
.task-grid { gap: 20px; }
.task-card { padding: 21.25px 25px; gap: 12.5px 15px; background: linear-gradient(135deg, rgb(116, 83, 52), rgb(80, 57, 37)); border-color: rgba(186, 148, 94, 0.533); box-shadow: rgba(234, 198, 135, 0.094) 0px 1.25px inset; }
.task-icon { width: 50px; height: 50px; }
.task-icon svg { width: 32.5px; height: 32.5px; }
.task-card .task-points { font-size: 32.5px; }
.task-card .task-info { min-height: 0px; }
.task-card h3 { font-size: 22.5px; }
.task-card p { font-size: 17.5px; margin-top: 5px; line-height: 1.65; }
.task-card .task-bottom { padding-top: 12.5px; margin-top: 0px; }
.task-action { min-height: 50px; }
.task-kind { font-size: 16.25px; }
.pool > strong { font-weight: 800; font-size: 90px; color: rgb(255, 231, 164); text-shadow: rgb(149, 96, 36) 0px 2.5px 0px, rgba(255, 207, 99, 0.467) 0px 0px 10px, rgba(233, 165, 61, 0.467) 0px 0px 32.5px, rgba(237, 135, 51, 0.2) 0px 0px 75px; }
.reel-number { color: rgb(255, 233, 167); background: linear-gradient(rgb(255, 252, 224) 15%, rgb(255, 228, 152) 35%, rgb(206, 138, 45) 51%, rgb(255, 240, 177) 65%, rgb(228, 175, 74) 90%) text; -webkit-text-fill-color: transparent; filter: drop-shadow(rgb(115, 68, 23) 0px 2.5px 0px) drop-shadow(rgba(255, 201, 96, 0.533) 0px 0px 8.75px); font-weight: 900; }
.prize-amount { color: rgb(255, 231, 161); text-shadow: rgba(255, 211, 99, 0.533) 0px 0px 17.5px; }
@media (max-width: 1100px) {
  .points-overview { grid-template-columns: 375px 1fr; gap: 31.25px; }
  .personal-points strong { font-size: 65px; }
  .personal-points > svg { width: 87.5px; height: 87.5px; }
  .task-card .task-info { min-height: 0px; }
}
@media (max-width: 700px) {
  .hero { height: 125svh; min-height: 900px; }
  .site-header:has(.official-brand) { min-height: 93.75px; }
  .hero .hero-scene { background-size: auto 100%; background-position: center center; }
  .hero-companions-layer { top: 97.5px; width: 145%; max-width: none; height: 52%; object-fit: contain; object-position: center top; }
  .hero .hero-shade { background: linear-gradient(transparent 20%, rgba(25, 17, 36, 0.133) 37%, rgba(25, 17, 36, 0.79) 58%, rgb(25, 17, 36) 84%); }
  .hero .hero-content { bottom: 85px; width: 98%; padding: 0px; }
  .hero h1.title-art { width: 100%; height: 150px; margin: 0px auto; background-size: contain; }
  .hero .hero-subtitle { font-size: 25px; line-height: 1.55; width: 94%; letter-spacing: 0px; margin: 0px auto 10px; text-wrap: balance; }
  .hero-actions { --cta-width: min(350px,calc(100% - 107.5px)); gap: 10px; margin-top: 3.75px; }
  .hero-actions > .primary { height: 100px; padding: 26.25px 27.5px 15px; font-size: 26.25px !important; }
  .hero-actions > .hero-share { width: 52.5px; height: 52.5px; }
  .hero-date { font-size: 15px; margin-top: 8.75px; }
  .hero-date span { font-size: 15px; }
  .scroll-cue { font-size: 12.5px; letter-spacing: 2.5px; bottom: 15px; }
  .scroll-cue span { margin-bottom: 5px; }
  #squad, #lottery { padding-bottom: 55px; }
  #lottery { padding-top: 77.5px; }
  .points-overview { display: block; padding: 30px 25px; }
  .personal-points > svg { width: 92.5px; height: 92.5px; }
  .personal-points p, .points-title { font-size: 26.25px; }
  .personal-points strong { font-size: 65px; }
  .points-title strong { font-size: 40px; }
  .points-title small { font-size: 18.75px; }
  .task-card { padding: 18.75px 21.25px; gap: 10px 12.5px; grid-template-columns: 50px 1fr; }
  .task-card h3 { font-size: 21.25px; }
  .task-card p { font-size: 17.5px; }
  .task-card .task-info { min-height: 0px; }
  .task-card .task-bottom { padding-top: 10px; }
  .task-kind { font-size: 16.25px; }
  .task-action.ready { min-width: 157.5px; min-height: 66.25px; font-size: 20px; }
  .reward-card .reward-status.claimable { font-size: 17.5px; padding: 20px 6.25px 12.5px; }
  .team-footer .button.primary { min-height: 87.5px; }
  .pool > strong { font-size: 60px; }
  .reel > svg { width: 93.75px; height: 100px; }
  .draw-button.button.primary { min-height: 95px; padding: 22.5px 43.75px 12.5px; font-size: 27.5px !important; }
}
@media (max-width: 360px) {
  .hero .hero-subtitle { font-size: 22.5px; }
  .hero h1.title-art { height: 125px; }
  .hero-actions > .primary { font-size: 23.75px !important; }
  .personal-points > svg { width: 72.5px; height: 72.5px; }
  .personal-points p { font-size: 23.75px; }
  .personal-points strong { font-size: 57.5px; }
  .points-overview { padding: 25px 18.75px; }
  .reward-card .reward-status.claimable { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue i { animation: auto ease 0s 1 normal none running none; }
}
.button.primary, .button.primary.small, .reward-card .reward-status.claimable, .task-action.ready, .modal .actions .button.primary { background-size: 100% 190%; background-position: center 42%; }
.hero-companions-layer { width: auto; height: 72%; object-fit: fill; mask-image: linear-gradient(rgb(0, 0, 0) 62%, transparent 100%); }
.hero-subtitle > span { white-space: nowrap; }
.task-action.ready { min-width: 172.5px; }
@media (max-width: 700px) {
  .hero-companions-layer { width: 128%; height: auto; mask-image: linear-gradient(rgb(0, 0, 0) 58%, transparent 100%); }
  .hero .hero-subtitle > span { display: block; }
  .hero .hero-subtitle > .slogan-divider { display: none; }
  .hero .hero-shade { background: linear-gradient(transparent 20%, rgba(25, 17, 36, 0.133) 37%, rgba(25, 17, 36, 0.85) 58%, rgb(25, 17, 36) 84%); }
}
.draw-button.button.primary { width: min(512.5px, 100%); min-height: 125px; margin: 0px auto; padding: 31.25px 50px 17.5px; }
.reel-number { background-size: 100% 1.1em; background-position: center center; background-repeat: no-repeat; }
.reward-card .reward-status.claimable { max-width: 318.75px; min-height: 85px; }
@media (max-width: 700px) {
  .draw-button.button.primary { min-height: 107.5px; padding: 27.5px 35px 15px; }
  .reward-card .reward-status.claimable { min-height: 72.5px; }
}
:root { --header-height: 95px; }
html { scroll-padding-top: calc(var(--header-height) + 102.5px); }
.site-header:has(.official-brand) { position: sticky; top: 0px; inset-inline: 0px; height: var(--header-height); min-height: var(--header-height); z-index: 30; background: rgb(0, 0, 0); border-bottom: 1.25px solid rgba(208, 170, 103, 0.15); padding-block: 6.25px; box-sizing: border-box; }
.site-header .official-brand .logo-crop { width: 140px; }
.quick-nav { top: var(--header-height); background: rgb(0, 0, 0); border-color: rgba(198, 159, 99, 0.22); z-index: 25; backdrop-filter: none; }
.quick-nav a.active { background: linear-gradient(0deg, rgba(170, 120, 51, 0.133), transparent); }
.hero { height: calc(125svh - var(--header-height)); min-height: 775px; }
.hero-companions-layer { top: 12.5px; height: 74%; }
.hero .hero-content { bottom: 60px; }
.hero h1.title-art { height: clamp(225px, 31.25svh, 325px); width: min(1400px, 100%); margin-bottom: -10px; }
.hero .hero-subtitle { font-size: clamp(22.5px, 1.8125vw, 28.75px); font-weight: 600; line-height: 1.6; letter-spacing: 1.25px; margin-bottom: 15px; text-shadow: rgb(37, 17, 37) 0px 2.5px 3.75px, rgb(22, 14, 40) 0px 3.75px 15px; }
.button.primary, .button.primary.small, .reward-card .reward-status.claimable, .task-action.ready, .modal .actions .button.primary { background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/button-red-gold-refined.png"); background-size: 104% 190%; background-position: center 43%; text-shadow: rgb(69, 23, 37) 0px 2.5px 3.75px; filter: drop-shadow(rgba(23, 11, 34, 0.44) 0px 3.75px 8.75px); }
.hero-actions { --cta-width: 425px; margin-top: 5px; }
.hero-actions > .primary { height: 95px; padding: 18.75px 37.5px; font-size: 30px !important; }
.hero-date { margin-top: 16.25px; }
.scroll-cue { bottom: 11.25px; min-width: 60px; min-height: 35px; justify-content: center; padding: 5px 20px; }
.scroll-cue span { display: none; }
@media (max-width: 700px) {
  :root { --header-height: 80px; }
  html { scroll-padding-top: 162.5px; }
  .site-header:has(.official-brand) { padding-inline: 20px; }
  .site-header .official-brand .logo-crop { width: 117.5px; }
  .site-header .account { font-size: 16.25px; }
  .hero { height: calc(125svh - var(--header-height)); min-height: 800px; }
  .hero-companions-layer { top: 18.75px; width: 128%; height: auto; }
  .hero .hero-content { bottom: 55px; }
  .hero h1.title-art { height: 181.25px; width: 100%; background-size: 120% auto; margin-bottom: -18px; }
  .hero .hero-subtitle { font-size: 20px; line-height: 1.6; letter-spacing: 0px; margin-bottom: 15px; }
  .hero-actions { --cta-width: min(325px,calc(100% - 115px)); gap: 12.5px; margin-top: 0px; }
  .hero-actions > .primary { height: 77.5px; min-height: 77.5px; padding: 15px 20px; font-size: 25px !important; }
  .hero-actions > .hero-share { width: 48.75px; height: 48.75px; }
  .hero-date { margin-top: 15px; }
  .scroll-cue { bottom: 8.75px; }
}
@media (max-width: 360px) {
  .hero .hero-subtitle { font-size: 18.75px; }
  .hero h1.title-art { height: 156.25px; background-size: 120% auto; }
  .hero-actions > .primary { font-size: 22.5px !important; }
}
@media (max-width: 700px) {
  .hero h1.title-art { background-size: 104% auto; }
}
.activity-body { background: rgb(28, 19, 42); }
#squad::before { background: linear-gradient(rgb(25, 17, 36) 0%, rgb(40, 26, 52) 28%, rgb(45, 30, 57) 60%, rgb(38, 26, 48) 100%); border: 0px; }
#tasks::before { background: linear-gradient(rgb(38, 26, 48) 0%, rgb(33, 22, 46) 18%, rgb(27, 17, 40) 42%, rgb(27, 17, 40) 62%, rgb(33, 22, 46) 84%, rgb(38, 26, 48) 100%); border: 0px; }
#lottery::before { background: linear-gradient(rgb(38, 26, 48) 0%, rgb(43, 28, 55) 27%, rgb(36, 24, 48) 65%, rgb(28, 19, 42) 100%); border: 0px; }
body > footer:not(.publisher-footer) { background: linear-gradient(rgb(28, 19, 42), rgb(20, 16, 25) 65%, rgb(11, 9, 13)); border-top: 0px; }
.publisher-footer .site-copyright { background: linear-gradient(rgb(11, 9, 13), rgb(0, 0, 0) 65%); border-top: 0px; }
.pool > strong { display: flex; justify-content: center; align-items: center; white-space: nowrap; letter-spacing: 0px; filter: drop-shadow(rgba(233, 165, 61, 0.333) 0px 0px 15px); }
.pool-digit { display: inline-block; position: relative; width: 0.59em; height: 1.3em; overflow: hidden; vertical-align: bottom; }
.pool-digit-track { display: block; transform: translateY(0px); }
.pool-digit-track > span { display: block; height: 1.3em; line-height: 1.3; text-align: center; }
.pool-digit-track.rolling { animation: pool-roll-down 1050ms cubic-bezier(.2,.65,.24,1) var(--roll-delay) both; }
.pool-comma { display: inline-block; width: 0.26em; line-height: 1.3; text-align: center; }
@keyframes pool-roll-down { 
  0% { transform: translateY(0px); }
  100% { transform: translateY(var(--roll-end)); }
}
@media (prefers-reduced-motion: reduce) {
  .pool-digit-track.rolling { animation: auto ease 0s 1 normal none running none; transform: translateY(var(--roll-end)); }
}
body > footer .official-brand { opacity: 1; position: relative; z-index: 1; }
.draw-button.button.primary { display: flex; align-items: center; justify-content: center; padding-block: 20px; line-height: 1.2; background-position: center 43%; }
@media (max-width: 700px) {
  .hero { display: grid; grid-template-columns: minmax(0px, 1fr); grid-template-rows: minmax(25px, 1fr) auto auto 55px; min-height: max(800px, 375px + 106.666vw); }
  .hero-companions-layer { position: relative; grid-area: 2 / 1; left: auto; top: auto; bottom: auto; transform: none; place-self: end center; width: 128%; height: auto; margin-bottom: -87.5px; z-index: 0; mask-image: linear-gradient(rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0.8) 72%, transparent 100%); }
  .hero .hero-content { position: relative; grid-area: 3 / 1; left: auto; bottom: auto; transform: none; justify-self: center; width: 98%; margin: 0px; padding: 0px; z-index: 1; }
  .hero .hero-shade { background: linear-gradient(rgba(25, 17, 36, 0) 12%, rgba(25, 17, 36, 0.2) 36%, rgba(25, 17, 36, 0.7) 58%, rgb(25, 17, 36) 88%); }
  .section-heading:has(.character-medallion) { flex-direction: column; align-items: center; gap: 10px; min-height: 0px; margin-bottom: 17.5px; }
  .feedback-ready .section-heading > .character-medallion { position: relative; inset: auto; transform: none; width: 72.5px; height: 72.5px; flex: 0 0 auto; margin: 0px auto; }
  #squad, #tasks, #lottery { padding-top: 45px; }
  .reward-grid { gap: 10px; }
  .reward-card, .reward-card.locked { min-height: 0px; padding: 17.5px 7.5px 12.5px; }
  .reward-card::before { inset: 5px; }
  .reward-card .reward-medal { width: 65px; height: 65px; margin: 0px auto 8.75px; }
  .reward-card h3 { font-size: 17.5px; line-height: 1.3; }
  .reward-card h3 b { font-size: 31.25px; }
  .reward-card h3 span { font-size: 17.5px; margin-top: 1.25px; line-height: 1.5; }
  .reward-card p { font-size: 13.75px; line-height: 1.5; margin-top: 3.75px; }
  .reward-card .reward-status, .reward-card .reward-status.claimable { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 55px; height: 55px; margin: 12.5px auto 0px; padding: 7.5px 0px; font-size: 15px; line-height: 1.2; letter-spacing: 0px; white-space: nowrap; }
  .task-header { margin: 22.5px 0px 15px; }
  .task-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12.5px; }
  .task-tabs button { min-height: 55px; padding: 10px 0px; font-size: 18.75px; line-height: 1.5; }
  .task-header > span { display: block; margin: 7.5px 0px 0px; padding: 0px 0px 10px; font-size: 15px; line-height: 1.5; }
  .task-grid { grid-template-columns: minmax(0px, 1fr); gap: 12.5px; }
  .task-card { grid-template-columns: 42.5px minmax(0px, 1fr) auto; grid-template-rows: auto auto; gap: 10px; padding: 15px; align-items: start; }
  .task-icon { grid-area: 1 / 1; width: 42.5px; height: 42.5px; margin-top: 2.5px; }
  .task-icon svg { width: 28.75px; height: 28.75px; }
  .task-card .task-info { grid-area: 1 / 2; min-width: 0px; min-height: 0px; }
  .task-card h3 { font-size: 18.75px; line-height: 1.45; }
  .task-card p { font-size: 15px; line-height: 1.5; margin-top: 3.75px; }
  .task-card .task-points { grid-area: 1 / 3; justify-self: end; font-size: 27.5px; line-height: 1.2; margin-top: 1.25px; text-align: right; }
  .task-points small { display: block; font-size: 13.75px; line-height: 1.4; margin: 2.5px 0px 0px; }
  .task-card .task-bottom { grid-area: 2 / 1 / auto / -1; display: flex; align-items: center; justify-content: space-between; margin: 0px; padding-top: 8.75px; gap: 12.5px; }
  .task-kind { font-size: 15px; line-height: 1.5; }
  .task-action, .task-action.ready { display: flex; align-items: center; justify-content: center; min-width: 132.5px; min-height: 55px; height: 55px; font-size: 17.5px; line-height: 1.2; padding: 10px 15px; }
  .draw-button.button.primary { height: 95px; min-height: 95px; padding: 15px 25px; line-height: 1.2; font-size: 26.25px !important; }
}
.pool > strong { text-shadow: rgb(149, 96, 36) 0px 2.5px 0px; filter: drop-shadow(rgba(255, 207, 99, 0.467) 0px 0px 6.25px) drop-shadow(rgba(233, 165, 61, 0.4) 0px 0px 22.5px); }
.pool-digit.is-empty, .pool-comma.is-empty { width: 0px; }
body > footer:not(.publisher-footer) { position: relative; display: flex; align-items: center; justify-content: center; padding: 35px 20px 22.5px; }
body > footer:not(.publisher-footer) .official-brand { display: block; width: max-content; margin-inline: auto; opacity: 1; }
body > footer:not(.publisher-footer) .logo-crop { width: 225px; aspect-ratio: 3275 / 1805; }
body > footer:not(.publisher-footer) .logo-crop > img { width: 152.672%; left: -32.0305%; top: -34.5706%; }
@media (max-width: 700px) {
  .publisher-footer .copyright-inner { align-items: center; gap: 25px; padding-top: 27.5px; }
  .publisher-footer .copyright-copy { max-width: 600px; text-align: center; line-height: 1.9; }
  .publisher-footer .copyright-copy p { line-height: 1.9; margin: 0px 0px 6.25px; }
  .publisher-footer .copyright-badges { width: 100%; align-items: center; }
  .publisher-footer .badge-row { width: 100%; justify-content: center; }
  .publisher-footer .publisher-brand { align-self: center; }
}
@media (max-width: 700px) {
  .hero .hero-scene { background-image: none; background-size: 100% auto; background-position: center -30px; background-color: rgb(25, 17, 36); }
  .hero-companions-layer { width: 110%; margin-bottom: -72.5px; }
  .hero .hero-shade { background: linear-gradient(transparent 20%, rgba(25, 17, 36, 0.1) 38%, rgba(25, 17, 36, 0.4) 57%, rgba(25, 17, 36, 0.93) 79%, rgb(25, 17, 36) 95%); }
}
.leader-tag { left: calc(50% - 60px); top: -10px; transform: none; writing-mode: vertical-rl; min-width: 0px; width: 28.75px; height: 50px; padding: 6.25px 5px 12.5px; clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 50% 84%, 0px 100%); border: 1.25px solid rgb(255, 223, 135); border-radius: 2.5px 2.5px 0px 0px; background: linear-gradient(110deg, rgb(255, 240, 172), rgb(230, 184, 93)); color: rgb(80, 48, 32); line-height: 1.15; font-size: 15px; letter-spacing: 1.25px; box-shadow: none; text-shadow: none; }
@media (max-width: 700px) {
  .leader-tag { left: calc(50% - 45px); top: -8.75px; width: 27.5px; height: 46.25px; font-size: 13.75px; padding: 5px 5px 11.25px; }
  .hero-companions-layer { transform: translateX(4.7%); }
}
@media (max-width: 360px) {
  .leader-tag { left: calc(50% - 37.5px); }
}
.feedback-ready .section-heading:has(.character-medallion) { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 2.5px; min-height: 192.5px; margin-bottom: 25px; }
.feedback-ready .section-heading > .character-medallion { position: relative; inset: auto; transform: none; width: 190px; height: 192.5px; flex: 0 0 190px; border: 0px; border-radius: 0px; overflow: visible; background: none; box-shadow: none; margin: 0px; isolation: isolate; }
.feedback-ready .section-heading > .character-medallion::before { content: ""; position: absolute; inset: 55px 35px 6.25px; border: 1.25px solid rgba(211, 175, 114, 0.4); border-radius: 50%; background: radial-gradient(rgba(172, 108, 104, 0.19), transparent 72%); box-shadow: rgba(214, 139, 75, 0.05) 0px 0px 18.75px; z-index: -1; }
.feedback-ready .character-medallion > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center center; filter: drop-shadow(rgba(12, 7, 25, 0.4) 0px 6.25px 10px); }
#tasks .section-heading > .character-medallion, #lottery .section-heading > .character-medallion { border: 0px; background: none; box-shadow: none; }
.feedback-ready .section-heading > div:not(.character-medallion) { width: min(1025px, 100% - 192.5px); }
@media (max-width: 700px) {
  .feedback-ready .section-heading:has(.character-medallion) { flex-direction: column; gap: 0px; min-height: 0px; margin-bottom: 20px; }
  .feedback-ready .section-heading > .character-medallion { width: 150px; height: 155px; flex: 0 0 155px; margin: 0px auto -6.25px; }
  .feedback-ready .section-heading > .character-medallion::before { inset: 43.75px 26.25px 5px; }
  .feedback-ready .section-heading > div:not(.character-medallion) { width: 100%; }
}
.feedback-ready #rules .section-heading > div { width: min(1025px, 100%); }
.button.primary, .button.primary.small, .hero-actions > .primary, .draw-button.button.primary, .reward-card .reward-status.claimable, .task-action.ready, .modal .actions .button.primary { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding-top: 15px; padding-bottom: 15px; line-height: 1.2; background-position: center 43%; }
.pool-digit { width: 0.66em; flex: 0 0 0.66em; overflow: visible; clip-path: inset(0px -0.12em); }
.pool-digit.is-empty { width: 0px; flex-basis: 0px; }
.pool-comma { flex: 0 0 0.26em; }
.pool-comma.is-empty { width: 0px; flex-basis: 0px; }
@media (max-width: 700px) {
  .reward-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 10px; align-items: stretch; }
  .reward-card, .reward-card.locked { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); grid-template-rows: minmax(0px, 1fr) 55px; gap: 7.5px 5px; aspect-ratio: 1 / 1; min-height: 145px; padding: 10px; place-items: center; }
  .reward-card .reward-medal { grid-area: 1 / 1; justify-self: end; width: clamp(35px, 8.75vw, 55px); height: clamp(35px, 8.75vw, 55px); margin: 0px; }
  .reward-medal img { border-radius: 10px; }
  .reward-card h3 { grid-area: 1 / 2; justify-self: start; font-size: 15px; line-height: 1.1; white-space: nowrap; }
  .reward-card h3 b { font-size: 32.5px; line-height: 1.1; margin-right: 1.25px; }
  .reward-card h3 span { display: block; font-size: 13.75px; line-height: 1.4; margin: 3.75px 0px 0px; }
  .reward-card > p { position: absolute; width: 1.25px; height: 1.25px; padding: 0px; margin: -1.25px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .reward-card .reward-status, .reward-card .reward-status.claimable { grid-area: 2 / 1 / auto / -1; width: 100%; height: 55px; min-height: 55px; margin: 0px; padding: 7.5px 0px; display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1.2; }
  .task-action.ready { padding-block: 10px; }
}
.button.primary, .button.primary.small, .hero-actions > .primary, .draw-button.button.primary, .reward-card .reward-status.claimable, .task-action.ready, .modal .actions .button.primary { padding-top: 11.25px; padding-bottom: 18.75px; }
.button.secondary, .task-action { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; padding-top: 6.25px; padding-bottom: 13.75px; }
@media (max-width: 700px) {
  .reward-card .reward-status, .reward-card .reward-status.claimable { padding-top: 3.75px; padding-bottom: 11.25px; }
  .task-action, .task-action.ready { padding-top: 6.25px; padding-bottom: 13.75px; }
  .modal .actions .button.secondary { padding-top: 10px; padding-bottom: 17.5px; line-height: 1.2; }
}
.hero-companions-layer { mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 78%, rgba(0, 0, 0, 0.933) 88%, rgba(0, 0, 0, 0.533) 95%, transparent 100%); }
#tasks .points-overview { background: linear-gradient(115deg, rgba(207, 189, 158, 0.08), rgba(200, 184, 165, 0.035)); border: 1.25px solid rgba(218, 194, 155, 0.19); box-shadow: none; }
#tasks .personal-points { border-color: rgba(210, 186, 152, 0.15); }
#tasks .personal-points p, #tasks .points-title { color: rgb(216, 201, 197); }
#tasks .personal-points strong, #tasks .points-title strong { color: rgb(240, 209, 155); text-shadow: none; }
#tasks .points-title small { color: rgb(172, 158, 175); }
#tasks .squad-points p { color: rgb(185, 172, 186); }
#tasks .squad-points p > svg { color: rgb(199, 171, 127); }
#tasks .progress-track { height: 15px; background: rgb(19, 14, 28); border: 1.25px solid rgba(199, 163, 106, 0.25); border-radius: 12.5px; box-shadow: rgba(0, 0, 0, 0.267) 0px 1.25px 3.75px inset; }
#tasks .progress-track span { background: linear-gradient(90deg, rgb(181, 139, 80), rgb(235, 203, 141)); border-radius: inherit; box-shadow: rgba(255, 241, 206, 0.333) 0px 1.25px inset; }
@media (max-width: 700px) {
  #tasks .personal-points { border-bottom-color: rgba(210, 186, 152, 0.15); }
  #tasks .progress-track { height: 15px; }
}
#tasks #teamBar { position: relative; overflow: hidden; }
#tasks #teamBar.points-unlocked { animation: 900ms ease-out 0s 1 normal none running points-unlock-glow; }
#tasks #teamBar.points-unlocked::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(105deg, transparent 20%, rgba(255, 248, 216, 0.65) 48%, transparent 75%); transform: translateX(-110%); animation: 850ms ease-out 0s 1 normal both running points-unlock-sheen; }
@keyframes points-unlock-glow { 
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.28); }
}
@keyframes points-unlock-sheen { 
  100% { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) {
  #tasks #teamBar.points-unlocked, #tasks #teamBar.points-unlocked::after { animation: auto ease 0s 1 normal none running none; }
}

/* ==================== 06 小队奖励进度 ==================== */
.reward-pass { padding: 32.5px 40px 25px; border: 1.25px solid rgba(182, 146, 108, 0.4); border-radius: 15px; background: radial-gradient(at 45% 0px, rgba(121, 84, 70, 0.157), transparent 62%), linear-gradient(140deg, rgb(52, 38, 62), rgb(35, 27, 48)); box-shadow: rgba(239, 210, 157, 0.08) 0px 1.25px inset; }
.pass-summary { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.pass-eyebrow { font-size: 18.75px; color: rgb(222, 198, 167); line-height: 1.5; }
.pass-count { display: flex; align-items: baseline; gap: 12.5px; line-height: 1.25; margin-top: 3.75px; }
.pass-count > strong { font: 800 50px / 1.2 Arial, sans-serif; color: rgb(255, 228, 163); text-shadow: rgba(221, 164, 77, 0.2) 0px 0px 22.5px; }
.pass-count > span { font-size: 21.25px; color: rgb(191, 174, 191); }
.pass-summary-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3.75px; font-size: 17.5px; color: rgb(172, 158, 181); }
.pass-summary-right > strong { font-size: 20px; font-weight: 500; color: rgb(231, 203, 160); }
.pass-summary-right b { font: 700 26.25px Arial, sans-serif; color: rgb(255, 223, 147); }
.pass-next { font-size: 18.75px; line-height: 1.6; color: rgb(219, 195, 159); margin-top: 15px; padding-bottom: 22.5px; border-bottom: 1.25px solid rgba(198, 161, 120, 0.125); }
.pass-lane { position: relative; margin-top: 25px; }
.pass-rail { position: absolute; left: 16.6667%; right: 16.6667%; top: 63.75px; height: 7.5px; background: rgb(21, 17, 30); border: 1.25px solid rgba(159, 128, 96, 0.267); border-radius: 12.5px; box-shadow: rgba(0, 0, 0, 0.333) 0px 1.25px 5px inset; }
.pass-rail > span { display: block; height: 100%; background: linear-gradient(90deg, rgb(178, 119, 57), rgb(243, 206, 128)); border-radius: inherit; box-shadow: rgba(228, 172, 78, 0.333) 0px 0px 11.25px; }
.pass-milestones { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 0px; padding: 0px; margin: 0px; list-style: none; }
.pass-milestone { text-align: center; min-width: 0px; display: flex; flex-direction: column; align-items: center; }
.pass-milestone h3 { height: 42.5px; font-size: 20px; line-height: 42.5px; font-weight: 500; color: rgb(172, 156, 182); white-space: nowrap; }
.pass-milestone h3 b { font: 700 35px / 1 Arial, sans-serif; }
.pass-milestone.reached h3 { color: rgb(244, 216, 163); }
.pass-node { position: relative; z-index: 1; display: grid; place-items: center; width: 27.5px; height: 27.5px; margin: 11.25px 0px 27.5px; border: 2.5px solid rgb(140, 114, 140); border-radius: 50%; background: rgb(42, 32, 53); color: transparent; font: 700 16.25px / 1 Arial, sans-serif; box-shadow: rgb(43, 32, 53) 0px 0px 0px 6.25px; }
.reached .pass-node { border-color: rgb(246, 217, 153); background: linear-gradient(rgb(255, 230, 166), rgb(195, 144, 74)); color: rgb(78, 46, 41); box-shadow: rgb(50, 36, 55) 0px 0px 0px 6.25px, rgba(233, 180, 92, 0.25) 0px 0px 17.5px; }
.ready .pass-node { box-shadow: rgb(60, 41, 60) 0px 0px 0px 6.25px, rgba(247, 191, 107, 0.467) 0px 0px 22.5px; }
.pass-gifts { position: relative; display: flex; gap: 10px; align-items: center; justify-content: center; width: 100%; max-width: 100%; box-sizing: border-box; }
.pass-gift { position: relative; width: 100%; max-width: 96px; height: auto; aspect-ratio: 1; padding: 7.5px; display: grid; place-items: center; border: 1.25px solid rgba(156, 127, 102, 0.6); border-radius: 15px; background: linear-gradient(145deg, rgb(66, 48, 70), rgb(38, 29, 50)); box-shadow: rgba(198, 163, 108, 0.05) 0px 0px 0px 3.75px inset; cursor: pointer; font: inherit; color: inherit; box-sizing: border-box; }
.pass-gift:hover { border-color: rgb(237, 196, 124); }
.pass-gift > img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 11.25px; pointer-events: none; }
.ready .pass-gift { border-color: rgb(237, 196, 124); background: radial-gradient(rgba(146, 102, 73, 0.333), rgb(53, 36, 59)); box-shadow: rgba(237, 196, 124, 0.094) 0px 0px 0px 3.75px, rgba(216, 158, 73, 0.2) 0px 0px 32.5px, rgba(255, 240, 185, 0.3) 0px 1.25px inset; }
.pass-gift-check { position: absolute; bottom: -6.25px; right: -6.25px; display: grid; place-items: center; width: 28.75px; height: 28.75px; border-radius: 50%; border: 2.5px solid rgb(49, 35, 55); background: rgb(213, 179, 119); color: rgb(55, 35, 43); font: bold 17.5px / 1 Arial, sans-serif; z-index: 1; }
.pass-gifts .img-tit { --arrow-offset: 48px; position: relative; display: block; flex: 0 1 96px; max-width: calc((100% - 10px) / 2); min-width: 0; }
.pass-gifts .img-tit.is-open { z-index: 20; }
.pass-gifts .layer { display: none; position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); width: min(260px, 70vw); padding: 18px 34px 18px 18px; background: rgb(48, 33, 58); border: 1.25px solid rgb(218, 175, 120); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.45) 0px 10px 28px; text-align: left; z-index: 30; }
.pass-gifts .img-tit.is-open .layer { display: block; }
.pass-gifts .layer::before { content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; margin-left: -7px; background: rgb(48, 33, 58); border-right: 1.25px solid rgb(218, 175, 120); border-bottom: 1.25px solid rgb(218, 175, 120); transform: rotate(45deg); }
.pass-gifts .align-start .layer { left: 0; transform: none; }
.pass-gifts .align-start .layer::before { left: var(--arrow-offset); }
.pass-gifts .align-end .layer { left: auto; right: 0; transform: none; }
.pass-gifts .align-end .layer::before { left: auto; right: var(--arrow-offset); margin-left: 0; margin-right: -7px; }
.pass-gifts .layer > p { margin: 0; font-size: 17.5px; line-height: 1.6; color: rgb(244, 220, 177); }
.pass-gifts .layer-close { position: absolute; top: 4px; right: 6px; width: 28px; height: 28px; font: 24px / 1 Georgia, serif; color: rgb(218, 175, 120); cursor: pointer; }
.pass-gifts .layer-close:hover { color: rgb(255, 228, 185); }
.pass-cumulative { font-size: 16.25px; color: rgb(173, 155, 179); line-height: 1.5; margin-top: 3.75px; }
.reward-pass .pass-claim { display: inline-flex; align-items: center; justify-content: center; min-height: 57.5px; height: 57.5px; width: min(220px, 90%); padding: 7.5px 5px 15px; margin-top: 17.5px; line-height: 1.2; font-size: 18.75px; color: rgb(202, 182, 189); letter-spacing: 0px; border: 1.25px solid rgba(146, 121, 142, 0.333); border-radius: 6.25px; background: rgba(32, 25, 39, 0.4); white-space: nowrap; }
.reward-pass .pass-claim.button.primary { min-height: 57.5px; height: 57.5px; padding: 7.5px 5px 15px; line-height: 1.2; font-size: 18.75px; border: 0px; border-radius: 0px; background: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/button-red-gold-refined.png") center 43% / 104% 190% no-repeat transparent; color: rgb(255, 240, 185); text-shadow: rgb(69, 23, 37) 0px 2.5px 3.75px; font-weight: 700; }
.reward-pass .pass-claim:disabled { opacity: 1; cursor: default; border-color: transparent; background: none; color: rgb(185, 169, 145); }
.pass-note { font-size: 16.25px; color: rgb(173, 154, 177); text-align: center; border-top: 1.25px solid rgba(198, 161, 120, 0.125); margin-top: 30px; padding-top: 18.75px; line-height: 1.65; }
@media (max-width: 700px) {
  .reward-pass { padding: 22.5px 15px 17.5px; border-radius: 12.5px; }
  .pass-summary { gap: 12.5px; padding-inline: 3.75px; }
  .pass-eyebrow { font-size: 16.25px; }
  .pass-count > strong { font-size: 40px; }
  .pass-count > span { font-size: 17.5px; }
  .pass-summary-right { font-size: 15px; }
  .pass-summary-right > strong { font-size: 16.25px; }
  .pass-summary-right b { font-size: 22.5px; }
  .pass-next { font-size: 16.25px; margin-top: 12.5px; padding: 0px 3.75px 16.25px; }
  .pass-lane { margin-top: 17.5px; }
  .pass-rail { top: 51.25px; height: 6.25px; }
  .pass-milestone h3 { font-size: 16.25px; height: auto; min-height: 35px; line-height: 1.25; white-space: normal; }
  .pass-milestone h3 b { font-size: 28.75px; }
  .pass-node { width: 22.5px; height: 22.5px; margin: 8.75px 0px 22.5px; font-size: 13.75px; }
  .pass-tier-name { display: block; font-size: 12.5px; margin-top: 2px; }
  .pass-gifts { gap: 4px; }
  .pass-gifts .img-tit { --arrow-offset: 31px; flex-basis: 62px; max-width: calc((100% - 4px) / 2); }
  .pass-gifts .layer { width: min(200px, 60vw); padding: 14px 30px 14px 14px; }
  .pass-gifts .layer > p { font-size: 15px; }
  .pass-gift { max-width: 62px; padding: 4px; border-radius: 11.25px; }
  .pass-gift > img { border-radius: 8.75px; }
  .pass-gift-check { width: 20px; height: 20px; font-size: 12px; bottom: -4px; right: -4px; }
  .pass-cumulative { font-size: 13.75px; margin-top: 2.5px; }
  .reward-pass .pass-claim, .reward-pass .pass-claim.button.primary { width: 94%; height: 55px; min-height: 55px; margin-top: 12.5px; font-size: 15px; padding: 6.25px 1.25px 13.75px; }
  .pass-note { font-size: 15px; margin-top: 18.75px; padding-top: 15px; }
}
@media (max-width: 360px) {
  .reward-pass { padding-inline: 10px; }
  .pass-gifts .img-tit { --arrow-offset: 22px; flex-basis: 48px; }
  .pass-gift { max-width: 48px; }
  .pass-cumulative { font-size: 12.5px; }
}

/* ==================== 07 品牌页脚 ==================== */
footer.publisher-footer { display: block; padding: 0px; border: 0px; background: rgb(0, 0, 0); }
.site-copyright { background: linear-gradient(rgb(29, 29, 29), rgb(0, 0, 0) 60%); border-top: 1.25px solid rgb(41, 41, 41); color: rgb(136, 136, 136); font: 17.1875px / 1.8 SimSun, "Microsoft YaHei", sans-serif; text-align: left; }
.copyright-inner { max-width: 1400px; margin: auto; min-height: 165px; display: grid; grid-template-columns: 95px minmax(0px, 1fr); gap: 22.5px 30px; align-items: center; padding: 35px 0px; }
.site-copyright a { display: inline; color: inherit; font: inherit; margin: 0px; text-decoration: none; }
.site-copyright a:hover { text-decoration: underline; color: rgb(187, 187, 187); }
.publisher-brand { display: flex; align-items: center; justify-content: center; min-height: 112.5px; border-right: 1.25px solid rgba(255, 255, 255, 0.1); }
.publisher-brand img { display: block; width: 80px; height: 82.5px; object-fit: contain; }
.copyright-copy p { margin: 0px; line-height: 1.8; overflow-wrap: anywhere; }
.copyright-copy .beian-icon { width: 20px; height: 20px; vertical-align: -3.75px; margin-right: 3.75px; }
.copyright-badges { display: flex; flex-direction: column; gap: 7.5px; }
.badge-row { display: flex; align-items: center; gap: 5px; }
.badge-row a, .badge-row img { display: block; }
.badge-row img { max-width: 100%; height: auto; }
.badge-row img[src$="footer-shanghai-report.png"], .badge-row img[src$="footer-national-report.png"] { background: rgb(245, 245, 245); }
.publisher-footer .copyright-inner { width: calc(100% - 80px); }
.publisher-footer .copyright-badges { grid-column: 2; }
.publisher-footer .badge-row img { max-height: 50px; width: auto; }
@media (max-width: 700px) {
  .publisher-footer .copyright-inner { width: calc(100% - 40px); display: flex; flex-direction: column; gap: 22.5px; padding: 32.5px 0px; }
  .publisher-footer .publisher-brand { min-height: 0px; border: 0px; }
  .publisher-footer .publisher-brand img { width: 72.5px; height: auto; }
  .publisher-footer .copyright-copy { width: 100%; font-size: 15px; line-height: 1.85; }
  .publisher-footer .copyright-badges { max-width: 100%; align-self: center; }
  .publisher-footer .badge-row { flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 7.5px; }
  .publisher-footer .badge-row a { min-width: 0px; }
  .publisher-footer .badge-row img { max-width: 100%; height: auto; object-fit: contain; }
}

/* ==================== 08 实际尺寸适配 ==================== */
/* Native layout sizes. The document uses the browser default coordinate system. */
html{font-size:20px}
#squad::before, #tasks::before, #lottery::before { width: 100vw; }
.modal { max-height: calc(-30px + 100svh); }
@media (max-width: 1099px) {
  .hero { height: calc(100svh - var(--header-height)); }
}
@media (min-width: 1100px) {
  html { }
  .hero { height: calc(100svh - var(--header-height)); }
  .hero h1.title-art { height: clamp(225px, 25svh, 325px); }
  .hero .hero-subtitle { font-size: clamp(22.5px, 1.45vw, 28.75px); }
  #squad::before, #tasks::before, #lottery::before { width: 100vw; }
  .modal { max-height: calc(-60px + 100svh); }
}

/* ==================== 09 最新细节调整 ==================== */
.site-header:has(.official-brand) { position: relative; top: auto; }
.quick-nav { top: 0px; }
html { scroll-padding-top: 102.5px; }
.hero .hero-scene { background-image: none; }
.hero .hero-subtitle > span { display: block; }
.hero .hero-subtitle { line-height: 1.65; font-weight: 600; letter-spacing: 0.5px; margin-top: 5px; }
.button.primary:not(.pass-claim), .modal .actions .button.primary { background-image: none, url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/button-red-gold-refined.png"); background-size: 91% 70%, 104% 190%; background-position: center 40%, center 43%; background-repeat: no-repeat; }
.feedback-ready .section-heading:has(.character-medallion) { flex-direction: column; gap: 0px; min-height: 0px; margin-bottom: 27.5px; }
.feedback-ready .section-heading > .character-medallion { width: 537.5px; height: 262.5px; flex: 0 0 auto; margin: 0px auto -16.25px; isolation: isolate; }
.feedback-ready .section-heading > .character-medallion::before { inset: 0px; content: ""; border: 0px; border-radius: 0px; box-shadow: none; background: var(--chapter-art) center/contain no-repeat; z-index: -1; }
.feedback-ready .character-medallion > img { width: 232.5px; height: 267.5px; margin: 0px auto; object-position: center bottom; filter: drop-shadow(rgba(22, 9, 21, 0.5) 0px 3.75px 7.5px); }
.feedback-ready .section-heading > div:not(.character-medallion) { position: relative; z-index: 1; width: min(850px, 100%); }
#squad .character-medallion { --chapter-art: none; }
#tasks .character-medallion { --chapter-art: none; }
#lottery .character-medallion { --chapter-art: none; }
.pass-summary { align-items: flex-end; gap: 30px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid rgba(244, 220, 177, 0.18); }
.pass-summary .pass-next { max-width: 58%; margin: 0px; padding: 0px 0px 6.25px; border: 0px; text-align: right; font-size: 18.75px; line-height: 1.7; }
.pass-claim:not(.primary) { box-shadow: none; border-color: transparent; background: none; }
.pass-note { border: 0px; margin-top: 22.5px; padding-top: 0px; }
#tasks .personal-points > svg { width: 67.5px; height: 67.5px; fill: none; stroke: none; filter: none; color: rgb(236, 203, 120); }
.task-card .task-info .task-kind { display: block; font-size: 17.5px; line-height: 1.6; color: rgb(226, 200, 165); margin-top: 5px; }
.task-card .task-bottom { border-top: 1px solid rgba(244, 220, 177, 0.24); gap: 17.5px; align-items: center; }
.task-card .task-bottom .task-description { font-size: 20px; line-height: 1.65; color: rgb(240, 220, 192); text-align: left; margin: 0px; flex: 1 1 0%; min-width: 0px; }
.task-card .task-bottom .task-action { flex: 0 0 auto; }
.pool-total { display: block; white-space: nowrap; letter-spacing: 0px; font-size: 17.5px; }
.reels { padding: 10px; gap: 7.5px; border: 1.25px solid rgba(146, 121, 91, 0.6); box-shadow: rgba(18, 13, 28, 0.5) 0px 0px 0px 3.75px inset; background: rgb(36, 24, 47); border-radius: 6.25px; }
.reel { background: linear-gradient(145deg, rgb(51, 34, 62), rgb(41, 28, 52)); border: 1.25px solid rgba(141, 112, 83, 0.267); box-shadow: none; border-radius: 2.5px; }
.reel > svg { width: 95px; height: 95px; filter: none; stroke: none; fill: none; }
.reels.winner .reel { background: rgb(75, 45, 62); border-color: rgb(219, 183, 119); box-shadow: rgba(240, 198, 122, 0.06) 0px 0px 22.5px inset; }
.modal:has(.share-actions) { --share-surface: rgb(48, 36, 31); background: var(--share-surface); }
.modal .share-actions { margin: 0px 0px 25px; position: sticky; top: -45px; z-index: 3; padding: 15px 0px; background: var(--share-surface); }
#squad { padding-bottom: 32px; }
#tasks { padding-top: 48px; }
.poster-caption { flex-wrap: wrap; gap: 15px; padding: 22.5px 17.5px; }
.poster-caption .poster-opening { flex: 0 0 100%; margin: 0px 0px 5px; font-size: 23.75px; line-height: 1.55; font-weight: 800; color: rgb(162, 39, 46); text-align: center; }
.poster-caption > div { flex: 1 1 0%; min-width: 0px; }
.poster-caption strong { font-size: 17.5px; line-height: 1.75; display: block; color: rgb(124, 39, 56); }
.poster-caption .invite-qr { width: 107.5px; height: 107.5px; margin: 0px; padding: 0px; }
.modal .demo-qr { margin: 25px auto; width: min(240px, 82vw); text-align: center; }
.demo-qr > img { display: block; width: 100%; height: auto; max-height: 60vh; box-sizing: border-box; border: 8px solid rgb(255, 255, 255); background: rgb(255, 255, 255); object-fit: contain; }
.demo-qr > small { display: block; font-size: 15px; color: rgb(197, 172, 184); margin-top: 10px; }
.modal .history-table th:first-child { width: 16%; }
.modal .history-table th:nth-child(2) { width: 28%; }
.modal .history-table td { font-variant-numeric: tabular-nums; }
.modal .history-footnote { font-size: 16.25px; color: rgb(186, 164, 173); line-height: 1.7; margin: 20px 0px 0px; }
.modal .empty-state { font-size: 20px; line-height: 1.9; padding-inline: 0px; }
@media (max-width: 700px) {
  html { scroll-padding-top: 82.5px; }
  .hero .hero-scene { background-image: none; background-position: center -125px; }
  .hero .hero-subtitle { font-size: 18.75px; line-height: 1.7; letter-spacing: 0px; }
  .feedback-ready .section-heading > .character-medallion { width: 350px; height: 183.75px; margin-bottom: -15px; }
  .feedback-ready .character-medallion > img { width: 165px; height: 188.75px; }
  .feedback-ready .section-heading > div:not(.character-medallion) { width: 100%; }
  .pass-summary { gap: 17.5px; margin-bottom: 17.5px; padding-bottom: 15px; }
  #squad { padding-bottom: 24px; }
  #tasks { padding-top: 32px; }
  .pass-summary .pass-next { font-size: 15px; max-width: 59%; padding-bottom: 3.75px; }
  #tasks .personal-points > svg { width: 50px; height: 50px; }
  .task-card .task-info .task-kind { font-size: 15px; margin-top: 2.5px; }
  .task-card .task-bottom .task-description { font-size: 17.5px; line-height: 1.6; }
  .task-card .task-bottom .task-action { min-width: 117.5px; padding-inline: 7.5px; font-size: 16.25px; }
  .pool-total { font-size: clamp(11.25px, 3.375vw, 16.25px); }
  .reel > svg { width: 71.25px; height: 71.25px; }
  .modal .share-actions { top: -31.25px; margin-bottom: 17.5px; padding: 11.25px 0px; gap: 10px; }
  .modal .share-actions .button { font-size: 17.5px; min-height: 65px; }
  .poster-caption { padding: 17.5px 12.5px; gap: 10px; }
  .poster-caption .poster-opening { font-size: 22.5px; }
  .poster-caption strong { font-size: 15px; }
  .poster-caption .invite-qr { width: 93.75px; height: 93.75px; }
  .modal .history-table { font-size: 16.25px; }
  .modal .history-footnote { font-size: 15px; }
}
@media (max-width: 360px) {
  .hero .hero-subtitle { font-size: 16.25px; }
  .feedback-ready .section-heading > .character-medallion { width: 310px; height: 168.75px; }
  .feedback-ready .character-medallion > img { height: 173.75px; width: 152.5px; }
  .task-card .task-bottom .task-description { font-size: 16.25px; }
}

/* ==================== 10 标题图片与原图按钮 ==================== */
.feedback-ready .section-heading.reference-heading { display: block; position: relative; width: min(812.5px, 100%); min-height: 0px; margin: 0px auto 30px; padding: 0px; background: none; }
.feedback-ready .reference-heading > h2 { position: absolute; width: 1.25px; height: 1.25px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; background: none; aspect-ratio: auto; font-size: 1.25px; line-height: 1; }
.feedback-ready .reference-heading > .reference-heading-art { position: relative; width: 100%; background: none; overflow: visible; }
.reference-heading-art > img { display: block; position: static; width: 100%; max-width: 100%; height: auto; }
/* Trim the transparent top padding of chapter 02 without resizing its artwork. */
.feedback-ready #tasks .reference-heading-art { overflow: hidden; }
#tasks .reference-heading-art > img { margin-top: -10.5%; }
.feedback-ready #rules .section-heading h2 { background: none; clip-path: none; display: flex; align-items: center; justify-content: center; }
#rules .section-heading h2 > img { display: block; width: 44%; height: auto; max-width: 425px; flex: 0 0 auto; }
.button.primary:not(.pass-claim), .modal .actions .button.primary { background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/button-flames-faithful.png"); background-size: 104.023% 232.051%; background-position: 57.143% 49.515%; background-repeat: no-repeat; border: 0px; box-shadow: none; border-radius: 0px; }
.button.primary:not(.pass-claim)::before, .button.primary:not(.pass-claim)::after { display: none; }
.team-footer .button.primary { min-height: 72.5px; height: 72.5px; }
.draw-button.button.primary { min-height: 82.5px; height: 82.5px; }
.reels { height: auto; aspect-ratio: 576 / 165; padding: 12.5px; gap: 10px; border: 1.25px solid rgb(180, 155, 106); border-radius: 11.25px; background: rgb(35, 26, 43); box-shadow: rgb(19, 14, 28) 0px 0px 0px 6.25px inset, rgba(141, 113, 100, 0.314) 0px 0px 0px 7.5px inset; overflow: visible; }
.reels .reel { min-width: 0px; height: 100%; border: 1.25px solid rgba(132, 109, 130, 0.4); box-shadow: rgba(13, 9, 27, 0.333) 0px 0px 13.75px inset; border-radius: 6.25px; background: radial-gradient(at 50% 48%, rgb(85, 50, 75), rgb(48, 34, 55) 82%); }
.reels .reel > svg { visibility: visible; width: 95%; height: 95%; max-width: 212.5px; filter: none; stroke: none; fill: none; }
.reels.spinning .reel, .reels.winner .reel, .reels.result .reel { background: radial-gradient(at 50% 48%, rgb(85, 50, 75), rgb(48, 34, 55) 82%); }
.reels .reel-number { font-size: clamp(31.25px, 3.75vw, 52.5px); }
.hero .hero-scene { background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/hero-city-desktop-no-flags.png"); background-position: center center; }
@media (max-width: 700px) {
  .feedback-ready .section-heading.reference-heading { margin-bottom: 25px; }
  .hero .hero-scene { background-image: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/hero-city-mobile-no-flags.png"); background-position: center -112.5px; }
  .team-footer .button.primary { width: 100%; min-height: 65px; height: 65px; }
  .draw-button.button.primary { min-height: 75px; height: 75px; }
  .reels { padding: 8.75px; gap: 7.5px; border-radius: 8.75px; box-shadow: rgb(19, 14, 28) 0px 0px 0px 3.75px inset, rgba(141, 113, 100, 0.314) 0px 0px 0px 5px inset; }
  .reels .reel-number { font-size: clamp(27.5px, 8.25vw, 42.5px); }
}

/* ==================== 11 邀请函 ==================== */
@font-face { font-family: HonglianInvite; src: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/FZCYSJW-GB1-0.ttf") format("truetype"); font-display: swap; }
.modal.invitation-modal { width: min(650px, 100% - 35px); padding: 27.5px 32.5px 22.5px; border: 1.25px solid rgb(197, 156, 106); border-radius: 6.25px; background: radial-gradient(at 50% 0px, rgba(96, 45, 69, 0.4), transparent 60%), linear-gradient(160deg, rgb(48, 32, 54), rgb(25, 17, 33)); box-shadow: rgb(33, 23, 40) 0px 0px 0px 6.25px inset, rgba(212, 173, 105, 0.18) 0px 0px 0px 7.5px inset, rgba(0, 0, 0, 0.733) 0px 31.25px 125px; }
.invitation-letter { position: relative; text-align: center; }
.invitation-letter .invite-close { position: absolute; right: -21.25px; top: -18.75px; display: grid; place-items: center; width: 55px; height: 55px; padding: 0px; color: rgb(232, 195, 142); font: 37.5px / 1 Arial; z-index: 5; }
.invitation-letter .invite-close:hover { color: rgb(255, 241, 208); }
.invite-logo { position: relative; width: 155px; aspect-ratio: 3275 / 1805; margin: 0px auto 11.25px; overflow: hidden; }
.invite-logo > img { position: absolute; width: 152.672%; max-width: none; left: -32.0305%; top: -34.5706%; height: auto; }
.modal .invitation-letter h2 { font: 40px / 1.5 HonglianInvite, KaiTi, serif; letter-spacing: 0px; margin: 0px 0px 10px; color: rgb(255, 228, 174); -webkit-text-stroke: 0.5625px rgb(153, 66, 45); text-shadow: rgb(110, 40, 53) 0px 2.5px, rgb(17, 9, 25) 0px 3.75px 11.25px; }
.modal .invitation-letter .invite-opening { font-size: 16.25px; line-height: 1.6; color: rgb(201, 182, 200); margin: 0px 0px 5px; }
.modal .invitation-letter .invite-from { font-size: 17.5px; line-height: 1.7; margin: 0px; color: rgb(227, 208, 213); overflow-wrap: anywhere; }
.invite-from > strong { color: rgb(255, 226, 162); font-weight: 700; }
.invite-keepsake { position: relative; isolation: isolate; height: 240px; margin: 22.5px auto 0px; width: 94%; border: 1.25px solid rgba(203, 159, 101, 0.43); border-radius: 5px; background: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/hero-city-desktop-no-flags.png") center 43% / cover; box-shadow: rgba(8, 5, 13, 0.333) 0px 10px 27.5px; overflow: hidden; }
.invite-keepsake > img { position: absolute; width: 100%; max-width: none; height: auto; left: 0px; bottom: -42%; mask-image: linear-gradient(rgb(0, 0, 0) 70%, transparent); }
.invite-keepsake::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(145deg, rgba(121, 81, 105, 0.333), rgb(48, 27, 54) 60%); clip-path: polygon(0px 61%, 50% 96%, 100% 61%, 100% 100%, 0px 100%); border-bottom: 2.5px solid rgba(180, 133, 82, 0.4); }
.invite-keepsake::before { content: ""; position: absolute; z-index: 1; left: 4%; right: 4%; bottom: 14%; height: 1.25px; background: linear-gradient(90deg, transparent, rgba(233, 189, 123, 0.5), transparent); }
.invite-seal { position: relative; z-index: 2; display: grid; place-items: center; width: 52.5px; height: 52.5px; margin: -28.75px auto 7.5px; border-radius: 50%; border: 1.25px solid rgb(239, 210, 142); background: radial-gradient(rgb(120, 65, 50), rgb(53, 32, 55)); box-shadow: rgba(187, 142, 88, 0.4) 0px 0px 0px 3.75px, rgba(0, 0, 0, 0.4) 0px 5px 12.5px; }
.invite-seal > svg { width: 37.5px; height: 37.5px; }
.modal .invitation-letter .invite-reward { margin: 6.25px 0px 0px; font: 23.75px / 1.5 HonglianInvite, KaiTi, serif; color: rgb(239, 216, 179); }
.invite-reward > strong { display: block; font-size: 33.75px; color: rgb(255, 229, 160); text-shadow: rgb(116, 51, 33) 0px 2.5px, rgba(232, 152, 48, 0.16) 0px 0px 18.75px; }
.modal .invitation-letter .invite-members { font-size: 15px; margin: 11.25px 0px 10px; line-height: 1.6; color: rgb(189, 170, 191); }
.invite-members > strong { font: 600 21.25px / 1 Arial; color: rgb(239, 205, 140); margin: 0px 6.25px; }
.invite-accept { width: 100%; min-height: 75px; font-size: 26.25px !important; }
.modal .invitation-letter .invite-terms { font-size: 13.75px; line-height: 1.65; color: rgb(180, 160, 183); margin: 8.75px 0px 0px; }
.invite-terms button { font-size: inherit; color: rgb(213, 183, 131); text-decoration: underline; text-underline-offset: 3.75px; padding: 0px; }
@media (max-width: 700px) {
  .modal.invitation-modal { padding: 23.75px 25px 21.25px; }
  .invite-logo { width: 137.5px; margin-bottom: 8.75px; }
  .modal .invitation-letter h2 { font-size: 33.75px; line-height: 1.5; margin-bottom: 10px; }
  .modal .invitation-letter .invite-opening { font-size: 15px; }
  .modal .invitation-letter .invite-from { font-size: 16.25px; }
  .invite-keepsake { height: 197.5px; margin-top: 18.75px; width: 100%; }
  .invite-keepsake > img { bottom: -35%; }
  .modal .invitation-letter .invite-reward { font-size: 21.25px; }
  .invite-reward > strong { font-size: 30px; }
  .invite-accept { min-height: 70px; font-size: 23.75px !important; }
}
@media (max-width: 360px), (max-height: 740px) {
  .invite-logo { width: 118.75px; margin-bottom: 6.25px; }
  .modal .invitation-letter h2 { font-size: 30px; margin-bottom: 6.25px; }
  .invite-keepsake { height: 156.25px; margin-top: 12.5px; }
  .invite-keepsake > img { bottom: -50%; }
  .invite-seal { width: 42.5px; height: 42.5px; margin-top: -25px; margin-bottom: 3.75px; }
  .invite-seal > svg { width: 30px; height: 30px; }
  .modal .invitation-letter .invite-reward { font-size: 20px; margin-top: 3.75px; }
  .invite-reward > strong { font-size: 26.25px; }
  .modal .invitation-letter .invite-members { margin: 6.25px 0px; }
  .invite-accept { min-height: 62.5px; }
}
.invite-envelope { position: relative; isolation: isolate; width: min(100%, 475px); aspect-ratio: 1.58 / 1; margin: 17.5px auto 10px; filter: drop-shadow(rgba(12, 6, 28, 0.333) 0px 10px 12.5px); }
.invite-envelope::before { content: ""; position: absolute; inset: 28% 0px 0px; background: linear-gradient(145deg, rgb(151, 120, 79), rgb(62, 41, 73) 2%, rgb(30, 21, 43) 97%, rgb(151, 120, 79)); clip-path: polygon(0px 13%, 50% 0px, 100% 13%, 100% 100%, 0px 100%); border-radius: 3.75px; }
.invite-envelope .invite-keepsake { position: absolute; inset: 0px 5% 10%; width: auto; height: auto; margin: 0px; padding: 8.75px; border: 1.25px solid rgb(222, 197, 150); border-radius: 2.5px; background: linear-gradient(135deg, rgb(244, 229, 199), rgb(186, 162, 123) 55%, rgb(232, 213, 179)); box-shadow: rgba(16, 8, 23, 0.4) 0px 5px 15px; overflow: visible; transform: rotate(-2deg); }
.invite-envelope .invite-keepsake::before, .invite-envelope .invite-keepsake::after { display: none; }
.invite-photo { position: relative; width: 100%; height: 100%; overflow: hidden; border: 1.25px solid rgb(128, 98, 62); background: url("https://static.web.sdo.com/dn/pic/dn_26act/10h5/hero-city-desktop-no-flags.png") center 40% / cover; }
.invite-photo > img { position: absolute; inset: 3% 2% auto; width: 96%; height: 97%; max-width: none; object-fit: contain; object-position: center top; mask-image: none; }
.invite-pocket { position: absolute; z-index: 2; inset: 57% 0px 0px; border-bottom: 1.25px solid rgb(185, 153, 101); border-radius: 0px 0px 3.75px 3.75px; background: linear-gradient(151deg, transparent 48.9%, rgba(189, 161, 107, 0.333) 49.5%, rgb(53, 36, 65) 50%) left center / 50.1% 100% no-repeat, linear-gradient(209deg, transparent 48.9%, rgba(189, 161, 107, 0.333) 49.5%, rgb(53, 36, 65) 50%) right center / 50.1% 100% no-repeat, linear-gradient(135deg, rgb(81, 64, 98), rgb(33, 24, 47)); clip-path: polygon(0px 0px, 50% 42%, 100% 0px, 100% 100%, 0px 100%); box-shadow: rgba(188, 150, 93, 0.533) 1.25px 0px inset, rgba(188, 150, 93, 0.533) -1.25px 0px inset; }
.invite-envelope .invite-seal { position: absolute; z-index: 3; left: 50%; top: 73%; transform: translate(-50%, -50%); width: 52.5px; height: 52.5px; margin: 0px; border: 2.5px solid rgb(232, 195, 119); background: radial-gradient(circle at 35% 25%, rgb(178, 132, 78), rgb(88, 64, 46) 70%, rgb(174, 129, 80)); box-shadow: rgb(113, 82, 48) 0px 0px 0px 2.5px, rgba(228, 189, 101, 0.333) 0px 0px 0px 2.5px inset, rgba(16, 8, 25, 0.533) 0px 5px 10px; }
.invite-envelope .invite-seal > svg { width: 38.75px; height: 38.75px; }
@media (max-width: 700px) {
  .invite-envelope { width: min(100%, 425px); margin-top: 15px; }
  .invite-envelope .invite-keepsake { padding: 6.25px; }
  .invite-envelope .invite-seal { width: 45px; height: 45px; }
  .invite-envelope .invite-seal > svg { width: 33.75px; height: 33.75px; }
}
@media (max-width: 360px), (max-height: 740px) {
  .invite-envelope { width: min(100%, 362.5px); aspect-ratio: 1.65 / 1; margin: 12.5px auto 6.25px; }
  .invite-logo { width: 97.5px; }
  .modal.invitation-modal { padding-top: 20px; padding-bottom: 17.5px; }
  .modal .invitation-letter h2 { font-size: 28.75px; line-height: 1.3; }
  .invite-envelope .invite-seal { width: 37.5px; height: 37.5px; }
  .invite-envelope .invite-seal > svg { width: 28.75px; height: 28.75px; }
}

/* ==================== 12 长短按钮与统一字号 ==================== */
/* Keep each end cap at its natural proportions; use one full-height center to avoid horizontal slice seams. */
.button.primary[data-button-shape], .modal .actions .button.primary[data-button-shape], .reward-pass .pass-claim.button.primary[data-button-shape], .task-action.ready[data-button-shape], .reward-status.claimable[data-button-shape] { background: none; border-width: 0px; border-style: none; border-color: currentcolor; border-radius: 0px; box-shadow: none; border-image-source: var(--button-art); border-image-slice: 0 var(--button-slice) fill; border-image-width: 0 var(--button-slice-size); border-image-outset: 0; border-image-repeat: stretch; }
[data-button-shape="long"] { --button-art: url('https://static.web.sdo.com/dn/pic/dn_26act/10h5/button-jewel-long.svg'); --button-slice: 90; }
[data-button-shape="short"] { --button-art: url('https://static.web.sdo.com/dn/pic/dn_26act/10h5/button-jewel-short.svg'); --button-slice: 170; }
.button.primary, .button.primary.small, .hero-actions > .primary, .draw-button.button.primary, .team-footer .button.primary, .modal .actions .button.primary, .invite-accept { font-family: "Microsoft YaHei", sans-serif; font-weight: 700; line-height: 1.2; letter-spacing: 0px; font-size: 25px !important; }
.reward-pass .pass-claim, .reward-pass .pass-claim.button.primary, .task-action, .task-action.ready { line-height: 1.2; letter-spacing: 0px; font-size: 17.5px !important; }
@media (max-width: 440px) {
  .reward-pass { padding-inline: 6.25px; }
  .reward-pass .pass-claim, .reward-pass .pass-claim.button.primary { width: 100%; padding-inline: 0px; font-size: 13px !important; }
  .pass-milestone h3 { font-size: 13px; }
  .pass-milestone h3 b { font-size: 22px; }
  .pass-tier-name { font-size: 11px; }
  .pass-gifts { gap: 3px; }
  .pass-gifts .img-tit { --arrow-offset: 20px; flex-basis: 46px; max-width: calc((100% - 3px) / 2); }
  .pass-gift { max-width: 46px; padding: 3px; border-radius: 8px; }
  .pass-gift > img { border-radius: 6px; }
  .pass-gift-check { width: 16px; height: 16px; font-size: 10px; border-width: 1.5px; }
  .team-panel { padding-inline: 12px; }
  .team-grid { column-gap: 8px; row-gap: 20px; }
  .avatar { width: 60px; margin-bottom: 8px; box-shadow: rgba(189, 146, 115, 0.165) 0px 0px 0px 3px; }
  .avatar.avatar-art { box-shadow: rgba(189, 146, 115, 0.165) 0px 0px 0px 3px; }
  .member strong { font-size: 13px; min-height: 36px; line-height: 1.35; }
  .member.empty .avatar { font-size: 26px; }
  .leader-tag { left: calc(50% - 34px); width: 24px; height: 40px; font-size: 12px; padding: 4px 3px 9px; }
  .hero-actions { --cta-width: min(325px,calc(100% - 115px)); gap: 7.5px; }
  .hero-actions > .primary { padding-inline: 15px; }
}

/* ==================== 13 独立邀请页入口 ==================== */
/* Standalone HTML entry using the same invitation and acceptance flow. */
body[data-invitation-entry]{min-height:100svh;background:radial-gradient(ellipse at 50% 20%,#3b2346,#140f23 70%)}
body[data-invitation-entry]>.site-header,
body[data-invitation-entry]>main,
body[data-invitation-entry]>footer,
body[data-invitation-entry]>.back-top{display:none}
.invite-entry-home{display:none}
body[data-invitation-entry]>.invite-entry-home{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:30px;text-align:center}
body[data-invitation-entry]:has(#modal[open])>.invite-entry-home{visibility:hidden}
.invite-entry-home h1{font-size:30px;color:#ffe0a5;margin:0}
.invite-entry-home .button{min-width:260px;min-height:75px}
.invite-entry-home>a{font-size:18px;color:#dec394;text-decoration:underline;text-underline-offset:5px}
@media(max-width:420px){.invite-entry-home .button{min-width:0;width:100%}}

/* 10/8 文档调整：PC 端放大活动 slogan，并将顶部 Logo 保持在较小的左边距。 */
@media (min-width: 1100px) {
  .hero h1.title-art {
    width: min(1400px, 100%);
    height: clamp(225px, 31.25svh, 325px);
    margin-bottom: -40px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-inline: 0;
  }
}

/* PC 全分辨率：顶栏左右边距与内容区对齐 */
@media (min-width: 701px) {
  .site-header:has(.official-brand) {
    padding-inline: max(20px);
  }
}

/* 10/9 需求：移动端字号与单行布局、须知标题、弹窗小字和 PC Slogan。 */
.account { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.modal .notice,
.modal .share-hint,
.modal .history-footnote,
.modal .empty-state,
.modal .demo-qr > small,
.modal .task-modal-copy { font-size: 15px; }
#teamPointsComplete { font: 700 clamp(20px, 2.7vw, 28px) / 1.2 "Microsoft YaHei", sans-serif; white-space: nowrap; }
.poster-caption .poster-opening { font-size: clamp(14px, 4vw, 24px); line-height: 1.4; white-space: nowrap; }
#rules .section-heading h2 > img { width: 80%; max-width: 425px; }
@media (min-width: 1100px) {
  .hero .hero-subtitle { transform: translateY(0); }
}
@media (max-width: 700px) {
  .site-header .account { font-size: clamp(11px, 3.75vw, 15px); max-width: 56%; white-space: nowrap; overflow: hidden; text-overflow: clip; }
  .section-intro { font-size: 15px; line-height: 1.8; }
  .personal-points p { white-space: nowrap; }
  .personal-points strong { font-size: clamp(36px, 11vw, 44px); white-space: nowrap; }
}
@media (max-width: 420px) {
  .quick-nav > .container { width: 100%; }
  .quick-nav a { font-size: clamp(12px, 4vw, 15px); padding-inline: 1px; letter-spacing: 0; white-space: nowrap; }
}

/* 10/12 反馈：确保移动端与 PC 间距覆盖生效 */
@media (min-width: 701px) {
  .hero h1.title-art { margin-bottom: -75px; }
  .hero .hero-subtitle { margin-bottom: 30px; }
  .hero-actions { margin-top: 0; }
}
@media (min-width: 1100px) {
  .hero h1.title-art { margin-bottom: -40px; }
}
@media (max-width: 700px) {
  .hero h1.title-art { margin-bottom: -36px; }
}

/* 1920px 宽屏：加宽 slogan 并下移，避开人物面部 */
@media (min-width: 1800px) {
  .hero h1.title-art {
    width: min(1500px, calc(100% + 50px));
  }
  .hero .hero-subtitle {
    font-size: clamp(20px, 1.15vw, 22px);
    transform: translateY(12px);
  }
}