/* Shared interaction surfaces. The controller never assigns csg-button inside
   Inventory, so its accepted V32.4 geometry and controls stay independently owned. */
:root{
  --csg-button-ease:cubic-bezier(.2,.8,.2,1);
  --csg-button-line:color-mix(in srgb,var(--yellow,#f6c945) 18%,#52636d);
  --csg-button-top:#1b2932;
  --csg-button-bottom:#101920;
}
.site-shell .csg-button:not(.brand-button){
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
  border:1px solid var(--csg-button-line)!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,var(--csg-button-top),var(--csg-button-bottom))!important;
  color:#eaf1f4!important;
  box-shadow:inset 0 1px #ffffff12,inset 0 -1px #0008,0 7px 16px -11px #000!important;
  filter:none!important;
  text-shadow:0 1px 1px #0008!important;
  transition:transform .18s var(--csg-button-ease),border-color .18s ease,background-color .18s ease,box-shadow .18s var(--csg-button-ease),color .18s ease,opacity .18s ease!important;
}
.site-shell .csg-button:not(.brand-button):not(:disabled):hover{
  transform:translateY(-2px)!important;
  border-color:color-mix(in srgb,var(--yellow,#f6c945) 46%,#607681)!important;
  background:linear-gradient(180deg,#22333e,#132129)!important;
  box-shadow:inset 0 1px #ffffff1e,inset 0 -1px #0008,0 13px 26px -16px #000,0 0 18px color-mix(in srgb,var(--yellow,#f6c945) 10%,transparent)!important;
}
.site-shell .csg-button:not(.brand-button):not(:disabled):active{
  transform:translateY(1px) scale(.985)!important;
  box-shadow:inset 0 2px 5px #0009,0 3px 10px -8px #000!important;
  transition-duration:.07s!important;
}
.site-shell .csg-button:not(.brand-button):focus-visible{
  outline:3px solid color-mix(in srgb,var(--yellow,#f6c945) 58%,#fff)!important;
  outline-offset:3px!important;
}
.site-shell .csg-button-icon:not(.brand-button){border-radius:12px!important}
.site-shell .v22-decor-btn.csg-button:before{display:none!important}
.csg-button-ripple{
  position:absolute;
  z-index:0;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#ffffff52;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(0);
  animation:csgButtonRipple .52s ease-out forwards;
}
@keyframes csgButtonRipple{70%{opacity:.22}100%{opacity:0;transform:translate(-50%,-50%) scale(18)}}

/* Primary actions use one unmistakable, readable gold treatment. This includes
   both login surfaces and every Submit Clip entry point. */
.site-shell .csg-button.csg-button-primary:not(.brand-button),
.site-shell .csg-button:is(.signin-button,.submit-top,.side-submit,button[data-v18-auth="login"]){
  --csg-button-line:#ffe58a;
  background:linear-gradient(145deg,#ffe57c 0%,#f4c542 44%,#d69b17 100%)!important;
  color:#0b1014!important;
  border-color:#ffe58a!important;
  text-shadow:0 1px #ffffff66!important;
  box-shadow:inset 0 1px #fffbd0,inset 0 -2px #9d6d0d77,0 10px 24px -14px #000,0 0 22px #f4c54235!important;
}
.site-shell .csg-button.csg-button-primary:not(.brand-button):not(:disabled):hover,
.site-shell .csg-button:is(.signin-button,.submit-top,.side-submit,button[data-v18-auth="login"]):not(:disabled):hover{
  background:linear-gradient(145deg,#fff0a2 0%,#ffd85a 42%,#e3aa22 100%)!important;
  color:#070b0e!important;
  border-color:#fff0ae!important;
  box-shadow:inset 0 1px #fff,0 15px 30px -17px #000,0 0 34px #f4c54255!important;
}
.site-shell .csg-button-danger{
  background:linear-gradient(180deg,#762d33,#4f1f25)!important;
  border-color:#e56c68!important;
  color:#fff2f1!important;
}

/* Direction cues get a single authored form instead of loose text glyphs. */
.submit-banner button>span,
.lock-button>span{
  position:relative!important;
  display:inline-grid!important;
  place-items:center!important;
  width:31px!important;
  height:31px!important;
  flex:0 0 31px!important;
  border:1px solid color-mix(in srgb,currentColor 38%,transparent)!important;
  border-radius:999px!important;
  background:color-mix(in srgb,currentColor 8%,transparent)!important;
  font-family:Inter,Arial,sans-serif!important;
  font-size:0!important;
  line-height:1!important;
  transition:transform .2s var(--csg-button-ease),background .2s ease,border-color .2s ease!important;
}
.submit-banner button>span:after{
  content:"";
  width:10px;
  height:10px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,1px);
}
.submit-banner button>span:before{
  content:"";
  position:absolute;
  width:11px;
  height:2px;
  border-radius:2px;
  background:currentColor;
}
.lock-button>span:after{content:"ENTER";font-size:6px;font-weight:900;letter-spacing:.04em}
.submit-banner button:hover>span{transform:translateX(3px)!important;background:color-mix(in srgb,currentColor 15%,transparent)!important}

/* Main-menu cards already communicate navigation through their label and hover.
   Remove the duplicate text arrows instead of restyling them again. */
.page-home .center-mode>strong,
.page-home .rp-mode>i:last-child{display:none!important}

/* The accepted reel's item centers sit one physical pixel right of 50% because
   of its 172px column / 8px gap geometry. Align both pointers and the marker to
   that exact axis without touching reel distance, timing, contents or results. */
.case-spinner-window{--csg-spinner-axis:calc(50% + 1px)}
.case-spinner-window:after{
  left:var(--csg-spinner-axis)!important;
  width:2px!important;
  transform:translateX(-50%)!important;
  background:linear-gradient(180deg,#fff 0%,var(--yellow,#f6c945) 18%,#fff 50%,var(--yellow,#f6c945) 82%,#fff 100%)!important;
  box-shadow:0 0 0 1px #000b,0 0 9px 2px var(--yellow,#f6c945),0 0 24px 4px color-mix(in srgb,var(--yellow,#f6c945) 45%,transparent)!important;
  animation:csgMarkerEnergy 1.3s ease-in-out infinite!important;
}
.case-spinner-window .spinner-pointer{
  left:var(--csg-spinner-axis)!important;
  width:19px!important;
  height:15px!important;
  border:0!important;
  transform:translateX(-50%)!important;
  background:linear-gradient(135deg,#fff 0 34%,var(--yellow,#f6c945) 36% 72%,#b57c13 74%)!important;
  filter:drop-shadow(0 2px 2px #000b) drop-shadow(0 0 7px var(--yellow,#f6c945))!important;
}
.case-spinner-window .spinner-pointer.top{top:0!important;clip-path:polygon(0 0,100% 0,50% 100%)!important}
.case-spinner-window .spinner-pointer.bottom{bottom:0!important;clip-path:polygon(50% 0,100% 100%,0 100%)!important}
@keyframes csgMarkerEnergy{50%{filter:brightness(1.35);opacity:.88}}

/* Motion is paint-only, so nothing changes size or causes page reflow. */
.site-shell :is(.center-mode,.home-tools>button,.side-menu nav button,.case-card,.cosmetic-card){
  transition:transform .2s var(--csg-button-ease),border-color .2s ease,box-shadow .2s var(--csg-button-ease),background-color .2s ease!important;
}
.site-shell :is(.center-mode,.home-tools>button,.side-menu nav button,.case-card,.cosmetic-card):hover{transform:translateY(-2px)!important}

/* Preserve the only three approved raster navigation icons. */
.v33-nav-icon:is([data-v33-icon="ranked"],[data-v33-icon="upgrader"],[data-v33-icon="leaderboard"]){background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important;color:transparent!important}
.v33-nav-icon[data-v33-icon="ranked"]{background-image:url('/v33-icons/ranked.webp?v=platform1')!important}
.v33-nav-icon[data-v33-icon="upgrader"]{background-image:url('/v33-icons/upgrader.webp?v=platform1')!important}
.v33-nav-icon[data-v33-icon="leaderboard"]{background-image:url('/v33-icons/leaderboard.webp?v=platform1')!important}
.v33-nav-icon:is([data-v33-icon="ranked"],[data-v33-icon="upgrader"],[data-v33-icon="leaderboard"])>svg{visibility:hidden!important}

@media(prefers-reduced-motion:reduce){
  .site-shell .csg-button:not(.brand-button),
  .site-shell :is(.center-mode,.home-tools>button,.side-menu nav button,.case-card,.cosmetic-card),
  .submit-banner button>span,.lock-button>span{transition:none!important}
  .csg-button-ripple{display:none!important}
  .case-spinner-window:after{animation:none!important}
}