/* PROBEGOK reference design. Final visual layer; legacy game contracts stay intact. */
:root {
  color-scheme:dark;
  --ui-bg:#050609; --ui-panel:#0d1018; --ui-panel-raised:#151824;
  --ui-border:#343c4e; --ui-text:#f4f3f8; --ui-muted:#9ba3b5;
  --ui-gold:#ffdc59; --ui-purple:#db76ff; --ui-red:#ff5667; --ui-green:#56da86;
  --ui-radius:18px; --ui-shadow:0 12px 30px #0005;
  --bg:var(--ui-bg); --gold:var(--ui-gold); --text:var(--ui-text); --muted:var(--ui-muted);
  --nav-h:78px;
}
html body { margin:0; background:var(--ui-bg)!important; color:var(--ui-text); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:default; opacity:.52; }
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--ui-purple); outline-offset:4px; }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--ui-purple)!important; outline-offset:2px; }
.ui-icon { width:22px; height:22px; flex:0 0 auto; display:inline-block; vertical-align:middle; }
.ambient { display:none!important; }
body .app-shell { max-width:960px!important; width:100%!important; margin:0 auto; padding:0 0 calc(100px + env(safe-area-inset-bottom,0px))!important; transform:none!important; }
body .content { width:100%; padding:16px 16px 24px!important; }
body .topbar.premium-topbar { position:relative!important; top:auto!important; width:auto!important; margin:0!important; padding:calc(18px + env(safe-area-inset-top,0px)) 16px 10px!important; border:0!important; border-radius:0!important; background:transparent!important; backdrop-filter:none!important; box-shadow:none!important; }
.design-header { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; }
.design-header-menu { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--ui-border); border-radius:13px; background:linear-gradient(145deg,#151824,#080b12); color:#c5c3d5; }
.design-heading { text-align:center; min-width:0; }
body .brand-logo-word { display:block!important; font-size:23px!important; font-weight:750!important; letter-spacing:-.025em!important; line-height:1.2; margin:0!important; color:var(--ui-text)!important; text-shadow:none!important; }
.design-subtitle { display:block; margin-top:3px; font-size:11px; color:var(--ui-muted); }
.design-stars { display:flex; align-items:center; gap:8px; min-height:38px; border:1px solid #ba8f2b; padding:5px 5px 5px 10px; border-radius:14px; background:radial-gradient(ellipse at 15% 0,#87642035,transparent 70%),#110f08; color:var(--ui-gold); box-shadow:0 0 16px #ffc42f10; }
.design-stars .ui-icon { width:20px; height:20px; fill:#ffdc5925; }
#headerStars { font-size:13px; font-weight:750; }
.design-stars .header-plus { display:grid; place-items:center; width:27px; height:27px; border-left:1px solid #ba8f2b40; }
body .topbar .topbar-mainrow { display:flex!important; flex-wrap:wrap; justify-content:space-between!important; gap:9px!important; margin:13px 0 0!important; padding:9px 0 0!important; border-top:1px solid #252a3644; }
body .topbar .level-cluster { min-width:0; gap:7px; }
body .topbar .level-medallion { width:32px!important; height:34px!important; border-radius:10px!important; font-size:15px!important; border:1px solid #987234!important; background:#151108!important; box-shadow:none!important; color:var(--ui-gold)!important; }
body .level-cluster>div:last-child { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
body .level-cluster small { font-size:10px!important; }
body #xpText { display:block; width:100%; font-size:9px!important; color:var(--ui-muted); }
body .topbar .header-stat { min-height:32px!important; height:auto!important; border:0!important; background:transparent!important; box-shadow:none!important; padding:0!important; }
body .topbar .balance-chip { margin-left:auto; min-width:0!important; color:var(--ui-gold); }
body .balance-chip b { font-size:14px!important; line-height:1.3; overflow-wrap:anywhere; }
body .balance-chip small { font-size:9px!important; }
body .balance-chip .coin-mark { display:none!important; }
body .balance-chip .balance-plus { font-size:18px; color:var(--ui-gold); padding-left:4px; }
body .balance-chip .stars-inline { display:none!important; }
body .topbar .compact-luck { flex:0 0 auto!important; padding:5px 7px!important; font-size:11px; border:1px solid #343c4e88!important; border-radius:9px; }
body .compact-luck .luck-icon { font-size:13px!important; }
body .event-banner { margin-top:10px; padding:10px 12px; border:1px solid #84652b; border-radius:12px; background:#221c0b; }
body .section-head { align-items:flex-start; gap:10px; margin:2px 0 14px!important; }
body .section-head h1 { font-size:23px!important; line-height:1.2; letter-spacing:-.025em; margin:0 0 5px!important; }
body .section-head p { color:var(--ui-muted); font-size:11px!important; line-height:1.5; margin:0; }
body .icon-btn { border:1px solid var(--ui-border); border-radius:11px; width:38px; height:38px; background:var(--ui-panel); color:var(--ui-muted); }
body .fee-pill { flex:0 0 auto; font-size:11px; color:var(--ui-gold); padding:9px 11px; border:1px solid #a17d27; border-radius:12px; background:#161208; }
body .garage-search { display:flex; align-items:center; gap:10px; min-height:46px; border:1px solid var(--ui-border)!important; background:linear-gradient(110deg,#10131d,#0c0f17)!important; border-radius:13px!important; padding:0 12px; }
body .garage-search>span { display:grid; place-items:center; font-size:21px; color:var(--ui-muted); }
body .garage-search input { width:100%; padding:12px 0!important; background:transparent!important; border:0!important; font-size:14px!important; box-shadow:none!important; min-width:0; }
body input,body select,body textarea { border:1px solid var(--ui-border); border-radius:12px; background:linear-gradient(140deg,#121722,#0b0e15); color:var(--ui-text); }
body input::placeholder,body textarea::placeholder { color:#939bac; opacity:1; }
body .garage-filter-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:9px 0; }
body .garage-filter-row select { width:100%; padding:10px 7px; min-height:38px; font-size:10px; text-overflow:ellipsis; border-color:var(--ui-border)!important; border-radius:10px; }
body .garage-quick-filters,body .market-currency-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:9px 0 12px!important; padding:0!important; background:none!important; border:0!important; }
body .garage-quick-filters button,body .market-currency-tabs button { min-height:34px; padding:7px 11px; border:1px solid var(--ui-border)!important; border-radius:999px!important; color:var(--ui-muted); background:#0b0e16!important; font-size:10px!important; flex:0 1 auto; box-shadow:none; }
body .garage-quick-filters button.active,body .market-currency-tabs button.active { color:var(--ui-gold)!important; border-color:var(--ui-gold)!important; background:radial-gradient(ellipse at top,#76601a42,transparent),#141108!important; box-shadow:inset 0 0 12px #ffdb5915,0 0 9px #ffd74b12; }
body .garage-quick-filters [data-gfilter="secret"] { color:var(--ui-purple); }
body .collection-progress { margin:0 0 12px; }
body .collection-progress button { display:grid; grid-template-columns:1fr auto; width:100%; padding:12px 13px; gap:7px; border:1px solid #5a456e!important; border-radius:13px; background:linear-gradient(120deg,#181322,#0e111a)!important; text-align:left; }
body .collection-progress button>span { color:#bb91d6; font-size:10px; letter-spacing:.2em; font-weight:750; }
body .collection-progress button>b { font-size:13px; color:var(--ui-text); }
body .collection-progress i { grid-column:1/-1; height:5px; background:#2c293e; border-radius:10px; width:100%; overflow:hidden; }
body .collection-progress em { display:block; height:100%; border-radius:10px; background:linear-gradient(90deg,#9c5fe7,#de7bff); }
body .garage-bulk { position:sticky; top:8px; z-index:30; flex-wrap:wrap; gap:7px; border:1px solid #a053b9; border-radius:13px; background:#171120f5; padding:10px; margin-bottom:12px; font-size:11px; }
body .primary-gold,body .keep-car,body .smallbtn.gold { border:1px solid #bca033!important; color:var(--ui-gold)!important; background:radial-gradient(ellipse at 50% 0,#8a692743,transparent 80%),#171309!important; box-shadow:inset 0 0 14px #ffcc3710; border-radius:12px; font-weight:700; }
body .smallbtn { min-height:34px; border:1px solid var(--ui-border); border-radius:10px; background:#10141e; color:var(--ui-text); }
body .smallbtn.red,body .danger { color:#ff8b96; border-color:#9f3648; }
body .empty-list { padding:32px 18px; border:1px dashed #414051; border-radius:16px; color:var(--ui-muted); text-align:center; background:#0b0d15; line-height:1.6; }
body .bottom-nav.premium-nav { position:fixed!important; left:50%!important; bottom:0!important; transform:translateX(-50%)!important; width:min(100%,960px)!important; height:calc(78px + env(safe-area-inset-bottom,0px))!important; padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))!important; display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; border:1px solid #3438417a!important; border-bottom:0!important; border-radius:25px 25px 0 0!important; background:#06080bf2!important; backdrop-filter:blur(18px)!important; box-shadow:0 -8px 25px #0005!important; z-index:80; }
body .bottom-nav.premium-nav button { min-width:0; min-height:52px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:0 2px!important; background:none!important; border:0!important; color:#969dac!important; }
body .bottom-nav.premium-nav .nav-icon,body .bottom-nav.premium-nav .roll-orb { display:grid!important; place-items:center; width:36px!important; height:33px!important; margin:0!important; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; }
body .bottom-nav.premium-nav .ui-icon { width:26px; height:26px; fill:none!important; stroke:currentColor!important; }
body .bottom-nav.premium-nav button b { font-size:11px!important; line-height:1.2; font-weight:500!important; }
body .bottom-nav.premium-nav button.active { color:var(--ui-gold)!important; }
body .bottom-nav.premium-nav button.active .nav-icon { filter:drop-shadow(0 0 7px #ffcf3b77); }
body .bottom-nav.premium-nav .roll-nav .roll-orb { width:49px!important; height:49px!important; margin-top:-17px!important; border:1px solid #a58225!important; border-radius:50%!important; background:#100e08!important; color:var(--ui-gold); box-shadow:0 0 20px #ffd44c1a!important; }
body .bottom-nav.premium-nav .roll-nav.active .roll-orb { border-color:var(--ui-gold)!important; box-shadow:0 0 26px #ffd44c3a!important; }
@media(min-width:700px) { body .content { padding:22px 26px 35px!important; } body .topbar.premium-topbar { padding-inline:26px!important; } .design-heading { text-align:left; padding-left:4px; } .design-subtitle { font-size:12px; } body .garage-filter-row select { font-size:12px; padding:12px; } body .garage-quick-filters button,body .market-currency-tabs button { font-size:12px!important; padding:9px 15px; } }
@media(max-width:370px) { .design-header { gap:6px; grid-template-columns:36px minmax(0,1fr) auto; } .design-header-menu { width:36px; height:38px; } body .brand-logo-word { font-size:20px!important; } body .content { padding-inline:12px!important; } body .topbar.premium-topbar { padding-inline:12px!important; } body .garage-filter-row { grid-template-columns:repeat(2,minmax(0,1fr)); } .design-stars { gap:5px; padding-left:7px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
.hidden { display:none!important; }
body .app-shell { background:var(--ui-bg)!important; }
body .brand-logo-word { font-style:normal!important; background:none!important; -webkit-background-clip:initial!important; filter:none!important; }
body .topbar .topbar-mainrow { display:grid!important; grid-template-columns:minmax(0,1fr) auto minmax(0,1.4fr)!important; column-gap:8px!important; }
body .topbar .level-medallion { flex:0 0 32px!important; }
body .topbar #level { font-size:12px!important; }
body .topbar .balance-chip { flex:0 1 auto!important; max-width:none!important; margin:0!important; justify-content:flex-end!important; text-align:right; }
body .topbar .balance-chip b { max-width:none!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; }
body .garage-filter-row { grid-template-columns:repeat(4,minmax(0,1fr))!important; }
body .garage-filter-row select { font-size:10px!important; padding:10px 6px!important; }
@media(max-width:370px) { body .garage-filter-row { grid-template-columns:repeat(2,minmax(0,1fr))!important; } body .topbar .balance-chip b { font-size:12px!important; } }

/* Wide showroom cards shared by owned cars and player listings. */
body #garage .car-grid { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:13px!important; }
body #garage .car-card.design-car,body #market .listitem.design-car {
  --card-accent:#6e768a; position:relative!important; display:grid!important;
  grid-template-columns:minmax(0,.47fr) minmax(0,.53fr)!important;
  flex-direction:initial!important; gap:0!important; padding:0!important;
  border:1px solid #414857!important; border-radius:17px!important;
  background:linear-gradient(145deg,#15151e,#080b10 65%)!important;
  box-shadow:0 8px 20px #0003!important; min-width:0!important; overflow:hidden!important;
  height:auto!important; min-height:0!important; isolation:isolate;
}
body #garage .design-car[data-rarity="secret"],body #market .design-car[data-rarity="secret"] {
  --card-accent:var(--ui-purple); border:1px solid var(--ui-purple)!important;
  background:radial-gradient(ellipse at 20% 5%,#9d3dc42c,transparent 70%),linear-gradient(145deg,#150d1f,#080b12 80%)!important;
  box-shadow:0 0 0 2px #b43bd02d,inset 0 0 20px #b948ed15,0 0 18px #cf4bff29!important;
}
body .design-car[data-rarity="relic"] { --card-accent:#c69aee; }
body .design-car[data-rarity="epic"] { --card-accent:#bc82e5; }
body .design-car[data-rarity="rare"] { --card-accent:#699dff; }
body .design-car[data-rarity="uncommon"] { --card-accent:#56da86; }
body #garage .design-car[data-rarity="legendary"],body #market .design-car[data-rarity="legendary"],body #market .design-car.star-listing { --card-accent:var(--ui-gold); border-color:#a5862e!important; }
body #garage .car-card.design-car.selected { border-color:var(--ui-purple)!important; box-shadow:0 0 0 2px #ce77ff50!important; }
body #garage .design-car .image-wrap.design-car-image,body #market .design-car .image-wrap.design-car-image {
  position:relative!important; display:flex!important; justify-content:center!important; align-items:flex-end!important;
  grid-column:1; grid-row:1; width:auto!important; height:auto!important; min-height:150px!important;
  max-height:none!important; padding:34px 0 5px 36px!important; overflow:hidden!important; margin:0!important;
}
body #market .design-car .image-wrap.design-car-image { padding-left:8px!important; }
.design-showroom { position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#090b11,transparent 45%),repeating-linear-gradient(90deg,transparent 0 24%,#a2825640 25%,transparent 26% 48%),radial-gradient(ellipse at 50% 25%,#95713845,transparent 70%),linear-gradient(140deg,#272018,#0a0c14); }
.design-showroom:after { content:''; position:absolute; bottom:0; height:28%; width:100%; background:repeating-linear-gradient(0deg,transparent 0 12px,#fff1 13px 14px); transform:perspective(80px) rotateX(35deg); }
[data-rarity="secret"] .design-showroom { background:linear-gradient(0deg,#100b1c,transparent 70%),repeating-linear-gradient(90deg,transparent 0 22%,#db76ff45 23%,transparent 24% 47%),radial-gradient(ellipse at 60% 15%,#843bc77a,transparent 80%),#100b18; }
body #garage .design-car .garage-main-image,body #market .design-car .garage-main-image { position:relative!important; z-index:3!important; width:100%!important; height:118px!important; max-height:100%!important; max-width:100%!important; object-fit:contain!important; opacity:1!important; visibility:visible!important; filter:drop-shadow(0 9px 8px #0008)!important; }
.design-car-rarity { position:absolute; z-index:6; top:11px; left:46px; max-width:calc(100% - 52px); padding:5px 8px; border:1px solid var(--card-accent); border-radius:999px; color:var(--card-accent); background:#0b0c15ba; display:flex; align-items:center; gap:4px; font-size:8px; font-weight:650; line-height:1.2; }
#market .design-car-rarity { left:10px; max-width:calc(100% - 16px); }
.design-car-rarity .ui-icon { width:11px; height:11px; }
[data-rarity="secret"] .design-car-rarity { letter-spacing:.17em; box-shadow:0 0 9px #db76ff22; }
.design-car-info { grid-column:2; grid-row:1; position:relative; z-index:5; min-width:0; padding:48px 12px 10px 8px; display:flex; flex-direction:column; justify-content:center; gap:7px; }
.design-car-info h3 { font-size:15px; line-height:1.25; font-weight:720; color:var(--ui-text); margin:0; overflow-wrap:anywhere; }
.design-car-logo { position:absolute; top:11px; right:13px; width:48px; height:29px; object-fit:contain; opacity:.96; }
.design-car-country { display:flex; align-items:flex-start; gap:5px; font-size:9px; line-height:1.5; color:var(--ui-muted); }
.design-car-country .country-flag { width:17px; height:12px; object-fit:cover; border-radius:2px; margin:1px 0 0; }
.design-car-tag { display:flex; align-items:center; align-self:flex-start; gap:4px; border:1px solid #9b50bb; border-radius:999px; padding:4px 7px; color:var(--ui-purple); font-size:9px; line-height:1.3; max-width:100%; overflow-wrap:anywhere; }
.design-car-tag .ui-icon { width:12px; height:12px; }
.design-card-tools { display:grid; position:absolute; top:10px; left:8px; gap:5px; z-index:20; }
.design-card-tools button { display:grid; place-items:center; width:29px; height:29px; border:1px solid #54576a; border-radius:50%; color:#a8aec1; background:#0b0c14dc; }
.design-card-tools .ui-icon { width:17px; height:17px; }
.design-card-tools button.active { color:var(--ui-purple); border-color:#9d62be; background:#291635c9; }
body #garage .design-car .select-dot { position:absolute!important; bottom:13px!important; top:auto!important; left:8px!important; right:auto!important; width:27px!important; height:27px!important; border:1px solid #434b61!important; border-radius:8px!important; display:grid!important; place-items:center!important; background:#10101be0!important; color:var(--ui-muted); z-index:25!important; }
body #garage .design-car .select-dot .ui-icon { width:15px; height:15px; }
body #garage .design-car .select-dot:disabled { display:none!important; }
body #garage .design-car.selected .select-dot { color:var(--ui-purple); border-color:var(--ui-purple)!important; }
.design-car-stats { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.2fr); gap:0; margin:0 12px; border-top:1px solid #35303b; padding:9px 0 7px; position:relative; z-index:6; }
.design-car-stat { display:flex; gap:5px; align-items:center; min-width:0; padding:0 6px; border-left:1px solid #414051; }
.design-car-stat:first-child { padding-left:0; border:0; }
.design-car-stat:last-child { padding-right:0; }
.design-car-stat .ui-icon { width:17px; height:17px; color:#aaa8c0; }
.design-car-stat small { display:block; color:var(--ui-muted); font-size:8px; line-height:1.5; }
.design-car-stat b { display:block; color:#e2e1ee; font-size:9px; font-weight:450; line-height:1.45; overflow-wrap:anywhere; }
.design-car-footer { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 12px 12px 42px; position:relative; z-index:6; }
#market .design-car-footer { padding-left:12px; }
.design-car-price { color:var(--ui-gold); font-size:20px; line-height:1.2; letter-spacing:-.02em; font-weight:750; overflow-wrap:anywhere; min-width:0; }
body .design-card-action.smallbtn { min-width:94px; padding:7px 10px; min-height:32px; font-size:11px; display:flex; align-items:center; justify-content:center; gap:5px; flex:0 0 auto; }
.design-card-action .ui-icon { width:15px; height:15px; }
body .design-car[data-rarity="secret"] .design-card-action { border-color:#ce6cea!important; color:var(--ui-purple)!important; background:linear-gradient(145deg,#63227b50,#210d2d)!important; }
body .design-car .secret-card-topline,body .design-car .secret-card-border,body .design-car .secret-card-shine,body .design-car .secret-card-aura { display:none!important; }
body .design-car .secret-card-corners { z-index:4!important; pointer-events:none!important; }
body .garage-bulk #garageSelectAll { display:inline-flex!important; align-items:center; justify-content:center; }
@media(min-width:600px) { body #garage .design-car .image-wrap.design-car-image,body #market .design-car .image-wrap.design-car-image { min-height:220px!important; padding-left:58px!important; } body #market .design-car .image-wrap.design-car-image { padding-left:12px!important; } body #garage .design-car .garage-main-image,body #market .design-car .garage-main-image { height:183px!important; } .design-card-tools { top:18px; left:14px; gap:9px; } .design-card-tools button { width:37px; height:37px; } .design-card-tools .ui-icon { width:21px; height:21px; } .design-car-info { padding:50px 22px 16px 18px; } .design-car-info h3 { font-size:25px; } .design-car-logo { width:70px; height:45px; right:20px; } .design-car-country { font-size:13px; gap:7px; } .design-car-country .country-flag { width:23px; height:17px; } .design-car-rarity { left:64px; top:18px; padding:7px 13px; font-size:12px; } .design-car-rarity .ui-icon { width:16px; height:16px; } .design-car-tag { font-size:12px; padding:6px 10px; } .design-car-stats { margin:0 22px; padding:13px 0; } .design-car-stat { gap:10px; padding:0 15px; } .design-car-stat .ui-icon { width:25px; height:25px; } .design-car-stat small { font-size:11px; } .design-car-stat b { font-size:13px; } .design-car-footer { padding:5px 22px 18px 55px; } .design-car-price { font-size:30px; } body .design-card-action.smallbtn { min-height:43px; min-width:140px; font-size:14px; } }
@media(max-width:370px) { .design-car-info { padding-inline:6px 9px; } .design-car-info h3 { font-size:13px; } .design-car-price { font-size:17px; } body .design-card-action.smallbtn { min-width:83px; padding:7px; font-size:10px; } .design-car-stat { padding-inline:4px; } .design-car-stat .ui-icon { width:14px; height:14px; } }

/* Market keeps real currencies, reservations, analytics and all filter controls. */
body #market { position:relative; }
body #market .market-tools { display:flex; flex-direction:column; gap:0; margin:0 0 12px; padding:0; background:none; border:0; }
body #market .market-filter-row { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
body #market .market-range-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:6px; margin-top:1px; }
body #market .market-range-row input { width:100%; min-width:0; min-height:38px; padding:9px 10px; font-size:11px; }
body #market .market-range-row button { font-size:10px; padding:7px 11px; }
body #market .market-list { display:grid; gap:13px; }
body #market .design-car-info { padding-top:45px; }
body #market .design-car-stat:first-child { border:0; }
body #market .design-car .design-card-action:disabled { color:#c6b6d0!important; border-color:#69526f!important; background:#211626!important; }
body #market .design-car[data-rarity="secret"] .design-car-price { color:var(--ui-gold); }
body #market .design-car .design-car-footer { padding-top:6px; }
.design-price-comparison { display:block; font-size:8px; color:var(--ui-muted); font-weight:400; }
.design-price-comparison.high { color:#ff9f89; }
.design-price-comparison.low { color:#65dc94; }
@media(min-width:600px) { .design-price-comparison { font-size:11px; } }

/* Roll scene: real game result, normal flow, single/batch choices stay intact. */
#home .design-secret-banner { position:relative; display:grid; place-items:center; min-height:112px; border:1px solid #b23ee2; border-radius:16px; overflow:hidden; background:repeating-linear-gradient(90deg,transparent 0 15%,#cb5efa20 16%,transparent 17% 32%),radial-gradient(ellipse at 50% 95%,#6d238955,transparent 75%),#13091f; box-shadow:0 0 15px #b144ec20,inset 0 0 20px #b144ec15; margin-bottom:16px; }
.design-secret-banner>div { position:relative; z-index:2; display:grid; justify-items:center; padding:10px 0; text-align:center; }
.banner-badge { color:var(--ui-purple); font-size:10px; letter-spacing:.2em; border:1px solid #c954ea; border-radius:999px; padding:4px 10px; display:flex; align-items:center; gap:5px; background:#210c37c7; }
.banner-badge .ui-icon { width:13px; height:13px; }
.design-secret-banner h2 { margin:5px 0 3px; font-size:15px; line-height:1.22; color:#fff; letter-spacing:.02em; }
.design-secret-banner p { font-size:8px; margin:0; color:#b6a8c8; }
.banner-car { position:absolute; z-index:1; bottom:5px; height:75px; width:36%; object-fit:contain; filter:drop-shadow(0 0 10px #8d3adf66); pointer-events:none; }
.banner-car-left { left:-4%; transform:rotate(-3deg); }
.banner-car-right { right:-4%; }
body #home #rollStage.hero-card { min-height:0!important; height:auto!important; max-height:none!important; border:1px solid #65417e!important; border-radius:18px!important; background:linear-gradient(145deg,#150d20,#090c12)!important; overflow:hidden!important; box-shadow:0 10px 28px #0005,inset 0 0 25px #9f43db12!important; }
body #home #rollStage .empty-hero { display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:center!important; min-height:225px!important; height:auto!important; padding:17px 10px 20px!important; gap:5px!important; background:radial-gradient(ellipse at 50% 55%,#7733993d,transparent 70%),repeating-linear-gradient(90deg,transparent 0 24%,#9e71b51c 25%,transparent 26% 50%); }
.design-ready-label { display:block; color:#c492e7; font-size:9px; letter-spacing:.18em; font-weight:650; }
body #home #rollStage .ghost-roll-car { width:90%!important; height:135px!important; object-fit:contain!important; margin:0!important; opacity:1!important; filter:drop-shadow(0 8px 14px #0009)!important; transform:none!important; }
body #home #rollStage .empty-hero h2 { font-size:18px!important; color:var(--ui-text)!important; margin:0!important; }
body #home #rollStage .empty-hero p { font-size:10px!important; color:#a99abb!important; }
body #home #rollStage .car-hero.v11-result { display:block!important; min-height:0!important; height:auto!important; padding:14px!important; grid-template-rows:none!important; border-radius:17px!important; background:linear-gradient(140deg,#19101f,#090c13 75%)!important; }
body #home #rollStage .v11-hero-top { display:flex!important; position:relative!important; padding:0!important; gap:12px!important; }
body #home #rollStage .v11-hero-top h2 { font-size:21px!important; line-height:1.18!important; font-weight:700; margin:8px 0 5px!important; }
body #home #rollStage .v11-brand-stack { min-width:52px!important; max-width:64px!important; }
body #home #rollStage .hero-brand-logo { width:auto!important; height:42px!important; max-width:60px!important; max-height:42px!important; }
body #home #rollStage .hero-car-stage { display:grid!important; place-items:center!important; position:relative!important; height:180px!important; min-height:0!important; margin:4px -7px 2px!important; }
body #home #rollStage .hero-image { width:100%!important; height:100%!important; max-height:180px!important; max-width:100%!important; object-fit:contain!important; transform:none!important; filter:drop-shadow(0 12px 15px #0009)!important; }
body #home #rollStage .v11-x-strip { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important; margin:5px 0 9px!important; }
body #home #rollStage .v11-x-card { min-height:46px!important; padding:8px!important; border-radius:11px; background:#10121b; }
body #home #rollStage .v11-x-card small { white-space:normal!important; font-size:9px!important; }
body #home #rollStage .v11-x-card:nth-child(3) { grid-column:1/-1; }
body #home #rollStage .v11-stats-row { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:6px!important; margin:0 0 9px!important; position:relative!important; min-height:0!important; }
body #home #rollStage .v11-stats-row>div { min-height:0!important; padding:8px 6px!important; background:#0e111a!important; border-radius:11px; }
body #home #rollStage .v11-mileage { grid-column:auto!important; }
body #home #rollStage .v11-stats-row b { font-size:10px!important; line-height:1.4!important; white-space:normal!important; }
body #home #rollStage .v11-stats-row small { font-size:9px!important; }
body #home #rollStage .odometer-box { display:flex!important; transform:none!important; gap:3px; margin:0!important; }
body #home #rollStage .odometer-digits { padding:2px!important; gap:1px!important; border:0; background:transparent; box-shadow:none; }
body #home #rollStage .odo-digit { width:auto!important; height:auto!important; min-height:16px; font-size:10px!important; padding:1px; line-height:1.2!important; border:0; background:none; border-radius:0; }
body #home #rollStage .odo-unit { font-size:8px!important; }
body #home #rollStage .v11-value { width:100%!important; min-height:0!important; padding:7px 0 3px!important; margin:0!important; border:0!important; background:none!important; text-align:left!important; }
body #home #rollStage .v11-value strong { font-size:27px!important; line-height:1.2!important; color:var(--ui-gold)!important; overflow-wrap:anywhere; }
body #home #rollStage .single-actions { display:grid!important; position:relative!important; left:auto!important; right:auto!important; bottom:auto!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; margin:9px 12px 12px!important; gap:8px!important; padding:0!important; }
body #home #rollStage .single-actions button { min-height:51px!important; height:auto!important; padding:8px!important; font-size:11px!important; line-height:1.3!important; border-radius:12px!important; white-space:normal!important; overflow-wrap:anywhere!important; }
body #home #rollStage .keep-car { border-color:#aa55cd!important; color:var(--ui-purple)!important; background:#29103a!important; }
body #home #rollStage .sell-car { border:1px solid var(--ui-gold)!important; color:#221700!important; background:linear-gradient(120deg,#ffe56f,#d7a119)!important; box-shadow:0 0 12px #ffc44d22!important; }
body #home #rollStage .swipe-hint { position:relative!important; bottom:auto!important; left:auto!important; right:auto!important; transform:none!important; width:fit-content!important; margin:2px auto 5px!important; max-width:90%!important; }
body #home #rollStage .batch-dots { position:relative!important; bottom:auto!important; left:auto!important; right:auto!important; transform:none!important; justify-content:center!important; margin:4px auto!important; }
body #home .roll-price-line { display:flex; flex-wrap:wrap; align-items:center; font-size:10px; padding:12px 2px 9px; gap:6px; }
body #home .roll-price-line>b { color:#e4daef; font-size:12px; }
body #home .free-rolls { font-size:9px; padding:5px 8px; color:#b1abc0; }
body #home .roll-count-switch { display:flex!important; justify-content:center!important; gap:6px!important; padding:0!important; margin:3px 0 9px!important; background:none!important; border:0!important; }
body #home .roll-count-switch button { min-height:32px; min-width:58px; border:1px solid #454053; border-radius:9px; background:#0d111a; color:#a5a0b5; }
body #home .roll-count-switch button.active { border-color:var(--ui-purple); color:var(--ui-purple); background:#34114355; }
body #home .roll-buttons { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:0; }
body #home #roll1.roll-btn { min-height:65px!important; width:100%; border-radius:16px!important; border:1px solid #d976fa!important; color:var(--ui-text)!important; background:linear-gradient(130deg,#901ec9,#5d148b 70%,#7916ae)!important; box-shadow:0 0 16px #b94ce13f,inset 0 1px 2px #f7b4ff68!important; }
body #home #roll1 b { font-size:19px; }
body #home #roll1 small { font-size:12px; opacity:1; color:#e7ccef; }
body #home #roll1 .dice-icon { display:grid; place-items:center; transform:none; background:none; border:0; width:33px; height:33px; }
body #home #roll1 .dice-icon .ui-icon { width:30px; height:30px; }
body #home .roll-filter-drawer { margin-top:12px; padding:0; border:1px solid #40354f; border-radius:13px; background:#0e111a; }
body #home .roll-filter-drawer summary { padding:13px; font-size:12px; color:#e6d7f0; }
body #home .roll-filter-drawer summary small { color:var(--ui-muted); font-size:9px; }
body #home .four-selectors { gap:7px; padding:0 10px 10px; margin:0; }
body #home .selector-pill { min-height:59px; border:1px solid #413750; border-radius:10px; background:#171020; padding:9px; }
body #home .selector-pill small { font-size:8px; color:#bd93d3; }
body #home .selector-pill b { font-size:11px; line-height:1.4; padding-right:10px; }
body #home .opening-state,body #home .pack-reveal { min-height:260px!important; }
.design-roll-catalogue { margin-top:19px; padding:13px; border:1px solid #40344f; border-radius:16px; background:#0d0f18; }
.design-catalogue-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:11px; }
.design-catalogue-head h3 { margin:0; font-size:12px; display:flex; align-items:center; gap:7px; }
.design-catalogue-head h3 .ui-icon { width:17px; height:17px; color:var(--ui-purple); }
.design-catalogue-head .smallbtn { font-size:9px; padding:6px 8px; min-height:29px; }
.design-catalogue-strip { display:flex; gap:8px; overflow-x:auto; padding:1px 0 8px; scroll-snap-type:x proximity; scrollbar-color:#7f469e #15121f; scrollbar-width:thin; }
.design-catalogue-strip article { --preview-accent:#81899e; flex:0 0 112px; scroll-snap-align:start; background:radial-gradient(ellipse at 50% 20%,#42304b33,transparent 80%),#11131c; border:1px solid var(--preview-accent); border-radius:12px; padding:9px 7px; text-align:center; }
.design-catalogue-strip article[data-rarity="secret"] { --preview-accent:#db76ff; }
.design-catalogue-strip article[data-rarity="relic"],.design-catalogue-strip article[data-rarity="epic"] { --preview-accent:#ae65e2; }
.design-catalogue-strip article[data-rarity="legendary"] { --preview-accent:#ffdc59; }
.design-catalogue-strip article[data-rarity="rare"] { --preview-accent:#669fed; }
.design-catalogue-strip article[data-rarity="uncommon"] { --preview-accent:#56da86; }
.design-catalogue-strip article>small { color:var(--preview-accent); font-size:8px; letter-spacing:.03em; }
.design-catalogue-strip article img { width:100%; height:69px; object-fit:contain; margin:4px 0; }
.design-catalogue-strip article b { display:block; font-size:10px; line-height:1.4; color:#ebe4f2; font-weight:550; }
.design-roll-catalogue>p { font-size:9px; line-height:1.5; color:var(--ui-muted); margin:7px 0 0; }
@media(min-width:650px) { .design-secret-banner { min-height:145px!important; } .design-secret-banner h2 { font-size:23px; } .design-secret-banner p { font-size:11px; } .banner-car { height:118px; } body #home #rollStage .hero-car-stage { height:270px!important; } body #home #rollStage .hero-image { max-height:270px!important; } body #home #rollStage .empty-hero { min-height:280px!important; } body #home #rollStage .ghost-roll-car { height:190px!important; } .design-catalogue-strip article { flex-basis:150px; } .design-catalogue-strip article img { height:90px; } }
/* Explicit tracks prevent intrinsic catalogue width from stretching the mobile grid. */
body #home.screen.active { display:block!important; width:100%!important; }
body #home .roll-center { display:flex!important; flex-direction:column!important; gap:0!important; width:100%!important; min-width:0!important; }
body #home>*,body #home .roll-center>* { min-width:0!important; max-width:100%!important; }
body #home .design-secret-banner { width:100%; grid-template-columns:minmax(0,1fr); }
body #home .design-catalogue-strip { width:100%; min-width:0; }
body #home .ghost-roll-car { mask-image:none!important; }
body .design-showroom { z-index:0; pointer-events:none; }
body #market .design-car img { padding:0!important; background:none!important; border-radius:0!important; flex-basis:auto!important; }
body #market .design-car .design-car-logo { width:48px!important; height:29px!important; max-width:48px!important; }
body #market .market-filter-row { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
body #market .market-filter-row select:last-child { grid-column:auto!important; }
body #market .market-range-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important; }
body #market .market-range-row button { grid-column:auto!important; min-width:0; padding:6px 8px; }
@media(prefers-reduced-motion:reduce) {
  body #modal .sheet,body #dialog .dialog-card,body .screen,body #revealOverlay,body .car-hero,body .hero-image { transition-duration:.01ms!important; animation:none!important; }
}
html.no-animations #modal .sheet,html.no-animations #dialog .dialog-card { transition-duration:.01ms!important; animation:none!important; }
body #home #roll1 .dice-icon { color:inherit!important; }
body #home #roll1 .dice-icon .ui-icon { fill:none!important; stroke:currentColor!important; }

/* Profile uses actual player, XP, collection, garage and wallet values. */
body #more .profile-card.design-profile-card { position:relative; display:grid!important; grid-template-columns:70px minmax(0,1fr)!important; gap:12px!important; padding:18px!important; margin:0 0 13px!important; border:1px solid #ad59d0!important; border-radius:19px!important; background:radial-gradient(ellipse at 95% 15%,#8932b548,transparent 60%),repeating-linear-gradient(90deg,transparent 0 24%,#bd55d620 25%,transparent 26% 50%),linear-gradient(145deg,#17111f,#0a0d15 80%)!important; box-shadow:0 0 17px #aa3bda19!important; overflow:hidden; }
.design-profile-avatar { display:grid; place-items:center; width:69px; height:69px; align-self:center; border:2px solid #c675ef; border-radius:50%; color:#a5a8b8; background:linear-gradient(135deg,#171e2a,#0a0c13); box-shadow:0 0 0 3px #49245950,0 0 18px #bb56e955; }
.design-profile-avatar .ui-icon { width:42px; height:42px; stroke-width:1.2; fill:#8a90aa3d; }
.design-profile-identity { min-width:0; display:flex; flex-direction:column; gap:5px; justify-content:center; }
body #more #profileName { font-size:20px!important; font-weight:720; line-height:1.2; overflow-wrap:anywhere; }
body #more .profile-id { display:block!important; width:auto!important; height:auto!important; padding:0!important; border:0!important; border-radius:0!important; background:none!important; color:#b1a8c1!important; box-shadow:none!important; font-size:12px!important; }
body #more #profileStats { display:block; font-size:10px; color:#a89cba; line-height:1.5; }
.design-profile-level { grid-column:1/-1; display:flex; align-items:center; gap:10px; padding:10px 13px; border:1px solid #5b416e; border-radius:12px; background:#0c0d19c2; }
.design-profile-level>b { display:grid; place-items:center; width:35px; height:38px; border:1px solid #cfaa57; border-radius:10px; color:#fce3a4; font-size:20px; }
.design-profile-level>div { min-width:0; flex:1; display:grid; grid-template-columns:1fr auto; gap:6px; align-items:center; }
.design-profile-level small { color:#b9b1c9; font-size:8px; letter-spacing:.12em; }
.design-profile-level span { color:#e3d9eb; font-size:10px; }
.design-profile-level i { display:block; height:5px; grid-column:1/-1; border-radius:8px; background:#30253f; overflow:hidden; }
.design-profile-level em { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,#7456ed,#df88ff); }
body #more .design-profile-card .profile-value { grid-column:1/-1; display:flex!important; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:7px; width:auto!important; text-align:left!important; padding:0; margin:0; }
body #more .profile-value small { color:#a9a0b7; font-size:10px; }
body #more #profileBalance { color:var(--ui-gold); font-size:20px!important; font-weight:750; line-height:1.3; overflow-wrap:anywhere; }
.design-profile-usage { display:grid; grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.design-profile-usage>div { border:1px solid #3d304a; border-radius:11px; padding:10px; background:#0a0d17ba; }
.design-profile-usage small { display:block; color:#aaa3b8; font-size:9px; }
.design-profile-usage b { display:block; margin-top:4px; color:#f0e9f8; font-size:17px; }
.design-profile-balances { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:15px; }
.design-profile-balances>button { display:flex; align-items:center; gap:8px; padding:13px 10px; min-height:77px; border:1px solid #af8727; border-radius:15px; background:radial-gradient(ellipse at 20% 30%,#70541937,transparent 85%),#121007; color:var(--ui-gold); text-align:left; min-width:0; }
.design-profile-balances>button:last-child { border-color:#bc65d7; background:radial-gradient(ellipse at 20% 30%,#77308a32,transparent 85%),#170c1e; color:var(--ui-purple); }
.design-profile-balances button>i { flex:0 0 auto; display:grid; place-items:center; width:28px; height:32px; border:1px solid currentColor; border-radius:50%; font-style:normal; }
.design-profile-balances button>i .ui-icon { width:18px; height:18px; }
.design-profile-balances button>span:not(.design-balance-plus) { flex:1; min-width:0; }
.design-profile-balances small { color:#afa6ba; font-size:10px; display:block; margin-bottom:5px; }
body #more .design-profile-balances b { font-size:17px!important; font-weight:750; line-height:1.2; display:block; margin:0!important; overflow-wrap:anywhere; color:var(--ui-gold)!important; }
.design-balance-plus { flex:0 0 auto; display:grid; place-items:center; width:22px; height:29px; border:1px solid #ac894548; border-radius:8px; }
.design-balance-plus .ui-icon { width:15px; height:15px; }
body #more .profile-collection-summary { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px; margin-bottom:14px; }
body #more .profile-collection-summary>div { padding:12px 10px; border:1px solid #393146; border-radius:13px; background:linear-gradient(145deg,#15121d,#0a0e15); min-width:0; }
body #more .profile-collection-summary small { color:#a19aaf; font-size:9px; text-transform:none; letter-spacing:0; }
body #more .profile-collection-summary b { display:block; font-size:13px; margin-top:5px; color:#ece5f4; line-height:1.4; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; overflow-wrap:anywhere; }
body #more .profile-collection-summary>div.wide { grid-column:1/-1; display:flex; gap:10px; align-items:center; justify-content:space-between; }
body #more .profile-collection-summary>div.wide small { flex:0 0 70px; }
body #more .profile-collection-summary>div.wide b { text-align:right; font-size:11px; margin:0; min-width:0; }
body #more .profile-collection-summary i { height:4px; background:#362b45; }
body #more .profile-collection-summary i span { background:var(--ui-purple); }
body #more .profile-showcase-mini { padding:0; margin-bottom:20px; }
body #more .profile-showcase-label { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:13px; color:#e9dff1; }
body #more .profile-showcase-label span { color:var(--ui-muted); font-size:10px; }
body #more .profile-showcase-row { display:flex; gap:8px; overflow-x:auto; padding-bottom:7px; }
body #more .profile-showcase-row button { display:flex; flex-direction:column; min-width:106px; max-width:145px; flex:1 0 106px; text-align:left; border:1px solid #504057; border-radius:13px; padding:9px; background:linear-gradient(140deg,#19111f,#0b1018); }
body #more .profile-showcase-row img { width:100%; height:68px; object-fit:contain; }
body #more .profile-showcase-row small { display:block; font-size:9px; color:#afa4b9; }
body #more .profile-showcase-row b { color:#ece2f7; font-size:10px; line-height:1.4; white-space:normal; }
body #more .profile-showcase-empty { width:100%; border:1px dashed #8b579f; border-radius:13px; padding:18px; color:#d5a0ee; background:#160f1c; }
body #more .group-title { text-transform:none; font-size:16px; color:#eae1f2; letter-spacing:0; margin:21px 0 12px; }
body #more .menu-grid,body #more .menu-grid.service-grid { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:9px!important; }
body #more #adminTile { border-color:#8452a6!important; }
body #more .menu-grid #adminTile.hidden { display:none!important; }
@media(min-width:650px) { body #more .profile-card.design-profile-card { grid-template-columns:85px minmax(0,1fr) minmax(0,.8fr)!important; padding:23px!important; gap:18px!important; } .design-profile-avatar { width:80px; height:80px; } .design-profile-level { grid-column:3; grid-row:1; } body #more .design-profile-card .profile-value { grid-column:1/-1; } .design-profile-usage { grid-template-columns:repeat(2,minmax(0,1fr)); } .design-profile-balances>button { min-height:90px; padding:18px; } body #more .design-profile-balances b { font-size:25px!important; } .design-profile-balances button>i { width:44px; height:44px; } .design-balance-plus { width:34px; height:36px; } body #more .menu-grid,body #more .menu-grid.service-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important; } }
@media(max-width:370px) { body #more .profile-card.design-profile-card { grid-template-columns:57px minmax(0,1fr)!important; gap:10px!important; padding:13px!important; } .design-profile-avatar { width:55px; height:55px; } body #more #profileName { font-size:18px!important; } .design-profile-balances>button { padding:10px 8px; gap:5px; } .design-profile-balances button>i { width:23px; height:27px; } body #more .design-profile-balances b { font-size:14px!important; } body #more .menu-grid button { padding:12px!important; } }
.design-profile-balances>button { display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:7px; row-gap:8px; align-content:center; }
.design-profile-balances button>span:not(.design-balance-plus) { display:contents; }
.design-profile-balances button small { grid-column:2; grid-row:1; margin:0; }
.design-profile-balances button>i { grid-column:1; grid-row:1; }
.design-profile-balances .design-balance-plus { grid-column:3; grid-row:1; }
body #more .design-profile-balances button b { grid-column:1/-1; grid-row:2; font-size:20px!important; }
@media(min-width:650px) { body #more .design-profile-balances button b { font-size:28px!important; } }
/* Background scenery must stay behind price/stats even with animations disabled. */
body #home #rollStage .v11-value,body #home #rollStage .v11-stats-row { position:relative!important; z-index:5!important; }
body #home #rollStage .single-actions { width:calc(100% - 24px)!important; max-width:calc(100% - 24px)!important; }