@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/de37de877dc17e45.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/c268b459a9329e59.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/2fb2e8cbfd52ae46.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/6bbb044ab420e07e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/3911b66d9f2e005a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/a30ddcd349703aff.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/de37de877dc17e45.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/c268b459a9329e59.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/2fb2e8cbfd52ae46.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/6bbb044ab420e07e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/3911b66d9f2e005a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/a30ddcd349703aff.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/de37de877dc17e45.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/c268b459a9329e59.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/2fb2e8cbfd52ae46.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/6bbb044ab420e07e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/3911b66d9f2e005a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/a30ddcd349703aff.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/60b4b30fbd105cfc.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/8adf93456d064c7f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/3acaa1196149bd9c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/7ede884f42917114.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/2176b732b7e4e2bf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/60b4b30fbd105cfc.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/8adf93456d064c7f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/3acaa1196149bd9c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/7ede884f42917114.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/2176b732b7e4e2bf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/60b4b30fbd105cfc.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/8adf93456d064c7f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/3acaa1196149bd9c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/7ede884f42917114.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/2176b732b7e4e2bf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/60b4b30fbd105cfc.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/8adf93456d064c7f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/3acaa1196149bd9c.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/7ede884f42917114.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/2176b732b7e4e2bf.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url("fonts/ae17c16afbea2167.woff2") format("woff2"),url("fonts/b4990d0d0c5f5d38.ttf") format("truetype")}
.fa-angle-right:before{content:"\f105"}
.fa-angle-down:before{content:"\f107"}
.fa-angle-up:before{content:"\f106"}
.fa-circle-check:before{content:"\f058"}
.fa-flask:before{content:"\f0c3"}
.fa-arrow-right:before{content:"\f061"}
.fa-magnifying-glass:before{content:"\f002"}
.fa-arrow-up-right-from-square:before{content:"\f08e"}
.fa-key:before{content:"\f084"}
.fa-circle-info:before{content:"\f05a"}
.fa-caret-down:before{content:"\f0d7"}
.fa-caret-up:before{content:"\f0d8"}
.fa-box-open:before{content:"\f49e"}
.fa-bolt:before{content:"\f0e7"}
.fa-volume-xmark:before{content:"\f6a9"}
.fa-volume-high:before{content:"\f028"}
.fa-rotate-left:before{content:"\f2ea"}
.fa-trash-can:before{content:"\f2ed"}
.fa-percent:before{content:"\25"}
.fa-ranking-star:before{content:"\e561"}
.fa-gem:before{content:"\f3a5"}
.fa,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto;font-family:"Font Awesome 6 Free";font-weight:900}
.fa-crosshairs:before{content:"\f05b"}

