/* CSGuessr V33.6 UX + visual identity pass.
   Presentation only. No gameplay/economy/auth/case logic changes. */

:root{--v336-scene:url('/v33-theme-scenes/chrome.svg');--v336-scene-opacity:.12}

/* ---------- More useful desktop canvas ---------- */
.site-shell main{position:relative;isolation:isolate}
.site-shell main>section{position:relative;z-index:2}
.v336-ambient-rail{position:fixed;top:92px;bottom:30px;width:clamp(80px,8vw,150px);z-index:1;pointer-events:none;opacity:.32;filter:saturate(.78)}
.v336-ambient-rail.left{left:0;background:linear-gradient(90deg,#07090bd9,transparent),url('/v33-icons/ranked.webp?v=3305') 32% 18%/74px 74px no-repeat}
.v336-ambient-rail.right{right:0;background:linear-gradient(270deg,#07090bd9,transparent)}
.v336-ambient-rail:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 62px,#9bb2bf14 63px,#9bb2bf14 64px,transparent 65px 126px)}
.v336-ambient-rail:after{position:absolute;writing-mode:vertical-rl;color:#82919a;font:900 7px/1 var(--font-body);letter-spacing:.32em;opacity:.48}
.v336-ambient-rail.left:after{content:"PREMIER ANALYSIS // CSGUESSR";left:18px;bottom:18%}
.v336-ambient-rail.right:after{content:"WATCH // READ // LOCK";right:18px;top:20%}

.page-home .home-stage{box-shadow:0 36px 100px #000a,inset 0 1px #ffffff08!important}
.page-home .home-stage:before{opacity:.42!important}
.page-home .home-rating-card,.page-home .center-mode,.page-home .home-tools>button,.page-home .v33-home-account-tools>*{box-shadow:0 15px 38px #0006,inset 0 1px #ffffff06!important}
.page-home .center-mode:nth-child(3n+2),.page-home .home-tools>button:nth-child(even){background-color:#101418!important}

/* ---------- Leaderboard icon reliability / visibility ---------- */
.home-tools .v33-nav-icon[data-v33-icon="leaderboard"]{position:relative!important;overflow:hidden!important;background-image:none!important}
.home-tools .v33-nav-icon[data-v33-icon="leaderboard"]>.v33-nav-raster{display:block!important;position:absolute!important;inset:3px!important;width:calc(100% - 6px)!important;height:calc(100% - 6px)!important;object-fit:contain!important;filter:brightness(1.45) contrast(1.06) saturate(1.08)!important;opacity:1!important}
.side-menu .v33-nav-icon[data-v33-icon="leaderboard"]>.v33-nav-raster{filter:brightness(1.55) contrast(1.08) saturate(1.08)!important;opacity:1!important}
.side-menu .v33-nav-icon[data-v33-icon]{filter:brightness(1.12) saturate(.96) contrast(1.04)!important}
.side-menu nav>button.active>.v33-nav-icon[data-v33-icon]{filter:brightness(1.28) saturate(1.02)!important}

/* ---------- Leaderboard profile modals cannot be cut off ---------- */
.social-backdrop{overflow:auto!important;align-items:center!important;justify-items:center!important;overscroll-behavior:contain!important}
.social-profile,.public-profile-modal,.profile-modal{max-height:calc(100dvh - 32px)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;scrollbar-gutter:stable}
.social-profile{margin:auto 0!important}
@media(max-height:720px){.social-backdrop{align-items:start!important}.social-profile{margin:8px 0!important;max-height:calc(100dvh - 16px)!important}}

/* ---------- Announcement layout ---------- */
.site-announcement{padding-left:clamp(52px,6vw,88px)!important;padding-right:clamp(52px,6vw,88px)!important;text-align:center!important}
.site-announcement>span{display:block!important;max-width:min(1100px,calc(100vw - 150px));margin:0 auto!important;line-height:1.45}
.site-announcement>i{position:absolute!important;left:max(22px,4vw)!important}
.site-announcement>button{right:max(18px,3vw)!important;top:50%!important;transform:translateY(-50%)!important;width:30px!important;height:30px!important;display:grid!important;place-items:center!important;border:1px solid #ffffff18!important;border-radius:8px!important;background:#06090c66!important;line-height:1!important}
.site-announcement>button:hover{color:#fff!important;background:#10161baa!important;border-color:#ffffff30!important}

/* ---------- Settings now have actual art ---------- */
.settings-grid>.setting-card,.settings-grid>.setting-toggle{position:relative!important;padding-left:78px!important;overflow:hidden}
.settings-grid>[data-v336-setting]:before{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);width:44px;height:44px;background:var(--v336-setting-art) center/contain no-repeat;filter:drop-shadow(0 8px 10px #0007);opacity:.96}
.settings-grid>[data-v336-setting="mode"]{--v336-setting-art:url('/v33-setting-icons/mode.svg')}
.settings-grid>[data-v336-setting="sound"]{--v336-setting-art:url('/v33-setting-icons/sound.svg')}
.settings-grid>[data-v336-setting="display"]{--v336-setting-art:url('/v33-setting-icons/display.svg')}
.settings-grid>[data-v336-setting="autoplay"]{--v336-setting-art:url('/v33-setting-icons/autoplay.svg')}
.settings-grid>[data-v336-setting="compact"]{--v336-setting-art:url('/v33-setting-icons/compact.svg')}
.settings-grid>[data-v336-setting="motion"]{--v336-setting-art:url('/v33-setting-icons/motion.svg')}
.settings-grid>[data-v336-setting="contrast"]{--v336-setting-art:url('/v33-setting-icons/contrast.svg')}
.settings-grid>.setting-toggle>span{min-width:0}
.settings-grid>.setting-toggle>i{flex:none}
.settings-spotlight{background:linear-gradient(110deg,#12171b,#0a0d0f 58%,#111820)!important;box-shadow:inset 0 1px #ffffff08,0 18px 45px #0005!important}

/* ---------- Theme scenes: identity beyond color ---------- */
.site-shell.cosmetic-theme-major-gold{--v336-scene:url('/v33-theme-scenes/major-gold.svg');--v336-scene-opacity:.28}
.site-shell.cosmetic-theme-lan-night{--v336-scene:url('/v33-theme-scenes/lan-night.svg');--v336-scene-opacity:.28}
.site-shell.cosmetic-theme-mirage-dust{--v336-scene:url('/v33-theme-scenes/mirage-dust.svg');--v336-scene-opacity:.30}
.site-shell.cosmetic-theme-ancient{--v336-scene:url('/v33-theme-scenes/ancient.svg');--v336-scene-opacity:.29}
.site-shell.cosmetic-theme-neon-grid{--v336-scene:url('/v33-theme-scenes/neon-grid.svg');--v336-scene-opacity:.34}
.site-shell.cosmetic-theme-black-ice{--v336-scene:url('/v33-theme-scenes/black-ice.svg');--v336-scene-opacity:.32}
.site-shell.cosmetic-theme-void{--v336-scene:url('/v33-theme-scenes/void.svg');--v336-scene-opacity:.34}
.site-shell.cosmetic-theme-chrome{--v336-scene:url('/v33-theme-scenes/chrome.svg');--v336-scene-opacity:.28}
.site-shell.cosmetic-theme-dragonfire{--v336-scene:url('/v33-theme-scenes/dragonfire.svg');--v336-scene-opacity:.31}

.site-shell:where(.cosmetic-theme-major-gold,.cosmetic-theme-lan-night,.cosmetic-theme-mirage-dust,.cosmetic-theme-ancient,.cosmetic-theme-neon-grid,.cosmetic-theme-black-ice,.cosmetic-theme-void,.cosmetic-theme-chrome,.cosmetic-theme-dragonfire) main:before{content:"";position:fixed;z-index:0;pointer-events:none;inset:68px 0 0;background-image:var(--v336-scene);background-size:cover;background-position:center;opacity:var(--v336-scene-opacity);mix-blend-mode:screen}
.site-shell:where(.cosmetic-theme-major-gold,.cosmetic-theme-lan-night,.cosmetic-theme-mirage-dust,.cosmetic-theme-ancient,.cosmetic-theme-neon-grid,.cosmetic-theme-black-ice,.cosmetic-theme-void,.cosmetic-theme-chrome,.cosmetic-theme-dragonfire) .home-stage{background-image:linear-gradient(145deg,#090c10e8,#10161be8 58%,#07090ce8),var(--v336-scene)!important;background-size:cover!important;background-position:center!important;background-blend-mode:normal,screen!important}

/* Theme cards/previews expose the same decorative identity before purchase/equip. */
.cosmetic-theme-major-gold .ui-theme-preview,.cosmetic-theme-major-gold.cosmetic-mini{background-image:url('/v33-theme-scenes/major-gold.svg')!important;background-size:cover!important}
.cosmetic-theme-lan-night .ui-theme-preview,.cosmetic-theme-lan-night.cosmetic-mini{background-image:url('/v33-theme-scenes/lan-night.svg')!important;background-size:cover!important}
.cosmetic-theme-mirage-dust .ui-theme-preview,.cosmetic-theme-mirage-dust.cosmetic-mini{background-image:url('/v33-theme-scenes/mirage-dust.svg')!important;background-size:cover!important}
.cosmetic-theme-ancient .ui-theme-preview,.cosmetic-theme-ancient.cosmetic-mini{background-image:url('/v33-theme-scenes/ancient.svg')!important;background-size:cover!important}
.cosmetic-theme-neon-grid .ui-theme-preview,.cosmetic-theme-neon-grid.cosmetic-mini{background-image:url('/v33-theme-scenes/neon-grid.svg')!important;background-size:cover!important}
.cosmetic-theme-black-ice .ui-theme-preview,.cosmetic-theme-black-ice.cosmetic-mini{background-image:url('/v33-theme-scenes/black-ice.svg')!important;background-size:cover!important}
.cosmetic-theme-void .ui-theme-preview,.cosmetic-theme-void.cosmetic-mini{background-image:url('/v33-theme-scenes/void.svg')!important;background-size:cover!important}
.cosmetic-theme-chrome .ui-theme-preview,.cosmetic-theme-chrome.cosmetic-mini{background-image:url('/v33-theme-scenes/chrome.svg')!important;background-size:cover!important}
.cosmetic-theme-dragonfire .ui-theme-preview,.cosmetic-theme-dragonfire.cosmetic-mini{background-image:url('/v33-theme-scenes/dragonfire.svg')!important;background-size:cover!important}

/* Default theme gets structure and object layers too, not a flat blue wash. */
.site-shell:not([class*="cosmetic-theme-"]) .home-stage,.site-shell.cosmetic-theme-default .home-stage{background-image:radial-gradient(circle at 78% 14%,#6c8ea00e,transparent 27%),radial-gradient(circle at 12% 80%,#d4ad4510,transparent 24%),linear-gradient(145deg,#0b0e11f4,#101419f6 52%,#080a0cf7),url('/v33-theme-scenes/chrome.svg')!important;background-size:auto,auto,auto,cover!important;background-position:center!important;background-blend-mode:normal,normal,normal,screen!important}

/* Clearer section rhythm and less "one blob" feeling. */
.page-home .v33-mode-priority-heading,.page-home .v33-home-account-tools,.page-home .home-tools.v33-home-feature-tools{position:relative}
.page-home .v33-mode-priority-heading:before,.page-home .v33-home-account-tools:before,.page-home .home-tools.v33-home-feature-tools:before{content:"";position:absolute;left:0;right:0;top:-13px;height:1px;background:linear-gradient(90deg,transparent,#ffffff13 12%,#ffffff13 88%,transparent)}
.page-home .v33-home-account-tools{padding-top:4px!important}
.page-home .home-tools.v33-home-feature-tools{padding-top:3px!important}

/* Back-to-top is a plain centered utility, never a logo/crosshair. */
.site-shell>footer>a.v33-back-to-top{justify-self:center!important;min-width:126px!important;justify-content:center!important;background:#0b0e11!important;border-color:#ffffff18!important;color:#a9b3b9!important;z-index:4!important}
.site-shell>footer>a.v33-back-to-top:hover{color:#f2c84b!important;border-color:#8c7332!important;background:#11161a!important}

@media(max-width:1180px){.v336-ambient-rail{display:none}.settings-grid>.setting-card,.settings-grid>.setting-toggle{padding-left:70px!important}.settings-grid>[data-v336-setting]:before{left:16px;width:40px;height:40px}}
@media(max-width:680px){.site-announcement{padding-left:48px!important;padding-right:48px!important}.site-announcement>span{max-width:calc(100vw - 110px)}.settings-grid>.setting-card,.settings-grid>.setting-toggle{padding-left:68px!important}.social-profile,.public-profile-modal,.profile-modal{max-height:calc(100dvh - 14px)!important}}