/* 热血三端 · v2「热血漫画」
 * 理念：热血江湖源自漫画。整页像一册漫画的封面与分镜：夜靛底、藤黄字、墨线描边、硬投影。
 * 大胆只用在首屏（速度线 + 盖章式大标题），其余克制。
 * 色板：夜靛 #18245a · 墨靛 #0e1638 · 藤黄 #ffc21a · 月白 #eef3fb · 胭脂 #e5345a */
@font-face{font-family:Manhua;src:url('assets/zcool-display.woff2') format('woff2');font-display:swap}
:root{
  --night:#18245a;--ink:#0e1638;--gamboge:#ffc21a;--moon:#eef3fb;--rouge:#e5345a;--sky:#5f8fe8;
  --ink-soft:#2b3768;--text-on-night:#d5dcf0;
  --display:Manhua,'PingFang SC','Microsoft YaHei',sans-serif;
  --body:'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
  --line:3px solid var(--ink);
  --ease:cubic-bezier(.2,.9,.25,1);
  color-scheme:light;scroll-behavior:smooth;scroll-padding-top:72px
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.85 var(--body);color:var(--ink);background:var(--night)}
body.dialog-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.02em}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gamboge);outline-offset:4px}
.skip-link{position:fixed;left:16px;top:0;z-index:99;padding:10px 16px;background:var(--gamboge);color:var(--ink);border:var(--line);transform:translateY(-120%)}
.skip-link:focus{transform:none}

/* ---------- 顶栏 ---------- */
.site-header{position:absolute;inset:0 0 auto;z-index:10;height:84px;display:flex;align-items:center;gap:40px;padding:0 clamp(20px,4vw,64px)}
.brand{font:34px/1 var(--display);color:var(--gamboge);letter-spacing:.04em;paint-order:stroke fill;-webkit-text-stroke:6px var(--ink);text-shadow:3px 3px 0 var(--ink)}
.site-header nav{display:flex;gap:28px;margin-left:auto}
.site-header nav a{font-size:15px;color:var(--moon);padding:6px 0;background:linear-gradient(var(--gamboge),var(--gamboge)) 0 100%/0 3px no-repeat;transition:background-size .3s var(--ease)}
.site-header nav a:hover{background-size:100% 3px}
.header-download{font:18px/1 var(--display);letter-spacing:.08em;padding:12px 22px;background:var(--gamboge);color:var(--ink);border:var(--line);box-shadow:4px 4px 0 var(--ink);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.header-download:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.header-download:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}

/* ---------- 首屏：速度线 + 盖章大标题 ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:max(760px,100svh);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;padding:104px clamp(20px,5vw,80px) 32px;
  background:radial-gradient(60% 70% at 70% 46%,#2c3f93 0%,var(--night) 60%,#121c4a 100%)}
.hero-burst{position:absolute;inset:-30%;z-index:-3;
  background:repeating-conic-gradient(from 0deg at 64% 47%,#ffffff1a 0deg 1.3deg,transparent 1.3deg 5deg,#ffc21a14 5deg 5.8deg,transparent 5.8deg 9deg);
  -webkit-mask:radial-gradient(circle at 64% 47%,transparent 8%,#000 26%,#0000 62%);mask:radial-gradient(circle at 64% 47%,transparent 8%,#000 26%,#0000 62%)}
.hero-dots{position:absolute;inset:auto 0 0;height:55%;z-index:-2;background:radial-gradient(circle,#5f8fe866 1.3px,transparent 1.8px) 0 0/11px 11px;
  -webkit-mask:linear-gradient(transparent,#000 70%);mask:linear-gradient(transparent,#000 70%)}
.hero-art{position:absolute;z-index:-1;right:max(-4vw,-60px);top:70px;width:min(64vw,1060px);pointer-events:none}
.hero-art img{width:100%;height:auto;filter:drop-shadow(10px 10px 0 #0e163899);transform:translate(var(--pointer-x,0px),var(--pointer-y,0px));transition:transform .6s ease-out}

.hero-copy{align-self:center;max-width:min(620px,52vw);padding-bottom:28px}
.hero-kicker{display:inline-block;font-size:14px;color:var(--ink);background:var(--moon);padding:4px 12px;border:var(--line);box-shadow:3px 3px 0 var(--rouge);transform:rotate(-2deg);margin-bottom:22px}
.hero h1{font-size:clamp(72px,9.2vw,150px);line-height:.98;color:var(--gamboge);transform:rotate(-4deg);transform-origin:0 100%;margin:0 0 26px -.04em}
.hero h1 span{display:block;paint-order:stroke fill;-webkit-text-stroke:.09em var(--ink);text-shadow:.07em .07em 0 var(--rouge),.1em .1em 0 var(--ink)}
.hero h1 .t2{margin-left:.55em}
.hero-subtitle{font:clamp(22px,2vw,28px)/1.4 var(--display);color:var(--moon);margin-bottom:10px;text-shadow:2px 2px 0 var(--ink)}
.hero-intro{max-width:30em;color:var(--text-on-night);font-size:15px}

/* 对白气泡：指向角色 */

