/* Backdrop canvas for the two shader themes.

   The gradient on the canvas is what stands in when WebGL is unavailable or
   prefers-reduced-motion is set, so each theme keeps its identity without a
   single animated frame. */

/* This gradient is the only thing on screen when WebGL is unavailable or
   prefers-reduced-motion is set, so a flat #000 here meant those visitors got a
   literal black rectangle with no theme identity at all. It also shows through
   the shader's own darkest regions, which is what stops the lit areas from
   sitting on a dead void. Kept low and warm-neutral so the ground still reads as
   near-black on an OLED panel. */
#csg-backdrop-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(128% 58% at 50% 60%, #1b160726, transparent 68%),
    radial-gradient(84% 44% at 50% 4%, #0a0f1620, transparent 72%),
    #000;
}
/* Each preset states its own fallback ground, so a visitor on reduced motion or
   without WebGL still gets that theme's identity rather than a shared black. */
body:has(.site-shell.cosmetic-theme-chrome) #csg-backdrop-canvas{
  background:radial-gradient(120% 60% at 30% 0%, #101a26, transparent 70%), #070a0e;
}
body:has(.site-shell.cosmetic-theme-carbon) #csg-backdrop-canvas{
  background:radial-gradient(120% 55% at 50% 100%, #0d0e11, transparent 72%), #050506;
}
body:has(.site-shell.cosmetic-theme-afterplant) #csg-backdrop-canvas{
  background:radial-gradient(120% 60% at 50% 100%, #17110a, transparent 74%), #070604;
}
/* vertigo reads colder and lifts from the deck rather than the horizon */
body:has(.site-shell.cosmetic-theme-vertigo) #csg-backdrop-canvas{
  background:
    radial-gradient(126% 62% at 50% 108%, #070d16, transparent 74%),
    radial-gradient(90% 46% at 50% 16%, #050a12, transparent 76%),
    #000;
}

/* The shell paints its own background over the canvas, so it steps aside for
   these two themes only. Everything above keeps its own surfaces. */
body:has(.site-shell:is(.cosmetic-theme-longrange,.cosmetic-theme-vertigo,.cosmetic-theme-chrome,.cosmetic-theme-carbon,.cosmetic-theme-afterplant)) .site-shell{
  background:transparent!important;
  position:relative;
  z-index:1;
}
body:has(.site-shell:is(.cosmetic-theme-longrange,.cosmetic-theme-vertigo,.cosmetic-theme-chrome,.cosmetic-theme-carbon,.cosmetic-theme-afterplant)) .site-shell>main:before{
  opacity:0!important;
}

/* Palettes. Both keep the site's gold as the action colour so the two themes
   read as environments of one product rather than two products. */
.site-shell.cosmetic-theme-longrange{
  --yellow:#f6c945;
  --yellow-soft:#ffe08a;
  --theme-line:#7a6528;
  --theme-control:#08070480;
  --theme-veil:transparent;
  --v30theme:none;
  --theme-panel:transparent;
  --theme-scene:none;
}
.site-shell.cosmetic-theme-vertigo{
  --yellow:#f6c945;
  --yellow-soft:#ffe6a2;
  --theme-line:#29313a;
  --theme-control:#03040566;
  --theme-veil:transparent;
  --v30theme:none;
  --theme-panel:transparent;
  --theme-scene:none;
}

body:has(.site-shell:is(.cosmetic-theme-longrange,.cosmetic-theme-vertigo,.cosmetic-theme-chrome,.cosmetic-theme-carbon,.cosmetic-theme-afterplant)) .site-shell .home-stage{
  background:transparent!important;
  background-image:none!important;
  box-shadow:0 24px 80px #0008,inset 0 1px #ffffff10!important;
}
body:has(.site-shell:is(.cosmetic-theme-longrange,.cosmetic-theme-vertigo,.cosmetic-theme-chrome,.cosmetic-theme-carbon,.cosmetic-theme-afterplant)) .site-shell .home-stage:before,
body:has(.site-shell:is(.cosmetic-theme-longrange,.cosmetic-theme-vertigo,.cosmetic-theme-chrome,.cosmetic-theme-carbon,.cosmetic-theme-afterplant)) .site-shell .home-stage:after{
  opacity:0!important;
}

/* Panels sit slightly translucent so the backdrop reads behind them without
   costing any text contrast. Vertigo goes darker: a starfield needs the
   surfaces above it to stay solid or the text starts to shimmer. */
body:has(.site-shell.cosmetic-theme-longrange) .site-shell :is(.arena-card,.case-card,.center-mode,.home-rating-card,.skin-card,.cosmetic-card){
  background-color:#05050473!important;
  border-color:#6e5a268f!important;
  backdrop-filter:blur(9px) saturate(115%);
}
body:has(.site-shell.cosmetic-theme-vertigo) .site-shell :is(.arena-card,.case-card,.center-mode,.home-rating-card,.skin-card,.cosmetic-card){
  background-color:#01020363!important;
  border-color:#64707d5c!important;
  backdrop-filter:blur(9px) saturate(110%);
}

/* The glass treatment is deliberately broad, but `background` is a shorthand and
   expands to `background-image:initial`. The header logo is a <button> whose only
   content IS a background-image (.topbar .brand.brand-button, font-size:0), so on
   these two themes this rule was erasing the brand mark entirely - measured at 0%
   lit pixels against 12.7% on every other theme. Excluding .brand-button keeps the
   glass look on every real control and gives the logo back.

   .csg-button-primary is excluded for the same class of reason. The rule replaced
   the background but left `color` alone, so every primary CTA kept its dark
   rgb(16,19,24) text on a new rgba(5,6,7,0.32) near-black glass fill - about a
   1:1 contrast ratio. Submit clip and the login button were literally unreadable
   on these two themes. Primaries keep their solid fill, which is also what the
   icon pack's gold Play and Lock Rating marks expect to sit next to. */
body:has(.site-shell:is(.cosmetic-theme-longrange,.cosmetic-theme-vertigo,.cosmetic-theme-chrome,.cosmetic-theme-carbon,.cosmetic-theme-afterplant)) .site-shell button:not(.close):not(.brand-button):not(.csg-button-primary){
  background:#05060752!important;
  border-color:color-mix(in srgb,var(--yellow) 32%,transparent)!important;
  box-shadow:inset 0 1px 0 #ffffff0d,0 8px 26px #0007!important;
  backdrop-filter:blur(10px) saturate(120%);
}
body:has(.site-shell:is(.cosmetic-theme-longrange,.cosmetic-theme-vertigo,.cosmetic-theme-chrome,.cosmetic-theme-carbon,.cosmetic-theme-afterplant)) .site-shell button:not(.close):not(.brand-button):not(.csg-button-primary):hover{
  background-color:color-mix(in srgb,var(--yellow) 10%,#03030355)!important;
  border-color:color-mix(in srgb,var(--yellow) 62%,transparent)!important;
}

/* Belt and braces: theme-expansion-v1.css also paints every themed button with a
   gradient at !important, and any future broad button rule would hit the logo the
   same way. Restate the brand mark last so it cannot be painted over again. */
body:has(.site-shell[class*="cosmetic-theme-"]) .topbar .brand.brand-button,
.topbar .brand.brand-button{
  background-color:transparent!important;
  background-image:url('/csguessr-header-logo-transparent.png?v=3905-user-logo')!important;
  background-position:center!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

/* ---- navigation surfaces ----

   The sidebar and top bar are layers over the theme, not panels that cover it.
   v22-stability.css:100-113 painted the top bar with a coloured radial blob plus
   an opaque linear wash, and the sidebar with two coloured radial blobs over a
   third gradient - measured, the sidebar resolved to a fully opaque
   srgb(0.126 0.124 0.106), which is why it read as a separate slab pasted over
   the site.

   These replace all of that with a flat near-black tint at low alpha plus blur.
   Flat rather than another gradient on purpose: the colour in this area should
   come from the backdrop showing through and from the selected item, not from
   paint applied to the chrome. Alpha is set so body text still lands well clear
   of 4.5:1 against the darkest thing the backdrop can put behind it. */
body:has(.site-shell[class*="cosmetic-theme-"]) .site-shell .topbar{
  background:#05070ab5!important;
  background-image:none!important;
  border-bottom:1px solid #ffffff14!important;
  box-shadow:0 12px 34px #00000055!important;
  backdrop-filter:blur(18px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(112%)!important;
}
body:has(.site-shell[class*="cosmetic-theme-"]) .site-shell .side-menu{
  background:#04060ab8!important;
  background-image:none!important;
  border-right:1px solid #ffffff17!important;
  box-shadow:26px 0 78px #00000080!important;
  backdrop-filter:blur(22px) saturate(112%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(112%)!important;
}
/* The scrim behind the open sidebar dims the page without hiding the backdrop. */
body:has(.site-shell[class*="cosmetic-theme-"]) .site-shell .nav-scrim{
  background:#00000070!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
}
/* Nav items: transparent at rest so the backdrop reads between them, with the
   accent carried by the selected item rather than by a wash over the whole rail. */
body:has(.site-shell[class*="cosmetic-theme-"]) .site-shell .side-menu nav button{
  background:#ffffff08!important;
  background-image:none!important;
  border:1px solid #ffffff14!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
body:has(.site-shell[class*="cosmetic-theme-"]) .site-shell .side-menu nav button:hover{
  background:#ffffff14!important;
  border-color:#ffffff2e!important;
}
body:has(.site-shell[class*="cosmetic-theme-"]) .site-shell .side-menu nav button.active{
  background:color-mix(in srgb,var(--yellow,#f6c945) 13%,#0a0d12cc)!important;
  border-color:color-mix(in srgb,var(--yellow,#f6c945) 46%,transparent)!important;
}