* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 0px;
}

.title {
    height: auto;
    width: 100%;
    background: #F2F2F2;
    position: fixed;
    top: 84px;
    left: 0;
}

.nh {
    width: 100%;
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #C4C4C4;
}

.nh img{
    width: 100%;
    max-width:380px;
}


.nh-con {
    color: red;
}

.xzxx {
    width: 100%;
    font-size: 16px;
    padding: 10px;
}

.xzxx td {
    font-weight: 700;
    height: 25px;
    vertical-align: middle; /*top上对齐 middle上下居中 bottom下对齐*/
    text-align: left; /*left左对齐 center水平居中 right右对齐*/
}

.xzxx tr td:nth-child(2) { /* width: 300px; */
}

.xzxx tr td:nth-child(3) {
    text-align: right;
}

.xzxx tr td:nth-child(1), .xzxx tr td:nth-child(3) {
    color: deepskyblue; /* width: 120px; */
}

.xzxx tr td:nth-child(2), .xzxx tr td:nth-child(4) {
    color: #EE3B3B;
}

.xzxx tr:nth-child(4) td {
    height: 32px;
    vertical-align: top; /* text-align: right; */
}

.qd {
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: deepskyblue;
    color: white;
    border-radius: 6px;
    float: right;
    margin-right: 10px;
    margin-left: 5px;
}

.zt {
    font-size: 14px;
    float: right;
 
    color: #000;
}.disn1{ display:none}

.dib {
    margin-top: 70px;
    height: auto;
    font-size: 16px;
    font-weight: 700;
    color: #8B636C;
    padding-left: 10px;
    width: -webkit-calc(100% - 10px);
    width: -moz-calc(100% - 10px);
    width: calc(100% - 10px); /* min-width:500px; */
}

.dxdx {
    font-size: 13px;
    color: #AAAAAA;
}

.kplx {
    width: 100%;
    min-height: 50px;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 14px;
    font-weight: 700; /* min-width:500px; */
}

.kplx td {
    height: 35px;
    line-height: 35px;
    text-align: left;
}

.kplx tr td:nth-child(1), .kplx tr td:nth-child(3) {
    
}

.kpxz {
    width: 25px;
    height: 25px;
    margin-left: 2px;
    border-radius: 50%;
    background: #C4C4C4;
    float: left;
    margin-right: 5px;
}

.kpxz_type {
    width: 25px;
    height: 25px;
    margin-left: 15px;
    border-radius: 50%;
    background: #C4C4C4;
}

/**/
.wx {
    font-size: 15px;
    color: red;
    padding: 10px;
    background: #eee;
    width: 98%;
    margin: 10px auto;
    border-radius: 5px;
    line-height: 1.5;
}

.deb { /* min-width:500px; */
    margin-top: 20px;
    height: auto;
    font-size: 16px;
    font-weight: 700;
    color: #8B636C;
    padding-left: 10px;
    width: -webkit-calc(100% - 10px);
    width: -moz-calc(100% - 10px);
    width: calc(100% - 10px);
}

.jty { /* min-width:800px; */
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 80px;
}

.jty td {
    padding-top: 4px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 4px;
    border: 1px solid #C4C4C4;
    vertical-align: middle;
    text-align: center;
    word-wrap: break-word;font-size: 12px;
   word-break: inherit;
}

.jty tr td:nth-child(1) {
      padding-left: 1px;
    padding-right: 1px;
    width: 15px;
    width: 2.1em;
}

.jty tr td:nth-child(2) {
       text-align: left;
  
}

.jty tr td:nth-child(3) {
    vertical-align: top;
    text-align: left; word-break: break-all;
}

.jty tr td:nth-child(4) {
       padding-left: 1px;
    padding-right: 1px;
    width: 15px;
    width: 2.1em;
}

.jty tr td:nth-child(5) {
   
}

.fx {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #C4C4C4; margin:0 auto
}

.bb {
    color: #EE3B3B;
    font-weight: 700;
}

