/* =========================================================
   卡通风格顶部 · 凤舞帝王（仅 PC）
   ========================================================= */
.toon-hero{
  position:relative;width:100%;min-height:min(80vh,840px);
  display:flex;flex-direction:column;
  overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#ffe7ae 0%,#ffc25e 26%,#f78a2e 55%,#c8451a 100%);
}
.toon-sky{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 42% at 50% 18%, rgba(255,255,225,.95), rgba(255,220,150,.35) 45%, transparent 70%),
    radial-gradient(30% 22% at 18% 22%, rgba(255,255,255,.55), transparent 70%);
}
.toon-rays{
  position:absolute;left:50%;top:26%;width:1800px;height:1800px;z-index:0;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,245,205,.42) 0deg 5deg, transparent 5deg 16deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 12%, rgba(0,0,0,.55) 42%, transparent 72%);
  mask-image:radial-gradient(closest-side, #000 12%, rgba(0,0,0,.55) 42%, transparent 72%);
  animation:toonRaySpin 80s linear infinite;
}
@keyframes toonRaySpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.toon-clouds{position:absolute;inset:0;z-index:1;pointer-events:none}
.toon-clouds svg{position:absolute;filter:drop-shadow(0 10px 14px rgba(150,60,10,.18));height:auto}
.toon-clouds .c1{left:2%;top:15%;width:300px;opacity:.95;animation:floatA 9s ease-in-out infinite}
.toon-clouds .c2{right:3%;top:9%;width:360px;opacity:.9;animation:floatB 11s ease-in-out infinite}
.toon-clouds .c3{left:8%;bottom:-4%;width:230px;opacity:.6;animation:floatA 13s ease-in-out infinite reverse}
.toon-clouds .c4{right:9%;bottom:-2%;width:250px;opacity:.55;animation:floatB 10s ease-in-out infinite reverse}
@keyframes floatA{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-14px)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,10px)}}

