/* CSGuessr V33.3 Premium UI Polish - Part 3
   Scope: generated category art + 11-15 only: skeletons, info/legal refinement,
   mobile polish, regression-safe presentation, acceptance styling.
   No case/economy/auth/upgrader behavior changes. */

/* ---------- Generated category art ---------- */
.v33-nav-icon[data-v33-icon="upgrader"],
.v33-nav-icon[data-v33-icon="ranked"],
.v33-nav-icon[data-v33-icon="leaderboard"]{
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  border:0!important;
  box-shadow:none!important;
  color:transparent!important;
}
.v33-nav-icon[data-v33-icon="upgrader"]{background-image:url('/v33-icons/upgrader.webp?v=4401-pack')!important}
.v33-nav-icon[data-v33-icon="ranked"]{background-image:url('/v33-icons/ranked.webp?v=4401-pack')!important}
.v33-nav-icon[data-v33-icon="leaderboard"]{background-image:url('/v33-icons/leaderboard.webp?v=4401-pack')!important}
.v33-nav-icon[data-v33-icon="upgrader"]>svg,
.v33-nav-icon[data-v33-icon="ranked"]>svg,
.v33-nav-icon[data-v33-icon="leaderboard"]>svg{visibility:hidden!important}

.side-menu nav>button>.v33-nav-icon[data-v33-icon]{width:44px!important;height:44px!important;background-color:transparent!important}
.home-tools>button>.v33-nav-icon[data-v33-icon]{width:54px!important;height:54px!important;flex:none;background-color:transparent!important}
.center-mode>.v33-nav-icon[data-v33-icon]{width:54px!important;height:54px!important;flex:none;background-color:transparent!important}

/* Intro uses the two approved relevant raster assets and keeps its inventory SVG. */
.v33-intro-feature:nth-child(1)>i{
  background:url('/v33-icons/ranked.webp?v=4401-pack') center/contain no-repeat!important;
}
/* leaderboard.webp ships fully transparent (0% visible pixels), which is why
   the sidebar already substitutes an inline SVG for it. This card used the
   same broken file and rendered an empty tile. */
.v33-intro-feature:nth-child(2)>i{
  background:url('/v33-icons/higherlower.webp?v=4401-pack') center/contain no-repeat!important;
}
.v33-intro-feature:nth-child(3)>i{background:url('/v33-icons/inventory.webp?v=4401-pack') center/contain no-repeat!important}
.v33-intro-feature:nth-child(1)>i>svg,
.v33-intro-feature:nth-child(2)>i>svg{visibility:hidden!important}

