[hidden]{display:none!important}
html{background:#000}
body{margin:0;background:#000;color:#91969f}
button,input,select,textarea{font:inherit}
.page-splash .yt-facade{position:relative;overflow:hidden;text-decoration:none;background:#081216;align-items:center;justify-content:center}
.page-splash .yt-poster{width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.page-splash .yt-facade:hover .yt-poster{filter:brightness(.9)}
.page-splash .yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid #6de5e8;border-radius:50%;width:55px;height:55px;display:flex;align-items:center;justify-content:center;color:#7bedef;font-size:22px;padding-left:4px}
.page-splash .yt-facade-label{position:absolute;top:67%;left:0;right:0;color:#f0f0f0;font-size:12px;text-align:center}
.page-splash .site-hero-title{box-sizing:border-box;height:121px;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:0 7px;text-align:right;text-shadow:0 2px 4px #000}
.page-splash .site-hero-title>span{color:#c6d9dc;font-size:13px;font-weight:700;letter-spacing:.31em}
.page-splash .site-hero-title strong{color:#f5f6f4;font-family:Impact,'Arial Narrow',sans-serif;font-size:53px;font-weight:800;line-height:1.07;letter-spacing:.025em}
.page-splash .site-hero-title strong b{color:#76d9db;font-weight:inherit}
.page-splash .site-hero-title em{color:#d1e2e4;font-size:14px;font-style:normal;font-weight:700;letter-spacing:.3em}
.page-splash .site-news{box-sizing:border-box;height:205px;padding:13px 17px 9px;border-bottom:2px solid #1e5963;background:linear-gradient(#11191e,#030708)}
.page-splash .site-news-heading{display:flex;align-items:baseline;gap:10px;text-align:left;color:#8fe5e6;font-size:14px;font-weight:800;letter-spacing:.18em}
.page-splash .site-news-heading small{color:#758f97;font-size:10px;letter-spacing:.15em}
.page-splash .site-news ul{height:150px;padding:0;overflow:hidden}
.page-splash .site-news li{float:none;padding:8px 0 0;text-align:left}
.page-splash .site-news li time{color:#7a969d;font-size:11px}
.page-splash .site-news li h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;padding:0;margin:4px 0 5px;color:#ebf3f3;font-size:19px;font-weight:500;line-height:1.2}
.page-splash .site-news li p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;padding:0;margin:0;color:#a9bac0;font-size:12px;line-height:1.45}
.page-splash .site-news li.site-news-empty{padding-top:30px;color:#a9bac0;font-size:13px}
.page-splash .site-news .news-btn{position:absolute;right:8px;bottom:3px}
.page-splash .site-news .news-btn button{width:13px;height:13px;margin:4px;background:#7d8b90;border:1px solid #a1afb2;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.page-splash .site-news .news-btn button.now{background:#35d7dc;border-color:#35d7dc}
.trailer-dialog{box-sizing:border-box;width:min(920px,calc(100vw - 28px));max-width:none;max-height:calc(100vh - 28px);padding:0;border:1px solid #5ebec8;background:#08151b;color:#e7f1f2;box-shadow:0 15px 60px #000b}
.trailer-dialog::backdrop{background:#000c}
.trailer-dialog-inner{position:relative;padding:21px 21px 10px}
.trailer-media{aspect-ratio:16/9;background:#000}
.trailer-media iframe{display:block;width:100%;height:100%;border:0}
.trailer-dialog p{margin:10px 0 2px;color:#a8c4ca;font-size:13px}
.trailer-close{position:absolute;z-index:1;top:4px;right:4px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #5a8790;background:#0b252d;color:#fff;cursor:pointer;font-size:25px;line-height:1}
.trailer-close:hover{background:#1b7180}
.page-splash .news-btn button{border:0;background-color:transparent;cursor:pointer;padding:0;background-position:-434px -17px;width:14px;height:14px;margin:8px;display:inline-block}
.page-splash .news-btn button.now{background-position:-434px 0}
.page-splash .news-list li[hidden]{display:none}
.page-splash .act_link{color:#9dcdd5;font-size:13px;text-decoration:none}
.page-splash .act_link:hover{color:#fff}
.page-splash .social-bar{display:flex;align-items:center;justify-content:center;gap:19px;flex-wrap:wrap;color:#99a6aa}
.page-splash .social-bar a{color:#a9cbd0;text-decoration:none}
.page-splash .social-bar a:hover{color:#72e2e7}
.community-ribbon{background:linear-gradient(180deg,#020b10f2,#10232af2),url('/assets/ossweb-img.qq.com/images/codo/act/a20131021index/bg.jpg') center 79% / cover no-repeat;border-bottom:1px solid #31515b;color:#dbeaec;padding:26px 20px}
.ribbon-inner{max-width:1000px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:25px}
.ribbon-kicker{color:#59cbd5;font-size:11px;letter-spacing:.3em}
.ribbon-inner h2{color:#f4f5f6;font-size:24px;margin:4px 0}
.ribbon-stats{display:flex;gap:25px}
.ribbon-stats .ribbon-stat strong{display:block;color:#fff;font-size:22px}
.ribbon-stats .ribbon-stat span{font-size:12px;color:#91adb5}
.ribbon-link{display:inline-block;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%,0 7px);border:1px solid #557d87;background:linear-gradient(#3b515a,#1c343d 56%,#10262d);padding:11px 18px;color:#e8f3f3!important;text-decoration:none!important;white-space:nowrap;font-weight:600}
.ribbon-link:hover,.ribbon-link:focus-visible{background:linear-gradient(#86dedb,#299ba7 55%,#17616e);color:#07171b!important}
.page-interior .site-top-links{display:flex;gap:8px;align-items:center;justify-content:flex-end;height:100%;padding-right:0}
.page-interior .site-top-links a{display:block;padding:11px 18px;border:1px solid #315663;background:linear-gradient(#162c35,#090f14);color:#d7e3e6;text-decoration:none;font-size:14px}
.page-interior .site-top-links a:hover{background:linear-gradient(#66cacc,#158393);color:#081116}
.page-interior .main-in{max-width:1000px;margin:0 auto}
.page-interior .form-result{margin:16px auto 0;color:#15424b;line-height:1.5;max-width:455px;word-break:break-word}
.page-interior .form-result.error{color:#a22626}
.page-interior .form-result a{color:#087f8d}
.page-interior .account-switch{margin:14px 0 0;text-align:center}
.page-interior .account-switch a{color:#008a9a}
.page-download .download-login-form{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.page-download .download-login-form input{width:160px;height:40px;padding:0 10px;border:1px solid #b8b8b8;background:#fff;box-sizing:border-box}
.page-download .download-login-form button{height:40px;padding:0 17px;border:0;background:#009aab;color:white;cursor:pointer}
.page-download .download-login-form a{color:#c08244;text-decoration:none}
.page-download .download-account{display:flex;align-items:center;gap:12px;color:#17414c;font-weight:bold}
.page-download .download-account button{border:0;background:#315663;color:white;padding:7px 12px;cursor:pointer}
.page-download .login-bar{min-height:80px}
.page-download .login-bar p{margin:6px 0 0}
.page-download .down-info .client{width:100%;float:none;padding-bottom:15px}
.page-download .client ul{margin-top:8px}
.page-download .client li{overflow-wrap:anywhere}
.page-download .client .btn-list{margin-top:8px}
.page-download #download-action{display:inline-flex;align-items:center;justify-content:center;min-width:190px;height:45px;padding:0 14px;box-sizing:border-box;background:linear-gradient(#7fd5d5,#167e88);color:#fff;text-decoration:none;font-weight:bold}
.page-download #download-action[aria-disabled=true]{background:linear-gradient(#aeb7b8,#777f81);cursor:not-allowed}
.page-download .dl-locked-note{color:#ad7141;margin:6px 0 0}
.page-download .download-caveat{font-size:12px;color:#666;clear:both}
.page-download .con-right .download-community{display:grid;gap:2px;margin:12px}
.page-download .con-right .table-p{width:calc(100% - 22px);margin:8px 11px 16px;border-collapse:collapse;table-layout:fixed}
.page-download .con-right .table-p th{width:52px;padding:6px 5px;color:#75858b;text-align:left;font-weight:normal;vertical-align:top;overflow-wrap:normal}
.page-download .con-right .table-p td{padding:6px 3px;color:#e0e2e2;line-height:1.5;vertical-align:top;overflow-wrap:anywhere}
.page-download .download-community a{display:block;color:#9bd4d8;text-decoration:none;padding:10px;background:#14262d}
.page-interior.page-community .content{background:#e8e8e8;color:#27343a;padding:24px;min-height:360px;box-sizing:border-box}
.page-interior.page-community .main{min-height:650px}
.page-community .community-summary{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.page-community .summary-cell{background:#d5e0e3;border-left:3px solid #099aac;padding:12px 16px;min-width:130px}
.page-community .summary-cell strong{display:block;color:#172c35;font-size:21px}
.page-community .summary-cell span{font-size:12px;color:#516b73}
.page-community .leaderboard-toolbar{display:flex;gap:12px;align-items:end;margin-bottom:16px}
.page-community .leaderboard-toolbar label{flex:1;font-weight:bold}
.page-community .leaderboard-toolbar label:last-child{flex:0 0 190px}
.page-community .leaderboard-toolbar label span{display:inline-block;margin-bottom:5px}
.page-community .leaderboard-toolbar input,.page-community .leaderboard-toolbar select,.page-community input,.page-community textarea,.page-community select{width:100%;padding:10px;border:1px solid #aab8bb;background:#fff;color:#213037;box-sizing:border-box}
.page-community .table-scroll{overflow-x:auto}
.page-community .data-table{width:100%;min-width:620px;border-collapse:collapse}
.page-community .data-table th{text-align:left;background:#182d35;color:#d6eff0;font-size:12px;padding:11px}
.page-community .data-table td{padding:11px;border-bottom:1px solid #beced2}
.page-community .data-table a{color:#087d8b;text-decoration:none;font-weight:bold}
.page-community .pager{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:18px}
.page-community .pager button,.page-community .admin-grid button{border:0;background:#009aaa;color:#fff;padding:9px 16px;cursor:pointer}
.page-community .pager button:disabled{opacity:.4;cursor:default}
.page-community .profile-heading{font-size:24px;color:#172d35;margin-bottom:5px}
.page-community .profile-id{font-size:12px;color:#718289}
.page-community .profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:25px}
.page-community .profile-grid .summary-cell{min-width:0}
.page-community .admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.page-community .admin-grid section{background:#d6dfe1;padding:18px}
.page-community .admin-grid h2,.page-community .notice-history h2{font-size:20px;color:#20343a;margin:0 0 15px}
.page-community .admin-grid form{display:grid;gap:13px}
.page-community .admin-grid label{font-weight:bold;display:grid;gap:5px}
.page-community .notice-history{margin-top:24px}
.page-community .account-admin{margin-top:24px}
.page-community .account-admin h2{font-size:20px;color:#20343a;margin:0 0 15px}
.page-community .account-table th,.page-community .account-table td{text-align:left}
.page-community .account-table button{border:1px solid #338e98;background:#e3f1f1;color:#086d78;padding:7px 11px;cursor:pointer;font-size:12px}
.page-community .account-table button:hover{background:#c8ebeb}
.page-community .account-table button:disabled{opacity:.5;cursor:default}
.page-community .site-news-form{display:grid;gap:12px;padding:18px;background:#d6dfe1;text-align:left}
.page-community .site-news-fields{display:grid;grid-template-columns:1fr;gap:12px}
.page-community .site-news-fields label{display:grid;gap:5px;font-size:13px;font-weight:600}
.page-community .site-news-form>button,.page-community .site-news-admin-item button{justify-self:start;padding:9px 15px;border:1px solid #319ea8;background:linear-gradient(#4ec5c9,#078e9e);color:#fff;cursor:pointer;font-size:13px;font-weight:600}
.page-community .site-news-admin-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 3px;border-bottom:1px solid #b6c9cc;text-align:left}
.page-community .site-news-admin-item small{display:block;margin-top:4px;color:#6a7e84}
.page-community .site-news-admin-item button{white-space:nowrap}
.page-community .site-news-admin-item button:disabled{opacity:.55;cursor:default}
.page-community .account-overview{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:220px;padding:24px 28px;border-left:4px solid #0aa4ae;background:#d8e3e5;text-align:left}
.page-community .account-overview small{color:#278b98;letter-spacing:.2em;font-weight:700}
.page-community .account-overview h2{margin:7px 0 12px;color:#18353d;font-size:31px;font-weight:500}
.page-community .account-overview p{margin:5px 0;color:#52686d}
.page-community .notice-item{border-top:1px solid #afc5c9;padding:10px 0}
#site-footer{clear:both;background:#000;color:#9da7a9;text-align:center;border-top:1px solid #1b2d34;padding:25px 12px;font-size:12px}
#site-footer a{color:#b7c5c8;text-decoration:none}
#site-footer .legal{font-size:10px;color:#768388}
@media(max-width:700px){
  .page-splash .wap{min-height:0}
  .page-splash .main{padding-bottom:20px}
  .page-splash .yt-facade-label{top:75%}
  .page-splash .site-hero-title{align-items:center;text-align:center}
  .page-splash .site-hero-title strong{font-size:clamp(34px,10vw,53px)}
  .page-splash .site-news{height:205px;padding:13px 16px 9px}
  .page-splash .site-news ul{height:150px}
  .page-community .site-news-fields{grid-template-columns:1fr}
  .trailer-dialog-inner{padding:18px 10px 8px}
  .ribbon-inner{display:grid;text-align:center;justify-items:center}
  .ribbon-stats{justify-content:center;flex-wrap:wrap}
  .page-interior .site-top-links{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding-top:10px}
  .page-interior .site-top-links a{text-align:center;padding:10px 6px}
  .page-download .download-login-form{display:grid;grid-template-columns:1fr 1fr}
  .page-download .download-login-form input{width:100%}
  .page-download .con-left,.page-download .con-right{width:auto;float:none}
  .page-community .leaderboard-toolbar,.page-community .admin-grid{display:grid;grid-template-columns:1fr}
  .page-community .leaderboard-toolbar label:last-child{flex:auto}
  .page-community .profile-grid{grid-template-columns:repeat(2,1fr)}
}

/* Shared 2013-style navigation and readable page titles. */
.page-splash .nav-in li a.nav-text{width:158px;letter-spacing:1px}
.page-splash .nav-in li a.auth-nav-link:before{background:linear-gradient(#275a63,#17343d 55%,#0c2028)}
.page-splash .nav-in li a[aria-current=page]:before{background:linear-gradient(#63c8ca,#258a94 55%,#15505c)}
.page-interior .wap{height:auto;min-height:826px;min-width:0;overflow:visible}
.page-interior .main{height:auto;min-height:769px;background-color:#0b1e25;background-image:linear-gradient(to bottom,transparent 0,transparent 430px,#0b1e25 769px,#0b1e25 100%),url('/assets/ossweb-img.qq.com/images/codo/201304/in_bg_1.jpg');background-position:top center,top center;background-repeat:no-repeat,no-repeat;background-size:100% 100%,auto 769px}
.page-interior .top-bar,.page-interior .main-in{width:min(1000px,calc(100% - 32px))}
.page-interior .top-bar{display:flex;align-items:center;justify-content:space-between}
.page-interior .site-top-links{height:auto;flex:1;gap:6px}
.page-interior .site-top-links a{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:105px;height:44px;padding:7px 11px;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%,0 7px);background:linear-gradient(#38464e,#1d2b32 56%,#0d171d);border:1px solid #42616d;color:#e5eeee;font-size:13px;font-weight:600;letter-spacing:.05em;text-shadow:0 1px #000}
.page-interior .site-top-links a.auth-nav-link{background:linear-gradient(#306c74,#1a424c 56%,#11262e);border-color:#53949c}
.page-interior .site-top-links a[aria-current=page],.page-interior .site-top-links a:hover{background:linear-gradient(#86dedb,#299ba7 55%,#17616e);color:#07171b;text-shadow:none}
.page-interior .current{display:flex;align-items:center;height:74px;padding-bottom:0;line-height:1}
.page-interior .current .link-back{display:inline-flex;align-items:center;flex:0 0 auto;height:56px;line-height:56px}
.page-interior .current h1{display:inline-flex;align-items:baseline;gap:11px;margin-left:12px;font-size:32px;line-height:1.2;color:#78e6e3}
.page-interior .current h1>span.lang-zh,.page-interior .current h1>span.lang-en{color:#78e6e3;font-size:inherit;padding-left:0}
.page-interior .current h1>span:last-child{color:#d0dddf;font-size:13px;letter-spacing:.12em;padding-left:0}
.page-interior input,.page-interior select,.page-interior textarea{font-family:inherit;font-size:14px;font-weight:400}
.page-interior button{font-family:inherit;font-weight:600}
.page-signup .signup-btn{width:100%;color:#fff;background:linear-gradient(#55c8cb,#0d9aa9 55%,#087282);border:1px solid #5acdd0;box-shadow:inset 0 1px #a1e7e8;font-size:15px;font-weight:600}
.page-signup .signup-btn:hover,.page-signup .signup-btn:focus-visible{color:#071d23;background:linear-gradient(#a3ebea,#41c2c8 55%,#2195a1)}
.page-signup .signup-form{margin-top:14px}
.page-signup .signup-intro{margin-bottom:8px}
.page-signup #signin-form{margin-top:22px}
.page-signup#signin-page .content{min-height:430px}

/* Keep the download content balanced with a single available package. */
.page-download .content{display:grid;grid-template-columns:minmax(0,1fr) 240px;height:auto;min-height:480px}
.page-download .con-left,.page-download .con-right{float:none;width:auto;height:auto;min-width:0}
.page-download .down-info{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(210px,.85fr);gap:16px 22px;padding:18px 20px;text-align:left}
.page-download .down-info .client{float:none;width:auto;padding:0}
.page-download .down-info .client h3,.page-download .download-help h3{padding:0;margin:0 0 12px;font-size:18px;font-weight:500}
.page-download .down-info .client ul{padding:0;margin:0 0 14px}
.page-download .down-info .client li{line-height:1.8}
.page-download .client .btn-list{margin:12px 0 0}
.page-download #download-action{margin:0;min-width:205px;border:1px solid #419ca3;box-shadow:inset 0 1px #9be4e5}
.page-download .download-help{background:#e3e9ea;border-left:3px solid #0aa3ae;padding:16px 18px;color:#374c51;line-height:1.6}
.page-download .download-help h3{color:#1a3941}
.page-download .download-help ol{margin:0 0 12px;padding-left:20px}
.page-download .download-help li{margin-bottom:7px}
.page-download .download-help a{color:#087e8c;font-weight:600}
.page-download .download-caveat{grid-column:1/-1;margin:0;border-top:1px solid #c9d0d1;padding:12px 0 0!important}
.page-download .text-info p{padding:14px 20px 25px}
.page-download .download-login-form button{background:linear-gradient(#5bcccf,#008e9e);border:1px solid #0a8999;font-weight:600}
.page-download .download-login-form button:hover{background:linear-gradient(#95e5e4,#2db3bd);color:#09222a}

/* Rankings and operator controls use the same type and button rhythm. */
.page-community .community-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.page-community .summary-cell{min-width:0;text-align:left}
.page-community .leaderboard-toolbar{align-items:end;text-align:left}
.page-community .leaderboard-toolbar label{font-size:13px;font-weight:500;color:#2a4147}
.page-community .leaderboard-toolbar input,.page-community .leaderboard-toolbar select{font-weight:400}
.page-community .leaderboard-note{margin:0 0 12px;color:#63797e;font-size:12px;line-height:1.5;text-align:left}
.page-community #leaderboard-result>p{margin:10px 0 0;padding:35px 15px;border:1px solid #c4d1d3;background:#f0f3f3;color:#60777d;text-align:center}
.page-community .pager button,.page-community .admin-grid button{min-height:39px;background:linear-gradient(#4ec5c9,#078e9e);border:1px solid #319ea8;color:#fff;font-size:13px}
.page-community .pager button:disabled{background:#b8c9cb;border-color:#b8c9cb;color:#f4f7f7;opacity:1}
.page-community .pager button:not(:disabled):hover,.page-community .admin-grid button:hover{background:linear-gradient(#8ae0df,#2aaeb9);color:#0a252b}

@media(max-width:760px){
  .page-interior .top-bar{height:auto;min-height:100px;display:grid;grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:8px;margin:0 auto;padding:10px 0 14px}
  .page-interior .top-bar .logo{float:none;justify-self:center;margin:0}
  .page-interior .site-top-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-self:stretch;width:100%;gap:6px;padding:0}
  .page-interior .site-top-links a{min-width:0;width:100%;min-height:43px;height:auto;text-align:center}
  .page-interior .site-top-links a.nav-wide{grid-column:1/-1}
  .page-interior .current{height:auto;min-height:78px;flex-wrap:wrap;gap:6px;padding:12px 0}
  .page-interior .current h1{margin:0;font-size:26px}
  .page-interior .current h1>span:last-child{font-size:11px}
  .page-interior .main{min-height:0;padding-bottom:38px}
  .page-signup#signin-page .content{min-height:0}
  .page-interior .content{height:auto}
  .page-download .content{display:block}
  .page-download .con-right{padding-bottom:16px}
  .page-download .down-info{grid-template-columns:1fr}
  .page-download .download-caveat{grid-column:1}
  .page-download .download-help{max-width:none}
  .page-community .community-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-community .summary-cell{padding:10px}
  .page-community .summary-cell strong{font-size:18px}
  .page-community .leaderboard-toolbar{display:grid;grid-template-columns:1fr}
  .page-community .account-overview{display:grid;padding:20px;min-height:0}
}
@media(max-width:480px){
  .page-splash .nav-in li{flex:1 1 100%}
  .page-splash .nav-in li a.nav-text{width:100%;height:auto;min-height:48px;line-height:1.3;padding:13px 30px 13px 12px}
  .page-interior .main-in,.page-interior .top-bar{width:calc(100% - 24px)}
  .page-interior .current h1{font-size:24px}
  .page-community .community-summary{grid-template-columns:1fr}
  #leaderboards-page .community-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  #leaderboards-page .summary-cell{padding:9px 6px}
  #leaderboards-page .summary-cell strong{font-size:15px;white-space:nowrap}
  #leaderboards-page .summary-cell span{font-size:10px;line-height:1.25}
  .page-community .profile-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .lang-toggle{position:absolute;top:8px;right:12px;bottom:auto}
}

/* The splash uses the original campaign lettering, without the expired date ribbon. */
.page-splash .wap{border-bottom:2px solid #58b5c0}
.page-splash .original-hero-title{height:121px;display:flex;align-items:center;justify-content:center}
.page-splash .original-title-crop{display:block;width:426px;max-width:100%;height:82px;overflow:hidden}
.page-splash .original-title-crop img{display:block;width:426px;max-width:100%;height:auto}
.page-splash .yt-facade{display:block;position:relative;width:100%;height:100%;padding:0;border:0;overflow:hidden;cursor:pointer}
.page-splash .yt-facade-label{display:none}
.page-splash .yt-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;filter:brightness(.78);transition:filter .16s ease}
.page-splash .yt-facade:hover .yt-poster,.page-splash .yt-facade:focus-visible .yt-poster{filter:brightness(.88)}
.page-splash .yt-play{box-sizing:border-box;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:58px;height:58px;padding:0;border:2px solid #89eef0;border-radius:50%;background:#071b23c9;color:transparent;box-shadow:0 0 0 4px #0008;font-size:0;pointer-events:none;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
.page-splash .yt-play::before{content:'';display:block;width:0;height:0;margin-left:4px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #fff}
.page-splash .yt-facade:hover .yt-play,.page-splash .yt-facade:focus-visible .yt-play{transform:translate(-50%,-50%);background:#0b4d58d9;border-color:#d0ffff;box-shadow:0 0 0 4px #0008,0 0 15px #60d6df88}
.page-splash .yt-facade:focus-visible{outline:2px solid #a9f4f2;outline-offset:2px}
.page-splash a.act_link:link,.page-splash a.act_link:visited{box-sizing:border-box;float:right;margin-top:12px;padding:9px 15px;border:1px solid #6aaab1;background:#102730;color:#e4f5f5;font-size:13px;font-weight:600;text-decoration:none}
.page-splash a.act_link:hover,.page-splash a.act_link:focus-visible{background:#278d99;color:#fff}
.page-splash a.act_link:after{content:none}

/* The account and ranking screens share the 2013 dark UI and the site's own art. */
.page-interior .wap{min-height:0}
.page-interior .current .link-back{background:none;padding:0 6px 0 0;font-size:14px;line-height:1.2;text-transform:uppercase}
.page-interior .current .link-back:before{content:'‹';display:inline-block;margin-right:7px;color:#78e6e3;font-size:28px;vertical-align:-2px}
.page-interior .current h1>span:last-child{display:none}
#account-page .main,#leaderboards-page .main,#player-page .main{min-height:560px}
#account-page .content,#leaderboards-page .content,#player-page .content{box-sizing:border-box;min-height:0;border:1px solid #42606b;background:#0b171c;color:#d9e8ea;text-align:left}
#account-page .content{padding:0}
#account-page .account-overview{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:32px;min-height:420px;padding:34px 42px;border:0;background:linear-gradient(90deg,#061117f0 0%,#061117bd 54%,#0713195c 100%),url('/assets/splash-bg.jpg') center 37% / cover no-repeat;color:#fff}
#account-page .account-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
#account-page .account-overview h2{margin:0;color:#fff;font-size:38px;font-weight:600;text-shadow:0 2px 4px #000}
#account-page .account-message{min-height:18px;margin:8px 0 0;color:#ffd0b8;font-size:13px}
#account-page #account-logout{flex:none;min-width:160px;min-height:47px;padding:11px 20px;border:1px solid #a7e9e9;background:linear-gradient(#8ee4e0,#32a7ae 58%,#187782);box-shadow:0 3px 12px #0008,inset 0 1px #d9ffff80;color:#061b21;cursor:pointer;font:700 14px Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase}
#account-page #account-logout:hover,#account-page #account-logout:focus-visible{background:linear-gradient(#c7ffff,#55c6c8 58%,#258d96);outline:2px solid #d1ffff;outline-offset:2px}
#account-page .account-rank{box-sizing:border-box;width:min(100%,700px);min-height:166px;padding:20px 24px;background:#07171de8;border:1px solid #557985;border-left:4px solid #55d8db;box-shadow:0 6px 20px #0007}
#account-page .rank-top,#account-page .rank-details{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
#account-page .rank-kicker{color:#8de2e4;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
#account-page .rank-top h3{margin:5px 0 15px;color:#fff;font-size:27px}
#account-page .rank-top strong{color:#fff;font-size:21px;white-space:nowrap}
#account-page .rank-top strong span{color:#9fd5d8;font-size:12px}
#account-page .rank-track{height:14px;background:#19333b;border:1px solid #426773;overflow:hidden}
#account-page .rank-track>span{display:block;height:100%;background:linear-gradient(90deg,#168a9a,#66d7d6);box-shadow:0 0 12px #54d5d3}
#account-page .rank-details{margin-top:10px;color:#d8ecee;font-size:13px}
#account-page .rank-source{margin:11px 0 0;color:#9cbcc1;font-size:11px}
#account-page .rank-empty h3{margin:0 0 10px;color:#fff;font-size:24px}
#account-page .rank-empty p{margin:0;color:#c6d9dc;font-size:14px}
#leaderboards-page .content,#player-page .content{padding:24px}
#leaderboards-page .summary-cell,#player-page .summary-cell{background:#172a31;border-left-color:#42cdd1}
#leaderboards-page .summary-cell strong,#player-page .summary-cell strong{color:#f1f9f9}
#leaderboards-page .summary-cell span,#player-page .summary-cell span{color:#a9c0c5}
#leaderboards-page .leaderboard-toolbar label{color:#c5dadd}
#leaderboards-page .leaderboard-note{color:#9bb3b9}
#leaderboards-page .data-table th{background:#25434c;color:#f1f8f8}
#leaderboards-page .data-table td{border-bottom:1px solid #2b444d;color:#d9e8e9}
#leaderboards-page .data-table tbody tr:hover{background:#18333b}
#leaderboards-page .data-table a{color:#84e1e6}
#leaderboards-page #leaderboard-result .data-table tr.podium-gold{--podium-color:#f4cb6b;--podium-bg:#29291f}
#leaderboards-page #leaderboard-result .data-table tr.podium-silver{--podium-color:#cedde4;--podium-bg:#202d34}
#leaderboards-page #leaderboard-result .data-table tr.podium-bronze{--podium-color:#dba17d;--podium-bg:#2a2421}
#leaderboards-page #leaderboard-result .data-table tr.podium-rank{background:var(--podium-bg);box-shadow:inset 4px 0 var(--podium-color)}
#leaderboards-page #leaderboard-result .data-table tr.podium-rank td:first-child{color:var(--podium-color);font-size:17px;font-weight:800}
#leaderboards-page #leaderboard-result .data-table tr.podium-rank td:nth-child(2) a{color:var(--podium-color)}
#leaderboards-page #leaderboard-result>p{background:#102329;border-color:#31505a;color:#bdd1d5}
#leaderboards-page .pager{color:#c6dadd}
#leaderboards-page{overflow-x:clip}
#leaderboards-page .main{padding-bottom:38px;background-color:#0b1e25;background-image:linear-gradient(to bottom,transparent 0,transparent 620px,#0b1e25 769px),url('/assets/ossweb-img.qq.com/images/codo/201304/in_bg_1.jpg');background-position:top center;background-repeat:no-repeat;background-size:100% 769px,auto 769px}
#leaderboards-page .content{box-shadow:0 14px 32px #0009}
#player-page .profile-heading{color:#f1f8f8}
#player-page .profile-id{color:#91afb7}

/* Download now has an era artwork header and a compact, readable package panel. */
.page-download .main-in{padding-top:0}
.page-download .main{min-height:0;padding-bottom:50px}
.page-download .content{min-height:460px;grid-template-columns:minmax(0,1fr) 240px;box-shadow:0 10px 28px #0008}
.page-download .con-left{background:#e5e9e9}
.page-download .login-bar{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:54px;height:auto;padding:6px 14px;background:#142830;color:#d5e8e9}
.page-download .login-bar p{display:none}
.page-download .download-login-form{justify-content:center;gap:9px}
.page-download .download-login-form a{color:#89dce0;font-weight:600}
.page-download .download-account{color:#e4f3f4}
.page-download .download-account button{background:#22535f;border:1px solid #467f8a}
.page-download .download-art{height:172px;background:linear-gradient(90deg,#081a2559,#081a2510),url('/assets/splash-bg.jpg') center 35% / cover no-repeat;border-bottom:3px solid #58bbc6}
.page-download .down-info{padding:22px 24px;grid-template-columns:minmax(0,1fr) 240px;gap:20px}
.page-download .down-info .client h3{font-size:20px;font-weight:600;color:#192f37}
.page-download .download-help{background:#d5e0e2}
.page-download .con-right{background:#0b151a;padding:12px 8px;box-sizing:border-box}
.page-download .con-right h3{color:#bfe3e6;font-family:inherit;font-size:17px;font-weight:600}
.page-download .text-info{display:none}
.page-download .download-caveat{color:#526970}
.page-download .download-community a:hover{background:#21434c}
@media(max-width:760px){
  #account-page .account-overview{min-height:380px;padding:26px;background-position:38% 40%}
  #account-page .account-rank{padding:18px}
  .page-download .content{display:block}
  .page-download .down-info{grid-template-columns:1fr}
  .page-download .con-right{padding:16px}
}
@media(max-width:480px){
  .page-splash .original-title-crop{height:auto;aspect-ratio:426 / 82}
  #account-page .account-header{flex-direction:column}
  #account-page #account-logout{width:100%}
  #account-page .rank-top,#account-page .rank-details{align-items:flex-start;flex-direction:column;gap:3px}
  #account-page .account-overview h2{font-size:32px}
}

/* Operator dashboard: clear hierarchy, readable data, and separated controls. */
#admin-page .admin-tabs{display:flex;gap:6px;overflow-x:auto;margin:18px 0 16px;padding:3px;border-bottom:1px solid #35535d;scrollbar-width:thin}
#admin-page .admin-tabs button{flex:0 0 auto;min-width:116px;padding:11px 17px;border:1px solid transparent;border-bottom:3px solid transparent;background:transparent;color:#aac4c9;cursor:pointer;font-size:14px;font-weight:700}
#admin-page .admin-tabs button:hover{color:#fff;background:#1a333b}
#admin-page .admin-tabs button[aria-selected="true"]{color:#f4fcfc;border-color:#3b6973;border-bottom-color:#65d9da;background:#1c3c45}
#admin-page .admin-tabs button:focus-visible{outline:2px solid #8ee7e8;outline-offset:-3px}
#admin-page .admin-view{display:grid;gap:16px;align-content:start;min-height:340px}
#admin-page .admin-view[hidden]{display:none}
#admin-page #admin-view-players,#admin-page #admin-view-content{grid-template-columns:repeat(2,minmax(0,1fr))}
#admin-page #admin-view-players>.admin-data-grid,#admin-page #admin-view-content>#admin-notices{grid-column:1/-1}
#admin-page #admin-match-list{max-height:270px;overflow:auto}
#admin-page .admin-view .admin-overview{margin:0;grid-template-columns:repeat(3,minmax(0,1fr))}
#admin-page .admin-view>section,#admin-page .admin-view>.admin-data-grid>section{min-width:0}
#admin-page .admin-view>section:not(.maintenance-panel):not(.account-admin):not(.notice-history):not(.admin-panel){box-sizing:border-box;padding:20px;border:1px solid #31505a;background:#13252c}
#admin-page .admin-view>.account-admin,#admin-page .admin-view>.notice-history{margin-top:0}
#admin-page .admin-view>.admin-data-grid{margin:0}
#admin-page .admin-view>section h2{color:#f1f8f9}
#admin-page .admin-form-panel h2{margin:0 0 14px;color:#f1f8f9;font-size:21px;font-weight:600;line-height:1.25;text-align:left}
#admin-page .admin-form-panel form{display:grid;gap:12px}
#admin-page .admin-form-panel form label{display:grid;gap:7px;color:#bdd2d6;font-size:13px;font-weight:700;text-align:left}
#admin-page .admin-form-panel form input,#admin-page .admin-form-panel form select,#admin-page .admin-form-panel form textarea{box-sizing:border-box;width:100%;border:1px solid #6a8790;background:#eef3f3;color:#162d35;font-size:14px}
#admin-page .admin-form-panel form button{min-height:40px;padding:9px 16px;border:1px solid #53b9c1;background:linear-gradient(#54cbd0,#138894);color:#062027;cursor:pointer;font-size:14px;font-weight:700}
#admin-page .admin-form-panel form button:hover{background:linear-gradient(#9ce9e9,#31afb9)}
#admin-page .admin-health h2 small{color:#84bdc4;font-size:12px;font-weight:500}
#admin-page .admin-health-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
#admin-page #admin-service-detail{grid-template-columns:repeat(4,minmax(0,1fr))}
#admin-page .admin-health-item{display:flex;align-items:center;gap:10px;min-width:0;min-height:69px;box-sizing:border-box;padding:13px;border:1px solid #2e515a;background:#10232b}
#admin-page .admin-health-item strong{display:block;color:#f0f9f9;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#admin-page .admin-health-item small{display:block;margin-top:4px;color:#91b3b9;font-size:11px;line-height:1.35}
#admin-page .admin-led{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#be755f;box-shadow:0 0 0 3px #5c302d}
#admin-page .admin-led.is-up{background:#65d7bb;box-shadow:0 0 0 3px #1e514c}
#admin-page .admin-section-title{display:flex;align-items:end;justify-content:space-between;gap:15px}
#admin-page .admin-section-title small{color:#65cdd1;font-size:11px;font-weight:700;letter-spacing:.18em}
#admin-page .admin-section-title h2{margin:5px 0;color:#f1f8f9;font-size:22px}
#admin-page .admin-section-title p{margin:0;color:#9ebac0;font-size:13px;line-height:1.45}
#admin-page #admin-infra-updated{color:#9ebac0;font-size:12px;white-space:nowrap}
#admin-page .admin-network-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#admin-page .admin-network-grid>div{padding:12px;border-left:2px solid #4fc3c7;background:#10232b}
#admin-page .admin-network-grid strong{display:block;color:#eef9f9;font-size:18px}
#admin-page .admin-network-grid span{display:block;margin-top:5px;color:#9dbbc0;font-size:11px}
#admin-page .admin-instance-table{width:100%}
#admin-page .admin-instance-table td{vertical-align:top;white-space:nowrap}
#admin-page .admin-instance-table td small{display:block;margin-top:4px;color:#9ab8bd}
#admin-page .admin-secondary{padding:7px 11px;border:1px solid #577b84;background:#1c3c46;color:#d9f0f1;cursor:pointer}
#admin-page .admin-secondary:hover{background:#2f6975}
#admin-page .admin-secondary:disabled{opacity:.5;cursor:wait}
#admin-page .top-bar,#admin-page .main-in{width:min(1200px,calc(100% - 40px));max-width:1200px}
#admin-page .main{min-height:0;padding-bottom:60px}
#admin-page .main{background-color:#10232b;background-image:linear-gradient(to bottom,transparent 0,#10232b 900px),url('/assets/ossweb-img.qq.com/images/codo/201304/in_bg_1.jpg');background-position:top center;background-repeat:no-repeat;background-size:100% 100%,auto 900px}
#admin-page .content{box-sizing:border-box;min-height:0;padding:28px;border:1px solid #35535d;background:#0b171c;color:#d8e9ea;text-align:left}
#admin-page .admin-head{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:4px 0 22px;border-bottom:1px solid #29434d}
#admin-page .admin-head small{color:#74dce0;font-size:11px;font-weight:700;letter-spacing:.24em}
#admin-page .admin-head h2{margin:6px 0 4px;color:#f2fafa;font-size:29px;font-weight:600;line-height:1.2}
#admin-page .admin-head p{margin:0;color:#a0bac0;font-size:14px;line-height:1.5}
#admin-page .admin-head button{min-width:132px;padding:10px 15px;border:1px solid #559ca5;background:#1b3c46;color:#edf8f9;cursor:pointer;font-size:14px}
#admin-page .admin-head button:hover{background:#2b7d8b}
#admin-page .form-result{max-width:none;margin:12px 0 0;color:#91dce1}
#admin-page .admin-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0}
#admin-page .admin-stat{min-height:86px;box-sizing:border-box;padding:16px 19px;border-left:3px solid #4ad1d4;background:linear-gradient(#1b353e,#14272f)}
#admin-page .admin-stat strong{display:block;color:#fff;font-size:27px;line-height:1.1}
#admin-page .admin-stat span{display:block;margin-top:7px;color:#b0cbd0;font-size:13px}
#admin-page .admin-jump{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
#admin-page .admin-jump a{padding:8px 14px;border:1px solid #365d67;background:#132a32;color:#cde8ea;font-size:13px;font-weight:600;text-decoration:none}
#admin-page .admin-jump a:hover{background:#276a76;color:#fff}
#admin-page .admin-data-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;margin-bottom:16px}
#admin-page .admin-panel,#admin-page .admin-grid section,#admin-page .account-admin,#admin-page .notice-history{box-sizing:border-box;min-width:0;margin:0;padding:20px;border:1px solid #31505a;background:#13252c;text-align:left}
#admin-page .admin-panel h2,#admin-page .admin-grid h2,#admin-page .account-admin h2,#admin-page .notice-history h2{margin:0 0 14px;color:#f1f8f9;font-size:21px;font-weight:600;line-height:1.25;text-align:left}
#admin-page .admin-panel p{margin:0 0 12px;color:#9ebac0;font-size:13px;line-height:1.5}
#admin-page .admin-player-form{display:flex;gap:8px}
#admin-page .admin-player-form input{min-width:0;flex:1}
#admin-page .admin-player-form button,#admin-page .admin-grid button,#admin-page .site-news-form>button{min-height:40px;padding:9px 16px;border:1px solid #53b9c1;background:linear-gradient(#54cbd0,#138894);color:#062027;cursor:pointer;font-size:14px;font-weight:700}
#admin-page .admin-player-form button:hover,#admin-page .admin-grid button:hover,#admin-page .site-news-form>button:hover{background:linear-gradient(#9ce9e9,#31afb9)}
#admin-page #admin-player-results{margin-top:12px}
#admin-page .admin-empty{padding:18px 10px;color:#a9c2c7;text-align:center}
#admin-page .data-table{min-width:0}
#admin-page .data-table th{background:#294651;color:#eaf5f6;font-size:12px}
#admin-page .data-table td{border-bottom:1px solid #29454e;color:#d6e7e9;font-size:13px}
#admin-page .data-table a{color:#80e0e4}
#admin-page .admin-match-table td:first-child{white-space:nowrap}
#admin-page .report-badge{display:inline-block;padding:4px 7px;background:#554030;color:#f4cba8;font-size:12px}
#admin-page .report-badge.is-applied{background:#1b4c48;color:#a8f0df}
#admin-page .admin-grid{gap:16px;margin-bottom:16px}
#admin-page .admin-grid label{gap:7px;color:#bdd2d6;font-size:13px;text-align:left}
#admin-page .admin-grid input,#admin-page .admin-grid select,#admin-page .admin-grid textarea,#admin-page .site-news-form input,#admin-page .site-news-form textarea{border:1px solid #6a8790;background:#eef3f3;color:#162d35;font-size:14px}
#admin-page .site-news-form{padding:0;background:transparent}
#admin-page .site-news-form label{color:#bdd2d6;text-align:left}
#admin-page .site-news-admin-item{border-color:#31515a}
#admin-page .site-news-admin-item small{color:#9fb8bd}
#admin-page .notice-item{border-color:#34515a;color:#d8e9ea}
#admin-page .account-admin,#admin-page .notice-history{margin-top:16px}
#admin-page #admin-accounts{margin-top:0}
@media(max-width:850px){
  #admin-page .admin-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #admin-page #admin-service-detail{grid-template-columns:repeat(2,minmax(0,1fr))}
  #admin-page #admin-view-players,#admin-page #admin-view-content{grid-template-columns:1fr}
  #admin-page #admin-view-players>.admin-data-grid,#admin-page #admin-view-content>#admin-notices{grid-column:auto}
  #admin-page .admin-network-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #admin-page .admin-data-grid,#admin-page .admin-grid{grid-template-columns:1fr}
  #admin-page .admin-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:550px){
  #admin-page .admin-tabs button{min-width:100px;padding:9px 12px}
  #admin-page .admin-health-grid,#admin-page .admin-network-grid{grid-template-columns:1fr 1fr}
  #admin-page #admin-service-detail{grid-template-columns:1fr 1fr}
  #admin-page .admin-section-title{display:block}
  #admin-page .content{padding:14px}
  #admin-page .admin-head{align-items:start;flex-direction:column}
  #admin-page .admin-overview{grid-template-columns:1fr 1fr}
  #admin-page .admin-stat{padding:12px;min-height:76px}
  #admin-page .admin-stat strong{font-size:22px}
  #admin-page .admin-player-form{display:grid;grid-template-columns:1fr}
}

/* Clan directory uses real lobby records and an honest empty state. */
.maintenance-banner{position:relative;z-index:100;box-sizing:border-box;width:100%;padding:10px 20px;border-bottom:2px solid #e2a951;background:#352719;color:#fff2d8;text-align:center;font:600 14px/1.5 Arial,sans-serif}
.maintenance-banner.is-active{border-color:#e37163;background:#481e20;color:#fff0eb}
#admin-page .maintenance-panel{box-sizing:border-box;margin:0 0 16px;padding:20px;border:1px solid #4e6970;background:#14262d;color:#dcecee;text-align:left}
#admin-page .maintenance-panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px}
#admin-page .maintenance-panel-head small{color:#73cfd4;font-size:11px;letter-spacing:.18em}
#admin-page .maintenance-panel h2{margin:5px 0;color:#f3f9f9;font-size:22px}
#admin-page .maintenance-panel-head p,#admin-page .maintenance-note{margin:0 0 14px;color:#a9c1c5;font-size:13px}
#admin-page #maintenance-phase{padding:6px 11px;border:1px solid #60737a;color:#dcebee;white-space:nowrap;font-size:13px}
#admin-page #maintenance-form{display:grid;gap:20px}
#admin-page .maintenance-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
#admin-page .maintenance-fields label:first-child{grid-column:1/-1}
#admin-page .maintenance-fields label{display:grid;min-width:0;gap:7px;color:#c5d9dc;font-size:13px}
#admin-page .maintenance-fields input,#admin-page .maintenance-fields textarea{box-sizing:border-box;width:100%;min-width:0;min-height:42px;padding:10px;border:1px solid #6a8790;background:#edf3f3;color:#10262e;font:14px Arial,sans-serif}
#admin-page .maintenance-fields textarea{min-height:64px;resize:vertical}
#admin-page .maintenance-note{margin:12px 0}
#admin-page .maintenance-actions{display:flex;flex-wrap:wrap;gap:9px;padding-top:18px;border-top:1px solid #38535b}
#admin-page .maintenance-actions button{min-height:39px;padding:8px 14px;border:1px solid #5ab8be;background:#1b6470;color:#fff;cursor:pointer;font-size:13px;font-weight:700}
#admin-page .maintenance-actions button:hover{background:#278996}
#admin-page .maintenance-actions #maintenance-disable{margin-left:auto;border-color:#7c5553;background:#4b3030}
#admin-page .maintenance-actions #maintenance-disable:hover{background:#694040}
#admin-page #maintenance-result{margin:0}
#admin-page #maintenance-result:empty{display:none}
@media(max-width:700px){#admin-page .maintenance-fields{grid-template-columns:1fr}#admin-page .maintenance-actions #maintenance-disable{margin-left:0}}
@media(max-width:520px){#admin-page .maintenance-panel{padding:16px}#admin-page .maintenance-panel-head{align-items:flex-start;gap:12px}#admin-page .maintenance-actions{display:grid;grid-template-columns:1fr 1fr}#admin-page .maintenance-actions button{min-width:0}#admin-page .maintenance-actions #maintenance-disable{grid-column:1/-1}}
.page-clans .main{min-height:0;padding-bottom:60px}
#clans-page .content,#clan-page .content{box-sizing:border-box;min-height:430px;padding:25px;border:1px solid #3c5b64;background:#0b171c;color:#dceced;text-align:left}
#clans-page .current h1>span:last-child{display:inline;font-size:inherit;color:inherit;letter-spacing:normal}
.page-clans .clans-intro{box-sizing:border-box;display:flex;align-items:center;min-height:165px;padding:25px 28px;background-color:#07141a;background-image:linear-gradient(90deg,#07141a 0%,#07141a 30%,#07141acc 57%,#07141a33 100%),url('/assets/splash-bg.jpg');background-position:center,right 18%;background-size:cover,75% auto;background-repeat:no-repeat;border-bottom:3px solid #58c7cc}
.page-clans .clans-intro small,.page-clans .clan-detail-head small{color:#8ee0e4;font-size:11px;font-weight:700;letter-spacing:.2em}
.page-clans .clans-intro h2{margin:7px 0;color:#f5fbfb;font-size:27px;font-weight:600}
.page-clans .clans-intro p{margin:0;color:#bfd3d7;font-size:14px}
.page-clans .clan-search{display:grid;gap:6px;margin:20px 0 15px;color:#bad3d7;font-size:13px}
.page-clans .clan-search input{background:#e9f1f2}
.page-clans .clan-list{display:grid;gap:9px}
.page-clans .clan-card{display:flex;align-items:center;gap:16px;padding:14px 18px;border:1px solid #31515c;background:#142831;color:#f2f9f9;text-decoration:none}
.page-clans .clan-card:hover{border-color:#75ced1;background:#21414b}
.page-clans .clan-mark{display:flex;align-items:center;justify-content:center;flex:0 0 64px;width:64px;height:64px;box-sizing:border-box;border:1px solid #64c3cc;background:linear-gradient(#225b68,#0b2c38);color:#e9ffff;font-size:16px;font-weight:800;letter-spacing:-.02em;overflow:hidden}
.page-clans .clan-mark span{display:block;max-width:100%;padding:0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-clans .clan-card h3{margin:0 0 4px;color:#fff;font-size:19px}
.page-clans .clan-card p{margin:0;color:#a9c3c7;font-size:13px}
.page-clans .clan-empty{min-height:165px;box-sizing:border-box;padding:34px 25px;border:1px solid #31515c;background:linear-gradient(#162d36,#0f2129);text-align:center}
.page-clans .clan-empty h2{margin:0 0 8px;color:#eaf5f6;font-size:23px}
.page-clans .clan-empty p{margin:0;color:#9ebcc2;font-size:14px}
.page-clans .pager{color:#d4e7e9}
.page-clans .clan-detail-head{box-sizing:border-box;display:flex;align-items:center;gap:20px;min-height:180px;padding:20px;background-color:#0a1820;background-image:linear-gradient(90deg,#0a1820 0%,#0a1820 32%,#0a1820bb 60%,#0a182033 100%),url('/assets/splash-bg.jpg');background-position:center,right 18%;background-size:cover,75% auto;background-repeat:no-repeat}
.page-clans .clan-detail-head h2{margin:5px 0;color:#fff;font-size:30px}
.page-clans .clan-detail-head p{margin:0;color:#bdd4d8}
.page-clans .clan-roster-title{margin:24px 0 12px;color:#eef7f8;font-size:20px}
.page-clans .data-table th{background:#294750;color:#f4f9f9}
.page-clans .data-table td{border-color:#34535d;color:#dce9eb}
.page-clans .data-table a{color:#80e2e6}
@media(max-width:700px){
  .page-clans .content{padding:13px}
  .page-clans .clan-card{padding:11px;gap:10px}
  .page-clans .clan-mark{width:50px;height:50px;flex-basis:50px;font-size:16px}
}

/* One masthead on the splash and every interior route. */
@media(min-width:1021px){
  .page-splash .nav-in,.page-interior .top-bar,#admin-page .top-bar{box-sizing:border-box;width:1050px;max-width:calc(100% - 32px);height:129px;margin:0 auto}
  .page-splash .nav-in{padding:70px 0 0;background:none}
  .page-splash .logo{left:0;top:16px}
  .page-splash .nav-in ul{gap:3px}
  .page-splash .nav-in li a.nav-text{width:145px;margin:0}
  .page-interior .top-bar{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;padding:0}
  .page-interior .top-bar::before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:100vw;height:100%;transform:translateX(-50%);border-bottom:1px solid #30363b;background:linear-gradient(#020405f5,#121719e8)}
  .page-interior .top-bar .logo{flex:none;align-self:flex-start;width:247px;height:113px;margin:16px 0 0;background:url('/assets/ossweb-img.qq.com/images/codo/201304/logo.png') center/contain no-repeat}
  .page-interior .site-top-links{flex:none;display:flex;align-items:flex-end;gap:3px;width:auto;height:59px;padding:0;margin-left:auto}
  .page-interior .site-top-links a{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;width:145px;min-width:0;height:59px;margin:0;padding:0 24px 0 6px;clip-path:polygon(5px 5px,72px 5px,72px 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px),0 18px,5px 13px);border:0;background:linear-gradient(#6b6f71,#47494b 55%,#232526);color:#fff;font-size:15px;font-weight:700;letter-spacing:.5px;text-align:center;text-decoration:none;text-shadow:0 1px 2px #000b}
  .page-interior .site-top-links a::before{content:"";position:absolute;inset:1px;z-index:-1;clip-path:inherit;background:linear-gradient(#484848,#393939 45%,#262626)}
  .page-interior .site-top-links a::after{content:"";position:absolute;top:50%;right:14px;width:13px;height:11px;margin-top:-6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M0 0l6 5.5L0 11z' fill='%238b8b8b'/%3E%3Cpath d='M7 0l6 5.5L7 11z' fill='%238b8b8b' opacity='.75'/%3E%3C/svg%3E") center/contain no-repeat}
  .page-interior .site-top-links a.auth-nav-link::before{background:linear-gradient(#275a63,#17343d 55%,#0c2028)}
  .page-interior .site-top-links a[aria-current=page]::before{background:linear-gradient(#63c8ca,#258a94 55%,#15505c)}
  .page-interior .site-top-links a:hover,.page-interior .site-top-links a:focus-visible{background:linear-gradient(#6b6f71,#47494b 55%,#232526);color:#06282a;text-shadow:0 1px #fff6;filter:drop-shadow(0 0 7px #78e6e380)}
  .page-interior .site-top-links a:hover::before,.page-interior .site-top-links a:focus-visible::before{background:radial-gradient(75% 140% at 28% 55%,#e2fafaf2,#8de1e200 72%),linear-gradient(#4e8b8c,#539fa0 45%,#305858)}
  .page-interior .site-top-links a:hover::after,.page-interior .site-top-links a:focus-visible::after{filter:brightness(1.6)}
}
@media(max-width:1020px){
  .page-splash .nav-in,.page-interior .top-bar,#admin-page .top-bar{box-sizing:border-box;width:100%;max-width:100%;height:auto;min-height:0;margin:0 auto;padding:14px 16px;display:grid;justify-items:center;gap:10px}
  .page-splash .logo,.page-interior .top-bar .logo{position:static;float:none;display:block;width:200px;height:92px;margin:0;background:url('/assets/ossweb-img.qq.com/images/codo/201304/logo.png') center/contain no-repeat}
  .page-splash .nav-in ul,.page-interior .site-top-links{box-sizing:border-box;display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;gap:5px;width:100%;height:auto;margin:0;padding:0}
  .page-splash .nav-in li{flex:0 1 auto;width:auto}
  .page-splash .nav-in li a.nav-text,.page-interior .site-top-links a{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;width:145px;min-width:0;height:52px;min-height:52px;margin:0;padding:0 24px 0 6px;clip-path:polygon(5px 5px,72px 5px,72px 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px),0 18px,5px 13px);border:0;background:linear-gradient(#6b6f71,#47494b 55%,#232526);color:#fff;font-size:14px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none}
  .page-interior .site-top-links{flex:none}
  .page-interior .site-top-links a.nav-wide{grid-column:auto}
  .page-interior .site-top-links a::before{content:"";position:absolute;inset:1px;z-index:-1;clip-path:inherit;background:linear-gradient(#484848,#393939 45%,#262626)}
  .page-interior .site-top-links a::after{content:"";position:absolute;top:50%;right:14px;width:13px;height:11px;margin-top:-6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M0 0l6 5.5L0 11z' fill='%238b8b8b'/%3E%3Cpath d='M7 0l6 5.5L7 11z' fill='%238b8b8b' opacity='.75'/%3E%3C/svg%3E") center/contain no-repeat}
  .page-interior .site-top-links a.auth-nav-link::before{background:linear-gradient(#275a63,#17343d 55%,#0c2028)}
  .page-interior .site-top-links a[aria-current=page]::before{background:linear-gradient(#63c8ca,#258a94 55%,#15505c)}
}
#admin-page .main-in{width:min(1000px,calc(100% - 32px));max-width:1000px}

/* Compact administration dashboard. */
#admin-page .admin-head p,#admin-page .admin-section-title p,#admin-page .maintenance-note{display:none}
#admin-page #admin-view-players{grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);align-items:start}
#admin-page #admin-view-players>#admin-players,#admin-page #admin-view-players>.admin-grant-panel{margin:0}
#admin-page .admin-roster-counts{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:16px}
#admin-page .admin-roster-counts>div{padding:11px 13px;border:1px solid #34545d;background:#0d2028}
#admin-page .admin-roster-counts strong{display:block;color:#f8ffff;font-size:21px}
#admin-page .admin-roster-counts span{display:block;margin-top:3px;color:#95b8be;font-size:12px}
#admin-page .admin-roster-list{max-height:335px;overflow:auto;border:1px solid #34545d}
#admin-page .admin-roster-row{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 13px;border:0;border-bottom:1px solid #29444d;background:#0d1d24;color:#eef7f8;text-align:left;cursor:pointer}
#admin-page .admin-roster-row:last-child{border-bottom:0}
#admin-page .admin-roster-row:hover,#admin-page .admin-roster-row.is-selected{background:#20434b}
#admin-page .admin-roster-row b,#admin-page .admin-roster-row small{display:block}
#admin-page .admin-roster-row small{margin-top:3px;color:#94b3b9;font-size:11px}
#admin-page .admin-roster-status{flex:none;padding:4px 8px;border:1px solid #46626a;color:#b9cdd0;font-size:11px}
#admin-page .admin-roster-status.is-linked{border-color:#417e74;color:#8fe0c8}
#admin-page .admin-roster-status.is-conflict{border-color:#a06b57;color:#f0bd9c}
#admin-page .admin-roster-more{display:block;margin:8px 0;color:#92adb4}
#admin-page .admin-player-detail{margin-top:15px;border-top:1px solid #35545d;padding-top:15px}
#admin-page .admin-player-identity{display:flex;justify-content:space-between;gap:12px;align-items:center}
#admin-page .admin-player-identity small{color:#78d5d7;text-transform:uppercase;letter-spacing:.12em}
#admin-page .admin-player-identity h3{margin:4px 0;color:#f9ffff;font-size:21px}
#admin-page .admin-player-identity span{color:#a3bec3;font-size:12px}
#admin-page .admin-player-identity>strong{color:#c4e5e8;white-space:nowrap}
#admin-page .admin-player-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:16px}
#admin-page .admin-player-facts>div{padding:10px;background:#0d2028}
#admin-page .admin-player-facts b,#admin-page .admin-player-facts span{display:block}
#admin-page .admin-player-facts b{color:#fff;font-size:18px}
#admin-page .admin-player-facts span{margin-top:4px;color:#93b6bc;font-size:11px}
#admin-page .admin-grant-panel form{display:grid;gap:12px}
#admin-page .admin-grant-panel input[readonly]{background:#aabdc0;color:#213940}
#admin-page .admin-grant-panel button:disabled{opacity:.5;cursor:not-allowed}
#admin-page .admin-grant-result{min-height:20px;margin:0!important;color:#8be1ca!important;font-size:13px}
#admin-page .admin-insights{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);gap:16px}
#admin-page .admin-charts,#admin-page .admin-map-panel{min-width:0}
#admin-page .admin-charts h2 small{color:#8ebac0;font-size:12px;font-weight:400}
#admin-page .admin-finance-stats{display:flex;gap:18px;margin-bottom:10px;color:#9cbdc2;font-size:12px}
#admin-page .admin-finance-stats b{color:#e9f9f8;margin-left:3px}
#admin-page .admin-charts h3{margin:16px 0 9px;color:#d7eeee;font-size:14px}
#admin-page .admin-activity-chart{display:flex;align-items:stretch;gap:4px;height:132px;padding:8px 0 0;border-bottom:1px solid #38555e}
#admin-page .admin-day{flex:1;min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end}
#admin-page .admin-day-bars{display:flex;align-items:end;justify-content:center;gap:2px;flex:1;min-height:0}
#admin-page .admin-day-bars i{display:block;width:35%;min-width:2px;background:#52c6ce}
#admin-page .admin-day-bars i+i{background:#708a9a}
#admin-page .admin-day small{margin:6px -4px 0;color:#91afb5;font-size:9px;text-align:center;white-space:nowrap}
#admin-page .admin-chart-legend{display:flex;gap:15px;margin-top:12px;color:#a4c3c8;font-size:11px}
#admin-page .admin-chart-legend span:before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;background:#52c6ce}
#admin-page .admin-chart-legend span+span:before{background:#708a9a}
#admin-page .admin-mode-chart{display:grid;gap:7px}
#admin-page .admin-mode-row{display:grid;grid-template-columns:minmax(120px,160px) minmax(0,1fr) 38px;align-items:center;gap:8px;color:#aecbd0;font-size:11px}
#admin-page .admin-mode-row>span{overflow-wrap:anywhere;line-height:1.25}
#admin-page .admin-mode-row>div{height:8px;background:#102129}
#admin-page .admin-mode-row i{display:block;height:100%;background:#4dbfc7}
#admin-page .admin-mode-row b{text-align:right;color:#d9f3f4}
#admin-page .admin-map-panel img{display:block;width:min(100%,360px);height:auto;margin:auto;border:1px solid #34545d;background:#07171e}
#admin-page .admin-map-panel small{display:block;margin-top:6px;color:#aabec4;text-align:center}
#admin-page .admin-report-drawer{border:1px solid #31505a;background:#13252c}
#admin-page .admin-report-drawer>summary{padding:14px 20px;color:#e1f2f3;cursor:pointer;font-weight:600}
#admin-page .admin-report-drawer #admin-reports{border:0;border-top:1px solid #31505a}
#admin-page .admin-network-chart{margin-top:14px;border:1px solid #2f5059;padding:10px 12px;background:#0d2028}
#admin-page .admin-network-caption{display:flex;justify-content:space-between;gap:12px;color:#b8d4d7;font-size:12px}
#admin-page .admin-network-caption span{color:#8aadb4}
#admin-page .admin-network-chart svg{display:block;width:100%;height:120px;margin-top:6px;overflow:visible}
#admin-page .admin-network-chart .grid{stroke:#28434b;stroke-width:1;fill:none}
#admin-page .admin-network-chart polyline{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
#admin-page .admin-network-chart .rx{stroke:#58d1d0}
#admin-page .admin-network-chart .tx{stroke:#a3b2df}
@media(max-width:850px){#admin-page #admin-view-players,#admin-page .admin-insights{grid-template-columns:1fr}}
@media(max-width:550px){#admin-page .admin-roster-counts{grid-template-columns:1fr}#admin-page .admin-player-facts{grid-template-columns:repeat(2,1fr)}#admin-page .admin-mode-row{grid-template-columns:minmax(105px,145px) minmax(0,1fr) 30px}}

/* The two site rankings use the same layout with distinct game-mode accents. */
#leaderboards-page .leaderboard-modes{display:flex;gap:8px;margin:0 0 20px}
#leaderboards-page .leaderboard-modes button{min-width:150px;padding:12px 19px;border:1px solid #39545d;background:linear-gradient(#273a42,#102129);color:#bad0d4;cursor:pointer;font:700 14px Arial,sans-serif;letter-spacing:.03em}
#leaderboards-page .leaderboard-modes button[aria-selected=true]{background:linear-gradient(#318998,#11525f);border-color:#55bec6;color:#fff}
#leaderboards-page .zombies-controls{display:grid;grid-template-columns:minmax(180px,1.6fr) repeat(3,minmax(120px,1fr));gap:12px;align-items:end;margin-bottom:19px}
#leaderboards-page .zombies-controls[hidden]{display:none}
#leaderboards-page .leaderboard-toolbar[hidden],#leaderboards-page .leaderboard-note[hidden],#leaderboards-page .pager[hidden]{display:none}
#leaderboards-page .zombies-controls label{display:grid;gap:6px;color:#ead2d0;font-size:13px;font-weight:600}
#leaderboards-page .zombies-controls input,#leaderboards-page .zombies-controls select{box-sizing:border-box;width:100%;min-width:0;height:42px;padding:8px 11px;border:1px solid #866365;background:#ebebea;color:#302b2b;font:14px Arial,sans-serif}
#leaderboards-page.mode-zm .content{border-color:#723a3b;background:linear-gradient(135deg,#1c1012,#100d10 68%);box-shadow:0 14px 32px #000a}
#leaderboards-page.mode-zm .main{background-color:#170e10;background-image:linear-gradient(to bottom,transparent 0,transparent 490px,#170e10 769px),linear-gradient(105deg,#16080a99,#4c16185c 48%,#19090aa8),url('/assets/ossweb-img.qq.com/images/codo/201304/in_bg_1.jpg');background-size:100% 769px,100% 769px,auto 769px}
#leaderboards-page.mode-zm .current h1{color:#e1776e}
#leaderboards-page.mode-zm .current h1>span.lang-zh,#leaderboards-page.mode-zm .current h1>span.lang-en,#leaderboards-page.mode-zm .current .link-back:before{color:#e1776e}
#leaderboards-page.mode-zm .leaderboard-modes button[aria-selected=true]{background:linear-gradient(#b74742,#6f2227);border-color:#d4756c;color:#fff}
#leaderboards-page.mode-zm .summary-cell{background:#28191c;border-left-color:#cf554c}
#leaderboards-page.mode-zm .summary-cell span{color:#c9aaa9}
#leaderboards-page.mode-zm .data-table th{background:#51282c;color:#fff2f0}
#leaderboards-page.mode-zm .data-table td{border-color:#4b3033;color:#eee0df}
#leaderboards-page.mode-zm .data-table tbody tr:hover{background:#352023}
#leaderboards-page.mode-zm .data-table a{color:#f19a8f}
#leaderboards-page.mode-zm #leaderboard-result .data-table tr.podium-gold{--podium-bg:#30201f}
#leaderboards-page.mode-zm #leaderboard-result .data-table tr.podium-silver{--podium-bg:#292529}
#leaderboards-page.mode-zm #leaderboard-result .data-table tr.podium-bronze{--podium-bg:#302021}
#leaderboards-page.mode-zm #leaderboard-result>p{background:#251719;border-color:#754446;color:#e7c9c6}
#leaderboards-page.mode-zm .pager{color:#e2c4c0}
#leaderboards-page.mode-zm .pager button:not(:disabled){border-color:#a7514f;background:#60292c;color:#fff}
@media(max-width:800px){#leaderboards-page .zombies-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){#leaderboards-page .zombies-controls{grid-template-columns:1fr}#leaderboards-page .leaderboard-modes button{min-width:0;flex:1}}

/* Data tables become readable cards instead of clipped, nested scrollers on phones. */
@media(max-width:600px){
  .page-community .table-scroll{overflow-x:visible}
  .page-community .data-table{display:block;width:100%;min-width:0;border-collapse:separate}
  .page-community .data-table thead{display:none}
  .page-community .data-table tbody{display:grid;gap:9px}
  .page-community .data-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;min-width:0;padding:12px;border:1px solid #34545d;background:#10242b}
  .page-community .data-table td,#leaderboards-page .data-table td,#clan-page .data-table td,#admin-page .data-table td{box-sizing:border-box;min-width:0;padding:0;border:0;white-space:normal;overflow-wrap:anywhere;vertical-align:top}
  .page-community .data-table td::before{display:block;margin-bottom:4px;color:#8fb6bd;font-size:10px;font-weight:700;letter-spacing:.04em;content:attr(data-label)}
  #leaderboards-page.mode-zm .data-table tr{border-color:#754446;background:#251719}
  #leaderboards-page #leaderboard-result .data-table tr.podium-rank{border-color:var(--podium-color)}
  #leaderboards-page.mode-zm .data-table td::before{color:#d09a96}
  #admin-page #admin-match-list{max-height:none;overflow:visible}
  #admin-page .admin-report-drawer #admin-reports{padding:12px}
  #admin-page .admin-report-drawer>summary{padding:12px}
  #admin-page .admin-match-table tr{grid-template-columns:minmax(0,1fr) auto}
  #admin-page .admin-match-table td:first-child{grid-column:1;grid-row:1;white-space:normal}
  #admin-page .admin-match-table td:nth-child(2){grid-column:1/-1;grid-row:2}
  #admin-page .admin-match-table td:nth-child(3){grid-column:1/-1;grid-row:3}
  #admin-page .admin-match-table td:nth-child(4){grid-column:2;grid-row:1;text-align:right}
  #admin-page .admin-instance-table td{white-space:normal}
  #admin-page .admin-tabs{flex-wrap:wrap;overflow:visible}
  #admin-page .admin-tabs button{flex:1 1 calc(50% - 6px);min-width:0}
  #admin-page .admin-health-item strong{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  #admin-page .admin-map-panel img{box-sizing:border-box;max-width:100%}
}
