/* 镜像 PC 首页的覆盖样式：加载在原站 app_*.css 之后，同优先级的规则以这里为准。
   由 research/make-pages.js 插入页面，重新生成首页时不会丢。
   首屏信息区的位置（左右两组让出城门）由 js/mirror/hero.js 按视频实际尺寸计算。 */

/* ---------- 导航：透明浮在视频上，滚动后为原站的黑底 ---------- */
.nav-box {
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 100%);
}
/* 滚动后原站脚本把导航改为 position:fixed（行内样式），此时下面是页面内容，恢复黑底 */
.nav-box[style*="fixed"] {
  background: rgba(0, 0, 0, .85);
}
/* 搜索框已删：原站靠搜索框的 margin-right:auto 把音乐、下载按钮推到最右，改由导航链接这一块承担 */
.nav-box .con { margin-right: auto; }

/* ---------- 首屏视频：从页面最顶上开始，导航叠在上面 ---------- */
.wrap .bgvideo video {
  top: 0;
  /* 底部渐隐；hero.js 会按下面板块的位置改写渐隐区间，这里只是脚本未运行时的默认值 */
  -webkit-mask-image: -webkit-linear-gradient(top, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}

/* 下面各处删掉的模块（菜单项、tab、面板、工具箱等）已由 make-pages.js 从 HTML 里直接删除，这里只处理删除后的样式 */

/* ---------- 首屏左侧菜单：PC下载、手机版下载 + 账号注册、企业微信客服、QQ群、QQ客服。
   格子用原站大小（一格 53）；菜单像原站一样比轮播上沿高出两格（js/mirror/hero.js 的 MENU_RAISE），高度随内容 ---------- */
.part1 .left-con .item-box { height: auto; }

/* ---------- 首屏左侧菜单客服三格（企业微信客服 / QQ群 / QQ客服，make-pages.js 换掉原来的「客服专区」）：
   底纹用原站的普通格子；上传了二维码的格子鼠标移上去在右侧显示二维码，没传不显示；可视化编辑时一直显示以便上传 ---------- */
/* 二维码浮在右侧轮播图上方：左侧菜单整体层级要高于轮播（.banner-con 为 2） */
.part1 .left-con { z-index: 3; }
.part1 .left-con .item-box li.gs-kf {
  position: relative;
  background: url(https://gx.88888888woool.com/cdn-images/mirror/xy2.res.netease.com/pc/gw/20211022161103/img/p1_left_btn5_b91a35e.jpg?v=1) no-repeat center / cover;
}
.gs-kf-qr {
  display: none; position: absolute; z-index: 30; left: 100%; top: 50%; margin-left: 12px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);
  padding: 8px; background: #f7f2e8; border: 1px solid #c4aa7e; box-shadow: 0 2px 8px rgba(60, 40, 15, .25);
}
.gs-kf-qr img { display: block; width: 140px; height: 140px; }
.part1 .left-con .item-box li.gs-kf:hover .gs-kf-qr:has(img:not([src=""])) { display: block; }
.edit-mode .gs-kf-qr { display: block; }
.edit-mode .gs-kf-qr img[src=""] { background: #ece3d0; }

/* ---------- 首屏新闻区：内容只显示文字不跳转 ---------- */
/* 原站脚本往「推荐」后追加的空链接（见 news.js） */
.part1 .news-con .boss a[data-jtid] { display: none; }
.part1 .news-con a { cursor: default; }
.part1 .news-con .con .pannel2 ul li a:hover { color: gray; }
.part1 .news-con .boss .boss-txt { color: #8f7750; font-size: 16px; }
/* 获奖公示：原站滚动脚本已去掉，改用 CSS 匀速向左滚动 */
.part1 .news-con .notice .notice-box {
  padding-left: 305px;
  white-space: nowrap;
  -webkit-animation: gs-notice 16s linear infinite;
  animation: gs-notice 16s linear infinite;
}
@-webkit-keyframes gs-notice { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-100%); } }
@keyframes gs-notice { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } }

/* ---------- 新服栏二维码旁竖排文字（原为图片 server_code_tips，44×112） ---------- */
.wrap .server-box .code-box .gs-tips {
  background: none;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  overflow: hidden;
}
/* 竖排时块元素从右往左排成列：第一个 b 是右列 */
.wrap .server-box .code-box .gs-tips b {
  display: block;
  width: 21px;
  /* 原图为粗宋体，每字约 17.5px 高。华文中宋最接近，但它竖排时每字占 1.33 倍字号，用负字距收回到 17.5px；
     没装华文中宋的电脑由 news.js 加 .gs-no-zs，改用宋体的参数 */
  font: bold 16px/21px "STZhongsong", serif;
  color: #9e2a24;
  letter-spacing: -3.7px;
  white-space: nowrap;
}
.gs-no-zs .wrap .server-box .code-box .gs-tips b {
  font: bold 17px/21px "SimSun", "Songti SC", serif;
  letter-spacing: 0.5px;
}
/* 与原图一致：右列「下载口袋版」比左列「手机上玩大话」低约 10px */
.wrap .server-box .code-box .gs-tips b:first-child { padding-top: 12px; }
.wrap .server-box .code-box .gs-tips b + b { padding-top: 3px; }