.toon-sparkles{position:absolute;inset:0;z-index:1;pointer-events:none}
.toon-sparkles i{
  position:absolute;display:block;width:10px;height:10px;
  background:linear-gradient(180deg,#fffbe6,#ffd257);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:twinkle 3.2s ease-in-out infinite;opacity:.9;
}
@keyframes twinkle{0%,100%{transform:scale(.6);opacity:.25}50%{transform:scale(1.15);opacity:1}}

.toon-nav{
  position:absolute;top:0;left:0;right:0;z-index:6;
  max-width:1500px;margin:0 auto;
  display:flex;align-items:center;justify-content:flex-end;
  padding:14px 26px 0;gap:24px;
}

.toon-nav nav{display:flex;align-items:center;gap:10px}
.toon-nav nav a{
  display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;
  font-size:14px;font-weight:700;letter-spacing:.08em;color:#6a2500;text-decoration:none;
  background:rgba(255,247,225,.85);border:2px solid #b85a1c;
  box-shadow:0 3px 0 #a94a12;transition:.18s;
}
.toon-nav nav a:hover{transform:translateY(-2px);box-shadow:0 5px 0 #a94a12;background:#fffdf4;color:#6a2500}
.toon-music{
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:2px solid #b85a1c;background:rgba(255,247,225,.85);color:#a4400c;
  font-size:16px;box-shadow:0 3px 0 #a94a12;transition:.18s;
}
.toon-music:hover{transform:translateY(-2px)}
.toon-music.is-on{background:#ffd257;color:#5c1d00}

.toon-main{
  position:relative;z-index:4;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:96px 20px 120px;
}
.toon-ribbon{
  display:inline-block;position:relative;margin-bottom:8px;
  padding:6px 34px;border-radius:8px;
  background:linear-gradient(180deg,#ff6b45,#d8291b);
  border:3px solid #7d1c0c;box-shadow:0 5px 0 #7d1c0c;
  color:#fff3c4;font-weight:800;font-size:14px;letter-spacing:.28em;
  transform:rotate(-1.2deg);
}
.toon-ribbon::before,.toon-ribbon::after{
  content:"";position:absolute;top:50%;width:24px;height:24px;
  background:linear-gradient(180deg,#ff6b45,#d8291b);border:3px solid #7d1c0c;
  transform:translateY(-50%) rotate(45deg);z-index:-1;
}
.toon-ribbon::before{left:-14px;border-right:0;border-top:0}
.toon-ribbon::after{right:-14px;border-left:0;border-bottom:0}

.toon-title{
  margin:8px 0 0;line-height:1;letter-spacing:.04em;
  font-family:"HYWenHei","Alibaba PuHuiTi","Microsoft YaHei",sans-serif;
  font-weight:900;
  font-size:clamp(60px,8.4vw,138px);
  color:#ffdc85;
  -webkit-text-stroke:9px #5b1e00;
  paint-order:stroke fill;
  text-shadow:
    0 5px 0 #8f3b05,
    0 10px 0 #752d03,
    0 15px 0 #5b1e00,
    0 22px 26px rgba(90,25,0,.42);
  transform:rotate(-1.6deg);
  animation:titleBob 5s ease-in-out infinite;
}
@keyframes titleBob{0%,100%{transform:rotate(-1.6deg) translateY(0)}50%{transform:rotate(-1.2deg) translateY(-6px)}}

.toon-sub{
  position:relative;z-index:4;margin:64px 0 0;
  font-size:clamp(14px,1.5vw,18px);font-weight:800;
  letter-spacing:.22em;color:#4f1700;
  text-shadow:0 2px 0 rgba(255,255,255,.55);
}

.toon-btns{margin-top:34px;display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
.toon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:210px;height:72px;padding:0 34px;border-radius:18px;
  font-size:20px;font-weight:900;letter-spacing:.1em;text-decoration:none;
  color:#fff8e6;border:4px solid #5b1e00;
  box-shadow:0 7px 0 #4a1700,0 14px 20px rgba(90,30,0,.28),inset 0 3px 0 rgba(255,255,255,.35);
  transition:transform .14s, box-shadow .14s;
  text-shadow:0 2px 0 rgba(90,20,0,.5);
}
.toon-btn::after{
  content:"";position:absolute;left:8px;right:8px;top:6px;height:38%;
  border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);
  pointer-events:none;
}
.toon-btn:hover{transform:translateY(-3px);box-shadow:0 10px 0 #4a1700,0 18px 26px rgba(90,30,0,.32),inset 0 3px 0 rgba(255,255,255,.35);color:#fff8e6}
.toon-btn:active{transform:translateY(3px);box-shadow:0 3px 0 #4a1700,0 6px 12px rgba(90,30,0,.3)}
.btn-red{background:linear-gradient(180deg,#ff5c46,#d41f14)}
.btn-gold{background:linear-gradient(180deg,#ffcf6b,#e59a12);color:#5b1e00;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.btn-gold:hover{color:#5b1e00}
.btn-green{background:linear-gradient(180deg,#6fd06a,#2f9b3a)}

.toon-note{margin-top:26px;display:inline-block;padding:5px 16px;border-radius:999px;
  background:rgba(255,246,220,.62);border:2px solid rgba(184,90,28,.35);
  font-size:12.5px;letter-spacing:.14em;color:#5a1c00}

/* 卖点文案卡 */
.toon-promo{
  position:relative;z-index:4;max-width:1240px;margin:30px auto 0;
  padding:20px 28px 18px;border-radius:18px;text-align:center;
  background:rgba(255,249,230,.8);
  border:3px solid rgba(184,90,28,.75);
  box-shadow:0 8px 0 rgba(150,70,20,.22),0 18px 30px rgba(120,50,10,.12);
}
.toon-promo p{
  margin:0;font-size:16.5px;line-height:2.1;font-weight:700;
  color:#4a1600;letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.toon-promo p + p{margin-top:2px}
.toon-promo p:first-child{font-size:17.5px;font-weight:800}
.toon-promo .hl{color:#d8291b}
.toon-promo .hl2{color:#a8500a}
.toon-promo .num{
  display:inline-block;font-family:Georgia,serif;font-size:22px;line-height:1;
  color:#d8291b;padding:0 2px;text-shadow:0 2px 0 rgba(255,255,255,.6);
  transform:translateY(1px);font-weight:900;
}

.toon-ground{
  position:absolute;left:0;right:0;bottom:0;height:120px;z-index:2;pointer-events:none;
  background:
    radial-gradient(60% 120% at 20% 120%, #7fbf3f 0 60%, transparent 61%),
    radial-gradient(60% 120% at 55% 130%, #8fd04a 0 60%, transparent 61%),
    radial-gradient(55% 110% at 88% 125%, #6fb137 0 60%, transparent 61%),
    linear-gradient(180deg,#a8d95c,#79b83e);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);
  mask-image:linear-gradient(180deg,transparent,#000 40%);
}

/* 关掉旧的白顶栏和右侧浮窗，只留漫画头图 */
.top{display:none!important}
#NavTop{display:none!important}

@media (max-width:1200px){
  .toon-title{-webkit-text-stroke:7px #5b1e00;font-size:clamp(56px,9vw,110px)}
  .toon-btn{min-width:160px;height:58px;font-size:17px;padding:0 22px}
  .toon-brand img{height:44px}
  .toon-nav{padding:12px 18px 0}
  .toon-nav nav a{height:36px;padding:0 14px;font-size:13px}
}
@media (max-width:820px){
  .toon-hero{min-height:auto}
  .toon-ribbon{font-size:12px;letter-spacing:.18em;padding:5px 22px}
  .toon-btns{gap:14px}
  .toon-btn{min-width:140px;height:52px;font-size:15px}
  .toon-nav{gap:10px}
  .toon-nav nav a{display:none}
}