/*弹框部分*/
.mt {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(51, 51, 51, 0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#998a8a8a, endColorstr=#998a8a8a);
    display: none;
}

/*弹框模态开启*/
@keyframes model-background-start {
    0% {
        background: rgba(144, 145, 146, 0);
    }
    100% {
        background: rgba(51, 51, 51, 0.4);
    }
}

@-moz-keyframes model-background-start {
    0% {
        background: rgba(144, 145, 146, 0);
    }
    100% {
        background: rgba(51, 51, 51, 0.4);
    }
}

@-webkit-keyframes model-background-start {
    0% {
        background: rgba(144, 145, 146, 0);
    }
    100% {
        background: rgba(51, 51, 51, 0.4);
    }
}

@-o-keyframes model-background-start { /*Opera*/
    0% {
        background: rgba(144, 145, 146, 0);
    }
    100% {
        background: rgba(51, 51, 51, 0.4);
    }
}

/*弹框模态关闭*/
@keyframes model-background-end {
    0% {
        background: rgba(51, 51, 51, 0.4);
    }
    100% {
        background: rgba(144, 145, 146, 0);
    }
}

@-moz-keyframes model-background-end {
    0% {
        background: rgba(51, 51, 51, 0.4);
    }
    100% {
        background: rgba(144, 145, 146, 0);
    }
}

@-webkit-keyframes model-background-end {
    0% {
        background: rgba(51, 51, 51, 0.4);
    }
    100% {
        background: rgba(144, 145, 146, 0);
    }
}

@-o-keyframes model-background-end {
    0% {
        background: rgba(51, 51, 51, 0.4);
    }
    100% {
        background: rgba(144, 145, 146, 0);
    }
}

.cxrq {
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -400px;
    height: 500px;
    width: 800px;
    background: white;
    border-radius: 6px;
    border: 1px solid #c1c1c1;
    z-index: 1000;
}

@keyframes cxrq-local-start {
    0% {
        top: -400px;
    }
    100% {
        top: 50%;
        margin-top: -250px;
        left: 50%;
        margin-left: -400px;
    }
}

@-moz-keyframes cxrq-local-start {
    0% {
        top: -400px;
    }
    100% {
        top: 50%;
        margin-top: -250px;
        left: 50%;
        margin-left: -400px;
    }
}

@-webkit-keyframes cxrq-local-start {
    0% {
        top: -400px;
    }
    100% {
        top: 50%;
        margin-top: -250px;
        left: 50%;
        margin-left: -400px;
    }
}

@-o-keyframes cxrq-local-start { /*Opera*/
    0% {
        top: -400px;
    }
    100% {
        top: 50%;
        margin-top: -250px;
        left: 50%;
        margin-left: -400px;
    }
}

@keyframes cxrq-local-end {
    0% {
        top: 50%;
        margin-top: -250px;
        left: 50%;
        margin-left: -400px;
    }
    100% {
        top: -400px;
    }
}

@-moz-keyframes cxrq-local-end {
    0% {
        top: 50%;
        margin-top: -250px;
        left: 50%;
        margin-left: -400px;
    }
    100% {
        top: -400px;
    }
}

@-webkit-keyframes cxrq-local-end {
    0% {
        top: 50%;
        margin-top: -250px;
        left: 50%;
        margin-left: -400px;
    }
    100% {
        top: -400px;
    }
}

@-o-keyframes cxrq-local-end {
    0% {
        top: 50%;
        margin-top: -250px;
        left: 50%;
        margin-left: -400px;
    }
    100% {
        top: -400px;
    }
}

.yxtk {
    height: 50px;
    width: 100%;
    background: #F8F8F8;
    border-radius: 6px 6px 0px 0px;
    font-size: 16px;
    line-height: 50px;
    text-align: center;
}

.fh {
    float: right;
    text-decoration: none;
    color: #5cacee;
    margin-right: 10px;
}

.fh:hover {
    color: red;
}

.ts {
    color: #1153A8;
    padding-left: 5px;
    padding-top: 7px;
    padding-right: 5px;
    padding-bottom: 7px;
    height: auto;
}

.tsxz {
    color: #EE3B3B;
    font-size: 13px;
}

.rwq {
    margin-top: 3px;
    width: 100%;
    height: 40px;
    position: relative;
}

.phone {
    position: absolute;
    top: 100px;
    left: 10px;
    height: 40px;
    width: 780px;
    border-radius: 6px;
    border: 1px solid #d1d1d1;
    font-size: 15px;
    padding: 10px 15px;
}


.phone1 {
    position: absolute;
    top: 0px;
    left: 10px;
    height: 40px;
    width: 780px;
    border-radius: 6px;
    border: 1px solid #d1d1d1;
    font-size: 15px;
    padding: 10px 15px;
}

.phone2 {
    position: absolute;
    top: 50px;
    left: 10px;
    height: 40px;
    width: 780px;
    border-radius: 6px;
    border: 1px solid #d1d1d1;
    font-size: 15px;
    padding: 10px 15px;
}


.phone:focus {
    border-radius: 6px;
    border: 1px solid LightSkyBlue;
    outline: medium;
}

.tj {
    position: initial;
    top: 150px;
    left: 300px;
    width: 300px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: deepskyblue;
    color: white;
    border-radius: 6px;
	    margin: auto;
}

.dexb {
    color: #1153A8;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 7px;
    height: auto; /*隐藏*/
    display: none;
}

.cgg {
    display: inline-block;
    margin-left: 20px;
    font-size: 14px;
    color: red;
}

.rxq {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #C4C4C4;
    width: -webkit-calc(100% - 2px);
    width: -moz-calc(100% - 2px);
    width: calc(100% - 2px);
    display: ;
}

.jxty {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.jxty td {
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    border: 1px solid #C4C4C4;
    vertical-align: middle;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all;
}

.jxty tr:nth-child(1) td {
    border-top: 0px;
}

.jxty tr td:nth-child(1) {
    width: 40px;
    border-left: 0px;
}

.jxty tr td:nth-child(2) {
    vertical-align: top;
    text-align: left;
}

.jxty tr td:nth-child(3) {
    width: 40px;
}

.jxty tr td:nth-child(4) {
    width: 40px;
    border-right: 0px;
}

.so{
    width: 100%;
    margin: 5px auto;
    height: 35px;

}
.so .key{ display: inline-block; width: 80%; height: 35px; line-height: 35px; padding: 0 10px;}
.so .btn{display: inline-block; width: 20%; height: 35px; line-height: 35px; float: right;}
.kplx li{ width: 14.2%; float: left;list-style: none;}
.langzh{}
.langen{color:#000}

@media only screen and (max-width: 820px) {
    
    
    .xzxx tr:nth-child(4) td {
     height:auto;
    vertical-align: top;
   
}
    
    .cxrq {
        position: relative;
        top: 40%;
        left: 1%;
        margin-top: -150px;
        margin-left: 0;
        height: 470px;
        width: 98%;
        background: white;
        border-radius: 6px;
        border: 1px solid #c1c1c1;
        z-index: 1000;
        padding: 20px;
    }
    .kplx li{ width: 14%; float: left;list-style: none;text-align: center;}
    .kplx{margin-top:0}.kplx td {
    height: 25px;
    line-height: 25px;
    text-align: left;
}
    .kpxz {
    width: 25px;
    height: 25px;
    
    border-radius: 50%;
    background: #C4C4C4;
    float: none;
  
    margin: 0 auto;
}
    
    
    .phone {
        position: absolute;
        top: 20px;
        right: -5px;
        height: 40px;
        width: 100%;
        border-radius: 6px;
        border: 1px solid #d1d1d1;
        font-size: 15px;
        padding: 10px 15px;
        left: 5px;
    }

    .tj {
        position: initial;
        top: 92px;
        left: 50%;
        width: 160px;
        height: 40px;
        line-height: 32px;
        text-align: center;
        background: deepskyblue;
        color: white;
        border-radius: 6px;
        margin-left: -80px;
		margin: auto;
    }

    .phone1 {
        position: absolute;
        top: 0px;
        left: 5px;
        height: 40px;
        width: 100%;
        border-radius: 6px;
        border: 1px solid #d1d1d1;
        font-size: 15px;
        padding: 10px 15px;
    }

    .phone2 {
        position: absolute;
        top: 50px;
        left: 5px;
        height: 40px;
        width: 100%;
        border-radius: 6px;
        border: 1px solid #d1d1d1;
        font-size: 15px;
        padding: 10px 15px;
    }
}
/* =========================================================================
   前台改造 v1（2026-09-27）：左右留白 + 版本筛选 + 滚动加载 + 底部已选条 + 手机适配
   说明：整块追加在文件末尾，靠"后出现覆盖先出现"生效，不改动上面的原始规则。
   ========================================================================= */

/* ---- 左右留白（原来是 0 边距，贴屏幕边）---- */
.dib, .deb, .wx, .kplx, .jty {
    margin-left: 20px;
    margin-right: 20px;
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
}
.so {
    margin: 5px 20px;
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
    height: auto;
    overflow: hidden;
}
.fx { cursor: pointer; }

/* ---- 版本/地区 筛选条 ---- */
.filters {
    margin: 8px 20px 0;
    line-height: 28px;
}
.fchip {
    display: inline-block;
    padding: 5px 12px;
    margin: 0 6px 6px 0;
    border: 1px solid #c9c9c9;
    border-radius: 15px;
    background: #fafafa;
    color: #444;
    font-size: 13px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.fchip.active {
    background: deepskyblue;
    border-color: deepskyblue;
    color: #fff;
    font-weight: 700;
}

/* ---- 滚动加载 / 到底提示 ---- */
.load_more {
    text-align: center;
    color: #8a8a8a;
    font-size: 13px;
    padding: 16px 0 30px;
    cursor: pointer;
}
.list_end {
    text-align: center;
    color: #a5a5a5;
    font-size: 12px;
    padding: 16px 0 30px;
}

/* ---- 底部悬浮「已选」条 ---- */
body { padding-bottom: 66px; }
.selbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    font-size: 13px;
}
.selbar.hide { display: none; }
.sb-info { color: #555; }
.sb-info b { color: #EE3B3B; font-size: 15px; padding: 0 2px; }
.sb-btns { white-space: nowrap; }
.sb-btns a {
    display: inline-block;
    padding: 8px 14px;
    margin-left: 8px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.sb-clear { background: #f2f2f2; color: #666; border: 1px solid #ddd; }
.sb-view { background: deepskyblue; color: #fff; }

/* ---- 名称下方的版本小灰字：桌面端不显示，手机端显示（替代被隐藏的列）---- */
.ver-inline { display: none; color: #9a9a9a; font-size: 12px; margin-top: 2px; }

/* ================= 手机端（≤820px）================= */
@media only screen and (max-width: 820px) {
    .dib, .deb, .wx, .kplx, .jty {
        margin-left: 8px;
        margin-right: 8px;
        width: -webkit-calc(100% - 16px);
        width: calc(100% - 16px);
    }
    .so {
        margin: 5px 8px;
        width: -webkit-calc(100% - 16px);
        width: calc(100% - 16px);
    }
    .filters { margin: 8px 8px 0; }
    .fchip { padding: 6px 12px; font-size: 13px; }

    /* 游戏表：加高行距、放大点击圈，藏掉"发售日/版本"列（改到名称下方显示）*/
    .jty { font-size: 13px; }
    .jty td {
        font-size: 13px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .jty tr td:nth-child(1) { width: 44px; }
    .jty tr td:nth-child(3) { display: none; }
    .jty tr td:nth-child(4) { width: 54px; }
    .ver-inline { display: block; }
    .fx {
        width: 30px;
        height: 30px;
    }
    .sb-info { font-size: 12px; }
    .sb-btns a { padding: 8px 11px; margin-left: 6px; }
}


/* =========================================================================
   前台改造 v2（2026-09-27）：手机端细节修正
   ========================================================================= */

/* 提交弹窗必须盖住底部已选条（弹窗原本没有 z-index，会被 z-index:900 的底部条压住）*/
.mt { z-index: 1500; }

@media only screen and (max-width: 820px) {
    /* 顶部横幅是 1883x300 的宽图，原来被 height:300px 硬拉成竖长条 → 变形且白占 300px 屏高 */
    .nh img { height: auto !important; }
    .nh { padding: 0; }
    /* 底部条与弹窗细节 */
    .sb-info { line-height: 18px; }
    .cxrq { top: 20% !important; margin-top: 0 !important; }
}


/* =========================================================================
   前台改造 v3（2026-09-27）：底部已选条在窄屏的排版
   ========================================================================= */
.sb-info { white-space: nowrap; }
@media only screen and (max-width: 820px) {
    .selbar { padding: 6px 8px; }
    .sb-info { font-size: 12px; }
    .sb-info b { font-size: 14px; }
    .sb-btns a { padding: 7px 10px; margin-left: 5px; font-size: 12px; }
}


/* =========================================================================
   前台改造 v4（2026-09-27）：宽屏两侧留白加强
   窄屏保持左右 20px（手机 8px）不变；≥1500px 的宽屏给内容区加最大宽度并居中，
   免得 1920/2560 屏上 20px 看起来还是"贴边"，一行文字也被拉得过长。
   ========================================================================= */
@media only screen and (min-width: 1500px) {
    .dib, .deb, .wx, .kplx, .jty, .so {
        max-width: 1560px;
        margin-left: auto;
        margin-right: auto;
        width: -webkit-calc(100% - 80px);
        width: calc(100% - 80px);
    }
    .filters {
        max-width: 1560px;
        margin: 8px auto 0;
    }
}


/* =========================================================================
   前台改造 v5（2026-09-27）：宽屏"上下统一容器"
   问题：v4 只把游戏区（第一步/第二步/搜索/列表）居中成 1560，
        上面的横幅区和"已选容量/确定按钮"区还是通栏到屏幕两边 → 上下不和谐。
   做法：把这两个区也套进同一个 1560 容器，横幅图等比缩放不变形。
   ========================================================================= */

/* 横幅图不再被强制 height:300px 拉扁/拉长（桌面 1244 宽却给 300 高，比例是错的） */
.nh img { height: auto !important; max-width: 100%; }

@media only screen and (min-width: 1500px) {
    body > .title,
    body > .title1 {
        max-width: 1560px;
        margin-left: auto;
        margin-right: auto;
        width: -webkit-calc(100% - 80px);
        width: calc(100% - 80px);
    }
    /* 汇总表跟着容器走：去掉自带内边距，让"已选游戏总容量"和下面的"第一步"左侧对齐 */
    body > .title1 .xzxx {
        padding-left: 0;
        padding-right: 0;
    }
}


/* =========================================================================
   前台改造 v6（2026-09-27）：宽屏下各区块左边缘对齐
   问题：横幅/汇总/列表都贴容器的左边缘，但"第一步/第二步/搜索框"各自有 10px 内缩，
        宽屏放大后看着像没对齐（差一行字的宽度）。这里统一压平。
   只作用于 ≥1500px，窄屏保持原样。
   ========================================================================= */
@media only screen and (min-width: 1500px) {
    body > .title1 .xzxx,
    body > .dib,
    body > .wx,
    body > .deb {
        padding-left: 0;
        padding-right: 0;
    }
}


/* =========================================================================
   前台改造 v7（2026-09-27）：全分辨率下"上下左右对齐"
   实测发现（各宽度扫一遍）：横幅区和"已选容量"汇总区的左右内缩，和下面内容区的留白
   不一致 —— 例如 1280/1366 屏上 横幅图/汇总文字在 x=10，而游戏列表在 x=20，
   差 10px，看着就是"上下没对齐"。这里按断点把内缩统一成跟内容区一样。
   断点：≤820 内容 8px ｜ 821-1499 内容 20px ｜ ≥1500 内容在 1560 容器内 0 内缩
   ========================================================================= */

@media only screen and (max-width: 820px) {
    .nh { padding-left: 8px !important; padding-right: 8px !important; }
    .title1 .xzxx { padding-left: 8px !important; padding-right: 8px !important; }
    .dib, .wx, .deb { padding-left: 0 !important; padding-right: 0 !important; }
}

@media only screen and (min-width: 821px) and (max-width: 1499px) {
    .nh { padding-left: 20px !important; padding-right: 20px !important; }
    .title1 .xzxx { padding-left: 20px !important; padding-right: 20px !important; }
    .dib, .wx, .deb { padding-left: 0 !important; padding-right: 0 !important; }
}

@media only screen and (min-width: 1500px) {
    /* 此时 .title / .title1 已经被套进 1560 容器，横幅图要铺满容器才算和列表对齐 */
    .nh { padding-left: 0 !important; padding-right: 0 !important; }
}


/* =========================================================================
   前台改造 v8（2026-09-27）：宽屏内容封顶 1560 → 1800
   用户指定：≥1500px 时内容最多 1800px（1920 屏上两侧各 60px，2560 屏上各 380px）。
   只覆盖 max-width，其余（居中、calc(100% - 80px)、各区块对齐）沿用 v4/v5。
   ========================================================================= */
@media only screen and (min-width: 1500px) {
    .dib, .deb, .wx, .kplx, .jty, .so,
    .filters,
    body > .title,
    body > .title1 {
        max-width: 1800px;
    }
}

/* ===================== 追加自 wii：css_add_v9.css ===================== */

/* =========================================================================
   前台改造 v9（2026-09-27）：右侧浮动微信客服
   竞品站/商家站常见做法：贴右侧的竖条，点开显示微信号 + 复制按钮。
   颜色用微信绿（#07a24b / #25d366），手机上自动降到屏幕下方、避开底部"已选"条。
   ========================================================================= */
.wxkf { position: fixed; right: 0; top: 42%; z-index: 960; font-family: inherit; -webkit-tap-highlight-color: transparent; }

/* 气泡小图标（纯 CSS，不依赖图片/字体） */
.wxkf-bub { position: relative; display: block; width: 20px; height: 15px; background: #fff; border-radius: 6px; }
.wxkf-bub:before { content: ""; position: absolute; right: 5px; top: 6px; width: 3px; height: 3px; border-radius: 50%; background: #07a24b; box-shadow: -6px 0 0 #07a24b; }
.wxkf-bub:after { content: ""; position: absolute; left: 5px; bottom: -4px; border-left: 5px solid #fff; border-bottom: 5px solid transparent; }

.wxkf-tab { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 46px; padding: 11px 0 10px; background: linear-gradient(180deg, #25d366, #07a24b); color: #fff; border-radius: 12px 0 0 12px; cursor: pointer; box-shadow: -2px 3px 12px rgba(7, 162, 75, .28); transition: transform .15s ease; }
.wxkf-tab:hover { transform: translateX(-2px); }
.wxkf-txt { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; letter-spacing: 2px; font-size: 13px; line-height: 1; }

.wxkf-card { position: absolute; right: 56px; top: -6px; width: 214px; padding: 13px 14px 12px; background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .16); display: none; }
.wxkf.open .wxkf-card { display: block; animation: wxkfIn .18s ease-out; }
@keyframes wxkfIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.wxkf-h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #1b1b1b; margin-bottom: 9px; }
.wxkf-card .wxkf-bub { background: #07a24b; }
.wxkf-card .wxkf-bub:before { background: #fff; box-shadow: -6px 0 0 #fff; }
.wxkf-card .wxkf-bub:after { border-left-color: #07a24b; }
.wxkf-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f4fbf6; border: 1px solid #d8f0e0; border-radius: 8px; padding: 8px 10px; }
.wxkf-id { font-size: 16px; font-weight: 700; color: #07a24b; letter-spacing: .4px; -webkit-user-select: all; user-select: all; }
.wxkf-copy { flex: 0 0 auto; background: #07a24b; color: #fff; font-size: 12px; padding: 5px 10px; border-radius: 6px; text-decoration: none; }
.wxkf-copy:hover { background: #05923f; }
.wxkf-tip { font-size: 12px; color: #8a8a8a; line-height: 1.6; margin-top: 9px; }
.wxkf-arrow { position: absolute; right: -5px; top: 16px; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); }

.wxkf-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(8px); background: rgba(20, 20, 20, .86); color: #fff; font-size: 13px; padding: 9px 16px; border-radius: 20px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999; }
.wxkf-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 手机：挪到屏幕下方、避开底部已选条；卡片窄一点 */
@media only screen and (max-width: 820px) {
    .wxkf { top: auto; bottom: 118px; }
    .wxkf-tab { width: 40px; padding: 9px 0 8px; border-radius: 10px 0 0 10px; }
    .wxkf-txt { font-size: 12px; letter-spacing: 1px; }
    .wxkf-card { right: 48px; width: 196px; }
    .wxkf-toast { bottom: 172px; }
}

/* ===================== 追加自 wii：css_add_v10.css ===================== */

/* =========================================================================
   前台改造 v10（2026-09-27）：微信客服浮窗"跟随滚动自动浮动"
   原来 position:fixed 停在屏幕 42% 一动不动（用户反馈：太死板）。
   现在：往下滚时自动平滑滑向屏幕下方（距底 24px），回到顶部再滑回中部。
   平滑靠下面这行 transition，具体位移由 JS 根据滚动量计算。
   ========================================================================= */
.wxkf { transition: transform .28s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
@media only screen and (max-width: 820px) {
    /* 手机上本来就在屏幕下方，不做位移，避免抖动 */
    .wxkf { transition: none; }
}

/* ===================== 追加自 wii：css_add_v11.css ===================== */

/* =========================================================================
   前台改造 v11（2026-09-27）
   1) 已选信息区（已选游戏总容量 / 卡片剩余容量 / 游戏总数 + 确定按钮）排版美化：
      原样式：标签 deepskyblue 粗体、数值 #EE3B3B 粗体、标签和数值之间一大段空白、
      按钮 .qd 是扁平小天蓝块、提示 .zt 是 14px 黑色 —— 用户反馈"排版不美观"。
      改法（纯 CSS，不动 HTML 结构）：
        · 标签列/数值列收窄到刚好包住文字（width:1px + nowrap），多余宽度全部让给右侧按钮列
          → 标签和数值贴在一起，不再"标签在左、数字飘到中间"
        · 标签：灰蓝 #5b6472 / 常规字重 / 14px；数值：红 #e5484d / 700 / 17px / 等宽数字对齐
        · 确定按钮：等高 36px、圆角 9px、渐变蓝 + 轻投影，hover 微亮上浮
        · 提示文字：12.5px 浅灰 #98a2b3，靠右、紧贴按钮下方
   2) 右侧微信客服浮窗：取消"跟随滚动滑动"，改回固定右侧垂直居中（top:50% + translateY(-50%)）。
   ========================================================================= */

/* ---------- 1) 已选信息区（桌面） ---------- */
@media only screen and (min-width: 821px) {
    .title1 .xzxx {
        width: 100%;
        font-size: 15px;
        padding: 14px 2px 10px;
        border-collapse: separate;
        border-spacing: 0;
    }
    .title1 .xzxx td {
        font-weight: 500;
        height: auto;
        padding: 4px 0;
        vertical-align: middle;
        line-height: 1.45;
    }
    .title1 .xzxx tr td:nth-child(1) {
        color: #5b6472;
        font-weight: 500;
        font-size: 14px;
        white-space: nowrap;
        width: 1px;
        padding-right: 12px;
        letter-spacing: .2px;
    }
    .title1 .xzxx tr td:nth-child(2) {
        color: #e5484d;
        font-weight: 700;
        font-size: 17px;
        width: 1px;
        padding-right: 18px;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }
    .title1 .xzxx tr td:nth-child(3) { text-align: right; }
    .title1 .xzxx tr:nth-child(4) td { height: auto; vertical-align: middle; }

    .title1 .qd {
        width: auto;
        min-width: 104px;
        height: 36px;
        line-height: 36px;
        padding: 0 22px;
        float: right;
        margin: 0;
        background: linear-gradient(180deg, #4aa3f0, #1e7fe0);
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 3px;
        border-radius: 9px;
        box-shadow: 0 3px 10px rgba(30, 127, 224, .28);
        cursor: pointer;
        transition: filter .15s, transform .12s;
    }
    .title1 .qd:hover { filter: brightness(1.06); transform: translateY(-1px); }

    .title1 .zt {
        float: none;
        display: block;
        text-align: right;
        font-size: 12.5px;
        font-weight: 400;
        color: #98a2b3;
        margin-top: 7px;
        line-height: 1.5;
        letter-spacing: .3px;
    }
}

/* ---------- 1b) 手机端只收敛配色/圆角，版式仍用原规则（避免打乱窄屏排布） ---------- */
@media only screen and (max-width: 820px) {
    .title1 .xzxx tr td:nth-child(1) { color: #5b6472; font-weight: 500; }
    .title1 .xzxx tr td:nth-child(2) { color: #e5484d; font-weight: 700; font-variant-numeric: tabular-nums; }
    .title1 .qd { background: linear-gradient(180deg, #4aa3f0, #1e7fe0); border-radius: 8px; box-shadow: 0 2px 6px rgba(30, 127, 224, .25); }
    .title1 .zt { color: #98a2b3; font-weight: 400; }
}

/* ---------- 2) 微信客服浮窗：固定右侧垂直居中 ---------- */
@media only screen and (min-width: 821px) {
    .wxkf { top: 50%; transform: translateY(-50%); }
}

/* ===================== 追加自 wii：css_add_v12.css ===================== */

/* =========================================================================
   前台改造 v12（2026-09-27）：已选信息区按"设计稿"重做
   用户反馈（附截图）：「排版还是不美观，字体太小应该放大，左右两边应该往中间移动 10-20」
   设计诊断（自己看图逐条列的问题）：
     ① 字号过小：标签 14px / 数值 17px 在 1800px 宽画布上像注释
     ② 右侧"确定+提示"贴右上角，与左边三行不在同一视觉基线，左右两组各自飘着
     ③ 内容顶在最上沿，下方留 60px 死白
     ④ 左右完全贴边（x=60 / x=1860），没有内缩
     ⑤ 整条没有边界，1800px 里两撮内容中间空 1600px，像"未完成"
   改法：
     · 放大：标签 17px（#4b5563，比原来更实）、数值 24px 700（红 #e5484d，等宽数字）
     · 左右内缩 20px（用户指定 10-20）
     · 整块做成"一根栏"：极浅底 #f8fafc + 1px 描边 #eaeef3 + 14px 圆角，
       让中间的空读起来是"栏的留白"而不是"缺内容"
     · 右侧按钮组（确定 + 下一步提示）改成绝对定位，相对整栏【垂直居中】，
       高度 44px、字号 18px，跟放大的左侧文字同级
   ========================================================================= */

@media only screen and (min-width: 821px) {
    .title1 {
        position: relative;                 /* 右侧按钮组的定位基准 */
        background: #f8fafc;
        border: 1px solid #eaeef3;
        border-radius: 14px;
        padding: 16px 20px 14px;
        margin: 12px 0 8px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
    }
    .title1 .xzxx {
        width: 100%;
        font-size: 17px;
        padding: 0;
        border-collapse: separate;
        border-spacing: 0;
    }
    .title1 .xzxx td {
        font-weight: 500;
        height: auto;
        padding: 7px 0;
        vertical-align: middle;
        line-height: 1.4;
    }
    .title1 .xzxx tr td:nth-child(1) {
        color: #4b5563;
        font-weight: 500;
        font-size: 17px;
        white-space: nowrap;
        width: 1px;
        padding-right: 16px;
        letter-spacing: .2px;
    }
    .title1 .xzxx tr td:nth-child(2) {
        color: #e5484d;
        font-weight: 700;
        font-size: 24px;
        width: 1px;
        padding-right: 20px;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
        letter-spacing: .2px;
    }
    .title1 .xzxx tr td:nth-child(3) { text-align: right; }
    .title1 .xzxx tr:nth-child(4) td { height: auto; vertical-align: middle; }

    /* 右侧按钮组：绝对定位 → 相对整栏垂直居中 */
    .title1 .qd {
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -34px;
        float: none;
        width: auto;
        min-width: 132px;
        height: 44px;
        line-height: 44px;
        padding: 0 26px;
        background: linear-gradient(180deg, #4aa3f0, #1e7fe0);
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 4px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(30, 127, 224, .28);
        cursor: pointer;
        transition: filter .15s, transform .12s;
    }
    .title1 .qd:hover { filter: brightness(1.06); transform: translateY(-1px); }

    .title1 .zt {
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: 20px;
        float: none;
        display: block;
        text-align: right;
        font-size: 14px;
        font-weight: 400;
        color: #98a2b3;
        line-height: 1.4;
        letter-spacing: .3px;
    }
}

/* ---------- 手机端（≤820px）：同样放大字号 + 同款浅底栏，但不改原版式 ---------- */
@media only screen and (max-width: 820px) {
    .title1 {
        background: #f8fafc;
        border: 1px solid #eaeef3;
        border-radius: 12px;
        padding: 10px 12px 8px;
        margin: 8px 0 6px;
    }
    .title1 .xzxx tr td:nth-child(1) { color: #4b5563; font-weight: 500; font-size: 15px; }
    .title1 .xzxx tr td:nth-child(2) { color: #e5484d; font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
    .title1 .qd { height: 34px; line-height: 34px; font-size: 15px; letter-spacing: 3px; background: linear-gradient(180deg, #4aa3f0, #1e7fe0); border-radius: 8px; box-shadow: 0 2px 7px rgba(30, 127, 224, .25); }
    .title1 .zt { color: #98a2b3; font-weight: 400; font-size: 12.5px; }
}

/* ===================== 追加自 wii：css_add_v13.css ===================== */

/* =========================================================================
   前台改造 v13（2026-09-27）
   ① 右侧"确定+提示"组真正垂直居中：v12 实测按钮中心比栏中心高 12px（margin-top -34 → -38、
      提示 +20 → +14），让 [按钮44 + 间距 + 提示] 整组落在栏的中线上。
   ② 横幅按容器宽度等比铺满：v12 截图里 1920 屏下横幅只有 1200px 宽、右侧空 600px 白，
      是这块区域最扎眼的问题。原因：图片本身 1200×191，原来靠行内 height:300px 硬拉到满宽
      （比例被拉坏），我 v5 改成 height:auto 后又变成"按原始尺寸渲染、不满宽"。
      正解：width:100% + height:auto → 满宽且比例正确（1800/287 = 6.27，原图 6.28）。
   ========================================================================= */

@media only screen and (min-width: 821px) {
    .title1 .qd { margin-top: -38px; }
    .title1 .zt { margin-top: 14px; }

    .nh img {
        width: 100%;
        height: auto !important;
        max-width: 100% !important;
    }
}

@media only screen and (max-width: 820px) {
    /* 手机端本来就该满宽等比，这里统一确认一次（手机上 1883/1200 宽图铺满屏宽） */
    .nh img {
        width: 100%;
        height: auto !important;
        max-width: 100% !important;
    }
}

/* ===================== 追加自 wii：css_add_v14.css ===================== */

/* =========================================================================
   前台改造 v14（2026-09-27）：已选区浅底栏与横幅"左右边缘对齐"
   v13 实测：
     · 1920 屏：横幅 [60..1860]、底栏 [60..1860] → 对齐 ✓
     · 1366 屏：横幅左边 20px（页面留白）、底栏却从 0 开始 → 底栏比横幅宽 20px ✗
     · 390 屏：横幅在 8px、底栏从 0 开始 → 差 8px ✗
   （用户对"上下边缘不齐"很敏感，之前专门提过）
   改法：给底栏补上与页面留白一致的外边距，三档宽度下横幅与底栏左右边缘都对齐。
   ========================================================================= */

@media only screen and (min-width: 821px) and (max-width: 1499px) {
    .title1 { margin-left: 20px; margin-right: 20px; }
}

@media only screen and (max-width: 820px) {
    .title1 { margin-left: 8px; margin-right: 8px; }
}

/* ===================== 追加自 wii：css_add_v15.css ===================== */

/* =========================================================================
   前台改造 v15（2026-09-27）：修复"浅底栏压住『第一步』文字"
   根因：HTML 里 <div class="title1" style="top: 84px;"> 带内联 top:84px。
   原站 .title1 是 static，内联的 top 不生效；v12 为了给右侧按钮做绝对定位基准，
   把 .title1 改成 position:relative —— 内联 top:84px 立刻生效，整条栏下移 84px，
   底边 603 压住"第一步"文字（顶边 589），重叠 14px，任何滚动位置都存在。
   实测：只把 position 改回 static，底栏立刻回位（428 → 344），重叠 → -70（正常间距）。
   改法：保留 position:relative（按钮定位需要），但把 top 归零 —— 既拿到定位基准，又不产生偏移。
   ========================================================================= */

@media only screen and (min-width: 821px) {
    .title1 { top: auto !important; }
}

/* 手机端 .title1 本来就是 static，内联 top 不生效；这里一并兜住，防止将来改动踩同一个坑 */
@media only screen and (max-width: 820px) {
    .title1 { top: auto !important; }
}

/* ===================== 追加自 wii：css_add_v16.css ===================== */

/* =========================================================================
   前台改造 v16（2026-09-27）：第一步「选择容量和机型」排版
   原样式：`.kplx li{width:14.2%;float:left}` → 固定一行 7 个。
     · 续航/OLED 两组各 5 项 → 只占 71%，右侧空一片
     · 外置移动硬盘组 8 项 → 第 8 个（5TB / 4TB）被挤到第二行单独一个，很难看
   用户要求：硬盘这组电脑端要「一行显示」；手机端不用管一行，做成自适应就好。
   改法：
     桌面（≥821px）
       · 5 项组 → 19.8%（5 个正好铺满一行）
       · 硬盘组（第 3 组，tr:nth-child(6)）→ 12.4%（8 个正好铺满一行）
       · 组与组之间加间距，让三段读起来是三个块
     手机（≤820px）自适应铺排，不留单吊项
       · 5 项组 → 33.3%（3+2）
       · 硬盘组 → 24.8%（4+4）
       · 圆点缩到 22px，行高收一点
   ========================================================================= */

@media only screen and (min-width: 821px) {
    .kplx li { width: 19.8%; }
    .kplx tr:nth-child(6) li { width: 12.4%; }
    .kplx tr:nth-child(3) td,
    .kplx tr:nth-child(5) td { padding-top: 16px; }
    .kplx li { line-height: 28px; }
}

@media only screen and (max-width: 820px) {
    .kplx tr:nth-child(2) li,
    .kplx tr:nth-child(4) li { width: 33.3%; }
    .kplx tr:nth-child(6) li { width: 24.8%; }
    .kplx tr:nth-child(3) td,
    .kplx tr:nth-child(5) td { padding-top: 12px; }
    .kplx li { line-height: 26px; }
    .kpxz { width: 22px; height: 22px; }
    .kpxz_type { width: 22px; height: 22px; margin-left: 8px; }
}

/* =========================================================================
   前台改造 v17（2026-09-27）：修正 v16 的选择器（容量分组 = 3 张独立的 .kplx 表）
   v16 误以为三组在同一个表里（写成 tr:nth-child(6)）；
   实际每个分组各是一张 <table class="kplx">，每张只有 2 行（标题行 / 选项行）——
   所以 v16 里"硬盘组"的规则从未命中，实测硬盘仍是 5+3 两行 ✗。
   改为按表的顺序定位：第 3 张 .kplx = 外置移动硬盘组。
   ========================================================================= */

@media only screen and (min-width: 821px) {
    .kplx li { width: 19.8%; }                 /* 5 项一组：一行铺满 */
    .kplx:nth-of-type(3) li { width: 12.4%; }  /* 硬盘 8 项：一行铺满 */
    .kplx:nth-of-type(2) td,
    .kplx:nth-of-type(3) td { padding-top: 16px; }   /* 组与组之间留白 */
    .kplx li { line-height: 28px; }
}

@media only screen and (max-width: 820px) {
    .kplx li { width: 33.3%; }                 /* 5 项 → 3+2，不留单吊项 */
    .kplx:nth-of-type(3) li { width: 24.8%; }   /* 8 项 → 4+4 */
    .kplx:nth-of-type(2) td,
    .kplx:nth-of-type(3) td { padding-top: 12px; }
    .kplx li { line-height: 26px; }
    .kpxz { width: 22px; height: 22px; }
}

/* =========================================================================
   前台改造 v18（2026-09-27）：筛选胶囊支持三维度 —— 语言 / 类型 / 人数
   容器写法：<div class="filters" data-param="label|genre|players">，胶囊仍旧用 data-label。
   没有 data-param 的老容器按 label 处理（wii 的版本胶囊不受影响）。
   ========================================================================= */

.filters {
    line-height: 30px;
    margin: 6px 0 2px;
}

.filters .flabel {
    display: inline-block;
    min-width: 34px;
    margin-right: 6px;
    color: #8a93a0;
    font-size: 13px;
    font-weight: 700;
}

.filters .fchip {
    display: inline-block;
    margin: 0 8px 6px 0;
    padding: 3px 12px;
    border: 1px solid #dfe3e8;
    border-radius: 14px;
    background: #fff;
    color: #444;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: all .15s;
}

.filters .fchip:hover {
    border-color: #f36a6a;
    color: #f36a6a;
}

.filters .fchip.active {
    border-color: #f36a6a;
    background: #f36a6a;
    color: #fff;
    font-weight: 700;
}

@media only screen and (max-width: 820px) {
    .filters .fchip {
        margin: 0 6px 6px 0;
        padding: 3px 9px;
        font-size: 12px;
    }

    .filters .flabel {
        min-width: 30px;
        font-size: 12px;
    }
}
/* v19（2026-09-28）：筛选三行与页面内容栅格对齐
   实测：页面标题/搜索框/表格左边缘都在 20px，而筛选块标签在 0px、胶囊在 40px
   → 整块比内容偏左 20px，"歪一格"。这里把整块推到内容栅格上：
     标签左边缘 = 20px（与标题/搜索框对齐），胶囊 = 60px（标签列右移，三行一致）
   只加位置，不动胶囊尺寸/配色/字号（那三项三行本来就完全一致）。 */
.filters {
    margin-left: 20px;
}
/* 第一行与上方搜索框之间留出一口气（原来是贴死的 6px） */
.filters:first-of-type {
    margin-top: 12px;
}
/* 手机端页面左内边距更窄，跟着收一点，避免整块看起来又被推出去 */
@media (max-width: 768px) {
    .filters {
        margin-left: 10px;
    }
    .filters:first-of-type {
        margin-top: 8px;
    }
}
/* 右侧同样留出内容栅格的边距，避免最长的"类型"行顶到屏幕边 */
.filters {
    margin-right: 20px;
}
@media (max-width: 768px) {
    .filters {
        margin-right: 10px;
    }
}
/* v20（2026-09-28）：行内「类型 / 人数」标签胶囊
   参考 mg 站（ns.yuntuyugpt 同套）的做法：信息一眼可见、手机端天然可用、不依赖悬停。
   三色分维度：类型=蓝 · 人数=绿 · 语言仍用行首原有的粗体标记（避免同一信息出现两次）。
   尺寸克制：11px 字 / 16px 行高，行高只增加约 6px，一屏仍能看 18-20 行。 */
.gtag {
    display: inline-block;
    font-size: 11px;
    line-height: 16px;
    padding: 0 7px;
    margin: 0 0 0 4px;
    border-radius: 9px;
    vertical-align: middle;
    white-space: nowrap;
    font-weight: 400;
    letter-spacing: .2px;
}
.g-genre {
    background: #eef4ff;
    color: #2b5fd9;
    border: 1px solid #d8e4ff;
}
.g-players {
    background: #eaf7f0;
    color: #1f8b4c;
    border: 1px solid #d2ecdd;
}
/* 手机上再收一点，避免长名字挤压标签 */
@media (max-width: 768px) {
    .gtag {
        font-size: 10px;
        line-height: 15px;
        padding: 0 6px;
        margin-left: 3px;
    }
}
/* 标签不进 ver-inline 的流，避免版本号被挤到下一行 */
td .gtag + .ver-inline {
    margin-left: 4px;
}
/* v21（2026-09-28）：行首封面缩略图 + 手机端排版优化
   手机端要点：名称不被裁切（该几行就几行）、标签单独占一行但不拉满整行宽度、
   标签尽量一行排完、容量列收窄让出宽度。电脑端只多一个 40px 缩略图。 */
.gthumb{width:40px;height:40px;border-radius:6px;object-fit:cover;vertical-align:middle;margin-right:8px;background:#eef1f4}
@media (max-width:768px){
  .gthumb{width:32px;height:32px;border-radius:5px;margin-right:6px}
  #content_list td:nth-child(2){font-size:12.5px!important;line-height:1.5!important;
    padding:7px 4px!important;max-width:none!important;overflow:visible!important}
  #content_list td:nth-child(2) .bb{font-size:12.5px!important}
  #content_list td:last-child{width:52px!important;font-size:12px!important;
    padding-left:0!important;padding-right:4px!important}
  #content_list .ver-col{display:none!important}
  #content_list .ver-inline{display:inline!important;color:#9aa4b2!important;
    font-size:11px!important;margin-left:5px!important}
  /* 标签：第一个占一行但不撑满（display:table 只占文字宽）；整行尽量排得下 */
  #content_list td:nth-child(2) span.gtag:first-of-type{display:table;margin:3px 0 2px}
  #content_list .gtag{font-size:10px!important;line-height:15px!important;
    padding:0 5px!important;margin:0 3px 0 0!important;border-radius:8px!important}
}
/* v22（2026-09-28）：标签整行包装修正
   v21 用 .gtag:first-of-type{display:table} 让第一个标签独占一行，会把它拉成一条（用户反馈"背景太长"）。
   正解：PHP 把整套标签包进 .tagline，这里让 .tagline 整块换行、内部标签一行排完。 */
.tagline{display:block;margin-top:3px;line-height:1.9}
#content_list td:nth-child(2) span.gtag:first-of-type{display:inline-block!important;margin:0 3px 0 0!important}
@media (max-width:768px){
  .tagline{white-space:normal;margin-top:2px}
  #content_list .gtag{font-size:10px!important;line-height:15px!important;
    padding:0 5px!important;margin:0 3px 2px 0!important;border-radius:8px!important}
}
/* v25（2026-09-28）：悬停卡（电脑端 hover / 手机端「i」按钮）—— 按最初谈好的路线
   · 尺寸：桌面卡宽 320px、封面 240px；手机端卡占满宽度、封面 104px（用户 09-28 反馈"手机图过大"后定）
   · 卡片由 JS 只创建 1 个共享元素（不按行生成），所以不会增加 DOM 重量、不影响滚动
   · 图片地址走 --cov-base 变量：现在指向本站 /_covers，将来切 CDN 只改一处
*/
:root{ --cov-base: "/_covers"; }

#gcard{
  position:absolute; z-index:9999; display:none;
  width:320px; padding:14px; box-sizing:border-box;
  background:#fff; border:1px solid #e3e8ef; border-radius:12px;
  box-shadow:0 10px 32px rgba(20,35,70,.16);
  font:13px/1.6 "Microsoft YaHei",sans-serif; color:#4a5462;
}
#gcard.on{display:block}
#gcard .gcard-cover{
  width:240px; height:240px; border-radius:8px; object-fit:cover;
  display:block; margin:0 auto 10px; background:#eef1f4;
}
#gcard .gcard-name{font-size:15px;font-weight:700;color:#1b2430;line-height:1.45;margin-bottom:6px}
#gcard .gcard-tags{margin-bottom:8px}
#gcard .gcard-desc{color:#4a5462;font-size:12.5px;line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#gcard .gcard-meta{margin-top:8px;color:#8a94a2;font-size:11.5px}
#gcard .gtag{display:inline-block;font-size:11px;line-height:16px;padding:0 7px;
  margin:0 4px 3px 0;border-radius:9px;white-space:nowrap}

/* 手机端：行尾「i」按钮 + 卡片改成贴边、封面收小 */
.ibtn{display:none;width:22px;height:22px;border-radius:50%;
  border:1px solid #cfd8e3;background:#fff;color:#5b6472;
  font:italic 12px/1 Georgia,serif;cursor:pointer;padding:0}
@media (max-width:768px){
  .ibtn{display:inline-block}
  #gcard{width:auto;left:10px!important;right:10px;padding:12px}
  #gcard .gcard-cover{width:104px;height:104px;float:left;margin:0 12px 6px 0}
  #gcard .gcard-name{font-size:14px;margin-bottom:4px}
  #gcard .gcard-desc{font-size:12px;-webkit-line-clamp:4}
}
/* v27（2026-09-28）：简介节点只给悬停卡读取，绝不在行里显示 */
#content_list .gdesc{display:none!important}
/* v28（2026-09-28）：修复悬停卡闪烁
   原因：卡片弹出后盖住正在悬停的行 → 鼠标"离开行"→ 隐藏 → 鼠标"回到行"→ 又弹出 → 死循环
   修法：桌面端卡片不参与鼠标事件（pointer-events:none）。卡片只做展示，不需要鼠标交互；
        手机端保留交互（否则点击会穿透到下面的行，误"选中游戏"）。 */
@media (min-width:769px){
  #gcard{pointer-events:none}
}
/* v29（2026-09-28）：简介节点只给悬停卡读取，绝不在行里显示（v27 那次未生效，本次回读验证） */
#content_list .gdesc, .gdesc { display:none !important; }
/* v30（2026-09-28）：① 行内"封面在左，名称行+标签行统一从图片右侧开始对齐"；
   ② 卡片只保留 封面 + 中文名 + 标签 + 简介（隐藏版本/容量一行） */
#content_list td:nth-child(2) { position: relative; padding-left: 66px; min-height: 64px; }
#content_list td:nth-child(2) img.gthumb {
  position: absolute; left: 0; top: 5px; width: 56px; height: 56px;
  border-radius: 6px; object-fit: cover; display: block;
}
#content_list .tagline { display: block; }
/* 卡片内容排布：封面整幅在上，中文名加粗，标签，简介 */
#gcard { padding: 0 0 10px; }
#gcard .gcard-cover {
  float: none; width: 100%; height: 150px; object-fit: cover;
  border-radius: 8px 8px 0 0; display: block; margin: 0 0 9px;
}
#gcard .gcard-name { padding: 0 12px; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
#gcard .gcard-tags { padding: 0 12px; margin-bottom: 7px; }
#gcard .gcard-desc { padding: 0 12px; line-height: 1.65; }
#gcard .gcard-meta { display: none !important; }
@media (max-width: 768px) {
  #content_list td:nth-child(2) { padding-left: 56px; min-height: 58px; }
  #content_list td:nth-child(2) img.gthumb { width: 48px; height: 48px; top: 4px; }
  #gcard .gcard-cover { height: 108px; }
  #gcard .gcard-name { font-size: 14.5px; }
}
/* v31（2026-09-28）：行内padding被站点自身样式覆盖 → 提高优先级，确保文字/标签从图片右侧开始 */
#content_list td:nth-child(2) { padding-left: 66px !important; position: relative !important; min-height: 64px; }
#content_list td:nth-child(2) img.gthumb { left: 0 !important; top: 5px !important; width: 56px !important; height: 56px !important; }
@media (max-width: 768px) {
  #content_list td:nth-child(2) { padding-left: 56px !important; min-height: 58px; }
  #content_list td:nth-child(2) img.gthumb { width: 48px !important; height: 48px !important; }
}
/* v32（2026-09-28）：卡片封面保持完整方形（长方形会裁掉游戏画面细节，用户明确要求） */
#gcard .gcard-cover {
  height: auto !important; max-height: none !important;
  width: 100% !important; object-fit: contain !important;
  background: #f2f4f7; border-radius: 8px 8px 0 0;
}