/* ===== Kotogame H5 Mini Games - 栏目页改版（左栏分类 + 右侧大块） =====
   独立样式表，主题无关；颜色回退到 naver 主题变量。
   ================================================================= */

.h5-wrap{--h5g:#03C75A;--h5g-dark:#009C48;--h5g-deep:#008A40;--h5g-light:#E8F9F0;
  --h5-bg:#F7F9F8;--h5-card:#fff;--h5-line:#E2E8E4;--h5-t1:#191919;--h5-t2:#505050;--h5-t3:#8A8F8C;
  --h5-r:14px;--h5-r-sm:10px;--h5-sh:0 1px 4px rgba(0,0,0,.06);--h5-sh-h:0 12px 30px rgba(3,199,90,.18);}

/* ---------- Hero ---------- */
.h5-hero{position:relative;overflow:hidden;border-radius:var(--h5-r,14px);margin-bottom:24px;
  background:linear-gradient(135deg,#03C75A 0%,#00B550 55%,#009B47 100%);color:#fff;padding:34px 28px}
.h5-hero::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,255,255,.10);top:-150px;right:-90px}
.h5-hero::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(0,0,0,.06);bottom:-120px;left:-70px}
.h5-hero-inner{position:relative;z-index:1;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.h5-hero-text{flex:1;min-width:240px}
.h5-hero h1{font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1.25;margin:0 0 8px}
.h5-hero p{font-size:14px;opacity:.94;margin:0;line-height:1.6}
.h5-hero .h5-hero-badges{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.h5-hero .h5-hero-badges span{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  border-radius:20px;padding:4px 13px;font-size:12.5px;font-weight:600}
.h5-hero-search{display:flex;align-items:center;flex:0 0 auto;width:100%;max-width:380px;
  background:#fff;border-radius:26px;padding:4px 4px 4px 18px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.h5-hero-search input{flex:1;min-width:0;border:none;outline:none;font-size:15px;padding:9px 0;background:transparent;color:var(--h5-t1,#191919)}
.h5-hero-search button{flex-shrink:0;background:var(--h5g,#03C75A);color:#fff;border:none;border-radius:22px;
  padding:9px 22px;font-size:14px;font-weight:700;cursor:pointer}
.h5-hero-search button:hover{background:var(--h5g-dark,#009C48)}

/* ---------- 布局：左栏 + 右侧内容 ---------- */
.h5-layout{display:grid;grid-template-columns:216px minmax(0,1fr);gap:24px;align-items:start}
.h5-content{min-width:0}

/* ---------- 左栏分类 ---------- */
.h5-rail{position:sticky;top:calc(var(--header-h,104px) + 16px)}
.h5-rail-box{background:#fff;border:1px solid var(--h5-line,#E2E8E4);border-radius:var(--h5-r,14px);
  box-shadow:var(--h5-sh,0 1px 4px rgba(0,0,0,.06));overflow:hidden}
.h5-rail-title{font-size:13px;font-weight:800;color:var(--h5-t3,#8A8F8C);letter-spacing:.04em;
  padding:16px 16px 10px;margin:0;text-transform:uppercase}
.h5-rail-list{display:flex;flex-direction:column;padding:0 8px 10px;max-height:calc(100vh - 220px);overflow:auto}
.h5-rail-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;
  font-size:14px;font-weight:600;color:var(--h5-t2,#505050);transition:background .14s,color .14s}
.h5-rail-item:hover{background:#F2F6F3;color:var(--h5g-deep,#008A40)}
.h5-rail-item.active{background:var(--h5g-light,#E8F9F0);color:var(--h5g-deep,#008A40)}
.h5-rail-emoji{font-size:15px;width:20px;text-align:center;flex-shrink:0}
.h5-rail-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h5-rail-count{font-size:12px;font-weight:700;color:var(--h5-t3,#8A8F8C);background:#F1F4F2;
  border-radius:20px;padding:1px 8px;flex-shrink:0}
.h5-rail-item.active .h5-rail-count{background:#fff;color:var(--h5g-deep,#008A40)}
.h5-rail-foot{border-top:1px solid var(--h5-line,#E2E8E4);margin-top:6px;padding:12px 16px 14px;font-size:12.5px;color:var(--h5-t3,#8A8F8C);line-height:1.6}

/* ---------- 区块头 ---------- */
.h5-block{margin-bottom:34px}
.h5-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;
  padding-left:12px;border-left:4px solid var(--h5g,#03C75A)}
.h5-block-head h2{font-size:19px;font-weight:800;letter-spacing:-.4px;margin:0;color:var(--h5-t1,#191919)}
.h5-block-head .h5-more{font-size:13.5px;font-weight:700;color:var(--h5g,#03C75A)}
.h5-block-head .h5-more:hover{color:var(--h5g-dark,#009C48)}

/* ---------- 精选大卡 ---------- */
.h5-featured{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px}
.h5-feat-main{position:relative;display:block;border-radius:var(--h5-r,14px);overflow:hidden;
  background:#0d1b14;box-shadow:var(--h5-sh,0 1px 4px rgba(0,0,0,.06));transition:transform .18s,box-shadow .18s}
.h5-feat-main:hover{transform:translateY(-3px);box-shadow:var(--h5-sh-h,0 12px 30px rgba(3,199,90,.18))}
.h5-feat-main img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .35s}
.h5-feat-main:hover img{transform:scale(1.04)}
.h5-feat-main .h5-feat-info{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 18px;
  background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,0) 100%);color:#fff}
.h5-feat-main .h5-feat-info h3{font-size:19px;font-weight:800;margin:0 0 5px;letter-spacing:-.3px;color:#fff}
.h5-feat-main .h5-feat-info p{font-size:13px;opacity:.86;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;color:#fff}
.h5-feat-main .h5-feat-meta{font-size:12.5px;font-weight:600;color:#B7F0CE}
.h5-feat-badge{position:absolute;top:14px;left:14px;background:var(--h5g,#03C75A);color:#fff;font-size:11.5px;
  font-weight:800;letter-spacing:.05em;border-radius:20px;padding:4px 12px;text-transform:uppercase}
.h5-feat-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;
  background:rgba(3,199,90,.94);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:0 8px 26px rgba(0,0,0,.35);opacity:0;transition:opacity .2s,transform .2s}
.h5-feat-main:hover .h5-feat-btn{opacity:1;transform:translate(-50%,-50%) scale(1.06)}

.h5-feat-side{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:14px}
.h5-feat-mini{display:flex;flex-direction:column;background:#fff;border:1px solid var(--h5-line,#E2E8E4);
  border-radius:var(--h5-r-sm,10px);overflow:hidden;box-shadow:var(--h5-sh,0 1px 4px rgba(0,0,0,.06));transition:transform .16s,box-shadow .16s,border-color .16s}
.h5-feat-mini:hover{transform:translateY(-3px);box-shadow:var(--h5-sh-h,0 12px 30px rgba(3,199,90,.18));border-color:#9FE8C0}
.h5-feat-mini img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.h5-feat-mini .h5-feat-mini-txt{padding:9px 11px;min-width:0}
.h5-feat-mini .h5-feat-mini-txt b{display:block;font-size:13.5px;font-weight:700;color:var(--h5-t1,#191919);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h5-feat-mini .h5-feat-mini-txt i{font-style:normal;font-size:12px;color:var(--h5-t3,#8A8F8C)}

/* ---------- 热门横滑 ---------- */
.h5-hotrow{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.h5-hotcard{flex:0 0 158px;width:158px}
.h5-hotcard .h5-hotcard-shot{position:relative;display:block;border-radius:var(--h5-r-sm,10px);overflow:hidden;
  box-shadow:var(--h5-sh,0 1px 4px rgba(0,0,0,.06));transition:transform .16s,box-shadow .16s}
.h5-hotcard:hover .h5-hotcard-shot{transform:translateY(-3px);box-shadow:var(--h5-sh-h,0 12px 30px rgba(3,199,90,.18))}
.h5-hotcard img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.h5-hotcard .h5-rank{position:absolute;top:8px;left:8px;min-width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,.62);
  color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 5px}
.h5-hotcard:nth-child(1) .h5-rank{background:#F5A623}
.h5-hotcard:nth-child(2) .h5-rank{background:#9AA5AD}
.h5-hotcard:nth-child(3) .h5-rank{background:#C1783C}
.h5-hotcard-name{display:block;margin-top:8px;font-size:13.5px;font-weight:700;color:var(--h5-t1,#191919);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h5-hotcard-meta{display:block;font-size:12px;color:var(--h5-t3,#8A8F8C)}

/* ---------- 全部游戏网格 ---------- */
.h5-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.h5-gcard{display:block;background:#fff;border:1px solid var(--h5-line,#E2E8E4);border-radius:var(--h5-r-sm,10px);
  overflow:hidden;box-shadow:var(--h5-sh,0 1px 4px rgba(0,0,0,.06));transition:transform .16s,box-shadow .16s,border-color .16s}
.h5-gcard:hover{transform:translateY(-4px);box-shadow:var(--h5-sh-h,0 12px 30px rgba(3,199,90,.18));border-color:#9FE8C0}
.h5-gcard .h5-gshot{position:relative;display:block;overflow:hidden;background:var(--h5g-light,#E8F9F0)}
.h5-gcard .h5-gshot img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .3s}
.h5-gcard:hover .h5-gshot img{transform:scale(1.06)}
.h5-gcard .h5-gshot .h5-gplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.34);color:#fff;font-size:26px;opacity:0;transition:opacity .18s}
.h5-gcard:hover .h5-gshot .h5-gplay{opacity:1}
.h5-gcard .h5-gbody{padding:11px 12px 13px}
.h5-gcard .h5-gname{font-size:14px;font-weight:700;color:var(--h5-t1,#191919);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}
.h5-gcard .h5-gmeta{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;color:var(--h5-t3,#8A8F8C)}
.h5-gcard .h5-gcat{background:var(--h5g-light,#E8F9F0);color:var(--h5g-deep,#008A40);border-radius:20px;
  padding:1px 9px;font-weight:700;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}
.h5-gcard .h5-emoji{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:38px;background:var(--h5g-light,#E8F9F0)}

/* ---------- 排序 ---------- */
.h5-sort{display:flex;gap:6px;flex-wrap:wrap}
.h5-sort a{font-size:13px;font-weight:600;padding:5px 13px;border-radius:20px;background:#fff;
  border:1px solid var(--h5-line,#E2E8E4);color:var(--h5-t2,#505050);transition:all .14s}
.h5-sort a:hover{border-color:var(--h5g,#03C75A);color:var(--h5g,#03C75A)}
.h5-sort a.active{background:var(--h5g,#03C75A);border-color:var(--h5g,#03C75A);color:#fff}

/* ---------- 空态 ---------- */
.h5-empty{background:#fff;border:1px solid var(--h5-line,#E2E8E4);border-radius:var(--h5-r,14px);
  text-align:center;padding:64px 20px;color:var(--h5-t3,#8A8F8C)}
.h5-empty p:first-child{font-size:46px;margin:0 0 12px}

/* ---------- 移动端 ---------- */
.h5-rail-toggle{display:none}
@media(max-width:1024px){
  .h5-layout{grid-template-columns:minmax(0,1fr)}
  .h5-rail{position:static}
  .h5-rail-box{padding-bottom:6px;min-width:0}
  .h5-rail-list{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;max-height:none;gap:8px;padding:0 12px 12px}
  .h5-rail-title{padding:12px 14px 8px}
  .h5-rail-item{flex:0 0 auto;background:#F4F7F5;border-radius:20px;padding:7px 14px}
  .h5-rail-item.active{background:var(--h5g,#03C75A);color:#fff}
  .h5-rail-item.active .h5-rail-count{background:rgba(255,255,255,.28);color:#fff}
  .h5-rail-emoji{display:none}
  .h5-rail-foot{display:none}
  .h5-featured{grid-template-columns:minmax(0,1fr)}
  .h5-feat-main,.h5-feat-mini,.h5-hotcard,.h5-gcard{min-width:0}
  .h5-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:768px){
  .h5-hero{padding:24px 18px}
  .h5-hero h1{font-size:23px}
  .h5-hero-search{max-width:100%;width:100%}
  .h5-hero-inner{gap:18px}
  .h5-feat-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h5-hotcard{flex:0 0 132px;width:132px}
  .h5-block{margin-bottom:26px}
  .h5-block-head h2{font-size:17px}
}
@media(max-width:480px){
  .h5-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .h5-feat-side{grid-template-columns:1fr 1fr;gap:10px}
  .h5-feat-main .h5-feat-info h3{font-size:16px}
}

/* ============ 面包屑（列表页 + 详情页共用） ============ */
.h5-crumb{font-size:13px;color:var(--h5-t3,#8A8F8C);margin:0 0 18px;line-height:1.8}
.h5-crumb a{color:inherit}
.h5-crumb a:hover{color:var(--h5g,#03C75A)}
.h5-crumb strong{color:var(--h5-t2,#505050);font-weight:700}

/* ============ 详情页布局 ============ */
.h5-play{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}
.h5-play-main{min-width:0}

/* 播放台 */
.h5-stage{position:relative;border-radius:var(--h5-r,14px);overflow:hidden;background:#0d1b14;
  box-shadow:0 6px 22px rgba(0,0,0,.16);margin-bottom:18px}
.h5-stage .h5-player{border-radius:0;display:block}

/* 游戏信息头 */
.h5-ghead{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--h5-line,#E2E8E4);
  border-radius:var(--h5-r,14px);padding:16px;box-shadow:var(--h5-sh,0 1px 4px rgba(0,0,0,.06));margin-bottom:18px}
.h5-ghead-icon{flex-shrink:0;width:76px;height:76px;border-radius:16px;overflow:hidden;background:var(--h5g-light,#E8F9F0)}
.h5-ghead-icon img{width:100%;height:100%;object-fit:cover;display:block}
.h5-emoji-lg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:34px}
.h5-ghead-info{flex:1;min-width:0}
.h5-ghead-info h1{font-size:23px;font-weight:900;letter-spacing:-.6px;margin:0 0 7px;color:var(--h5-t1,#191919);line-height:1.25}
.h5-ghead-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--h5-t3,#8A8F8C)}
.h5-tag{background:var(--h5g-light,#E8F9F0);color:var(--h5g-deep,#008A40);border-radius:20px;
  padding:2px 12px;font-weight:700;font-size:12.5px}
.h5-fav{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--h5-line,#E2E8E4);
  border-radius:22px;padding:9px 18px;font-size:14px;font-weight:700;color:var(--h5-t2,#505050);cursor:pointer;transition:all .16s}
.h5-fav:hover{border-color:var(--h5g,#03C75A);color:var(--h5g,#03C75A)}
.h5-fav.on{background:var(--h5g,#03C75A);border-color:var(--h5g,#03C75A);color:#fff}

/* 内容面板 */
.h5-panel{background:#fff;border:1px solid var(--h5-line,#E2E8E4);border-radius:var(--h5-r,14px);
  padding:20px 22px;box-shadow:var(--h5-sh,0 1px 4px rgba(0,0,0,.06));margin-bottom:18px}
.h5-panel-h{font-size:16.5px;font-weight:800;letter-spacing:-.3px;margin:0 0 12px;color:var(--h5-t1,#191919);
  padding-left:11px;border-left:4px solid var(--h5g,#03C75A);line-height:1.3}
.h5-about{font-size:14.5px;line-height:1.75;color:var(--h5-t2,#505050);margin:0}
.h5-howto{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.h5-howto li{position:relative;padding-left:26px;font-size:14px;line-height:1.65;color:var(--h5-t2,#505050)}
.h5-howto li::before{content:"✓";position:absolute;left:0;top:0;color:var(--h5g,#03C75A);font-weight:900}

/* 侧栏 */
.h5-play-side{min-width:0}
.h5-side-box{background:#fff;border:1px solid var(--h5-line,#E2E8E4);border-radius:var(--h5-r,14px);
  padding:16px;box-shadow:var(--h5-sh,0 1px 4px rgba(0,0,0,.06));position:sticky;top:calc(var(--header-h,104px) + 16px)}
.h5-side-h{font-size:15px;font-weight:800;margin:0 0 13px;color:var(--h5-t1,#191919);padding-left:11px;
  border-left:4px solid var(--h5g,#03C75A);line-height:1.3}
.h5-side-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.h5-side-card{display:block;min-width:0}
.h5-side-shot{display:block;border-radius:var(--h5-r-sm,10px);overflow:hidden;background:var(--h5g-light,#E8F9F0);
  box-shadow:var(--h5-sh,0 1px 4px rgba(0,0,0,.06));transition:transform .16s,box-shadow .16s}
.h5-side-card:hover .h5-side-shot{transform:translateY(-3px);box-shadow:var(--h5-sh-h,0 12px 30px rgba(3,199,90,.18))}
.h5-side-shot img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.h5-side-name{display:block;margin-top:7px;font-size:13px;font-weight:700;color:var(--h5-t1,#191919);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h5-side-meta{display:block;font-size:11.5px;color:var(--h5-t3,#8A8F8C)}
.h5-side-all{display:block;margin-top:14px;text-align:center;font-size:13.5px;font-weight:700;
  color:var(--h5g,#03C75A);padding-top:13px;border-top:1px solid var(--h5-line,#E2E8E4)}
.h5-side-all:hover{color:var(--h5g-dark,#009C48)}

@media(max-width:1024px){
  .h5-play{grid-template-columns:1fr}
  .h5-side-box{position:static}
  .h5-side-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:768px){
  .h5-ghead{flex-wrap:wrap}
  .h5-ghead-info h1{font-size:19px}
  .h5-ghead-icon{width:60px;height:60px;border-radius:13px}
  .h5-side-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}