:root{
  --blue:#2f8bfd;--blue-deep:#1f6fe0;--blue-weak:#e9f2ff;
  --text:#2f333a;--sub:#8f959e;--line:#eef0f3;--bg:#f4f6fa;
  --card:#ffffff;--radius:12px;--shadow:0 8px 28px rgba(24,52,110,.07);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--text);background:var(--bg);font-size:14px;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
img{display:block;max-width:100%;}
.icon{flex:0 0 auto;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#d8dde5;border-radius:4px;}

.p-top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
.p-top-in{max-width:1240px;margin:0 auto;height:66px;display:flex;align-items:center;gap:26px;padding:0 20px;}
.logo{display:flex;align-items:baseline;gap:2px;white-space:nowrap;}
.logo .flash{font-size:25px;font-weight:800;font-style:italic;letter-spacing:-1px;color:#1e2228;line-height:1;}
.logo .cn{font-size:24px;font-weight:700;color:#5a606a;letter-spacing:1px;line-height:1;}
.logo em{font-style:normal;font-size:11px;color:#a2a8b0;margin-left:10px;}
.p-nav{display:flex;align-items:center;gap:4px;}
.p-nav a{padding:8px 11px;border-radius:8px;color:#5a6069;font-size:13.5px;transition:.18s;}
.p-nav a:hover,.p-nav a.on{background:var(--blue-weak);color:var(--blue);font-weight:600;}
.p-search{margin-left:auto;display:flex;align-items:center;gap:8px;background:#f5f7fa;border:1px solid #eef0f4;border-radius:20px;padding:0 6px 0 14px;height:38px;width:250px;transition:.18s;}
.p-search:focus-within{background:#fff;border-color:#bcd7ff;box-shadow:0 0 0 3px rgba(47,139,253,.1);}
.p-search input{border:0;background:none;outline:none;flex:1;min-width:0;font-size:13px;color:var(--text);}
.p-search input::placeholder{color:#a8aeb8;}
.p-search button{border:0;background:var(--blue);color:#fff;height:28px;padding:0 13px;border-radius:15px;font-size:12.5px;}
.p-user{display:flex;align-items:center;gap:8px;font-size:13px;color:#5a6069;white-space:nowrap;}
.p-user .avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#5aa5ff,#2f7cff);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;overflow:hidden;}
.p-user .avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.p-user:hover{color:var(--blue);}
.p-downloads{display:flex;align-items:center;gap:7px;flex:none;}
.p-dl{display:flex;align-items:center;gap:5px;height:32px;padding:0 11px;border-radius:16px;border:1px solid #edf1f6;background:#fff;color:#5c636d;font-size:12px;white-space:nowrap;box-shadow:0 2px 8px rgba(24,52,110,.05);transition:.18s;}
.p-dl:hover{color:var(--blue);border-color:#cfe2ff;background:#f7fbff;}
.p-dl svg{flex:none;color:#2f8cff;}
.p-dl.is-empty{color:#8f959e;}
.profile-head p a{color:#dceaff;text-decoration:underline;text-underline-offset:2px;}
.real-done-card{text-align:center;}
.real-done-icon{width:58px;height:58px;border-radius:50%;background:#e7f8ef;color:#1c9b62;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;margin:0 auto 14px;}
.real-done-card .meta-grid{text-align:left;margin:18px 0 20px;}
.real-done-card .btn{width:100%;}

.page{max-width:1240px;margin:0 auto;padding:26px 20px 60px;}
.crumbs{display:flex;align-items:center;gap:8px;color:#9aa1ab;font-size:12.5px;margin:2px 0 18px;flex-wrap:wrap;}
.crumbs a:hover{color:var(--blue);}
.crumbs span.sep{color:#c9ced6;}
.crumbs b{color:#5a606a;font-weight:600;}

.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 14px;}
.section-title h2{font-size:18px;margin:0;letter-spacing:.3px;}
.section-title p{margin:4px 0 0;color:var(--sub);font-size:12.5px;}
.section-title .link{color:var(--blue);font-size:12.5px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 20px;border-radius:8px;border:1px solid transparent;font-size:13.5px;font-weight:600;transition:.18s;}
.btn.primary{background:linear-gradient(135deg,#3f9bff,#2f7cff);color:#fff;box-shadow:0 6px 16px rgba(47,124,255,.28);}
.btn.primary:hover{filter:brightness(1.05);transform:translateY(-1px);}
.btn.ghost{background:#fff;border-color:#e3e7ee;color:#4f5661;}
.btn.ghost:hover{border-color:#bcd7ff;color:var(--blue);}
.btn.soft{background:var(--blue-weak);color:var(--blue);}
.btn.sm{height:32px;padding:0 13px;font-size:12.5px;border-radius:7px;}

/* ---------- detail ---------- */
.detail-video{padding:18px 20px;}
.video-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.video-head h3{margin:0;font-size:16px;}
.video-head a{font-size:12.5px;color:#7c8798;}
.video-head a:hover{color:#2f8bfd;}
.detail-video video{display:block;width:100%;max-height:540px;background:#0b1220;border-radius:10px;}
.video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0b1220;}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.detail-hero{position:relative;border-radius:16px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;background:#0e1c33;box-shadow:0 18px 50px rgba(17,38,78,.18);}
.detail-hero .cover-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(2px) saturate(1.1);transform:scale(1.04);opacity:.55;}
.detail-hero .cover-mask{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,20,38,.2) 20%,rgba(9,20,38,.85) 100%);}
.detail-hero-in{position:relative;display:flex;align-items:center;gap:24px;padding:34px 38px;width:100%;color:#fff;}
.detail-icon{width:128px;height:128px;border-radius:22px;object-fit:cover;box-shadow:0 14px 34px rgba(0,0,0,.4);border:3px solid rgba(255,255,255,.2);background:#1b2b46;flex:0 0 auto;}
.detail-icon.ph{display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:800;color:#fff;}
.detail-head{flex:1;min-width:0;}
.detail-head .eyebrow{font-size:11px;letter-spacing:3px;color:#9ec9ff;font-weight:700;}
.detail-head h1{margin:7px 0 10px;font-size:32px;letter-spacing:1px;line-height:1.15;}
.detail-pills{display:flex;gap:8px;flex-wrap:wrap;}
.detail-pills span{font-size:12px;color:#cfe3ff;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16);padding:4px 11px;border-radius:20px;backdrop-filter:blur(4px);}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.detail-actions .btn.ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;}
.detail-actions .btn.ghost:hover{background:rgba(255,255,255,.2);color:#fff;}

.detail-layout{display:grid;grid-template-columns:1fr 318px;gap:22px;margin-top:22px;align-items:start;}
.detail-main{display:flex;flex-direction:column;gap:20px;}
.detail-block{padding:24px 26px;}
.detail-block h3{margin:0 0 12px;font-size:16px;}
.detail-block p{margin:0;color:#5c626b;line-height:1.9;font-size:13.5px;}
.detail-block p + p{margin-top:10px;}
.meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.meta-grid div{background:#f7f9fc;border:1px solid #f0f3f7;border-radius:10px;padding:13px 15px;}
.meta-grid span{display:block;color:#9aa1ab;font-size:11.5px;margin-bottom:5px;}
.meta-grid b{font-size:13.5px;font-weight:600;}
.detail-side{padding:22px;position:sticky;top:88px;}
.detail-side h3{margin:0 0 12px;font-size:15px;}
.side-stats{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;}
.side-stats div{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:#8f959e;padding-bottom:10px;border-bottom:1px dashed #eef1f5;}
.side-stats b{color:#343a43;font-size:14px;}
.side-hot{background:linear-gradient(135deg,#fff6e9,#ffefd7);border-radius:10px;padding:13px 15px;color:#9a5c12;font-size:12.5px;line-height:1.7;}
.side-hot b{display:block;font-size:20px;color:#c4740f;margin-bottom:2px;}
.open-mini{display:flex;flex-direction:column;gap:9px;}
.open-mini div{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#5c626b;}
.open-mini time{background:var(--blue-weak);color:var(--blue);border-radius:6px;padding:3px 7px;font-weight:600;font-size:11.5px;}
.open-mini span{color:#9aa1ab;font-size:11.5px;margin-left:auto;}

.card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.game-card{background:#fff;border-radius:12px;padding:14px;box-shadow:0 4px 16px rgba(24,52,110,.06);display:flex;flex-direction:column;gap:10px;transition:.2s;border:1px solid transparent;}
.game-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(24,52,110,.12);border-color:#e2eeff;}
.game-card .gc-top{display:flex;align-items:center;gap:11px;min-width:0;}
.game-card img{width:52px;height:52px;border-radius:12px;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.16);flex:0 0 auto;}
.game-card img.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#5aa5ff,#2f7cff);color:#fff;font-size:20px;font-weight:800;}
.game-card .gc-info{min-width:0;}
.game-card .gc-info b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-card .gc-info em{display:block;font-style:normal;color:#9aa1ab;font-size:11.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-card .gc-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.game-card .gc-hot{color:#c4740f;font-size:11.5px;background:#fff6e9;border-radius:20px;padding:3px 9px;}
.game-card .gc-go{color:var(--blue);font-size:12px;font-weight:600;}
.empty{background:#fff;border-radius:14px;padding:60px 20px;text-align:center;box-shadow:var(--shadow);}
.empty b{display:block;font-size:17px;margin-bottom:8px;}
.empty span{color:var(--sub);font-size:13px;display:block;margin-bottom:20px;}

/* ---------- list ---------- */
.list-head{background:#fff;border-radius:14px;padding:24px 26px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.list-head h1{margin:0;font-size:24px;letter-spacing:.5px;}
.list-head p{margin:6px 0 0;color:var(--sub);font-size:13px;}
.list-head .count{color:var(--blue);font-weight:700;font-size:26px;}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px;}
.chips a{background:#fff;border:1px solid #e7ebf1;color:#5d646e;font-size:12.5px;padding:7px 14px;border-radius:20px;transition:.15s;}
.chips a:hover{border-color:#bcd7ff;color:var(--blue);}
.chips a.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;}
.list-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px;}
.pagerbar{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:26px;}
.pagerbar button{width:34px;height:34px;border-radius:8px;border:1px solid #e3e7ee;background:#fff;color:#5c636d;font-size:12.5px;}
.pagerbar button.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;}
.pagerbar button:disabled{opacity:.4;cursor:default;}
.pagerbar span{color:#8f959e;font-size:12.5px;margin:0 4px;}

/* ---------- rank ---------- */
.rank-tabs{display:flex;gap:8px;background:#fff;padding:6px;border-radius:12px;box-shadow:var(--shadow);width:max-content;}
.rank-tabs a{padding:9px 26px;border-radius:8px;color:#5c636d;font-size:13.5px;font-weight:600;}
.rank-tabs a.on{background:linear-gradient(135deg,#3f9bff,#2f7cff);color:#fff;box-shadow:0 6px 14px rgba(47,124,255,.28);}
.rank-table{margin-top:20px;background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden;}
.rank-line{display:grid;grid-template-columns:64px 64px 1fr 120px 110px 96px;align-items:center;gap:14px;padding:15px 24px;border-bottom:1px solid #f3f5f8;transition:.15s;}
.rank-line:last-child{border-bottom:0;}
.rank-line:hover{background:#f8fbff;}
.rank-no{font-size:18px;font-weight:800;color:#a8aeb8;font-style:italic;}
.rank-no.t1{color:#f0a10a;}.rank-no.t2{color:#8e9bb0;}.rank-no.t3{color:#c98348;}
.rank-line img{width:48px;height:48px;border-radius:11px;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.15);}
.rank-line .rk-name b{display:block;font-size:14px;}
.rank-line .rk-name em{display:block;font-style:normal;color:#9aa1ab;font-size:11.5px;margin-top:3px;}
.rank-line .rk-cat{color:#7a818b;font-size:12.5px;}
.rank-line .rk-hot{color:#c4740f;font-size:12.5px;}
.rank-line .btn{justify-self:end;}
.rank-note{margin-top:14px;color:#9aa1ab;font-size:11.5px;text-align:right;}

/* ---------- play ---------- */
.play-wrap{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start;}
.play-stage{background:#0b1730;border-radius:16px;padding:14px;box-shadow:0 20px 50px rgba(12,28,60,.25);}
.play-stage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#dbe8ff;padding:2px 6px 12px;}
.play-stage-head b{font-size:15px;letter-spacing:.5px;}
.play-stage-head span{font-size:11.5px;color:#8fa9cf;}
#playCanvas{width:100%;border-radius:10px;display:block;background:#0d1e3a;touch-action:none;cursor:crosshair;}
.play-hud{display:flex;justify-content:space-between;color:#cfe0ff;font-size:13px;padding:12px 6px 2px;}
.play-hud b{font-size:18px;color:#fff;margin-left:3px;}
.play-tip{color:#93a6c6;font-size:11.5px;padding:2px 6px 0;}
.play-side .panel{padding:20px;}
.play-side h3{margin:0 0 12px;font-size:15px;}
.play-side .row{display:flex;justify-content:space-between;font-size:12.5px;color:#8f959e;padding:9px 0;border-bottom:1px dashed #eef1f5;}
.play-side .row b{color:#343a43;}
.play-side .tip{background:#f7f9fc;border-radius:10px;padding:12px 14px;color:#7a818b;font-size:12px;line-height:1.8;margin-top:14px;}
.play-side .controls{display:flex;gap:8px;margin-top:14px;}
.play-overlay{position:fixed;inset:0;background:rgba(8,16,32,.66);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:50;}
.play-overlay[hidden]{display:none;}
.play-overlay .box{background:#fff;border-radius:16px;padding:34px 40px;text-align:center;width:min(90vw,360px);box-shadow:0 24px 60px rgba(0,0,0,.3);}
.play-overlay b{display:block;font-size:20px;margin-bottom:6px;}
.play-overlay p{margin:0 0 6px;color:#8f959e;font-size:13px;}
.play-overlay strong{font-size:38px;color:var(--blue);display:block;margin:8px 0 18px;}

/* ---------- auth ---------- */
.auth-wrap{max-width:420px;margin:52px auto 80px;padding:0 20px;}
.auth-card{background:#fff;border-radius:18px;padding:34px 34px 30px;box-shadow:0 20px 60px rgba(24,52,110,.12);}
.auth-card h1{margin:0 0 6px;font-size:23px;letter-spacing:.5px;}
.auth-card .sub{color:#9aa1ab;font-size:12.5px;margin:0 0 24px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;color:#6b727c;margin-bottom:7px;}
.field input{width:100%;height:44px;border:1px solid #e3e7ee;border-radius:9px;padding:0 14px;font-size:13.5px;color:var(--text);outline:none;background:#fbfcfe;transition:.18s;}
.field input:focus{border-color:#9cc6ff;background:#fff;box-shadow:0 0 0 3px rgba(47,139,253,.12);}
.auth-card .btn{width:100%;height:44px;margin-top:6px;}
.auth-note{color:#a2a8b1;font-size:11.5px;line-height:1.8;margin-top:16px;text-align:center;}
.auth-benefits{display:flex;justify-content:space-between;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid #f0f2f5;}
.auth-benefits div{text-align:center;flex:1;color:#8f959e;font-size:11.5px;}
.auth-benefits b{display:block;color:#3b414a;font-size:13px;margin-bottom:3px;}

/* ---------- profile / history ---------- */
.profile-head{background:linear-gradient(135deg,#1d3c6e,#2f7cff);border-radius:18px;padding:30px 34px;color:#fff;display:flex;align-items:center;gap:22px;box-shadow:0 20px 50px rgba(23,68,150,.22);}
.profile-avatar{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.18);border:3px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;overflow:hidden;}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;}
.avatar-edit{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.18);color:#fff;font-size:11px;line-height:1;padding:6px 12px;border-radius:20px;cursor:pointer;transition:.18s;}
.avatar-edit:hover{background:rgba(255,255,255,.3);}
.avatar-edit:disabled{opacity:.65;cursor:default;}
.profile-head h1{margin:0 0 4px;font-size:23px;letter-spacing:.5px;}
.profile-head p{margin:0;color:#c8ddfa;font-size:12.5px;}
.profile-head .logout{margin-left:auto;}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;}
.profile-stats .panel{padding:18px 22px;display:flex;align-items:center;gap:14px;}
.profile-stats .num{font-size:26px;font-weight:800;color:var(--blue);}
.profile-stats span{color:#8f959e;font-size:12.5px;}
.profile-section{margin-top:26px;}
.history-list{display:flex;flex-direction:column;gap:10px;}
.history-row{display:flex;align-items:center;gap:14px;background:#fff;border-radius:11px;padding:12px 18px;box-shadow:0 4px 14px rgba(24,52,110,.05);}
.history-row img{width:46px;height:46px;border-radius:10px;object-fit:cover;}
.history-row .hi{flex:1;min-width:0;}
.history-row .hi b{display:block;font-size:13.5px;}
.history-row .hi em{font-style:normal;color:#9aa1ab;font-size:11.5px;}
.history-row time{color:#a2a8b1;font-size:11.5px;}

/* ---------- phone ---------- */
.phone-wrap{display:grid;grid-template-columns:1fr 300px;gap:22px;margin-top:20px;align-items:start;}
.qr-card{background:#fff;border-radius:18px;padding:34px;box-shadow:var(--shadow);display:flex;gap:34px;align-items:center;}
.qr-box{width:228px;height:228px;border-radius:14px;border:1px solid #eef1f5;padding:12px;background:#fff;box-shadow:0 8px 24px rgba(24,52,110,.08);flex:0 0 auto;}
#qrCanvas{width:100%;height:100%;display:block;image-rendering:pixelated;}
.qr-info h1{margin:0 0 8px;font-size:23px;}
.qr-info p{margin:0 0 18px;color:#8f959e;font-size:13px;line-height:1.8;}
.qr-info .steps{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.qr-info .steps li{display:flex;gap:9px;color:#5c636b;font-size:12.5px;}
.qr-info .steps b{width:19px;height:19px;border-radius:50%;background:var(--blue-weak);color:var(--blue);font-size:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px;}
.qr-info .btns{display:flex;gap:10px;}
.phone-side .panel{padding:20px;}
.phone-side h3{margin:0 0 12px;font-size:15px;}

/* ---------- footer ---------- */
.p-footer{border-top:1px solid #e9edf3;margin-top:30px;padding:24px 20px 30px;text-align:center;color:#a2a8b1;font-size:11.5px;line-height:1.9;}
.p-footer b{color:#7a818b;font-weight:600;}

@media (max-width:1080px){
  .p-nav{display:none;}
  .card-grid{grid-template-columns:repeat(4,1fr);}
  .list-grid{grid-template-columns:repeat(3,1fr);}
  .detail-layout{grid-template-columns:1fr;}
  .detail-side{position:static;}
}
@media (max-width:820px){
  .p-top-in{gap:12px;}
  .p-search{width:auto;flex:1 1 90px;min-width:0;max-width:240px;margin-left:auto;}
  .p-user span{display:none;}
  .p-downloads .p-dl span{display:none;}
  .p-downloads .p-dl{padding:0 8px;}
  .detail-hero-in{padding:24px 22px;gap:16px;}
  .detail-icon{width:88px;height:88px;border-radius:16px;}
  .detail-head h1{font-size:23px;}
  .card-grid{grid-template-columns:repeat(3,1fr);}
  .list-grid{grid-template-columns:repeat(2,1fr);}
  .rank-line{grid-template-columns:44px 48px 1fr 90px;padding:13px 16px;gap:10px;}
  .rank-line .rk-cat,.rank-line .rk-hot{display:none;}
  .rank-line .btn{grid-column:4;}
  .play-wrap{grid-template-columns:1fr;}
  .phone-wrap{grid-template-columns:1fr;}
  .qr-card{flex-direction:column;align-items:flex-start;gap:22px;padding:26px;}
  .profile-head{padding:24px;}
  .profile-stats{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .page{padding:18px 14px 46px;}
  .p-top-in{padding:0 14px;height:60px;}
  .logo em{display:none;}
  .logo .flash{font-size:21px;}.logo .cn{font-size:20px;}
  .p-search{height:34px;padding-left:11px;}
  .p-search button{display:none;}
  .detail-hero-in{flex-direction:column;align-items:flex-start;}
  .detail-actions{width:100%;}
  .detail-actions .btn{flex:1;padding:0 12px;}
  .meta-grid{grid-template-columns:1fr 1fr;}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:11px;}
  .game-card{padding:11px;}
  .game-card img{width:44px;height:44px;}
  .list-head{padding:20px;}
  .list-head h1{font-size:20px;}
  .qr-info h1{font-size:20px;}
  .qr-box{width:200px;height:200px;}
}

/* ---------- small fixes ---------- */
.game-card .ph,.history-row .ph{display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,#5aa5ff,#2f7cff);color:#fff;font-weight:800;flex:0 0 auto;}
.game-card .ph{width:52px;height:52px;font-size:20px;}
.history-row .ph{width:46px;height:46px;border-radius:10px;font-size:18px;}
.pagerbar a{min-width:34px;height:34px;padding:0 10px;border-radius:8px;border:1px solid #e3e7ee;background:#fff;color:#5c636d;font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;}
.pagerbar a.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;}
.pagerbar a:hover{border-color:#bcd7ff;color:var(--blue);}
.rank-line{cursor:pointer;}
.rank-line .rank-no:empty{display:block;}
.list-head .detail-icon{width:64px;height:64px;border-radius:14px;flex:0 0 auto;}
.p-toast{position:fixed;left:50%;bottom:40px;transform:translate(-50%,14px);background:rgba(24,32,48,.92);color:#fff;font-size:13px;padding:10px 20px;border-radius:22px;opacity:0;pointer-events:none;transition:.25s;z-index:90;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:90vw;text-align:center;}
.p-toast.show{opacity:1;transform:translate(-50%,0);}
.detail-block p + p{margin-top:10px;}
@media (max-width:520px){
  .history-row{flex-wrap:wrap;gap:10px;}
  .history-row time{display:none;}
}
@media (max-width:520px){
  .detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
  .detail-actions .btn{width:100%;padding:0 6px;font-size:12.5px;white-space:nowrap;}
}
@media (max-width:520px){
  .profile-head{padding:20px;gap:14px;align-items:flex-start;flex-wrap:wrap;}
  .profile-avatar{width:60px;height:60px;font-size:24px;}
  .profile-head h1{font-size:20px;}
  .profile-head .logout{margin-left:0;height:34px;padding:0 14px;font-size:12px;white-space:nowrap;}
  .profile-stats{grid-template-columns:repeat(3,1fr);gap:9px;}
  .profile-stats .panel{padding:13px 10px;flex-direction:column;align-items:flex-start;gap:4px;}
  .profile-stats .num{font-size:22px;}
  .profile-stats span{font-size:10.5px;line-height:1.4;}
}

/* ---------- category page shell ---------- */
.shell-page{background:#fff;}
.cat-layout{display:block;padding-top:0;}
.login-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#5aa5ff,#2f7cff);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto;overflow:hidden;}
.login-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.cat-hero{position:relative;border-radius:10px;overflow:hidden;margin:2px 0 0;background:linear-gradient(110deg,var(--cat-b),var(--cat-c));box-shadow:0 10px 26px rgba(58,80,130,.12);}
.cat-hero-deco{position:absolute;inset:0;background:
  radial-gradient(circle at 12% 40%,rgba(255,255,255,.28),transparent 34%),
  radial-gradient(circle at 88% 20%,rgba(255,255,255,.2),transparent 30%),
  repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 44px);}
.cat-hero-deco::after{content:"";position:absolute;right:-60px;bottom:-80px;width:280px;height:280px;border:22px solid rgba(255,255,255,.1);border-radius:50%;}
.cat-theme-web{--cat-a:#e78213;--cat-b:#f19a28;--cat-c:#f8c464;}
.cat-theme-mini{--cat-a:#1f6fe0;--cat-b:#2f8bfd;--cat-c:#7fc0ff;}
.cat-theme-app{--cat-a:#5b46c9;--cat-b:#7a5cff;--cat-c:#b9a2ff;}
.cat-theme-casual,.cat-theme-flash{--cat-a:#0f8f68;--cat-b:#28b487;--cat-c:#8fe0bb;}
.cat-theme-legend,.cat-theme-large{--cat-a:#c33b1d;--cat-b:#e0502f;--cat-c:#f39a72;}
.cat-theme-wuxia{--cat-a:#14707f;--cat-b:#1f8ea3;--cat-c:#7ad4cd;}
.cat-theme-chess{--cat-a:#7a4d24;--cat-b:#9a6a3c;--cat-c:#d3aa78;}
.cat-theme-new{--cat-a:#cf3f72;--cat-b:#e05a8a;--cat-c:#ffa3bf;}
.cat-theme-all{--cat-a:#2b4b8f;--cat-b:#3c5f9e;--cat-c:#7f9dd1;}
.cat-hero-in{position:relative;padding:26px 40px 30px;text-align:center;color:#fff;}
.cat-kicker{display:block;font-size:10px;letter-spacing:5px;font-weight:700;color:rgba(255,255,255,.75);margin-bottom:7px;}
.cat-hero h1{margin:0;font-size:33px;letter-spacing:2px;text-shadow:0 3px 12px rgba(80,45,0,.18);}
.cat-hero h1 em,.cat-hero h1 strong{font-style:normal;font-size:33px;font-weight:700;margin-left:8px;letter-spacing:3px;}
.cat-hero h1 strong{margin-left:6px;}
.cat-hero p{position:relative;margin:9px 0 0;font-size:12px;color:rgba(255,255,255,.82);}
.cat-tabs{position:relative;display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;background:rgba(255,255,255,.97);padding:13px 22px;border-top:1px solid rgba(255,255,255,.5);}
.cat-tabs a{color:#5c636d;font-size:13.5px;padding:2px 0;position:relative;white-space:nowrap;transition:.15s;}
.cat-tabs a:hover{color:var(--cat-a);}
.cat-tabs a.on{color:var(--cat-a);font-weight:700;}
.cat-tabs a.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;width:26px;height:2px;border-radius:2px;background:var(--cat-a);}
.cat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px 6px;}
.cat-sorts{display:flex;align-items:center;gap:26px;}
.cat-sorts a{position:relative;color:#6d737c;font-size:13.5px;padding:0 0 8px;}
.cat-sorts a:hover{color:var(--blue);}
.cat-sorts a.on{color:#2f333a;font-weight:700;}
.cat-sorts a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--blue);}
.cat-total{color:#aab0b9;font-size:12px;}
.cat-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;row-gap:2px;padding:6px 4px 8px;}
.cat-row{display:flex;align-items:center;gap:14px;padding:12px 10px;border-radius:9px;cursor:pointer;transition:.15s;outline:none;}
.cat-row:hover,.cat-row:focus-visible{background:#f7fafe;}
.cat-icon{width:56px;height:56px;border-radius:12px;object-fit:cover;box-shadow:0 4px 12px rgba(20,40,80,.16);flex:0 0 auto;background:#eef3fb;}
.cat-icon.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#5aa5ff,#2f7cff);color:#fff;font-size:20px;font-weight:800;}
.cat-info{flex:1;min-width:0;}
.cat-info b{display:block;font-size:14.5px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cat-info p{margin:0 0 5px;color:#9aa1ab;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cat-info span{color:#b3b8c1;font-size:11px;}
.cat-play{flex:0 0 auto;height:34px;line-height:32px;padding:0 20px;border-radius:18px;border:1px solid #e2e6ed;background:#fff;color:#5c636d;font-size:12.5px;transition:.16s;}
.cat-play:hover{border-color:#9cc6ff;color:var(--blue);background:#f5faff;}
.cat-empty{margin:18px 0 30px;}
.cat-pager{margin:22px 0 34px;}
@media (max-width:1180px){
  .cat-list{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:860px){
  .cat-hero h1,.cat-hero h1 em,.cat-hero h1 strong{font-size:26px;}
  .cat-tabs{gap:22px;justify-content:flex-start;padding:12px 18px;overflow-x:auto;flex-wrap:nowrap;}
  .cat-tabs a{padding-bottom:0;}
  .cat-tabs a.on::after{bottom:-11px;}
}
@media (max-width:720px){
  .cat-list{grid-template-columns:1fr;column-gap:0;}
  .cat-hero-in{padding:22px 18px 24px;}
  .cat-hero h1,.cat-hero h1 em,.cat-hero h1 strong{font-size:22px;letter-spacing:1px;}
  .cat-hero p{display:none;}
  .cat-toolbar{padding-top:16px;}
  .cat-sorts{gap:18px;}
  .cat-row{padding:10px 6px;}
}
@media (max-width:560px){
  .cat-play{padding:0 14px;}
  .cat-info b{font-size:13.5px;}
}
.cat-row{padding:15px 10px;}
.cat-info b{font-size:15px;}
.cat-info p{font-size:12px;}

/* game gallery + qr image */
.detail-shots{margin-top:22px;padding:20px 22px;}
.shots-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;}
.shots-head h3{margin:0;font-size:15px;}
.shots-head span{font-size:11.5px;color:#9aa1ab;}
.shots-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
.shot-item{position:relative;padding:0;border:0;border-radius:10px;overflow:hidden;background:#eef2f8;aspect-ratio:715/1280;cursor:zoom-in;box-shadow:0 4px 14px rgba(20,40,80,.1);}
.shot-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s;}
.shot-item:hover img{transform:scale(1.04);}
.shot-view{position:fixed;inset:0;z-index:200;background:rgba(9,17,32,.86);display:flex;align-items:center;justify-content:center;padding:40px;opacity:0;pointer-events:none;transition:opacity .2s;}
.shot-view.show{opacity:1;pointer-events:auto;}
.shot-view img{max-width:min(92vw,760px);max-height:90vh;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.5);}
.shot-view button{position:absolute;top:22px;right:28px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:22px;line-height:1;cursor:pointer;}
.shot-view button:hover{background:rgba(255,255,255,.3);}
.qr-img{width:100%;height:100%;object-fit:contain;display:block;border-radius:8px;background:#fff;}
@media (max-width:900px){.shots-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:700px){.shots-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:480px){.detail-shots{padding:16px;}.shots-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}}

/* player account / real-name */
.auth-tabs{display:flex;gap:8px;background:#f4f6fa;border-radius:10px;padding:4px;margin-bottom:20px;}
.auth-tabs button{flex:1;height:36px;border:0;border-radius:8px;background:transparent;color:#6b727c;font-size:13px;font-weight:600;cursor:pointer;transition:.18s;}
.auth-tabs button.on{background:#fff;color:#2f8bfd;box-shadow:0 3px 10px rgba(24,52,110,.1);}
.auth-consent{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:#6b727c;line-height:1.6;margin:4px 0 14px;cursor:pointer;}
.auth-consent input{margin-top:2px;accent-color:#2f8bfd;}
.auth-verified{font-size:12.5px;color:#2f8bfd;background:#eef5ff;border-radius:99px;display:inline-block;padding:5px 12px;margin:0 0 18px;}
.link-btn{border:0;background:none;color:#8f959e;font-size:12px;cursor:pointer;padding:0;}
.real-panel{margin-top:20px;padding:22px 24px;}
.real-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.real-head>div{display:flex;align-items:center;gap:10px;font-size:15px;}
.real-head b{font-size:15px;}
.real-ok,.real-wait{font-size:11.5px;border-radius:99px;padding:3px 10px;font-weight:600;}
.real-ok{color:#0a8f5b;background:#e8f8f0;}
.real-wait{color:#c97a00;background:#fff5e5;}
.real-panel .meta-grid{margin-top:16px;}
.real-tip{font-size:12px;color:#8f959e;line-height:1.8;margin:12px 0 0;}
@media (max-width:640px){.real-panel{padding:18px;}}

.real-form{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin-top:16px;}
.real-form .auth-consent{margin:0 0 8px;}
.real-form-foot{grid-column:1/-1;margin-bottom:4px;}
@media (max-width:640px){.real-form{grid-template-columns:1fr;}}

/* video play overlay */
.video-player{position:relative;border-radius:10px;overflow:hidden;background:#0b1220;}
.video-player video{display:block;width:100%;max-height:540px;background:#0b1220;}
.video-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:0;background:rgba(7,16,30,.34);color:#fff;cursor:pointer;transition:opacity .2s,visibility .2s;backdrop-filter:blur(1px);}
.video-play:hover{background:rgba(7,16,30,.46);}
.video-play-ico{display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.94);color:#1f6fe0;box-shadow:0 12px 30px rgba(0,0,0,.28);transition:transform .18s;}
.video-play:hover .video-play-ico{transform:scale(1.06);}
.video-play b{font-size:15px;letter-spacing:.5px;}
.video-play small{font-size:11.5px;color:rgba(255,255,255,.72);}
.video-player.playing .video-play{opacity:0;visibility:hidden;pointer-events:none;}
@media (max-width:560px){
  .video-play-ico{width:56px;height:56px;}
  .video-play b{font-size:13.5px;}
}