/* CSGuessr V33.2 Premium UI Polish - Part 2
   Scope: 6-10 only. Navigation, cards/panels, typography, case presentation,
   and the first-run intro. No auth/economy/case-opening/upgrader logic changes. */

:root{
  --v332-surface:#0c151d;
  --v332-surface-2:#101c25;
  --v332-surface-3:#15232d;
  --v332-line:#ffffff12;
  --v332-line-strong:#ffffff20;
  --v332-copy:#edf3f5;
  --v332-muted:#8a9aa4;
  --v332-muted-2:#647781;
  --v332-gold:var(--yellow,#f6c945);
  --v332-radius:15px;
  --v332-shadow:0 22px 70px #0008;
}

/* 6. Sidebar / navigation */
.side-menu{
  width:min(370px,94vw)!important;
  padding:18px!important;
  background:
    radial-gradient(circle at 8% 0%,color-mix(in srgb,var(--v332-gold) 11%,transparent),transparent 25%),
    linear-gradient(180deg,#0d161e 0%,#081016 100%)!important;
  border-right:1px solid var(--v332-line-strong)!important;
  box-shadow:34px 0 110px #000c!important;
}
.side-menu-head{
  min-height:58px!important;
  margin-bottom:9px;
  padding:0 2px 14px!important;
  border-bottom:1px solid var(--v332-line)!important;
}
.side-menu-head .side-home{
  min-width:138px!important;
  height:44px!important;
  border:1px solid color-mix(in srgb,var(--v332-gold) 65%,#6d571f)!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,#f7d25b,#d7aa30)!important;
  box-shadow:0 9px 28px #0005,inset 0 1px #fff8!important;
}
.side-menu nav{gap:4px!important}
.side-menu nav>.v33-nav-label{
  margin:17px 10px 6px!important;
  color:#637783!important;
  font-size:8px!important;
  font-weight:950!important;
  letter-spacing:.18em!important;
}
.side-menu nav>button,
.side-menu nav>.v33-side-link{
  min-height:58px!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:transparent!important;
  padding:9px 11px!important;
  color:inherit;
  text-decoration:none;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease!important;
}
.side-menu nav>.v33-side-link{
  display:grid;
  grid-template-columns:38px 1fr;
  grid-template-rows:1fr 1fr;
  column-gap:11px;
  align-items:center;
}
.side-menu nav>button:hover,
.side-menu nav>button.active,
.side-menu nav>.v33-side-link:hover{
  border-color:color-mix(in srgb,var(--v332-gold) 40%,#394b55)!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--v332-gold) 8%,#111d25),#0f1921)!important;
  box-shadow:inset 3px 0 color-mix(in srgb,var(--v332-gold) 70%,transparent),0 10px 28px #0003!important;
}
.side-menu nav>button:hover,
.side-menu nav>.v33-side-link:hover{transform:translateX(2px)!important}
.side-menu nav>button>i,
.side-menu nav>.v33-side-link>i{
  grid-row:1/3;
  width:38px!important;
  height:38px!important;
  align-self:center;
  display:grid!important;
  place-items:center;
  color:#a8b7c0!important;
  border:1px solid #354955!important;
  border-radius:10px!important;
  background:#101c24!important;
  box-shadow:inset 0 1px #ffffff06;
  font-style:normal;
}
.side-menu nav>button.active>i{
  color:#171204!important;
  border-color:var(--v332-gold)!important;
  background:var(--v332-gold)!important;
  box-shadow:0 0 22px color-mix(in srgb,var(--v332-gold) 22%,transparent)!important;
}
.side-menu nav button>b,
.side-menu nav>.v33-side-link>b{align-self:end;color:#e4ecef!important;font-size:11px!important;font-weight:850!important}
.side-menu nav button>small,
.side-menu nav>.v33-side-link>small{align-self:start;margin-top:3px;color:#71848e!important;font-size:8px!important;line-height:1.3}
.side-menu .v33-nav-icon svg,
.home-tools .v33-nav-icon svg,
.center-mode .v33-nav-icon svg{width:22px;height:22px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side-menu .side-submit{border-radius:11px!important;box-shadow:0 12px 34px #0005!important}

/* 7. Cards / panels */
.center-mode,
.home-tools>button,
.case-card,
.skin-card,
.inventory-summary>span,
.inventory-head,
.upgrader-builder>section,
.operation-block,
.pass-track article,
.mission-grid article,
.leader-empty,
.podium-card,
.social-profile,
.settings-console,
.admin-console,
.moderator-console{
  border-radius:var(--v332-radius)!important;
}
.center-mode,
.home-tools>button,
.case-card,
.skin-card,
.pass-track article,
.mission-grid article,
.podium-card{
  border-color:var(--v332-line)!important;
  box-shadow:0 14px 38px #0004,inset 0 1px #ffffff06!important;
}
.center-mode:hover,
.home-tools>button:hover,
.case-card:hover,
.skin-card:hover,
.podium-card:hover{
  border-color:color-mix(in srgb,var(--v332-gold) 32%,#4b5e69)!important;
  box-shadow:0 22px 55px #0006,inset 0 1px #ffffff09!important;
}
.inventory-head,
.upgrader-builder>section,
.operation-block,
.settings-console,
.admin-console,
.moderator-console{
  background:linear-gradient(180deg,#101b23ed,#0b141bee)!important;
  border-color:var(--v332-line)!important;
  box-shadow:0 20px 60px #0005,inset 0 1px #ffffff05;
}

/* 8. Typography */
.page-title h1,
.section-heading h2,
.leaderboard-heading h2,
.how-intro h2,
.operation-hero h1,
.case-preview-modal h2,
.case-spinner h2,
.case-reveal h3{
  letter-spacing:-.03em!important;
  text-wrap:balance;
}
.page-title h1{font-size:clamp(48px,5.2vw,76px)!important;line-height:.88!important}
.page-title>small,
.panel-heading p,
.case-card p,
.inventory-head small,
.operation-heading small,
.social-profile p{
  color:var(--v332-muted)!important;
  line-height:1.58!important;
}
.eyebrow,
.case-card>small,
.case-preview-modal>header span,
.case-spinner>header span,
.case-reveal>span{
  font-weight:950!important;
  letter-spacing:.16em!important;
}
.center-mode b,
.side-menu b,
.case-card h2,
.case-reveal h3,
.case-batch-reveal h2{font-family:var(--font-display)!important}
.site-shell button{letter-spacing:.025em}

/* 9. Cases presentation only. Do not touch track distance, pointer geometry, API or odds. */
.cases-page{max-width:1320px!important;padding-top:56px!important}
.case-console{gap:16px!important}
.case-disclaimer{
  min-height:64px!important;
  border:1px solid color-mix(in srgb,var(--v332-gold) 26%,#31434d)!important;
  border-radius:14px!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--v332-gold) 8%,#111b23),#0d161d)!important;
  box-shadow:inset 0 1px #ffffff05;
}
.case-open-count{
  border:1px solid var(--v332-line)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#111d26,#0c161e)!important;
  box-shadow:0 12px 34px #0004,inset 0 1px #ffffff05;
}
.case-open-count button{border-radius:9px!important}
.case-open-count button.active{
  box-shadow:0 8px 22px color-mix(in srgb,var(--v332-gold) 12%,transparent),inset 0 1px #fff7!important;
}
.case-grid{gap:14px!important}
.case-card{
  min-height:445px!important;
  padding:20px!important;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 24%,color-mix(in srgb,var(--case-accent) 14%,transparent),transparent 36%),
    linear-gradient(160deg,#111c25,#0a1219 68%)!important;
}
.case-card:after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(125deg,transparent 30%,#ffffff05 48%,transparent 66%);
  transform:translateX(-110%);
  transition:transform .65s cubic-bezier(.2,.75,.2,1);
}
.case-card:hover:after{transform:translateX(110%)}
.case-visual{height:215px!important}
.case-card h2{font-size:30px!important;margin-top:7px!important}
.case-card p{max-width:310px!important;min-height:40px!important;margin-bottom:16px!important}
.case-card-meta{padding:8px 0!important;border-top:1px solid #ffffff0a;border-bottom:1px solid #ffffff0a}
.case-card-actions{gap:8px!important}
.case-card-actions button{height:46px!important;border-radius:9px!important}
.case-card-actions .case-open-button{box-shadow:0 9px 24px #0004,inset 0 1px #fff6}
.v22-case-intel>span{border-radius:9px!important;background:#071018a8!important}

.case-preview-backdrop,
.case-spin-backdrop,
.case-reveal-backdrop{
  background:#02070be8!important;
  -webkit-backdrop-filter:blur(18px) saturate(115%)!important;
  backdrop-filter:blur(18px) saturate(115%)!important;
}
.case-preview-modal,
.case-spinner,
.case-batch-reveal{
  border-color:#ffffff20!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#0d171f,#081016)!important;
  box-shadow:0 42px 130px #000e,inset 0 1px #ffffff08!important;
}
.case-preview-modal>header,
.case-spinner>header{
  background:
    radial-gradient(circle at 12% 30%,color-mix(in srgb,var(--v332-gold) 10%,transparent),transparent 32%),
    linear-gradient(180deg,#111d25,#0c151c)!important;
  border-bottom-color:var(--v332-line)!important;
}
.case-preview-modal>header button{border-radius:10px!important}
.case-drop-grid{padding:16px!important;gap:10px!important}
.case-drop-card{border-radius:12px!important;box-shadow:0 10px 28px #0003,inset 0 1px #ffffff04}
.case-preview-tools{background:#0b141b!important;border-bottom-color:var(--v332-line)!important;padding:11px 16px!important}

.case-spinner-window{
  border-color:#ffffff1c!important;
  border-radius:14px!important;
  background:linear-gradient(90deg,#000b,#0f1921 16% 84%,#000b)!important;
  box-shadow:inset 0 0 60px #0008,0 12px 38px #0005;
}
.spinner-item{
  border-radius:11px!important;
  box-shadow:0 10px 28px #0004,inset 0 1px #ffffff06;
}
.case-spinner>p{color:#768994!important;letter-spacing:.12em!important}
.case-spinner-stack{background:linear-gradient(180deg,#081016,#0d171f)!important}
.stacked-spinner-row .case-spinner-window{border-radius:10px!important}

.case-reveal{
  border-radius:22px!important;
  border-color:color-mix(in srgb,var(--rarity) 72%,#ffffff20)!important;
  background:
    radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--skin-accent) 22%,transparent),transparent 39%),
    linear-gradient(180deg,#111921,#090f15)!important;
  box-shadow:0 45px 140px #000e,0 0 75px color-mix(in srgb,var(--skin-accent) 12%,transparent),inset 0 1px #ffffff09!important;
}
.case-reveal:after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rarity) 18%,transparent);
}
.reveal-weapon-image{margin-top:28px!important;filter:drop-shadow(0 22px 18px #000b) drop-shadow(0 0 30px color-mix(in srgb,var(--skin-accent) 27%,transparent))!important}
.case-reveal h2{color:#93a2ab!important;letter-spacing:.03em}
.case-reveal h3{font-size:42px!important}
.case-reveal>button,
.case-batch-reveal>button{border-radius:10px!important;box-shadow:0 10px 28px #0005,inset 0 1px #fff6}
.case-reveal-actions{gap:8px!important}
.case-reveal-actions button{border-radius:10px!important;background:#121f28!important;border-color:#40535f!important}
.case-reveal-actions button:nth-child(2){background:#67d391!important;border-color:#67d391!important;color:#0a1610!important}
.case-reveal-actions button:last-child{background:var(--v332-gold)!important;border-color:var(--v332-gold)!important;color:#151104!important}
.case-batch-reveal article{border-radius:11px!important}

/* 10. Full first-run introduction */
html.v33-intro-pending{overflow:hidden}
html.v33-intro-pending .site-shell{visibility:hidden}
.v33-intro-screen{
  position:fixed;
  inset:0;
  z-index:300000;
  overflow:auto;
  display:grid;
  place-items:center;
  padding:clamp(18px,4vw,56px);
  background:
    radial-gradient(circle at 15% 16%,color-mix(in srgb,var(--v332-gold) 12%,transparent),transparent 28%),
    radial-gradient(circle at 86% 72%,#579cff10,transparent 28%),
    linear-gradient(145deg,#05090d,#081118 56%,#05090d);
  animation:v33IntroIn .36s ease both;
}
.v33-intro-screen:before{
  content:"";
  pointer-events:none;
  position:fixed;
  inset:0;
  opacity:.18;
  background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(circle at center,#000 18%,transparent 78%);
  mask-image:radial-gradient(circle at center,#000 18%,transparent 78%);
}
.v33-intro-screen.closing{animation:v33IntroOut .3s ease forwards;pointer-events:none}
.v33-intro-shell{
  position:relative;
  z-index:1;
  width:min(1180px,100%);
  min-height:min(720px,calc(100vh - 70px));
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(370px,.88fr);
  overflow:hidden;
  border:1px solid #ffffff1b;
  border-radius:28px;
  background:linear-gradient(145deg,#0c151deF,#081017f5 68%);
  box-shadow:0 48px 160px #000e,inset 0 1px #ffffff09;
}
.v33-intro-main{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding:clamp(38px,6vw,78px);
}
.v33-intro-main:after{
  content:"";
  pointer-events:none;
  position:absolute;
  width:390px;height:390px;
  left:-210px;bottom:-230px;
  border:1px solid color-mix(in srgb,var(--v332-gold) 22%,transparent);
  border-radius:50%;
  box-shadow:0 0 0 70px color-mix(in srgb,var(--v332-gold) 3%,transparent),0 0 0 140px color-mix(in srgb,var(--v332-gold) 2%,transparent);
}
.v33-intro-logo{width:min(280px,64vw);height:auto;object-fit:contain;margin-bottom:38px;filter:drop-shadow(0 12px 30px #0008)}
.v33-intro-kicker{display:flex;align-items:center;gap:10px;color:var(--v332-gold);font-size:9px;font-weight:950;letter-spacing:.19em;text-transform:uppercase}
.v33-intro-kicker:before{content:"";width:28px;height:2px;background:var(--v332-gold);box-shadow:0 0 14px color-mix(in srgb,var(--v332-gold) 50%,transparent)}
.v33-intro-main h1{
  max-width:760px;
  margin:18px 0 18px;
  color:#f1f5f6;
  font:900 clamp(58px,7vw,102px)/.83 var(--font-display);
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.v33-intro-main h1 em{color:var(--v332-gold);font-style:normal}
.v33-intro-main>p{max-width:650px;margin:0;color:#93a4ae;font-size:14px;line-height:1.72}
.v33-intro-actions{display:flex;align-items:center;gap:10px;margin-top:34px}
.v33-intro-start{
  min-width:210px;height:54px;
  border:1px solid var(--v332-gold);
  border-radius:11px;
  background:linear-gradient(180deg,#f9d45d,#d8ac31);
  color:#171204;
  font-size:10px;font-weight:950;letter-spacing:.08em;
  cursor:pointer;
  box-shadow:0 14px 38px #0005,inset 0 1px #fff8;
}
.v33-intro-start:hover{transform:translateY(-2px);box-shadow:0 18px 45px color-mix(in srgb,var(--v332-gold) 13%,#0006),inset 0 1px #fff9}
.v33-intro-skip{
  height:54px;padding:0 18px;
  border:1px solid #ffffff18;
  border-radius:11px;
  background:#0d1820;
  color:#879aa5;
  font-size:9px;font-weight:850;
  cursor:pointer;
}
.v33-intro-note{margin-top:17px!important;color:#657984!important;font-size:9px!important}
.v33-intro-features{
  position:relative;
  display:grid;
  align-content:center;
  gap:10px;
  padding:clamp(28px,4vw,52px);
  border-left:1px solid #ffffff10;
  background:
    radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--v332-gold) 8%,transparent),transparent 30%),
    #081118c7;
}
.v33-intro-feature{
  display:grid;
  grid-template-columns:58px 1fr;
  align-items:center;
  gap:16px;
  min-height:126px;
  padding:18px;
  border:1px solid #ffffff12;
  border-radius:16px;
  background:linear-gradient(145deg,#111d26,#0c161e);
  box-shadow:0 14px 35px #0003,inset 0 1px #ffffff05;
}
.v33-intro-feature>i{
  width:58px;height:58px;
  display:grid;place-items:center;
  color:var(--v332-gold);
  border:1px solid color-mix(in srgb,var(--v332-gold) 34%,#3b4e59);
  border-radius:14px;
  background:color-mix(in srgb,var(--v332-gold) 6%,#0d1820);
  font-style:normal;
}
.v33-intro-feature svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v33-intro-feature span{display:block;color:var(--v332-gold);font-size:7px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
.v33-intro-feature b{display:block;margin:7px 0 5px;color:#edf3f5;font:850 21px/1 var(--font-display);text-transform:uppercase}
.v33-intro-feature p{margin:0;color:#738792;font-size:9px;line-height:1.55}
.v33-intro-reopen{display:none}

@keyframes v33IntroIn{from{opacity:0;transform:scale(1.01)}}
@keyframes v33IntroOut{to{opacity:0;transform:scale(.992)}}

@media(max-width:900px){
  .v33-intro-shell{grid-template-columns:1fr;min-height:0}
  .v33-intro-features{border-left:0;border-top:1px solid #ffffff10;grid-template-columns:repeat(3,1fr);padding:20px}
  .v33-intro-feature{grid-template-columns:1fr;align-content:start;min-height:180px}
  .v33-intro-feature>i{width:46px;height:46px}
}
@media(max-width:680px){
  .side-menu{width:min(350px,94vw)!important}
  .cases-page{padding:40px 12px 76px!important}
  .case-card{min-height:420px!important}
  .case-reveal{border-radius:16px!important}
  .v33-intro-screen{padding:10px;place-items:start center}
  .v33-intro-shell{border-radius:18px;margin:8px 0}
  .v33-intro-main{padding:30px 22px 28px}
  .v33-intro-logo{width:210px;margin-bottom:24px}
  .v33-intro-main h1{font-size:clamp(50px,16vw,74px)}
  .v33-intro-main>p{font-size:12px}
  .v33-intro-actions{display:grid;grid-template-columns:1fr;margin-top:26px}
  .v33-intro-start,.v33-intro-skip{width:100%}
  .v33-intro-features{grid-template-columns:1fr;padding:12px}
  .v33-intro-feature{grid-template-columns:48px 1fr;min-height:105px;padding:14px}
  .v33-intro-feature>i{width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){
  .v33-intro-screen,.v33-intro-screen.closing{animation-duration:.01ms!important}
  .case-card:after{display:none}
}