@charset "utf-8";
/* Zhen Feng Shen homepage v15 - twilight blue */
:root{
  --bg:#26384f;
  --bg-2:#1f2f43;
  --panel:rgba(255,255,255,.065);
  --panel-2:rgba(255,255,255,.035);
  --line:rgba(230,192,138,.30);
  --line-2:rgba(230,192,138,.60);
  --gold:#e8c493;
  --gold-2:#cfa061;
  --gold-d:#9a7338;
  --txt:#eef3f9;
  --dim:#b3c1d1;
  --dim-2:#8395a9;
  --red:#c0392b;
  --serif:"KaiTi","STKaiti","Kaiti SC","Songti SC","SimSun",serif;
  --sans:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Segoe UI",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--txt);font:14px/1.7 var(--sans);overflow-x:hidden;
  background-image:
    radial-gradient(1200px 620px at 50% -12%,rgba(120,170,220,.28),transparent 62%),
    radial-gradient(900px 520px at 88% 12%,rgba(232,196,147,.10),transparent 60%),
    linear-gradient(180deg,#2d4159 0%,#26384f 42%,#1d2c3e 100%);
  background-attachment:fixed;
}
img{border:0;vertical-align:middle;max-width:100%}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none;transition:all .2s ease}
a:hover{color:var(--gold)}
.wrap{width:1200px;max-width:calc(100% - 28px);margin:0 auto;position:relative;z-index:3}

/* top strip */
.topstrip{height:34px;font-size:12px;color:var(--dim);background:rgba(23,35,49,.55);border-bottom:1px solid rgba(230,192,138,.16)}
.topstrip .wrap{display:flex;align-items:center;justify-content:space-between;height:34px}
.topstrip b{color:var(--gold);font-weight:400}
.topstrip a{padding-left:16px;color:var(--dim)}
.topstrip a:hover{color:var(--gold)}

