/* OVERCHARGE overrides on top of the original ToyHeroes CSS:
   (1) move the room background to <body> and turn .layout_wrapper into a fixed
       980px "stage" that scale.js shrinks to fit narrow screens (stays 1:1),
   (2) swap the logo to the OVERCHARGE wordmark,
   (3) rebrand the footer. */

html, body { margin:0; padding:0; overflow-x:hidden; background-color:#05070c; }
body{
  background:#05070c url("../img/bg_default.jpg") no-repeat center top fixed;
  background-size:cover;
}

/* the scalable stage */
.layout_wrapper{
  background-image:none !important;
  width:980px;
  margin:0 auto;
  transform-origin:0 0;      /* scale.js sets transform: scale(s) when viewport < 980 */
  min-height:0;
}

/* OVERCHARGE logo in place of bb_logo1.png */
.header_bottom{ background-image:none !important; }
.header_bottom .bb_logo{
  background-image:url("../img/logo.png") !important;
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  width:250px !important;
  height:120px !important;
  top:6px !important;
}

/* footer: drop third-party corporate logos, keep rating icons, add OVERCHARGE mark */
.footer_container .eptmedia_logo, .footer_container .nq_logo{ display:none !important; }
.oc-footer-brand{
  float:left; margin-left:20px; margin-top:6px;
  color:#8ea0b8; font-weight:900; letter-spacing:2px; font-size:18px;
}
.oc-footer-brand span{ color:#49cbfc; }

/* language switch (replaces the header language image) */
.oc-lang-switch{ display:inline-flex; gap:4px; vertical-align:middle; }
.oc-lang-switch button{ background:#1a2431; border:1px solid #2a3647; color:#c7d5e0; border-radius:5px;
  padding:3px 7px; font-size:11px; font-weight:bold; cursor:pointer; line-height:1.2; }
.oc-lang-switch button:hover{ background:#223047; color:#fff; }
.oc-lang-switch button.on{ background:#2fb0ef; color:#042338; border-color:#2fb0ef; }

/* German nav button graphics (only the two words that differ) */
body.lang-de .btn_nav_clubhouse_en{ background-image:url("../img/btn_club_house_de.png") !important; }
body.lang-de .btn_nav_media_en{ background-image:url("../img/btn_media_de.png") !important; }

/* ---------------- top-bar auth (Steam button / user chip) ---------------- */
#mainLogin{ width:auto !important; }
.oc-steambtn{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:linear-gradient(180deg,#2a4766,#16202e); color:#eaf1fa !important;
  border:1px solid #0a0f16; border-radius:6px; padding:7px 12px; font-size:12px; font-weight:bold;
  text-decoration:none; position:relative; top:1px;
}
.oc-steambtn:hover{ background:linear-gradient(180deg,#34557a,#1c2a3c); color:#fff !important; }
.oc-steambtn svg{ width:16px; height:16px; fill:#8ab4e8; }
.oc-userchip{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; font-size:12px; position:relative; top:2px; }
.oc-userchip .oc-uname{ color:#ffd84d !important; font-weight:900; text-decoration:none; font-size:13px; }
.oc-userchip .oc-uname:hover{ color:#ffe375 !important; }
.oc-userchip .oc-ucur{ color:#9fb0c6; }
.oc-userchip .oc-ucur b{ color:#e9eef5; font-variant-numeric:tabular-nums; }
.oc-userchip .oc-logout{
  color:#c7d5e0 !important; text-decoration:none; border:1px solid #2a3647; border-radius:5px;
  padding:4px 9px; background:#1a2431; font-weight:bold;
}
.oc-userchip .oc-logout:hover{ background:#223047; color:#fff !important; }
@media (max-width:560px){ .oc-userchip .oc-ucur{ display:none; } }

/* ---------------- Login: Steam-only block (inside the white clipboard) ---------------- */
.oc-steamlogin{ padding:4px 22px 12px; max-width:360px; }
.oc-sl-lead{ font-size:14px; color:#3a4656; margin:4px 0 16px; line-height:1.5; }
.oc-sl-lead b{ color:#14202e; }
.oc-sl-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:linear-gradient(180deg,#2a4766,#16202e); color:#fff !important; border:1px solid #0a0f16;
  border-radius:9px; padding:13px; font-weight:bold; font-size:15px; text-decoration:none; }
.oc-sl-btn:hover{ background:linear-gradient(180deg,#34557a,#1c2a3c); color:#fff !important; }
.oc-sl-btn svg{ width:22px; height:22px; fill:#8ab4e8; }
.oc-sl-steps{ counter-reset:s; list-style:none; margin:18px 0 0; padding:0; }
.oc-sl-steps li{ counter-increment:s; display:flex; gap:10px; padding:8px 0; border-bottom:1px solid #e7ebf1; color:#3a4656; font-size:13px; line-height:1.45; }
.oc-sl-steps li:last-child{ border-bottom:none; }
.oc-sl-steps li::before{ content:counter(s); flex:0 0 22px; height:22px; border-radius:50%; background:#2fb0ef; color:#fff; font-weight:900; font-size:12px; display:flex; align-items:center; justify-content:center; }
.oc-sl-fine{ color:#7a8696; font-size:12px; margin-top:16px; line-height:1.5; }
.oc-sl-fine a{ color:#1479c2; }

/* ---------------- News detail page ---------------- */
.news-article{ max-width:760px; margin:0 auto; background:#0e141d; border:1px solid #2a3647; border-radius:10px;
  min-height:420px; color:#e9eef5; font-family:Arial,Helvetica,sans-serif; padding:24px 30px 36px; }
.na-loading,.na-empty{ text-align:center; color:#9fb0c6; padding:90px 20px; line-height:1.6; }
.na-loading img{ width:20px; height:20px; vertical-align:middle; margin-right:8px; }
.na-back{ display:inline-block; color:#49cbfc; font-weight:bold; font-size:13px; text-decoration:none; margin-bottom:14px; }
.na-back:hover{ color:#7fe0ff; }
.na-meta{ display:flex; align-items:center; gap:10px; color:#8094ab; font-size:12px; }
.na-meta img{ width:16px; height:15px; }
.na-tag{ background:#1a2431; border:1px solid #2a3647; border-radius:5px; padding:3px 9px; font-weight:bold; color:#cfe0ef; text-transform:uppercase; letter-spacing:.5px; font-size:11px; }
.na-date{ font-variant-numeric:tabular-nums; }
.na-title{ margin:12px 0 18px; font-size:26px; color:#fff; line-height:1.2; font-weight:900; }
.na-body{ color:#c6d2e2; font-size:15px; line-height:1.7; }
.na-body p{ margin:0 0 14px; }
.na-body a{ color:#49cbfc; }

/* ---------------- Club House content (inside the white panel) ---------------- */
.tab-content-container-middle{ font-family:Arial,Helvetica,sans-serif; color:#1b2430; overflow:hidden; }
.ch-loading{ text-align:center; color:#3a4a5e; padding:120px 0; font-size:13px; }
.ch-loading img{ width:20px; height:20px; vertical-align:middle; margin-right:8px; }
.ch-empty{ text-align:center; color:#5a6a7e; padding:80px 24px; font-size:14px; line-height:1.6; }
.ch-link{ color:#1479c2; font-weight:bold; }
.ch-head{ display:flex; align-items:center; gap:12px; padding:16px 20px 10px; border-bottom:2px solid #e3e8ef; flex-wrap:wrap; }
.ch-head h2{ margin:0; font-size:20px; color:#14202e; font-weight:900; letter-spacing:.3px; }
.ch-back{ color:#1479c2; font-weight:bold; font-size:13px; }
.ch-tools{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.ch-sort{ display:inline-flex; border:1px solid #cdd6e2; border-radius:6px; overflow:hidden; }
.ch-sort button{ background:#f1f4f9; border:none; border-left:1px solid #cdd6e2; padding:6px 12px; font-size:12px; font-weight:bold; color:#4a5a70; cursor:pointer; }
.ch-sort button:first-child{ border-left:none; }
.ch-sort button.on{ background:#2fb0ef; color:#fff; }
.ch-search{ border:1px solid #cdd6e2; border-radius:6px; padding:7px 10px; font-size:13px; width:160px; max-width:40vw; color:#14202e; background:#fff; }

.ch-table{ width:100%; border-collapse:collapse; font-size:13px; }
.ch-table thead th{ text-align:left; padding:9px 12px; color:#64748b; font-size:11px; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid #e3e8ef; background:#f7f9fc; }
.ch-table td{ padding:9px 12px; border-bottom:1px solid #eef2f7; }
.ch-table tbody tr:hover{ background:#eef6ff; cursor:pointer; }
.ch-rank{ color:#90a0b4; font-weight:bold; width:40px; font-variant-numeric:tabular-nums; }
/* level rank badge (sprite from icon_user_grade_01) */
.lvl-icon{ display:inline-block; width:32px; height:32px; background-image:url("../img/rank-atlas.png");
  background-repeat:no-repeat; vertical-align:middle; }
.lvl-icon.big{ width:64px; height:64px; }
.ch-name a{ color:#14202e; font-weight:bold; text-decoration:none; }
.ch-name a:hover{ color:#1479c2; }
.ch-clan{ color:#5a6a7e; }
.ch-table td{ font-variant-numeric:tabular-nums; }

.ch-pager{ display:flex; align-items:center; justify-content:center; gap:14px; padding:14px; color:#5a6a7e; font-size:12px; }
.ch-pager button{ background:#2fb0ef; color:#fff; border:none; border-radius:6px; padding:7px 14px; font-weight:bold; cursor:pointer; font-size:12px; }
.ch-pager button:disabled{ background:#c7d0dc; cursor:default; }

/* player profile */
.ch-profile{ display:flex; gap:18px; padding:18px 20px; flex-wrap:wrap; }
.ch-pcard{ display:flex; gap:14px; align-items:center; min-width:230px; }
.ch-avatar{ width:72px; height:72px; border-radius:8px; border:2px solid #d7dee8; object-fit:cover; background:#e9eef5; }
.ch-plv{ font-size:18px; font-weight:900; color:#14202e; }
.ch-prank{ color:#2fb0ef; font-weight:bold; font-size:13px; margin-top:2px; }
.ch-pclan{ color:#5a6a7e; font-size:13px; margin-top:4px; }
.ch-pclan a{ color:#1479c2; font-weight:bold; }
.ch-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; flex:1 1 320px; }
.ch-clanstats{ padding:18px 20px; grid-template-columns:repeat(5,1fr); }
.ch-stat{ background:#f5f8fc; border:1px solid #e6ecf4; border-radius:8px; padding:10px; text-align:center; }
.ch-sv{ font-size:17px; font-weight:900; color:#14202e; font-variant-numeric:tabular-nums; }
.ch-sl{ font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:#8090a4; margin-top:3px; }
.ch-sub{ padding:12px 20px 6px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:1px; color:#64748b; border-top:1px solid #eef2f7; }
.ch-weapons{ padding:4px 20px 20px; display:flex; flex-direction:column; gap:7px; }
.ch-wrow{ display:flex; align-items:center; gap:10px; font-size:12px; }
.ch-wlbl{ width:70px; color:#4a5a70; font-weight:bold; }
.ch-wbar{ flex:1; height:12px; background:#eef2f7; border-radius:6px; overflow:hidden; }
.ch-wbar i{ display:block; height:100%; background:linear-gradient(90deg,#3ab3f5,#1b7fc2); }
.ch-wval{ width:64px; text-align:right; color:#14202e; font-weight:bold; font-variant-numeric:tabular-nums; }

/* clubhouse: let the white content panel shrink gracefully on small screens */
@media (max-width:720px){ .ch-stats{ grid-template-columns:repeat(2,1fr);} .ch-clanstats{ grid-template-columns:repeat(2,1fr);} }

/* ---------------- Shop / Mall ---------------- */
.shop-panel{ max-width:950px; margin:0 auto; background:#0e141d; border:1px solid #2a3647; border-radius:10px;
  min-height:560px; color:#e9eef5; font-family:Arial,Helvetica,sans-serif; overflow:hidden; }
.sh-loading{ text-align:center; color:#9fb0c6; padding:120px 0; font-size:13px; }
.sh-loading img{ width:20px; height:20px; vertical-align:middle; margin-right:8px; }
.sh-empty{ text-align:center; color:#8094ab; padding:70px 20px; font-size:14px; line-height:1.6; grid-column:1/-1; }
.sh-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid #202b3a;
  background:linear-gradient(180deg,#141d28,#0e141d); flex-wrap:wrap; }
.sh-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.sh-tab{ background:#1a2431; border:1px solid #2a3647; color:#b9c6d8; padding:8px 16px; border-radius:7px;
  font-weight:bold; font-size:13px; cursor:pointer; }
.sh-tab:hover{ background:#223047; color:#fff; }
.sh-tab.on{ background:linear-gradient(180deg,#3ab3f5,#1b7fc2); border-color:#0b4e78; color:#042338; }
.sh-tools{ margin-left:auto; display:flex; gap:8px; }
.sh-rarity,.sh-search{ background:#1a2431; border:1px solid #2a3647; color:#e9eef5; border-radius:7px; padding:8px 10px; font-size:13px; }
.sh-search{ width:150px; max-width:40vw; }
.sh-count{ padding:8px 16px; color:#7f8ea6; font-size:12px; }

.sh-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; padding:4px 16px 20px; }
.sh-card{ --rar:90,100,116; position:relative; background:#131c27; border:1px solid #243244; border-radius:10px;
  padding:12px 10px 10px; text-align:center; transition:transform .12s, box-shadow .12s, border-color .12s; }
.sh-card:hover{ transform:translateY(-3px); border-color:rgb(var(--rar)); box-shadow:0 8px 20px rgba(0,0,0,.45), 0 0 0 1px rgb(var(--rar)) inset; }
.sh-ico{ position:relative; height:92px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:9px;
  background:radial-gradient(ellipse at center, rgba(var(--rar),.28), rgba(var(--rar),.05) 70%, transparent); }
.sh-card.rar-0 .sh-ico{ background:radial-gradient(ellipse at center,#1c2735,#131c27 72%); }
.sh-ico img{ max-width:84px; max-height:84px; image-rendering:auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.sh-badge{ position:absolute; top:6px; left:6px; font-size:9px; font-weight:900; color:#0b1118; padding:2px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:.4px; }
.sh-name{ font-size:12.5px; font-weight:bold; color:#eaf0f8; height:34px; overflow:hidden; line-height:1.35; margin-bottom:7px; }
.sh-prices{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; min-height:22px; }
.sh-price{ font-size:11px; font-weight:900; padding:3px 7px; border-radius:5px; background:#0c141e; border:1px solid #28364a; color:#cfe0ef; font-variant-numeric:tabular-nums; }
.sh-price.cur-MP{ color:#ffd84d; border-color:#5a4a12; }
.sh-price.cur-RT{ color:#ff8a8a; border-color:#5e2626; }
.sh-price.cur-COUPON{ color:#7fe0ff; border-color:#1d4b6e; }
.sh-buy{ display:block; margin-top:9px; background:linear-gradient(180deg,#ffd84d,#f2a800); color:#3a2600; font-weight:900;
  font-size:12px; padding:7px; border-radius:6px; border:1px solid #9a6b00; opacity:0; transform:translateY(4px); transition:.12s; }
.sh-card:hover .sh-buy{ opacity:1; transform:none; }

/* capsules */
.sh-capgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; padding:6px 16px 20px; }
.sh-capsule{ background:#131c27; border:1px solid #243244; border-radius:10px; padding:14px; }
.sh-caphead{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.sh-capname{ font-weight:900; color:#eaf0f8; font-size:14px; }
.sh-caplvl{ color:#8094ab; font-size:11px; margin-bottom:8px; }
.sh-caplist{ list-style:none; margin:0 0 10px; padding:0; }
.sh-caplist li{ display:flex; align-items:center; gap:7px; font-size:12px; color:#c6d2e2; padding:3px 0; }
.sh-caplist li em{ margin-left:auto; color:#7f8ea6; font-style:normal; font-variant-numeric:tabular-nums; }
.sh-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.sh-capsule .sh-buy{ opacity:1; transform:none; margin-top:0; }

@media (max-width:560px){ .sh-tools{ margin-left:0; width:100%; } .sh-search{ flex:1; max-width:none; } }