/* CashComp V67 — global visual stability polish. Visual layer only. */
:root{
  --cc-header-h:72px;
}

/* Stable geometry: avoid width reflow when the page gains/loses a scrollbar. */
html{
  scrollbar-gutter:stable;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
html,body{min-width:0}
*,*::before,*::after{box-sizing:border-box}
img,svg{max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}
button{font-family:inherit}

/* Shell / header: isolate paint and eliminate sub-pixel animation jitter. */
.topbar{
  isolation:isolate;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:auto;
  transition:none!important;
}
.topbar,.topbar *{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.top-brand,.topnav,.top-actions{min-width:0}
.top-actions{flex:0 0 auto}
.topnav{min-width:0}
.top-link,.top-actions button{transform:none!important}
.top-link:active,.top-actions button:active{transform:none!important}

/* Wordmark: fixed intrinsic geometry, no floating/glow/sweep layers. */
.cashcomp-wordmark{
  display:block!important;
  flex:0 0 auto;
  aspect-ratio:1055 / 159;
  overflow:hidden!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  transition:none!important;
  animation:none!important;
  line-height:0;
}
.cashcomp-wordmark-img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:left center!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  transition:none!important;
  animation:none!important;
  user-select:none;
  -webkit-user-drag:none;
}
.cashcomp-wordmark::before,.cashcomp-wordmark::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}
.brand:hover .cashcomp-wordmark,.top-brand:hover .cashcomp-wordmark,
.brand:focus .cashcomp-wordmark,.top-brand:focus .cashcomp-wordmark,
.brand:active .cashcomp-wordmark,.top-brand:active .cashcomp-wordmark{
  transform:none!important;
  filter:none!important;
}

/* Prevent icon / label layout shifts. */
.top-actions .circle,.top-actions .mobile-menu{flex:0 0 auto}
.top-actions svg{display:block;overflow:visible}
.notification-button{position:relative}
.notification-badge{pointer-events:none}
.account-chip{max-width:190px;min-width:0}
#chipName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Panels and controls should not visually jump on hover/press. */
.v66-panel,.content-box,.ref-panel,.match-card,.challenge-card,.reward-card,.step-card,.stat{
  transform:none!important;
}
.v66-panel,.v66-panel *{min-width:0}
.v66-reward-banner:hover,.v66-reward-banner:active{transform:none!important}
.v66-format-card,.v66-rank-row,.v66-game-list>button,.side-item,.top-link,
.top-actions button,.v66-primary,.v66-secondary,.add-game,.pill-action{
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

/* Long/dynamic content must never blow up cards. */
.v66-system-grid small,.v66-game-list strong,.v66-game-list small,.v66-game-list em,
.v66-security-grid strong,.v66-security-grid small{
  overflow:hidden;
  text-overflow:ellipsis;
}
.v66-system-grid small{white-space:nowrap}
.v66-game-list span,.v66-security-grid span{min-width:0}

/* Drawer: stable fixed layer, no accidental horizontal scroll. */
.sidebar{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.drawer-scrim{touch-action:none}
body.drawer-open{overflow:hidden}

/* Desktop reference canvas: preserve V66 placement while forcing integral, stable logo rendering. */
@media(min-width:1360px){
  body.v66-home-route .topbar{transform:translateZ(0)!important}
  body.v66-home-route .top-wordmark{height:auto!important;aspect-ratio:1055 / 159!important}
  body.v66-home-route .top-actions{white-space:nowrap}
  body.v66-home-route .top-link{white-space:nowrap}
}

/* Mid-size desktop/tablet: prevent nav squeezing the logo/actions into oscillating widths. */
@media(min-width:901px) and (max-width:1359px){
  .topbar{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important}
  .top-brand{min-width:0!important}
  .top-wordmark{width:clamp(175px,18vw,230px)!important;max-width:230px!important}
  .topnav{justify-self:center!important;width:auto!important;max-width:100%!important;overflow:hidden}
  .top-link{padding-inline:clamp(7px,.8vw,12px)!important;white-space:nowrap}
  .top-actions{justify-self:end!important}
}

/* Mobile: one stable row; logo gets the flexible slot and actions never wrap. */
@media(max-width:900px){
  html{scrollbar-gutter:auto}
  .topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    column-gap:8px!important;
  }
  .top-brand{width:100%!important;min-width:0!important;overflow:hidden!important}
  .top-wordmark{width:min(170px,100%)!important;max-width:100%!important}
  .top-actions{display:flex!important;flex-wrap:nowrap!important;min-width:max-content!important;gap:7px!important}
  .top-actions .circle,.top-actions .mobile-menu,.top-actions .account-chip{flex:0 0 auto!important}
  .page-wrap{min-width:0}
}

@media(max-width:620px){
  .top-wordmark{width:min(145px,100%)!important}
  .topbar{column-gap:6px!important;padding-left:9px!important;padding-right:9px!important}
  .top-actions{gap:5px!important}
  .top-actions .circle,.top-actions .mobile-menu{width:40px!important;height:40px!important;min-height:40px!important}
  .top-actions .login{width:72px!important;min-width:72px!important;height:40px!important;min-height:40px!important}
  .account-chip{height:40px!important;min-height:40px!important;max-width:48px!important;padding:5px!important}
  .chip-orb{flex:0 0 auto}
}

@media(max-width:390px){
  .top-wordmark{width:min(126px,100%)!important}
  .top-actions .circle{display:none!important}
  .top-actions .notification-button{display:grid!important}
  .top-actions .login{width:68px!important;min-width:68px!important;padding-inline:7px!important}
}

/* Respect OS preference globally, not only inside the homepage. */
@media(prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}