/* CSGuessr V33 visual balance pass.
   Presentation only: desktop density, sidebar stability, and default-theme palette.
   Custom cosmetic themes are intentionally left alone. */

/* ---------- 3. Use wide screens better ---------- */
.page-home .home-rating-card.v33-home-rank-first,
.page-home .v33-mode-priority-heading,
.page-home .v33-mode-priority-grid,
.page-home .v33-home-account-tools,
.page-home .home-tools.v33-home-feature-tools{
  width:min(1480px,calc(100% - 44px))!important;
}

@media(min-width:1500px){
  .page-home .home-stage,
  .page-home .arena-wrap,
  .page-home .leaderboard-section,
  .page-home .how,
  .page-home .submit-banner{
    width:min(1760px,calc(100% - 32px))!important;
  }
}

/* Bring the lower information area closer without removing any content. */
.page-home .arena-wrap{margin-top:46px!important}
.page-home .leaderboard-section,
.page-home .how{margin-top:52px!important}
.page-home .submit-banner{margin-top:54px!important;margin-bottom:20px!important}
.site-shell>footer{margin-top:38px!important}

/* ---------- 4. Sidebar icons never slide when tabs change state ---------- */
.side-menu nav>button,
.side-menu nav>.v33-side-link,
.side-menu nav>button:hover,
.side-menu nav>button:active,
.side-menu nav>button.active,
.side-menu nav>.v33-side-link:hover,
.side-menu nav>.v33-side-link:active{
  transform:none!important;
}
.side-menu nav>button,
.side-menu nav>.v33-side-link{
  grid-template-columns:42px minmax(0,1fr)!important;
  padding-left:9px!important;
  padding-right:9px!important;
}
.side-menu nav>button>i,
.side-menu nav>.v33-side-link>i,
.side-menu nav>button.active>i,
.side-menu nav>button:hover>i,
.side-menu nav>.v33-side-link:hover>i{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
  margin:0!important;
  justify-self:start!important;
  align-self:center!important;
  transform:none!important;
}
.side-menu nav>button>b,
.side-menu nav>button>small,
.side-menu nav>.v33-side-link>b,
.side-menu nav>.v33-side-link>small{
  transform:none!important;
  margin-left:0!important;
}