/* ---------- 11. Skeleton loading states ---------- */
@keyframes v33-skeleton-sweep{
  0%{background-position:180% 0}
  100%{background-position:-80% 0}
}
.video-state,
.clips-loading,
.operation-loading,
.profile-loading,
.public-profile-loading{
  border:1px solid #ffffff0e;
  border-radius:14px;
  background:linear-gradient(180deg,#0d171f,#091118)!important;
}
.video-state::after,
.clips-loading::after,
.operation-loading::after,
.profile-loading::after,
.public-profile-loading::after{
  content:"";
  display:block;
  width:min(320px,72%);
  height:9px;
  margin:12px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,#ffffff06 20%,#ffffff14 42%,#ffffff06 64%);
  background-size:220% 100%;
  animation:v33-skeleton-sweep 1.35s linear infinite;
}
.case-grid:empty{
  min-height:360px;
  border:1px solid #ffffff0d;
  border-radius:18px;
  background:
    linear-gradient(90deg,transparent,#ffffff08,transparent) 180% 0/55% 100% no-repeat,
    repeating-linear-gradient(90deg,#0d171f 0 22%,transparent 22% 25%);
  animation:v33-skeleton-sweep 1.45s linear infinite;
}
@media(prefers-reduced-motion:reduce){
  .video-state::after,.clips-loading::after,.operation-loading::after,.profile-loading::after,.public-profile-loading::after,.case-grid:empty{animation:none!important}
}

/* ---------- Back to top: one click, visually centered ---------- */
.site-shell>footer>a[href="#top"]:not(.brand),
.site-shell>footer>.v33-back-to-top{
  justify-self:center!important;
  align-self:center!important;
  min-height:40px!important;
  padding:0 16px!important;
  border-radius:10px!important;
}
@media(min-width:801px){
  .site-shell>footer{
    grid-template-columns:minmax(180px,1fr) minmax(360px,2fr) minmax(180px,1fr)!important;
    grid-template-areas:"brand nav nav" "copy nav nav" ". top ."!important;
  }
  .site-shell>footer>a[href="#top"]:not(.brand),.site-shell>footer>.v33-back-to-top{grid-area:top!important;margin-top:12px}
}

/* ---------- 13. Mobile polish ---------- */
@media(max-width:760px){
  .site-shell>.topbar,.site-shell .topbar{min-height:60px;padding-inline:9px!important;gap:6px!important}
  .topbar .brand.brand-button{width:116px!important;height:44px!important;margin-right:auto!important}
  .topbar .menu-trigger,.topbar .settings-icon{width:38px!important;height:38px!important}
  .topbar .quick-play{display:none!important}
  .topbar .header-actions{gap:5px!important}
  .topbar .token-pill{min-width:46px!important;padding-inline:8px!important}
  .topbar .player-pill{min-width:42px!important;padding-inline:6px!important}
  .topbar .player-pill>span{display:none!important}
  .topbar .submit-top{width:40px!important;min-width:40px!important;padding:0!important;font-size:0!important}
  .topbar .submit-top>span{font-size:22px!important;margin:0!important}

  .page-home .home-stage{width:calc(100% - 16px)!important;margin-top:10px!important;border-radius:18px!important;padding-inline:14px!important}
  .home-stage-copy h1{font-size:clamp(46px,15vw,68px)!important}
  .home-stage-copy>p:last-child{font-size:12px!important}
  .home-tools{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .home-tools>button{min-height:92px!important;padding:12px!important;align-items:center!important}
  .home-tools>button>.v33-nav-icon[data-v33-icon]{width:46px!important;height:46px!important}
  .center-mode-grid{grid-template-columns:1fr!important;gap:8px!important}
  .center-mode{min-height:80px!important;padding:11px 12px!important}
  .center-mode>.v33-nav-icon[data-v33-icon]{width:48px!important;height:48px!important}

  .side-menu{width:min(340px,92vw)!important;padding:14px!important}
  .side-menu nav>button,.side-menu nav>.v33-side-link{min-height:60px!important}
  .side-menu nav>button>.v33-nav-icon[data-v33-icon]{width:42px!important;height:42px!important}

  .cases-page,.inventory-page,.upgrader-page,.operation-page,.settings-page,.my-clips-page,.shop-page{padding-left:10px!important;padding-right:10px!important}
  .page-title h1{font-size:clamp(44px,14vw,62px)!important}
  .case-grid{grid-template-columns:1fr!important;gap:10px!important}
  .case-card{min-height:auto!important;padding:16px!important}
  .case-visual{height:190px!important}
  .case-open-count{display:grid!important;gap:10px!important;padding:12px!important}
  .case-open-count>div:last-child{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:5px!important;width:100%!important}
  .case-open-count button{min-height:44px!important}

  .inventory-head{display:grid!important;gap:14px!important;padding:15px!important}
  .inventory-controls{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:8px!important}
  .inventory-controls input,.inventory-controls select,.inventory-controls button{width:100%!important;min-height:44px!important}
  .inventory-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .upgrader-builder{grid-template-columns:1fr!important;gap:10px!important}
  .upgrader-builder>section{min-width:0!important;width:100%!important}
  .upgrade-values{gap:7px!important}

  .case-preview-modal,.case-spinner,.case-batch-reveal,.case-reveal{width:min(96vw,720px)!important;max-height:92dvh!important}
  .case-reveal h3{font-size:clamp(30px,9vw,42px)!important}

  .v33-intro-screen{min-height:100dvh;padding:12px!important;place-items:start center!important}
  .v33-intro-shell{width:100%!important;margin:auto 0!important;border-radius:18px!important}
  .v33-intro-actions{display:grid!important;grid-template-columns:1fr!important}
  .v33-intro-actions button{width:100%!important;min-height:48px!important}

  .site-shell>footer{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"brand" "copy" "nav" "top"!important;text-align:center!important;justify-items:center!important;padding:28px 18px!important;gap:16px!important}
  .site-shell>footer>.brand,.site-shell>footer>p,.csg-legal-links{justify-self:center!important;text-align:center!important}
  .csg-legal-links{justify-items:center!important;width:100%!important}
  .csg-footer-link-row,.csg-footer-meta{justify-content:center!important}
  .site-shell>footer>a[href="#top"]:not(.brand),.site-shell>footer>.v33-back-to-top{grid-area:top!important;margin-top:2px!important}
}

@media(max-width:430px){
  .topbar .brand.brand-button{width:102px!important}
  .topbar .settings-icon{display:none!important}
  .home-tools{grid-template-columns:1fr!important}
  .home-tools>button{min-height:78px!important}
  .inventory-summary{grid-template-columns:1fr 1fr!important}
  .csg-footer-link-row{gap:10px!important}
}

/* ---------- 14. Accessibility/preserve-functionality presentation guards ---------- */
.site-shell :where(button,a,input,select,textarea):focus-visible{
  outline:2px solid color-mix(in srgb,var(--v332-gold,#f6c945) 78%,white)!important;
  outline-offset:3px!important;
}
@media(prefers-reduced-motion:reduce){
  .site-shell *, .v33-intro-screen *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ---------- Home mode priority ---------- */
.page-home .v33-mode-priority-heading{
  width:min(1120px,100%);
  margin:22px auto 10px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  padding:0 4px;
}
.page-home .v33-mode-priority-heading span{
  color:var(--v332-gold,#f6c945);
  font:800 11px/1 'Inter',sans-serif;
  letter-spacing:.18em;
}
.page-home .v33-mode-priority-heading b{
  color:#b9c5cc;
  font:600 12px/1.25 'Inter',sans-serif;
}
.page-home .v33-mode-priority-grid{
  width:min(1120px,100%);
  margin:0 auto 18px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.page-home .v33-mode-priority-grid>.center-mode{
  min-height:96px!important;
  border:1px solid #ffffff16!important;
  background:linear-gradient(180deg,#101a22,#0a1218)!important;
  box-shadow:0 12px 30px #0003!important;
}
.page-home .v33-mode-priority-grid>.center-mode:hover{
  transform:translateY(-2px);
  border-color:#ffffff29!important;
  background:linear-gradient(180deg,#14212b,#0c151c)!important;
}
.page-home .v33-mode-priority-grid>.v33-mode-featured{
  grid-column:1/-1!important;
  min-height:112px!important;
  border-color:color-mix(in srgb,var(--v332-gold,#f6c945) 58%,#36454f)!important;
  background:
    radial-gradient(circle at 82% 30%,color-mix(in srgb,var(--v332-gold,#f6c945) 18%,transparent),transparent 30%),
    linear-gradient(180deg,#151e22,#0b1318)!important;
  box-shadow:0 16px 40px #0005,0 0 0 1px color-mix(in srgb,var(--v332-gold,#f6c945) 8%,transparent)!important;
}
.page-home .v33-mode-priority-grid>.v33-mode-featured span>b{
  color:var(--v332-gold,#f6c945)!important;
  font-size:clamp(24px,2.2vw,34px)!important;
}
.page-home .v33-mode-priority-grid>.v33-mode-featured span>small::after{
  content:' · RECOMMENDED';
  color:var(--v332-gold,#f6c945);
}
.page-home .v33-collection-secondary{
  width:min(1120px,100%);
  margin:8px auto 0!important;
  opacity:.86;
}
.page-home .home-rating-card{
  order:0;
}
@media(max-width:760px){
  .page-home .v33-mode-priority-heading{
    margin:16px auto 8px;
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
  .page-home .v33-mode-priority-grid{
    grid-template-columns:1fr!important;
  }
  .page-home .v33-mode-priority-grid>.v33-mode-featured{
    grid-column:auto!important;
    min-height:96px!important;
  }
  .page-home .v33-mode-priority-grid>.center-mode{
    min-height:86px!important;
  }
}

/* Case cards in a row are stretched to a common height by the grid, but the card
   itself was display:block, so the action row simply followed whatever content came
   before it. Any card carrying an extra element - the New Player Case has a
   "FREE TICKET" badge its neighbours do not - pushed its Open button down: measured
   33px in the first row and 36px in the last, at 1920x1080. Column flex with the
   actions pinned by margin-top:auto puts every Open button on the same line no
   matter what sits above it. .case-card:before is position:absolute and :after is
   display:none, so neither becomes a flex item. */
.case-card{display:flex!important;flex-direction:column!important}
.case-card>.case-card-actions{margin-top:auto!important}