/* MoonSpinner (V78): look of the shared spinner, used by solo Case Opening (.co-*) and Case Battles (.bt-*).
   Palette: #0D0F13 / #12151B / #191D24 / #242932 / #2A2F38 / #F2F3F5 / #949BA6 / gold #F5B84D.
   Card = soft rarity colour: a strong glow behind the skin + a tinted lower half + a coloured bottom bar. No text while spinning (like CSGOWIN), name and value fade in when the lane has stopped.
   Only transform and opacity are animated. The host (co-cell / bt-item) only sets the size of a card. */
.ms-track{display:flex;will-change:transform;backface-visibility:hidden;contain:layout style}
.ms-track.v{flex-direction:column}
.ms-cell{--rc:#8591C8;position:relative;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;box-sizing:border-box;contain:layout paint style;
  background:linear-gradient(180deg,transparent 28%,color-mix(in srgb,var(--rc) 20%,transparent) 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05),inset 0 -3px 0 var(--rc)}
.ms-track.v .ms-cell{box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),inset 3px 0 0 var(--rc)}
.ms-glow{position:absolute;inset:-8%;pointer-events:none;background:
  radial-gradient(ellipse 52% 44% at 50% 46%,color-mix(in srgb,var(--rc) 78%,transparent) 0%,color-mix(in srgb,var(--rc) 34%,transparent) 48%,transparent 78%);opacity:.72;transition:opacity .4s ease,transform .5s ease}
.ms-cell>.ms-art,.ms-cell>.ms-cap{z-index:2}
.ms-art{position:relative;display:grid;place-items:center;width:80%;height:62%;transition:transform .45s cubic-bezier(.2,.8,.2,1);transform:translateZ(0)}
.ms-art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;filter:drop-shadow(0 5px 9px rgba(0,0,0,.5))}
.ms-art .item-art-fallback{font-size:34px;color:var(--rc)}
.ms-cap{position:absolute;left:4px;right:4px;bottom:8px;display:grid;gap:1px;text-align:center;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .45s ease,transform .45s ease}
.ms-cap b{font-size:11.5px;font-weight:700;color:#F2F3F5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-cap i{font-style:normal;font-size:11.5px;font-weight:700;color:color-mix(in srgb,var(--rc) 55%,#F2F3F5)}
.ms-done .ms-cap{opacity:.8;transform:none}.ms-done .ms-cell .ms-art{transform:translateY(-8%)}
.ms-cell.win .ms-glow{opacity:1;transform:scale(1.12)}.ms-cell.win .ms-art{transform:translateY(-10%) scale(1.1)}.ms-done .ms-cell.win .ms-cap{opacity:1}
.ms-cell.win.t-gold{animation:ms-win .8s ease-out 1}
@keyframes ms-win{0%{filter:brightness(1.8)}100%{filter:none}}
/* ---- gem card (gold hexagon gem with the Moonclutch M, same idea as CSGOWIN but our own artwork) ---- */
.ms-gem{--rc:#F5B84D;background:radial-gradient(ellipse 70% 62% at 50% 48%,rgba(255,196,64,.30),transparent 74%);box-shadow:inset -1px 0 0 rgba(255,255,255,.05),inset 0 -3px 0 #F5B84D}
.ms-track.v .ms-gem{box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),inset 3px 0 0 #F5B84D}
.ms-gem .ms-glow{background:radial-gradient(ellipse 50% 46% at 50% 48%,rgba(255,206,70,.85) 0%,rgba(255,170,40,.32) 52%,transparent 80%);opacity:.9}
.ms-gem .ms-art{width:64%;height:72%;transform:none!important}.ms-gem .ms-art svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 10px rgba(255,190,50,.75))}
.ms-gem .ms-cap{display:none}
.ms-gem.reveal .ms-art{animation:ms-gem-in .6s cubic-bezier(.2,1.25,.3,1) both}.ms-gem.reveal .ms-glow{animation:ms-gem-glow 1s ease-in-out infinite alternate}
@keyframes ms-gem-in{0%{transform:scale(.7);filter:brightness(2)}55%{transform:scale(1.22)}100%{transform:scale(1.1);filter:none}}
@keyframes ms-gem-glow{from{opacity:.7}to{opacity:1}}
/* transition: a warm light flash over the whole view + the label */
.ms-fx{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(255,244,214,.98),rgba(255,196,80,.55) 45%,transparent 76%);opacity:0;animation:ms-flash .5s ease-in-out 1 both}
@keyframes ms-flash{0%{opacity:0}35%{opacity:.95}100%{opacity:0}}
.ms-gemlabel{position:absolute;z-index:6;left:50%;top:9px;transform:translateX(-50%);padding:3px 12px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.2em;color:#FFE9B5;background:rgba(20,16,8,.86);border:1px solid rgba(245,184,77,.7);box-shadow:0 0 14px rgba(245,184,77,.35);pointer-events:none;animation:ms-label 1.1s ease-out 1 both}
@keyframes ms-label{0%{opacity:0;transform:translateX(-50%) translateY(-6px)}25%{opacity:1;transform:translateX(-50%)}100%{opacity:1;transform:translateX(-50%)}}
.ms-gemmode{box-shadow:inset 0 0 0 1px rgba(245,184,77,.35)}
@media(prefers-reduced-motion:reduce){.ms-art,.ms-glow,.ms-cap{transition:none!important}.ms-gem.reveal .ms-art,.ms-gem.reveal .ms-glow,.ms-fx,.ms-gemlabel,.ms-cell.win.t-gold{animation:none!important}.ms-fx{display:none}}