/* ============ 君君合击官网 · 云纹纸底预览版 v3 ============ */
:root{
  --gold:#8a6a3c;            /* 深金褐（浅底可读） */
  --gold-bright:#8a6a3c;
  --gold-dim:#9b8a6e;
  --bg:transparent;          /* 让纸底透出 */
  --panel:rgba(255,252,246,.72);
  --line:rgba(96,70,44,.32);
  --txt:#43372a;             /* 墨色正文 */
  --ink:#2b2118;
  --ink-soft:#5a4a38;
  --red:#9e2b20;             /* 朱砂 */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background-color:#eadacb;
  background-image:url("../img/paper_tile.png");
  background-repeat:repeat;
  background-attachment:fixed;
  background-size:512px 512px;
  color:var(--txt);
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  overflow-x:hidden;
}
/* ============ 全页水印层（朱砂印章 · 已定稿） ============ */
body::after{
  content:"";
  position:fixed;inset:0;z-index:500;pointer-events:none;
  background-image:url("../img/watermark_seal.png");
  background-repeat:repeat;
  background-size:460px 460px;
  opacity:.08;
}
img{max-width:100%;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-ms-user-select:none;pointer-events:none}
a{text-decoration:none;color:inherit}
section{scroll-margin-top:76px}
button{font-family:inherit;cursor:pointer}

/* ============ 顶部导航 ============ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:linear-gradient(180deg,rgba(243,232,214,.96),rgba(243,232,214,.88));
  border-bottom:1px solid rgba(96,70,44,.28);
  backdrop-filter:blur(6px);
}
.nav-inner{
  max-width:1280px;margin:0 auto;padding:0 24px;height:72px;
  display:flex;align-items:center;gap:34px;
}
.brand img{height:58px;display:block;transition:.3s}
.brand:hover img{transform:scale(1.04)}
.menu{display:flex;gap:8px;margin-left:14px}
.menu a{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 20px;transition:.25s;border-bottom:2px solid transparent;
}
.menu a span{font-size:15px;color:var(--ink-soft);letter-spacing:3px;font-weight:600}
.menu a i{font-style:normal;font-size:10px;color:#a5947a;letter-spacing:2px;transition:.25s}
.menu a:hover span,.menu a.active span{color:var(--red);text-shadow:0 0 10px rgba(158,43,32,.28)}
.menu a:hover i,.menu a.active i{color:var(--gold)}
.menu a.active{border-bottom-color:var(--red)}
.nav-dl{margin-left:auto;flex-shrink:0}
.nav-dl img{height:46px;display:block;transition:.25s}
.nav-dl:hover img{transform:translateY(-2px);filter:drop-shadow(0 4px 10px rgba(158,43,32,.5))}
.burger{display:none;background:none;border:1px solid rgba(96,70,44,.45);color:var(--ink-soft);font-size:20px;width:42px;height:42px;border-radius:3px}

/* ============ 右侧工具条 ============ */
.sidebar{
  position:fixed;right:10px;top:50%;transform:translateY(-50%);
  width:104px;z-index:90;
}
@media (max-width:1540px){.sidebar{display:none}}
.sidebar img{display:block;width:100%}
.sidebar .hs{position:absolute;left:0;width:100%;display:block}
.sidebar .hs i{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:12px;color:transparent;transition:.2s;letter-spacing:1px;
}
.sidebar .hs:hover{background:rgba(158,43,32,.14);box-shadow:inset 0 0 18px rgba(158,43,32,.16)}

/* ============ 悬浮控制 ============ */
.float-ctrl{
  position:fixed;right:14px;bottom:20px;z-index:95;
  display:flex;flex-direction:column;gap:10px;
}
.float-ctrl button{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,252,246,.92);
  border:1px solid rgba(96,70,44,.45);color:var(--red);
  font-size:17px;transition:.25s;box-shadow:0 4px 14px rgba(96,70,44,.28);
}
.float-ctrl button:hover{border-color:var(--red);transform:translateY(-2px)}
#musicBtn .disc{display:inline-block;transition:.3s}
#musicBtn.playing .disc{animation:spin 3.2s linear infinite;text-shadow:0 0 10px rgba(158,43,32,.7)}
@keyframes spin{to{transform:rotate(360deg)}}
#topBtn{display:none}
#topBtn.show{display:block}

