/* ===================================================================== HOME */
.hero-title { font-size: 30px; margin-bottom: 18px; }
.hero-row { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px; }
.hero-card {
  position: relative; min-height: 220px; border-radius: 16px; overflow: hidden; display: flex;
  background:
    radial-gradient(70% 90% at 80% 110%, rgba(36, 198, 97, 0.3), transparent 70%),
    radial-gradient(50% 70% at 70% 30%, rgba(255, 198, 26, 0.12), transparent 70%),
    linear-gradient(135deg, #1f2b25 0%, #1c2028 60%);
  border: 1px solid var(--line);
}
.hero-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.035) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.035) 75%);
  background-size: 36px 36px; background-position: 0 0, 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000); mask-image: linear-gradient(180deg, transparent 40%, #000);
}
.hero-copy { position: relative; z-index: 2; padding: 30px 32px; max-width: 58%; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.hero-lead { font-size: 17px; color: var(--text-2); line-height: 1.5; }
.hero-lead b { color: #fff; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 18px; color: var(--muted); font-size: 13px; }
.hero-stats b { color: #fff; font-size: 15px; }
.hero-art { position: absolute; right: 0; top: 0; bottom: 0; width: 52%; pointer-events: none; }
.hero-glow { position: absolute; right: 10%; top: 15%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 198, 26, 0.28), transparent 65%); filter: blur(6px); }
.hero-awp { position: absolute; width: 112%; right: -14%; top: 4%; transform: rotate(-16deg); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.6)); animation: floaty 6s ease-in-out infinite; }
.hero-knife { position: absolute; width: 44%; left: 4%; bottom: -4%; transform: rotate(18deg); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.6)); animation: floaty 5s ease-in-out -1.5s infinite; }
.hero-glove { position: absolute; width: 38%; right: 4%; bottom: -6%; transform: rotate(-10deg); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.6)); animation: floaty 7s ease-in-out -3s infinite; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

