/* rograde: one product system. Loaded after legacy structural styles. */
@font-face { font-family:Golos; src:url('../img/fonts/golos-text.ttf') format('truetype'); font-weight:400 900; font-display:swap; }
:root {
  --bg:#171b21; --surface:#20262e; --surface-2:#272f39; --surface-3:#323c48;
  --line:#38424e; --line-2:#526071; --text:#f2f5f8; --muted:#b5bfcc; --muted-2:#a4afbf;
  --accent:#92bbff; --accent-2:#b2cfff; --accent-3:#92bbff; --accent-ink:#12243f; --accent-soft:#92bbff15;
  --gold:#edbd78; --green:#82d4b1; --red:#f3a19d;
  --r-common:#a9b3c1; --r-rare:#80b4ef; --r-epic:#b7a1e9; --r-legendary:#e6c183; --r-mythic:#e5a4bc;
  --font:Golos,'Segoe UI',sans-serif; --display:var(--font); --r:10px; --r-lg:14px;
}
html { color-scheme:dark; scroll-padding-top:92px; scrollbar-color:var(--line-2) var(--bg); }
body { --header-h:76px; --sidebar-w:200px; background:var(--bg); background-image:none; font:14px/1.55 var(--font); letter-spacing:0; }
body::before { content:none; }
h1,h2,h3,h4 { font-family:var(--font); text-transform:none; letter-spacing:-.025em; text-wrap:balance; }
h1 { font-size:36px; line-height:1.15; font-weight:700; }
h2 { font-size:23px; line-height:1.25; font-weight:650; }
h3 { font-size:16px; line-height:1.3; font-weight:600; }
button,input,select { font-family:var(--font); }
p { text-wrap:pretty; }
a,button,input,select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
input,select { outline-offset:2px; caret-color:var(--accent); }
input:focus,select:focus { border-color:var(--accent); box-shadow:none; outline:2px solid var(--accent); }
::selection { background:var(--accent); color:var(--accent-ink); }
a { text-underline-offset:4px; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:200; padding:12px 20px; background:var(--accent); color:var(--accent-ink); border-radius:8px; }
.skip-link:focus { top:10px; }
svg { flex-shrink:0; }
.ic,[data-icon] { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ic svg,[data-icon] svg,.icon-btn svg,.hist-ic svg,.sidebar-head svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.header { background:var(--bg); backdrop-filter:none; border-bottom:1px solid var(--line); }
.header-inner { max-width:none; width:100%; margin:0; height:var(--header-h); padding:0 32px; gap:32px; }
.logo { display:inline-flex; align-items:center; gap:9px; font:750 22px/1 var(--font); letter-spacing:-1px; }
.logo-mark { width:30px; height:32px; border:0; border-radius:0; background:none; color:var(--accent); box-shadow:none; }
.logo-mark svg { width:30px; height:30px; }
.logo-text,.logo-text span { color:var(--text); }
.nav { height:100%; gap:24px; margin:0 0 0 24px; align-items:stretch; }
.nav-item { display:inline-flex; align-items:center; gap:8px; padding:0; font-size:13px; font-weight:500; border-radius:0; color:var(--muted); }
.nav-item .ic { display:none; }
.nav-item.active,.nav-item:hover { background:none; color:var(--text); }
.nav-item.active::after { left:0; right:0; bottom:0; height:2px; box-shadow:none; background:var(--accent); }
.header-actions { gap:10px; min-width:0; }
.balance-chip { height:42px; padding:0; border:0; background:none; gap:5px; font-size:14px; font-weight:600; }
.balance-chip .cur { color:var(--muted); font-size:12px; }
.bonus-chip { display:inline-flex; align-items:center; gap:5px; color:var(--gold); border-right:1px solid var(--line); padding-right:12px; margin-right:2px; font-size:13px; white-space:nowrap; }
.bonus-chip span:last-child { font-size:11px; }
@media(max-width:760px) { .bonus-chip { padding-right:8px; font-size:12px; }.header-actions { gap:8px !important; }.header .logo-mark { display:none; } }
@media(max-width:380px) { .header-inner { padding-inline:10px !important; }.header-actions { gap:6px !important; }.header .logo { font-size:17px; }.header .btn-auth { padding-inline:9px; } }
.btn-auth { height:40px; padding:0 15px; border-radius:8px; background:var(--accent); color:var(--accent-ink); font-size:12px; font-weight:650; box-shadow:none; }
.btn-auth:hover { background:var(--accent-2); }
.icon-btn { width:40px; height:40px; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:var(--surface); }
.icon-btn:hover,.icon-btn.active { background:var(--surface-2); color:var(--text); border-color:var(--line-2); }
.sidebar { background:var(--bg); border-right:1px solid var(--line); }
.sidebar-head { padding:20px 16px 14px; font-size:12px; font-weight:600; }
.sidebar-head a { display:grid; place-items:center; width:26px; height:26px; color:var(--muted); }
.sidebar .live-strip { display:flex; flex-direction:column; overflow:auto; padding:0 12px; gap:0; }
.sidebar-foot { padding:14px; color:var(--muted-2); font-size:12px; border-top:1px solid var(--line); white-space:normal; }
.feed-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:50px 12px; gap:12px; color:var(--muted-2); }
.feed-empty svg { width:30px; height:30px; margin-bottom:4px; }
.feed-empty b { font-size:12px; color:var(--muted); font-weight:500; }
.feed-empty span { font-size:12px; }
.drop.drop--art { display:grid; grid-template-columns:42px minmax(0,1fr); gap:5px 8px; min-height:80px; padding:12px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; animation:none; }
.drop::before { display:none; }
.drop .emoji { grid-row:1/3; width:42px; height:48px; background:none; }
.drop .emoji img { width:100%; height:100%; padding:0; object-fit:contain; }
.drop .info { min-width:0; }
.drop .name,.drop .user { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.drop .name { color:var(--text); }
.drop .user { font-size:12px; color:var(--muted-2); }
.drop .val { grid-column:2; color:var(--muted); font-size:12px; }
main.container { width:calc(100% - var(--sidebar-w)); max-width:1500px; margin-left:max(var(--sidebar-w),calc((100% + var(--sidebar-w) - 1500px)/2)); margin-right:auto; padding:32px clamp(24px,3.1vw,52px) 72px; min-height:calc(100vh - var(--header-h)); }
/* The catalogue is centred on the window, with space reserved for the feed on both sides. */
body[data-page=cases] main.container { width:calc(100% - 2 * var(--sidebar-w)); margin-inline:auto; }
body[data-page=cases] .footer { margin-left:0; }
body[data-page=cases] .footer .container { width:calc(100% - 2 * var(--sidebar-w)); max-width:1500px; margin-inline:auto; }
.footer { margin-left:var(--sidebar-w); padding:28px 0; background:var(--bg); border-top:1px solid var(--line); }
.footer .container { width:auto; margin:0; padding:0 clamp(24px,3.1vw,52px); }
.footer-top { display:flex; align-items:center; gap:32px; }
.footer .logo { font-size:20px; color:var(--text); }
.footer-top nav { display:flex; flex-wrap:wrap; gap:10px 24px; margin-left:auto; }
.footer-top a { display:inline-flex; font-size:12px; margin:0; }
.footer-top>span { color:var(--muted); font-size:12px; }
.disclaimer { padding:16px 0 0; margin:16px 0 0; font-size:12px; color:var(--muted-2); }
.btn { height:44px; padding:0 18px; gap:9px; border-radius:8px; background:var(--accent); color:var(--accent-ink); font-size:13px; font-weight:600; box-shadow:none; letter-spacing:0; text-transform:none; }
.btn:hover { background:var(--accent-2); transform:none; box-shadow:none; }
.btn.gold { background:var(--accent); color:var(--accent-ink); }
.btn.gold:hover { background:var(--accent-2); }
.btn.dark { background:#30231e; color:#fff7f0; }
.btn.dark:hover { background:#48352d; }
.btn.ghost { color:var(--text); border:1px solid var(--line-2); background:none; }
.btn.ghost:hover { background:var(--surface-2); border-color:var(--muted); }
.btn:disabled { color:var(--muted); background:var(--surface-3); opacity:1; cursor:default; }
.btn.sm { min-height:36px; height:36px; font-size:12px; }
input,select { min-width:0; height:44px; padding:0 12px; font-size:13px; border-radius:8px; background:var(--surface); border:1px solid var(--line-2); color:var(--text); }
input::placeholder { color:var(--muted-2); opacity:1; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; }
.page-heading p { margin-top:8px; color:var(--muted); font-size:13px; }
.section-nav { display:flex; gap:20px; }
.section-nav a { padding:8px 0; font-size:12px; color:var(--muted); }
.section-nav a:hover { color:var(--text); }
.collection-feature { min-height:330px; position:relative; display:grid; grid-template-columns:1fr 1fr; border-radius:16px; overflow:hidden; background:#293d59; }
.collection-copy { position:relative; z-index:2; padding:38px; }
.collection-copy h1 { font-size:clamp(28px,3.5vw,48px); letter-spacing:-.035em; line-height:1.07; font-weight:700; }
.collection-copy p { margin:18px 0 24px; line-height:1.65; color:#c6d5e8; font-size:13px; }
.collection-art { position:relative; min-width:0; }
.collection-disc { position:absolute; width:310px; height:310px; background:#354e6f; border-radius:50%; top:0; right:10%; }
.collection-art img { position:absolute; object-fit:contain; filter:drop-shadow(0 18px 16px #0a152f55); }
.collection-art .feature-main { width:270px; height:270px; right:18%; top:10%; transform:rotate(-12deg); z-index:2; }
.collection-art .feature-side { width:150px; height:150px; top:1%; right:-2%; transform:rotate(16deg); }
.collection-art .feature-back { width:135px; height:135px; bottom:8%; right:0; transform:rotate(16deg); z-index:3; }
.collection-caption { position:absolute; right:28px; bottom:22px; color:#c6d5e8; font-size:12px; }
.collection-caption b { display:block; color:var(--text); font-size:12px; }
.home-utility { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:18px 0 38px; border-bottom:1px solid var(--line); padding-bottom:18px; }
.home-utility a { display:flex; align-items:center; gap:12px; min-height:58px; padding:0 22px; font-size:12px; font-weight:500; }
.home-utility a:first-child { padding-left:0; }
.home-utility a+a { border-left:1px solid var(--line); }
.home-utility a>span:first-child { color:var(--accent); }
.home-utility a>span:nth-child(2) { flex:1; }
.home-utility a>span:last-child { color:var(--muted-2); }
.home-utility small { display:block; margin-top:2px; color:var(--muted); font-size:12px; font-weight:400; }
.page-title { margin-top:0; }
.title-row { display:flex; align-items:center; gap:12px; }
.page-title h2 { font-size:25px; }
.page-title .count,.count,.pill { font-size:12px; color:var(--muted); background:none; border:0; }
.toolbar { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; padding:0; border:0; }
.tabs { display:flex; align-items:center; gap:4px; border:0; padding:3px; border-radius:8px; background:var(--surface); margin-left:0; width:auto; }
.tab { min-height:38px; padding:7px 16px; font-size:12px; font-weight:500; border-radius:6px; }
.tab.active { color:var(--text); background:var(--surface-3); }
.toolbar .search { margin-left:auto; }
.toolbar .search::before { display:none; }
.search-ic { position:absolute; left:13px; top:14px; line-height:0; }
.search-ic svg { width:17px; height:17px; }
.toolbar .search input { padding-left:38px; width:210px; }
.toolbar select { width:175px; }
.group-head { display:flex; align-items:baseline; gap:9px; margin:30px 0 15px; }
.group-head h2 { font-size:17px; font-weight:600; }
.group-head::after { display:none; }
.group-head .pill { padding:0; border-radius:0; font-weight:400; }
.cases-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:16px !important; }
.case-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid transparent; border-radius:12px; overflow:hidden; padding:0; box-shadow:none; transition:border-color .15s,background .15s; }
.case-card:hover { transform:none; border-color:var(--line-2); background:#252d37; box-shadow:none; }
.case-card .art,.case-card.is-featured .art { position:relative; height:160px !important; aspect-ratio:auto; border:0; background:transparent !important; border-radius:0; }
.case-card .art::after { display:none; }
.case-card .art img { width:100%; height:100%; position:absolute; inset:0; object-fit:contain; padding:18px 20%; filter:drop-shadow(0 10px 9px #080e1840); }
.case-card .badge { top:12px; left:12px; border:0; background:#364c49; color:#bde4d3; font-size:12px; padding:3px 7px; font-weight:500; letter-spacing:0; border-radius:4px; }
.case-card .body { padding:0 16px 16px; text-align:left; align-items:flex-start; gap:3px; }
.case-card .name { width:100%; font-size:14px; line-height:1.4; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.case-card .items-count { font-size:12px; color:var(--muted-2); }
.case-card .card-foot { margin-top:10px; width:100%; }
.case-card .price,.case-card:hover .price { position:static; display:inline-flex; align-items:baseline; gap:5px; margin:0; padding:0; background:none; border:0; border-radius:0; font-size:16px; font-weight:600; color:var(--text); }
.case-card .price span,.case-card:hover .price span { color:var(--muted-2); font-size:12px; font-weight:400; margin:0; }
.activity-feature-row { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(275px,1fr); gap:24px; }
.season-feature { position:relative; min-height:350px; border-radius:16px; background:#ddb38f; color:#39291f; overflow:hidden; }
.season-feature-copy { position:relative; z-index:2; padding:30px 32px 70px; }
.collection-date { display:inline-block; font-size:12px; color:#624431; margin-bottom:14px; }
.season-feature h2 { font-size:clamp(30px,3vw,44px); font-weight:750; line-height:1.05; letter-spacing:-.035em; }
.season-feature p { margin:17px 0 24px; font-size:12px; line-height:1.65; color:#624431; }
.season-feature-art { position:absolute; right:-15px; top:0; width:48%; height:calc(100% - 45px); }
.season-feature-art img { position:absolute; object-fit:contain; filter:drop-shadow(0 14px 12px #65422035); }
.season-feature-art img:first-child { width:230px; height:230px; top:15%; right:0; transform:rotate(12deg); }
.season-feature-art img:last-child { width:125px; height:125px; bottom:-5%; right:18%; transform:rotate(-18deg); }
.season-feature-bottom { position:absolute; bottom:0; left:0; right:0; z-index:3; display:flex; justify-content:space-between; padding:15px 30px; border-top:1px solid #39291f29; font-size:12px; background:#ddb38f; }
.daily-panel { padding:26px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.panel-title,.section-title { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.panel-title h2 { font-size:20px; }
.panel-title>[data-icon] { color:var(--accent); }
.daily-panel>p { color:var(--muted); font-size:12px; line-height:1.65; margin-top:10px; }
.daily-reward { display:flex; align-items:baseline; gap:6px; margin:20px 0 14px; }
.daily-reward>b { font-size:43px; font-weight:650; letter-spacing:-.04em; line-height:1; }
.daily-reward>span { color:var(--muted); font-size:13px; }
.daily-reward small { margin-left:auto; color:var(--muted); font-size:12px; }
.week-track { display:flex; gap:6px; margin:22px 0; }
.week-track>span { flex:1; height:30px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:6px; color:var(--muted); font-size:12px; }
.week-track>span.is-on { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.week-track svg { width:15px; height:15px; }
.daily-panel>.btn { width:100%; }
.daily-panel .form-feedback { margin-top:12px; font-size:12px; min-height:34px; }
.section-title { margin-bottom:20px; }
.section-title>span { font-size:12px; color:var(--muted); }
.progress-section { margin-top:36px; padding:28px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.personal-progress { display:grid; grid-template-columns:1fr minmax(180px,35%); align-items:center; gap:32px; }
.personal-progress>div { display:flex; align-items:baseline; gap:18px; }
.personal-progress b { font-size:17px; font-weight:600; }
.personal-progress span { font-size:12px; color:var(--muted); }
progress { display:block; width:100%; height:5px; appearance:none; border:0; border-radius:4px; overflow:hidden; background:var(--surface-3); accent-color:var(--accent); }
progress::-webkit-progress-bar { background:var(--surface-3); border-radius:4px; }
progress::-webkit-progress-value { background:var(--accent); border-radius:4px; }
progress::-moz-progress-bar { background:var(--accent); border-radius:4px; }
.milestone-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:24px; }
.milestone { display:grid; grid-template-columns:44px minmax(0,1fr); gap:7px 12px; align-items:center; }
.milestone img { width:44px; height:44px; object-fit:contain; grid-row:1/3; }
.milestone h3 { font-size:13px; font-weight:500; letter-spacing:0; }
.milestone p { font-size:12px; color:var(--muted); margin-top:2px; }
.milestone-value { grid-column:2; display:flex; align-items:center; gap:12px; }
.milestone-value b { white-space:nowrap; font-size:12px; font-weight:500; }
.milestone-value span { color:var(--muted-2); font-weight:400; }
.milestone-value progress { flex:1; max-width:100px; height:3px; }
.community-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:48px; margin-top:38px; }
.community-grid h2 { font-size:21px; }
.sample-label { font-size:12px !important; }
.leader-table-head,.leader-row { display:grid; grid-template-columns:52px minmax(0,1fr) 60px; align-items:center; gap:10px; }
.leader-table-head { padding:0 0 10px; font-size:12px; color:var(--muted-2); }
.leader-table-head>span:last-child,.leader-row>strong { text-align:right; }
.leader-row { min-height:57px; padding:8px 0; border-top:1px solid var(--line); font-size:12px; }
.leader-rank { color:var(--muted); }
.leader-person { display:flex; align-items:center; gap:12px; min-width:0; }
.leader-person b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.leader-avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#c4d7f1; background:#35445a; font-size:12px; }
.avatar-1 { background:#4f4149; color:#f3cdda; }.avatar-2 { background:#3e4b46; color:#c0e0ce; }.avatar-3 { background:#514839; color:#e5d5b8; }
.leader-row>strong { font-weight:500; font-variant-numeric:tabular-nums; }
.my-standing { display:flex; align-items:center; gap:12px; background:var(--surface-2); border-radius:8px; padding:14px; margin-top:8px; font-size:12px; }
.my-standing small { color:var(--muted); margin-left:5px; }
.my-standing>b { margin-left:auto; font-weight:600; white-space:nowrap; }
.supporting-text { color:var(--muted-2); font-size:12px; margin-top:12px; }
.referral-section>p { color:var(--muted); font-size:13px; }
.referral-section>.field { margin-top:27px; }
.field>span { color:var(--muted); font-size:12px; font-weight:400; }
.referral-link { display:flex; gap:8px; margin-top:8px; }
.referral-link input { width:100%; flex:1; font-size:12px; }
.referral-link .btn { width:44px; padding:0; }
.form-feedback { color:var(--muted); font-size:12px; line-height:1.55; }
.referral-section>.form-feedback { margin-top:12px; font-size:12px; }
.referral-note { display:flex; gap:12px; color:var(--muted); padding-top:24px; margin-top:24px; border-top:1px solid var(--line); font-size:12px; }
.referral-note b { display:block; font-weight:500; color:var(--text); margin-top:5px; }
.page-head { padding:0; }.page-head h1 { font-size:34px; font-weight:700; }
.deposit-grid { max-width:1000px; gap:24px; margin-top:30px; }
.deposit-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:28px; box-shadow:none; gap:12px; }
.deposit-card h2,.deposit-card h3 { font-size:18px; }.deposit-card p { font-size:13px; margin:0; flex:0; }
.deposit-card .row { align-items:flex-end; flex-wrap:wrap; }
.deposit-card .row .btn { height:44px; }
.amount-field { display:flex; flex:1; min-width:130px; flex-direction:column; gap:7px; }
.amount-field>span { color:var(--muted); font-size:12px; }
.amount-field input { width:100%; }
.deposit-card .hint { color:var(--muted); font-size:12px; }
.method-status { font-size:12px; color:var(--muted); padding:6px 10px; background:var(--surface-3); border-radius:5px; }
.trust-card,.payment-status-card { background:transparent; border-color:var(--line); }
.subtle-link { display:inline-flex; padding:5px 0; color:var(--accent); font-size:13px; }
.back { color:var(--muted); font-size:12px; }.back:hover { text-decoration:underline; }
.case-hero { gap:20px; margin-top:22px; }.case-hero .art { background:var(--surface-2) !important; border-radius:12px; }
.case-hero h1 { font-size:30px; font-weight:650; }.case-hero .badge { font-size:12px; letter-spacing:0; color:var(--accent); background:var(--surface-3); }
.case-hero .sub { font-size:13px; }
.case-layout--full { grid-template-columns:minmax(0,1fr); }
.roulette-wrap { background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; }
.roulettes { display:flex; flex-direction:column; gap:10px; }
.roulette { height:150px; }.roulette .strip { top:14px; }.roulette .cell { height:120px; }.roulette .cell img { width:56px; height:56px; object-fit:contain; }
.roulette .cell { background:transparent; border:0; border-radius:0; }
.roulette .cell::before { display:none; }
.roulette .cell .nm { font-size:12px; font-weight:400; line-height:1.3; }
.roulette .pointer { background:var(--accent); box-shadow:none; }
.open-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:20px; }
.roulette-actions { margin:0; gap:8px; flex-wrap:wrap; }.roulette-actions .btn { height:44px; padding:0 18px; font-size:13px; }
.count-picker { display:flex; gap:4px; padding:3px; background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.count-picker button { width:37px; min-height:38px; color:var(--muted); border-radius:5px; font-size:12px; }
.count-picker button.on { background:var(--surface-3); color:var(--text); }
.count-picker.locked { pointer-events:none; opacity:.5; }.sound-btn { border-radius:8px; }.sound-btn svg { width:18px; height:18px; }
.items-grid,.inv-grid { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; }
.item-card { border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:none; }
.item-card::before { height:1px; left:20px; right:20px; }
.item-card .emoji img { width:76px; height:76px; object-fit:contain; }.item-card .name { font-size:12px; font-weight:500; }.item-card .val { font-weight:600; font-size:13px; }
.item-card .chance { font-weight:400; font-size:12px; }
.modal { width:min(100%,490px); max-height:90vh; overflow:auto; border:1px solid var(--line-2); border-radius:16px; background:var(--surface); box-shadow:0 24px 60px #080d1860; }
.modal .rarity-label { letter-spacing:0; font-size:12px; }.modal::before { height:2px; }
.modal .row { flex-wrap:wrap; }.modal .btn { padding:0 14px; }
.modal.multi { width:min(100%,720px); }.wins-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; }
.win-cell { padding:10px; border:1px solid var(--line); border-radius:8px; }.win-cell .nm { font-size:12px; }.win-cell .v { font-size:12px; }
.modal .win-cell .emoji img { width:70px; height:70px; object-fit:contain; }.modal .win-cell .emoji { margin:0; }
.result-context { font-size:12px; color:var(--muted); margin:16px 0; }
.result-paths { display:flex; justify-content:center; gap:18px; margin-bottom:24px; }.result-paths a { color:var(--muted); font-size:12px; }.result-paths a:hover { color:var(--text); }.result-paths small { display:none; }
.profile { display:flex; flex-direction:column; gap:28px; }.profile-hero { display:flex; align-items:center; gap:20px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.profile-avatar { display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:var(--surface-3); color:var(--accent); }.profile-avatar svg { width:32px; height:32px; }
.profile-id h1 { font-size:26px; }.profile-id h1 span { color:var(--muted); }.profile-id p { color:var(--muted); font-size:12px; margin-top:7px; }
.profile-level { margin-left:auto; min-width:180px; font-size:12px; }.profile-level small { color:var(--muted); }.lvl-bar { height:4px; background:var(--surface-3); margin:9px 0; border-radius:3px; }.lvl-bar span { display:block; height:100%; background:var(--accent); }
.profile-best { display:grid; grid-template-columns:150px minmax(0,1fr); gap:25px; padding:24px; background:var(--surface); border-radius:14px; align-items:center; }
.best-art img { width:100%; height:140px; object-fit:contain; }.best-info h2 { font-size:24px; margin:8px 0; }.best-info .rarity-label { color:var(--rc); font-size:12px; }.best-info p { color:var(--muted); font-size:12px; margin-top:6px; }.best-val { font-size:20px; }.best-empty { grid-column:1/-1; padding:30px 0; text-align:center; }.best-empty p { margin:12px 0 20px; color:var(--muted); }
.profile-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }.stat-card { display:flex; flex-direction:column; gap:4px; }.stat-card span,.stat-card small { color:var(--muted); font-size:12px; }.stat-card b { font-size:24px; font-weight:600; }
.profile-history { border-top:1px solid var(--line); }.hist-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:14px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }.hist-ic { color:var(--muted); }.hist-txt { display:flex; flex-direction:column; }.hist-txt b { font-size:13px; font-weight:500; }.hist-txt small { color:var(--muted); font-size:12px; }.hist-val { font-size:13px; font-variant-numeric:tabular-nums; }.hist-empty { padding:32px; color:var(--muted); text-align:center; }
.profile .section { margin-top:10px; }.empty { border:1px solid var(--line); background:var(--surface); font-size:13px; }
.empty a { display:inline-block; margin-left:8px; font-weight:500; }
/* Existing upgrader mechanics with the shared palette and type. */
.upg { --u-bg:var(--bg); --u-surface:var(--surface); --u-surface-2:var(--surface-2); --u-surface-3:var(--surface-3); --u-line:var(--line); --u-line-soft:var(--line); --u-line-strong:var(--line-2); --u-ink:var(--text); --u-ink-2:var(--muted); --u-muted:var(--muted-2); --u-jade:var(--accent); --u-jade-soft:var(--accent-2); --u-gold:var(--accent); --u-gold-soft:var(--accent-2); --u-danger:var(--red); }
.upg-heading { align-items:flex-start; padding:0 0 10px; }.upg-brand { color:var(--text); }.upg-brand h1 { font-size:34px; font-weight:700; }.upg-brand svg { display:none; }
.upg-control,.balance-stake,.balance-stake[data-locked=true],.upg-catalogs>section,.upg-how .panel-flat,.upg-dialog,.preset-box { background:var(--surface); border-color:var(--line); box-shadow:none; }
.upg-control,.stage-title,.stage-subtitle,.stake-footer,.balance-heading,.balance-amount,.balance-hint,.gauge-caption,.wallet-available,.wallet-available b,.tile-price,.slot-price,.target-info,.upg-how .panel-flat p+p { color:var(--muted); }
.upg-control:hover,.upg-control[aria-pressed=true] { color:var(--text); background:var(--surface-3); border-color:var(--line-2); }
.stage,.stage[data-empty=true] { background:var(--surface); border-color:var(--line); box-shadow:none; border-radius:12px; }.stage:before,.stage:after,.stage-dim,.stage-rim,.item-light { display:none; }
.stage-heading { align-items:flex-start; padding:4px 0 12px; }
.stage-title,.gauge-caption,.slot.hero .slot-name { text-transform:none; letter-spacing:0; font-weight:500; }
.stage-dir,.robs { color:var(--accent); }
.stage-empty p,.stage-empty p span,.item-name,.item-details,.stake-footer button { color:var(--muted); }
.stage-empty p,.stage-empty p span,.stage-subtitle,.balance-hint,.gauge-caption,.stake-footer button { font-size:12px; }
.stake-empty { border-color:var(--line-2); color:var(--muted-2); }
.stake-empty.add,.stake-empty.add:hover { border-color:var(--line-2); background:var(--surface-2); color:var(--accent); }
.slot { border-color:var(--line-2); background:var(--surface-2); color:var(--text); }
.slot-remove,.slot.hero .slot-remove,.target-clear { background:var(--bg); color:var(--muted); border-color:var(--line-2); }
.stage-actions button { min-height:36px; background:var(--surface-2); border-color:var(--line-2); color:var(--text); }
.stage-actions button.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.item-details .profit,.win-label { color:var(--accent); }
.gauge svg.drawing { filter:none; }
.upg-tooltip { background:var(--surface-3); border-color:var(--line-2); color:var(--text); }
.stage-empty { color:var(--muted); }.stage-empty-mark { color:var(--line-2); }.stage-heading { border-color:var(--line); }
.balance-amount strong,.gauge-chance,.target-name { color:var(--text); text-shadow:none; }
.upg-action { color:var(--accent-ink) !important; background:var(--accent) !important; border:0; box-shadow:none; border-radius:8px; font-size:14px; }
.upg-action:hover:not(:disabled) { background:var(--accent-2) !important; transform:none; box-shadow:none; }.upg-action:disabled { background:var(--surface-3) !important; color:var(--muted) !important; opacity:1; }
.upg-presets>button { border:1px solid var(--line); border-radius:6px; background:var(--surface); }.upg-presets>button[aria-pressed=true] { background:var(--surface-3); border-color:var(--accent); color:var(--accent); }
.upg-catalogs>section>header,.upg-dialog>header { background:var(--surface-2); border-color:var(--line); }.upg-catalogs h2 { text-transform:none; font-size:13px; }.cat-icon { background:var(--surface-3); color:var(--accent); }
.tile { background:var(--surface-2); border:1px solid var(--line); border-radius:7px; }.tile:before { display:none; }.tile:hover { border-color:var(--muted); box-shadow:none; }.tile[data-selected=true] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }.tile-name { color:var(--text); text-transform:none; font-weight:400; font-size:12px; }.tile-sel { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.upg-how .panel-flat p+p { color:var(--muted); }.upg-dialog>footer button { background:var(--accent); color:var(--accent-ink); box-shadow:none; }.preset-box label { background:var(--bg); border-color:var(--line-2); }
.mobile-nav { display:none; }
@media (max-width:1200px) {
  body { --sidebar-w:0px; }.sidebar { display:none; }.header-inner { gap:24px; padding:0 24px; }.nav { margin-left:10px; gap:20px; }
  .activity-feature-row { gap:20px; }.season-feature-copy { padding-left:28px; }.season-feature-art img:first-child { width:195px; height:195px; top:22%; }.collection-art .feature-main { right:14%; }
}
@media (max-width:1000px) {
  .header-inner { flex-wrap:wrap; gap:0; height:auto; min-height:76px; padding:0 24px; }.logo { height:66px; }.header-actions { margin-left:auto; }
  .nav { order:3; width:100%; height:44px; margin:0; gap:30px; }.nav-item { font-size:13px; }body { --header-h:110px; }
  .activity-feature-row { grid-template-columns:minmax(0,1.5fr) minmax(265px,1fr); }.season-feature-art { opacity:.72; width:38%; }.season-feature-art img:first-child { right:-35px; }.season-feature h2 { font-size:34px; }
  .season-feature-copy p { max-width:230px; }.cases-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .collection-copy { padding:30px; }.collection-copy h1 { font-size:35px; }.collection-art .feature-main { width:235px; height:235px; right:8%; }.collection-art .feature-side { width:115px; height:115px; }.collection-disc { width:270px; height:270px; right:-10%; }
  .home-utility a { padding:0 14px; }.home-utility a>span:last-child { display:none; }.community-grid { gap:30px; }.milestone-list { gap:16px; }.milestone { grid-template-columns:32px minmax(0,1fr); gap:7px; }.milestone img { width:32px; height:36px; }.milestone-value progress { display:none; }
}
@media (max-width:760px) {
  body { --header-h:64px; }.header-inner { padding:0 16px; min-height:64px; }.logo { height:64px; font-size:20px; }.logo-mark { width:25px; }.nav { display:none; }.header-actions { gap:12px; }.header-actions>.icon-btn { display:none; }.balance-chip { font-size:12px; }.btn-auth { font-size:12px; padding:0 12px; height:36px; }
  main.container { margin-left:0; padding:24px 18px 44px; }.footer { margin-left:0; padding-bottom:100px; }.footer .container { padding:0 18px; }
  .mobile-nav { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60; gap:2px; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line); backdrop-filter:none; }
  .mobile-nav a { display:flex; flex:1; min-height:49px; gap:4px; flex-direction:column; align-items:center; justify-content:center; padding:5px 0; color:var(--muted); font-size:12px; font-weight:500; }
  .mobile-nav a.active { color:var(--accent); }.mobile-nav .ic svg { width:21px; height:21px; }
  h1,.page-head h1 { font-size:29px; }.page-heading { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:20px; }.page-heading p { font-size:12px; }.section-nav { gap:22px; }.section-nav a { padding:4px 0; }
  .activity-feature-row { grid-template-columns:1fr; gap:20px; }.season-feature { min-height:320px; }.season-feature-copy { padding:26px 24px 70px; }.season-feature-art { opacity:1; width:45%; }.season-feature h2 { font-size:37px; }.season-feature-art img:first-child { right:-10px; width:200px; height:200px; top:20%; }.season-feature-art img:last-child { width:105px; height:105px; right:13%; bottom:0; }.season-feature p { max-width:215px; font-size:12px; }.season-feature-bottom { padding:14px 24px; }
  .daily-panel { padding:23px; }.daily-reward { margin:18px 0; }.daily-reward>b { font-size:36px; }.daily-reward small { font-size:12px; }.week-track { margin:18px 0; }.week-track>span { height:34px; }.daily-panel .form-feedback { min-height:0; }
  .progress-section { margin-top:28px; padding:25px 0; }.personal-progress { grid-template-columns:1fr; gap:12px; }.personal-progress>div { justify-content:space-between; gap:8px; }.personal-progress span { font-size:12px; }.section-title h2 { font-size:21px; }
  .milestone-list { grid-template-columns:1fr; gap:20px; margin-top:25px; }.milestone { grid-template-columns:44px minmax(0,1fr) 90px; gap:12px; }.milestone img { width:44px; height:44px; grid-row:1; }.milestone-value { grid-column:3; flex-direction:column; align-items:flex-end; gap:8px; }.milestone-value progress { display:block; width:80px; }.milestone h3 { font-size:13px; }
  .community-grid { grid-template-columns:1fr; gap:36px; margin-top:28px; }.referral-section { border-top:1px solid var(--line); padding-top:26px; }
  .collection-feature { min-height:360px; grid-template-columns:1fr; }.collection-copy { padding:25px; }.collection-copy h1 { font-size:32px; }.collection-copy p { max-width:210px; font-size:12px; }.collection-art { position:absolute; inset:0; pointer-events:none; }.collection-disc { top:90px; right:-100px; width:270px; height:270px; }.collection-art .feature-main { width:185px; height:185px; right:-20px; top:145px; opacity:.85; }.collection-art .feature-side { display:none; }.collection-art .feature-back { width:90px; height:90px; right:110px; bottom:0; opacity:.65; }.collection-caption { display:none; }.collection-copy .btn { position:relative; z-index:4; }
  .home-utility { grid-template-columns:1fr; margin:12px 0 28px; padding:0; }.home-utility a,.home-utility a:first-child { padding:12px 0; min-height:64px; }.home-utility a+a { border-left:0; border-top:1px solid var(--line); }.home-utility a>span:last-child { display:inline-flex; }.home-utility small { font-size:12px; }
  .page-title h2 { font-size:23px; }.toolbar { gap:10px; }.toolbar .tabs { flex:1; width:auto; }.toolbar .search { order:3; flex:1 1 100%; width:100%; }.toolbar .search input { width:100%; }.toolbar select { width:150px; font-size:12px; padding-left:8px; }.tab { padding:7px 12px; font-size:12px; min-height:38px; }
  .cases-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }.case-card .art,.case-card.is-featured .art { height:140px !important; }.case-card .art img { padding:18px 15%; }.case-card .body { padding:0 12px 14px; }.case-card .name { font-size:12px; }.case-card .items-count { font-size:12px; }.case-card .price { font-size:14px; }.group-head { margin-top:26px; }.group-head h2 { font-size:16px; }
  .deposit-grid { grid-template-columns:1fr; gap:18px; }.deposit-card { padding:22px; }.deposit-card .row { gap:10px; }.amount-field { min-width:145px; }.deposit-card .row .btn { font-size:12px; padding:0 13px; }
  .footer-top { align-items:flex-start; flex-wrap:wrap; gap:20px; }.footer-top .logo { height:auto; }.footer-top nav { order:3; width:100%; gap:12px 20px; }.footer-top>span { margin-left:auto; }.disclaimer { font-size:12px; }
  .case-hero { flex-direction:row; align-items:center; gap:15px; }.case-hero h1 { font-size:25px; flex-wrap:wrap; }.case-hero .art { width:65px; height:65px; }.case-hero .sub { font-size:12px; }.roulette-wrap { padding:14px; }.open-controls { display:block; }.count-picker { width:fit-content; margin:0 auto 16px; }.roulette-actions { display:grid; grid-template-columns:1fr 44px; }.roulette-actions .btn:first-child { grid-column:1/-1; }.roulette-actions .btn { width:100%; }.items-grid,.inv-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.item-card { padding:17px 10px 12px; }.item-card .row { flex-direction:column; }.item-card .name { min-height:34px; }.item-card .btn { min-height:40px; }
  .modal .row { flex-direction:column; }.modal .row .btn { flex:auto; min-height:44px; }.modal .result-paths { gap:20px; }
  .profile-hero { flex-wrap:wrap; gap:14px; }.profile-avatar { width:52px; height:52px; }.profile-id h1 { font-size:20px; }.profile-id p { font-size:12px; }.profile-level { width:100%; margin:6px 0 0; }.profile-best { grid-template-columns:85px minmax(0,1fr); padding:18px; gap:15px; }.best-art img { height:95px; }.best-info h2 { font-size:18px; }.best-val { font-size:16px; }.profile-stats { grid-template-columns:1fr 1fr; gap:20px; }.hist-val { font-size:12px; }.hist-txt b { font-size:12px; }
  .upg-brand h1 { font-size:29px; }.upg-catalogs>section>header { gap:10px; }.upg-catalogs>section>header input { font-size:12px; }.upg-control { width:44px; height:44px; }
}
@media (max-width:380px) { .logo { font-size:18px; }.logo-mark { display:none; }.header-actions { gap:8px; }.season-feature h2 { font-size:32px; }.season-feature-art { opacity:.7; right:-30px; }.season-feature-copy p { max-width:185px; }.daily-panel { padding:19px; }.week-track { gap:5px; }.collection-copy h1 { font-size:28px; }.toolbar select { width:135px; }.tab { padding:7px 9px; } }
@media (max-width:760px) {
  .header .logo-text { display:block; }
  .season-feature { min-height:0; }
  .season-feature-copy { padding-bottom:0; }
  .season-feature-copy p { max-width:none; }
  .season-feature-art { position:relative; right:auto; top:auto; width:100%; height:150px; opacity:1; margin-top:8px; }
  .season-feature-art img:first-child { width:175px; height:175px; top:-20px; right:5px; }
  .season-feature-art img:last-child { width:105px; height:105px; right:auto; left:28px; bottom:0; }
  .season-feature-bottom { position:relative; }
  .collection-feature { display:flex; flex-direction:column; min-height:0; }
  .collection-copy { padding-bottom:0; }
  .collection-copy p { max-width:28ch; }
  .collection-art { position:relative; inset:auto; height:160px; margin-top:4px; z-index:1; }
  .collection-disc { width:240px; height:240px; top:0; right:-55px; }
  .collection-art .feature-main { width:190px; height:190px; top:-18px; right:0; opacity:1; }
  .collection-art .feature-back { width:100px; height:100px; right:auto; left:18px; bottom:0; opacity:1; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.modal,.tile-art,.slot-art,.chev1,.chev2,.stage-actions { animation:none; transition:none; }.live-dot::before { animation:none; }.roulette .strip { will-change:auto; } }

/* Item surfaces carry rarity; names remain readable at every card width. */
.item-card,.win-cell,.roulette .cell {
  background:linear-gradient(155deg,color-mix(in srgb,var(--rc,var(--r-common)) 26%,var(--bg)),color-mix(in srgb,var(--rc,var(--r-common)) 7%,var(--bg)));
  border:1px solid color-mix(in srgb,var(--rc,var(--r-common)) 34%,var(--line));
}
.item-card::before { display:none; }
.item-card { min-width:0; }
.item-card .name { width:100%; min-height:3.9em; line-height:1.3; overflow-wrap:anywhere; white-space:normal; }
.item-card .val { margin-top:auto; }
.roulette { height:200px; background:transparent; border:0; border-radius:0; }
.roulette .strip { top:12px; }
.roulette .cell { flex:0 0 140px; width:140px; height:174px; padding:10px 9px; gap:8px; border-radius:8px; justify-content:flex-start; }
.roulette .cell .emoji { height:56px; flex:none; }
.roulette .cell .nm { width:100%; padding:0; color:var(--text); overflow-wrap:anywhere; white-space:normal; line-height:1.25; }
.win-cell { display:flex; min-width:0; flex-direction:column; gap:8px; padding:14px 10px; }
.win-cell .nm { line-height:1.4; overflow-wrap:anywhere; white-space:normal; }
.win-cell .v { margin-top:auto; font-variant-numeric:tabular-nums; }
.modal h3 { overflow-wrap:anywhere; }
.modal:not(.multi)>.emoji { width:164px; height:164px; display:grid; place-items:center; margin:16px auto; border-radius:18px; background:linear-gradient(145deg,color-mix(in srgb,var(--rc) 26%,var(--bg)),color-mix(in srgb,var(--rc) 8%,var(--bg))); }
.modal:not(.multi)>.emoji img { max-width:140px; max-height:140px; object-fit:contain; }
.wins-grid { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.result-context { margin:20px 0; }
.stage[data-empty=false] { background:linear-gradient(155deg,color-mix(in srgb,var(--stage-rarity) 19%,var(--bg)),color-mix(in srgb,var(--stage-rarity) 5%,var(--bg))); border-color:color-mix(in srgb,var(--stage-rarity) 28%,var(--line)); }
.upg .slot,.upg .tile { background:linear-gradient(155deg,color-mix(in srgb,var(--rarity) 27%,var(--bg)),color-mix(in srgb,var(--rarity) 7%,var(--bg))); border:1px solid color-mix(in srgb,var(--rarity) 34%,var(--line)); }
.upg .slot.hero { background:transparent; border:0; }
.slot.hero .slot-name,.target .item-name { display:block; width:100%; max-width:100%; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; -webkit-line-clamp:unset; line-height:1.4; color:var(--text); }
.slot.hero .slot-name { padding-inline:4px; }
.target .item-caption { padding-top:8px; }
.gauge-caption { max-width:100%; overflow-wrap:anywhere; }
.tile-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; align-items:stretch; }
.tile { display:flex; height:auto; min-height:176px; min-width:0; flex-direction:column; align-items:center; padding:10px 8px; gap:8px; }
.tile-art { position:relative; inset:auto; width:100%; height:76px; flex:none; }
.tile-art img { width:76px; height:76px; }
.tile-art img.gift-card-art { width:118px; height:84px; max-width:100%; }
.tile-name { position:static; width:100%; min-height:3.9em; white-space:normal; overflow:visible; overflow-wrap:anywhere; text-overflow:clip; font-size:12px; line-height:1.3; }
.tile-price { position:static; margin-top:auto; color:var(--text); }
.tile-sel { top:8px; left:8px; }
.upg .tile[data-selected=true] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.gauge #pointer { transition:none; }
.case-card .name { max-width:100%; white-space:normal; overflow-wrap:anywhere; }

/* Generated collection covers use their own full illustration area. */
.case-card.has-cover { background:var(--bg); border-color:var(--line); }
.case-card.has-cover .art { height:160px !important; }
.case-card.has-cover .art img { padding:6px; filter:none; object-fit:contain; }
.case-card.has-cover .body { padding-top:4px; }
.case-hero .art.has-cover { width:200px; height:160px; background:var(--bg) !important; border-radius:12px; }
.case-hero .art.has-cover img { width:100%; height:100%; object-fit:contain; }
@media(max-width:560px) {
  .tile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tile { min-height:182px; }
  .roulette-wrap { padding-inline:0; }
  .wins-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .win-cell { padding:12px 8px; }
  .case-hero .art.has-cover { width:92px; height:92px; }
}
@media(prefers-reduced-motion:reduce) {
  .upg-burn,.upg-consume,.particle,.result-ring,.gauge .result-msg,.item-art,.loss-flash { animation:none !important; }
}

/* Catalogue: title, illustration, price. The artwork is the card's focal point. */
#cases-root { margin-top:32px; }
.case-collection + .case-collection { margin-top:42px; }
.case-collection .group-head { justify-content:center; gap:20px; margin:0 0 26px; }
.case-collection .group-head::before,.case-collection .group-head::after { content:""; display:block; flex:1; height:1px; background:var(--line); }
.case-collection .group-head h2 { flex:none; font-size:14px; font-weight:500; color:var(--muted); letter-spacing:0; }
#cases-root .cases-grid { --catalog-columns:5; --catalog-gap:20px; display:flex; flex-wrap:wrap; justify-content:center; gap:28px var(--catalog-gap) !important; }
#cases-root .case-card { flex:0 0 calc((100% - (var(--catalog-columns) - 1) * var(--catalog-gap)) / var(--catalog-columns)); min-width:0; padding:10px 8px 14px; border:0; border-radius:10px; background:transparent; overflow:visible; }
#cases-root .case-card:hover { background:var(--surface); }
#cases-root .case-card .body { min-height:48px; width:100%; padding:0 4px; gap:3px; }
#cases-root .case-card .name { font-size:13px; line-height:1.4; font-weight:600; overflow:visible; }
#cases-root .case-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#cases-root .case-card .items-count { font-size:11px; color:var(--muted-2); }
#cases-root .case-card .badge { position:static; padding:1px 5px; font-size:10px; line-height:1.5; border-radius:3px; }
#cases-root .case-card .art { width:100%; height:auto !important; aspect-ratio:1.18; margin-top:6px; overflow:visible; }
#cases-root .case-card .art img { padding:8px 16%; transition:transform .2s ease; }
#cases-root .case-card.has-cover .art img { padding:0; filter:drop-shadow(0 8px 8px #080e1840); }
#cases-root .case-card:hover .art img { transform:translateY(-4px); }
#cases-root .case-card .card-foot { display:flex; justify-content:center; width:100%; margin-top:12px; }
#cases-root .case-card .price { padding:5px 12px; border:1px solid var(--line); border-radius:5px; font-size:13px; line-height:1.4; color:var(--text); }
#cases-root .case-card:hover .price { border-color:var(--accent); color:var(--accent); }
#cases-root .case-card .price span { font-size:11px; }
@media(max-width:1700px) { #cases-root .cases-grid { --catalog-columns:4; } }
@media(min-width:1201px) and (max-width:1400px) { #cases-root .cases-grid { --catalog-columns:3; } }
@media(max-width:1000px) { #cases-root .cases-grid { --catalog-columns:3; } }
@media(max-width:760px) {
  #cases-root .cases-grid { --catalog-columns:2; --catalog-gap:12px; gap:22px var(--catalog-gap) !important; }
  #cases-root .case-card { padding:6px 0 10px; }
  #cases-root .case-card .name { font-size:12px; }
  #cases-root .case-card .body { min-height:52px; }
  .case-collection + .case-collection { margin-top:32px; }
  .case-collection .group-head { gap:12px; margin-bottom:18px; }
  .case-collection .group-head h2 { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { #cases-root .case-card .art img { transition:none; } #cases-root .case-card:hover .art img { transform:none; } }
.item-chance { color:var(--muted); font-size:11px; padding:0 10px 12px; }

/* Guests browse the catalog without empty personal balances or account history. */
body.is-guest{--sidebar-w:0px}body.is-guest .balance-stake,body.is-guest [data-account-only]{display:none!important}

body:not(.is-authenticated) .balance-stake,body:not(.is-authenticated) .bonus-wallet,body:not(.is-authenticated) #inventory-count,body:not(.is-authenticated) #streak-value,body:not(.is-authenticated) #weekly-detail,body:not(.is-authenticated) #referrals .referral-link{display:none!important}