/* ============ ① 首屏 ============ */
.hero{
  position:relative;min-height:100vh;isolation:isolate;
  background-color:#eadacb;
  background-image:url("../img/bg_xuanzhi_dragon.png");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  display:flex;align-items:center;
}
.hero-inner{
  position:relative;z-index:5;max-width:1240px;width:100%;margin:0 auto;
  padding:110px 40px 60px;
}
.ribbon{
  display:inline-block;padding:7px 22px;
  border:1px solid rgba(96,70,44,.55);border-radius:2px;
  color:var(--red);font-size:14px;letter-spacing:4px;
  background:rgba(255,252,246,.5);margin-bottom:22px;
}
.hero-title{line-height:0;margin:6px 0 4px}
.hero-title .t-box{
  position:relative;display:block;
  width:min(500px,58vw);aspect-ratio:958/400;
}
.hero-title .t-item{
  position:absolute;inset:0;margin:auto auto auto 0;
  max-width:100%;max-height:100%;width:auto;height:auto;
  filter:drop-shadow(0 2px 8px rgba(70,48,26,.4));
  opacity:0;transform:scale(.94);transition:opacity .9s ease,transform .9s ease;
}
.hero-title .t-item.active{opacity:1;transform:scale(1)}
.hero-strip{width:min(560px,60vw);opacity:.92;margin:26px 0 30px;display:block}
.hero-btns{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.hero-btns a{display:block;transition:.25s}
.hero-btns img{height:66px;width:auto;display:block}
.hero-btns a:hover{transform:translateY(-4px)}
.hero-btns a:first-child:hover img{filter:drop-shadow(0 8px 18px rgba(158,43,32,.55))}
.hero-btns a:last-child:hover img{filter:drop-shadow(0 8px 18px rgba(70,48,26,.45))}
.counter{margin-top:18px;font-size:13px;color:#6d5c46;letter-spacing:1px}
.counter b{
  color:var(--red);font-size:17px;margin:0 3px;
  font-family:Georgia,serif;text-shadow:0 0 8px rgba(158,43,32,.3);
}

/* ---- 首屏两侧立绘（恢复原版职业立绘轮播） ---- */
.hero-warrior{position:absolute;bottom:0;pointer-events:none;z-index:-1}
.hero-warrior.l{left:-3vw;height:60vh;opacity:.92}
.hero-warrior.l img{height:100%;width:auto}
.hero-warrior.r{left:55%;bottom:5vh;height:36vh;opacity:.94}
.hero-warrior.r img{height:100%;width:auto}
.hero-warrior.r.carousel{display:grid;justify-items:start;align-items:end;height:36vh}
.hero-warrior.r.carousel img.cs{
  grid-area:1/1;height:36vh;width:auto;max-width:none;
  opacity:0;transform:translateX(14px);transition:opacity .8s ease,transform .8s ease;
}
.hero-warrior.r.carousel img.cs.active{opacity:1;transform:translateX(0)}
/* 飘浮星点（金白两色交替，水墨风点缀） */
.embers{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.embers i{
  position:absolute;bottom:-12px;width:6px;height:6px;border-radius:50%;
  background:#f7f2e8;
  box-shadow:0 0 10px 3px rgba(255,252,246,.75),0 0 18px 6px rgba(255,252,246,.3);
  animation:emberUp linear infinite;pointer-events:none;
}
/* 金：暖金微光（奇数位） */
.embers i:nth-child(odd){
  background:#eab54e;
  box-shadow:0 0 12px 4px rgba(230,169,62,.65),0 0 24px 8px rgba(230,169,62,.28);
}
/* 白：暖白微光（偶数位，默认即白） */
.embers i:nth-child(1){left:8%;animation-duration:11s;animation-delay:0s}
.embers i:nth-child(2){left:18%;animation-duration:14s;animation-delay:2.5s}
.embers i:nth-child(3){left:30%;animation-duration:12s;animation-delay:5s}
.embers i:nth-child(4){left:42%;animation-duration:15s;animation-delay:1s}
.embers i:nth-child(5){left:55%;animation-duration:11.5s;animation-delay:3.5s}
.embers i:nth-child(6){left:66%;animation-duration:13s;animation-delay:6s}
.embers i:nth-child(7){left:76%;animation-duration:12.5s;animation-delay:.8s}
.embers i:nth-child(8){left:85%;animation-duration:14.5s;animation-delay:4.2s}
.embers i:nth-child(9){left:93%;animation-duration:11.8s;animation-delay:2s}
.embers i:nth-child(10){left:48%;animation-duration:16s;animation-delay:7s}
@keyframes emberUp{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:1}
  80%{opacity:.85}
  100%{transform:translateY(-70vh) translateX(36px);opacity:0}
}

/* ============ 通用小节头 ============ */
.sec-head{text-align:center;margin-bottom:44px;position:relative}
.sec-head h2{
  font-family:"Noto Serif SC","STZhongsong","SimSun",serif;
  font-size:34px;color:var(--ink);letter-spacing:14px;text-indent:14px;
  text-shadow:0 1px 0 rgba(255,252,246,.6);
}
.sec-head p{font-size:12px;color:#9b8a6e;letter-spacing:6px;margin-top:8px;text-transform:uppercase}
.sec-head::before,.sec-head::after{
  content:"";position:absolute;top:56%;width:22%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line));
}
.sec-head::before{left:8%}
.sec-head::after{right:8%;transform:scaleX(-1)}

/* ============ 热区通用 ============ */
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.hotwrap{position:relative}
.hotwrap>img{display:block;width:100%;height:auto}
.hs{position:absolute;display:block;cursor:pointer}

/* ============ ② 游戏特色 ============ */
.features{padding:86px 0 70px;background:transparent}
.hs.feat{border-radius:6px;transition:.2s}
.hs.feat:hover{
  background:rgba(158,43,32,.08);
  box-shadow:inset 0 0 26px rgba(158,43,32,.16),0 0 0 1px rgba(158,43,32,.4);
}

/* ============ ③ 三联面板 ============ */
.triple{padding:10px 0 90px;background:transparent}
.wrap3{
  max-width:1300px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:1.02fr 1.06fr 1fr;gap:24px;align-items:start;
}
.hs.row{border-radius:4px;transition:.2s}
.hs.row:hover{background:rgba(158,43,32,.07);box-shadow:inset 0 0 20px rgba(158,43,32,.12)}
/* 白字图标条：垫墨色横带保证可读 */
.icon-strip{
  display:block;width:100%;height:auto;margin-top:18px;
  background:linear-gradient(180deg,#221b13,#15100b);
  padding:16px 20px 12px;border:1px solid rgba(96,70,44,.45);border-radius:4px;
  box-shadow:0 4px 14px rgba(70,48,26,.2);
}
.r-stack{display:flex;flex-direction:column;gap:16px}
.r-stack img{display:block;width:100%;height:auto}
.cta-join{display:block;transition:.25s;align-self:center;width:100%}
.cta-join img{width:100%;height:auto;margin:0 auto}
.cta-join:hover{transform:translateY(-4px);filter:drop-shadow(0 10px 24px rgba(158,43,32,.35))}

/* ============ ④ 职业攻略 ============ */
.classes{
  padding:90px 0;background:
    radial-gradient(50% 40% at 50% 0%,rgba(158,43,32,.07),transparent 70%);
}
.classes .inner{max-width:1240px;margin:0 auto;padding:0 20px}
.tabs{display:flex;justify-content:center;gap:14px;margin-bottom:42px}
.tab{
  padding:11px 34px;background:rgba(255,252,246,.7);border:1px solid var(--line);
  color:var(--ink-soft);font-size:16px;letter-spacing:4px;text-indent:4px;
  font-family:"STZhongsong","SimSun",serif;transition:.25s;border-radius:2px;
}
.tab:hover{color:var(--red)}
.tab.active{
  color:var(--red);border-color:rgba(158,43,32,.65);
  background:rgba(255,252,246,.95);
  box-shadow:0 2px 12px rgba(96,70,44,.18),inset 0 0 10px rgba(158,43,32,.06);
}
.pane{display:none;max-width:1240px;margin:0 auto;padding:0 20px;animation:fadeUp .5s ease}
.pane.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.class-card{
  position:relative;padding:0 28px 26px;overflow:hidden;
  background:rgba(255,252,246,.75);
  border:1px solid var(--line);transition:.3s;
}
.class-card::before{
  content:"";position:absolute;top:-1px;left:-1px;width:22px;height:22px;
  border-top:2px solid var(--red);border-left:2px solid var(--red);z-index:3;
}
.class-card::after{
  content:"";position:absolute;bottom:-1px;right:-1px;width:22px;height:22px;
  border-bottom:2px solid var(--red);border-right:2px solid var(--red);z-index:3;
}
.class-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(96,70,44,.28),0 0 20px rgba(158,43,32,.08)}
/* ---- 职业立绘 ---- */
.c-art{
  position:relative;height:252px;margin:0 -28px;
  display:flex;align-items:flex-end;justify-content:center;
  background:
    radial-gradient(70% 62% at 50% 78%,rgba(158,43,32,.1),transparent 72%);
}
.c-art img{
  position:absolute;bottom:-4px;height:97%;width:auto;max-width:none;
  filter:drop-shadow(0 10px 18px rgba(70,48,26,.4));
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 80%,transparent 99%);
  transition:opacity .45s ease;
}
.c-art .a2{opacity:0}
.class-card:hover .a2{opacity:1}
.class-card:hover .a1{opacity:0}
.c-swap{
  position:absolute;top:10px;right:12px;z-index:2;
  font-size:10px;font-style:normal;letter-spacing:1px;color:var(--ink-soft);
  border:1px solid rgba(96,70,44,.4);padding:3px 8px;border-radius:2px;
  background:rgba(255,252,246,.85);opacity:0;transition:.3s;pointer-events:none;
}
.class-card:hover .c-swap{opacity:1}
.c-ico{
  position:relative;z-index:2;
  width:52px;height:52px;margin:-26px auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(158,43,32,.55);color:var(--red);
  font-family:"STZhongsong","SimSun",serif;font-size:24px;
  background:radial-gradient(circle at 35% 30%,rgba(255,252,246,.95),rgba(240,228,206,.95));
  box-shadow:0 2px 10px rgba(96,70,44,.25),inset 0 0 10px rgba(158,43,32,.08);
}
.class-card h3{
  font-family:"STZhongsong","SimSun",serif;font-size:24px;
  color:var(--ink);letter-spacing:10px;text-indent:10px;margin-bottom:6px;
}
.c-tag{font-size:12px;color:#9b8a6e;letter-spacing:2px;margin-bottom:14px}
.class-card>p{font-size:14px;line-height:2;color:#4c3f30}
.c-combo{
  margin-top:18px;padding-top:14px;border-top:1px dashed rgba(96,70,44,.35);
  font-size:13px;color:var(--gold);letter-spacing:1px;
}

.skill-wrap{display:grid;grid-template-columns:270px 1fr;gap:30px;align-items:center}
.skill-hero{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(66% 58% at 50% 72%,rgba(158,43,32,.1),transparent 74%)}
.skill-hero img{
  max-height:560px;width:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 12px 24px rgba(70,48,26,.4));
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 82%,transparent 99%);
}
.skill-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.skill-card{
  padding:24px 24px 20px;background:rgba(255,252,246,.78);
  border:1px solid rgba(96,70,44,.22);border-left:3px solid var(--red);transition:.25s;
}
.skill-card:hover{border-left-color:#c8402c;background:rgba(255,252,246,.95);transform:translateY(-4px)}
.s-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.s-head h4{
  font-family:"STZhongsong","SimSun",serif;font-size:20px;
  color:var(--ink);letter-spacing:6px;
}
.s-tag{
  font-size:11px;color:#f5e3c3;background:linear-gradient(160deg,#8f2b1e,#6a2015);
  padding:4px 12px;border-radius:2px;letter-spacing:2px;border:1px solid rgba(255,190,140,.3);
}
.skill-card p{font-size:13px;line-height:1.95;color:#5a4c3a}

.boss-title{
  text-align:center;font-family:"STZhongsong","SimSun",serif;
  font-size:19px;color:var(--ink-soft);letter-spacing:6px;margin-bottom:22px;
}
.boss-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:980px;margin:0 auto 30px}
.boss-chips span{
  border:1px solid var(--line);background:rgba(255,252,246,.75);color:var(--ink-soft);
  padding:8px 20px;font-size:14px;letter-spacing:2px;border-radius:2px;transition:.25s;cursor:default;
}
.boss-chips span:hover{color:var(--red);border-color:rgba(158,43,32,.6);box-shadow:0 0 12px rgba(158,43,32,.15)}
.tips{
  max-width:980px;margin:0 auto;padding:18px 24px;
  border:1px dashed rgba(96,70,44,.4);background:rgba(255,252,246,.55);border-radius:3px;
}
.tips p{font-size:14px;line-height:2.1;color:#4c3f30}
.tips b{color:var(--red);font-weight:600}
.doc-link{text-align:center;margin-top:38px;font-size:14px;color:#9b8a6e}
.doc-link a{color:var(--red);border-bottom:1px dashed rgba(158,43,32,.5);padding-bottom:2px;transition:.2s}
.doc-link a:hover{color:#6a1a12;text-shadow:0 0 8px rgba(158,43,32,.35)}

/* ============ ⑤ 下载中心 ============ */
.download{
  position:relative;padding:100px 0 90px;overflow:hidden;
  background:
    radial-gradient(58% 52% at 72% 30%,rgba(158,43,32,.1),transparent 70%),
    radial-gradient(40% 40% at 15% 80%,rgba(138,106,60,.08),transparent 70%);
}
.dl-dragon{
  position:absolute;right:-70px;top:-30px;width:min(540px,46vw);
  opacity:.16;pointer-events:none;mix-blend-mode:multiply;
  filter:contrast(1.02);
}
.dl-body{position:relative;z-index:2;text-align:center;max-width:900px;margin:0 auto;padding:0 20px}
.dl-big{display:inline-block;transition:.25s}
.dl-big img{height:96px;width:auto}
.dl-big:hover{transform:translateY(-5px) scale(1.03);filter:drop-shadow(0 12px 26px rgba(158,43,32,.55))}
.dl-chips{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:30px}
.dl-chips span{
  border:1px solid var(--line);background:rgba(255,252,246,.85);color:var(--ink-soft);
  font-size:13px;letter-spacing:2px;padding:9px 22px;border-radius:2px;
}
.dl-note{margin-top:16px;font-size:12px;color:#8a7a63;letter-spacing:1px}
.dl-files{margin-top:52px}
.dl-files h3{
  font-family:"STZhongsong","SimSun",serif;font-size:20px;color:var(--gold);
  letter-spacing:8px;text-indent:8px;margin-bottom:24px;
}
.file-row{display:flex;justify-content:center;gap:26px;flex-wrap:wrap}
.file{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  min-width:240px;padding:24px 34px;background:rgba(255,252,246,.8);
  border:1px solid rgba(96,70,44,.25);border-radius:3px;transition:.25s;
}
.file:hover{transform:translateY(-4px);border-color:rgba(158,43,32,.6);box-shadow:0 10px 24px rgba(96,70,44,.22),0 0 16px rgba(158,43,32,.1)}
.file i{font-style:normal;font-size:30px}
.file b{font-size:15px;color:var(--ink);letter-spacing:1px}
.file span{font-size:12px;color:#8a7a63}
.file-tip{margin-top:18px;font-size:12px;color:#9b8a6e;letter-spacing:1px}

/* ============ 页脚（墨色横带承托白字图） ============ */
.footer{background:#181310;padding:34px 0 30px;text-align:center;border-top:3px solid rgba(158,43,32,.5)}
.footer img{width:min(880px,94%);opacity:.92}

/* ============ 模态框 ============ */
.modal{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(46,34,22,.55);backdrop-filter:blur(4px);
}
.modal.open{display:flex}
.modal-box{
  position:relative;width:min(620px,94vw);max-height:82vh;overflow:auto;
  background:linear-gradient(170deg,#fbf4e7,#f2e7d2);
  border:1px solid rgba(96,70,44,.4);padding:38px 40px 32px;border-radius:3px;
  box-shadow:0 24px 70px rgba(46,34,22,.45),0 0 30px rgba(158,43,32,.08);
  animation:fadeUp .3s ease;
}
.m-close{
  position:absolute;top:8px;right:14px;background:none;border:none;
  color:var(--red);font-size:30px;line-height:1;transition:.2s;
}
.m-close:hover{color:#6a1a12;transform:rotate(90deg)}
.modal-box h3{
  font-family:"STZhongsong","SimSun",serif;font-size:22px;
  color:var(--red);letter-spacing:4px;padding-right:30px;
}
.m-date{font-size:12px;color:#9b8a6e;margin:8px 0 16px;letter-spacing:1px}
.m-body p{font-size:14.5px;line-height:2.15;color:#4c3f30;margin-bottom:8px}
.m-body a{color:var(--red);border-bottom:1px dashed rgba(158,43,32,.5)}
.m-body a:hover{color:#6a1a12}
.m-body b{color:var(--red)}

/* ============ Toast ============ */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);
  background:rgba(30,23,16,.95);border:1px solid rgba(138,106,60,.5);color:#efe3cd;
  font-size:14px;letter-spacing:1px;padding:13px 30px;border-radius:3px;
  opacity:0;pointer-events:none;transition:.35s;z-index:300;
  box-shadow:0 10px 30px rgba(46,34,22,.5);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ 进场动画 ============ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease}
.rv.on{opacity:1;transform:none}

/* ============ 响应式 ============ */
@media (max-height:820px) and (min-width:1025px){
  .hero-inner{padding-top:88px}
  .hero-title .t-box{width:min(430px,50vw)}
  .hero-strip{margin:18px 0 22px}
  .hero-btns img{height:56px}
  .hero-warrior.l{height:52vh}
}
@media (max-width:1180px){
  .sidebar{display:none}
  .skill-wrap{grid-template-columns:1fr}
  .skill-hero{max-height:380px;overflow:hidden}
  .skill-hero img{max-height:380px}
}
@media (max-width:1024px){
  .menu{position:fixed;top:72px;right:0;left:0;flex-direction:column;gap:0;
    background:rgba(243,232,214,.98);border-bottom:1px solid var(--line);
    display:none;padding:8px 0 14px;margin:0}
  .menu.open{display:flex}
  .menu a{flex-direction:row;justify-content:center;gap:10px;padding:13px}
  .burger{display:block;margin-left:auto}
  .nav-dl{margin-left:0}
  .wrap3{grid-template-columns:1fr;max-width:760px}
  .class-grid,.skill-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .hero-warrior.l{height:44vh;left:-8vw;opacity:.65}
  .hero-warrior.r,.hero-warrior.r.carousel{display:none}
  .sec-head::before,.sec-head::after{display:none}
  .dl-dragon{opacity:.18}
}
@media (max-width:640px){
  .nav-inner{padding:0 14px;gap:14px}
  .brand img{height:46px}
  .nav-dl img{height:38px}
  .hero-inner{padding:96px 22px 40px}
  .hero-title .t-box{width:78vw}
  .hero-strip{width:86vw}
  .hero-btns img{height:54px}
  .hero-btns{gap:12px}
  .hero-warrior.l{display:none}
  .sec-head h2{font-size:26px;letter-spacing:8px}
  .tab{padding:9px 20px;font-size:14px;letter-spacing:2px}
  .dl-big img{height:74px}
  .file{min-width:200px;padding:18px 24px}
  .float-ctrl{right:10px;bottom:14px}
  .float-ctrl button{width:40px;height:40px;font-size:15px}
}