.promo { position: relative; min-height: 220px; }
.promo-stack { position: absolute; inset: 0 0 22px 0; }
.promo-slide {
  position: absolute; top: 0; bottom: 0; left: 0; width: 76%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 22px;
  border-radius: 15px; overflow: hidden; border: 1px solid var(--line-2);
  transform-origin: right center;
  transition: transform 0.6s var(--ease), filter 0.6s, opacity 0.6s;
}
.promo-slide[data-pos='0'] { z-index: 3; }
.promo-slide[data-pos='1'] { z-index: 2; transform: translateX(19%) scale(0.88); filter: brightness(0.5) saturate(0.7); }
.promo-slide[data-pos='2'] { z-index: 1; transform: translateX(33%) scale(0.76); filter: brightness(0.3) saturate(0.5); }
.promo-slide:not([data-pos='0']) { pointer-events: none; }
.ps-rewards { background: radial-gradient(80% 90% at 100% 100%, rgba(255, 170, 0, 0.32), transparent 65%), linear-gradient(135deg, #2b2410, #1f2128); }
.ps-race { background: radial-gradient(80% 90% at 100% 100%, rgba(155, 107, 255, 0.32), transparent 65%), linear-gradient(135deg, #22193a, #1f2128); }
.ps-battles { background: radial-gradient(80% 90% at 100% 100%, rgba(36, 198, 97, 0.35), transparent 65%), linear-gradient(135deg, #142a1d, #1f2128); }
.ps-kicker, .ps-title, .ps-sub { position: relative; z-index: 2; }
.ps-kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-2); font-weight: 700; }
.ps-title { font-size: 34px; line-height: 0.95; font-weight: 800; color: var(--yellow); text-shadow: 0 2px 0 rgba(120, 70, 0, 0.9), 0 0 24px rgba(255, 198, 26, 0.25); }
.ps-sub { color: var(--text-2); font-size: 12.5px; max-width: 58%; }
.promo-slide .btn { margin-top: auto; position: relative; z-index: 2; }
.ps-art img { position: absolute; right: -8%; bottom: 10%; width: 58%; transform: rotate(-16deg); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.6)); }
.promo-dots { position: absolute; left: 0; bottom: 0; width: 76%; display: flex; justify-content: center; gap: 6px; }
.promo-dots button { width: 18px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); transition: width 0.3s, background 0.3s; }
.promo-dots button.on { width: 34px; background: var(--yellow); }

/* originals grid */
.originals { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.game-card {
  grid-column: span 3; position: relative; height: 178px; border-radius: 14px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(75% 85% at 50% 125%, rgba(36, 198, 97, 0.5), transparent 70%),
    linear-gradient(180deg, #1f232a 0%, #1b2420 100%);
  border: 1px solid var(--line);
  transition: transform 0.2s var(--ease), border-color 0.2s, box-shadow 0.2s;
}
.game-card.big { grid-column: span 4; }
.game-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0.8;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.03) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 40px 40px; background-position: 0 0, 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000); mask-image: linear-gradient(180deg, transparent 20%, #000);
}
.game-card:hover { transform: translateY(-4px); border-color: rgba(36, 198, 97, 0.4); box-shadow: 0 18px 36px -16px rgba(36, 198, 97, 0.55); }
.gc-label {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 8px;
  background: rgba(44, 48, 58, 0.88); backdrop-filter: blur(4px); font-weight: 600; font-size: 14px; color: var(--text-2);
}
.gc-label .ic { width: 16px; height: 16px; color: var(--muted); }
.gc-label i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--yellow); letter-spacing: 0.02em; }
.gc-art { position: absolute; inset: 34px 0 0; display: grid; place-items: center; transition: transform 0.35s var(--ease); }
.game-card:hover .gc-art { transform: scale(1.05); }
.game-svg { width: 100%; height: 100%; }
.double-art { display: flex; align-items: center; gap: 12px; }
.d-tile { width: 62px; height: 62px; border-radius: 12px; display: grid; place-items: center; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45), inset 0 -4px 0 rgba(0, 0, 0, 0.18); }
.d-tile .face { width: 74%; height: 74%; }
.d-tile.t { background: linear-gradient(180deg, #e65151, #b72f31); transform: rotate(-8deg) translateY(6px); }
.d-tile.ct { background: linear-gradient(180deg, #e9edf3, #b8c0cc); transform: rotate(8deg) translateY(6px); }
.d-tile.bonus { width: 86px; height: 86px; background: linear-gradient(180deg, #3fe07f, #179b49); box-shadow: 0 16px 30px rgba(36, 198, 97, 0.35), inset 0 -5px 0 rgba(0, 0, 0, 0.18); }
.flip-art { position: relative; width: 170px; height: 110px; }
.flip-coin { position: absolute; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 14px 26px rgba(0, 0, 0, 0.5), inset 0 -5px 0 rgba(0, 0, 0, 0.2), inset 0 3px 0 rgba(255, 255, 255, 0.35); }
.flip-coin .face { width: 62%; height: 62%; }
.flip-coin.t { left: 0; top: 6px; background: linear-gradient(160deg, #ffd96a, #e08b00); transform: rotate(-12deg); }
.flip-coin.ct { right: 0; top: 14px; background: linear-gradient(160deg, #8fb6ff, #3360c9); transform: rotate(10deg) scale(0.88); }
.tiles-art { display: grid; grid-template-columns: repeat(3, 50px); gap: 9px; }
.tt { height: 50px; border-radius: 9px; background: #2c313c; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.3); }
.tt.hot { background: linear-gradient(180deg, #ffd84a, #f0a800); color: #2a1c00; box-shadow: 0 0 22px rgba(255, 198, 26, 0.45), inset 0 -4px 0 rgba(0, 0, 0, 0.15); }
.crash-art { position: relative; width: 100%; height: 100%; }
.crash-art .game-svg { position: absolute; inset: 0; }
.crash-knife { position: absolute; width: 56%; right: 6%; top: -2%; transform: rotate(-24deg); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.6)); }
.crash-mult { position: absolute; right: 22%; bottom: 14%; font-size: 34px; font-weight: 800; color: #fff; text-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); }

/* duo promos */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.duo-card {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 24px; min-height: 160px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  transition: transform 0.2s var(--ease), border-color 0.2s;
}
.duo-card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.dc-race { background: radial-gradient(70% 120% at 0% 0%, rgba(255, 198, 26, 0.18), transparent 60%), linear-gradient(110deg, #262212 0%, #1f2229 65%); }
.dc-create { background: radial-gradient(70% 120% at 0% 0%, rgba(36, 198, 97, 0.18), transparent 60%), linear-gradient(110deg, #182a20 0%, #1f2229 65%); }
.dc-copy { min-width: 0; }
.dc-copy h3 { font-size: 22px; }
.dc-copy p { color: var(--muted); max-width: 300px; margin-top: 6px; font-size: 13.5px; }
.dc-meta { margin-top: 14px; display: inline-flex; gap: 6px; align-items: center; color: var(--yellow); font-weight: 600; font-size: 13px; }
.dc-meta b { color: #fff; }
.dc-podium { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 270px; flex: none; counter-reset: pod; }
.dc-podium li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: rgba(0, 0, 0, 0.28); font-size: 12.5px; counter-increment: pod; }
.dc-podium li b { font-size: 12.5px; }
.dc-podium li::before { content: counter(pod); width: 16px; color: var(--yellow); font-weight: 800; }
.dc-podium li > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-podium .avatar { width: 22px; height: 22px; }
.dc-cases { display: flex; flex: none; padding-right: 6px; }
.dc-cases .case-visual { width: 112px; margin-left: -34px; }
.dc-cases .case-visual:first-child { margin-left: 0; }

/* live drops */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; box-shadow: 0 0 0 3px rgba(255, 77, 94, 0.2); animation: pulse 1.4s infinite; }
.live-feed { display: flex; gap: 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.drop {
  --rc: #8b93a4;
  flex: none; width: 132px; padding: 10px 10px 9px; border-radius: 11px; display: flex; flex-direction: column; gap: 4px;
  background: radial-gradient(100% 70% at 50% 110%, color-mix(in srgb, var(--rc) 32%, transparent), transparent 72%), #1f232b;
  border: 1px solid var(--line); border-bottom: 2px solid var(--rc);
}
.drop img { height: 62px; width: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.drop-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop-who { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.drop-who .avatar { width: 16px; height: 16px; }
.drop.you { box-shadow: inset 0 0 0 1px rgba(255, 198, 26, 0.6); }
.drop.enter { animation: dropIn 0.5s var(--ease); }
@keyframes dropIn { from { opacity: 0; transform: translateX(-30px) scale(0.9); } }

@media (max-width: 1240px) {
  .game-card, .game-card.big { grid-column: span 6; }
  .game-card.big:first-child { grid-column: span 12; }
}
@media (max-width: 980px) {
  .hero-row { grid-template-columns: 1fr; }
  .promo { min-height: 210px; }
  .duo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero-copy { max-width: 100%; padding: 22px; }
  .hero-art { opacity: 0.25; width: 100%; }
  .hero-title { font-size: 24px; }
  .game-card, .game-card.big, .game-card.big:first-child { grid-column: span 12; }
  .dc-podium, .dc-cases { display: none; }
  .ps-title { font-size: 28px; }
}

/* ==================================================================== CASES */
.cases-search { width: 260px; }
.cat-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 18px; flex-wrap: wrap; }
.cat-bar .seg { overflow-x: auto; max-width: 100%; }
.live-feed-sm .drop { width: 112px; padding: 8px 8px 7px; }
.live-feed-sm .drop img { height: 48px; }
.live-feed-sm .drop-who { display: none; }

/* ===================================================================== CASE */
.page-case { position: relative; }
.case-page-glow { position: absolute; left: 0; right: 0; top: -26px; height: 420px; pointer-events: none; z-index: -1;
  background: radial-gradient(50% 70% at 50% 0%, color-mix(in srgb, var(--c1) 18%, transparent), transparent 75%); }
.case-head { display: flex; align-items: center; gap: 22px; margin: 14px 0 20px; }
.case-head .ch-art { width: 150px; flex: none; }
.ch-info h1 { font-size: 30px; }
.ch-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.ch-price { font-size: 18px; font-weight: 700; }
.ch-desc { margin-top: 10px; font-size: 13px; }

.opener { position: relative; padding: 16px; border-radius: 16px; background: linear-gradient(180deg, #1d2128, #1a1d23); border: 1px solid var(--line); }
.reels.single > .reel { width: 100%; }
.reels.multi { display: grid; gap: 10px; }
.reels.multi.n2 { grid-template-columns: repeat(2, 1fr); }
.reels.multi.n3 { grid-template-columns: repeat(3, 1fr); }
.reels.multi.n4 { grid-template-columns: repeat(4, 1fr); }
.reels.multi.n5 { grid-template-columns: repeat(5, 1fr); }
.reels.multi > .reel { height: 380px; }
.opener-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.opener-bar .qty button { width: 42px; height: 42px; font-size: 15px; }
.open-btn { min-width: 250px; }
.open-btn .pill { background: rgba(0, 0, 0, 0.22); }
.fast-btn.active { color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(255, 198, 26, 0.5); }

.result { margin-top: 16px; padding: 18px; border-radius: 14px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line-2); animation: fadeUp 0.3s var(--ease); }
.res-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.res-head h3 { font-size: 18px; }
.res-head p { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.res-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.res-item {
  --rc: #8b93a4;
  display: grid; grid-template-columns: 92px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  background: radial-gradient(70% 120% at 0% 50%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 70%), #20242c;
  border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent);
  animation: pop 0.45s var(--ease);
}
.res-item img { grid-row: span 2; width: 92px; height: 70px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.ri-meta { display: flex; flex-direction: column; min-width: 0; }
.ri-weapon { font-size: 12px; color: var(--muted); }
.ri-name { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rc); filter: brightness(1.25); }
.ri-wear { font-size: 11.5px; color: var(--muted); }
.ri-price { font-size: 15px; justify-self: end; }
.res-item .ri-sell, .res-item .ri-sold { grid-column: 2 / 4; justify-self: end; }
.ri-sold { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--green-1); height: 32px; }
.ri-sold .ic { width: 14px; height: 14px; }
.res-item.sold { opacity: 0.55; }
.res-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .reels.multi > .reel { height: 300px; }
  .reels.multi.n4, .reels.multi.n5 { grid-template-columns: repeat(3, 1fr); }
  .case-head .ch-art { width: 110px; }
  .ch-info h1 { font-size: 24px; }
}
@media (max-width: 560px) {
  .reels.multi.n3, .reels.multi.n4, .reels.multi.n5 { grid-template-columns: repeat(2, 1fr); }
  .open-btn { min-width: 0; width: 100%; }
  .cases-search { width: 100%; }
  .page-title .right { width: 100%; }
  .page-title .right .select { flex: 1; }
}

/* ================================================================== PROFILE */
.profile-head { padding: 20px; margin-bottom: 22px; background: radial-gradient(60% 120% at 0% 0%, rgba(255, 198, 26, 0.08), transparent 60%), var(--bg-3); }
.ph-top { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.ph-id { flex: 1; min-width: 240px; }
.ph-name { display: flex; align-items: center; gap: 10px; }
.ph-name h1 { font-size: 26px; }
.ph-name .lvl { height: 22px; min-width: 28px; font-size: 13px; }
.ph-xp { margin-top: 10px; max-width: 460px; display: flex; flex-direction: column; gap: 6px; }
.ph-best { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 170px; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.22); text-align: center; }
.ph-best img { height: 60px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.ph-best b { font-size: 12.5px; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.inv-search { width: 230px; }
.inv-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-sel { display: inline-flex; align-items: center; gap: 4px; }
.inv-more { display: flex; justify-content: center; margin-top: 16px; }

/* ================================================================== REWARDS */
.rw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rw-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px;
  border-radius: 14px; background: linear-gradient(180deg, #21252d, #1d2027); border: 1px solid var(--line); overflow: hidden;
}
.rw-card h3 { font-size: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rw-card h3 .amt { font-size: 24px; }
.rw-card p { font-size: 13px; line-height: 1.5; }
.rw-card .btn { margin-top: auto; }
.rw-card.dim { opacity: 0.6; }
.rw-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--yellow); }
.rw-free { grid-column: span 2; flex-direction: row; align-items: center; background: radial-gradient(70% 120% at 100% 50%, rgba(43, 212, 107, 0.2), transparent 70%), linear-gradient(180deg, #1f2a24, #1c2028); }
.rw-free .rw-copy { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rw-free .rw-case { width: 190px; flex: none; }
.rw-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.rw-code { display: flex; gap: 8px; width: 100%; margin-top: auto; }
.rw-code .input { flex: 1; text-transform: uppercase; }
.rw-race { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 14px; border-color: rgba(255, 198, 26, 0.35); background: linear-gradient(90deg, rgba(255, 198, 26, 0.12), var(--bg-3) 60%); }
.rw-race > .ic { width: 26px; height: 26px; color: var(--yellow); }
.rw-race > div { flex: 1; }
.lvl-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.lvl-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); text-align: center; }
.lvl-card .lvl { height: 26px; min-width: 34px; font-size: 14px; }
.lvl-card b .amt { font-size: 16px; }
.lvl-card.locked { opacity: 0.55; }
.lvl-card.ready { border-color: rgba(255, 198, 26, 0.5); box-shadow: 0 0 24px -8px rgba(255, 198, 26, 0.5); }
.lvl-card.claimed .muted { display: inline-flex; align-items: center; gap: 4px; color: var(--green-1); }

@media (max-width: 1100px) { .rw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .rw-grid { grid-template-columns: 1fr; }
  .rw-free { grid-column: auto; flex-direction: column; align-items: flex-start; }
  .rw-free .rw-case { width: 150px; align-self: center; }
  .inv-actions { margin-left: 0; }
}

/* ==================================================================== RACE */
.race-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 24px; margin-bottom: 18px; flex-wrap: wrap;
  background: radial-gradient(60% 120% at 0% 0%, rgba(255, 198, 26, 0.14), transparent 60%), radial-gradient(50% 100% at 100% 100%, rgba(155, 107, 255, 0.14), transparent 60%), var(--bg-3); }
.rh-copy { max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
.rh-copy h1 { font-size: 40px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rh-copy h1 .amt { font-size: 40px; color: var(--yellow); }
.rh-copy h1 > span { font-size: 16px; color: var(--muted); font-weight: 600; }
.rh-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.rh-meta div { padding: 10px 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.rh-meta b { font-size: 16px; }
.podium { display: flex; align-items: flex-end; gap: 10px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 128px; text-align: center; }
.pod b { font-size: 13px; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-block { width: 100%; margin-top: 6px; border-radius: 10px 10px 4px 4px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding-top: 10px; font-size: 13px; }
.pod-n { font-size: 26px; font-weight: 800; }
.pod.p1 .pod-block { height: 120px; background: linear-gradient(180deg, rgba(255, 198, 26, 0.35), rgba(255, 198, 26, 0.06)); color: var(--yellow); }
.pod.p2 .pod-block { height: 92px; background: linear-gradient(180deg, rgba(200, 210, 225, 0.3), rgba(200, 210, 225, 0.05)); }
.pod.p3 .pod-block { height: 72px; background: linear-gradient(180deg, rgba(222, 140, 80, 0.32), rgba(222, 140, 80, 0.05)); }
.pod.you b { color: var(--yellow); }
.race-table tr.you td { background: rgba(255, 198, 26, 0.07); }
.race-table tr.gap td { text-align: center; color: var(--muted-2); padding: 4px; }
.rank { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bg-4); font-weight: 700; font-size: 13px; }
.rank.r1 { background: linear-gradient(180deg, #ffd84a, #f0a400); color: #241900; }
.rank.r2 { background: linear-gradient(180deg, #e9edf3, #aeb7c4); color: #1d2633; }
.rank.r3 { background: linear-gradient(180deg, #e7a26b, #b9682f); color: #2a1400; }

/* ================================================================= CREATOR */
.cc-mine { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; }
.cc-mcase { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line); }
.cc-mcase.on { border-color: var(--yellow); }
.cc-mcase .case-visual { width: 54px; }
.cc-mcase > div { display: flex; flex-direction: column; font-size: 13px; min-width: 90px; }
.cc-new { color: var(--muted); font-weight: 600; gap: 6px; padding: 0 16px; }
.cc-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.cc-side { position: sticky; top: calc(var(--topbar-h) + 16px); padding: 16px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; }
.cc-preview { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); }
.cc-preview .case-visual { width: 160px; }
.cc-swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.sw { aspect-ratio: 1; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.sw.on { box-shadow: 0 0 0 2px var(--bg-3), 0 0 0 4px var(--yellow); }
.cc-icons { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.cc-icons button { aspect-ratio: 1; border-radius: 7px; background: var(--bg-1); color: var(--muted); display: grid; place-items: center; }
.cc-icons button svg { width: 60%; height: 60%; }
.cc-icons button.on { color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(255, 198, 26, 0.6); }
.cc-items-head { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.cc-rows { display: flex; flex-direction: column; gap: 6px; }
.cc-row { --rc: #888; display: grid; grid-template-columns: 44px minmax(0, 1fr) 92px 26px; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--bg-1); border-left: 3px solid var(--rc); }
.cc-row img { width: 44px; height: 34px; object-fit: contain; }
.cc-rname { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.cc-rname b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-rname .amt { font-size: 11.5px; }
.cc-odds { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border-radius: 8px; background: var(--bg-4); }
.cc-odds input { width: 100%; min-width: 0; background: none; border: 0; outline: none; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.cc-odds span { color: var(--muted); font-size: 12px; }
.cc-rm { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); }
.cc-rm:hover { color: var(--red); background: rgba(255, 77, 94, 0.1); }
.cc-rm .ic { width: 14px; height: 14px; }
.cc-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
.cc-sum div { padding: 8px 10px; border-radius: 9px; background: var(--bg-1); display: flex; flex-direction: column; gap: 2px; }
.cc-sum b { font-size: 13.5px; }
.cc-tools { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cc-tools .input-icon { flex: 1; min-width: 200px; }

/* ==================================================================== FAIR */
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pf-card { padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.pf-card h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 6px; }
.pf-card h3 .ic { color: var(--yellow); }
.pf-val { padding: 10px 12px; border-radius: 9px; background: var(--bg-1); border: 1px solid var(--line); color: var(--text-2); }
.pf-row { display: flex; gap: 8px; }
.pf-row .input { flex: 1; }
.pf-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--text-2); line-height: 1.55; font-size: 13.5px; }
.pf-steps code, .pf-steps b { color: #fff; }
.pf-steps code { font-family: var(--mono); font-size: 12px; background: var(--bg-1); padding: 1px 6px; border-radius: 5px; }
.pf-verify { margin-top: 16px; }
.pf-form { display: grid; grid-template-columns: 2fr 1fr 110px 110px 1fr; gap: 10px; }
.pf-form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-out { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pf-out > div { padding: 10px 12px; border-radius: 9px; background: var(--bg-1); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-out b { word-break: break-all; }

@media (max-width: 1100px) {
  .cc-layout { grid-template-columns: 1fr; }
  .cc-side { position: static; max-height: none; }
  .pf-grid { grid-template-columns: 1fr; }
  .pf-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .podium { width: 100%; justify-content: center; }
  .pod { width: 30%; }
  .rh-copy h1, .rh-copy h1 .amt { font-size: 30px; }
}