/* =====================================================================
   SKINBOX — UTILITY CLASSES (extracted from inline styles)
   ===================================================================== */

/* ---------- Text size helpers ---------- */
.text-12 { font-size:12px }
.text-13 { font-size:13px }
.text-14 { font-size:14px }
.text-15 { font-size:15px }
.text-18 { font-size:18px }
.text-20 { font-size:20px }
.text-22 { font-size:22px }
.text-bold { font-weight:700 }
.text-bold-800 { font-weight:800 }
.line-155 { line-height:1.55 }
.line-16 { line-height:1.6 }

/* ---------- Color helpers ---------- */
.c-gold { color:var(--rar-gold) }
.c-gold-bold { color:var(--rar-gold);font-weight:800 }
.c-green { color:var(--neon-green) }
.c-violet { color:var(--neon-violet) }
.c-white { color:#fff }

/* ---------- Icon / image sizing ---------- */
.ico-13 { width:13px }
.ico-15 { width:15px }
.ico-18 { width:18px }
.ico-22-square { width:22px;height:22px;object-fit:contain }
.icon-20-square { width:20px;height:20px;object-fit:contain }
.ico-inline { display:inline-block;vertical-align:-2px }
.ico-avatar-pad { width:22px;height:22px;padding:8px;color:#fff }
.ico-white-pad { color:#fff;padding:8px }

.img-contain { object-fit:contain }
.img-cover { width:100%;height:100%;object-fit:cover }
.img-drop-sm { filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) }
.img-drop-md { filter:drop-shadow(0 6px 16px rgba(0,0,0,.6)) }
.img-drop-lg { filter:drop-shadow(0 8px 20px rgba(0,0,0,.65)) }
.img-drop-xl { filter:drop-shadow(0 12px 28px rgba(0,0,0,.65)) }

.icon-46-block { width:46px;height:46px;object-fit:contain }
.icon-56-fade { height:56px;object-fit:contain;opacity:.9 }
.icon-56-fade-85 { height:56px;object-fit:contain;opacity:.85 }
.icon-64-fade { height:64px;object-fit:contain;opacity:.9 }
.icon-64-block { width:64px;height:64px;object-fit:contain;margin:0 auto 16px;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6)) }
.icon-72-block { width:72px;height:72px;object-fit:contain;margin:0 auto 16px;display:block }
.icon-72-round { width:72px;height:72px;border-radius:50%;background:rgba(201,154,74,.12);border:1px solid rgba(201,154,74,.25);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:var(--neon-violet) }
.icon-32-square { width:32px;height:32px }
.icon-110-fade { height:110px;object-fit:contain;flex-shrink:0 }
.icon-110-block { width:110px;height:110px;object-fit:contain;margin:16px auto 16px;display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.65)) }

.art-max-72 { max-height:72px;max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) }
.art-max-106 { max-height:106px;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));transition:transform .22s }
.art-max-130 { max-height:130px;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.65)) }

.crate-200 { width:200px;height:180px;object-fit:contain;filter:drop-shadow(0 12px 28px rgba(0,0,0,.65)) }
.crate-flex-shrink { flex-shrink:0;display:flex;align-items:center;justify-content:center }

.hero-banner-bg { background-image:url('../img/banner-background-x2.webp');background-size:cover;background-position:center right }

/* ---------- Decorative absolute images ---------- */
.decor-hero-right { position:absolute;right:20px;bottom:0;height:90%;max-height:260px;object-fit:contain;pointer-events:none;opacity:.9 }
.decor-stage-right { position:absolute;right:0;top:50%;transform:translateY(-50%);height:80%;opacity:.07;pointer-events:none;object-fit:contain }
.decor-glow-under { position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:70px;height:24px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--rar,var(--neon-orange)) 90%,#fff),transparent);filter:blur(6px);opacity:.8 }

/* ---------- Layout helpers ---------- */
.relative-hidden { position:relative;overflow:hidden }
.justify-self-center { justify-self:center }
.margin-0-auto { margin:0 auto }
.inline-flex-center { margin:0 auto;display:inline-flex }
.tabs-mb-18 { margin-bottom:18px }
.search-max-280 { max-width:280px }
.field-flex-320 { flex:1;max-width:320px }
.field-flex-end { flex:1;justify-content:flex-end;min-width:260px }
.max-w-300 { max-width:300px }
.max-w-420 { max-width:420px }
.max-w-520-center { max-width:520px;margin:40px auto }
.brand-pad-0 { padding:0 0 12px }

.box-110-center { width:100%;height:120px;border-radius:14px;overflow:hidden;background:var(--bg-input);display:flex;align-items:center;justify-content:center }
.contract-count-ml { margin-left:4px }

.pad-64-32-center { padding:64px 32px;text-align:center }
.pad-18-20-mb24 { padding:18px 20px;margin-bottom:24px }
.pad-20 { padding:20px }
.pad-18-center { padding:18px;text-align:center }
.pad-22 { padding:22px }
.banner-row { margin-top:22px;padding:20px 24px;display:flex;align-items:center;gap:24px;overflow:hidden;position:relative }

.ntile-overflow-hidden { overflow:hidden }
.case-img-wrap { height:110px;display:flex;align-items:center;justify-content:center;margin:4px 0 10px;position:relative;z-index:1 }

.mb-6 { margin-bottom:6px }
.mt-0 { margin-top:0 }
.mt-6 { margin-top:6px }
.mt-10 { margin-top:10px }
.mb-10 { margin-bottom:10px }
.mb-16 { margin-bottom:16px }
.mb-28 { margin-bottom:28px }
.mb-8-inline { margin-bottom:14px }
.art-pad-2 { width:100%;height:100%;object-fit:contain;padding:2px }
.art-max-110-drop { max-height:110px;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6)) }

/* ---------- Odds bar segments (rarity distribution) ---------- */
.odds-seg-uncommon { width:55%;background:var(--rar-uncommon) }
.odds-seg-rare { width:25%;background:var(--rar-rare) }
.odds-seg-mythical { width:13%;background:var(--rar-mythical) }
.odds-seg-legendary { width:5%;background:var(--rar-legendary) }
.odds-seg-covert { width:2%;background:var(--rar-covert) }

.rar-dot-uncommon { --rar:var(--rar-uncommon) }
.rar-dot-rare { --rar:var(--rar-rare) }
.rar-dot-mythical { --rar:var(--rar-mythical) }
.rar-dot-legendary { --rar:var(--rar-legendary) }
.rar-dot-covert { --rar:var(--rar-covert) }

.icon-72-fade { height:72px;object-fit:contain;opacity:.9 }
.rar-blue { --rar:var(--neon-blue) }

.panel-hidden { display:none }
.c-inherit { color:inherit }

.inventory-locked { grid-column:1 / -1; padding:48px 32px; text-align:center }
.drop-thumb { width:38px;height:26px;object-fit:contain }

/* ---------- Misc component tweaks ---------- */
.chip-mt-8 { margin-top:8px }
.chip-pad-btn { margin-top:8px;padding:8px 16px }
.calendar-head-row { display:flex;align-items:center;gap:12px }
.cal-grid-mb-8 { margin-bottom:8px }