/* Tradeit CS2 Case Simulator. Visuals follow William's design (CS2-Case-Simulator.html, Tradeit DESIGN_SYSTEM). */
html, body { margin: 0; padding: 0; background: #0F0F14; }
body { font-family: "Sofia Sans", sans-serif; color: #DEDEDE; -webkit-font-smoothing: antialiased; }
.cs-root { background: #0F0F14; min-height: 100vh; }
.cs-root *, .cs-sticky * { box-sizing: border-box; }
.cs-main a, .cs-sticky a { color: #615DFC; text-decoration: none; }
.cs-main a:hover { color: #8986FD; }
.cs-main input, .cs-main button { font-family: inherit; }
.cs-main button { cursor: pointer; }
.cs-main button:focus-visible, .cs-main a:focus-visible, .cs-main input:focus-visible, .cs-main summary:focus-visible {
  outline: none; box-shadow: 0 0 0 2px #121217, 0 0 0 4px #3A35FB; border-radius: 4px;
}
.cs-main ::-webkit-scrollbar { width: 8px; height: 8px; }
.cs-main ::-webkit-scrollbar-track { background: #16161D; }
.cs-main ::-webkit-scrollbar-thumb { background: #363745; border-radius: 4px; }
@keyframes cs-fade { from { opacity: 0 } to { opacity: 1 } }
.cs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-dim { color: #787E87; }
.cs-sq { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; background: var(--tier, #787E87); }
.cs-neg { color: #EF3054; } .cs-pos { color: #89EB5B; }
.cs-gold { color: #EAB30A; } .cs-green { color: #89EB5B; }

.cs-main { max-width: 1520px; margin: 0 auto; padding: 24px 24px 0; }
.cs-panel { background: #121217; border-radius: 4px; padding: 32px 24px; margin-top: 16px; }
.cs-crumbs { font-size: 12px; color: #787E87; margin: 0 0 12px; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cs-crumbs a { color: #787E87 !important; }
.cs-crumbs .fas { font-size: 9px; }
.cs-crumbs span[aria-current] { color: #DEDEDE; }

/* hero */
.cs-hero { margin-top: 0; padding: 24px; display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: flex-end; }
.cs-hero__text { flex: 999 1 560px; min-width: 0; }
.cs-hero h1 { font-family: Manrope, sans-serif; font-size: 30px; line-height: 38px; font-weight: 700; color: #FFFFFF; margin: 0 0 8px; }
.cs-hero p { font-size: 14px; line-height: 22px; color: #787E87; margin: 0; max-width: 860px; }
.cs-hero__badges { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cs-badge { border-radius: 4px; padding: 6px 10px; background: #1C1D26; color: #DEDEDE; font-size: 13px; font-weight: 600; }
.cs-badge .fas { margin-right: 6px; color: #787E87; }
.cs-badge--ok { background: rgba(137, 235, 91, 0.08); color: #89EB5B; }
.cs-badge--ok .fas { color: #89EB5B; }

/* layout */
.cs-layout { display: flex; gap: 16px; align-items: stretch; margin-top: 16px; }
.cs-layout > .cs-panel { margin-top: 0; }
/* The sidebar never makes the row taller than the stage. The card is taken out of flow and capped at the
   stage height, so before a case is opened it is only as tall as the simulator next to it, and it grows
   with the stage as results and drops appear. When every case fits, the card stops at the last case. */
.cs-picker { flex: 0 0 320px; max-width: 320px; position: relative; min-height: 480px; }
.cs-picker__card { position: absolute; top: 0; left: 0; right: 0; max-height: 100%; margin-top: 0; padding: 24px; display: flex; flex-direction: column; }
.cs-picker__card > * { flex-shrink: 0; }
.cs-stage { flex: 1 1 0; min-width: 0; padding: 24px; }
.cs-picker__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.cs-picker__head h2 { font-size: 18px; font-weight: 700; color: #DEDEDE; margin: 0; }
.cs-picker__head span { font-size: 12px; color: #787E87; }
.cs-explore { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin: 0 0 14px; }
.cs-explore .fas { font-size: 11px; }
.cs-search { position: relative; margin-bottom: 10px; }
.cs-search .fas { position: absolute; left: 12px; top: 11px; font-size: 13px; color: #787E87; }
.cs-search input { width: 100%; height: 36px; background: #1C1D26; border: 0; border-radius: 4px; color: #DEDEDE; font-size: 14px; padding: 0 12px 0 34px; }
.cs-search input::placeholder { color: #787E87; }
.cs-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cs-seg { display: flex; gap: 4px; background: #1C1D26; border-radius: 8px; padding: 4px; }
.cs-seg button { border: 0; border-radius: 4px; padding: 6px 10px; font-size: 12px; font-weight: 700; background: transparent; color: #787E87; }
.cs-seg button.is-on { background: #252632; color: #FFFFFF; }
.cs-seg--qty button { padding: 8px 12px; font-size: 13px; }
.cs-picker__card > .cs-picker__list { flex: 0 1 auto; min-height: 0; }
.cs-picker__list { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: 4px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 4px; }
.cs-pick { display: flex; align-items: center; gap: 12px; border-radius: 4px; padding: 8px 10px; background: transparent; box-shadow: inset 0 0 0 1px transparent; color: #DEDEDE !important; transition: background 0.18s ease, box-shadow 0.18s ease; }
.cs-pick:hover { background: #252632; }
.cs-pick.is-on { background: #252632; box-shadow: inset 0 0 0 1px #3A35FB; }
.cs-pick__img { width: 40px; height: 40px; border-radius: 4px; background: #252632; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.cs-pick__img img { width: 36px; height: 36px; object-fit: contain; }
.cs-pick__text { flex: 1; min-width: 0; }
.cs-pick__name { display: block; font-size: 14px; font-weight: 700; color: #DEDEDE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-pick.is-on .cs-pick__name { color: #FFFFFF; }
.cs-pick__meta { display: block; font-size: 12px; color: #787E87; }
.cs-pick__price { font-size: 13px; font-weight: 700; color: #DEDEDE; white-space: nowrap; }
.cs-empty { padding: 16px; font-size: 13px; color: #787E87; text-align: center; }

/* case header */
.cs-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.cs-head > div:first-child { min-width: 0; flex: 1 1 360px; }
.cs-head__case { display: flex; gap: 14px; align-items: center; min-width: 0; }
.cs-head__img { width: 64px; height: 64px; border-radius: 4px; background: #1C1D26; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.cs-head__img img { width: 60px; height: 60px; object-fit: contain; }
.cs-head__text { min-width: 0; }
.cs-head__name { font-family: Manrope, sans-serif; font-size: 24px; line-height: 32px; font-weight: 700; color: #FFFFFF; margin: 0; }
.cs-head__cost { font-size: 14px; color: #787E87; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cs-head__cost strong { color: #FFFFFF; font-size: 15px; }
.cs-head__cost .cs-dim { color: #363745; }
.cs-head__cost .cs-sep { margin: 0 4px; }
.cs-head__links { font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.cs-head__links a { font-weight: 600; }
.cs-head__links .fas { font-size: 10px; margin-left: 5px; }
.cs-ev { flex: 0 1 260px; background: #16161D; border-radius: 4px; padding: 10px 12px; }
.cs-ev__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; font-weight: 600; color: #787E87; }
.cs-ev__pct { font-weight: 700; color: #FB7B2B; }
.cs-ev__value { font-size: 15px; font-weight: 700; color: #FFFFFF; margin: 2px 0 6px; }
.cs-ev__value span { font-size: 12px; font-weight: 500; color: #787E87; }
.cs-ev__bar { height: 4px; background: #252632; border-radius: 4px; overflow: hidden; }
.cs-ev__bar div { height: 100%; background: #FB7B2B; }
.cs-ev__note { font-size: 11px; color: #787E87; margin-top: 6px; line-height: 15px; }

/* odds */
.cs-odds { margin-top: 16px; }
.cs-odds__bar { display: flex; height: 6px; border-radius: 4px; overflow: hidden; gap: 2px; }
.cs-odds__bar span { min-width: 8px; }
.cs-odds__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; align-items: center; }
.cs-odds__item { font-size: 12px; color: #787E87; display: flex; align-items: center; gap: 6px; }
.cs-odds__item strong { color: #DEDEDE; }
.cs-link-btn { background: transparent; border: 0; color: #615DFC; font-size: 12px; font-weight: 700; padding: 0; }
.cs-link-btn:hover { color: #8986FD; }
.cs-link-btn .fas { margin-right: 5px; }
.cs-odds__legend .cs-link-btn { margin-left: auto; }
.cs-link-btn--mute { color: #787E87; font-size: 13px; font-weight: 600; }
.cs-link-btn--mute:hover { color: #DEDEDE; }
.cs-method { margin-top: 12px; background: #16161D; border-radius: 4px; padding: 14px; display: grid; gap: 8px; animation: cs-fade 0.2s forwards; }
.cs-method[hidden] { display: none; }
.cs-method__row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 13px; line-height: 19px; }
.cs-method__rule { flex: 0 0 170px; color: #DEDEDE; font-weight: 700; }
.cs-method__value { flex: 1 1 260px; color: #787E87; }
.cs-status { border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; background: #252632; color: #DEDEDE; }
.cs-status--ok { background: rgba(137, 235, 91, 0.08); color: #89EB5B; }
.cs-status--info { background: rgba(97, 93, 252, 0.08); color: #615DFC; }
.cs-status--warn { background: rgba(188, 74, 4, 0.08); color: #EB5D05; }
.cs-status--mute { color: #787E87; }
.cs-method__note { font-size: 12px; color: #787E87; padding-top: 4px; line-height: 18px; }

/* reel */
.cs-reel { margin-top: 20px; position: relative; height: 184px; background: #16161D; border-radius: 4px; overflow: hidden; }
.cs-reel__strip { position: absolute; top: 18px; left: 50%; display: flex; gap: 8px; will-change: transform; }
.cs-tile { width: 160px; height: 148px; flex-shrink: 0; background: #1C1D26; border-radius: 4px; box-shadow: inset 0 0 0 2px transparent; border-bottom: 3px solid var(--tier); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; transition: box-shadow 0.3s ease, background 0.3s ease; background-image: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tier) 14%, transparent), transparent 70%); }
.cs-tile img { width: 128px; height: 96px; object-fit: contain; }
.cs-tile span { font-size: 12px; line-height: 16px; color: #DEDEDE; text-align: center; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-tile.is-win { background-color: #252632; box-shadow: inset 0 0 0 2px #3A35FB; }
.cs-reel__fade { position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none; }
.cs-reel__fade--l { left: 0; background: linear-gradient(90deg, #16161D 0%, rgba(22, 22, 29, 0) 100%); }
.cs-reel__fade--r { right: 0; background: linear-gradient(270deg, #16161D 0%, rgba(22, 22, 29, 0) 100%); }
.cs-reel__line { position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px; margin-left: -1px; background: #3A35FB; }
.cs-reel__caret { position: absolute; left: 50%; margin-left: -6px; color: #3A35FB; font-size: 20px; }
.cs-reel__caret--t { top: -4px; } .cs-reel__caret--b { bottom: -4px; }

/* pictures with a failure fallback */
.cs-pic { position: relative; display: flex; align-items: center; justify-content: center; }
.cs-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cs-pic__fallback { display: none; }
.cs-pic--failed { background: color-mix(in srgb, var(--tier) 18%, #1C1D26); border-radius: 4px; }
.cs-pic--failed .cs-pic__fallback { display: block; font-size: 11px; line-height: 14px; color: #FFFFFF; text-align: center; padding: 6px; }

/* result */
.cs-result { margin-top: 16px; background: #16161D; border-radius: 4px; padding: 16px; display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; box-shadow: inset 3px 0 0 var(--tier); }
.cs-result[hidden], .cs-multi[hidden] { display: none; }
.cs-result.is-rare { box-shadow: inset 3px 0 0 var(--tier), 0 0 0 1px color-mix(in srgb, var(--tier) 40%, transparent); }
.cs-result__pic { flex: 0 0 132px; height: 104px; border-radius: 4px; background: #1C1D26; display: flex; align-items: center; justify-content: center; background-image: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tier) 22%, transparent), transparent 70%); }
.cs-result__pic .cs-pic { width: 120px; height: 92px; }
.cs-result__main { flex: 999 1 280px; min-width: 0; }
.cs-result__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cs-tag { border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; background: #1C1D26; }
.cs-tag--st { background: rgba(235, 93, 5, 0.08); color: #EB5D05; }
.cs-tag--phase { background: rgba(234, 179, 10, 0.08); color: #EAB30A; }
.cs-result__name { font-family: Manrope, sans-serif; font-size: 20px; line-height: 28px; font-weight: 700; color: #FFFFFF; margin: 0 0 6px; }
.cs-float { max-width: 440px; }
.cs-wearbar { position: relative; height: 10px; display: flex; border-radius: 4px; overflow: hidden; }
.cs-wearbar--thin { height: 4px; }
.cs-wearbar__mask { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(15, 15, 20, 0.82); }
.cs-float__marker { position: relative; height: 8px; }
.cs-float__marker .fas { position: absolute; top: -4px; margin-left: -4px; font-size: 11px; color: #FFFFFF; }
.cs-float__text { font-size: 12px; color: #787E87; }
.cs-float__text strong { color: #DEDEDE; }
.cs-result__buy { flex: 1 1 240px; display: grid; gap: 8px; justify-items: start; }
.cs-result__buy .cs-dim { font-size: 12px; }
.cs-result__price { font-size: 24px; line-height: 28px; font-weight: 700; color: #FFFFFF; }
.cs-result__honest { font-size: 12px; line-height: 17px; color: #787E87; max-width: 300px; }
.cs-result__links { display: flex; gap: 14px; align-items: center; font-size: 12px; font-weight: 600; }
.cs-btn { height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 14px; font-weight: 700; padding: 0 18px; border: 0; }
.cs-btn--primary { background: #3A35FB; color: #FFFFFF !important; }
.cs-btn--primary:hover { background: #2E2AC9; color: #FFFFFF !important; }
.cs-btn--soft { background: rgba(58, 53, 251, 0.08); color: #3A35FB !important; }
.cs-btn--soft:hover { background: #3A35FB; color: #FFFFFF !important; }
.cs-btn--quiet { height: auto; margin-top: 10px; background: #252632; color: #DEDEDE; font-size: 13px; padding: 8px 14px; }
.cs-multi { margin-top: 12px; }
.cs-multi__label { font-size: 12px; font-weight: 700; color: #787E87; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.cs-multi__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.cs-mini { border: 0; text-align: left; border-radius: 4px; background: #16161D; border-bottom: 3px solid var(--tier); padding: 10px; color: inherit; }
.cs-mini:hover, .cs-mini.is-on { background: #252632; }
.cs-mini__pic { height: 64px; margin-bottom: 6px; }
.cs-mini__price { display: block; font-size: 12px; font-weight: 700; color: #DEDEDE; }
.cs-mini__name { display: block; font-size: 12px; font-weight: 700; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-mini__sub { display: block; font-size: 11px; color: #787E87; }

/* controls */
.cs-controls { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.cs-open { height: 48px; min-width: 240px; border: 0; border-radius: 4px; background: #3A35FB; color: #FFFFFF; font-size: 16px; font-weight: 700; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.cs-open:hover:not(:disabled) { background: #2E2AC9; }
.cs-open:disabled { background: #232097; color: rgba(255, 255, 255, 0.7); cursor: default; }
.cs-toggle { height: 36px; border: 0; border-radius: 4px; background: #1C1D26; color: #787E87; font-size: 13px; font-weight: 700; padding: 0 12px; }
.cs-toggle .fas { margin-right: 6px; }
.cs-toggle.is-on { background: rgba(58, 53, 251, 0.08); color: #615DFC; }
.cs-toggle--icon { width: 36px; padding: 0; font-size: 14px; }
.cs-toggle--icon .fas { margin: 0; }
.cs-toggle--icon.is-on { background: #1C1D26; color: #DEDEDE; }
.cs-disclaimer { margin: 8px 0 0; text-align: center; font-size: 12px; color: #787E87; }

/* session */
.cs-stats { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; align-items: center; font-size: 14px; color: #787E87; }
.cs-stats strong { color: #DEDEDE; }
.cs-stats strong.cs-neg { color: #EF3054; } .cs-stats strong.cs-pos { color: #89EB5B; }
.cs-nudge { margin: 12px auto 0; max-width: 640px; background: rgba(137, 235, 91, 0.08); border-radius: 4px; padding: 10px 12px; font-size: 13px; color: #89EB5B; font-weight: 600; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.cs-nudge[hidden], #cs-session[hidden] { display: none; }
.cs-nudge a { color: #89EB5B !important; font-weight: 700; }
.cs-nudge .fas { font-size: 11px; margin-left: 6px; }
.cs-drops { margin-top: 20px; display: flex; gap: 12px; align-items: stretch; }
.cs-best { flex: 0 0 148px; border: 0; text-align: center; border-radius: 4px; background: #16161D; box-shadow: inset 0 0 0 1px var(--tier); padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; }
.cs-best:hover { background: #1C1D26; }
.cs-best__label { font-size: 11px; font-weight: 700; color: #EAB30A; text-transform: uppercase; letter-spacing: 0.4px; }
.cs-best__pic { width: 112px; height: 64px; }
.cs-best__name { font-size: 12px; font-weight: 700; color: #FFFFFF; max-width: 128px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-best__price { font-size: 14px; font-weight: 700; color: #DEDEDE; }
.cs-recent { flex: 1; min-width: 0; }
.cs-recent__label { font-size: 12px; font-weight: 700; color: #787E87; margin-bottom: 8px; }
.cs-recent__row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.cs-chipcard { flex: 0 0 120px; border: 0; text-align: left; border-radius: 4px; background: #16161D; border-bottom: 3px solid var(--tier); padding: 8px 10px 10px; color: inherit; }
.cs-chipcard:hover { background: #1C1D26; }
.cs-chipcard__pic { height: 40px; justify-content: flex-start; }
.cs-chipcard__name { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-chipcard__meta { display: flex; justify-content: space-between; margin-top: 2px; font-size: 11px; color: #787E87; }
.cs-chipcard__meta strong { color: #DEDEDE; }
.cs-dist { margin-top: 16px; }
.cs-dist__bar { display: flex; height: 10px; border-radius: 4px; overflow: hidden; gap: 2px; }
.cs-dist__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 6px; font-size: 12px; color: #787E87; }
.cs-dist__legend > span:first-child { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cs-dist__legend > span:first-child > span { display: flex; align-items: center; gap: 6px; }
.cs-dist__legend strong { color: #DEDEDE; }
.cs-pulls { margin-top: 8px; }
.cs-pulls__list { list-style: none; margin: 10px 0 8px; padding: 0; max-height: 360px; overflow-y: auto; display: grid; gap: 2px; }
.cs-pulls__list a, .cs-pulls__list li > span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; background: #16161D; font-size: 13px; color: #DEDEDE !important; }
.cs-pulls__list a:hover { background: #1C1D26; }
.cs-pulls__name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.cs-pulls__meta { color: #787E87; font-size: 12px; white-space: nowrap; }
.cs-pulls__price { font-weight: 700; white-space: nowrap; }

/* contents */
.cs-contents { margin-top: 20px; border-top: 1px solid #1C1D26; padding-top: 4px; }
.cs-contents > summary { list-style: none; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 12px 0; color: #DEDEDE; font-size: 14px; font-weight: 700; cursor: pointer; }
.cs-contents > summary::-webkit-details-marker { display: none; }
.cs-contents > summary .fas { font-size: 12px; color: #787E87; transition: transform 0.2s; }
.cs-contents[open] > summary .fas { transform: rotate(180deg); }
.cs-contents__body { display: grid; gap: 16px; padding-top: 4px; }
.cs-group__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--tier); }
.cs-group__sub { color: #787E87; text-transform: none; letter-spacing: 0; font-weight: 600; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; align-items: start; }
.cs-item { position: relative; display: block; background: #16161D; border-radius: 4px; border-bottom: 2px solid var(--tier, #EAB30A); padding: 10px 12px; color: inherit !important; }
.cs-item:hover { background: #1C1D26; }
.cs-item__pic { height: 72px; margin-bottom: 8px; }
.cs-item__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 17px; min-height: 34px; font-weight: 700; color: #FFFFFF; overflow-wrap: anywhere; }
.cs-item__odds { position: absolute; top: 8px; right: 8px; z-index: 1; font-size: 11px; font-weight: 700; color: #787E87; white-space: nowrap; }
.cs-item__price { display: block; font-size: 12px; color: #787E87; margin-top: 2px; }
.cs-item--gold { --tier: #EAB30A; }
details.cs-item > summary { list-style: none; cursor: pointer; display: block; }
details.cs-item > summary::-webkit-details-marker { display: none; }
.cs-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700; background: rgba(234, 179, 10, 0.08); color: #EAB30A; white-space: nowrap; }
.cs-chip .fas { font-size: 9px; transition: transform 0.2s; }
details.cs-item[open] .cs-chip .fas { transform: rotate(180deg); }
.cs-phases { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; gap: 4px; font-size: 11px; color: #787E87; }
.cs-phases li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; }
.cs-phases li span:first-child { color: #DEDEDE; font-weight: 700; }
.cs-phases li span:last-child { grid-column: 1 / -1; }
.cs-item__link { font-size: 12px; font-weight: 600; }
.cs-grid--gold .cs-more { display: none; }
.cs-contents__body.is-all .cs-grid--gold .cs-more { display: block; }

/* content sections */
.cs-cta { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.cs-cta__text { flex: 999 1 420px; }
.cs-cta h2 { font-family: Manrope, sans-serif; font-size: 28px; line-height: 36px; font-weight: 700; color: #FFFFFF; margin: 0 0 10px; }
.cs-cta p { font-size: 14px; line-height: 22px; color: #787E87; margin: 0 0 20px; max-width: 620px; }
.cs-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cs-cta__facts { flex: 1 1 320px; display: flex; gap: 10px; }
.cs-cta__facts > div { flex: 1; background: #16161D; border-radius: 8px; padding: 20px; }
.cs-cta__facts strong { display: block; font-size: 30px; font-weight: 700; }
.cs-cta__facts span { display: block; font-size: 13px; line-height: 19px; color: #787E87; margin-top: 6px; }
.cs-prose h2, .cs-faq h2, .cs-h2 { font-size: 24px; font-weight: 700; color: #FFFFFF; margin: 0 0 12px; }
.cs-prose > p, .cs-prose .cs-twocol, .cs-prose .cs-floatdemo, .cs-prose .cs-table-wrap, .cs-prose .cs-steps { max-width: 900px; }
.cs-prose p { font-size: 14px; line-height: 22px; color: #787E87; margin: 0 0 16px; }
.cs-prose p:last-child { margin-bottom: 0; }
.cs-prose p.cs-lead { font-size: 15px; line-height: 24px; color: #DEDEDE; margin-bottom: 8px; }
.cs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-steps li { display: flex; gap: 14px; background: #16161D; border-radius: 4px; padding: 14px 16px; }
.cs-steps li > span { width: 24px; height: 24px; border-radius: 4px; background: #3A35FB; color: #FFFFFF; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cs-steps li p { margin: 0; font-size: 14px; line-height: 22px; color: #DEDEDE; }
.cs-steps strong { color: #FFFFFF; }
.cs-table-wrap { overflow-x: auto; margin-bottom: 16px; }
.cs-table { width: 100%; min-width: 300px; border-collapse: collapse; background: #16161D; border-radius: 4px; overflow: hidden; font-size: 14px; color: #DEDEDE; }
.cs-table th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 700; color: #787E87; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 2px solid #121217; }
.cs-table td { padding: 12px 16px; border-bottom: 2px solid #121217; }
.cs-table td:first-child { display: flex; align-items: center; gap: 8px; }
.cs-table caption { text-align: left; font-size: 13px; font-weight: 700; color: #FFFFFF; padding: 16px 16px 4px; caption-side: top; background: #16161D; }
.cs-table--compact td { padding: 6px 16px; border-bottom: 1px solid #1C1D26; font-weight: 700; }
.cs-table--compact td:first-child { font-weight: 400; display: table-cell; }
.cs-table--compact td:last-child { text-align: right; }
.cs-twocol { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; align-items: flex-start; }
.cs-twocol table { flex: 1 1 280px; width: auto; }
.cs-floatdemo { background: #16161D; border-radius: 4px; padding: 16px; margin-bottom: 16px; }
.cs-floatdemo__labels { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #787E87; margin-bottom: 8px; }
.cs-floatdemo__keys { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: #787E87; }
.cs-faq__item { border-bottom: 1px solid #1C1D26; }
.cs-faq__item summary { list-style: none; padding: 16px 0; display: flex; gap: 16px; align-items: center; justify-content: space-between; cursor: pointer; color: #DEDEDE; font-size: 15px; font-weight: 700; }
.cs-faq__item summary::-webkit-details-marker { display: none; }
.cs-faq__item summary .fas { font-size: 12px; color: #787E87; transition: transform 0.2s; }
.cs-faq__item[open] summary .fas { transform: rotate(180deg); }
.cs-faq__item p { padding: 0 0 16px; margin: 0; max-width: 900px; font-size: 14px; line-height: 22px; color: #787E87; }
.cs-sub { font-size: 14px; color: #787E87; margin: -8px 0 16px; }
.cs-reads { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cs-read { background: #16161D; border-radius: 4px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.cs-read:hover { background: #1C1D26; }
.cs-read__icon { width: 36px; height: 36px; border-radius: 4px; background: #1C1D26; display: flex; align-items: center; justify-content: center; color: #615DFC; font-size: 15px; }
.cs-read__kicker { font-size: 11px; font-weight: 700; color: #615DFC; text-transform: uppercase; letter-spacing: 0.5px; }
.cs-read__title { font-size: 16px; font-weight: 700; color: #FFFFFF; line-height: 22px; }
.cs-read__text { font-size: 13px; line-height: 20px; color: #787E87; }
.cs-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.cs-about .cs-h2 { font-size: 20px; }
.cs-about p { max-width: 520px; font-size: 14px; line-height: 22px; color: #787E87; margin: 0 0 12px; }
.cs-facts { display: grid; gap: 12px; align-content: start; margin: 0; }
.cs-facts > div { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; border-bottom: 1px solid #1C1D26; padding-bottom: 10px; }
.cs-facts dt { color: #787E87; }
.cs-facts dd { margin: 0; color: #DEDEDE; font-weight: 600; text-align: right; }
.cs-tools { padding: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.cs-tools > span { font-size: 14px; font-weight: 700; color: #FFFFFF; }
.cs-tools > div { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-tools a { background: #16161D; border-radius: 4px; padding: 9px 14px; font-size: 13px; font-weight: 600; color: #DEDEDE !important; }
.cs-tools a:hover { background: #1C1D26; }
.cs-sticky { display: none; }

/* ---------------------------------------------------------------- motion */
@keyframes cs-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cs-zoom { 0% { opacity: 0; transform: scale(0.82); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes cs-pop { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 70% { transform: scale(0.985); } 100% { transform: scale(1); } }
@keyframes cs-burst { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.22); } }
@keyframes cs-shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes cs-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateX(6px) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(0.2); } }
@keyframes cs-deal { from { opacity: 0; transform: translateY(14px) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes cs-slide { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes cs-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cs-swap-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-busy { from { background-position: -100% 0; } to { background-position: 200% 0; } }
@keyframes cs-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes cs-glowpulse { 0%, 100% { box-shadow: 0 0 0 1px var(--tier), 0 0 18px color-mix(in srgb, var(--tier) 30%, transparent); } 50% { box-shadow: 0 0 0 1px var(--tier), 0 0 34px color-mix(in srgb, var(--tier) 55%, transparent); } }

/* picker */
.cs-pick__img img { transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.cs-pick:hover .cs-pick__img img { transform: scale(1.08) rotate(-3deg); }

/* reel: the tile under the line lights up as the reel slows, the line glows with speed,
   and on landing the other tiles dim while the winner pops in its tier colour */
.cs-tile { position: relative; transition: box-shadow 0.25s ease, background-color 0.25s ease, opacity 0.45s ease, filter 0.45s ease; }
.cs-tile img { transition: transform 0.3s ease; }
.cs-tile.is-pass { background-color: #22232E; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tier) 65%, transparent); transition-duration: 0.06s; }
.cs-tile.is-pass img { transform: scale(1.05); }
.cs-reel__line { box-shadow: 0 0 calc(var(--glow, 0) * 16px) rgba(58, 53, 251, calc(var(--glow, 0) * 0.9)); transition: background 0.35s ease, box-shadow 0.35s ease; }
.cs-reel__caret { transition: color 0.35s ease, transform 0.35s ease; }
.cs-reel.is-landed .cs-reel__line { background: var(--tier); box-shadow: 0 0 14px var(--tier); }
.cs-reel.is-landed .cs-reel__caret { color: var(--tier); }
.cs-reel.is-landed .cs-reel__caret--t { transform: translateY(2px); }
.cs-reel.is-landed .cs-reel__caret--b { transform: translateY(-2px); }
.cs-reel.is-landed .cs-tile:not(.is-win) { opacity: 0.4; filter: saturate(0.5); }
.cs-reel.is-landed .cs-tile.is-win { box-shadow: inset 0 0 0 2px var(--tier); background-color: #252632; }
.cs-tile.is-pop { animation: cs-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.cs-tile.is-pop img { transform: scale(1.08); }
.cs-tile.is-pop::after { content: ''; position: absolute; inset: 0; border-radius: 4px; box-shadow: 0 0 0 2px var(--tier), 0 0 22px var(--tier); animation: cs-burst 0.75s ease-out forwards; pointer-events: none; }
.cs-tile.is-rare::before { content: ''; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%) no-repeat; background-size: 250% 100%; animation: cs-shine 1.1s 0.2s ease-out both; }
.cs-spark { position: absolute; left: 50%; top: 42%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--tier); box-shadow: 0 0 6px var(--tier); opacity: 0; pointer-events: none; animation: cs-spark 0.9s var(--dl, 0ms) cubic-bezier(0.15, 0.7, 0.3, 1) forwards; }

/* result card: rises in, picture zooms, text follows, the float marker slides to its spot, the price counts up */
.cs-result.is-in { animation: cs-rise 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cs-result.is-in .cs-result__pic { animation: cs-zoom 0.6s 0.05s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.cs-result.is-in .cs-result__main { animation: cs-rise 0.45s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cs-result.is-in .cs-result__buy { animation: cs-rise 0.45s 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cs-result.is-in.is-gold .cs-result__pic { animation: cs-zoom 0.6s 0.05s cubic-bezier(0.2, 0.9, 0.3, 1) both, cs-glowpulse 2.4s 0.7s ease-in-out infinite; }
.cs-float__marker .fas { transition: left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s; }
.cs-result__price, .cs-stats strong, .cs-mini__price, .cs-chipcard__meta strong { font-variant-numeric: tabular-nums; }

/* x5 and x10: cards are dealt in one after another */
.cs-multi.is-deal .cs-mini { animation: cs-deal 0.4s calc(var(--k, 0) * 55ms) cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.cs-mini { transition: background 0.18s ease, transform 0.18s ease; }
.cs-mini:hover { transform: translateY(-2px); }
.cs-mini.is-rare { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier) 55%, transparent); }

/* session: new drops slide into the row, the stats count to their new values */
.cs-chipcard.is-new, .cs-best.is-new { animation: cs-slide 0.4s calc(var(--k, 0) * 45ms) cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.cs-chipcard, .cs-best { transition: background 0.18s ease, transform 0.18s ease; }
.cs-chipcard:hover, .cs-best:hover { transform: translateY(-2px); }

/* switching case: the header, average box and strip fade in */
.is-swap { animation: cs-swap 0.35s calc(var(--k, 0) * 60ms) ease-out both; }
#cs-strip.is-swap { animation-name: cs-swap-fade; }

/* open button */
.cs-open { transition: background-color 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease; }
.cs-open:hover:not(:disabled) { box-shadow: 0 6px 20px rgba(58, 53, 251, 0.35); }
.cs-open:active:not(:disabled) { transform: scale(0.97); box-shadow: none; }
.cs-open.is-busy { background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.14) 50%, transparent 100%); background-size: 50% 100%; background-repeat: no-repeat; animation: cs-busy 1.2s linear infinite; }
.cs-open.is-busy .fas { animation: cs-wobble 0.5s ease-in-out infinite; }
.cs-seg button { transition: background 0.18s ease, color 0.18s ease; }
.cs-toggle { transition: background 0.18s ease, color 0.18s ease; }

/* contents: the arrow turns back as soon as closing starts */
.cs-contents.is-closing > summary .fas { transform: none; }

@media (max-width: 1263px) { .cs-picker { flex-basis: 280px; max-width: 280px; } }
@media (max-width: 959px) {
  .cs-layout { flex-direction: column; align-items: stretch; }
  .cs-picker { flex: none; max-width: none; position: static; min-height: 0; }
  .cs-picker__card { position: static; max-height: none; padding: 16px; }
  .cs-picker__list { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; max-height: none; padding: 0 0 6px; scroll-snap-type: x mandatory; }
  .cs-pick { flex: 0 0 220px; width: 220px; scroll-snap-align: start; background: #16161D; }
  .cs-stage { padding: 16px; }
  .cs-sticky:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(18, 18, 23, 0.96); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4); }
  .cs-sticky .cs-btn { width: 100%; height: 48px; }
}
@media (max-width: 640px) {
  .cs-main { padding: 16px 16px 0; }
  .cs-crumbs { padding: 0; }
  .cs-panel { padding: 24px 16px; }
  .cs-hero { padding: 20px 16px; }
  .cs-hero h1 { font-size: 26px; line-height: 34px; }
  .cs-hero__badges { justify-content: flex-start; }
  .cs-ev { flex: 1 1 100%; }
  .cs-tile { width: 120px; height: 120px; }
  .cs-tile img { width: 96px; height: 72px; }
  .cs-reel { height: 156px; }
  .cs-open { min-width: 0; flex: 1 1 100%; }
  .cs-drops { flex-direction: column; }
  .cs-best { flex: none; }
  .cs-cta__facts { flex-direction: column; }
  .cs-method__rule { flex-basis: 100%; }
  .cs-head__cost .cs-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-main *, .cs-main *::before, .cs-main *::after { animation: none !important; transition: none !important; }
  .cs-spark { display: none; }
}