/* ---------- 大话赛事：只剩「赛事直播」一个 tab、一个面板，固定为选中状态 ---------- */
.part3 .gs-live-only .tab a { color: #c5aa7c; cursor: default; }
.part3 .gs-live-only .tab a:after { width: 100%; }
.part3 .gs-live-only .con .slide {
  display: block; visibility: visible; opacity: 1; z-index: 99; position: relative;
}
.part3 .gs-live-only .con .live_box { display: block; border: 0; background: #000; }
/* 赛事列表最多 6 项正好铺满（每项约 63px），多出来的可以滚动；正在播放的一项标题用金色 */
.part3 .gs-live-only .con .gs-live-list { overflow-y: auto; box-sizing: border-box; }
.part3 .gs-live-only .con .gs-live-list a.gs-cur .name { color: #ba8e45; }

/* ---------- 第四屏：只剩「大话精彩」，tab 只剩 精彩推荐 ---------- */
/* 各板块统一左对齐：标题、tab 与上方「设定站 + 大话赛事」左边缘（part-con 左边）对齐；底图按原站设计向左多伸出 36 */
.part4 .wonderful { margin-left: 0; }
/* 底图原宽 1092，等比放大到右边缘与上方板块（0~1280）对齐：宽 36 + 1280 = 1316，倍数 1316 / 1092 ≈ 1.2051。
   zoom 会同时影响占位高度，下面的板块自动下移；向左伸出的 36 也会被放大，所以先除以倍数 */
.part4 .wonderful .con { zoom: 1.2051; margin-left: -29.87px; }

/* ---------- 点击效果（js/mirror/clicks.js）：不跳转的链接不显示手形；统一弹窗，配色沿用页面的米色、金棕 ---------- */
a[href="none"], .server-box ul a, .part4 .wonderful .nt-img { cursor: default; }
.gs-pop { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 99999; background: rgba(0, 0, 0, .65); }
.gs-pop.show { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.gs-pop-box {
  position: relative; min-width: 360px; max-width: 80vw; max-height: 86vh; overflow: auto; box-sizing: border-box;
  padding: 30px 36px; background: #f3ede0; border: 1px solid #c5aa7c; box-shadow: 0 0 0 6px rgba(197, 170, 124, .35);
}
.gs-pop-close { position: absolute; right: 10px; top: 4px; font-size: 30px; line-height: 36px; color: #8f7750; }
.gs-pop-close:hover { color: #6c1010; }
.gs-pop-tit { margin: 0 0 18px; font-size: 22px; color: #6b4b24; text-align: center; }
.gs-pop-img { display: block; max-width: 70vw; max-height: 70vh; margin: 0 auto; }
.gs-pop-text { font-size: 16px; line-height: 1.9; color: #4f4f4f; }

/* ---------- 维护玩法、大话攻略、大话图鉴、品牌文化、官方媒体：内容已删，只留空壳（原站滚动动画脚本要读它们的位置）；
   空壳自带装饰图和边距，不显示 ---------- */
.wrap .part2, .wrap .part5, .wrap .part6, .wrap .part7, .wrap .part8 { display: none; }

/* ---------- 角色展示（版式参照 woool.sdo.com，原站用 rem 且 1rem = 屏宽/19.2，这里按 1920 设计稿换成 px） ---------- */
/* 舞台固定 1920 宽居中，窄屏时两侧被 .main 裁掉一点（两侧是虚化背景，不影响主体） */
/* 色带上方只给立绘头部留空：最高的灵枪伸出 230px，再与上方「狂歌精彩」底图隔开 40px */
.gs-role-part { padding-top: 270px; }
/* 标题在色带左上角，与各板块左边缘对齐：舞台 1920 与内容区 part-con 1375 都居中，左边差 (1920 - 1375) / 2 ≈ 273 */
.gs-roles .gs-role-tit {
  position: absolute; left: 273px; top: 40px; z-index: 5; margin: 0;
  font-size: 24px; line-height: 30px; font-weight: bold; color: #fdce69;
}
.gs-roles {
  position: relative; width: 1920px; height: 770px; left: 50%; margin-left: -960px; background-color: #846864;
  /* 立绘头部伸出色带上方，下方超出色带的部分裁掉 */
  -webkit-clip-path: inset(-300px 0 0 0); clip-path: inset(-300px 0 0 0);
}
.gs-roles .gs-role-name { display: none; }
.gs-roles h1 { margin: 0; font-size: 0; }
.gs-roles .btn, .gs-roles .btn i, .gs-roles .toggle, .gs-roles .toggle span, .gs-roles .thumbs li::before {
  background-image: url(https://gx.88888888woool.com/cdn-images/assets/roles/index-icon.png); background-repeat: no-repeat; background-size: 1000px 2000px;
}
.gs-roles .btn { position: absolute; width: 126px; height: 114px; font-size: 20px; z-index: 4; cursor: pointer; top: 312px; color: #fdce69; }
.gs-roles .btn span { position: absolute; top: 36px; }
.gs-roles .btn i { position: absolute; width: 30px; height: 12px; bottom: 36px; -webkit-transition: all .4s ease-out; transition: all .4s ease-out; }
.gs-roles .btn-prev { left: 330px; background-position: 0 -778px; }
.gs-roles .btn-prev span { left: 50px; }
.gs-roles .btn-prev i { left: 60px; background-position: 0 -938px; }
.gs-roles .btn-prev:hover { background-position: -275px -778px; }
.gs-roles .btn-prev:hover i { left: 53px; }
.gs-roles .btn-next { right: 330px; background-position: -137px -778px; }
.gs-roles .btn-next span { right: 50px; }
.gs-roles .btn-next i { right: 60px; background-position: -48px -938px; }
.gs-roles .btn-next:hover { background-position: -412px -778px; }
.gs-roles .btn-next:hover i { right: 54px; }
.gs-roles .thumbs { position: relative; width: 100%; height: 770px; }
.gs-roles .thumbs li { position: absolute; width: 320px; height: 100%; overflow: hidden; }
.gs-roles .thumbs li::before {
  position: absolute; content: ""; width: 2px; height: 740px; background-position: -273px -1230px; right: 0; top: 50%; margin-top: -370px; z-index: 1;
}
.gs-roles .thumbs li:nth-of-type(1) { left: 0; }
.gs-roles .thumbs li:nth-of-type(2) { left: 320px; }
.gs-roles .thumbs li:nth-of-type(3) { right: 320px; }
.gs-roles .thumbs li:nth-of-type(4) { right: 0; }
.gs-roles .thumbs li:nth-of-type(3)::before, .gs-roles .thumbs li:nth-of-type(4)::before { right: auto; left: 0; }
/* 最外侧两条分隔线（x=320、1600）上端截短，给左上角标题让位；左右对称，下端与其他线一致 */
.gs-roles .thumbs li:nth-of-type(1)::before, .gs-roles .thumbs li:nth-of-type(4)::before { top: 100px; margin-top: 0; height: 655px; }
.gs-roles .thumbs li > i {
  position: absolute; width: 100%; height: 100%; z-index: 0;
  background: url(https://gx.88888888woool.com/cdn-images/assets/roles/index-role-bg.png) no-repeat; background-size: 320px 3850px;
}
.gs-roles .thumbs li.li0 > i { background-position: 0 0; }
.gs-roles .thumbs li.li1 > i { background-position: 0 -770px; }
.gs-roles .thumbs li.li2 > i { background-position: 0 -1540px; }
.gs-roles .thumbs li.li3 > i { background-position: 0 -2310px; }
.gs-roles .roles { position: absolute; left: 0; top: 0; width: 100%; }
.gs-roles .roles > li { display: none; }
.gs-roles .roles > li.active { display: block; }
.gs-roles .roles img { width: 100%; vertical-align: middle; }
.gs-roles .role-img { position: absolute; z-index: 1; display: none; -webkit-transform: translateZ(0); transform: translateZ(0); }
.gs-roles .role-img.active { display: block; }
.gs-roles .roles h1 { position: absolute; z-index: 2; width: 201px; height: 771px; -webkit-transform: translateZ(0); transform: translateZ(0); }
.gs-roles .toggle { position: absolute; width: 30px; height: 56px; background-position: -764px -456px; right: 30px; bottom: 80px; }
.gs-roles .toggle span { position: absolute; width: 25px; height: 25px; left: 2px; cursor: pointer; opacity: 0; -webkit-transition: opacity .4s ease-out; transition: opacity .4s ease-out; }
.gs-roles .toggle span:nth-of-type(1) { top: 2px; background-position: -795px -456px; }
.gs-roles .toggle span:nth-of-type(2) { bottom: 2px; background-position: -795px -484px; }
.gs-roles .toggle span.active { opacity: 1; cursor: default; }
.gs-roles .animate { position: absolute; z-index: 2; width: 300px; border: 2px solid #ffb94a; }
/* 每个职业的立绘、介绍图、技能动画位置（原站数值 ×100） */
.gs-roles .roles > li:nth-of-type(1) .role-img-1 { width: 1024px; height: 1356px; left: 440px; top: -230px; }
.gs-roles .roles > li:nth-of-type(1) .role-img-2 { width: 1070px; height: 1487px; right: 350px; top: -200px; }
.gs-roles .roles > li:nth-of-type(1) h1 { left: 566px; top: -80px; }
.gs-roles .roles > li:nth-of-type(1) .animate { right: 566px; top: 400px; }
.gs-roles .roles > li:nth-of-type(2) .role-img-1 { width: 837px; height: 1145px; left: 440px; top: -160px; }
.gs-roles .roles > li:nth-of-type(2) .role-img-2 { width: 883px; height: 1247px; left: 406px; top: -160px; }
.gs-roles .roles > li:nth-of-type(2) h1 { right: 550px; top: -80px; }
.gs-roles .roles > li:nth-of-type(2) .animate { left: 570px; top: 420px; }
.gs-roles .roles > li:nth-of-type(3) .role-img-1 { width: 823px; height: 1025px; left: 475px; top: -200px; }
.gs-roles .roles > li:nth-of-type(3) .role-img-2 { width: 861px; height: 1086px; left: 490px; top: -200px; }
.gs-roles .roles > li:nth-of-type(3) h1 { right: 550px; top: -80px; }
.gs-roles .roles > li:nth-of-type(3) .animate { left: 570px; top: 420px; }
.gs-roles .roles > li:nth-of-type(4) .role-img-1 { width: 938px; height: 1246px; left: 530px; top: -200px; }
.gs-roles .roles > li:nth-of-type(4) .role-img-2 { width: 1022px; height: 1298px; left: 500px; top: -160px; }
.gs-roles .roles > li:nth-of-type(4) h1 { left: 556px; top: -80px; }
.gs-roles .roles > li:nth-of-type(4) .animate { right: 570px; top: 420px; }
/* 入场动画（与 animate.css 的 fadeIn* 相同） */
.gs-roles .gs-anim { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.gs-roles .gs-anim.fadeInLeft { -webkit-animation-name: gsFadeInLeft; animation-name: gsFadeInLeft; }
.gs-roles .gs-anim.fadeInRight { -webkit-animation-name: gsFadeInRight; animation-name: gsFadeInRight; }
.gs-roles .gs-anim.fadeInUp { -webkit-animation-name: gsFadeInUp; animation-name: gsFadeInUp; }
.gs-roles .gs-anim.fadeInDown { -webkit-animation-name: gsFadeInDown; animation-name: gsFadeInDown; }
@-webkit-keyframes gsFadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes gsFadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes gsFadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes gsFadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes gsFadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes gsFadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@-webkit-keyframes gsFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } }
@keyframes gsFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } }
/* 设定站/大话赛事板块去掉自带的米色底图，内容直接叠在视频上，视频完整露出 */
.wrap .part3 { background: none; }

/* ---------- 页脚底部沙地：视频出来前的底图，原为网易的金沙图，换成本站沙地视频的第一帧 ---------- */
.wrap .footer-video { background-image: url(https://gx.88888888woool.com/cdn-images/assets/footer/sand.jpg); }

/* ---------- 页脚版权（原为网易公共脚本写入的网易版权与备案号，现为本站字段 x.copy.*，见 research/make-pages.js copyright()） ----------
   排版同原版权区：12px 字、行高 24px、居中；留空的项（备案号等）不显示，可视化编辑时显示灰色提示以便点选填写 */
.gs-copy { width: 1024px; margin: 0 auto; padding: 15px 0 10px; font-size: 12px; line-height: 24px; color: #000; text-align: center; }
.gs-copy p { margin: 0; }
.gs-copy a { color: inherit; text-decoration: none; }
.gs-copy a[href]:not([href="none"]):hover { text-decoration: underline; }
.gs-copy-links i::before { content: "-"; margin: 0 6px; font-style: normal; }
.gs-copy-nums > * { display: inline-block; margin: 0 8px; }.gs-copy [data-k]:empty { display: none; }
.edit-mode .gs-copy [data-k]:empty { display: inline-block; }
.edit-mode .gs-copy [data-k]:empty::before { content: attr(data-kl); color: #999; }

/* ---------- 直播平台：没有直播地址时（播放器 src 为空）显示「直播暂未开始」（x.p3.idle）；
   可视化编辑时提示只占底部一条，上面仍能点选播放器填地址 ---------- */
#gs-live-box { position: relative; }
#gs-live-box .gs-live-idle { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: 0; }
#gs-live-box .live_box[src=""] + .gs-live-idle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; background: #000; color: #c5aa7c; font-size: 18px; letter-spacing: 2px;
}
.edit-mode #gs-live-box .live_box[src=""] + .gs-live-idle { top: auto; height: 40px; font-size: 14px; }