:root {
  color-scheme: dark;
  --bg: #050306;
  --bg-raised: #10080d;
  --panel: #161217;
  --panel-border: #30272d;
  --text: #f7f7f7;
  --muted: #9d9d9d;
  --pink: #ff0879;
  --gold: #ffcc00;
  --purple: #aa16e6;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: "RF Dewi Extended", Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { min-height: 100dvh; margin: 0; color: var(--text); background: radial-gradient(ellipse at 78% 0%, #210817 0, transparent 38%), var(--bg); font-size: 14px; }
button, input { font: inherit; }
button { appearance: none; -webkit-appearance: none; border: 0; color: inherit; cursor: pointer; }
.app-shell { position: relative; width: min(100%, 480px); min-height: 100dvh; margin: 0 auto; padding: 0 18px calc(100px + var(--safe-bottom)); }
.topbar { position: sticky; z-index: 5; top: 0; display: flex; height: 64px; align-items: center; justify-content: space-between; background: linear-gradient(#0b0609 75%, #0b0609e8); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; }
.brand-wordmark { color: #fff; font-size: 20px; font-style: italic; font-weight: 900; letter-spacing: .2px; }
.brand-wordmark i { color: var(--pink); font-style: italic; }
.wallet { display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border: 2px solid #f5f1f2; border-radius: 24px; background: #f8f6f6; color: #100a0d; font-size: 14px; font-weight: 900; }
.wallet span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--pink); color: white; font-size: 23px; line-height: 1; }
main { padding: 12px 0 28px; }
.home-title { display: flex; min-height: 44px; align-items: center; gap: 7px; margin: 4px 0 16px; }
.home-title h1 { margin: 0 auto 0 0; font-size: 20px; font-weight: 900; line-height: 1.1; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid #40303a; border-radius: 9px; background: #20151c; color: #f0e9ed; font-size: 9px; font-weight: 800; white-space: nowrap; }
.home-bonus { display: flex; min-height: 98px; align-items: center; gap: 10px; padding: 12px; border: 1px solid #35232d; border-radius: 17px; background: linear-gradient(110deg, #140b10, #21101a); }
.bonus-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 12px; background: #3c1028; font-size: 20px; }
.bonus-info { min-width: 0; flex: 1; }
.bonus-info b { display: block; font-size: 11px; font-weight: 900; line-height: 1.35; }
.bonus-info small { display: block; margin-top: 4px; color: #b7a6af; font-size: 9px; line-height: 1.35; }
.primary { min-height: 36px; padding: 9px 13px; border: 1px solid #ff6aaa; border-radius: 12px; background: var(--pink); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .2px; white-space: nowrap; }
.primary:disabled { opacity: .5; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 23px 0 11px; }
.section-head h2 { margin: 0; color: #fff; font-size: 18px; font-weight: 900; letter-spacing: .2px; line-height: 1.1; }
.link-btn { padding: 6px 0 6px 8px; background: transparent; color: #ff55a0; font-size: 10px; font-weight: 800; white-space: nowrap; }
.case-showcase { display: grid; gap: 10px; }
.case-banner { position: relative; display: flex; width: 100%; min-height: 96px; align-items: center; justify-content: space-between; overflow: hidden; padding: 16px 19px; border: 1px solid #ffffff35; border-radius: 20px; background-color: #fff; color: #090709; text-align: left; }
.case-banner::before, .case-banner::after { position: absolute; z-index: 0; width: 90px; height: 90px; border: 13px solid #00000015; border-radius: 24px; content: ""; transform: rotate(24deg); }
.case-banner::before { top: -53px; right: 3px; }
.case-banner::after { bottom: -66px; left: -31px; }
.case-banner > span { position: relative; z-index: 1; }
.case-banner .case-label { font-size: 17px; font-weight: 900; line-height: 1.12; }
.case-banner small { display: block; margin-top: 5px; font-size: 11px; font-style: italic; font-weight: 800; }
.case-banner .arrow { padding-left: 6px; font-size: 26px; font-weight: 400; }
.case-normal { background: linear-gradient(115deg, #fff 0%, #e9e7e8 100%); }
.case-gold { background: linear-gradient(115deg, #ffe76a 0%, #ffca05 100%); }
.case-epic { background: linear-gradient(115deg, #c01cf4 0%, #8500c9 100%); color: #fff; }
.case-epic::before, .case-epic::after { border-color: #ffffff20; }
.market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.market-card { position: relative; display: block; overflow: hidden; padding: 0; border: 1px solid #9b7a3d; border-radius: 13px; aspect-ratio: 1.08; background: #181318; text-align: left; }
.market-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.market-card::after { position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, #000d); content: ""; }
.market-info { position: absolute; z-index: 1; right: 8px; bottom: 8px; left: 9px; color: #fff; font-size: 9px; font-weight: 900; line-height: 1.2; text-transform: uppercase; }
.market-info small { display: block; margin-top: 4px; color: #ffdf68; font-size: 9px; font-weight: 900; }
.stat-ribbon { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 7px; margin-top: 14px; padding: 12px 7px; border: 1px solid #452334; border-radius: 13px; background: #130a10; color: #a999a1; font-size: 9px; }
.stat-ribbon b { margin-left: 4px; color: #fff; font-size: 10px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.quick { min-height: 82px; padding: 12px; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--panel); text-align: left; }
.quick b { display: block; margin-top: 8px; font-size: 11px; font-weight: 900; }
.quick small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.tile-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 10px; background: #3b1028; font-size: 16px; }
.page-title { margin: 3px 0 5px; font-size: 22px; font-weight: 900; letter-spacing: -.3px; text-transform: uppercase; }
.subtext { margin: 0 0 15px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.tabs { display: flex; gap: 7px; margin: 12px 0; }
.tabs button { flex: 1; padding: 10px 7px; border: 1px solid var(--panel-border); border-radius: 11px; background: var(--panel); color: #c5b8be; font-size: 9px; font-weight: 900; }
.tabs button.active { border-color: var(--pink); background: var(--pink); color: #fff; }
.search { width: 100%; margin: 0 0 10px; padding: 11px 13px; outline: none; border: 1px solid #482638; border-radius: 12px; background: #190d14; color: #fff; font-size: 11px; }
.search::placeholder { color: #897980; }
.filter { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.filter button { padding: 7px 10px; border: 1px solid #482638; border-radius: 20px; background: #180c13; color: #b4a6ac; font-size: 9px; white-space: nowrap; }
.filter button.active { border-color: var(--pink); background: var(--pink); color: white; font-weight: 900; }
.garage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.garage-card { min-width: 0; overflow: hidden; border: 2px solid #806431; border-radius: 14px; background: #160d11; text-align: left; }
.garage-card.rarity-common { border-color: #dedede; }
.garage-card.rarity-rare { border-color: #3c8de2; }
.garage-card.rarity-epic { border-color: #a83de3; }
.garage-card.rarity-legendary { border-color: #ffca05; }
.garage-photo { display: block; width: 100%; aspect-ratio: 1.35; object-fit: cover; background: #25161c; }
.garage-empty { display: grid; place-items: center; font-size: 26px; }
.garage-card-info { position: relative; min-height: 43px; padding: 7px 8px 8px; }
.garage-card-info b { display: block; overflow: hidden; font-size: 9px; font-weight: 900; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.garage-card-info small { display: block; margin-top: 3px; color: #c4b5bc; font-size: 8px; }
.garage-strength { position: absolute; right: 7px; bottom: 7px; color: #ffe060; font-size: 8px; font-weight: 900; }
.badge.owned { border-color: #4b4548; background: #262124; color: #d5ccd0; }
.list { display: grid; gap: 8px; }
.row-card { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--panel-border); border-radius: 13px; background: var(--panel); }
.car-thumb { width: 55px; height: 48px; flex: 0 0 auto; border-radius: 9px; background: #25161c; object-fit: cover; }
.car-thumb.empty { display: grid; place-items: center; color: #a3939a; font-size: 22px; }
.row-main { min-width: 0; flex: 1; }
.row-main b { display: block; overflow: hidden; font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.row-main small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.row-value { color: #ff8dbb; font-size: 10px; font-weight: 900; text-align: right; white-space: nowrap; }
.rank { width: 25px; font-size: 16px; text-align: center; }
.achievement { align-items: flex-start; }
.achievement .row-main small { white-space: normal; }
.progress { height: 4px; overflow: hidden; margin-top: 7px; border-radius: 8px; background: #ffffff18; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--pink); }
.wide { width: 100%; margin-top: 10px; }
.empty-state { padding: 28px 12px; color: var(--muted); font-size: 10px; text-align: center; }
.empty-state b { display: block; margin: 9px; color: #fff; font-size: 12px; }
.bonus { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--panel-border); border-radius: 15px; background: var(--panel); }
.bottom-nav { position: fixed; z-index: 10; right: 50%; bottom: calc(10px + var(--safe-bottom)); display: grid; width: min(calc(100% - 28px), 450px); grid-template-columns: repeat(4, 1fr); padding: 8px 6px; border: 1px solid #38212d; border-radius: 28px; background: #100a0eeb; box-shadow: 0 9px 35px #0009; backdrop-filter: blur(16px); transform: translateX(50%); }
.bottom-nav button { display: grid; min-height: 43px; align-content: center; justify-items: center; gap: 2px; padding: 3px; border-radius: 20px; background: transparent; color: #b7aab0; font-size: 8px; font-weight: 800; }
.bottom-nav button span { font-size: 17px; line-height: 1; }
.bottom-nav button.active { background: #30202a; color: var(--pink); }
.toast { position: fixed; z-index: 20; right: 50%; bottom: calc(78px + var(--safe-bottom)); max-width: 90vw; padding: 10px 14px; border-radius: 12px; background: #fff; color: #111; font-size: 11px; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(50%, 10px); transition: .2s; }
.toast.show { opacity: 1; transform: translate(50%, 0); }
.loading { padding: 70px 0; color: var(--muted); text-align: center; }
.spinner { display: inline-block; width: 24px; height: 24px; border: 2px solid #ffffff25; border-top-color: var(--pink); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-backdrop { position: fixed; z-index: 15; inset: 0; display: grid; align-items: end; background: #000c; }
.modal { width: min(100%, 480px); max-height: 86dvh; overflow: auto; margin: auto; padding: 20px 17px calc(18px + var(--safe-bottom)); border: 1px solid #4a2536; border-radius: 22px 22px 0 0; background: #170c12; }
.modal h2 { margin: 0 0 6px; font-size: 18px; }
.modal p { color: var(--muted); font-size: 11px; line-height: 1.5; }
.modal .close { float: right; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--panel); }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.secondary { min-height: 39px; padding: 10px; border: 1px solid #50303e; border-radius: 11px; background: #24131c; font-size: 10px; font-weight: 900; }
.pill { padding: 5px 8px; border-radius: 8px; background: #2a1a23; color: #c3b5bb; font-size: 9px; }
.case-showcase button, .market-grid button, .quick, .garage-card { -webkit-tap-highlight-color: transparent; }
@media (min-width: 520px) { .app-shell { padding-right: 22px; padding-left: 22px; } }

/* Mini App visual details from the supplied Figma screens. */
.home-title h1,.page-title,.section-head h2 { font-family: Manrope,Arial,sans-serif; font-weight: 900; }
.topbar { height:54px; }
.brand-wordmark { font-size:17px; letter-spacing:.05em; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:3px 0 8px; }
.page-title { margin:0; font-size:15px; }
.inline-wallet { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 3px; border:1px solid #fff; border-radius:20px; background:#f6f4f5; color:#111; font-size:10px; white-space:nowrap; }
.inline-wallet i { display:grid; width:22px; height:22px; place-items:center; border-radius:50%; background:#ff0879; color:white; font-size:16px; font-style:normal; }
.inline-wallet b { font-size:10px; }
.home-title { min-height:32px; margin:4px 0 13px; }
.home-title h1 { font-size:14px; letter-spacing:.02em; }
.section-head { margin:18px 0 9px; }
.section-head h2 { font-size:13px; }
.case-showcase { gap:8px; }
.case-banner { min-height:66px; padding:12px 16px; border-radius:12px; }
.case-banner .case-label { font-size:13px; }
.case-banner small { margin-top:3px; font-size:9px; }
.case-banner .arrow { font-size:20px; }
.market-grid { gap:8px; }
.market-card { aspect-ratio:1.62; border-radius:10px; }
.garage-grid { gap:7px; }
.garage-card { position:relative; aspect-ratio:1.62; border-width:1px; border-radius:10px; }
.garage-photo { height:100%; aspect-ratio:auto; }
.garage-card-info { position:absolute; right:0; bottom:0; left:0; min-height:0; padding:15px 7px 6px; background:linear-gradient(transparent,#050306d9); }
.garage-card-info b { font-size:7px; }
.garage-card-info small { margin-top:2px; color:#d3cbd0; font-size:6px; }
.garage-strength { right:6px; bottom:6px; font-size:7px; }
.garage-card-info .badge { margin-top:3px; padding:2px 4px; font-size:6px; }
.bottom-nav button { font-size:0; }
.bottom-nav button span { font-size:20px; }
.bottom-nav { width:min(calc(100% - 32px),450px); padding:6px 7px; }
.bottom-nav button { min-height:42px; }
.home-shortcuts { display:none; }
.prefix-row { display:flex; flex-wrap:wrap; gap:6px; margin:-5px 0 10px; }
.home-title h1,.page-title,.section-head h2,.brand-wordmark { font-family:"RF Dewi Expanded","RF Dewi Extended",Manrope,Arial,sans-serif; }
.inline-wallet { flex-direction:row; gap:6px; padding:2px 7px 2px 2px; }
.inline-wallet button { display:grid; width:23px; height:23px; place-items:center; border:0; border-radius:50%; background:#ff0879; color:#fff; font-size:17px; line-height:1; }
.inline-wallet b { font-size:9px; }
.daily-calendar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,82px); gap:7px; margin:17px 0 14px; }
.daily-card { display:flex; min-width:0; flex-direction:column; justify-content:space-between; overflow:hidden; padding:7px; border:1px solid #383139; border-radius:12px; background:linear-gradient(145deg,#17131a,#0c0a0d); }
.daily-card>small { color:#bcb3ba; font-size:7px; font-weight:900; }
.daily-card>span { align-self:center; font-size:22px; }
.daily-card>b { font-size:8px; }
.daily-card.current { border-color:#ff3e94; box-shadow:0 0 12px #ff08794d; }
.daily-card.claimed { border-color:#393239; background:#151217; opacity:.62; }
.daily-car { grid-column:3; grid-row:1 / span 3; justify-content:center; gap:11px; border-color:#582030; background:radial-gradient(ellipse at 100% 0,#55202a,#171217 55%,#080708); text-align:center; }
.daily-car>span { font-size:49px; }
.daily-car>b { font-size:8px; }
.rating-title,.achievement-heading { display:flex; align-items:center; gap:9px; margin:8px 0 15px; }
.rating-title button,.achievement-heading button { display:grid; width:24px; height:24px; place-items:center; padding:0; background:transparent; color:#fff; font-size:22px; }
.rating-title h1,.achievement-heading h2 { margin:0; font-family:"RF Dewi Expanded","RF Dewi Extended",Manrope,Arial,sans-serif; font-size:12px; font-weight:900; }
.top-list { gap:9px; }
.top-card { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:56px; padding:8px 12px; border:1px solid #ff0879; border-radius:15px; background:linear-gradient(105deg,#1b1119,#120d12); }
.top-player { min-width:0; }
.top-player b,.top-player strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-player b { color:#ff4497; font-size:9px; }
.top-player strong { margin-top:2px; font-size:14px; }
.top-card>span { flex:0 0 auto; font-size:9px; font-weight:900; }
.top-reward { margin:12px 3px; color:#a99da4; font-size:8px; text-align:center; }
.achievement-categories { margin-top:12px; }
.achievement-category { display:flex; align-items:center; gap:10px; min-height:49px; padding:8px 12px; border:1px solid #e9277c; border-radius:13px; background:linear-gradient(105deg,#1c121a,#130e13); text-align:left; }
.achievement-category>span { display:grid; width:24px; height:24px; place-items:center; border-radius:7px; background:#fff; color:#111; font-size:14px; }
.achievement-category>b { flex:1; font-size:10px; text-transform:uppercase; }
.achievement-category>i { color:#fff; font-size:16px; font-style:normal; }
.achievement-heading { margin-top:13px; }
.achievement-card { position:relative; display:flex; align-items:flex-start; gap:9px; min-height:67px; padding:9px; border:1px solid #e9277c; border-radius:14px; background:linear-gradient(100deg,#1c121a,#110c11); }
.achievement-icon { display:grid; width:26px; height:26px; flex:0 0 auto; place-items:center; border:1px solid #ddd; border-radius:7px; background:#fff; color:#151515; font-size:14px; }
.achievement-info { min-width:0; flex:1; }
.achievement-title { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px; }
.achievement-title b { font-size:8px; text-transform:uppercase; }
.achievement-title span { color:#c8bcc2; font-size:7px; }
.achievement-info>small { display:block; margin-top:3px; color:#c2b8be; font-size:7px; line-height:1.25; }
.achievement-progress { height:3px; overflow:hidden; margin-top:5px; border-radius:3px; background:#494148; }
.achievement-progress i { display:block; height:100%; border-radius:inherit; background:#ef318a; }
.achievement-info>small.achievement-count { text-align:right; }
.achievement-claim { min-height:25px; padding:5px 7px; font-size:7px; }
.brand-wordmark i { color: #ff0879; }
.primary,.filter button.active,.tabs button.active { border-color:#ff4b9b; background:#ff0879; color:#fff; }
.link-btn { color:#ff70ad; }
.wallet-strip { display:flex; align-items:center; gap:10px; margin:2px 0 8px; padding:10px 12px; border:1px solid #e9e9e9; border-radius:28px; background:#f4f4f4; color:#090909; }
.wallet-strip span { flex:1; color:#686868; font-size:9px; font-weight:800; }
.wallet-strip b { font-size:14px; }
.wallet-strip button { width:28px; height:28px; border-radius:50%; background:#ff0879; color:#fff; font-size:22px; line-height:1; }
.market-card { display:block; aspect-ratio:1.08; min-height:0; border-color:#9b7a3d; background:#141014; }
.market-card img,.market-card>.empty-state { display:block; width:100%; height:100%; object-fit:cover; }
.market-card::after { position:absolute; inset:38% 0 0; display:block; background:linear-gradient(transparent,#09070bd9); content:""; }
.market-info { position:absolute; z-index:1; right:7px; bottom:6px; left:8px; display:block; min-height:0; padding:0; color:#fff; font-size:8px; }
.market-info small { color:#fff; font-size:8px; }
.market-buy { position:absolute; z-index:2; inset:0; width:100%; height:100%; opacity:0; }
.market-card.sold { opacity:.55; }
.sold-label { margin:0 8px 8px; color:#aaa; font-size:10px; font-weight:900; text-align:center; }
.case-banner { min-height:78px; border:1px solid #ffffff35; border-radius:14px; background:#fff; color:#090709; }
.case-normal { background:linear-gradient(110deg,#fff,#e9e7e8); }
.case-gold { background:linear-gradient(110deg,#ffe76a,#ffca05); color:#13100a; }
.case-epic { background:linear-gradient(110deg,#c01cf4,#8500c9); color:#fff; }
.case-banner::before,.case-banner::after { opacity:.12; }
.bottom-nav { border-color:#292929; background:#101010ed; }
.bottom-nav button.active { background:#30202a; color:#ff0879; }
.bonus { border-color:#303030; background:#151515; }
.bonus-large { min-height:110px; margin:16px 0; padding:16px; }
.case-result { border-color:#373737; text-align:center; }
.case-result .eyebrow,.car-detail .eyebrow { color:#ff66a8; font-size:10px; font-weight:900; letter-spacing:.12em; }
.drop-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:15px 0; }
.drop-option { padding:5px; border:1px solid #333; border-radius:13px; background:#111; }
.drop-option>span { display:block; padding:8px 0 4px; color:#ff66a8; font-size:8px; font-weight:900; }
.drop-car { overflow:hidden; padding:7px; border:2px solid #dedede; border-radius:13px; background:#121212; text-align:left; }
.drop-car.rarity-rare { border-color:#25a7ff; }.drop-car.rarity-epic { border-color:#c029ff; }.drop-car.rarity-legendary { border-color:#ffca05; }
.drop-car img,.drop-placeholder { display:grid; width:100%; height:75px; place-items:center; border-radius:8px; background:#222; object-fit:cover; font-size:28px; }
.drop-car>b,.drop-car>small { display:block; overflow:hidden; margin-top:6px; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.drop-car>small { color:#aaa; font-size:8px; }
.case-result>p:not(.eyebrow) { color:#aaa; font-size:11px; }
.detail-photo { width:100%; max-height:230px; border-radius:12px; object-fit:cover; }
.car-detail { border-width:2px; }
.car-detail.rarity-rare { border-color:#25a7ff; }.car-detail.rarity-epic { border-color:#c029ff; }.car-detail.rarity-legendary { border-color:#ffca05; }