/* header */
.header{position:sticky;top:0;z-index:80;background:rgba(38,56,79,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(230,192,138,.28);box-shadow:0 8px 24px rgba(10,20,32,.28)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo img{display:block;width:202px}
.nav{display:flex;align-items:center}
.nav a{position:relative;display:block;padding:0 17px;height:78px;line-height:78px;font-size:14.5px;letter-spacing:1px;color:#dfe8f2}
.nav a::after{content:"";position:absolute;left:50%;bottom:21px;width:0;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold),transparent);transition:width .3s ease}
.nav a:hover,.nav a.on{color:var(--gold)}
.nav a:hover::after,.nav a.on::after{width:62%}

/* hero */
.hero{position:relative;height:560px;overflow:hidden;background:#12202f}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 34%}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(24,38,54,.92) 0%,rgba(24,38,54,.74) 24%,rgba(24,38,54,.24) 46%,rgba(24,38,54,0) 62%),
             linear-gradient(180deg,rgba(45,65,89,.35) 0%,rgba(45,65,89,0) 26%,rgba(38,56,79,.55) 76%,#26384f 100%)}
.hero-inner{height:100%}
.hero-left{position:absolute;left:0;top:110px;width:520px}
.hero-kicker{display:flex;align-items:center;gap:12px;font:11px/1 Arial;letter-spacing:5px;color:var(--gold)}
.hero-kicker::before{content:"";width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.hero-title{display:flex;align-items:center;gap:16px;margin-top:18px}
.hero-title span{font:74px/1 var(--serif);letter-spacing:12px;
  background:linear-gradient(180deg,#fff9e9 0%,#f4d7a6 44%,#cf9f57 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 22px rgba(6,14,22,.65))}
.hero-title .seal{width:44px;height:80px;display:flex;align-items:center;justify-content:center;
  font:26px/1 var(--serif);font-style:normal;color:#fff4e0;background:linear-gradient(160deg,#c0392b,#8a2318);
  border:1px solid rgba(255,220,170,.45);writing-mode:vertical-rl;letter-spacing:2px;box-shadow:0 10px 20px rgba(6,14,22,.45)}
.hero-sub{margin-top:16px;font-size:14px;letter-spacing:4px;color:#dbe5ef}
.hero-cta{display:flex;gap:12px;margin-top:28px}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 38px;
  font:15px/1 var(--sans);font-weight:600;letter-spacing:2px;color:#33230a;
  background:linear-gradient(135deg,#f8e2b8,#e3b374 55%,#c48f4a);
  border:1px solid rgba(255,238,206,.55);box-shadow:0 12px 26px rgba(120,80,30,.30),inset 0 1px 0 rgba(255,255,255,.65)}
.btn-primary:hover{filter:brightness(1.06);color:#241704;transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 30px;
  font:15px/1 var(--sans);letter-spacing:2px;color:#e9f1f8;background:rgba(255,255,255,.07);
  border:1px solid rgba(230,192,138,.55);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgba(230,192,138,.18);color:#fff}

/* ribbon */
.ribbon{width:1200px;max-width:calc(100% - 28px);margin:-28px auto 0;position:relative;z-index:6}
.ribbon .wrap{display:flex;align-items:center;gap:14px;height:58px;padding:0 10px 0 18px;width:100%;max-width:none;
  background:linear-gradient(90deg,rgba(192,57,43,.26),rgba(38,56,79,.96) 34%,rgba(38,56,79,.96));
  border:1px solid var(--line);box-shadow:0 16px 32px rgba(12,22,34,.4)}
.ribbon .rb-tag{flex:0 0 auto;font-size:13px;letter-spacing:2px;color:#ffcdbb;padding-right:14px;border-right:1px solid rgba(230,192,138,.32)}
.ribbon .rb-text{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ribbon .rb-text h2{display:inline;font:15px/1 var(--sans);font-weight:400;color:#eaf1f8}
.ribbon .rb-btn{flex:0 0 auto;height:34px;line-height:32px;padding:0 20px;font-size:13px;color:#33230a;font-weight:600;
  background:linear-gradient(135deg,#f8e2b8,#e0ab68);border:1px solid rgba(255,238,206,.6);box-shadow:0 6px 14px rgba(20,30,44,.3)}

/* layout */
.sheet{width:1200px;max-width:calc(100% - 28px);margin:24px auto 0}
.grid{display:grid;grid-template-columns:236px 1fr;gap:18px;align-items:start}
.side{display:flex;flex-direction:column;gap:12px;position:sticky;top:96px}
.main{min-width:0;display:flex;flex-direction:column;gap:16px}

/* side */
.dl-big{display:block;height:88px;text-align:center;color:#33230a;
  background:linear-gradient(135deg,#f9e3ba,#e3b374 55%,#c48f4a);border:1px solid rgba(255,238,206,.6);
  box-shadow:0 16px 32px rgba(120,80,30,.28);transition:transform .2s ease}
.dl-big:hover{transform:translateY(-2px)}
.dl-big b{display:block;font:26px/1 var(--serif);letter-spacing:6px;margin-top:24px}
.dl-big small{display:block;font:9px/1 Arial;letter-spacing:3px;margin-top:9px;opacity:.62}
.menu-btn{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px 0 18px;
  font-size:14px;color:#dfe8f2;background:var(--panel);border:1px solid rgba(255,255,255,.10);
  border-left:2px solid var(--gold-d);backdrop-filter:blur(6px)}
.menu-btn::after{content:">";color:var(--dim-2);font-size:15px}
.menu-btn:hover{color:var(--gold);background:rgba(230,192,138,.12);border-color:var(--line-2);border-left-color:var(--gold)}
.menu-btn:hover::after{color:var(--gold);transform:translateX(3px)}
.menu-btn.hot{background:linear-gradient(90deg,rgba(192,57,43,.30),rgba(192,57,43,.06));border-color:rgba(192,57,43,.4);border-left-color:var(--red);color:#ffd9cf}

.box{background:var(--panel);border:1px solid rgba(255,255,255,.10);border-top:2px solid var(--gold-d);backdrop-filter:blur(6px)}
.box-hd{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 16px;border-bottom:1px solid rgba(230,192,138,.18);
  font:15px/44px var(--serif);letter-spacing:2px;color:var(--gold)}
.box-hd span{font:9px/1 Arial;letter-spacing:2px;color:var(--dim-2)}
.box-bd{padding:12px 14px}
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.svc-list a{font-size:12.5px;color:var(--dim)}
.svc-list a:hover{color:var(--gold)}
.qq-box{margin-top:10px;padding:10px;background:rgba(230,192,138,.10);border:1px dashed rgba(230,192,138,.35);font-size:12px;color:var(--dim);line-height:1.9}
.qq-box b{color:var(--gold)}
.health{font-size:12px;color:var(--dim-2);line-height:2}

/* panels */
.panel{background:var(--panel);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(8px);
  box-shadow:0 14px 34px rgba(12,22,34,.28),inset 0 1px 0 rgba(255,255,255,.07)}
.panel-hd{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 18px;
  background:linear-gradient(180deg,rgba(230,192,138,.16),rgba(230,192,138,.02));border-bottom:1px solid rgba(230,192,138,.22)}
.panel-hd .t{font:17px/1 var(--serif);letter-spacing:3px;color:var(--gold)}
.panel-hd .more{font-size:12px;color:var(--dim)}
.panel-bd{padding:12px 14px}

.tabbar{display:flex;align-items:center;gap:4px;padding:12px 18px 0}
.tabbar li{height:34px;line-height:34px;padding:0 18px;font-size:13.5px;color:var(--dim);cursor:pointer;border:1px solid transparent}
.tabbar li:hover{color:var(--gold)}
.tabbar li.hover{color:var(--gold);border-color:var(--line-2);background:rgba(230,192,138,.12);box-shadow:inset 0 1px 0 rgba(255,240,210,.18)}
.tabbar .more{margin-left:auto;font-size:12px;color:var(--dim)}

.featured{text-align:center;padding:20px 12px 8px}
.featured h2{font:24px/1.4 var(--serif);letter-spacing:1px}
.featured h2 a{background:linear-gradient(180deg,#fffaf0,#f0cd97 60%,#cf9f57);-webkit-background-clip:text;background-clip:text;color:transparent}
.quicklinks{display:flex;justify-content:center;gap:10px;padding:10px 0 16px;flex-wrap:wrap}
.quicklinks a{padding:7px 16px;font-size:12.5px;color:#dbe5ef;background:rgba(255,255,255,.06);border:1px solid rgba(230,192,138,.26)}
.quicklinks a:hover{color:var(--gold);border-color:var(--line-2);background:rgba(230,192,138,.12)}

.newslist{padding:0 10px 6px}
.newslist li{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.newslist li:last-child{border-bottom:0}
.newslist li:hover{background:rgba(230,192,138,.10)}
.newslist li .name{flex:1 1 auto !important;width:auto !important;min-width:0;float:none !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px;color:#e3ebf3}
.newslist li .name a:first-child{color:#93a6ba;margin-right:6px;font-size:12px}
.newslist li .name a:last-child:hover{color:var(--gold)}
.newslist li .time{flex:0 0 auto;font:11.5px/1 Consolas,Arial;color:var(--dim-2)}
.newslist li:nth-child(-n+3) .name::after{content:"HOT";display:inline-block;margin-left:7px;padding:1px 5px;font:9px/13px Arial;color:#fff;background:rgba(192,57,43,.9)}

.pager{display:flex;justify-content:flex-end;gap:6px;padding:12px 18px 14px}
.pager span{min-width:24px;height:24px;line-height:22px;text-align:center;font:11px/22px Arial;color:var(--dim);border:1px solid rgba(230,192,138,.22)}
.pager span.on{background:linear-gradient(135deg,#f8e2b8,#e0ab68);color:#33230a;border-color:transparent;font-weight:700}

.guide-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.guide-card{display:flex;background:var(--panel);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(6px)}
.guide-card .gtitle{flex:0 0 94px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(160deg,rgba(230,192,138,.24),rgba(230,192,138,.05));border-right:1px solid rgba(230,192,138,.22);
  font:17px/1.3 var(--serif);letter-spacing:1px;color:var(--gold)}
.guide-card .gtitle small{font:9px/1 Arial;letter-spacing:1.5px;color:var(--dim-2)}
.guide-card .glinks{flex:1;padding:12px 14px;display:flex;flex-wrap:wrap;gap:6px 14px;align-content:flex-start}
.guide-card .glinks a{font-size:12.5px;color:var(--dim)}
.guide-card .glinks a:hover{color:var(--gold)}

.playphoto ul{display:flex;gap:10px}
.playphoto li{flex:1 1 0;min-width:0;border:1px solid rgba(230,192,138,.28);padding:3px;background:rgba(255,255,255,.04)}
.playphoto li img{width:100% !important;height:104px !important;object-fit:cover;display:block;max-width:none;transition:all .4s ease}
.playphoto li:hover{border-color:var(--line-2)}
.playphoto li:hover img{transform:scale(1.05)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.articlelist li{display:flex;align-items:center;height:32px;padding:0 8px;border-bottom:1px dotted rgba(255,255,255,.10)}
.articlelist li:hover{background:rgba(230,192,138,.08)}
.articlelist li .name{flex:1 1 auto;min-width:0;float:none !important;width:auto !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:#cfdae6}
.articlelist li .name a:first-child{color:#93a6ba;margin-right:5px;font-size:11.5px}
.articlelist li .time{flex:0 0 auto;font:11px/1 Consolas,Arial;color:var(--dim-2)}

/* footer */
.footer{margin-top:32px;padding:26px 0 24px;background:rgba(16,27,39,.85);border-top:2px solid var(--gold-d);color:var(--dim-2);font-size:12px;text-align:center;line-height:1.9}
.footer .fl{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.footer .fl a{padding:0 14px;color:var(--dim);position:relative}
.footer .fl a::after{content:"";position:absolute;right:0;top:50%;margin-top:-6px;width:1px;height:12px;background:rgba(230,192,138,.22)}
.footer .fl a:last-child::after{display:none}
.footer a:hover{color:var(--gold)}

.to-top{position:fixed;right:24px;bottom:28px;z-index:90;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(38,56,79,.9);border:1px solid var(--line-2);color:var(--gold);opacity:0;visibility:hidden;transition:all .25s ease}
.to-top.show{opacity:1;visibility:visible}
.to-top:hover{background:rgba(230,192,138,.2)}

@media (max-width:1240px){
  .hero{height:480px}
  .hero-left{top:80px;width:450px}
  .hero-title span{font-size:58px}
}
@media (max-width:1024px){
  .nav a{padding:0 10px;font-size:13.5px}
  .grid{grid-template-columns:1fr}
  .side{position:static;flex-direction:row;flex-wrap:wrap}
  .side>*{flex:1 1 220px}
  .guide-row,.two{grid-template-columns:1fr}
  .playphoto ul{flex-wrap:wrap}
  .playphoto li{flex:1 1 30%}
}
@media (max-width:720px){
  .topstrip{display:none}
  .header .wrap{height:60px}
  .logo img{width:152px}
  .nav{display:none}
  .hero{height:340px}
  .hero-left{left:14px;right:14px;top:30px;width:auto}
  .hero-title span{font-size:38px;letter-spacing:5px}
  .hero-title .seal{width:28px;height:50px;font-size:17px}
  .hero-sub{font-size:11.5px;letter-spacing:2px;margin-top:8px}
  .hero-cta{margin-top:14px;gap:8px}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{height:40px;padding:0 16px;font-size:13px;letter-spacing:1px}
  .ribbon{margin-top:-14px}
  .ribbon .wrap{height:auto;flex-wrap:wrap;padding:10px 12px;gap:8px}
  .ribbon .rb-tag{border-right:0;padding-right:0}
  .ribbon .rb-text{flex:1 1 100%;order:3;white-space:normal;font-size:12.5px}
  .ribbon .rb-btn{margin-left:auto;height:30px;line-height:28px;padding:0 14px;font-size:12px}
  .sheet{margin-top:14px}
  .dl-big{height:70px}
  .dl-big b{font-size:21px;margin-top:18px}
  .menu-btn{height:42px;font-size:13px}
  .tabbar{padding:10px 12px 0}
  .tabbar li{padding:0 12px;font-size:12.5px}
  .featured h2{font-size:17px}
  .newslist li{height:36px}
  .playphoto li{flex:1 1 45%}
  .playphoto li img{height:92px !important}
}

/* ============ fine polish ============ */
::selection{background:rgba(232,196,147,.35);color:#fff}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#1d2c3e}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5b7591,#3a4f66);border:2px solid #1d2c3e;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#e8c493,#b98b4d)}

/* 顶栏金线 */
.header{position:sticky}
.header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,rgba(232,196,147,0),rgba(232,196,147,.55) 22%,rgba(255,240,214,.75) 50%,rgba(232,196,147,.55) 78%,rgba(232,196,147,0))}
.header.scrolled{background:rgba(30,45,64,.94);box-shadow:0 12px 30px rgba(8,16,26,.45)}

/* 主视觉：暗角 + 底部金线 */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 150px rgba(10,18,28,.55);}
.hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:4;
  background:linear-gradient(90deg,rgba(232,196,147,0),rgba(232,196,147,.45) 50%,rgba(232,196,147,0))}
.hero-title span{text-shadow:0 0 40px rgba(232,196,147,.18)}

/* 按钮：光泽扫过 */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
.btn-primary:hover::after{left:130%}
.btn-ghost{transition:all .25s ease}
.btn-ghost:hover{border-color:rgba(232,196,147,.9);box-shadow:0 0 0 3px rgba(232,196,147,.10)}

/* 公告条：红点 + 内金线 */
.ribbon .wrap{position:relative;overflow:hidden}
.ribbon .wrap::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(232,196,147,.0),rgba(232,196,147,.35),rgba(232,196,147,0))}
.ribbon .rb-tag{display:flex;align-items:center;gap:8px}
.ribbon .rb-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff5b45;
  box-shadow:0 0 8px rgba(255,91,69,.9)}

/* 面板：悬停描边 + 标题菱形 */
.panel,.box,.guide-card{transition:border-color .25s ease,box-shadow .25s ease}
.panel:hover{border-color:rgba(232,196,147,.34);box-shadow:0 18px 40px rgba(12,22,34,.34),inset 0 1px 0 rgba(255,255,255,.08)}
.panel-hd .t{position:relative;padding-left:16px}
.panel-hd .t::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;
  background:linear-gradient(135deg,#fff4dc,#d8a961);transform:rotate(45deg);box-shadow:0 0 8px rgba(232,196,147,.6)}

/* 新闻行：悬停金色左条 */
.newslist li{position:relative}
.newslist li::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,#f4d8a8,#c99a52);
  opacity:0;transform:scaleY(.5);transition:all .22s ease}
.newslist li:hover::before{opacity:1;transform:scaleY(1)}
.newslist li .time{font-variant-numeric:tabular-nums}

/* 侧栏 */
.dl-big{position:relative;overflow:hidden}
.dl-big::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-60%;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .7s ease;pointer-events:none}
.dl-big:hover::after{left:130%}
.menu-btn{position:relative;overflow:hidden}
.menu-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform .28s ease}
.menu-btn:hover::before{transform:scaleY(1)}

/* 图集 */
.playphoto li{position:relative}
.playphoto li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,#f4d8a8,#c99a52);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.playphoto li:hover::after{transform:scaleX(1)}

/* 页脚金线 */
.footer{border-top:0;position:relative}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,rgba(232,196,147,0),rgba(232,196,147,.6) 50%,rgba(232,196,147,0))}

/* 回到顶部 */
.to-top:hover{box-shadow:0 0 0 4px rgba(232,196,147,.14),0 10px 22px rgba(8,16,26,.4)}

/* 入场动画 */
@media (prefers-reduced-motion: no-preference){
  .panel,.guide-card,.dl-big,.menu-btn,.box{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
  .main>.panel:nth-child(1){animation-delay:.04s}
  .guide-row .guide-card:nth-child(1){animation-delay:.08s}
  .guide-row .guide-card:nth-child(2){animation-delay:.12s}
  .main>.panel:nth-child(3){animation-delay:.16s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ============ polish round 2 ============ */
html{scroll-behavior:smooth}
a:focus-visible{outline:2px solid rgba(232,196,147,.75);outline-offset:3px}

/* 侧栏图标 */
.menu-btn{justify-content:flex-start;gap:10px}
.menu-btn .mi{display:flex;align-items:center;gap:10px}
.menu-btn .ico{display:flex;width:17px;height:17px;color:var(--gold);opacity:.95;transition:transform .25s ease,color .25s ease}
.menu-btn .ico svg{width:17px;height:17px}
.menu-btn:hover .ico{transform:translateY(-1px);color:#fff0d2}
.menu-btn::after{margin-left:auto}

/* 推荐标题：短金线 */
.featured h2{font-size:26px;letter-spacing:.5px}
.featured::after{content:"";display:block;width:58px;height:2px;margin:12px auto 2px;
  background:linear-gradient(90deg,rgba(232,196,147,0),#e8c493,rgba(232,196,147,0))}

/* 行高与节奏 */
.newslist li{height:43px}
.articlelist li{height:34px}
.sheet{margin-top:26px}
.grid{gap:20px}
.main{gap:18px}

/* 微交互 */
.panel-hd .more,.tabbar .more{transition:transform .2s ease,color .2s ease}
.panel-hd .more:hover,.tabbar .more:hover{color:var(--gold);transform:translateX(2px)}
.pager span{transition:all .2s ease;cursor:pointer}
.pager span:hover{color:var(--gold);border-color:rgba(232,196,147,.55)}
.quicklinks a{transition:all .22s ease}
.guide-card{transition:all .25s ease}
.guide-card:hover{transform:translateY(-1px);border-color:rgba(232,196,147,.34);box-shadow:0 14px 30px rgba(12,22,34,.28)}
.svc-list a{position:relative;transition:color .2s ease,padding-left .2s ease}
.svc-list a:hover{padding-left:4px}
.foot-links a{transition:color .2s ease}
.footer .fl a:hover{color:var(--gold)}
.topstrip a{transition:color .2s ease}

/* 公告条按钮 */
.ribbon .rb-btn{transition:all .22s ease}
.ribbon .rb-btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 8px 18px rgba(20,30,44,.4)}

/* 图集图片轻微提亮 */
.playphoto li img{filter:saturate(.98) brightness(1.02)}

/* ============ polish round 3 ============ */
.dl-big{position:relative;overflow:hidden}
.dl-ico{display:block;width:22px;height:22px;margin:14px auto 0;color:#7a4a12;opacity:.8}
.dl-ico svg{width:22px;height:22px;display:block}
.dl-big b{margin-top:6px}
.dl-big:hover .dl-ico{animation:dlbounce .7s ease}
@keyframes dlbounce{0%,100%{transform:translateY(0)}40%{transform:translateY(3px)}70%{transform:translateY(-1px)}}

/* 新闻标头与内容之间加一条提示线 */
.quicklinks{border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:14px;margin-bottom:2px}

/* HOT 标更克制 */
.newslist li:nth-child(-n+3) .name::after{
  border-radius:3px;padding:0 5px;letter-spacing:.6px;opacity:.92;
  background:linear-gradient(180deg,#cf4634,#a8301f);box-shadow:0 1px 0 rgba(0,0,0,.2)
}

/* 面板标头与列表衔接更紧 */
.panel-hd + #con_one_1 .featured{padding-top:16px}

/* 去掉 featured 后的间距补偿 */
.quicklinks{padding-top:14px}
.panel-hd + #con_one_1{padding-top:10px}

/* 恢复大标题后：与上方公告条区分开，改成"居中大字 + 短金线" */
.featured{padding:22px 12px 12px;text-align:center}
.featured h2{font:26px/1.45 var(--serif);letter-spacing:1px}
.featured h2 a{background:linear-gradient(180deg,#fffaf0,#f0cd97 60%,#cf9f57);-webkit-background-clip:text;background-clip:text;color:transparent}
.featured::after{content:"";display:block;width:58px;height:2px;margin:14px auto 0;
  background:linear-gradient(90deg,rgba(232,196,147,0),#e8c493,rgba(232,196,147,0))}

/* 公告条：静态福利文案 */
.ribbon .rb-text h2{letter-spacing:1px}
.ribbon .rb-text h2 em{font-style:normal;color:var(--gold);letter-spacing:1px}

/* ===== 去掉福利条后的过渡处理 ===== */
.hero{height:540px}
.hero-veil{background:
  linear-gradient(96deg,rgba(24,38,54,.92) 0%,rgba(24,38,54,.74) 24%,rgba(24,38,54,.24) 46%,rgba(24,38,54,0) 62%),
  linear-gradient(180deg,rgba(45,65,89,.35) 0%,rgba(45,65,89,0) 24%,rgba(38,56,79,.45) 68%,#26384f 92%,#26384f 100%)}
.hero::before{height:2px;background:linear-gradient(90deg,rgba(232,196,147,0),rgba(232,196,147,.55) 50%,rgba(232,196,147,0))}
.sheet{margin-top:30px}

/* ===== 滚动字幕福利条 + 开服天数 ===== */
.ribbon{width:1200px;max-width:calc(100% - 28px);margin:-28px auto 0;position:relative;z-index:6}
.ribbon .wrap{display:flex;align-items:center;gap:14px;height:56px;padding:0 10px 0 18px;width:100%;max-width:none;
  background:linear-gradient(90deg,rgba(192,57,43,.22),rgba(38,56,79,.97) 32%,rgba(38,56,79,.97));
  border:1px solid rgba(230,192,138,.30);box-shadow:0 16px 32px rgba(12,22,34,.4);overflow:hidden}
.ribbon .rb-tag{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:2px;color:#ffcdbb;
  padding-right:14px;border-right:1px solid rgba(230,192,138,.32)}
.ribbon .rb-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff5b45;
  box-shadow:0 0 8px rgba(255,91,69,.9);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
.ribbon .rb-text{flex:1 1 auto;min-width:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.rb-marquee{display:flex;width:max-content;white-space:nowrap;animation:marq 46s linear infinite;will-change:transform}
.rb-marquee span{display:inline-block;padding-right:40px;font-size:14px;letter-spacing:1px;color:#e6edf4}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ribbon .wrap:hover .rb-marquee{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){.rb-marquee{animation:none}}

/* 主视觉：开服天数 */
.hero-open{display:flex;align-items:baseline;gap:12px;margin-top:20px;flex-wrap:wrap}
.hero-open .ho-label{font:15px/1 var(--serif);letter-spacing:3px;color:#dbe5ef}
.hero-open b{font:36px/1 Arial,sans-serif;font-weight:700;letter-spacing:1px;
  background:linear-gradient(180deg,#fff6e0,#f2ce95 60%,#cf9f57);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 12px rgba(232,196,147,.35))}
.hero-open .ho-unit{font:14px/1 var(--serif);letter-spacing:2px;color:#b3c1d1}
.hero-open .ho-sep{width:1px;height:16px;background:rgba(230,192,138,.35);margin:0 4px}
.hero-open .ho-tip{font:12.5px/1 var(--sans);letter-spacing:1px;color:#e8c493}
@media (max-width:720px){
  .hero-open{margin-top:12px;gap:8px}
  .hero-open b{font-size:26px}
  .hero-open .ho-label{font-size:12px;letter-spacing:2px}
  .hero-open .ho-tip{display:none}
  .rb-marquee span{font-size:12.5px}
}

/* ===== 去掉天数行与福利条后的收尾 ===== */
.hero{height:530px}
.hero-cta{margin-top:34px}
.hero-title{margin-top:20px}
.sheet{margin-top:32px}

/* ===== 静态福利条（最终版）===== */
.ribbon{width:1200px;max-width:calc(100% - 28px);margin:-28px auto 0;position:relative;z-index:6}
.ribbon .wrap{display:flex;align-items:center;gap:16px;height:56px;padding:0 10px 0 18px;width:100%;max-width:none;
  background:linear-gradient(90deg,rgba(192,57,43,.26),rgba(31,47,66,.97) 34%,rgba(31,47,66,.97));
  border:1px solid rgba(230,192,138,.34);box-shadow:0 16px 32px rgba(12,22,34,.42);overflow:visible}
.ribbon .wrap::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(232,196,147,0),rgba(232,196,147,.4),rgba(232,196,147,0))}
.ribbon .rb-tag{flex:0 0 auto;display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:2px;color:#ffc9b6;
  padding-right:16px;border-right:1px solid rgba(230,192,138,.3)}
.ribbon .rb-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff5b45;
  box-shadow:0 0 8px rgba(255,91,69,.9);animation:pulse 2.4s ease-in-out infinite}
.ribbon .rb-text{flex:1 1 auto;min-width:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
.ribbon .rb-text h2{font:14.5px/1 var(--sans);font-weight:400;letter-spacing:1px;color:#e8eef5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ribbon .rb-btn{flex:0 0 auto;height:34px;line-height:32px;padding:0 20px;font-size:13px;letter-spacing:1px;color:#33230a;font-weight:600;
  background:linear-gradient(135deg,#f8e2b8,#e0ab68);border:1px solid rgba(255,238,206,.6);box-shadow:0 6px 14px rgba(20,30,44,.3)}
.ribbon .rb-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.sheet{margin-top:22px}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
@media (max-width:720px){
  .ribbon .wrap{height:auto;flex-wrap:wrap;padding:10px 12px;gap:8px}
  .ribbon .rb-tag{border-right:0;padding-right:0}
  .ribbon .rb-text{flex:1 1 100%;order:3}
  .ribbon .rb-text h2{white-space:normal;font-size:12.5px}
  .ribbon .rb-btn{margin-left:auto;height:30px;line-height:28px;padding:0 14px;font-size:12px}
}

/* 首页页码：可点 */
.pager a{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  padding:0 6px;font:12px/1 Arial,sans-serif;color:#a9bccc !important;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(232,196,147,.25);transition:all .18s ease}
.pager a:hover{background:rgba(232,196,147,.18);color:#f0d9ae !important;border-color:rgba(232,196,147,.6)}
.pager span.on{background:linear-gradient(135deg,#f8e2b8,#e0ab68) !important;color:#33230a !important;
  border-color:transparent !important;font-weight:700}


/* =========================================================
   移动端专用（覆盖所有桌面规则）
   ========================================================= */
@media (max-width: 900px){
  html,body{max-width:100%;overflow-x:hidden}
  .wrap{width:100% !important;max-width:100% !important;padding-left:14px;padding-right:14px}

  /* 顶条与头部 */
  .topstrip{display:none !important}
  .header .wrap{height:62px !important;padding-left:0;padding-right:0}
  .logo img{width:148px !important}
  .nav{display:none !important}

  /* 首屏 */
  .hero{height:400px !important}
  .hero-bg{object-position:64% 34% !important}
  .hero-left{position:static !important;width:auto !important;padding:74px 0 0 !important}
  .hero-title span{font-size:42px !important;letter-spacing:6px !important}
  .hero-title .seal{width:30px !important;height:52px !important;font-size:17px !important}
  .hero-sub{font-size:12px !important;letter-spacing:2px !important;margin-top:10px !important}
  .hero-cta{margin-top:18px !important;gap:10px !important}
  .hero-cta .btn-primary,.hero-cta .btn-ghost{height:42px !important;padding:0 18px !important;font-size:13px !important;letter-spacing:1px !important}

  /* 公告条：换行排 */
  .ribbon{width:100% !important;max-width:100% !important;margin-top:-16px !important}
  .ribbon .wrap{height:auto !important;flex-wrap:wrap !important;padding:10px 14px !important;gap:8px}
  .ribbon .rb-tag{border-right:0 !important;padding-right:0 !important;font-size:12.5px !important}
  .ribbon .rb-text{flex:1 1 100% !important;order:3;white-space:normal !important;font-size:12.5px !important;line-height:1.7}
  .ribbon .rb-btn{margin-left:auto;height:30px !important;line-height:28px !important;padding:0 14px !important;font-size:12px !important}

  /* 主体：单栏，侧栏在上但改成横向排列的卡片 */
  .sheet{width:100% !important;max-width:100% !important;margin-top:16px !important}
  .grid{grid-template-columns:1fr !important;gap:12px !important}
  .side{position:static !important;display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important}
  .side>*{width:auto !important;min-width:0 !important}
  .side .dl-big{grid-column:1 / -1}
  .main{gap:12px !important}

  /* 面板与列表 */
  .panel,.box,.guide-card{border-radius:2px}
  .panel-hd{height:auto !important;min-height:48px;padding:8px 14px !important}
  .panel-hd .t{font-size:15.5px !important;letter-spacing:2px !important}
  .panel-bd,.box-bd{padding:12px 12px !important}
  .newslist li{height:auto !important;min-height:44px;padding:9px 4px !important;gap:8px;flex-wrap:wrap}
  .newslist li .name{white-space:normal !important;line-height:1.6;font-size:13px !important}
  .newslist li .time{font-size:11px !important}
  .articlelist li{height:auto !important;padding:8px 4px !important}
  .articlelist li .name{white-space:normal !important;line-height:1.6}

  /* 选项卡、快捷入口、页码 */
  .tabbar{padding:10px 12px 0 !important;overflow-x:auto}
  .tabbar li{padding:0 12px !important;font-size:12.5px !important;white-space:nowrap}
  .quicklinks{padding:8px 0 12px !important;gap:8px !important}
  .quicklinks a{padding:6px 12px !important;font-size:12px !important}
  .featured h2{font-size:18px !important;line-height:1.5 !important}
  .pager{padding:10px 12px !important}

  /* 新手/职业卡、图集 */
  .guide-row,.two{grid-template-columns:1fr !important;gap:12px !important}
  .guide-card .gtitle{flex:0 0 84px !important}
  .playphoto ul{flex-wrap:wrap !important}
  .playphoto li{flex:1 1 30% !important;min-width:96px}
  .playphoto li img{height:78px !important}

  /* 页脚 */
  .footer{padding:20px 0 !important;font-size:11.5px !important}
  .footer .fl a{padding:0 10px}
  .to-top{right:14px !important;bottom:18px !important;width:38px !important;height:38px !important}
}
@media (max-width: 540px){
  .hero{height:360px !important}
  .hero-title span{font-size:36px !important}
  .side{grid-template-columns:1fr !important}
  .playphoto li{flex:1 1 45% !important}
}


/* ===== 移动端硬约束：任何元素都不得超过视口 ===== */
@media (max-width: 900px){
  html,body{width:100% !important;max-width:100% !important;overflow-x:hidden !important}
  .wrap,.sheet,.ribbon,.grid,.main,.side,.panel,.box,.guide-card,.footer .wrap,
  .hero,.header .wrap{width:auto !important;max-width:100% !important;box-sizing:border-box !important}
  img{max-width:100% !important;height:auto}
  .hero-bg{height:100% !important}
}


/* 手机窄屏（≤540）再收一层，彻底消除横向溢出 */
@media (max-width: 540px){
  html,body{overflow-x:hidden !important}
  .side{grid-template-columns:1fr !important}
  .side .dl-big{grid-column:auto !important}
  .hero{height:360px !important}
  .hero-title span{font-size:34px !important;letter-spacing:4px !important}
  .hero .hero-sub{font-size:11.5px !important}
  .ribbon .rb-btn{height:26px !important;line-height:24px !important;padding:0 12px !important}
  .tabbar{gap:2px !important;padding:8px 8px 0 !important}
  .tabbar li{padding:0 10px !important;font-size:12px !important}
  .quicklinks a{padding:5px 10px !important;font-size:11.5px !important}
  .playphoto li{flex:1 1 47% !important;min-width:0 !important}
  .playphoto li img{height:82px !important}
  .newslist li .time{display:none}
  .panel-hd .more{font-size:11.5px !important}
}