/* 下载分镜条 */
.download-dock{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:28px;padding:20px 24px;background:var(--ink);border:3px solid var(--ink);box-shadow:0 0 0 2px #ffc21a55,10px 10px 0 #0e163880}
.dock-title{font-size:32px;line-height:1.1;color:var(--gamboge);width:2.1em;letter-spacing:.05em}
.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.platform-button{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:'icon name' 'icon sub';column-gap:14px;align-items:center;text-align:left;padding:16px 18px;min-height:88px;background:var(--moon);border:var(--line);box-shadow:5px 5px 0 var(--gamboge);transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .2s}
.platform-button img{grid-area:icon;width:30px;height:30px}
.platform-button strong{grid-area:name;font:24px/1.15 var(--display);font-weight:400}
.platform-button small{grid-area:sub;font-size:12px;color:var(--ink-soft)}
.platform-status{position:absolute;top:-12px;right:10px;font-size:12px;font-weight:700;line-height:1;padding:5px 8px;background:var(--rouge);color:#fff;border:2px solid var(--ink);transform:rotate(4deg)}
.platform-button.is-ready .platform-status{background:var(--gamboge);color:var(--ink)}
.platform-button:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--gamboge);background:#fff}
.platform-button:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--gamboge)}

/* ---------- 江湖共创：三格分镜 ---------- */
.together{background:var(--moon);color:var(--ink);position:relative;overflow:hidden}
.together:before{content:'';position:absolute;right:-60px;top:-60px;width:420px;height:420px;background:radial-gradient(circle,#18245a22 1.4px,transparent 2px) 0 0/12px 12px;-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
.together-inner{position:relative;width:min(1180px,100% - 40px);margin:0 auto;padding:110px 0 100px;display:grid;grid-template-columns:1fr 300px;gap:40px 56px;align-items:end}
.together-head h2{font-size:clamp(44px,5.4vw,80px);line-height:1.08;margin-bottom:22px}
.together-head p{font-size:17px;color:var(--ink-soft);max-width:26em}
.together-art{margin:0;position:relative;height:420px;background:var(--gamboge);border:var(--line);box-shadow:8px 8px 0 var(--ink);overflow:hidden;transform:rotate(2deg)}
.together-art:before{content:'';position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg at 50% 40%,#ffffff55 0 2deg,transparent 2deg 7deg)}
.together-art img{position:absolute;left:50%;top:26px;width:250px;transform:translateX(-50%)}
.strip{grid-column:1/-1;list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.strip li{position:relative;background:#fff;border:var(--line);box-shadow:6px 6px 0 var(--ink);padding:44px 26px 26px}
.strip li:nth-child(1){transform:rotate(-1deg)}
.strip li:nth-child(3){transform:rotate(1deg)}
.strip-glyph{position:absolute;top:-26px;left:20px;display:grid;place-items:center;width:56px;height:56px;font:32px/1 var(--display);background:var(--gamboge);border:var(--line);border-radius:50%}
.strip h3{font-size:26px;line-height:1.3;margin-bottom:8px}
.strip p{font-size:14px;color:var(--ink-soft)}
.together-note{grid-column:1/-1;font-size:13px;color:#5a6488}

/* ---------- 来信 ---------- */
.letter-section{position:relative;padding:110px 20px 120px;background:var(--night);color:var(--moon)}
.letter-section:before{content:'';position:absolute;inset:0;background:radial-gradient(circle,#5f8fe833 1.2px,transparent 1.7px) 0 0/11px 11px;-webkit-mask:linear-gradient(#000,transparent 40%);mask:linear-gradient(#000,transparent 40%);pointer-events:none}
.letter-head{position:relative;width:min(760px,100%);margin:0 auto 44px}
.letter-head h2{font-size:clamp(44px,5.4vw,78px);line-height:1.08;color:var(--gamboge);paint-order:stroke fill;-webkit-text-stroke:.08em var(--ink);text-shadow:.06em .06em 0 var(--ink);margin-bottom:16px}
.letter-head p{color:var(--text-on-night);font-size:16px}
.letter-scroll{position:relative;width:min(760px,100%);margin:0 auto;background:var(--moon);color:var(--ink);border:var(--line);box-shadow:12px 12px 0 var(--ink);overflow:hidden}
.letter-scroll summary{list-style:none;cursor:pointer;padding:48px 56px 40px;display:block}
.letter-scroll summary::-webkit-details-marker{display:none}
.letter-address{display:block;font:34px/1.3 var(--display);margin-bottom:14px}
.letter-opening{display:block;font-size:16px;color:var(--ink-soft);max-width:32em}
.unroll-action{display:flex;align-items:center;gap:14px;margin-top:28px;font-weight:700;font-size:15px}
.seal-button{display:grid;place-items:center;width:52px;height:52px;font:30px/1 var(--display);color:#fff;background:var(--rouge);border:var(--line);box-shadow:3px 3px 0 var(--ink);transform:rotate(-6deg);transition:transform .25s var(--ease),box-shadow .2s}
.letter-scroll summary:hover .seal-button{transform:rotate(-14deg) scale(1.08);box-shadow:5px 5px 0 var(--ink)}
.letter-scroll summary:hover .when-closed,.letter-scroll summary:hover .when-open{text-decoration:underline 3px var(--gamboge);text-underline-offset:6px}
.when-open,.letter-scroll[open] .when-closed{display:none}
.letter-scroll[open] .when-open{display:inline}
.letter-body{padding:8px 56px 52px;border-top:3px dashed #18245a33;margin:0 32px;padding-inline:24px}
.letter-body p{margin:0 0 1.1em;font-size:16px;line-height:2}
.letter-body h3{font-size:28px;line-height:1.35;margin:44px 0 16px;padding-left:16px;border-left:8px solid var(--gamboge)}
.letter-body .letter-farewell{font:34px/1.4 var(--display);margin-top:36px}
.letter-signature{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin:24px 0 28px;font-weight:700}
.signature-seal{display:grid;place-items:center;width:62px;height:62px;padding:4px;font:20px/1.1 var(--display);text-align:center;color:var(--rouge);border:3px solid var(--rouge);transform:rotate(-8deg)}
.text-button{border:0;background:none;padding:6px 0;font-weight:700;color:var(--ink);border-bottom:3px solid var(--gamboge)}
.text-button:hover{border-bottom-color:var(--rouge)}

/* ---------- 回归 ---------- */
.return-call{background:var(--gamboge);color:var(--ink);text-align:center;padding:120px 20px 110px;clip-path:polygon(0 48px,100% 0,100% 100%,0 100%);margin-top:-48px;position:relative}
.return-call:before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 120%,#ffffff40 0 1.5deg,transparent 1.5deg 6deg);pointer-events:none}
.return-call h2{position:relative;font-size:clamp(52px,8vw,124px);line-height:1;margin-bottom:40px;text-shadow:.05em .05em 0 #fff}
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 44px;font:24px/1 var(--display);letter-spacing:.1em;border:var(--line)}
.button-primary{background:var(--ink);color:var(--gamboge);box-shadow:6px 6px 0 var(--rouge);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.button-primary:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--rouge)}
.button-primary:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--rouge)}
.contact-line{position:relative;display:flex;justify-content:center;gap:24px;margin-top:30px;font-weight:700}
.contact-line a{border-bottom:3px solid var(--ink)}

/* ---------- 页脚 ---------- */
.site-footer{background:var(--ink);color:#aeb8d6;padding:56px clamp(20px,5vw,80px) 40px;font-size:13px}
.footer-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid #ffffff1f;margin-bottom:24px}
.footer-brand{font:30px/1 var(--display);color:var(--gamboge)}
.footer-top p{font-size:14px;color:var(--moon)}
.back-top{margin-left:auto;color:var(--gamboge);font-weight:700}
.back-top:hover{text-decoration:underline 2px;text-underline-offset:5px}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;line-height:2}
.footer-meta{display:flex;gap:18px;align-items:flex-end}
.footer-meta a:hover{color:var(--moon)}

/* ---------- 下载弹窗 ---------- */
dialog{width:min(460px,calc(100% - 32px));padding:48px 34px 34px;background:var(--moon);color:var(--ink);border:var(--line);box-shadow:12px 12px 0 var(--gamboge);text-align:center}
dialog::backdrop{background:#0e1638cc}
dialog h2{font-size:38px;margin-bottom:14px}
dialog p{font-size:15px;color:var(--ink-soft);margin-bottom:22px}
.dialog-version{color:var(--ink);font-weight:700}
.browser-hint{font-size:13px}
.dialog-close{position:absolute;top:10px;right:10px;width:42px;height:42px;display:grid;place-items:center;font-size:28px;line-height:1;background:#fff;border:var(--line);transition:transform .2s var(--ease),background .2s}
.dialog-close:hover{background:var(--gamboge);transform:rotate(90deg)}
.dialog-download{width:100%}
.unavailable-button{width:100%;font-size:20px;background:repeating-linear-gradient(135deg,#dfe5f1 0 10px,#d3dae9 10px 20px);color:#5a6488;border-style:dashed}

/* ---------- 一次入场：速度线展开 → 标题盖章 → 角色冲出 ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-burst{animation:burst 1.1s var(--ease) both}
  .hero h1 .t1{animation:slam .55s .25s cubic-bezier(.3,1.6,.5,1) both}
  .hero h1 .t2{animation:slam .55s .45s cubic-bezier(.3,1.6,.5,1) both}
  .hero-art{animation:dash-in .9s .35s var(--ease) both}
  .letter-scroll[open] .letter-body{animation:unfold .5s var(--ease) both}
  dialog[open]{animation:pop .25s var(--ease) both}
}
@keyframes burst{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes slam{from{opacity:0;transform:scale(1.8) rotate(6deg)}to{opacity:1;transform:none}}
@keyframes dash-in{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:none}}
@keyframes unfold{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* ---------- 平板 ---------- */
@media (max-width:1100px){
  .hero-copy{max-width:50vw}
  .hero-intro{max-width:21em;text-shadow:0 1px 6px var(--ink),0 0 2px var(--ink)}
  .hero-art{width:72vw;right:-12vw;top:110px}
  .platform-button{grid-template-columns:1fr;grid-template-areas:'icon' 'name' 'sub';row-gap:4px}
  .together-inner{grid-template-columns:1fr 240px}
}

/* ---------- 手机 ---------- */
@media (max-width:767px){
  body{font-size:15px}
  .site-header{height:64px;gap:12px;padding:0 16px}
  .brand{font-size:26px;-webkit-text-stroke-width:5px}
  .site-header nav{display:none}
  .header-download{margin-left:auto;font-size:15px;padding:9px 14px;box-shadow:3px 3px 0 var(--ink)}
  .hero{display:block;min-height:0;padding:92px 16px 28px}
  .hero-burst{background:repeating-conic-gradient(from 0deg at 60% 62%,#ffffff1a 0deg 1.6deg,transparent 1.6deg 6deg,#ffc21a14 6deg 7deg,transparent 7deg 11deg);-webkit-mask:radial-gradient(circle at 60% 62%,transparent 6%,#000 22%,#0000 60%);mask:radial-gradient(circle at 60% 62%,transparent 6%,#000 22%,#0000 60%)}
  .hero-copy{max-width:none;padding:0}
  .hero-kicker{font-size:12px;margin-bottom:16px}
  .hero h1{font-size:clamp(60px,19vw,104px);margin-bottom:20px}
  .hero-subtitle{font-size:20px}
  .hero-intro{font-size:14px;max-width:21em}
  .letter-cta{margin-top:22px;width:100%;gap:14px;padding:12px;min-height:76px}
  .cta-seal,.cta-seal span{width:48px;height:48px}
  .cta-seal span{font-size:27px}
  .cta-text b{font-size:25px}
  .cta-text small{font-size:12px;letter-spacing:.08em}
  .cta-go{width:42px;height:42px;margin-left:auto}
  .hero-art{position:relative;top:auto;right:auto;width:118%;margin:-30px -9% -40px;z-index:-1}
  .download-dock{display:block;padding:16px 12px 14px}
  .dock-title{width:auto;font-size:26px;margin-bottom:16px}
  .download-grid{gap:10px}
  .platform-button{padding:14px 8px 12px;min-height:0;text-align:center;justify-items:center;box-shadow:4px 4px 0 var(--gamboge)}
  .platform-button img{width:24px;height:24px}
  .platform-button strong{font-size:17px}
  .platform-button small{display:none}
  .platform-status{font-size:11px;top:-10px;right:4px;padding:4px 6px}
  .together-inner{grid-template-columns:1fr;gap:24px;padding:72px 0 64px;width:calc(100% - 32px)}
  .together-head h2{font-size:clamp(36px,10vw,52px)}
  .together-head p{font-size:15px}
  .together-art{height:300px;transform:rotate(-1.5deg);box-shadow:6px 6px 0 var(--ink)}
  .together-art img{width:220px;top:6px}
  .strip{grid-template-columns:1fr;gap:34px;margin-top:20px}
  .strip li{padding:38px 20px 20px}
  .strip h3{font-size:22px}
  .letter-section{padding:76px 16px 90px}
  .letter-head h2{font-size:clamp(38px,11vw,56px)}
  .letter-scroll{box-shadow:7px 7px 0 var(--ink)}
  .letter-scroll summary{padding:32px 22px 28px}
  .letter-address{font-size:27px}
  .letter-opening{font-size:15px}
  .letter-body{margin:0 14px;padding:4px 8px 36px}
  .letter-body p{font-size:15px}
  .letter-body h3{font-size:23px}
  .letter-body .letter-farewell{font-size:28px}
  .return-call{padding:96px 16px 84px;clip-path:polygon(0 28px,100% 0,100% 100%,0 100%);margin-top:-28px}
  .return-call h2{font-size:clamp(46px,15vw,72px)}
  .site-footer{padding:44px 16px 32px}
  .back-top{margin-left:0}
  dialog{padding:46px 20px 26px;box-shadow:8px 8px 0 var(--gamboge)}
}
@media (max-width:359px){
  .platform-button strong{font-size:15px}
}

/* ===== v2.1：版面融合与光效（2026-10-28） ===== */

/* 首屏「启封来信」主行动按钮：墨底金字 + 环绕流光边 + 火漆印光芒 + 扫光 */
@property --cta-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.letter-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:18px;margin-top:30px;padding:14px 14px 14px 16px;min-height:84px;color:var(--moon);
  border:3px solid transparent;
  background:linear-gradient(135deg,#1f2d6e,var(--ink) 70%) padding-box,conic-gradient(from var(--cta-angle),#ffc21a 0deg,#fff4c4 18deg,#ffc21a 36deg,#3a4a8f 70deg,#3a4a8f 290deg,#ffc21a 330deg,#ffc21a 360deg) border-box;
  box-shadow:6px 6px 0 var(--rouge),0 0 0 1px #0e1638,0 0 34px -6px #ffc21a88;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.letter-cta:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#ffffff2e 48%,#fff6d24d 50%,#ffffff2e 52%,transparent 60%) 100% 0/320% 100% no-repeat}
.cta-seal{position:relative;flex-shrink:0;display:grid;place-items:center;width:56px;height:56px}
.cta-seal:before{content:'';position:absolute;inset:-16px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffc21acc 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 35%,transparent 70%);mask:radial-gradient(circle,#000 35%,transparent 70%)}
.cta-seal span{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font:32px/1 var(--display);color:#fff;
  background:radial-gradient(circle at 35% 30%,#ff6a84,var(--rouge) 45%,#a8153a 100%);border:3px solid var(--ink);box-shadow:inset 0 0 0 3px #ffffff33,inset -4px -6px 0 #0000002e;transform:rotate(-8deg);transition:transform .3s var(--ease)}
.cta-text{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.cta-text b{font:30px/1.1 var(--display);font-weight:400;color:var(--gamboge);letter-spacing:.06em;text-shadow:2px 2px 0 #000a}
.cta-text small{font-size:13px;letter-spacing:.18em;color:#c9d3f2}
.cta-go{flex-shrink:0;display:grid;place-items:center;width:48px;height:48px;margin-left:10px;background:var(--gamboge);color:var(--ink);border:3px solid var(--ink);box-shadow:inset 0 -4px 0 #d99a00;transition:transform .2s var(--ease)}
.cta-go svg{width:22px;height:22px}
.letter-cta:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--rouge),0 0 0 1px #0e1638,0 0 46px -4px #ffc21acc}
.letter-cta:hover .cta-seal span{transform:rotate(-20deg) scale(1.08)}
.letter-cta:hover .cta-go{transform:translateX(5px)}
.letter-cta:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--rouge),0 0 0 1px #0e1638,0 0 20px -6px #ffc21a88}
@media (prefers-reduced-motion:no-preference){
  .letter-cta{animation:cta-orbit 3.2s linear infinite}
  .letter-cta:after{animation:cta-sheen 3.2s 1.2s ease-in-out infinite}
  .cta-seal:before{animation:cta-rays 9s linear infinite}
}
@keyframes cta-orbit{to{--cta-angle:360deg}}
@keyframes cta-sheen{0%{background-position:100% 0}45%,100%{background-position:0 0}}
@keyframes cta-rays{to{transform:rotate(360deg)}}

/* 江湖共创：弓手冲出漫画格 */
.together-inner{grid-template-columns:minmax(0,1fr) 400px;gap:36px 64px;align-items:start}
.together-head{grid-column:1;grid-row:1;padding-top:10px}
.strip{grid-column:1;grid-row:2;margin-top:34px;gap:22px}
.strip h3{font-size:23px}
.together-note{grid-column:1;grid-row:3}
.together-art{grid-column:2;grid-row:1/4;align-self:stretch;height:auto;min-height:540px;margin-top:120px;overflow:visible;transform:rotate(1.5deg)}
.together-art:before{inset:0;background:repeating-conic-gradient(from 0deg at 50% 38%,#ffffff66 0 2deg,transparent 2deg 7deg)}
.together-art:after{content:'';position:absolute;inset:auto 0 0;height:38%;background:radial-gradient(circle,#0e163833 1.4px,transparent 2px) 0 0/10px 10px}
.together-art img{position:absolute;z-index:1;top:auto;bottom:-3px;left:50%;width:122%;max-width:none;height:auto;transform:translateX(-46%);filter:drop-shadow(6px 6px 0 #0e163866)}

/* 来信：速度线背景 + 两位侠客守在信纸两侧 */
.letter-section{overflow:clip}
.letter-burst{position:absolute;inset:-20% -10% auto;height:120%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 22%,#ffffff12 0deg 1.3deg,transparent 1.3deg 5deg,#ffc21a10 5deg 5.8deg,transparent 5.8deg 9deg);
  -webkit-mask:radial-gradient(circle at 50% 22%,transparent 6%,#000 20%,#0000 55%);mask:radial-gradient(circle at 50% 22%,transparent 6%,#000 20%,#0000 55%)}
.letter-head{text-align:center;width:min(820px,100%)}
.letter-kicker{display:inline-block;font-size:14px;color:var(--ink);background:var(--moon);padding:4px 12px;border:var(--line);box-shadow:3px 3px 0 var(--rouge);transform:rotate(-2deg);margin-bottom:22px}
.letter-head p.letter-kicker{color:var(--ink);font-size:14px}
.letter-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,760px) minmax(0,1fr);gap:0 28px;width:min(1440px,100%);margin:0 auto;align-items:start}
.letter-stage .letter-scroll{grid-column:2;grid-row:1;width:100%;z-index:2}
.cast{position:sticky;top:110px;grid-row:1;margin:0;isolation:isolate;display:flex;align-items:flex-end;min-height:420px}
.cast:before{content:'';position:absolute;z-index:-1;top:34px;width:min(280px,86%);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffffff66 0 3deg,transparent 3deg 10deg) var(--gamboge);border:var(--line);box-shadow:6px 6px 0 var(--ink)}
.cast img{height:auto;filter:drop-shadow(8px 8px 0 #0e163899)}
.cast-left{grid-column:1;justify-content:flex-end}
.cast-left:before{right:12%}
.cast-left img{width:min(100%,300px);margin-right:-36px}
.cast-right{grid-column:3;justify-content:flex-start}
.cast-right:before{left:8%;top:60px}
.cast-right img{width:min(118%,400px);max-width:none;margin-left:-64px}

@media (max-width:1180px){
  .letter-stage{display:block;width:min(760px,100%);padding-top:210px}
  .cast{position:absolute;top:0;min-height:0;height:270px;z-index:1}
  .cast img{width:auto!important;height:100%;margin:0!important}
  .cast:before{top:30px;width:190px}
  .cast-left{left:2%}
  .cast-left:before{right:-10px}
  .cast-right{right:0}
  .cast-right:before{left:10px}
  .letter-stage .letter-scroll{position:relative}
}
@media (max-width:1100px){
  .together-inner{grid-template-columns:minmax(0,1fr) 300px}
  .strip{grid-column:1/-1;grid-row:3}
  .together-art{grid-row:1/3;min-height:420px;margin-top:100px}
  .together-note{grid-column:1/-1;grid-row:4}
}
@media (max-width:767px){
  .together-inner{grid-template-columns:1fr}
  .together-head,.strip,.together-note,.together-art{grid-column:1;grid-row:auto}
  .together-art{min-height:0;height:300px;margin:72px 6px 10px;transform:rotate(-1.5deg)}
  .together-art img{width:250px;transform:translateX(-50%)}
  .letter-stage{padding-top:150px}
  .cast{height:196px}
  .cast:before{width:130px;top:22px}
  .letter-kicker{font-size:12px;margin-bottom:16px}
}

/* ===== v2.2：游戏图标 + 首屏宽屏构图（2026-10-28） ===== */
/* 顶栏图标：金框图标略微探出顶栏，像挂牌 */
.brand{display:flex;align-items:center;gap:12px}
.brand-icon{width:64px;height:64px;margin-top:22px;transform:rotate(-4deg);filter:drop-shadow(4px 4px 0 var(--ink));transition:transform .3s var(--ease)}
.brand:hover .brand-icon{transform:rotate(2deg) scale(1.05)}
.site-header{height:96px}
/* 下载区：图标 + 三端同游 */
.dock-head{display:flex;align-items:center;gap:14px}
.dock-icon{width:84px;height:84px;margin:-34px 0 -6px -8px;transform:rotate(-5deg);filter:drop-shadow(4px 4px 0 #000a)}
/* 下载弹窗 */
dialog{padding-top:84px;overflow:visible}
.dialog-icon{position:absolute;left:50%;top:-56px;width:116px;height:116px;transform:translateX(-50%) rotate(-4deg);filter:drop-shadow(6px 6px 0 var(--ink))}
/* 页脚 */
.footer-brand{display:inline-flex;align-items:center;gap:12px}
.footer-brand img{width:48px;height:48px}

/* 首屏：角色向文字靠拢，宽屏放大，填满中间 */
.hero-art{right:auto;left:clamp(500px,35vw,760px);width:min(calc(100vw - clamp(500px,35vw,760px) + 90px),1280px);top:64px}
.hero-burst{background:repeating-conic-gradient(from 0deg at 58% 46%,#ffffff1a 0deg 1.3deg,transparent 1.3deg 5deg,#ffc21a14 5deg 5.8deg,transparent 5.8deg 9deg);
  -webkit-mask:radial-gradient(circle at 58% 46%,transparent 8%,#000 26%,#0000 62%);mask:radial-gradient(circle at 58% 46%,transparent 8%,#000 26%,#0000 62%)}
.hero:before{content:'';position:absolute;z-index:-2;left:clamp(460px,32vw,700px);top:22%;width:min(46vw,760px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffc21a33,#e5345a1a 45%,transparent 70%);pointer-events:none}
@media (max-width:1100px){
  .hero-art{left:auto;right:-12vw;width:72vw;top:110px}
  .hero:before{left:auto;right:0;width:60vw}
}
@media (max-width:767px){
  .site-header{height:72px}
  .brand-icon{width:46px;height:46px;margin-top:14px}
  .brand{gap:8px}
  .hero-art{left:auto;right:auto;width:118%;top:auto}
  .hero:before{display:none}
  .dock-head{margin-bottom:16px}
  .dock-icon{width:60px;height:60px;margin:-30px 0 -4px -4px}
  .dock-title{margin-bottom:0}
  dialog{padding-top:74px}
  .dialog-icon{width:96px;height:96px;top:-48px}
}