:root { --ink:#f9eed1; --muted:#cdbb9a; --green:#0c4136; --jade:#2fc18b; --gold:#ffc451; --gold-deep:#b96c1f; --wine:#2b1109; --panel:rgba(9,31,26,.82); --line:rgba(255,203,94,.28); --page:1240px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#051d1b; }
body { min-width:320px; margin:0; overflow-x:hidden; color:var(--ink); font-family:"Microsoft YaHei","Noto Sans SC",Arial,sans-serif; background:linear-gradient(180deg,#071d1b 0%,#063026 35%,#061c1d 100%); }
body::before { content:""; position:fixed; z-index:-4; inset:0; background:radial-gradient(circle at 18% 16%,rgba(255,184,57,.16),transparent 25rem),radial-gradient(circle at 92% 47%,rgba(15,176,126,.13),transparent 28rem),#061c1d; }
button,a { font:inherit; }
button { color:inherit; }
a { color:inherit; text-decoration:none; }
.page-width { width:min(calc(100% - 48px),var(--page)); margin-inline:auto; }
.site-header { position:absolute; z-index:10; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; min-height:84px; padding:12px clamp(20px,4vw,70px); background:linear-gradient(180deg,rgba(9,18,14,.72),transparent); }
.brand { display:flex; align-items:center; filter:drop-shadow(0 3px 7px rgba(0,0,0,.45)); }
.brand img { width:84px; height:auto; object-fit:contain; }
.header-tools { display:flex; align-items:center; gap:12px; }
.music-toggle,.language-current { border:1px solid rgba(255,229,170,.43); background:rgba(10,29,25,.66); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.24); backdrop-filter:blur(8px); }
.music-toggle { display:grid; place-items:center; width:42px; height:42px; cursor:pointer; border-radius:50%; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.music-toggle:hover,.music-toggle:focus-visible { transform:translateY(-2px); border-color:var(--gold); background:rgba(50,55,25,.85); outline:none; }
.music-toggle span { font-size:22px; line-height:1; color:#ffe5a5; }
.music-toggle.is-playing { border-color:var(--gold); animation:pulse 1.5s ease-in-out infinite; }
.language-menu { position:relative; }
.language-current { display:flex; align-items:center; gap:8px; min-height:42px; padding:0 12px 0 7px; border-radius:22px; cursor:pointer; color:#fff4d9; }
.language-current:hover,.language-current:focus-visible { border-color:var(--gold); outline:none; }
.language-code,.language-list span { display:grid; place-items:center; flex:0 0 auto; width:27px; height:27px; border:1px solid rgba(255,213,126,.7); border-radius:50%; color:#ffd66c; font-size:10px; font-weight:800; letter-spacing:.04em; }
.chevron { width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.language-list { position:absolute; right:0; top:calc(100% + 9px); width:150px; padding:5px; border:1px solid rgba(255,218,139,.32); border-radius:13px; background:rgba(5,23,20,.96); box-shadow:0 18px 40px rgba(0,0,0,.42); }
.language-list button { display:flex; align-items:center; gap:9px; width:100%; padding:8px; border:0; border-radius:8px; background:transparent; cursor:pointer; color:#e9dbbd; text-align:left; font-size:13px; }
.language-list button:hover,.language-list button.is-active { color:#fff5dd; background:rgba(240,167,54,.18); }
.language-list span { width:24px; height:24px; font-size:9px; }
main { position:relative; isolation:isolate; overflow:hidden; }
.scene-extension { position:absolute; z-index:-2; top:clamp(540px,56.25vw,900px); width:100%; height:1130px; background:linear-gradient(180deg,rgba(4,23,21,.05) 0%,rgba(5,26,23,.62) 77%,#06221f 100%),url("./assets/panda/background-extension.webp") center top / max(100%,1600px) auto no-repeat; pointer-events:none; }
.hero { position:relative; display:flex; min-height:clamp(650px,56.25vw,900px); align-items:flex-end; overflow:hidden; }
.hero-image { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.08) 52%,rgba(0,0,0,.13)),linear-gradient(0deg,rgba(5,19,17,.76) 0%,transparent 40%),url("./assets/panda/hero-poster.webp") center top / cover no-repeat; }
.hero::after { content:""; position:absolute; z-index:-1; inset:auto 0 0; height:42%; background:linear-gradient(0deg,rgba(5,22,20,.86),transparent); }
.hero-content { align-self:center; padding-top:112px; padding-bottom:135px; text-shadow:0 3px 18px rgba(0,0,0,.55); }
.hero-kicker,.section-heading>p,.section-overline { margin:0 0 10px; color:#ffe2a1; font-size:11px; font-weight:800; letter-spacing:.19em; }
.hero h1,.section h2 { max-width:760px; margin:0; color:#fff4d4; font-family:Georgia,"Songti SC","Microsoft YaHei",serif; line-height:1.06; letter-spacing:.02em; }
.hero h1 { font-size:clamp(45px,5.3vw,78px); text-wrap:balance; }
.hero h1 em,.section h2 em { color:#ffd25d; font-style:normal; text-shadow:0 0 22px rgba(255,186,57,.28); }
.hero-lede { max-width:460px; margin:18px 0 23px; color:#f6e8cb; font-size:clamp(15px,1.4vw,19px); line-height:1.75; }
.hero-reward { display:grid; grid-template-columns:auto auto; gap:0 12px; width:max-content; max-width:100%; padding:11px 18px 10px; border:1px solid rgba(255,219,130,.54); border-left:4px solid #ffd157; border-radius:4px 14px 14px 4px; background:linear-gradient(90deg,rgba(51,29,12,.72),rgba(7,31,25,.5)); box-shadow:0 8px 22px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.18); }
.hero-reward span { align-self:end; padding-bottom:6px; color:#e9cfaa; font-size:13px; }
.hero-reward strong { grid-row:span 2; align-self:center; color:#ffd057; line-height:.8; text-shadow:0 3px 8px rgba(80,37,0,.9); }
.hero-reward i { font-family:Georgia,serif; font-size:52px; font-style:normal; }
.hero-reward small { font-size:24px; }
.hero-reward b { color:#fff1cf; font-size:12px; font-weight:500; }
.hero-cta { display:inline-flex; gap:12px; align-items:center; margin-top:26px; padding:10px 0; color:#fff0c9; border-bottom:1px solid #f6c256; font-size:14px; transition:gap .2s ease,color .2s ease; }
.hero-cta:hover { gap:18px; color:#ffd05e; }
.hero-bottom { position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:repeat(4,1fr); min-height:86px; padding:0 24px; border:1px solid rgba(255,211,116,.25); border-bottom:0; border-radius:14px 14px 0 0; background:rgba(5,23,20,.68); backdrop-filter:blur(10px); }
.hero-bottom>div { display:flex; flex-direction:column; justify-content:center; gap:4px; padding:0 clamp(10px,2.2vw,30px); border-right:1px solid rgba(255,227,172,.18); }
.hero-bottom>div:last-child { border-right:0; }
.hero-bottom span { color:#cdbf9f; font-size:12px; }
.hero-bottom strong { color:#fef3d5; font-size:17px; white-space:nowrap; }
.hero-bottom .accent strong { color:#ffd05b; }
.section { position:relative; }
.activity-section { padding-top:110px; padding-bottom:118px; }
.section-heading h2 { font-size:clamp(31px,3.3vw,50px); }
.activity-grid { display:grid; grid-template-columns:.91fr 1.34fr; gap:30px; align-items:stretch; margin-top:38px; }
.formula-card { display:flex; align-items:center; gap:24px; min-height:206px; padding:24px; border:1px solid rgba(255,211,104,.35); border-radius:20px; background:linear-gradient(145deg,rgba(81,49,13,.78),rgba(20,47,35,.91)); box-shadow:0 18px 38px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.14); }
.formula-orbit { position:relative; display:grid; place-items:center; flex:0 0 110px; width:110px; height:110px; border:1px solid rgba(255,217,114,.8); border-radius:50%; color:#ffe9a6; box-shadow:inset 0 0 0 7px rgba(255,213,87,.09),0 0 30px rgba(255,173,37,.18); }
.formula-orbit::before,.formula-orbit::after { content:""; position:absolute; border:1px solid rgba(255,226,141,.42); border-radius:50%; }
.formula-orbit::before { inset:-8px 16px; }.formula-orbit::after { inset:16px -8px; }
.formula-orbit span { font-family:Georgia,serif; font-size:30px; font-weight:bold; }
.formula-card p { margin:0; }.formula-card h3 { margin:5px 0 10px; color:#ffe5a1; font-size:20px; }.formula-text { color:#d4c5a7; font-size:13px; line-height:1.7; }
.journey-steps { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:0; padding:0; list-style:none; }
.journey-steps li { display:flex; gap:15px; align-items:center; min-height:97px; padding:14px 18px; border:1px solid rgba(229,239,198,.16); border-radius:15px; background:rgba(6,30,25,.76); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.journey-steps span { color:#f3c24b; font-family:Georgia,serif; font-size:28px; font-weight:bold; }.journey-steps p { margin:0; color:#f0e5cd; font-size:14px; line-height:1.55; }
.game-section { padding:104px 0 100px; background:linear-gradient(90deg,rgba(7,35,28,.86),rgba(7,22,19,.64),rgba(7,34,29,.89)); border-top:1px solid rgba(255,211,104,.14); border-bottom:1px solid rgba(255,211,104,.14); }
.game-top { display:grid; grid-template-columns:1fr .78fr; gap:42px; align-items:end; }.game-summary { max-width:470px; margin:0 0 7px auto; color:#dacbaa; line-height:1.85; }
.game-showcase { display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(40px,8vw,130px); align-items:center; margin-top:55px; }
.game-device { position:relative; justify-self:center; width:min(100%,280px); margin:0; padding:8px; border:1px solid rgba(255,213,110,.52); border-radius:27px; background:linear-gradient(145deg,#e6af45,#45240d 17%,#15261b 70%,#d08e27); box-shadow:0 22px 42px rgba(0,0,0,.45),0 0 45px rgba(254,178,35,.12); transform:rotate(-2.5deg); }
.device-glow { position:absolute; z-index:-1; inset:-13%; background:radial-gradient(circle,rgba(255,190,62,.24),transparent 65%); }.game-device img { display:block; width:100%; height:auto; border:3px solid #251608; border-radius:20px; }.game-device figcaption { margin-top:8px; color:#f9dea2; text-align:center; font-size:11px; }
.mechanic-list { display:grid; gap:14px; }.mechanic { position:relative; display:grid; grid-template-columns:105px auto 1fr; gap:18px; align-items:center; min-height:141px; padding:14px 22px 14px 8px; border:1px solid rgba(255,221,142,.24); border-radius:19px; overflow:hidden; background:linear-gradient(100deg,rgba(63,39,14,.72),rgba(10,35,28,.85)); box-shadow:inset 0 1px rgba(255,255,255,.09); }
.mechanic::after { content:""; position:absolute; right:-90px; top:-50px; width:210px; height:210px; border:1px solid rgba(255,205,93,.14); border-radius:50%; }.mechanic-index { align-self:start; color:#f9c751; font-family:Georgia,serif; font-size:17px; }.mechanic img { align-self:end; width:100%; max-height:123px; object-fit:contain; filter:drop-shadow(0 9px 8px rgba(0,0,0,.4)); }.mechanic p,.mechanic h3 { margin:0; }.mechanic p:first-of-type { color:#f7ca65; font-size:10px; font-weight:800; letter-spacing:.14em; }.mechanic h3 { margin:4px 0 5px; color:#fff0ca; font-family:Georgia,"Songti SC",serif; font-size:23px; }.mechanic div>p:last-child { position:relative; z-index:1; color:#d8c8a7; font-size:13px; line-height:1.65; }
.game-facts { display:grid; grid-template-columns:repeat(4,1fr); margin-top:64px; border-top:1px solid rgba(255,214,118,.27); border-bottom:1px solid rgba(255,214,118,.27); }.game-facts div { display:flex; flex-direction:column; gap:5px; padding:18px 20px; border-right:1px solid rgba(255,214,118,.16); }.game-facts div:last-child { border:0; }.game-facts span { color:#c2b594; font-size:12px; }.game-facts strong { color:#ffdc80; font-size:16px; }
.dragon-section { display:grid; grid-template-columns:1fr .92fr; gap:48px; min-height:535px; padding-top:115px; padding-bottom:105px; align-items:center; }.dragon-copy>p:not(.section-overline):not(.dragon-note) { max-width:550px; margin:22px 0; color:#dfd1b4; line-height:1.95; }.multiplier-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:27px; }.multiplier-row span { min-width:48px; padding:7px 8px; border:1px solid rgba(255,215,117,.47); border-radius:8px; color:#ffda79; background:rgba(66,38,10,.33); font-family:Georgia,serif; font-size:17px; text-align:center; }.dragon-note { max-width:540px; padding-top:17px; border-top:1px solid rgba(255,218,135,.25); color:#bfb493; font-size:12px; line-height:1.75; }.dragon-visual { position:relative; min-height:405px; }.dragon-visual>img:first-child { position:absolute; right:-10%; bottom:-8%; width:min(118%,600px); max-height:475px; object-fit:cover; object-position:center; mask-image:linear-gradient(90deg,transparent 0,black 18%,black 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0,black 18%,black 100%); filter:drop-shadow(0 20px 22px rgba(0,0,0,.38)); }.dragon-visual .wild-upgrade { position:absolute; z-index:1; left:0; bottom:15px; width:175px; filter:drop-shadow(0 12px 20px rgba(0,0,0,.48)); }
.rules-exchange { display:grid; grid-template-columns:1.21fr .79fr; gap:28px; align-items:start; padding-top:65px; padding-bottom:116px; }.rules-card,.exchange-card { border:1px solid rgba(255,215,127,.25); border-radius:20px; background:linear-gradient(145deg,rgba(17,43,33,.92),rgba(7,24,21,.9)); box-shadow:0 22px 48px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.07); }.rules-card { padding:35px clamp(22px,3.2vw,46px); }.exchange-card { padding:35px 28px; }.section-heading-left h2 { font-size:31px; }.rules-list { display:grid; gap:14px; margin:28px 0 0; padding:0; list-style:none; counter-reset:rule; }.rules-list li { position:relative; padding-left:37px; color:#e1d4ba; font-size:14px; line-height:1.75; counter-increment:rule; }.rules-list li::before { content:counter(rule); position:absolute; left:0; top:1px; display:grid; place-items:center; width:24px; height:24px; border:1px solid rgba(255,212,107,.55); border-radius:50%; color:#ffd36b; font-family:Georgia,serif; font-size:12px; }.exchange-meta { margin:19px 0 14px; color:#d5c7a9; font-size:13px; }.exchange-table-wrap { max-height:345px; overflow:auto; border:1px solid rgba(255,220,149,.18); border-radius:11px; }.exchange-table-wrap::-webkit-scrollbar { width:7px; }.exchange-table-wrap::-webkit-scrollbar-thumb { border-radius:4px; background:rgba(255,208,103,.42); }.exchange-card table { width:100%; border-collapse:collapse; color:#e8ddc5; font-size:12px; }.exchange-card th,.exchange-card td { padding:10px 12px; text-align:left; }.exchange-card th { position:sticky; top:0; background:#1c3c2e; color:#ffe08b; font-weight:700; }.exchange-card tbody tr:nth-child(even) { background:rgba(255,238,181,.045); }.exchange-card td:last-child { color:#f9ce6c; text-align:right; font-family:ui-monospace,Consolas,monospace; }.exchange-note { margin:13px 0 0; color:#bdb193; font-size:11px; line-height:1.65; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:28px clamp(24px,6vw,90px); border-top:1px solid rgba(255,214,120,.18); background:#041816; }.site-footer>div { display:flex; align-items:center; gap:14px; }.site-footer img { width:58px; height:auto; opacity:.86; }.site-footer p { display:grid; gap:3px; margin:0; }.site-footer strong { color:#f6dfaf; font-size:13px; }.site-footer span { color:#a79b80; font-size:11px; }.site-footer>a { color:#f7ce70; font-size:13px; }
.cut-in { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.73,.23,1); }.cut-in.is-visible { opacity:1; transform:none; }.hero-content.cut-in { transition-delay:.14s; }.mechanic.cut-in:nth-child(2) { transition-delay:.1s; }.mechanic.cut-in:nth-child(3) { transition-delay:.2s; }
@keyframes pulse { 50% { box-shadow:0 0 0 6px rgba(255,199,71,.11),0 0 22px rgba(255,194,55,.3); } }
@media (max-width:900px) { .page-width { width:min(calc(100% - 32px),650px); }.hero { min-height:720px; }.hero-image { background-position:58% top; }.hero-content { align-self:flex-end; padding-bottom:142px; }.hero-bottom { grid-template-columns:repeat(2,1fr); width:min(calc(100% - 32px),650px); min-height:130px; }.hero-bottom>div:nth-child(2) { border-right:0; }.hero-bottom>div { min-height:64px; }.activity-grid,.game-top,.game-showcase,.dragon-section,.rules-exchange { grid-template-columns:1fr; }.game-summary { margin:0; }.game-showcase { gap:45px; }.game-device { order:2; }.mechanic { grid-template-columns:82px auto 1fr; }.game-facts { grid-template-columns:repeat(2,1fr); }.game-facts div:nth-child(2) { border-right:0; }.game-facts div:nth-child(-n+2) { border-bottom:1px solid rgba(255,214,118,.16); }.dragon-section { gap:15px; }.dragon-visual { min-height:335px; }.dragon-visual>img:first-child { width:100%; right:-3%; }.dragon-visual .wild-upgrade { width:145px; }.rules-exchange { padding-top:30px; } }
@media (max-width:560px) { .site-header { min-height:64px; padding:8px 16px; }.brand img { width:65px; }.header-tools { gap:8px; }.music-toggle { width:36px; height:36px; }.music-toggle span { font-size:18px; }.language-current { min-height:36px; padding-right:9px; font-size:12px; }.language-code { width:23px; height:23px; font-size:8px; }.hero { min-height:685px; }.hero-image { background-position:59% top; }.hero-content { padding-top:84px; padding-bottom:151px; }.hero h1 { font-size:43px; }.hero-kicker { font-size:9px; letter-spacing:.13em; }.hero-lede { max-width:290px; margin:14px 0 17px; font-size:14px; }.hero-reward { gap:0 8px; padding:8px 11px 9px; }.hero-reward i { font-size:43px; }.hero-reward small { font-size:19px; }.hero-reward span { font-size:11px; }.hero-reward b { font-size:10px; }.hero-bottom { min-height:128px; }.hero-bottom>div { padding:0 11px; }.hero-bottom span { font-size:10px; }.hero-bottom strong { font-size:13px; }.activity-section { padding-top:77px; padding-bottom:80px; }.section-heading h2 { font-size:32px; }.activity-grid { margin-top:27px; }.formula-card { gap:15px; min-height:165px; padding:18px; }.formula-orbit { flex-basis:75px; width:75px; height:75px; }.formula-orbit span { font-size:22px; }.formula-card h3 { font-size:17px; }.formula-text { font-size:11px; }.journey-steps { grid-template-columns:1fr; }.journey-steps li { min-height:70px; padding:11px 14px; }.journey-steps span { font-size:23px; }.journey-steps p { font-size:12px; }.game-section { padding:76px 0 70px; }.game-showcase { margin-top:31px; }.mechanic { grid-template-columns:62px 70px 1fr; gap:9px; min-height:121px; padding:12px 11px 12px 7px; }.mechanic img { max-height:90px; }.mechanic-index { font-size:14px; }.mechanic p:first-of-type { font-size:8px; letter-spacing:.08em; }.mechanic h3 { font-size:18px; }.mechanic div>p:last-child { font-size:11px; line-height:1.5; }.game-facts { margin-top:38px; }.game-facts div { padding:13px 10px; }.game-facts strong { font-size:13px; }.dragon-section { min-height:0; padding-top:80px; padding-bottom:65px; }.dragon-copy>p:not(.section-overline):not(.dragon-note) { margin:17px 0; font-size:13px; }.multiplier-row { margin-top:20px; }.multiplier-row span { min-width:42px; font-size:14px; }.dragon-note { font-size:11px; }.dragon-visual { min-height:270px; }.dragon-visual>img:first-child { bottom:0; max-height:300px; }.dragon-visual .wild-upgrade { bottom:0; width:113px; }.rules-exchange { gap:18px; padding-bottom:70px; }.rules-card,.exchange-card { border-radius:15px; }.rules-card,.exchange-card { padding:24px 18px; }.section-heading-left h2 { font-size:27px; }.rules-list { gap:12px; margin-top:21px; }.rules-list li { padding-left:33px; font-size:12px; }.rules-list li::before { width:21px; height:21px; font-size:10px; }.exchange-card th,.exchange-card td { padding:9px; font-size:11px; }.site-footer { align-items:flex-start; padding:23px 17px; }.site-footer>div { gap:9px; }.site-footer img { width:43px; }.site-footer strong { font-size:11px; }.site-footer span,.site-footer>a { font-size:10px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.cut-in { opacity:1; transform:none; transition:none; }.music-toggle.is-playing { animation:none; } }

/* Second-pass layout refinements */
.music-toggle { position:relative; }
.music-toggle .music-slash { position:absolute; z-index:1; width:28px; height:2px; border-radius:2px; background:#ffefbf; box-shadow:0 1px 3px rgba(0,0,0,.75); opacity:0; transform:rotate(-48deg); transition:opacity .18s ease; }
.music-toggle:not(.is-playing) .music-slash { opacity:1; }
.hero-content { align-self:flex-end; padding-top:164px; padding-bottom:146px; }
.hero-bottom { bottom:30px; width:min(calc(100% - 48px),1050px); min-height:0; gap:12px; padding:0; border:0; border-radius:0; background:none; backdrop-filter:none; }
.hero-bottom>div,.hero-bottom>div:last-child { min-height:76px; padding:13px clamp(14px,2vw,24px); border:1px solid rgba(255,218,132,.42); border-radius:14px; background:linear-gradient(135deg,rgba(13,39,30,.88),rgba(48,31,12,.72)); box-shadow:0 12px 28px rgba(0,0,0,.29),inset 0 1px rgba(255,255,255,.14); backdrop-filter:blur(10px); }
.hero-bottom>div:nth-child(2) { background:linear-gradient(135deg,rgba(106,62,13,.88),rgba(27,49,30,.77)); border-color:rgba(255,207,86,.68); }
.activity-section { z-index:0; isolation:isolate; padding-top:116px; padding-bottom:122px; }
.activity-section::before { content:""; position:absolute; z-index:-1; inset:-26px calc(50% - 50vw); border-top:1px solid rgba(255,216,119,.23); border-bottom:1px solid rgba(255,216,119,.18); background:linear-gradient(90deg,rgba(4,29,24,.93),rgba(5,35,27,.66) 45%,rgba(4,27,23,.92)),linear-gradient(0deg,rgba(2,22,19,.72),rgba(2,22,19,.2)),url("./assets/panda/activity-courtyard.webp") center / cover no-repeat; }
.game-top { display:block; }
.mechanic:first-child img { transform:translateX(-14px); }
.wild-upgrade-inline { display:block; width:min(230px,72%); height:auto; margin:17px 0 0; filter:drop-shadow(0 12px 18px rgba(0,0,0,.45)); }
.dragon-visual { display:flex; align-items:center; min-height:0; }
.dragon-visual>img:first-child { position:relative; right:auto; bottom:auto; display:block; width:100%; max-height:none; object-fit:contain; object-position:center; mask-image:none; -webkit-mask-image:none; }

@media (max-width:900px) { .hero-content { padding-top:132px; padding-bottom:188px; }.hero-bottom { bottom:24px; gap:8px; }.hero-bottom>div,.hero-bottom>div:last-child { min-height:60px; padding:10px 13px; }.dragon-visual { min-height:0; }.dragon-visual>img:first-child { width:100%; right:auto; }.mechanic:first-child img { transform:translateX(-9px); } }
@media (max-width:560px) { .hero { min-height:735px; }.hero-content { padding-top:108px; padding-bottom:182px; }.hero-bottom { bottom:18px; gap:7px; }.hero-bottom>div,.hero-bottom>div:last-child { min-height:56px; padding:9px 10px; }.hero-bottom span { font-size:10px; }.hero-bottom strong { font-size:12px; }.activity-section { padding-top:80px; padding-bottom:84px; }.activity-section::before { inset:-15px calc(50% - 50vw); background-position:58% center; }.mechanic:first-child img { transform:translateX(-6px); }.wild-upgrade-inline { width:190px; margin-top:14px; }.dragon-visual { min-height:0; }.dragon-visual>img:first-child { width:100%; max-height:none; } }

/* Awakening Bet and exchange-detail refinements */
.hero-reward strong { display:inline-flex; align-items:flex-end; gap:2px; line-height:1; }
.hero-reward strong i,.hero-reward strong small { display:block; line-height:.78; }
.awakening-bet { display:grid; gap:15px; max-width:540px; margin-top:28px; padding:20px; border:1px solid rgba(255,213,109,.34); border-radius:16px; background:linear-gradient(135deg,rgba(66,49,16,.7),rgba(7,37,29,.84)); box-shadow:inset 0 1px rgba(255,255,255,.1),0 15px 30px rgba(0,0,0,.16); }
.awakening-bet-copy>p:first-child { margin:0 0 4px; color:#ffd36b; font-size:10px; font-weight:800; letter-spacing:.16em; }
.awakening-bet h3 { margin:0; color:#fff0bc; font-family:Georgia,"Songti SC","Microsoft YaHei",serif; font-size:25px; }
.awakening-bet-copy>p:last-child { margin:8px 0 0; color:#e2d5b9; font-size:13px; line-height:1.75; }
.awakening-bet>img { display:block; width:min(100%,500px); height:auto; border-radius:7px; filter:drop-shadow(0 9px 12px rgba(0,0,0,.38)); }
.dragon-visual { justify-content:center; }
.dragon-visual>img:first-child { width:min(78%,380px); }
.exchange-card table { min-width:560px; }
.exchange-card th:not(:first-child),.exchange-card td:not(:first-child) { text-align:right; white-space:nowrap; }
.exchange-card td:nth-child(2),.exchange-card td:nth-child(3),.exchange-card td:nth-child(4) { font-family:ui-monospace,Consolas,monospace; }
.exchange-card td:nth-child(3) { color:#f7e3b1; }.exchange-card td:nth-child(4) { color:#f9ce6c; }

@media (max-width:900px) { .dragon-visual>img:first-child { width:min(76%,380px); }.awakening-bet { max-width:590px; } }
@media (max-width:560px) { .hero-reward strong { gap:1px; }.hero-reward strong i,.hero-reward strong small { line-height:.79; }.awakening-bet { margin-top:22px; padding:16px; gap:12px; }.awakening-bet h3 { font-size:22px; }.awakening-bet-copy>p:last-child { font-size:12px; }.dragon-visual>img:first-child { width:min(78%,315px); }.exchange-card table { min-width:530px; }.exchange-card th,.exchange-card td { padding:9px 8px; font-size:10px; } }

/* Final placement, transition, and table-height refinements */
.hero-reward strong { transform:translateY(-3px); }
.hero-cta { position:absolute; z-index:2; left:max(18px,calc(50% - 620px)); bottom:48px; margin:0; padding:12px 15px; border:1px solid rgba(255,211,105,.64); border-radius:12px; background:rgba(10,35,27,.8); box-shadow:0 10px 24px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(8px); }
.hero-bottom { left:calc(50% + 75px); width:min(calc(100% - 270px),970px); }
.hero-content { padding-bottom:125px; }
.activity-section::before { inset:-26px calc(50% - 50vw) -1px; border-bottom:0; background:linear-gradient(0deg,#092b23 0%,rgba(9,43,35,.92) 12%,transparent 36%),linear-gradient(90deg,rgba(4,29,24,.92),rgba(5,35,27,.62) 45%,rgba(4,27,23,.9)),url("./assets/panda/background-extension.webp") center 54% / cover no-repeat; }
.game-section { margin-top:-1px; border-top:0; background:linear-gradient(0deg,#092b23 0%,rgba(7,35,28,.94) 14%,rgba(7,22,19,.71) 60%,rgba(7,34,29,.91)),url("./assets/panda/activity-courtyard.webp") center / cover no-repeat; }
.mechanic:first-child img { transform:translateX(-29px); }.mechanic:first-child div { transform:translateX(-16px); }
.dragon-visual>img:first-child { width:min(70%,350px); padding:7px; border:1px solid rgba(255,213,111,.76); border-radius:18px; background:linear-gradient(145deg,rgba(255,207,96,.32),rgba(8,34,27,.88)); box-shadow:0 18px 34px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.22); }
.rules-exchange { align-items:stretch; }.exchange-card { display:flex; flex-direction:column; height:100%; min-height:0; }.exchange-table-wrap { flex:1; min-height:0; max-height:none; }

@media (max-width:900px) { .hero-content { padding-bottom:172px; }.hero-bottom { left:50%; width:min(calc(100% - 32px),650px); }.hero-cta { left:max(16px,calc(50% - 325px)); bottom:152px; }.mechanic:first-child img { transform:translateX(-19px); }.mechanic:first-child div { transform:translateX(-10px); }.dragon-visual>img:first-child { width:min(68%,340px); }.rules-exchange { align-items:start; }.exchange-card { height:auto; }.exchange-table-wrap { flex:none; max-height:270px; } }
@media (max-width:560px) { .hero-content { padding-bottom:166px; }.hero-cta { left:16px; bottom:148px; padding:9px 11px; font-size:12px; }.hero-bottom { left:50%; }.mechanic:first-child img { transform:translateX(-11px); }.mechanic:first-child div { transform:translateX(-5px); }.dragon-visual>img:first-child { width:min(70%,280px); padding:5px; border-radius:14px; }.exchange-table-wrap { max-height:250px; } }

/* Latest hierarchy, artwork, and panel-height refinements */
.hero-content { padding-bottom:140px; }
.hero-cta { bottom:63px; }
.hero-bottom { bottom:45px; }
.hero-lede { font-size:clamp(17px,1.55vw,21px); font-weight:700; line-height:1.65; }
.activity-section::before { background:linear-gradient(0deg,#092b23 0%,rgba(9,43,35,.94) 12%,transparent 40%),linear-gradient(90deg,rgba(4,29,24,.93),rgba(5,35,27,.62) 46%,rgba(4,27,23,.88)),url("./assets/panda/activity-rebate-v5.webp") center / cover no-repeat; }
.dragon-copy h2 { max-width:680px; font-size:clamp(35px,3.65vw,53px); }
.dragon-visual>img:first-child { width:min(84%,420px); }
.rules-exchange { align-items:start; }
.exchange-card { display:block; height:auto; min-height:0; }
.exchange-table-wrap { display:block; flex:none; max-height:345px; }

@media (max-width:900px) { .hero-content { padding-bottom:185px; }.hero-cta { bottom:165px; }.hero-bottom { bottom:37px; }.dragon-copy h2 { font-size:clamp(34px,6vw,48px); }.dragon-visual>img:first-child { width:min(81.6%,408px); }.rules-exchange { align-items:start; }.exchange-card { height:auto; }.exchange-table-wrap { max-height:345px; } }
@media (max-width:560px) { .hero-content { padding-bottom:178px; }.hero-cta { bottom:160px; }.hero-bottom { bottom:28px; }.hero-lede { font-size:16px; line-height:1.6; }.dragon-copy h2 { font-size:34px; }.dragon-visual>img:first-child { width:min(84%,336px); }.exchange-table-wrap { max-height:345px; } }

/* Precision alignment and compact exchange list */
.hero-reward strong { position:relative; transform:translateY(-8px); align-items:flex-end; line-height:1; }
.hero-reward strong i,.hero-reward strong small,.formula-orbit span { font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; }
.hero-reward strong i { line-height:1; }
.hero-reward strong small { align-self:flex-end; padding-bottom:2px; line-height:1; }
.formula-orbit span { display:block; line-height:1; transform:translateY(-5px); }
.activity-section::before { background:linear-gradient(0deg,rgba(7,42,34,.92) 0%,rgba(9,55,42,.8) 14%,rgba(10,49,38,.16) 48%,rgba(12,49,37,.28)),linear-gradient(90deg,rgba(8,45,34,.8),rgba(8,51,39,.34) 50%,rgba(10,43,33,.48)),url("./assets/panda/activity-rebate-v5.webp") center / cover no-repeat; }
.multiplier-row { gap:9px; }
.multiplier-row span { display:inline-flex; align-items:flex-end; justify-content:center; width:58px; min-width:58px; height:43px; padding:0 7px 8px; color:#ffda79; font-family:Arial,"Microsoft YaHei",sans-serif; font-size:18px; font-weight:800; font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; line-height:1; letter-spacing:0; }
.exchange-table-wrap { height:225px; max-height:225px; }

@media (max-width:560px) { .hero-reward strong { transform:translateY(-6px); }.hero-reward strong small { padding-bottom:1px; }.formula-orbit span { transform:translateY(-3px); }.multiplier-row { gap:7px; }.multiplier-row span { width:49px; min-width:49px; height:38px; padding:0 5px 7px; font-size:15px; }.exchange-table-wrap { height:190px; max-height:190px; } }

/* Final transition background and fixed utility bar */
.hero-reward strong { transform:translateY(-4px); }
.activity-section::before { background:linear-gradient(180deg,rgba(34,42,28,.45) 0%,rgba(10,55,42,.32) 38%,rgba(6,39,33,.94) 100%),linear-gradient(90deg,rgba(5,35,29,.8),rgba(7,49,38,.24) 48%,rgba(5,34,29,.72)),url("./assets/panda/activity-rebate-v5.webp") center / cover no-repeat; }
.rules-exchange { align-items:stretch; }
.exchange-card { display:flex; flex-direction:column; height:100%; min-height:0; }
.exchange-table-wrap { flex:1; height:auto; max-height:none; min-height:0; }
.site-header { position:fixed; z-index:100; isolation:isolate; min-height:78px; border-bottom:1px solid rgba(255,218,128,.32); background:linear-gradient(90deg,rgba(4,24,20,.96),rgba(13,54,40,.86) 48%,rgba(4,24,20,.96)),linear-gradient(180deg,rgba(255,211,105,.1),transparent); box-shadow:0 10px 30px rgba(0,0,0,.34),inset 0 -1px rgba(255,234,179,.12); backdrop-filter:blur(14px); }
.site-header::after { content:""; position:absolute; z-index:-1; right:10%; bottom:0; left:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,211,105,.75),transparent); }

@media (max-width:900px) { .rules-exchange { align-items:start; }.exchange-card { display:block; height:auto; }.exchange-table-wrap { display:block; height:280px; max-height:280px; }.site-header { min-height:72px; } }
@media (max-width:560px) { .hero-reward strong { transform:translateY(-3px); }.exchange-table-wrap { height:220px; max-height:220px; }.site-header { min-height:62px; background:linear-gradient(90deg,rgba(4,24,20,.97),rgba(13,54,40,.9) 48%,rgba(4,24,20,.97)); } }

/* Unified step-number hierarchy */
.journey-steps span,.mechanic-index { display:inline-flex; align-items:flex-end; justify-content:center; min-width:2.2ch; color:#f3c24b; font-family:Arial,"Microsoft YaHei",sans-serif; font-size:27px; font-weight:800; font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; line-height:1; letter-spacing:0; }
.mechanic-index { align-self:start; }
@media (max-width:560px) { .journey-steps span,.mechanic-index { min-width:2.2ch; font-size:21px; } }

/* Deep activity transition, mobile repair, and audio feedback */
.activity-section::before { background:linear-gradient(180deg,rgba(25,23,15,.56) 0%,rgba(8,44,34,.5) 43%,rgba(5,32,28,.95) 100%),linear-gradient(90deg,rgba(4,27,23,.84),rgba(7,45,35,.25) 50%,rgba(4,26,22,.82)),url("./assets/panda/activity-rebate-v5.webp") center / cover no-repeat; }
.mechanic-index { transform:translateX(-10px); }
.music-toggle::before { content:""; position:absolute; z-index:-1; inset:-5px; border:1px solid rgba(255,211,102,.68); border-radius:50%; opacity:0; pointer-events:none; }
.music-toggle.is-playing { animation:music-button-beat 1.25s ease-in-out infinite; }
.music-toggle.is-playing::before { animation:music-wave 1.35s ease-out infinite; }
@keyframes music-button-beat { 0%,100% { transform:scale(1); } 45% { transform:scale(1.1); } }
@keyframes music-wave { 0% { opacity:.72; transform:scale(.82); } 75% { opacity:0; transform:scale(1.55); } 100% { opacity:0; transform:scale(1.55); } }

@media (max-width:560px) {
  .hero-image { background-position:center top; }
  .scene-extension,.activity-section::before,.game-section { background-position:center center; }
  .hero-cta { bottom:174px; }
  .mechanic-index { transform:translateX(-8px); }
  .rules-exchange { grid-template-columns:minmax(0,1fr); }
  .rules-card,.exchange-card { width:100%; min-width:0; }
  .exchange-card table { width:100%; min-width:0; table-layout:fixed; }
  .exchange-table-wrap { overflow-x:hidden; }
  .exchange-card th,.exchange-card td,.exchange-card th:not(:first-child),.exchange-card td:not(:first-child) { padding:8px 4px; font-size:9px; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
  .exchange-card th:first-child,.exchange-card td:first-child { width:28%; }
  .exchange-card th:nth-child(2),.exchange-card td:nth-child(2),.exchange-card th:nth-child(3),.exchange-card td:nth-child(3),.exchange-card th:nth-child(4),.exchange-card td:nth-child(4) { width:24%; }
}

/* Restore the original independent card heights */
.rules-exchange { align-items:start; }
.exchange-card { display:block; height:auto; min-height:0; }
.exchange-table-wrap { display:block; flex:none; height:auto; min-height:0; max-height:345px; }
@media (max-width:560px) { .exchange-table-wrap { height:auto; max-height:345px; } }

/* Narrow-portrait collision and clipping guard */
@media (max-width:560px) {
  html,body,main { max-width:100%; overflow-x:clip; }
  .hero-image { background-position:50% top; }
  .hero-cta { bottom:134px; }
  .hero-bottom { bottom:0; }
  .rules-exchange,.rules-card,.exchange-card,.exchange-table-wrap,.exchange-card table { max-width:100%; }
}

/* iPhone Pro Max portrait safeguard */
@media (max-width:560px) {
  .hero { min-height:800px; }
  .hero-reward strong { transform:translateY(2px); }
}

/* Keep the activity backdrop from masking the final Hero metrics */
.activity-section::before { inset:0 calc(50% - 50vw); }

/* Four key metrics and a visible activity-button float */
.hero-bottom { grid-template-columns:repeat(4,minmax(0,1fr)); width:min(calc(100% - 270px),970px); }
.hero-bottom>div:nth-child(2) { background:linear-gradient(135deg,rgba(13,39,30,.88),rgba(48,31,12,.72)); border-color:rgba(255,218,132,.42); }
.hero-bottom>div.accent { background:linear-gradient(135deg,rgba(106,62,13,.88),rgba(27,49,30,.77)); border-color:rgba(255,207,86,.68); }
.hero-cta { animation:hero-cta-float 1.7s ease-in-out infinite; will-change:transform; }
@keyframes hero-cta-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

/* Slightly stronger hierarchy for the hero metrics */
.hero-bottom span { font-size:13px; }
.hero-bottom strong { font-size:18px; }
.hero-bottom .metric-date { padding-inline:14px; }
.hero-bottom .metric-date strong { font-size:15px; font-variant-numeric:tabular-nums; }
@media (max-width:900px) { .hero-bottom { left:50%; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(calc(100% - 32px),650px); }.hero-bottom .metric-date strong { font-size:13px; } }
@media (max-width:560px) { .hero { min-height:800px; }.hero-content { padding-bottom:210px; }.hero-cta { bottom:166px; }.hero-bottom { bottom:14px; width:calc(100% - 24px); gap:8px; }.hero-bottom>div,.hero-bottom>div:last-child { min-width:0; min-height:64px; padding:9px 11px; }.hero-bottom span { font-size:11px; }.hero-bottom strong,.hero-bottom .metric-date strong { font-size:12px; white-space:normal; overflow-wrap:anywhere; }.hero-bottom .metric-date { padding-inline:11px; }.awakening-bet { width:100%; max-width:100%; overflow:hidden; }.awakening-bet>img { width:100%; max-width:100%; object-fit:contain; } }