/* ---------- 5. Default palette: graphite + black + steel blue ---------- */
.site-shell:not([class*="cosmetic-theme-"]),
.site-shell.cosmetic-theme-default{
  --v33-bg:#050607;
  --v33-bg-soft:#090b0e;
  --v33-panel:#0c0f12;
  --v33-panel-2:#11151a;
  --v332-surface:#0c1014;
  --v332-surface-2:#11161b;
  --v332-surface-3:#171d22;
  --v33-line:#ffffff10;
  --v33-line-strong:#ffffff1b;
  --v332-line:#ffffff10;
  --v332-line-strong:#ffffff1c;
  --v33-muted:#8d969d;
  --v332-muted:#8b959c;
  --v332-muted-2:#66727a;
  --v14-bg1:#050607;
  --v14-bg2:#0b0e11;
  --v14-bg3:#11161a;
  --v17-1:#050607;
  --v17-2:#10151a;
  --v17-a:#7897a8;
  --v17-b:#405968;
  background:
    radial-gradient(circle at 14% -5%,#c59b3210,transparent 28%),
    radial-gradient(circle at 86% 14%,#5f86a00d,transparent 30%),
    linear-gradient(180deg,#060708 0%,#090b0d 48%,#050607 100%)!important;
}

.site-shell:not([class*="cosmetic-theme-"]) .topbar,
.site-shell.cosmetic-theme-default .topbar{
  background:linear-gradient(180deg,#101216f6,#090b0ef2)!important;
  border-bottom-color:#ffffff12!important;
}

.site-shell:not([class*="cosmetic-theme-"]) .side-menu,
.site-shell.cosmetic-theme-default .side-menu{
  background:
    radial-gradient(circle at 5% 0%,color-mix(in srgb,var(--v332-gold,#f6c945) 7%,transparent),transparent 24%),
    linear-gradient(180deg,#0e1114 0%,#080a0c 55%,#060708 100%)!important;
  border-right-color:#ffffff12!important;
}
.site-shell:not([class*="cosmetic-theme-"]) .side-menu nav>button:hover,
.site-shell:not([class*="cosmetic-theme-"]) .side-menu nav>button.active,
.site-shell.cosmetic-theme-default .side-menu nav>button:hover,
.site-shell.cosmetic-theme-default .side-menu nav>button.active{
  background:linear-gradient(90deg,#171b1f,#11161a 62%,#0d1114)!important;
  border-color:#3b4b54!important;
  box-shadow:inset 3px 0 color-mix(in srgb,var(--v332-gold,#f6c945) 68%,transparent),0 10px 28px #0004!important;
}

.site-shell:not([class*="cosmetic-theme-"]) .page-home .home-stage,
.site-shell.cosmetic-theme-default .page-home .home-stage{
  background:
    radial-gradient(circle at 80% 12%,#6a8fa00e,transparent 27%),
    radial-gradient(circle at 15% 75%,#ffffff05,transparent 24%),
    linear-gradient(145deg,#101317f2,#090b0ef7 58%,#070809f8)!important;
  border-color:#ffffff12!important;
}

.site-shell:not([class*="cosmetic-theme-"]) .home-rating-card,
.site-shell.cosmetic-theme-default .home-rating-card{
  background:linear-gradient(180deg,#15191e,#0e1115)!important;
  border-color:#ffffff18!important;
}

.site-shell:not([class*="cosmetic-theme-"]) .center-mode,
.site-shell.cosmetic-theme-default .center-mode{
  background:linear-gradient(180deg,#13171b,#0c0f12)!important;
  border-color:#ffffff13!important;
}
.site-shell:not([class*="cosmetic-theme-"]) .center-mode:nth-child(even),
.site-shell.cosmetic-theme-default .center-mode:nth-child(even){
  background:linear-gradient(180deg,#11161a,#0b0e11)!important;
}
.site-shell:not([class*="cosmetic-theme-"]) .center-mode:hover,
.site-shell.cosmetic-theme-default .center-mode:hover{
  background:linear-gradient(180deg,#1a2025,#101419)!important;
  border-color:#40515b!important;
}

.site-shell:not([class*="cosmetic-theme-"]) .home-tools>button,
.site-shell.cosmetic-theme-default .home-tools>button{
  background:linear-gradient(180deg,#111519,#0a0d10)!important;
  border-color:#ffffff12!important;
}
.site-shell:not([class*="cosmetic-theme-"]) .home-tools>button:hover,
.site-shell.cosmetic-theme-default .home-tools>button:hover{
  background:linear-gradient(180deg,#181d22,#0e1216)!important;
  border-color:#3c4c55!important;
}

/* Neutral default surfaces across the rest of the product. */
.site-shell:not([class*="cosmetic-theme-"]) :is(.inventory-head,.upgrader-builder>section,.operation-block,.settings-console,.admin-console,.moderator-console,.case-open-count,.case-preview-modal,.case-spinner,.case-batch-reveal),
.site-shell.cosmetic-theme-default :is(.inventory-head,.upgrader-builder>section,.operation-block,.settings-console,.admin-console,.moderator-console,.case-open-count,.case-preview-modal,.case-spinner,.case-batch-reveal){
  background:linear-gradient(180deg,#12161a,#0b0e11)!important;
  border-color:#ffffff13!important;
}

.site-shell:not([class*="cosmetic-theme-"]) .case-card,
.site-shell.cosmetic-theme-default .case-card{
  background:
    radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--case-accent) 11%,transparent),transparent 35%),
    linear-gradient(160deg,#14181c,#0a0d10 70%)!important;
}

.site-shell:not([class*="cosmetic-theme-"]) .home-pulse,
.site-shell.cosmetic-theme-default .home-pulse{
  background:#090c0fbf!important;
  border-color:#ffffff10!important;
}

.site-shell:not([class*="cosmetic-theme-"]) footer,
.site-shell.cosmetic-theme-default footer{
  background:
    radial-gradient(circle at 18% 0%,color-mix(in srgb,var(--v332-gold,#f6c945) 5%,transparent),transparent 24%),
    linear-gradient(180deg,#0b0d10,#050607)!important;
  border-top-color:#ffffff10!important;
}

@media(max-width:760px){
  .page-home .home-rating-card.v33-home-rank-first,
  .page-home .v33-mode-priority-heading,
  .page-home .v33-mode-priority-grid,
  .page-home .v33-home-account-tools,
  .page-home .home-tools.v33-home-feature-tools{
    width:100%!important;
  }
  .site-shell>footer{margin-top:26px!important}
}