/* CSGuessr V33 Premium UI Polish - Phase 1
   Scope: 1-5 only: global direction, design system, homepage, footer, topbar.
   No gameplay/economy/case/upgrader/auth behavior changes. */

:root{
  --v33-bg:#060a0e;
  --v33-bg-soft:#091018;
  --v33-panel:#0c141c;
  --v33-panel-2:#101a23;
  --v33-line:#ffffff12;
  --v33-line-strong:#ffffff1c;
  --v33-text:#edf3f5;
  --v33-muted:#82939d;
  --v33-muted-2:#5f737f;
  --v33-gold:var(--yellow,#f6c945);
  --v33-radius:16px;
  --v33-radius-sm:11px;
  --v33-shadow:0 22px 70px #0007;
  --v33-shadow-soft:0 12px 38px #0004;
  --v33-ease:cubic-bezier(.2,.75,.22,1);
}

html{background:var(--v33-bg)}
body{
  background:
    radial-gradient(circle at 12% -10%,color-mix(in srgb,var(--v33-gold) 8%,transparent),transparent 30%),
    radial-gradient(circle at 88% 18%,#5ba7ff09,transparent 28%),
    linear-gradient(180deg,#070b10 0%,#060a0e 48%,#05090c 100%);
  color:var(--v33-text);
}
.site-shell{background:transparent!important;color:var(--v33-text)}
.site-shell main{position:relative}
.site-shell main>section{scroll-margin-top:86px}

/* ---------- Design system ---------- */
.site-shell button,
.site-shell input,
.site-shell select,
.site-shell textarea{font-family:var(--font-body,Inter,Arial,sans-serif)}

.site-shell button:not(:disabled){transition:transform .16s var(--v33-ease),border-color .18s ease,background .18s ease,box-shadow .18s ease,filter .18s ease,color .18s ease}
.site-shell button:not(:disabled):hover{filter:brightness(1.055)}
.site-shell button:not(:disabled):active{transform:translateY(0) scale(.985)}

.page-title h1,
.section-heading h2,
.leaderboard-heading h2,
.how-intro h2,
.submit-banner h2{
  letter-spacing:-.025em;
  text-wrap:balance;
}

.page-title>small,
.section-heading p,
.leaderboard-heading>p,
.how-intro>p,
.panel-heading>p{color:var(--v33-muted)}

.site-shell input,
.site-shell select,
.site-shell textarea{
  border-radius:10px!important;
  border-color:var(--v33-line-strong)!important;
  background:#081018!important;
  color:var(--v33-text)!important;
  box-shadow:inset 0 1px 0 #ffffff05;
}
.site-shell input:focus,
.site-shell select:focus,
.site-shell textarea:focus{
  outline:0;
  border-color:color-mix(in srgb,var(--v33-gold) 55%,#58707d)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--v33-gold) 10%,transparent),inset 0 1px 0 #ffffff06;
}

/* Reusable surfaces, deliberately excluding case/upgrader animation internals. */
.home-rating-card,
.home-tools>button,
.center-mode,
.session-strip,
.mode-switch,
.arena-card,
.leader-empty,
.steps>article,
.inventory-summary,
.settings-spotlight,
.setting-card{
  border-color:var(--v33-line)!important;
  box-shadow:inset 0 1px 0 #ffffff05,var(--v33-shadow-soft);
}

/* ---------- Professional top bar ---------- */
.site-shell>.topbar,
.site-shell .topbar{
  min-height:68px;
  padding-inline:clamp(14px,2vw,28px);
  gap:10px;
  border-bottom:1px solid var(--v33-line)!important;
  background:linear-gradient(180deg,#0b1219f4,#081017ee)!important;
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  backdrop-filter:blur(20px) saturate(125%);
  box-shadow:0 10px 35px #0004,inset 0 -1px color-mix(in srgb,var(--v33-gold) 8%,transparent);
}
.topbar:before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--v33-gold) 32%,transparent),transparent);
}
.topbar .menu-trigger,
.topbar .settings-icon{
  width:40px!important;
  height:40px!important;
  border:1px solid var(--v33-line-strong)!important;
  border-radius:10px!important;
  background:#0b141c!important;
  box-shadow:inset 0 1px #ffffff05;
}
.topbar .menu-trigger:hover,
.topbar .settings-icon:hover{border-color:color-mix(in srgb,var(--v33-gold) 40%,#344650)!important;background:#101b24!important}

.topbar .brand.brand-button{
  width:188px!important;
  height:54px!important;
  margin-right:4px;
  filter:drop-shadow(0 5px 14px #0006);
}

.topbar .quick-play{
  min-height:40px;
  padding:0 16px!important;
  border:1px solid color-mix(in srgb,var(--v33-gold) 35%,#35454e)!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--v33-gold) 12%,#101820),#0d151c)!important;
  color:#f2d97b!important;
  font-weight:900!important;
  letter-spacing:.08em;
  box-shadow:inset 0 1px #ffffff09;
}
.topbar .quick-play:hover{border-color:color-mix(in srgb,var(--v33-gold) 65%,#35454e)!important;box-shadow:0 8px 24px color-mix(in srgb,var(--v33-gold) 9%,transparent),inset 0 1px #ffffff0a}

.topbar .header-actions{gap:8px!important;align-items:center}
.topbar .token-pill,
.topbar .player-pill{
  min-height:40px!important;
  border:1px solid var(--v33-line-strong)!important;
  border-radius:10px!important;
  background:#0b141c!important;
  box-shadow:inset 0 1px #ffffff05;
}
.topbar .token-pill{padding-inline:12px!important;color:#f0d36e!important}
.topbar .player-pill{padding-inline:8px 12px!important}
.topbar .token-pill:hover,
.topbar .player-pill:hover{background:#101a22!important;border-color:#ffffff28!important}

.topbar .submit-top{
  min-height:40px!important;
  padding:0 15px!important;
  border:1px solid color-mix(in srgb,var(--v33-gold) 68%,#8c6c18)!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#f8d25a,#d7aa2f)!important;
  color:#171105!important;
  font-weight:950!important;
  box-shadow:0 8px 24px #0004,inset 0 1px #fff8!important;
}
.topbar .submit-top:hover{box-shadow:0 10px 30px color-mix(in srgb,var(--v33-gold) 16%,transparent),inset 0 1px #fff9!important;filter:brightness(1.04)}

/* ---------- Homepage ---------- */
.page-home .home-stage{
  width:min(1460px,calc(100% - 40px));
  margin:22px auto 0;
  border:1px solid var(--v33-line)!important;
  border-radius:24px!important;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 16%,color-mix(in srgb,var(--v33-gold) 10%,transparent),transparent 26%),
    radial-gradient(circle at 18% 70%,#4b9cff0b,transparent 28%),
    linear-gradient(145deg,#0b131be8,#081017f4 58%,#090e13f4)!important;
  box-shadow:0 34px 110px #0008,inset 0 1px #ffffff08;
}
.page-home .home-stage:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 18%,#ffffff03 46%,transparent 70%);
}
.page-home .hero-grid{opacity:.32!important;mask-image:linear-gradient(180deg,#000,transparent 92%)}
.page-home .home-orbit{opacity:.42!important;filter:saturate(.75)}

.home-stage-copy{max-width:690px}
.home-stage-copy .eyebrow{color:#9dadb6!important;letter-spacing:.17em!important}
.home-stage-copy .eyebrow span{box-shadow:0 0 13px color-mix(in srgb,var(--v33-gold) 54%,transparent)}
.home-stage-copy h1{
  margin-top:10px!important;
  font-size:clamp(48px,6vw,88px)!important;
  line-height:.9!important;
  letter-spacing:-.035em!important;
  text-shadow:0 12px 34px #0006;
}
.home-stage-copy h1 em{color:var(--v33-gold)!important;font-style:normal}
.home-stage-copy>p:last-child{
  max-width:600px;
  margin-top:17px!important;
  color:#9aabb4!important;
  font-size:clamp(11px,1vw,14px)!important;
  line-height:1.65!important;
}

.home-rating-card{
  border-radius:15px!important;
  background:linear-gradient(180deg,#101b25e8,#0a131be8)!important;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.home-rating-card:hover{border-color:#ffffff24!important;box-shadow:0 18px 50px #0006,inset 0 1px #ffffff08}

.home-tools{gap:9px!important}
.home-tools>button{
  border-radius:13px!important;
  background:linear-gradient(180deg,#0f1821d9,#0a1219e8)!important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.home-tools>button:hover{border-color:#ffffff24!important;background:linear-gradient(180deg,#13202ae8,#0c161ee8)!important;box-shadow:0 14px 34px #0005,inset 0 1px #ffffff08}
.home-tools>button i{color:var(--v33-gold)!important}
.home-tools>button small{color:#71858f!important}

.center-mode-grid{gap:10px!important}
.center-mode{
  border-radius:15px!important;
  background:linear-gradient(180deg,#101923e8,#0a1219f2)!important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 16px 44px #0004,inset 0 1px #ffffff05!important;
}
.center-mode:hover{
  transform:translateY(-3px)!important;
  border-color:#ffffff2a!important;
  background:linear-gradient(180deg,#14202ae8,#0d171ff4)!important;
  box-shadow:0 22px 55px #0006,inset 0 1px #ffffff08!important;
}
.center-mode span b{letter-spacing:-.01em}
.center-mode span em{color:#748892!important}
.center-mode>strong{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid #ffffff14;
  border-radius:9px;
  background:#ffffff05;
}
.center-mode.ranked>i{color:var(--v33-gold)!important}

.home-pulse{
  border-color:var(--v33-line)!important;
  border-radius:13px!important;
  background:#071018b8!important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.home-pulse>span{color:#7f929c!important}
.home-pulse>button{color:#9aabb3!important}

/* Bring later home sections into one clean content rail without redesigning them. */
.page-home .arena-wrap,
.page-home .leaderboard-section,
.page-home .how,
.page-home .submit-banner{
  width:min(1460px,calc(100% - 40px));
  margin-left:auto!important;
  margin-right:auto!important;
}
.page-home .arena-wrap{margin-top:72px!important}
.page-home .leaderboard-section,
.page-home .how{margin-top:84px!important}
.page-home .submit-banner{margin-top:86px!important;margin-bottom:30px!important;border-radius:20px!important;overflow:hidden;box-shadow:var(--v33-shadow)}

.section-heading,
.leaderboard-heading{align-items:end!important}
.section-heading h2,
.leaderboard-heading h2,
.how-intro h2{font-size:clamp(36px,4.3vw,64px)!important;line-height:.94!important}
.eyebrow{letter-spacing:.15em!important}

/* ---------- Footer ---------- */
.site-shell>footer{
  position:relative;
  width:100%;
  margin-top:84px!important;
  padding:34px clamp(20px,4vw,64px) 30px!important;
  display:grid!important;
  grid-template-columns:minmax(180px,1fr) minmax(320px,2fr) auto;
  grid-template-areas:"brand nav top" "copy nav top";
  align-items:center!important;
  gap:10px 34px!important;
  border-top:1px solid var(--v33-line)!important;
  background:
    radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--v33-gold) 7%,transparent),transparent 24%),
    linear-gradient(180deg,#080e14,#05090d)!important;
  box-shadow:0 -24px 80px #0003,inset 0 1px #ffffff04;
}
.site-shell>footer:before{
  content:"";
  position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--v33-gold) 34%,transparent),transparent);
}
.site-shell>footer>.brand{grid-area:brand;justify-self:start;text-decoration:none!important}
.site-shell>footer>p{grid-area:copy!important;margin:0!important;color:#667a85!important;font-size:9px!important;line-height:1.5!important;max-width:390px}
.site-shell>footer>a[href="#top"]:not(.brand){
  grid-area:top;
  justify-self:end;
  min-height:36px;
  display:inline-flex;align-items:center;
  padding:0 12px;
  border:1px solid var(--v33-line-strong);
  border-radius:9px;
  background:#0b141b;
  color:#90a1aa!important;
  text-decoration:none!important;
  font-size:8px;font-weight:900;letter-spacing:.08em;
}
.site-shell>footer>a[href="#top"]:not(.brand):hover{color:var(--v33-gold)!important;border-color:color-mix(in srgb,var(--v33-gold) 38%,#34464f)}

.csg-legal-links{
  grid-area:nav;
  min-width:0;
  display:grid!important;
  justify-items:start!important;
  align-items:center!important;
  gap:9px!important;
}
.csg-legal-links .csg-footer-kicker{
  color:#5f737e;
  font-size:7px;
  font-weight:950;
  letter-spacing:.18em;
}
.csg-legal-links .csg-footer-link-row,
.csg-legal-links .csg-footer-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 16px;
}
.csg-legal-links a,
.csg-legal-links button{
  position:relative;
  border:0!important;
  background:transparent!important;
  padding:2px 0!important;
  color:#91a2ab!important;
  font:800 9px var(--font-body,Inter,Arial,sans-serif)!important;
  letter-spacing:.02em!important;
  text-decoration:none!important;
  cursor:pointer;
}
.csg-legal-links .csg-footer-link-row a:hover,
.csg-legal-links button:hover{color:var(--v33-gold)!important}
.csg-legal-links .csg-footer-email{color:#d9e3e7!important}
.csg-legal-links .csg-footer-email:before{content:"✉";margin-right:6px;color:var(--v33-gold)}
.csg-legal-links .csg-footer-cookie{color:#71858f!important}

/* Footer links were 14px tall with 2px vertical padding and no horizontal
   padding, so the smallest ("FAQ") offered a 19x14px target. WCAG 2.2 SC 2.5.8
   asks for 24x24. Rather than pad the links - which would rewrap the row on a
   390px screen - each one carries an invisible ::after that extends the hit area
   5px in every direction, giving >=24px in both axes while the text stays
   exactly where it was. The row gap goes to 10px so neighbouring hit areas meet
   without overlapping (5px + 5px = the 10px column gap on mobile). */
.csg-legal-links .csg-footer-link-row,
.csg-legal-links .csg-footer-meta{row-gap:10px}
/* The cosmetic themes paint background-image:linear-gradient(...) on every
   button with !important, which outranks the background:transparent above and
   is why Cookie settings showed as a grey slab among plain text links - most
   visibly on mobile, where the generic button{min-height:44px} rule stretches
   it to 44px. Keep that 44px: as an invisible tap target it is worth more than
   the 25px the ::after below provides. Only the wash has to go. */
html body .site-shell .csg-legal-links .csg-footer-meta button{
  background-image:none!important;
  display:inline-flex!important;
  align-items:center!important;
}

.csg-legal-links .csg-footer-link-row a::after,
.csg-legal-links .csg-footer-meta a::after,
.csg-legal-links .csg-footer-meta button::after{
  content:"";
  position:absolute;
  inset:-5px;
}

/* The Upgrader's "clear inputs" control is a 9px text button with no padding,
   so it offered a 78x16px target - the last one on the site under the 24x24 in
   WCAG 2.2 SC 2.5.8. Same invisible ::after as the footer links: the tap area
   grows, the label does not move. The bundle does not set position on it. */
.upgrade-clear{position:relative}
.upgrade-clear::after{content:"";position:absolute;inset:-5px}

/* .page-title stacks eyebrow / h1 / action button, and the button carried
   margin-top:0 - it began at exactly the h1's bottom edge (measured 222px for a
   heading ending at 222px), so it sat flush against the title with no breathing
   room at all. The headings here run line-height:.88, so the glyphs also reach
   past their own line box. A small gap separates them without moving anything
   else on the page. */
.page-title>button{margin-top:12px}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .topbar .brand.brand-button{width:158px!important;height:50px!important}
  .topbar .quick-play{padding-inline:12px!important}
  .page-home .home-stage,
  .page-home .arena-wrap,
  .page-home .leaderboard-section,
  .page-home .how,
  .page-home .submit-banner{width:min(100% - 28px,1460px)}
  .site-shell>footer{grid-template-columns:1fr auto;grid-template-areas:"brand top" "nav nav" "copy copy"}
  .csg-legal-links{margin-top:12px}
}

@media(max-width:760px){
  .site-shell .topbar{min-height:60px;padding-inline:10px;gap:6px}
  .topbar .brand.brand-button{width:130px!important;height:46px!important}
  .topbar .quick-play{display:none!important}
  .topbar .token-pill{min-width:48px!important}
  .topbar .player-pill span{display:none!important}
  .topbar .player-pill{padding-inline:6px!important}
  .topbar .submit-top{padding-inline:10px!important;font-size:8px!important}
  .page-home .home-stage{width:calc(100% - 18px);margin-top:10px;border-radius:18px!important}
  .home-stage-copy h1{font-size:clamp(44px,13vw,66px)!important}
  .page-home .arena-wrap,
  .page-home .leaderboard-section,
  .page-home .how,
  .page-home .submit-banner{width:calc(100% - 18px)}
  .site-shell>footer{margin-top:58px!important;padding:28px 18px!important;grid-template-columns:1fr;grid-template-areas:"brand" "nav" "copy" "top";justify-items:start!important}
  .site-shell>footer>a[href="#top"]:not(.brand){justify-self:start;margin-top:8px}
  .csg-legal-links{width:100%;justify-items:start!important}
  .csg-legal-links .csg-footer-link-row,.csg-legal-links .csg-footer-meta{gap:8px 14px}
}

@media(max-width:430px){
  .topbar .brand.brand-button{width:112px!important;height:43px!important}
  .topbar .submit-top{font-size:0!important;width:38px!important;padding:0!important}
  .topbar .submit-top span{font-size:16px!important;margin:0!important}
  .home-stage-copy>p:last-child{font-size:11px!important}
}

@media(prefers-reduced-motion:reduce){
  .site-shell *{scroll-behavior:auto!important}
  .center-mode,.home-tools>button,.topbar button{transition-duration:.01ms!important}
}