:root {
  --bg: #080a11;
  --surface: #10131d;
  --surface-2: #151926;
  --surface-3: #1b2030;
  --border: rgba(255,255,255,.075);
  --border-bright: rgba(255,255,255,.14);
  --text: #f6f7fb;
  --muted: #8d94a8;
  --lime: #c8ff38;
  --lime-2: #8eff4d;
  --violet: #8b5cff;
  --cyan: #30e4ff;
  --red: #ff5470;
  --amber: #ffb94a;
  --radius: 20px;
  --shadow: 0 26px 80px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font: 500 16px/1.5 Inter, system-ui, sans-serif;
  overflow-x: hidden;
}
button, input, select { min-width: 0; max-width: 100%; font: inherit; }
img, svg { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}
.hidden { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Lightweight 2.5 second boot scene. All motion stays on compositor-friendly properties. */
body.site-loading { overflow:hidden; }
.site-loader {
  position:fixed;
  z-index:1000;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#070910;
  opacity:1;
  visibility:visible;
  transition:opacity .28s ease,visibility .28s ease;
  isolation:isolate;
}
.site-loader.complete { opacity:0; visibility:hidden; pointer-events:none; }
.site-loader-grid {
  position:absolute;
  z-index:-2;
  inset:-16% -10% -28%;
  background-image:linear-gradient(rgba(139,92,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(139,92,255,.11) 1px,transparent 1px);
  background-size:48px 48px;
  opacity:0;
  transform:perspective(700px) rotateX(58deg) translateY(22%) scale(1.08);
  transform-origin:50% 78%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 2%,#000 34%,#000 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 2%,#000 34%,#000 78%,transparent 100%);
  animation:loaderGridReveal 2.22s ease both;
}
.site-loader-beam {
  position:absolute;
  z-index:-1;
  top:-25%;
  left:50%;
  width:min(780px,120vw);
  height:92%;
  background:radial-gradient(ellipse at 50% 0,rgba(225,211,255,.48),rgba(139,92,255,.24) 30%,rgba(139,92,255,.07) 55%,transparent 74%);
  opacity:0;
  transform:translateX(-50%) scale(.78,.58);
  transform-origin:50% 0;
  animation:loaderBeamReveal 2.22s cubic-bezier(.2,.72,.25,1) both;
  will-change:opacity,transform;
}
.site-loader-core { width:min(430px,78vw); display:grid; justify-items:center; gap:34px; transform:translateY(2vh); }
.site-loader-brand { display:flex; align-items:center; justify-content:center; gap:18px; animation:loaderBrandIn .62s cubic-bezier(.2,.78,.25,1) both; }
.site-loader-brand img { width:72px; height:72px; flex:0 0 72px; object-fit:cover; filter:drop-shadow(0 0 24px rgba(200,255,56,.2)); }
.site-loader-brand span { color:#f8f9fc; font:700 clamp(31px,6vw,50px)/1 Unbounded,Inter,sans-serif; letter-spacing:-.075em; }
.site-loader-brand b { color:var(--lime); font-weight:inherit; }
.site-loader-track { width:100%; height:5px; overflow:hidden; border-radius:999px; background:#111521; box-shadow:inset 0 1px 3px rgba(0,0,0,.62); }
.site-loader-track i { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--violet),#b18cff 54%,var(--lime)); box-shadow:0 0 18px rgba(139,92,255,.5); transform:scaleX(0); transform-origin:left center; animation:loaderProgress 2.18s cubic-bezier(.22,.7,.2,1) both; will-change:transform; }
@keyframes loaderProgress { 0% { transform:scaleX(0); } 72% { transform:scaleX(.78); } 100% { transform:scaleX(1); } }
@keyframes loaderBrandIn { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes loaderGridReveal { 0%,58% { opacity:0; } 100% { opacity:.72; } }
@keyframes loaderBeamReveal { 0%,55% { opacity:0; transform:translateX(-50%) scale(.78,.58); } 100% { opacity:1; transform:translateX(-50%) scale(1,1); } }
@media (max-width:520px) {
  .site-loader-core { width:min(340px,76vw); gap:28px; }
  .site-loader-brand { gap:13px; }
  .site-loader-brand img { width:58px; height:58px; flex-basis:58px; }
  .site-loader-brand span { font-size:clamp(28px,9vw,40px); }
  .site-loader-track { height:4px; }
}
@media (prefers-reduced-motion:reduce) {
  .site-loader-grid { animation:none; opacity:.28; }
  .site-loader-beam { animation:none; opacity:.22; transform:translateX(-50%); }
  .site-loader-brand { animation:none; }
  .site-loader-track i { animation:none; transform:scaleX(1); }
}

.ambient { position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(110px); opacity: .18; }
.ambient-one { width: 460px; height: 460px; background: var(--violet); top: 130px; left: -260px; }
.ambient-two { width: 560px; height: 560px; background: #37c574; top: 520px; right: -350px; opacity: .11; }

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 0 34px;
  background: rgba(8,10,17,.88);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { position: relative; width: 32px; height: 34px; display: block; flex: 0 0 auto; border: 0; border-radius: 8px; background: url('./assets/voltup-mark-v2.svg') center/contain no-repeat; box-shadow: 0 0 24px rgba(200,255,56,.16); transform: none; }
.site-header > .brand .brand-mark { background-image: url('./assets/voltup-logo-neon.png'); background-size:cover; }
.brand-mark::before, .brand-mark::after, .brand-mark i { display: none; }
.brand-name { font: 700 20px/1 Unbounded, sans-serif; letter-spacing: -.06em; }
.brand-name span { color: var(--lime); }
.main-nav { justify-self: center; display: flex; align-items: center; gap: 8px; }
.main-nav a, .main-nav .nav-button { position: relative; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; color: #fff; border: 1px solid rgba(200,255,56,.38); border-radius: 10px; background: rgba(14,17,26,.88); box-shadow: inset 0 0 0 1px rgba(200,255,56,.025); cursor: pointer; font-size: 13px; font-weight: 750; line-height: 1; text-align: center; }
.main-nav a::after { display: none; }
.main-nav a:hover, .main-nav a.active, .main-nav .nav-button:hover { color: #fff; border-color: var(--lime); background: rgba(14,17,26,.88); box-shadow: 0 0 0 1px rgba(200,255,56,.12),0 0 14px rgba(200,255,56,.2); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.online { display: grid; grid-template-columns: auto auto; column-gap: 6px; padding-right: 8px; line-height: 1.1; }
.online i { width: 7px; height: 7px; align-self: center; border-radius: 50%; background: #63f490; box-shadow: 0 0 10px #63f490; }
.online b { font-size: 13px; }
.online em { grid-column: 2; color: var(--muted); font-size: 10px; font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
.icon-button, .profile-button, .mobile-menu { border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
.icon-button svg, .search-box svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button.muted svg { opacity: .35; }
.balance-box { min-width: 114px; padding: 5px 12px; border-left: 1px solid var(--border); }
.balance-box span { display: block; color: var(--muted); font-size: 11px; }
.balance-box strong { font-size: 14px; }
.profile-button { width: 42px; height: 42px; border-radius: 50%; padding: 3px; }
.profile-button span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg,var(--violet),#402383); font-weight: 800; }
.mobile-menu { display: none; width: 44px; height: 42px; padding: 10px; border-radius: 12px; }
.mobile-menu span { display: block; height: 2px; margin: 4px 0; background: currentColor; }

.button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 13px; cursor: pointer; font-weight: 800; transition: transform .18s ease, filter .18s ease, background .18s ease; }
.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button:active { transform: translateY(1px); }
.button-accent { color: #0b0e11; background: var(--lime); box-shadow: 0 12px 32px rgba(200,255,56,.12); }
.button-muted { border: 1px solid var(--border-bright); background: #1b1f2b; }
.button-muted:hover { background: #232838; }
.full { width: 100%; }

.live-strip { display: flex; width: 100%; height: 72px; margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: #0b0e16; box-shadow: none; overflow: hidden; }
.live-title { flex: 0 0 104px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--lime); border-right: 1px solid var(--border); font-size: 12px; font-weight: 900; letter-spacing: .11em; }
.live-title i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: pulse 1.5s infinite; }
.live-viewport { overflow: hidden; flex: 1; }
.live-track { display: flex; width: max-content; height: 100%; animation: marquee 38s linear infinite; }
.live-strip:hover .live-track { animation-play-state: paused; }
.live-item { position: relative; display: grid; grid-template-columns: 50px auto; align-items: center; min-width: 206px; padding: 8px 18px 8px 14px; border-right: 1px solid var(--border); overflow: hidden; isolation: isolate; }
.live-item::before { content: ''; position: absolute; z-index: -1; width: 72px; height: 72px; left: 1px; top: 0; border-radius: 50%; background: var(--rarity); filter: blur(25px); opacity: .28; }
.live-item img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 13px var(--rarity)) drop-shadow(0 8px 9px rgba(0,0,0,.5)); }
.live-item small, .live-item b { display: block; max-width: 124px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-item small { color: var(--muted); font-size: 10px; }
.live-item b { font-size: 11px; }
.live-item em { color: var(--lime); font-size: 10px; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pulse { 50% { opacity: .35; } }

main { width: min(1440px, calc(100% - 48px)); margin: 0 auto; }
.upgrade-section, .catalog-section, .inventory-section, .history-section { scroll-margin-top: 94px; padding-top: 54px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.section-heading.compact { align-items: center; }
.eyebrow { display: block; margin-bottom: 6px; color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: .17em; }
h1, h2 { margin: 0; font-family: Unbounded, sans-serif; letter-spacing: -.045em; line-height: 1.16; }
h1 { font-size: clamp(28px, 3vw, 42px); }
h2 { font-size: clamp(23px, 2.2vw, 32px); }
.upgrade-workspace { display: grid; grid-template-columns: minmax(260px,1fr) minmax(350px,1.1fr) minmax(260px,1fr); min-height: 532px; border: 1px solid var(--border); border-radius: 28px; background: rgba(16,19,29,.88); box-shadow: var(--shadow); overflow: hidden; }
.item-panel { position: relative; padding: 28px; background: linear-gradient(155deg,rgba(255,255,255,.018),transparent 48%); }
.source-panel { border-right: 1px solid var(--border); }
.target-panel { border-left: 1px solid var(--border); }
.panel-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-topline h2 { margin-top: 3px; font: 700 18px/1.2 Inter, sans-serif; letter-spacing: -.02em; }
.step-label { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.small-link { padding: 5px 0; color: var(--lime); border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 800; }
.source-balance { margin-top: 14px; padding: 14px 15px 12px; border: 1px solid rgba(200,255,56,.12); border-radius: 15px; background: linear-gradient(135deg,rgba(200,255,56,.025),transparent 55%),rgba(10,13,20,.72); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.cash-addon-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.cash-addon-head > span { min-width: 0; display: grid; gap: 2px; }
.cash-addon-head b { color: #fff; font-size: 12px; }
.cash-addon-head small { color: var(--muted); font-size: 9px; }
.cash-addon-value { flex: 0 0 auto; min-width: 68px; padding: 7px 9px; color: var(--lime); border: 1px solid rgba(200,255,56,.19); border-radius: 9px; background: rgba(200,255,56,.05); text-align: center; font-size: 12px; font-weight: 900; }
.stake-range-block label { display: block; padding: 5px 2px 4px; }
.stake-range-block input { --stake-progress: 0%; width: 100%; height: 24px; margin: 0; border: 0; background: transparent; cursor: ew-resize; appearance: none; }
.stake-range-block input:focus-visible { outline: 2px solid rgba(200,255,56,.55); outline-offset: 5px; border-radius: 999px; }
.stake-range-block input::-webkit-slider-runnable-track { height: 7px; border-radius: 999px; background: linear-gradient(90deg,var(--lime) 0 var(--stake-progress),#2a3040 var(--stake-progress) 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,.52),0 0 12px rgba(200,255,56,.08); }
.stake-range-block input::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; border: 4px solid #0d1018; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px #eef4ff,0 0 22px rgba(200,255,56,.65); appearance: none; }
.stake-range-block input::-moz-range-track { height: 7px; border-radius: 999px; background: #2a3040; }
.stake-range-block input::-moz-range-progress { height: 7px; border-radius: 999px; background: var(--lime); }
.stake-range-block input::-moz-range-thumb { width: 14px; height: 14px; border: 4px solid #0d1018; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px #eef4ff,0 0 22px rgba(200,255,56,.65); }
.stake-range-scale { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; color: var(--muted); font-size: 9px; }
.stake-range-scale > :first-child { justify-self: start; }
.stake-range-scale > .stake-range-mid { justify-self: center; }
.stake-range-scale > :last-child { justify-self: end; }
.stake-range-scale strong { color: #d9dce5; font-weight: 700; }
.panel-stat-row { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 16px; color: var(--muted); border-top: 1px solid var(--border); font-size: 11px; }
.panel-stat-row strong { color: #fff; }
.stake-addon { margin-top: 18px; padding: 13px; border: 1px solid rgba(200,255,56,.18); border-radius: 15px; background: linear-gradient(135deg,rgba(200,255,56,.055),transparent 48%),#0d1119; box-shadow: inset 0 1px rgba(255,255,255,.025); }
.stake-addon-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stake-addon-head > span { min-width: 0; display: grid; gap: 2px; }
.stake-addon-head b { color: #fff; font-size: 13px; }
.stake-addon-head small { color: var(--muted); font-size: 10px; }
.source-skin-remove { min-height: 28px; padding: 0 10px; color: var(--muted); border: 1px solid var(--border); border-radius: 9px; background: #171b26; cursor: pointer; font-size: 9px; font-weight: 800; transition: color .2s ease,border-color .2s ease,background .2s ease; }
.source-skin-remove:hover { color: #fff; border-color: rgba(240,91,134,.5); background: rgba(240,91,134,.08); }
.stake-addon-picker { width: 100%; min-height: 188px; margin-top: 11px; padding: 10px; color: #fff; border: 1px solid var(--border-bright); border-radius: 12px; background: radial-gradient(circle at 50% 42%,rgba(200,255,56,.065),transparent 54%),rgba(21,25,35,.72); cursor: pointer; text-align: left; transition: border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.stake-addon-picker:hover,.stake-addon-picker:focus-visible { border-color: rgba(200,255,56,.48); background: rgba(200,255,56,.055); box-shadow: 0 0 22px rgba(200,255,56,.07); }
.stake-addon-picker.has-item { border-style: solid; border-color: color-mix(in srgb,var(--rarity,#c8ff38) 48%,var(--border)); }
.stake-addon-picker > span { display: block; }
.source-addon-empty { min-height: 166px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); text-align: center; }
.source-addon-empty > i { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 48px; color: var(--lime); border: 1px solid rgba(200,255,56,.3); border-radius: 14px; background: rgba(200,255,56,.055); box-shadow: 0 0 24px rgba(200,255,56,.08); font-style: normal; font-size: 25px; }
.source-addon-empty > span { display: grid; gap: 1px; }
.source-addon-empty b { color: #e9ecf3; font-size: 12px; }
.source-addon-empty small { font-size: 9px; }
.source-addon-selected { min-height: 166px; display: grid; grid-template-columns: 1fr; grid-template-rows: 104px auto auto; align-items: center; justify-items: center; gap: 5px; text-align: center; }
.source-addon-selected img { width: 100%; height: 104px; object-fit: contain; filter: drop-shadow(0 0 18px var(--rarity)) drop-shadow(0 8px 8px rgba(0,0,0,.4)); }
.source-addon-selected span { width: 100%; min-width: 0; display: grid; gap: 3px; }
.source-addon-selected b,.source-addon-selected small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-addon-selected b { font-size: 11px; }
.source-addon-selected small { color: var(--muted); font-size: 8px; }
.source-addon-selected strong { color: var(--lime); font-size: 12px; white-space: nowrap; }

.wheel-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 50% 40%,rgba(139,92,255,.11),transparent 46%),#0c0f17; overflow: hidden; }
.wheel-panel::before { content: ''; position: absolute; width: 360px; height: 360px; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; }
.wheel-wrap { position: relative; width: min(315px,100%); aspect-ratio: 1; display: grid; place-items: center; }
.wheel-pointer { position: absolute; z-index: 6; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(255,255,255,.82),rgba(200,255,56,.96)) center 24px / 3px calc(50% - 24px) no-repeat; transform: rotate(0deg); transform-origin: 50% 50%; transition: transform 3.8s cubic-bezier(.08,.72,.08,1); filter: drop-shadow(0 0 8px rgba(200,255,56,.35)); }
.wheel-pointer::before { content: ''; position: absolute; top: -6px; left: 50%; width: 20px; height: 34px; transform: translateX(-50%); background: linear-gradient(180deg,#fff 0 18%,var(--lime) 19% 100%); clip-path: polygon(0 0,100% 0,50% 100%); filter: drop-shadow(0 0 10px rgba(200,255,56,.9)); }
.wheel-pointer::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%,-50%); border: 3px solid #0c0f17; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px rgba(200,255,56,.5); }
.wheel-orbit { position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.wheel-orbit span { --angle: calc(var(--i) * 30deg); position: absolute; top: 50%; left: 50%; width: 5px; height: 14px; border-radius: 4px; background: rgba(255,255,255,.17); transform: translate(-50%,-50%) rotate(var(--angle)) translateY(-144px); }
.chance-ring { --chance: 32.5; width: 250px; height: 250px; display: grid; place-items: center; padding: 13px; border-radius: 50%; background: conic-gradient(from 0deg,var(--lime) 0 calc(var(--chance)*1%),var(--violet) calc(var(--chance)*1%) 100%); box-shadow: 0 0 60px rgba(139,92,255,.12); transition: background .3s ease; }
.chance-ring::before { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: #0c0f17; }
.ring-core { z-index: 1; width: 184px; height: 184px; display: grid; place-content: center; justify-items: center; border: 1px solid var(--border); border-radius: 50%; background: radial-gradient(circle at 50% 25%,rgba(255,255,255,.045),transparent 55%),#11151f; box-shadow: inset 0 0 34px rgba(0,0,0,.35),0 18px 42px rgba(0,0,0,.28); }
.ring-core span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }
.ring-core strong { margin: 3px 0; font: 700 31px Unbounded,sans-serif; letter-spacing: -.06em; }
.ring-core small { color: var(--lime); font-weight: 800; }
.result-flash { position: absolute; z-index: 8; inset: 0; display: grid; place-items: center; visibility: hidden; border-radius: 50%; font: 700 28px Unbounded,sans-serif; letter-spacing: -.04em; opacity: 0; transform: scale(.7); }
.result-flash.show { visibility: visible; animation: resultPop 1.55s ease forwards; }
.result-flash.win { color: #08100a; background: rgba(200,255,56,.95); box-shadow: 0 0 80px rgba(200,255,56,.45); }
.result-flash.loss { color: #fff; background: rgba(139,92,255,.94); box-shadow: 0 0 80px rgba(139,92,255,.42); }
@keyframes resultPop { 12%,72%{ opacity:1; transform:scale(.83); } 100%{ opacity:0; transform:scale(1); } }
.multiplier-control { z-index: 1; width: min(350px,100%); margin: 10px 0 12px; padding: 12px 14px 10px; border: 1px solid var(--border); border-radius: 14px; background: rgba(16,19,29,.82); box-shadow: inset 0 1px rgba(255,255,255,.025),0 12px 32px rgba(0,0,0,.18); }
.multiplier-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.multiplier-head > span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.multiplier-head > div { display: flex; align-items: baseline; gap: 8px; }
.multiplier-head strong { color: #fff; font-size: 12px; }
.multiplier-head em { color: var(--lime); font-size: 14px; font-style: normal; font-weight: 900; }
.multiplier-range-wrap { display: block; padding: 7px 2px 4px; }
.multiplier-range-wrap input { --range-progress: 23.3%; width: 100%; height: 20px; margin: 0; border: 0; outline: none; background: transparent; cursor: ew-resize; appearance: none; }
.multiplier-range-wrap input::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg,var(--lime) 0 var(--range-progress),#303544 var(--range-progress) 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,.5),0 0 14px rgba(200,255,56,.08); }
.multiplier-range-wrap input::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; border: 3px solid #10131d; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--lime),0 0 20px rgba(200,255,56,.72); appearance: none; transition: transform .16s ease,box-shadow .16s ease; }
.multiplier-range-wrap input:hover::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 3px var(--lime),0 0 28px rgba(200,255,56,.85); }
.multiplier-range-wrap input::-moz-range-track { height: 6px; border-radius: 99px; background: #303544; }
.multiplier-range-wrap input::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--lime); }
.multiplier-range-wrap input::-moz-range-thumb { width: 15px; height: 15px; border: 3px solid #10131d; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--lime),0 0 20px rgba(200,255,56,.72); }
.multiplier-range-wrap input:disabled { cursor: not-allowed; opacity: .42; }
.multiplier-range-wrap input:disabled::-webkit-slider-thumb { transform: none; box-shadow: 0 0 0 2px #687080; }
.multiplier-range-wrap input:disabled::-moz-range-thumb { box-shadow: 0 0 0 2px #687080; }
.multiplier-scale { display: flex; align-items: flex-start; justify-content: space-between; }
.multiplier-scale span { display: grid; gap: 0; color: var(--muted); font-size: 8px; line-height: 1.1; }
.multiplier-scale span:nth-child(2) { text-align: center; }
.multiplier-scale span:last-child { text-align: right; }
.multiplier-scale b { color: #d9dce5; font-size: 9px; }
.multiplier-scale small { font-size: 7px; }
.spin-button { z-index: 1; width: min(270px,100%); height: 62px; color: #0a0c0f; background: var(--lime); box-shadow: 0 10px 40px rgba(200,255,56,.16); }
.spin-button span, .spin-button small { display: block; }
.spin-button span { font-family: Unbounded,sans-serif; }
.spin-button small { margin-top: 2px; font-size: 10px; opacity: .62; }
.spin-button:disabled { cursor: not-allowed; filter: grayscale(.6); opacity: .5; transform: none; }
.wheel-note { z-index: 1; min-height: 18px; margin: 8px 0 0; color: var(--muted); font-size: 10px; }

.selected-target { position: relative; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; margin-top: 18px; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: radial-gradient(circle at 50% 44%,var(--skin-glow,rgba(139,92,255,.16)),transparent 49%),#0d1018; overflow: hidden; }
.selected-target::before { content: ''; position: absolute; inset: 0; opacity: .18; background: repeating-linear-gradient(120deg,transparent 0 18px,rgba(255,255,255,.02) 18px 19px); }
.selected-target img { z-index: 1; width: 94%; height: 170px; object-fit: contain; filter: drop-shadow(0 22px 16px rgba(0,0,0,.5)); transition: transform .25s ease; }
.selected-target:hover img { transform: scale(1.04) rotate(-1deg); }
.selected-target .rarity-tag { z-index: 1; position: absolute; top: 14px; left: 14px; }
.selected-target .wear-tag { z-index: 1; position: absolute; top: 14px; right: 14px; }
.selected-target h3 { z-index: 1; width: 100%; margin: 8px 0 0; font-size: 14px; }
.selected-target p { z-index: 1; width: 100%; margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.target-empty { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--muted); text-align: center; }
.target-empty i { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 6px; color: var(--lime); border: 1px solid rgba(200,255,56,.32); border-radius: 17px; background: rgba(200,255,56,.055); box-shadow: 0 0 24px rgba(200,255,56,.08); font-style: normal; font-size: 30px; }
.target-empty b { color: #fff; font-size: 14px; }
.target-empty small { font-size: 10px; }
.rarity-tag, .wear-tag { padding: 3px 7px; border: 1px solid var(--border-bright); border-radius: 6px; background: rgba(8,10,17,.6); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.target-price-line { display: flex; align-items: center; justify-content: space-between; margin: 13px 0; font-size: 12px; }
.target-price-line span { color: var(--muted); }
.target-price-line strong { font-size: 16px; }
.target-panel > .selected-target { cursor: pointer; transition: border-color .22s ease,box-shadow .22s ease,transform .22s ease; }
.target-panel > .selected-target:hover,.target-panel > .selected-target:focus-visible { border-color: rgba(200,255,56,.4); box-shadow: 0 0 0 1px rgba(200,255,56,.06),0 0 30px rgba(200,255,56,.08); transform: none; }
.target-presets { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); }
.target-presets-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.target-presets-head > span { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.target-presets-head output { color: var(--lime); font-size: 11px; font-weight: 850; }
.target-preset-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.target-preset-grid button { min-height: 39px; color: #b9becb; border: 1px solid var(--border-bright); border-radius: 10px; background: #171b25; cursor: pointer; font-size: 11px; font-weight: 850; }
.target-preset-grid button:hover,.target-preset-grid button.active { color: #fff; border-color: var(--lime); background: #171b25; box-shadow: 0 0 13px rgba(200,255,56,.14); }
.target-preset-grid button:disabled { opacity: .35; cursor: not-allowed; }

body.target-picker-open { overflow: hidden; }
.target-picker-view { position: fixed; z-index: 70; inset: 0; visibility: hidden; display: grid; place-items: center; padding: 22px; background: rgba(5,7,12,.9); opacity: 0; pointer-events: none; transition: opacity .22s ease,visibility .22s; backdrop-filter: blur(14px); }
.target-picker-view.open { visibility: visible; opacity: 1; pointer-events: auto; }
.target-picker-shell { position: relative; width: min(1040px,100%); max-height: calc(100dvh - 44px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: linear-gradient(rgba(13,16,24,.9),rgba(13,16,24,.97)),url('./assets/picker-texture.svg') center/cover; box-shadow: 0 34px 110px rgba(0,0,0,.7),0 0 42px rgba(139,92,255,.08); transform: translateY(16px) scale(.985); transition: transform .25s cubic-bezier(.2,.75,.25,1); }
.target-picker-view.open .target-picker-shell { transform: none; }
.target-picker-header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 12px; padding: 20px 22px 15px; }
.target-picker-mark { display: block; width: 42px; height: 42px; border-radius: 12px; background: url('./assets/voltup-mark-v2.svg') center/cover no-repeat; box-shadow: 0 0 18px rgba(200,255,56,.18); }
.target-picker-header > div { min-width: 0; }
.target-picker-header > div > span { display: block; color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.target-picker-header h2 { margin-top: 2px; font-size: 24px; text-transform: uppercase; }
.target-picker-header > button { width: 42px; height: 42px; color: #aeb4c2; border: 1px solid var(--border-bright); border-radius: 12px; background: #1b202c; cursor: pointer; font-size: 25px; line-height: 1; }
.target-picker-filters { display: grid; grid-template-columns: minmax(240px,1.6fr) minmax(180px,1fr) 124px 124px; gap: 9px; padding: 0 22px 14px; }
.target-picker-filters label,.target-picker-sort { min-width: 0; height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--border-bright); border-radius: 11px; background: rgba(24,28,38,.94); }
.target-picker-search svg { width: 20px; flex: 0 0 20px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.target-picker-filters input,.target-picker-filters select { width: 100%; color: #fff; border: 0; outline: 0; background: transparent; font-size: 14px; }
.target-picker-filters input::placeholder { color: #747b8e; }
.target-picker-sort { position:relative; z-index:12; padding:0; transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease; }
.target-picker-sort.open { border-color:rgba(200,255,56,.48); background:#181d28; box-shadow:0 0 0 3px rgba(200,255,56,.055),0 12px 30px rgba(0,0,0,.22); }
.target-sort-trigger { width:100%; height:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 12px; color:#eef1f7; border:0; background:transparent; cursor:pointer; font:inherit; font-size:14px; font-weight:750; text-align:left; }
.target-sort-trigger span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.target-sort-trigger svg { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:#a4abb9; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease,stroke .2s ease; }
.target-picker-sort.open .target-sort-trigger svg { stroke:var(--lime); transform:rotate(180deg); }
.native-sort-select { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; opacity:0; pointer-events:none; }
.target-sort-menu { position:absolute; z-index:20; top:calc(100% + 7px); right:-1px; left:-1px; display:grid; gap:4px; visibility:hidden; padding:6px; border:1px solid rgba(200,255,56,.2); border-radius:12px; background:linear-gradient(145deg,rgba(29,34,47,.99),rgba(14,17,25,.99)); box-shadow:0 20px 48px rgba(0,0,0,.58),0 0 24px rgba(200,255,56,.055); opacity:0; pointer-events:none; transform:translateY(-8px) scale(.98); transform-origin:top center; transition:opacity .2s ease,transform .2s cubic-bezier(.2,.75,.25,1),visibility 0s linear .2s; }
.target-picker-sort.open .target-sort-menu { visibility:visible; opacity:1; pointer-events:auto; transform:none; transition-delay:0s; }
.target-sort-menu button { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 10px; color:#b5bbc8; border:1px solid transparent; border-radius:8px; background:transparent; cursor:pointer; font-size:12px; font-weight:750; text-align:left; transition:color .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease; }
.target-sort-menu button:hover,.target-sort-menu button:focus-visible { color:#fff; border-color:rgba(200,255,56,.18); outline:0; background:rgba(200,255,56,.055); box-shadow:inset 0 0 12px rgba(200,255,56,.025); }
.target-sort-menu button i { color:var(--lime); font-style:normal; opacity:0; transform:scale(.72); transition:opacity .16s ease,transform .16s ease; }
.target-sort-menu button.selected { color:#fff; background:rgba(200,255,56,.075); }
.target-sort-menu button.selected i { opacity:1; transform:none; }
.target-picker-price b { display: block; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 7px; background: url('./assets/voltup-mark-v2.svg') center/cover no-repeat; font-size: 0; }
.target-kind-filters { display:flex; gap:7px; padding:0 22px 13px; overflow-x:auto; scrollbar-width:none; }
.target-kind-filters::-webkit-scrollbar { display:none; }
.target-kind-filters button { min-width:max-content; min-height:36px; padding:0 15px; color:#9198aa; border:1px solid var(--border); border-radius:10px; background:rgba(20,24,34,.72); cursor:pointer; font-size:12px; font-weight:800; }
.target-kind-filters button:hover { color:#fff; border-color:rgba(200,255,56,.24); box-shadow:inset 0 0 0 1px rgba(200,255,56,.04),0 0 18px rgba(200,255,56,.06); }
.target-kind-filters button.active { color:#0b0e11; border-color:var(--lime); background:var(--lime); box-shadow:0 0 18px rgba(200,255,56,.16); }
.target-picker-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px 11px; color: var(--muted); font-size: 12px; }
.target-picker-summary button { color: var(--lime); border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 800; }
.target-picker-grid { min-height: 0; flex: 1 1 auto; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; padding: 0 22px 22px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(200,255,56,.42) transparent; }
.target-picker-more { flex:0 0 auto; min-height:42px; margin:0 22px 18px; color:#e8ecf4; border:1px solid rgba(200,255,56,.25); border-radius:11px; background:rgba(200,255,56,.055); cursor:pointer; font-size:12px; font-weight:850; }
.target-picker-more:hover { color:#fff; border-color:rgba(200,255,56,.46); box-shadow:inset 0 0 0 1px rgba(200,255,56,.05),0 0 20px rgba(200,255,56,.08); }
.target-skin-option { position: relative; min-height: 184px; display: grid; grid-template-rows: 104px auto auto; gap: 3px; padding: 10px; color: #fff; border: 1px solid var(--border); border-radius: 12px; background: radial-gradient(circle at 50% 32%,color-mix(in srgb,var(--rarity) 18%,transparent),transparent 48%),rgba(15,18,27,.92); cursor: pointer; text-align: left; overflow: hidden; }
.target-skin-option:hover,.target-skin-option.selected { border-color: var(--rarity); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--rarity) 30%,transparent),0 0 18px color-mix(in srgb,var(--rarity) 17%,transparent); }
.target-skin-option img { width: 100%; height: 104px; object-fit: contain; filter: drop-shadow(0 0 15px var(--rarity)) drop-shadow(0 9px 10px rgba(0,0,0,.48)); }
.target-skin-option span { min-width: 0; display: grid; align-content: end; }
.target-skin-option b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.target-skin-option small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.target-skin-option em { align-self: end; color: var(--lime); font-size: 13px; font-style: normal; font-weight: 850; text-align: center; }
.target-picker-empty { grid-column: 1/-1; min-height: 220px; display: grid; place-content: center; color: var(--muted); text-align: center; }
.fairness-row { display: grid; grid-template-columns: repeat(3,auto); justify-content: center; gap: 42px; padding: 18px; color: var(--muted); font-size: 11px; }
.fairness-row i { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 7px; color: #09110b; border-radius: 50%; background: rgba(200,255,56,.78); font-style: normal; font-size: 9px; }

.catalog-section { padding-bottom: 22px; }
.catalog-header { display: grid; grid-template-columns: minmax(200px,1fr) minmax(230px,.7fr) auto auto; align-items: end; gap: 16px; margin-bottom: 18px; }
.search-box { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.search-box svg { color: var(--muted); }
.search-box input { min-width: 0; width: 100%; color: #fff; border: 0; outline: 0; background: transparent; font-size: 13px; }
.search-box input::placeholder { color: #686e7e; }
.filter-pills { display: flex; gap: 5px; padding: 4px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.filter-pills button { height: 36px; padding: 0 11px; color: var(--muted); border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }
.filter-pills button.active { color: #fff; background: var(--surface-3); }
.sort-select { display: grid; gap: 4px; }
.sort-select span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.sort-select select { height: 42px; padding: 0 34px 0 12px; color: #fff; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); font-size: 11px; }
.skin-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.skin-card { --rarity:#8b5cff; position: relative; min-height: 228px; display: flex; flex-direction: column; padding: 11px; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(160deg,rgba(255,255,255,.025),transparent 48%),var(--surface); overflow: hidden; cursor: pointer; transition: transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.skin-card::before { content: ''; position: absolute; inset: -35% -20% 35%; width: auto; background: radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--rarity),transparent 54%),color-mix(in srgb,var(--rarity),transparent 82%) 38%,transparent 70%); opacity: .78; pointer-events: none; filter: blur(8px); transition: opacity .2s ease,transform .25s ease; }
.skin-card:hover, .skin-card.selected { transform: translateY(-4px); border-color: color-mix(in srgb,var(--rarity),transparent 68%); background: linear-gradient(160deg,color-mix(in srgb,var(--rarity),transparent 93%),transparent 45%),var(--surface-2); box-shadow: 0 16px 34px rgba(0,0,0,.28),0 0 28px color-mix(in srgb,var(--rarity),transparent 87%); }
.skin-card:hover::before { opacity: 1; transform: scale(1.08); }
.skin-card.selected::after { content: '✓'; position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 22px; height: 22px; color: #09100a; border-radius: 50%; background: var(--lime); font-size: 10px; font-weight: 900; }
.skin-img-wrap { position: relative; z-index: 1; height: 110px; display: grid; place-items: center; padding: 7px; border-radius: 11px; background: transparent; }
.skin-card img { width: 100%; height: 100px; object-fit: contain; filter: drop-shadow(0 0 16px color-mix(in srgb,var(--rarity),transparent 35%)) drop-shadow(0 13px 9px rgba(0,0,0,.55)); transition: transform .2s ease,filter .2s ease; }
.skin-card:hover img { transform: scale(1.07) rotate(-1deg); }
.skin-card .meta { position: relative; z-index: 1; display: flex; justify-content: space-between; margin: 7px 0 2px; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.skin-card h3 { position: relative; z-index: 1; min-height: 32px; margin: 0; font-size: 11px; line-height: 1.35; }
.skin-card .skin-footer { position: relative; z-index: 1; display: grid; place-items: center; gap: 2px; margin-top: auto; padding-top: 7px; text-align: center; }
.skin-card .skin-footer > div:first-child { text-align: center; }
.skin-card .skin-footer span { color: var(--muted); font-size: 9px; }
.skin-card .skin-footer strong { font-size: 13px; }
.skin-card .chance-small { position: absolute; z-index:2; top:38px; right:9px; padding:4px 6px; color: var(--lime); border:1px solid rgba(200,255,56,.13); border-radius:7px; background:rgba(8,10,17,.58); text-align:right; backdrop-filter:blur(5px); }
.skin-card .chance-small b { display: block; font-size: 12px; }
.skin-card .chance-small small { font-size: 8px; }
.load-more { display: block; min-width: 190px; height: 46px; margin: 18px auto 0; color: #d9dce5; border: 1px solid var(--border-bright); border-radius: 13px; background: transparent; cursor: pointer; font-weight: 800; }
.load-more span { color: var(--lime); margin-left: 7px; }

.inventory-section, .history-section { padding-bottom: 36px; }
.inventory-actions { display: flex; align-items: center; gap: 13px; }
.inventory-actions span { color: var(--muted); font-size: 12px; }
.inventory-actions .button { min-height: 40px; font-size: 11px; }
.inventory-grid, .modal-inventory-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.inventory-item { position: relative; min-height: 178px; padding: 11px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); overflow: hidden; }
.inventory-item::before { content: ''; position:absolute; inset:-35% -22% 38%; background:radial-gradient(circle,color-mix(in srgb,var(--rarity),transparent 55%),transparent 68%); filter:blur(7px); opacity:.78; pointer-events:none; }
.inventory-item > * { position: relative; z-index: 1; }
.inventory-item img { width: 100%; height: 96px; object-fit: contain; filter: drop-shadow(0 0 15px color-mix(in srgb,var(--rarity),transparent 40%)) drop-shadow(0 12px 8px rgba(0,0,0,.5)); }
.inventory-item h3 { margin: 4px 0 0; font-size: 11px; }
.inventory-item .inventory-bottom { position:relative; display:flex; align-items:center; justify-content:center; min-height:24px; margin-top:6px; text-align:center; }
.inventory-item .inventory-bottom button { position:absolute; right:0; }
.inventory-item strong { font-size:12px; }
.inventory-item button { color:var(--lime); border:0; background:none; cursor:pointer; font-size:10px; font-weight:800; }
.empty-state { grid-column:1/-1; display:grid; place-content:center; justify-items:center; min-height:200px; color:var(--muted); border:1px solid var(--border); border-radius:18px; text-align:center; }
.empty-state span { font-size:32px; opacity:.5; }
.empty-state p { margin:7px 0 0; font-size:13px; }

.history-list { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; }
.history-row { display: grid; grid-template-columns: 78px 42px 1fr auto auto; align-items: center; gap: 14px; min-height: 72px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.history-row:last-child { border-bottom:0; }
.history-row time { color:var(--muted); font-size:10px; }
.history-thumb,.profile-history-thumb { position:relative; width:42px; height:30px; display:grid; place-items:center; border-radius:8px; background:radial-gradient(circle,color-mix(in srgb,var(--rarity),transparent 72%),transparent 72%); overflow:visible; }
.history-thumb img,.profile-history-thumb img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--rarity),transparent 38%)); }
.history-item-name b,.history-item-name small { display:block; }
.history-item-name b { font-size:12px; }
.history-wear { color:#9298a7; font-size:.78em; font-style:normal; font-weight:800; white-space:nowrap; }
.history-item-name small { color:var(--muted); font-size:9px; }
.history-chance { color:var(--muted); font-size:11px; }
.history-status { min-width:78px; padding:5px 8px; border-radius:8px; text-align:center; font-size:9px; font-weight:900; letter-spacing:.08em; }
.history-status.win { color:var(--lime); background:rgba(200,255,56,.08); }
.history-status.loss { color:var(--red); background:rgba(255,84,112,.08); }

footer { width:min(1440px,calc(100% - 48px)); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px; margin:30px auto 0; padding:32px 0 40px; color:var(--muted); border-top:1px solid var(--border); }
footer p { max-width:780px; margin:0; font-size:10px; }
footer p a { color:#c4aaff; text-decoration:none; }
footer p a:hover { color:#fff; }
footer > div { display:flex; gap:14px; }
footer button { color:var(--muted); border:0; background:none; cursor:pointer; font-size:10px; }
footer button:hover { color:#fff; }
.footer-brand .brand-mark { width:26px; height:28px; transform:scale(.88); }
.footer-brand .brand-name { font-size:14px; }

.modal { width:100%; height:100%; max-width:none; max-height:none; padding:0; border:0; background:rgba(3,4,8,.72); backdrop-filter:blur(9px); }
.modal::backdrop { background:rgba(3,4,8,.72); }
.modal[open] { display:grid; place-items:center; animation:fadeIn .18s ease; }
.modal-card { width:min(560px,calc(100% - 28px)); min-width:0; max-height:90vh; padding:26px; color:var(--text); border:1px solid var(--border-bright); border-radius:22px; background:#11141e; box-shadow:0 30px 100px #000; overflow:auto; }
.modal-card > *,.modal-head > div,.notice-card p,.payment-grid { min-width:0; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.modal-head h2 { font-size:24px; }
.modal-close { width:38px; height:38px; color:var(--muted); border:1px solid var(--border); border-radius:10px; background:#1a1e2a; cursor:pointer; font-size:24px; }
.notice-card { display:flex; gap:11px; padding:12px; margin-bottom:19px; border:1px solid rgba(48,228,255,.14); border-radius:12px; background:rgba(48,228,255,.055); }
.notice-card span { flex:0 0 22px; height:22px; display:grid; place-items:center; color:#081015; border-radius:50%; background:var(--cyan); font-size:11px; font-weight:900; }
.notice-card p { margin:0; color:#b8becd; font-size:11px; }
.deposit-label { margin:14px 0 7px; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.payment-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.payment-grid button { min-width:0; min-height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px; border:1px solid var(--border); border-radius:13px; background:#171b26; cursor:pointer; overflow:hidden; }
.payment-grid button.active { border-color:rgba(200,255,56,.5); background:rgba(200,255,56,.06); box-shadow:inset 0 0 0 1px rgba(200,255,56,.13); }
.pay-icon { width:58px; height:29px; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--lime); font-size:19px; }
.pay-icon img { display:block; width:auto; max-width:54px; height:24px; object-fit:contain; }
.pay-icon-sbp img { width:52px; height:27px; }
.pay-card-logos img { max-width:25px; max-height:18px; }
.payment-grid b { font-size:11px; }
.payment-grid small { color:var(--muted); font-size:8px; }
.deposit-input { position:relative; display:block; }
.deposit-input span { position:absolute; left:16px; top:13px; color:var(--muted); }
.deposit-input input { width:100%; height:52px; padding:0 16px 0 42px; color:#fff; border:1px solid rgba(200,255,56,.25); border-radius:12px; background:#0c0f17; font-size:20px; font-weight:800; }
.deposit-presets { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:8px; }
.deposit-presets button { min-height:35px; color:var(--muted); border:1px solid var(--border); border-radius:9px; background:transparent; cursor:pointer; font-size:10px; font-weight:800; }
.deposit-presets button.active { color:#fff; border-color:rgba(200,255,56,.35); background:rgba(200,255,56,.06); }
.promo-line { width:100%; display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:8px; margin-top:15px; }
.promo-line label { min-width:0; height:44px; display:flex; align-items:center; padding:0 12px; border:1px solid var(--border); border-radius:11px; background:#0d1018; overflow:hidden; transition:border-color .2s ease,box-shadow .2s ease; }
.promo-line label:focus-within { border-color:rgba(200,255,56,.5); box-shadow:0 0 0 3px rgba(200,255,56,.06); }
.promo-line input { width:100%; min-width:0; color:#fff; border:0; outline:0; background:transparent; text-align:left; font-size:12px; font-weight:800; }
.promo-line input::placeholder { color:var(--muted); font-weight:600; }
.promo-line input:focus::placeholder { color:transparent; }
.promo-line button { width:112px; padding:0 9px; color:var(--lime); border:1px solid var(--border); border-radius:11px; background:#1a1e2a; cursor:pointer; font-size:10px; font-weight:800; }
.deposit-summary { display:flex; align-items:center; justify-content:space-between; margin:16px 0 10px; padding:13px 0; border-top:1px solid var(--border); }
.deposit-summary span { color:var(--muted); font-size:11px; }
.deposit-summary strong { font-size:18px; }
.deposit-submit { height:54px; }
.modal-footnote { margin:9px 0 0; color:#626879; text-align:center; font-size:8px; }
.info-modal ol { display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:steps; }
.info-modal li { position:relative; min-height:58px; padding:10px 10px 10px 54px; border:1px solid var(--border); border-radius:12px; counter-increment:steps; }
.info-modal li::before { content:counter(steps); position:absolute; left:12px; top:11px; width:30px; height:30px; display:grid; place-items:center; color:#0c0f12; border-radius:9px; background:var(--lime); font-weight:900; }
.info-modal li b,.info-modal li span { display:block; }
.info-modal li b { font-size:12px; }
.info-modal li span { color:var(--muted); font-size:10px; }
.formula { margin:15px 0; padding:14px; color:var(--muted); border:1px solid var(--border-bright); border-radius:12px; text-align:center; font-size:11px; }
.formula strong { color:var(--lime); }
.inventory-modal-card { width:min(760px,calc(100% - 28px)); }
.modal-inventory-grid { grid-template-columns:repeat(3,1fr); max-height:55vh; overflow:auto; }
.modal-inventory-grid .inventory-item { cursor:pointer; }

.toast-region { position:fixed; z-index:80; right:18px; bottom:18px; display:grid; gap:8px; }
.toast { min-width:260px; max-width:360px; padding:13px 15px; border:1px solid var(--border-bright); border-left:3px solid var(--lime); border-radius:11px; background:#181c27; box-shadow:0 18px 50px rgba(0,0,0,.38); animation:toastIn .25s ease; font-size:11px; }
.toast.error { border-left-color:var(--red); }
.toast b,.toast span { display:block; }
.toast span { margin-top:2px; color:var(--muted); font-size:9px; }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } }
@keyframes fadeIn { from { opacity:0; } }
.confetti { position:fixed; z-index:75; inset:0; pointer-events:none; overflow:hidden; }
.confetti i { position:absolute; top:-20px; width:7px; height:13px; background:var(--c); animation:confettiFall var(--d) ease-out forwards; }
@keyframes confettiFall { to { transform:translate(var(--x),105vh) rotate(720deg); opacity:0; } }

@media (max-width: 1180px) {
  .main-nav { display:none; position:absolute; top:76px; left:16px; right:16px; padding:12px; border:1px solid var(--border); border-radius:14px; background:#11141e; box-shadow:var(--shadow); }
  .main-nav.open { display:grid; }
  .mobile-menu { display:block; grid-column:3; }
  .site-header { grid-template-columns:auto 1fr auto; padding:0 22px; }
  .header-actions { justify-self:end; }
  .online,.icon-button,.profile-button { display:none; }
  .skin-grid { grid-template-columns:repeat(4,1fr); }
  .catalog-header { grid-template-columns:1fr 1fr; }
  .catalog-header > div:first-child { grid-column:1/-1; }
  .inventory-grid { grid-template-columns:repeat(4,1fr); }
}

@media (max-width: 900px) {
  main { width:min(100% - 28px,760px); }
  .upgrade-workspace { grid-template-columns:1fr 1fr; }
  .wheel-panel { grid-column:1/-1; grid-row:1; min-height:490px; border-bottom:1px solid var(--border); }
  .source-panel { grid-column:1; grid-row:2; }
  .target-panel { grid-column:2; grid-row:2; }
  .fairness-row { gap:13px; }
  .skin-grid { grid-template-columns:repeat(3,1fr); }
  .inventory-grid { grid-template-columns:repeat(3,1fr); }
  footer { width:calc(100% - 28px); grid-template-columns:1fr; }
}

@media (max-width: 640px) {
  .site-header { min-height:66px; padding:0 14px; gap:10px; }
  .brand-name { font-size:17px; }
  .brand-mark { width:28px; height:30px; }
  .main-nav { top:68px; }
  .header-actions { gap:6px; }
  .balance-box { min-width:auto; padding:4px 7px; }
  .balance-box span { display:none; }
  .balance-box strong { font-size:12px; }
  .header-deposit { min-height:38px; padding:0 11px; font-size:11px; }
  .live-strip { height:61px; }
  .live-title { flex-basis:70px; }
  .live-item { min-width:176px; grid-template-columns:42px auto; padding:6px 10px; }
  .live-item img { width:38px; height:38px; }
  main { width:calc(100% - 20px); }
  .upgrade-section,.catalog-section,.inventory-section,.history-section { padding-top:36px; scroll-margin-top:76px; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .upgrade-workspace { display:flex; flex-direction:column; border-radius:20px; }
  .wheel-panel { order:1; min-height:430px; padding:20px 12px; }
  .source-panel { order:2; border-right:0; border-bottom:1px solid var(--border); }
  .target-panel { order:3; border-left:0; }
  .item-panel { padding:20px; }
  .wheel-wrap { width:280px; }
  .chance-ring { width:224px; height:224px; }
  .chance-ring::before { width:197px; height:197px; }
  .ring-core { width:166px; height:166px; }
  .wheel-orbit span { transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-126px); }
  .fairness-row { grid-template-columns:1fr; padding-left:24px; }
  .catalog-header { grid-template-columns:1fr; align-items:stretch; }
  .catalog-header > div:first-child { grid-column:auto; }
  .filter-pills { overflow-x:auto; }
  .filter-pills button { flex:0 0 auto; }
  .sort-select { display:none; }
  .skin-grid { grid-template-columns:repeat(2,1fr); gap:7px; }
  .skin-card { min-height:206px; padding:9px; }
  .skin-img-wrap { height:94px; }
  .skin-card img { height:88px; }
  .skin-card h3 { font-size:11px; }
  .section-heading.compact { flex-direction:row; align-items:center; }
  .inventory-actions { align-items:flex-end; flex-direction:column; }
  .inventory-actions span { font-size:9px; }
  .inventory-grid { grid-template-columns:repeat(2,1fr); }
  .history-row { grid-template-columns:42px 30px minmax(0,1fr) auto; gap:7px; padding:9px; }
  .history-thumb { width:30px; height:22px; }
  .history-chance { display:none; }
  .payment-grid,.deposit-presets { grid-template-columns:repeat(2,1fr); }
  .modal-card { width:calc(100% - 16px); padding:16px; border-radius:18px; }
  .modal-head { gap:10px; margin-bottom:15px; }
  .modal-head h2 { font-size:20px; }
  .payment-grid button { min-height:86px; padding:7px 5px; }
  .promo-line { grid-template-columns:minmax(0,1fr) 104px; gap:6px; }
  .promo-line button { width:104px; padding:0 6px; }
  .deposit-summary { gap:12px; }
  .deposit-summary strong { font-size:16px; white-space:nowrap; }
  .deposit-submit { padding:0 12px; font-size:15px; }
  .modal-inventory-grid { grid-template-columns:repeat(2,1fr); }
  .toast-region { left:12px; right:12px; bottom:12px; }
  .toast { min-width:0; max-width:none; }
}

/* Reference-led multi-view layout */
.site-header {
  min-height: 72px;
  grid-template-columns: auto auto 1fr auto;
  gap: 24px;
  padding: 0 26px;
  background: rgba(11,13,19,.96);
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}
.site-header > .brand { transition: transform .25s ease, filter .25s ease; }
.site-header > .brand:hover { transform: translateY(-2px); filter: drop-shadow(0 0 12px rgba(200,255,56,.25)); }
.main-nav { justify-self: start; }
.main-nav a,.main-nav .nav-button { transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.main-nav a:hover,.main-nav .nav-button:hover { transform: none; }
.header-metrics { justify-self: end; display: flex; align-items: center; gap: 22px; }
.header-metrics .online,.upgrade-count { display: flex; align-items: center; gap: 8px; padding: 0; }
.header-metrics svg { width: 23px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.header-metrics span > span { min-width: 72px; display: grid; grid-template-rows: 12px 18px; align-content: center; line-height: 1; }
.header-metrics em { height: 12px; color: var(--muted); font-size: 10px; font-style: normal; line-height: 12px; }
.header-metrics b { min-width: 64px; margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 18px; }
.mini-mark { display: block; width: 23px; height: 23px; border-radius: 7px; background: url('./assets/voltup-mark-v2.svg') center/cover no-repeat; box-shadow: 0 0 14px rgba(200,255,56,.16); }
.brand-tab-icon { display: block; width: 20px; height: 20px; border-radius: 6px; background: url('./assets/voltup-logo-neon.png') center/cover no-repeat; box-shadow: 0 0 12px rgba(200,255,56,.14); }
.mobile-tabs a[data-page-link="upgrade"].active .brand-tab-icon { background-image: url('./assets/voltup-tab-active.webp'); box-shadow: none; }
.header-actions { gap: 8px; }
.balance-box { min-width: 160px; height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 12px; color: #fff; border: 1px solid rgba(200,255,56,.22); border-radius: 13px; background: #151821; cursor: pointer; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.balance-box:hover { transform: translateY(-2px); border-color: rgba(200,255,56,.55); box-shadow: 0 10px 28px rgba(200,255,56,.09); }
.balance-box span.balance-coin { display: block; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 7px; background: url('./assets/voltup-mark-v2.svg') center/cover no-repeat; box-shadow: 0 0 12px rgba(200,255,56,.13); }
.balance-box strong { flex: 1; font-size: 13px; white-space: nowrap; }
.balance-box svg { width: 17px; fill: none; stroke: var(--lime); stroke-width: 1.8; }
.deposit-icon,.notification-button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 13px; cursor: pointer; transition: transform .22s ease, filter .22s ease, box-shadow .22s ease, border-color .22s ease; }
.deposit-icon { color: #0a0c0f; border-color: var(--lime); background: var(--lime); box-shadow: 0 8px 24px rgba(200,255,56,.14); }
.deposit-icon svg,.notification-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.deposit-icon:hover { transform: translateY(-3px) rotate(3deg); filter: brightness(1.1); box-shadow: 0 13px 30px rgba(200,255,56,.24); }
.notification-button { position: relative; }
.notification-button:hover,.profile-button:hover { transform: translateY(-3px) scale(1.03); border-color: var(--border-bright); }
.notification-button i { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border: 1px solid #151926; border-radius: 50%; background: var(--red); }
.profile-button { display: grid; place-items: center; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.profile-button:hover { box-shadow: 0 10px 26px rgba(139,92,255,.23); }
.mobile-tabs { display: none; }

.app-page { display: none; min-height: 68vh; }
.app-page.is-active { display: block; animation: pageEnter .42s cubic-bezier(.2,.75,.25,1) both; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(12px) scale(.995); } to { opacity: 1; transform: none; } }
.upgrade-section { position: relative; isolation: isolate; padding-top: 14px; }
.upgrade-section::before { content: ''; position: absolute; z-index: -1; inset: 0 -8vw -34px; background: linear-gradient(180deg,rgba(7,9,17,.18),rgba(7,9,17,.78)),url('./assets/upgrade-stage-v2.svg') center top/cover no-repeat; opacity: .58; pointer-events: none; mask-image: linear-gradient(to bottom,#000 0 78%,transparent 100%); }
.stage-title { display: flex; justify-content: center; padding: 0 0 10px; }
.stage-title h1 { display: inline-flex; align-items: center; gap: 13px; font-size: 25px; }
.stage-title .brand-mark { width: 36px; height: 38px; }
.upgrade-control-row { display: flex; align-items: center; justify-content: flex-start; gap: 18px; margin-bottom: 10px; }
.stage-tools { display: flex; align-items: center; gap: 7px; }
.stage-tools button { width: 34px; height: 34px; display: grid; place-items: center; color: #a4a9b5; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-size: 20px; font-weight: 900; transition: color .2s ease, background .2s ease, transform .22s ease, text-shadow .22s ease; }
.stage-tools button:hover { color: var(--lime); background: rgba(200,255,56,.07); transform: translateY(-3px) scale(1.08); text-shadow: 0 0 14px rgba(200,255,56,.6); }
.stage-tools svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stage-tools #quickBoost { color: var(--lime); font-size: 25px; }
.stage-tools #quickBoost:hover { transform: translateY(-3px) rotate(9deg) scale(1.1); }
.stage-tools #soundToggle.muted { color: #626978; }
.source-tools { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.source-tools button { width: 100%; height: 68px; color: #fff; border: 1px solid rgba(200,255,56,.22); border-radius: 15px; background: #171b26; box-shadow: inset 0 0 18px rgba(200,255,56,.018); font-size: 23px; }
.source-tools button:hover { border-color: var(--lime); background: rgba(200,255,56,.08); box-shadow: 0 0 18px rgba(200,255,56,.12); }

.upgrade-workspace { grid-template-columns: minmax(250px,1fr) minmax(350px,1.12fr) minmax(250px,1fr); align-items: stretch; gap: 14px; min-height: 520px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.item-panel { min-width: 0; border: 1px solid var(--border); border-radius: 19px; background: radial-gradient(circle at 50% 52%,rgba(200,255,56,.055),transparent 48%),linear-gradient(155deg,rgba(255,255,255,.025),transparent 48%),#11141d; box-shadow: 0 18px 55px rgba(0,0,0,.24); transition: transform .3s cubic-bezier(.2,.75,.25,1), border-color .3s ease, box-shadow .3s ease; }
.item-panel:hover { transform: translateY(-5px); border-color: rgba(200,255,56,.19); box-shadow: 0 25px 65px rgba(0,0,0,.34),0 0 35px rgba(200,255,56,.035); }
.source-panel { grid-column: 1; height: 100%; border-right: 1px solid var(--border); }
.target-panel { grid-column: 3; height: 100%; border-left: 1px solid var(--border); }
.wheel-panel { grid-column: 2; grid-row: 1; height: 100%; min-height: 520px; border: 1px solid rgba(255,255,255,.035); border-radius: 20px; background: radial-gradient(circle at 50% 45%,rgba(139,92,255,.105),transparent 55%),rgba(12,15,23,.38); }
.wheel-panel::before { display: none; }
.wheel-panel:hover .chance-ring { transform: scale(1.015); box-shadow: 0 0 72px rgba(139,92,255,.17); }
.chance-ring { transition: background .3s ease, transform .3s ease, box-shadow .3s ease; }
.wheel-pointer { inset: 0; background: none; transform: rotate(180deg); filter: drop-shadow(0 0 8px rgba(200,255,56,.7)); }
.wheel-pointer::before { top: -2px; width: 12px; height: 28px; background: linear-gradient(180deg,#fff 0 10%,var(--lime) 11% 100%); clip-path: polygon(0 0,100% 0,62% 62%,50% 100%,38% 62%); }
.wheel-pointer::after { display: none; }
.spin-button { position: relative; overflow: hidden; width: min(306px,100%); margin-top: 20px; background: linear-gradient(135deg,var(--lime),#f0ff78); transition: transform .22s ease, filter .22s ease, box-shadow .22s ease; }
.spin-button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg,transparent 25%,rgba(255,255,255,.55) 48%,transparent 70%); transform: translateX(-130%); transition: transform .55s ease; }
.spin-button:hover:not(:disabled) { transform: translateY(-4px) scale(1.015); box-shadow: 0 0 28px rgba(200,255,56,.38),0 16px 40px rgba(0,0,0,.25); }
.spin-button:hover:not(:disabled)::after { transform: translateX(130%); }
.small-link,.filter-pills button,.load-more,.inventory-item button,.promo-line button,.payment-grid button,.deposit-presets button,.modal-close { transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.small-link:hover,.inventory-item button:hover { transform: translateY(-2px); text-shadow: 0 0 12px rgba(200,255,56,.45); }
.filter-pills button:hover,.load-more:hover,.promo-line button:hover,.deposit-presets button:hover { transform: translateY(-2px); border-color: rgba(200,255,56,.38); background: rgba(200,255,56,.06); }
.payment-grid button:hover { transform: translateY(-4px); border-color: rgba(200,255,56,.3); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
button:hover,.button:hover,.spin-button:hover:not(:disabled),.balance-box:hover,.deposit-icon:hover,.notification-button:hover,.profile-button:hover,.stage-tools button:hover,.stage-tools #quickBoost:hover,.small-link:hover,.inventory-item button:hover,.filter-pills button:hover,.load-more:hover,.promo-line button:hover,.deposit-presets button:hover,.payment-grid button:hover,.modal-close:hover,.profile-close:hover,.target-preset-grid button:hover,.target-skin-option:hover { transform: none !important; }
.inventory-section.app-page,.history-section.app-page { padding-top: 64px; }
.inventory-section.app-page .section-heading,.history-section.app-page .section-heading { padding: 26px 28px; border: 1px solid var(--border); border-radius: 19px; background: linear-gradient(145deg,rgba(200,255,56,.04),transparent),var(--surface); }
.inventory-item { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.inventory-item:hover { transform: translateY(-5px); border-color: rgba(200,255,56,.24); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.history-row { transition: background .2s ease, transform .2s ease; }
.history-row:hover { background: rgba(255,255,255,.025); transform: translateX(4px); }

body.profile-open { overflow: hidden; }
.profile-button.active { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(200,255,56,.12),0 10px 30px rgba(139,92,255,.3); }
.profile-view { position: fixed; z-index: 55; inset: 72px 0 0; visibility: hidden; overflow-y: auto; padding: 24px 16px 80px; background: rgba(7,9,14,.93); backdrop-filter: blur(18px); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .28s ease,transform .28s cubic-bezier(.2,.75,.25,1),visibility .28s; }
.profile-view.open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
.profile-shell { width: min(700px,100%); margin: 0 auto; }
.profile-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.profile-topline h2 { font-size: 24px; }
.profile-close { width: 42px; height: 42px; flex: 0 0 42px; color: var(--muted); border: 1px solid var(--border-bright); border-radius: 13px; background: #20232c; cursor: pointer; font-size: 27px; line-height: 1; transition: color .2s ease,transform .2s ease,border-color .2s ease; }
.profile-close:hover { color: #fff; border-color: var(--lime); transform: rotate(5deg) scale(1.04); }
.profile-balance-card,.profile-stats section,.profile-option,.profile-collection { border: 1px solid rgba(255,255,255,.04); border-radius: 22px; background: #24262c; box-shadow: 0 16px 46px rgba(0,0,0,.2); }
.profile-balance-card { padding: 25px 30px 30px; }
.profile-card-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.profile-card-head > span { font-size: 22px; }
.profile-card-head button { display: flex; align-items: center; gap: 10px; color: #9fa2aa; border: 0; background: none; cursor: pointer; font-size: 15px; transition: color .2s ease,transform .2s ease; }
.profile-card-head button:hover { color: var(--lime); transform: translateX(3px); }
.profile-card-head button b { font-size: 30px; font-weight: 400; line-height: .6; }
.profile-balance { display: block; margin: 20px 0 28px; font: 700 35px/1 Unbounded,sans-serif; letter-spacing: -.06em; }
.profile-balance-actions { display: grid; grid-template-columns: 1.7fr .9fr; gap: 12px; }
.profile-balance-actions button { min-height: 72px; border-radius: 15px; cursor: pointer; font-size: 18px; font-weight: 800; transition: transform .22s ease,filter .22s ease,box-shadow .22s ease,border-color .22s ease; }
.profile-balance-actions button span { margin-right: 8px; }
.profile-balance-actions button:hover { transform: translateY(-4px); }
.profile-primary { color: #111318; border: 0; background: linear-gradient(135deg,var(--lime),#eeff74); box-shadow: 0 12px 32px rgba(200,255,56,.16); }
.profile-primary:hover { filter: brightness(1.07); box-shadow: 0 18px 38px rgba(200,255,56,.26); }
.profile-secondary { border: 1px solid rgba(255,255,255,.2); background: #2a2c32; }
.profile-secondary:hover { border-color: var(--lime); }
.profile-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin: 14px 0; }
.profile-stats section { position: relative; min-height: 150px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px 30px; overflow: hidden; }
.profile-stats span { color: #eef0f5; font-size: 18px; }
.profile-stats b { color: var(--lime); font: 700 25px Unbounded,sans-serif; }
.profile-stats i { position: absolute; top: 25px; right: 24px; width: 40px; height: 40px; display: grid; place-items: center; color: #a3a5ad; border-radius: 11px; background: rgba(255,255,255,.07); font-style: normal; font-size: 21px; }
.profile-best { position: relative; min-height: 252px; margin-bottom: 14px; padding: 28px 30px; border: 1px solid rgba(255,255,255,.05); border-radius: 22px; background: linear-gradient(105deg,#272931 0 48%,rgba(119,54,57,.75)),radial-gradient(circle at 75% 35%,rgba(255,84,112,.2),transparent 45%); box-shadow: 0 18px 50px rgba(0,0,0,.24); overflow: hidden; }
.profile-best::after { content: ''; position: absolute; width: 240px; height: 240px; right: -5px; top: 12px; transform: rotate(45deg); border: 28px solid rgba(255,84,112,.1); }
.profile-best-copy { position: relative; z-index: 2; width: 58%; }
.profile-best-copy > span { display: block; margin-bottom: 45px; color: #a7a9b0; font-size: 18px; }
.profile-best-copy small { color: #a3a5ad; font-size: 9px; letter-spacing: .08em; }
.profile-best-copy h3 { min-height: 48px; margin: 7px 0 20px; font-size: 17px; line-height: 1.35; }
.profile-best-copy b { color: var(--lime); font: 700 20px Unbounded,sans-serif; }
.profile-best-chance { position: absolute; z-index: 4; top: 13px; right: 16px; display: flex; align-items: center; gap: 6px; padding: 7px 10px; color: #fff; border-radius: 0 0 0 12px; background: rgba(20,21,26,.45); font-weight: 800; }
.profile-best-chance::before { content: ''; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 5px; background: url('./assets/voltup-mark-v2.svg') center/cover no-repeat; }
.profile-stats i.brand-mini-icon { background: rgba(255,255,255,.045) url('./assets/voltup-mark-v2.svg') center/29px 29px no-repeat; }
.profile-best-image { position: absolute; z-index: 2; right: 8px; bottom: 7px; width: 48%; height: 77%; display: grid; place-items: center; }
.profile-best-image img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 20px rgba(0,0,0,.54)); transform: rotate(-5deg); transition: transform .3s ease; }
.profile-best:hover .profile-best-image img { transform: rotate(-2deg) scale(1.06); }
.profile-option { width: 100%; min-height: 104px; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 16px; margin-bottom: 14px; padding: 20px 24px; text-align: left; cursor: pointer; transition: transform .22s ease,border-color .22s ease,background .22s ease; }
.profile-option:hover { transform: translateY(-3px); border-color: rgba(200,255,56,.18); background: #292c33; }
.profile-option-icon { width: 48px; height: 48px; display: grid; place-items: center; color: #8d9098; border-radius: 13px; background: rgba(255,255,255,.07); }
.profile-option > span:nth-child(2) { display: grid; }
.profile-option b { font-size: 17px; }
.profile-option small { color: #8f929d; font-size: 14px; }
.switch { position: relative; width: 54px; height: 30px; display: inline-block; border-radius: 99px; background: #45474f; box-shadow: inset 0 2px 4px rgba(0,0,0,.28); transition: background .22s ease; }
.switch u { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #a7a9ae; box-shadow: 0 2px 6px rgba(0,0,0,.32); transition: left .22s cubic-bezier(.2,.8,.2,1),background .22s ease; }
.enabled .switch { background: rgba(200,255,56,.36); }
.enabled .switch u { left: 28px; background: var(--lime); }
.profile-manage { min-height: 78px; display: flex; justify-content: center; color: #f4f5f8; font-size: 17px; text-align: center; }
.profile-manage > span { color: #a8abb3; }
.profile-collection { margin-top: 24px; overflow: hidden; }
.profile-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 22px 22px 0; }
.profile-tabs button { min-height: 58px; padding: 8px; color: #a0a3ac; border: 0; border-radius: 12px; background: #36383f; cursor: pointer; font-size: 14px; font-weight: 700; line-height:1.3; transition: color .2s ease,background .2s ease,transform .2s ease; }
.profile-tabs button span { margin-right: 5px; }
.profile-tabs button span.brand-mini-icon { width: 17px; height: 17px; display: inline-block; margin: 0 5px -4px 0; border-radius: 5px; background: url('./assets/voltup-mark-v2.svg') center/cover no-repeat; }
.profile-tabs button:hover { color: #fff; transform: translateY(-2px); }
.profile-tabs button.active { color: #111318; background: var(--lime); box-shadow: 0 8px 24px rgba(200,255,56,.14); }
.profile-sale-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 24px 22px; border-bottom: 1px solid rgba(255,255,255,.045); }
.profile-sale-toggle { display: flex; align-items: center; gap: 12px; color: #b7bac2; border: 0; background: none; cursor: pointer; font-size: 16px; }
.profile-sell-all { min-height: 48px; padding: 0 22px; color: #f0f1f4; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background: transparent; cursor: pointer; transition: color .2s ease,border-color .2s ease,transform .2s ease; }
.profile-sell-all:hover:not(:disabled) { color: var(--lime); border-color: var(--lime); transform: translateY(-2px); }
.profile-sell-all:disabled { color: #696c75; border-color: #55575e; cursor: not-allowed; opacity: .55; }
.profile-tab-content { min-height: 245px; background: #1d1f25; }
.profile-empty { min-height: 245px; display: grid; place-content: center; justify-items: center; color: #aaaeb8; }
.profile-empty span { font-size: 36px; opacity: .42; }
.profile-empty p { margin: 11px 0 0; font-size: 19px; }
.profile-inventory-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 16px; }
.profile-inventory-grid article { position: relative; min-height: 124px; display: grid; grid-template-columns: 98px 1fr; align-items: center; gap: 9px; padding: 11px; border: 1px solid var(--border); border-radius: 13px; background: #252830; overflow: hidden; }
.profile-inventory-grid article::before { content:''; position:absolute; inset:-42% 42% 28% -24%; background:radial-gradient(circle,color-mix(in srgb,var(--rarity),transparent 52%),transparent 69%); filter:blur(8px); opacity:.78; pointer-events:none; }
.profile-inventory-grid article > * { position:relative; z-index:1; }
.profile-inventory-grid img { width: 100%; height: 76px; object-fit: contain; filter: drop-shadow(0 0 15px color-mix(in srgb,var(--rarity),transparent 35%)) drop-shadow(0 12px 10px rgba(0,0,0,.5)); }
.profile-inventory-grid article > div { text-align:center; }
.profile-inventory-grid h4 { margin: 0 0 8px; font-size: 11px; }
.profile-inventory-grid b { color: var(--lime); font-size: 12px; }
.profile-inventory-grid button { position: absolute; right: 8px; bottom: 8px; color: var(--lime); border: 0; background: none; cursor: pointer; font-size: 9px; font-weight: 800; }
.profile-history { display: grid; }
.profile-history article { min-height: 68px; display: grid; grid-template-columns: 52px 34px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px 17px; border-bottom: 1px solid var(--border); }
.profile-history-thumb { width:34px; height:25px; }
.profile-history time,.profile-history small { color: var(--muted); font-size: 9px; }
.profile-history span { display: grid; min-width: 0; }
.profile-history b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-history em { font-size: 9px; font-style: normal; font-weight: 900; }
.profile-history em.win { color: var(--lime); }
.profile-history em.loss { color: var(--red); }
.profile-footer { display: grid; grid-template-columns: 1fr auto; gap: 28px; margin: 24px 0 0; padding: 42px 24px; border-top: 1px solid var(--border); background: #14161c; }
.profile-footer .brand-mark { width: 28px; height: 30px; }
.profile-footer .brand-name { font-size: 17px; }
.profile-socials { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.profile-socials span { width: 45px; height: 45px; display: grid; place-items: center; color: #b5b8c0; border-radius: 50%; background: #25272d; font-size: 13px; font-weight: 800; }
.profile-footer > div:not(.profile-socials) { grid-column: 1/-1; }
.profile-footer small { display: block; margin-bottom: 4px; color: #696d77; font-size: 14px; }
.profile-footer p { margin: 0; color: #c0c3ca; font-size: 14px; }

@media (min-width: 1181px) {
  .main-nav { display: flex; }
  .live-strip { position: relative; inset: auto; width: 100%; height: 72px; flex-direction: row; }
  .live-title { flex: 0 0 104px; width: auto; border-right: 1px solid var(--border); border-bottom: 0; }
  .live-viewport { width: auto; }
  .live-track { width: max-content; height: 100%; flex-direction: row; animation: marquee 38s linear infinite; }
  .live-item { width: auto; min-width: 206px; min-height: 0; border-right: 1px solid var(--border); border-bottom: 0; }
  .app-main { width: min(1440px,calc(100% - 48px)); max-width: none; margin: 0 auto; }
  footer { width: min(1440px,calc(100% - 48px)); max-width: none; margin: 0 auto; }
}
@keyframes railMarquee { to { transform: translateY(-50%); } }

@media (max-width: 1180px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .main-nav { display: none; }
  .header-metrics { justify-self: end; }
  .upgrade-count { display: none; }
  .profile-button { display: grid; }
  .mobile-tabs { position: fixed; z-index: 45; right: 14px; bottom: 14px; left: 14px; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 5px; border: 1px solid var(--border-bright); border-radius: 17px; background: rgba(14,17,25,.93); box-shadow: 0 20px 50px rgba(0,0,0,.48); backdrop-filter: blur(18px); }
  .mobile-tabs a { min-height: 52px; display: grid; place-content: center; justify-items: center; gap: 2px; color: var(--muted); border-radius: 12px; font-size: 10px; font-weight: 800; transition: color .2s ease, background .2s ease, transform .2s ease; }
  .mobile-tabs a span { font-size: 19px; line-height: 1; }
  .mobile-tabs a.active { color: #0b0e11; background: var(--lime); box-shadow: 0 8px 22px rgba(200,255,56,.18); }
  .mobile-tabs a:active { transform: scale(.96); }
  body { padding-bottom: 80px; }
  .live-strip { position: relative; }
  footer { padding-bottom: 28px; }
}

@media (max-width: 1000px) and (min-width: 761px) {
  .upgrade-workspace { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .wheel-panel { grid-column: 1/-1; grid-row: 1; }
  .source-panel { grid-column: 1; grid-row: 2; }
  .target-panel { grid-column: 2; grid-row: 2; }
  .source-tools { margin-top: 22px; padding-top: 16px; }
  .source-tools button { height: 54px; }
}

@media (max-width: 760px) {
  .site-header { min-height: 70px; grid-template-columns: auto 1fr auto; gap: 9px; padding: 0 12px; }
  .site-header > .brand { gap: 0; }
  .site-header > .brand .brand-name { display: none; }
  .site-header > .brand .brand-mark { width: 30px; height: 32px; }
  .header-metrics { justify-self: start; }
  .header-metrics .online { gap: 5px; }
  .header-metrics .online svg { width: 20px; }
  .header-metrics span > span { min-width: 47px; grid-template-rows: 18px; }
  .header-metrics em { display: none; }
  .header-metrics b { min-width: 47px; margin: 0; font-size: 16px; line-height: 18px; text-align: left; }
  .header-actions { justify-self: end; gap: 5px; }
  .balance-box { min-width: 0; width: 108px; height: 40px; gap: 6px; padding: 0 8px; }
  .balance-box span.balance-coin { width: 20px; height: 20px; flex-basis: 20px; font-size: 9px; }
  .balance-box strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; }
  .balance-box svg { width: 13px; }
  .deposit-icon,.notification-button,.profile-button { width: 40px; height: 40px; border-radius: 12px; }
  .profile-button { padding: 3px; }
  .live-strip { display: flex; height: 58px; margin: 0; border-radius: 0; }
  .live-title { flex-basis: 62px; gap: 5px; font-size: 9px; }
  .live-item { min-width: 156px; grid-template-columns: 40px minmax(0,1fr); padding: 5px 9px; }
  .live-item::before { width: 58px; height: 58px; }
  .live-item img { width: 38px; height: 38px; }
  .live-item small,.live-item b { max-width: 95px; }
  .live-item b { font-size: 9px; }
  .live-item small,.live-item em { font-size: 8px; }
  .app-main { width: calc(100% - 18px); }
  .upgrade-section { padding-top: 12px; }
  .upgrade-section::before { inset: 0 -18px -24px; opacity: .48; }
  .stage-title { padding: 0 0 10px; }
  .stage-title h1 { gap: 10px; font-size: 20px; }
  .stage-title .brand-mark { width: 31px; height: 33px; }
  .upgrade-control-row { align-items: center; margin-bottom: 8px; }
  .stage-tools { gap: 0; }
  .stage-tools button { width: 30px; height: 31px; font-size: 17px; }
  .stage-tools #quickBoost { font-size: 22px; }
  .upgrade-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; min-height: 0; }
  .wheel-panel { display: contents; }
  .wheel-panel::before { display: none; }
  .wheel-wrap { grid-column: 1/-1; grid-row: 1; justify-self: center; width: 278px; margin: 18px 0 4px; }
  .multiplier-control { grid-column: 1/-1; grid-row: 2; justify-self: center; margin: 0 0 10px; }
  .source-panel { grid-column: 1; grid-row: 3; }
  .target-panel { grid-column: 2; grid-row: 3; }
  .spin-button { grid-column: 1/-1; grid-row: 4; justify-self: stretch; width: 100%; margin-top: 16px; }
  .wheel-note { grid-column: 1/-1; grid-row: 5; justify-self: center; margin-top: 0; }
  .item-panel { min-height: 306px; padding: 13px; border-radius: 15px; }
  .panel-topline h2 { font-size: 12px; line-height: 1.35; }
  .step-label { font-size: 8px; }
  .small-link { font-size: 9px; }
  .stake-addon { margin-top: 10px; padding: 8px; border-radius: 11px; }
  .stake-addon-head { gap: 7px; }
  .stake-addon-head b { font-size: 9px; }
  .stake-addon-head small { font-size: 7px; }
  .source-skin-remove { min-height: 23px; padding: 0 7px; border-radius: 7px; font-size: 7px; }
  .stake-addon-picker { min-height: 132px; margin-top: 7px; padding: 6px; border-radius: 9px; }
  .source-addon-empty { min-height: 118px; gap: 6px; }
  .source-addon-empty > i { width: 35px; height: 35px; flex-basis: 35px; border-radius: 10px; font-size: 19px; }
  .source-addon-empty b { font-size: 9px; }
  .source-addon-empty small { font-size: 7px; }
  .source-addon-selected { min-height: 118px; grid-template-rows: 72px auto auto; gap: 3px; }
  .source-addon-selected img { width: 100%; height: 72px; }
  .source-addon-selected b { font-size: 8px; }
  .source-addon-selected small { font-size: 6px; }
  .source-addon-selected strong { font-size: 9px; }
  .source-balance { margin-top: 8px; padding: 8px; border-radius: 11px; }
  .cash-addon-head { gap: 5px; margin-bottom: 7px; }
  .cash-addon-head b { font-size: 9px; }
  .cash-addon-head small { font-size: 7px; }
  .cash-addon-value { min-width: 54px; padding: 5px 6px; border-radius: 7px; font-size: 9px; }
  .stake-range-block label { padding-top: 3px; }
  .stake-range-scale { font-size: 7px; }
  .panel-stat-row { display: none; }
  .selected-target { height: 174px; margin-top: 12px; padding: 11px; border-radius: 13px; }
  .selected-target img { height: 92px; }
  .selected-target h3 { font-size: 10px; }
  .selected-target p { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .selected-target .rarity-tag,.selected-target .wear-tag { top: 8px; }
  .selected-target .rarity-tag { left: 8px; }
  .selected-target .wear-tag { right: 8px; }
  .rarity-tag,.wear-tag { padding: 2px 4px; font-size: 7px; }
  .target-price-line { margin: 9px 0; font-size: 9px; }
  .target-price-line strong { font-size: 11px; }
  .target-panel .button { min-height: 38px; padding: 0 7px; font-size: 9px; }
  .target-presets { margin-top: 10px; padding-top: 10px; }
  .target-presets-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .target-presets-head > span { font-size: 8px; }
  .target-presets-head output { font-size: 9px; }
  .target-preset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
  .target-preset-grid button { min-height: 31px; font-size: 9px; }
  .target-picker-view { align-items: stretch; padding: 0; }
  .target-picker-shell { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .target-picker-header { grid-template-columns: 37px 1fr 37px; gap: 9px; padding: 14px 12px 11px; }
  .target-picker-mark,.target-picker-header > button { width: 37px; height: 37px; border-radius: 10px; }
  .target-picker-mark { font-size: 25px; }
  .target-picker-header > div > span { font-size: 8px; }
  .target-picker-header h2 { font-size: 17px; }
  .target-picker-filters { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 7px; padding: 0 12px 10px; }
  .target-picker-filters label { height: 44px; padding: 0 10px; }
  .target-picker-search { grid-column: 1/-1; }
  .target-picker-sort { grid-column: 1/-1; }
  .target-picker-summary { padding: 0 12px 9px; }
  .target-kind-filters { gap:6px; padding:0 12px 10px; }
  .target-kind-filters button { min-height:38px; padding:0 13px; font-size:12px; }
  .target-picker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 0 12px 92px; }
  .target-picker-more { position:fixed; z-index:5; right:12px; bottom:14px; left:12px; min-height:48px; margin:0; border-color:rgba(200,255,56,.38); background:#1b202b; box-shadow:0 14px 40px rgba(0,0,0,.45); }
  .target-skin-option { min-height: 176px; grid-template-rows: 96px auto auto; padding: 9px; }
  .target-skin-option img { height: 96px; }
  .target-skin-option b { font-size: 11px; }
  .target-skin-option small { font-size: 10px; }
  .target-skin-option em { font-size: 12px; }
  .source-tools { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-top: 10px; padding-top: 10px; }
  .source-tools button { width: 100%; height: 36px; border-radius: 10px; font-size: 16px; }
  .source-tools #quickBoost { font-size: 20px; }
  .fairness-row { margin-top: 11px; }
  .catalog-section { padding-top: 30px; }
  .filter-pills button { height:40px; padding:0 13px; font-size:12px; }
  .inventory-section.app-page,.history-section.app-page { padding-top: 36px; }
  .inventory-section.app-page .section-heading,.history-section.app-page .section-heading { padding: 18px; }
  .profile-view { top: 70px; padding: 0 0 94px; background: #0b0d12; backdrop-filter: none; }
  .profile-topline { display: none; }
  .profile-balance-card,.profile-stats section,.profile-option,.profile-collection { border-radius: 19px; }
  .profile-balance-card { padding: 23px 24px 27px; border-radius: 0 0 19px 19px; }
  .profile-card-head > span { font-size: 20px; }
  .profile-card-head button { font-size: 13px; }
  .profile-balance { margin: 19px 0 25px; font-size: 30px; }
  .profile-balance-actions { grid-template-columns: 1.6fr .9fr; gap: 9px; }
  .profile-balance-actions button { min-height: 64px; font-size: 15px; }
  .profile-stats { gap: 10px; margin: 12px 14px; }
  .profile-stats section { min-height: 140px; padding: 21px; }
  .profile-stats span { font-size: 16px; }
  .profile-stats b { font-size: 21px; }
  .profile-stats i { top: 20px; right: 18px; width: 34px; height: 34px; font-size: 18px; }
  .profile-best { min-height: 236px; margin: 0 14px 12px; padding: 24px 22px; border-radius: 19px; }
  .profile-best-copy > span { margin-bottom: 40px; font-size: 16px; }
  .profile-best-copy h3 { font-size: 14px; }
  .profile-best-copy b { font-size: 17px; }
  .profile-option { width: calc(100% - 28px); min-height: 94px; margin: 0 14px 12px; padding: 18px 20px; }
  .profile-option b { font-size: 15px; }
  .profile-option small { font-size: 12px; }
  .profile-manage { min-height: 74px; }
  .profile-collection { margin: 22px 14px 0; }
  .profile-tabs { padding: 14px 14px 0; gap: 6px; }
  .profile-tabs button { min-height: 62px; padding: 7px 5px; font-size: 13px; }
  .profile-sale-row { padding: 20px 14px; }
  .profile-sale-toggle { gap: 9px; font-size: 13px; }
  .profile-sell-all { min-height: 44px; padding: 0 14px; font-size: 12px; }
  .profile-footer { margin-top: 24px; padding: 42px 24px 55px; }
  footer { display: none; }
}

@media (max-width: 480px) {
  .notification-button { display: grid; }
  .profile-button { width: 38px; height: 38px; }
  .deposit-icon { width: 38px; height: 38px; }
  .balance-box { width: 78px; }
  .balance-box strong { font-size: 10px; }
  .header-metrics b { font-size: 14px; }
  .wheel-wrap { width: min(274px,92vw); }
  .chance-ring { width: 218px; height: 218px; }
  .chance-ring::before { width: 192px; height: 192px; }
  .ring-core { width: 160px; height: 160px; }
  .ring-core strong { font-size: 27px; }
  .wheel-orbit span { transform: translate(-50%,-50%) rotate(var(--angle)) translateY(-123px); }
  .multiplier-control { width: 100%; padding: 10px 12px 8px; }
  .profile-balance-card { padding-right: 18px; padding-left: 18px; }
  .profile-card-head button { gap: 5px; font-size: 11px; }
  .profile-balance-actions button { font-size: 13px; }
  .profile-stats section { min-height: 126px; padding: 18px; }
  .profile-stats i { display: none; }
  .profile-best-copy { width: 62%; }
  .profile-best-image { width: 46%; }
  .profile-option { grid-template-columns: 44px 1fr auto; gap: 11px; padding: 16px; }
  .profile-option-icon { width: 42px; height: 42px; }
  .switch { width: 48px; height: 28px; }
  .switch u { width: 20px; height: 20px; }
  .enabled .switch u { left: 24px; }
  .profile-tabs button { font-size: 12px; line-height:1.25; }
  .profile-tabs button span { display: block; margin: 0 0 2px; }
  .profile-sale-row { align-items: stretch; flex-direction: column; }
  .profile-sale-toggle { justify-content: space-between; }
  .profile-inventory-grid { grid-template-columns: 1fr; }
  .profile-socials { justify-content: flex-start; }
}

@media (max-width: 390px) {
  .modal-card { width:calc(100% - 10px); padding:13px; }
  .payment-grid { gap:6px; }
  .payment-grid button { min-height:82px; }
  .promo-line { grid-template-columns:minmax(0,1fr) 94px; }
  .promo-line button { width:94px; font-size:9px; }
  .deposit-submit { font-size:14px; }
  .profile-tabs { padding-right:9px; padding-left:9px; gap:5px; }
  .profile-tabs button { font-size:12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* V-Coin currency and unified skin presentation */
.vcoin-price,
.target-skin-option .vcoin-price,
.source-addon-selected .vcoin-price,
.inventory-actions .vcoin-price {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#d9ceff;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  line-height:1;
  white-space:nowrap;
}
.vcoin-number,
.target-skin-option .vcoin-number,
.source-addon-selected .vcoin-number { display:inline; color:inherit; }
.market-price {
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.market-price .vcoin-number { min-width:0; font-variant-numeric:tabular-nums; }
.price-unavailable { color:#8f96a7; font-size:10px; letter-spacing:.01em; }
.vcoin-icon,
.target-skin-option .vcoin-icon,
.source-addon-selected .vcoin-icon,
.inventory-actions .vcoin-icon {
  position:relative;
  width:1.42em;
  height:1.42em;
  display:inline-grid;
  place-items:center;
  flex:0 0 1.42em;
  color:#fff;
  border:1px solid #d9ceff;
  border-radius:50%;
  background:radial-gradient(circle at 33% 25%,#f8f3ff 0 7%,#c6adff 22%,#8461e9 58%,#38256f 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),0 0 13px rgba(130,91,232,.34);
  font:800 .56em/1 Unbounded,sans-serif;
  font-style:normal;
  letter-spacing:-.04em;
}
.vcoin-icon::after { content:''; position:absolute; inset:2px; border:1px solid rgba(255,255,255,.35); border-radius:inherit; }
.balance-box span.balance-coin {
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  flex:0 0 24px;
  color:#fff;
  border:1px solid #d9ceff;
  border-radius:50%;
  background:radial-gradient(circle at 33% 25%,#f8f3ff 0 7%,#c6adff 22%,#8461e9 58%,#38256f 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),0 0 13px rgba(130,91,232,.34);
  font:800 10px/1 Unbounded,sans-serif;
  letter-spacing:-.04em;
}
.balance-box strong { font-variant-numeric:tabular-nums; }
.cash-addon-value .vcoin-price { font-size:inherit; }
.cash-addon-value .vcoin-icon,.stake-range-scale .vcoin-icon { font-size:9px; }
.stake-range-scale .vcoin-price { gap:4px; color:inherit; font-size:inherit; }
.target-price-line .vcoin-price { gap:7px; color:#e7e0ff; font-size:16px; }
.target-price-line .vcoin-icon { color:#fff; font-size:15px; }
.profile-balance-value { gap:10px; color:#fff; font-size:inherit; }
.profile-balance-value .vcoin-icon { font-size:22px; }
.profile-best-value { color:#d9ceff; font:700 20px Unbounded,sans-serif; }
.profile-best-value .vcoin-icon { font-size:16px; }
.profile-stats .vcoin-price { justify-content:flex-start; color:#d9ceff; }
.profile-stats .vcoin-icon { font-size:14px; }
.deposit-summary .vcoin-price { gap:8px; color:#fff; font-size:18px; }
.deposit-summary .vcoin-icon { font-size:16px; }
.target-picker-price .vcoin-icon { width:24px; height:24px; flex-basis:24px; font-size:10px; }

.skin-card {
  min-height:216px;
  padding:10px;
  border-color:rgba(255,255,255,.075);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(27,31,44,.98),rgba(13,16,24,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 28px rgba(0,0,0,.2);
  transform:none;
}
.skin-card::before {
  inset:-18% -14% 38%;
  background:radial-gradient(ellipse at 50% 62%,color-mix(in srgb,var(--rarity) 55%,transparent),color-mix(in srgb,var(--rarity) 20%,transparent) 40%,transparent 72%);
  filter:blur(12px);
  opacity:.72;
}
.skin-card:hover,.skin-card.selected {
  transform:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rarity) 8%,#1b1f2c),#0d1018 76%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 24px color-mix(in srgb,var(--rarity) 13%,transparent),0 13px 30px rgba(0,0,0,.3);
}
.skin-card:hover { border-color:rgba(255,255,255,.15); }
.skin-card.selected { border-color:rgba(200,255,56,.7); box-shadow:inset 0 0 0 1px rgba(200,255,56,.14),0 0 24px rgba(200,255,56,.13),0 13px 30px rgba(0,0,0,.3); }
.skin-card:hover::before { transform:scale(1.04); }
.skin-card.selected::after { top:9px; right:9px; width:24px; height:24px; box-shadow:0 0 16px rgba(200,255,56,.36); }
.skin-card.selected .wear-chip { right:39px; }
.skin-img-wrap {
  height:116px;
  padding:11px 7px 5px;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);
}
.skin-card img { height:103px; filter:drop-shadow(0 0 18px color-mix(in srgb,var(--rarity) 58%,transparent)) drop-shadow(0 13px 10px rgba(0,0,0,.55)); }
.skin-card:hover img { transform:scale(1.045); }
.wear-chip {
  position:absolute;
  z-index:3;
  top:7px;
  right:7px;
  display:inline-grid;
  place-items:center;
  min-width:28px;
  height:22px;
  padding:0 6px;
  color:#e5e8f1;
  border:1px solid rgba(255,255,255,.1);
  border-radius:7px;
  background:rgba(7,9,15,.72);
  backdrop-filter:blur(7px);
  font-size:9px;
  font-weight:850;
  line-height:1;
}
.skin-card .chance-small {
  top:7px;
  right:auto;
  left:7px;
  display:flex;
  align-items:baseline;
  gap:4px;
  padding:4px 6px;
  border-color:rgba(200,255,56,.16);
  background:rgba(7,9,15,.72);
  text-align:left;
}
.skin-card .chance-small small { font-size:7px; text-transform:uppercase; letter-spacing:.06em; }
.skin-card .chance-small b { display:inline; font-size:10px; }
.skin-card-copy { position:relative; z-index:2; display:grid; gap:2px; min-width:0; padding:7px 4px 5px; text-align:center; }
.skin-card-copy small { overflow:hidden; color:#7f8799; font-size:8px; font-weight:800; letter-spacing:.09em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.skin-card .skin-card-copy h3 { min-height:30px; display:-webkit-box; margin:0; overflow:hidden; color:#f4f6fb; font-size:11px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.skin-card-price {
  position:relative;
  z-index:2;
  align-self:center;
  min-height:29px;
  margin-top:auto;
  padding:6px 10px;
  border:1px solid rgba(168,139,255,.18);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(139,92,255,.12),rgba(78,52,144,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  font-size:13px;
}
.skin-card-price,.target-option-price,.inventory-price { max-width:calc(100% - 2px); }
.skin-card-price .vcoin-icon { font-size:11px; }

.target-skin-option {
  min-height:194px;
  grid-template-rows:112px auto auto;
  gap:6px;
  padding:9px;
  border-color:rgba(255,255,255,.075);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(26,30,42,.98),rgba(13,16,24,.98));
  text-align:center;
}
.target-skin-option::before { content:''; position:absolute; inset:-22% -18% 42%; background:radial-gradient(ellipse,color-mix(in srgb,var(--rarity) 55%,transparent),transparent 70%); filter:blur(12px); opacity:.7; pointer-events:none; }
.target-skin-option:hover { border-color:rgba(255,255,255,.17); box-shadow:0 0 24px color-mix(in srgb,var(--rarity) 15%,transparent); }
.target-skin-option.selected { border-color:rgba(200,255,56,.75); box-shadow:inset 0 0 0 1px rgba(200,255,56,.14),0 0 22px rgba(200,255,56,.14); }
.target-skin-option.selected::after { content:'✓'; position:absolute; z-index:4; top:8px; left:8px; width:22px; height:22px; display:grid; place-items:center; color:#0b0e11; border-radius:50%; background:var(--lime); box-shadow:0 0 14px rgba(200,255,56,.34); font-size:10px; font-weight:900; }
.target-option-media { position:relative; z-index:2; display:grid; place-items:center; min-width:0; height:112px; }
.target-skin-option .target-option-media img { width:100%; height:102px; object-fit:contain; filter:drop-shadow(0 0 18px color-mix(in srgb,var(--rarity) 58%,transparent)) drop-shadow(0 10px 9px rgba(0,0,0,.5)); }
.target-skin-option .wear-chip { top:0; right:0; }
.target-option-chance { position:absolute; z-index:3; left:0; bottom:0; padding:4px 6px; color:var(--lime); border:1px solid rgba(200,255,56,.15); border-radius:7px; background:rgba(7,9,15,.72); font-size:9px; font-style:normal; font-weight:850; }
.target-skin-option .target-option-copy { position:relative; z-index:2; display:grid; align-content:start; gap:2px; min-width:0; text-align:center; }
.target-skin-option .target-option-copy small { color:#7f8799; font-size:8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.target-skin-option .target-option-copy b { color:#f4f6fb; font-size:11px; }
.target-option-price { position:relative; z-index:2; justify-self:center; min-height:27px; padding:5px 9px; border:1px solid rgba(168,139,255,.18); border-radius:999px; background:rgba(139,92,255,.1); font-size:12px; font-style:normal; }
.target-option-price .vcoin-icon { font-size:10px; }

.inventory-actions #inventoryValue { display:inline-flex; align-items:center; gap:6px; }
.inventory-actions #inventoryValue > span:not(.vcoin-price) { color:var(--muted); font-size:inherit; }
.inventory-actions .inventory-total { color:#d9ceff; font-size:12px; }
.inventory-actions .inventory-total .vcoin-icon { font-size:10px; }
.inventory-item {
  min-height:208px;
  display:flex;
  flex-direction:column;
  padding:10px;
  border-color:rgba(255,255,255,.075);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(27,31,44,.98),rgba(13,16,24,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 28px rgba(0,0,0,.2);
}
.inventory-item::before { inset:-22% -16% 43%; background:radial-gradient(ellipse,color-mix(in srgb,var(--rarity) 56%,transparent),transparent 70%); filter:blur(12px); opacity:.7; }
.inventory-item:hover { transform:none; border-color:rgba(255,255,255,.16); box-shadow:0 0 24px color-mix(in srgb,var(--rarity) 13%,transparent),0 13px 30px rgba(0,0,0,.3); }
.inventory-media { position:relative; z-index:2; height:112px; display:grid; place-items:center; }
.inventory-item .inventory-media img { width:100%; height:103px; object-fit:contain; filter:drop-shadow(0 0 18px color-mix(in srgb,var(--rarity) 58%,transparent)) drop-shadow(0 12px 9px rgba(0,0,0,.5)); }
.inventory-copy { position:relative; z-index:2; display:grid; gap:2px; min-width:0; padding:6px 4px 4px; text-align:center; }
.inventory-copy small { overflow:hidden; color:#7f8799; font-size:8px; font-weight:800; letter-spacing:.08em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.inventory-item .inventory-copy h3 { min-height:29px; display:-webkit-box; margin:0; overflow:hidden; font-size:11px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.inventory-item .inventory-bottom { min-height:32px; margin-top:auto; }
.inventory-price { min-height:27px; padding:5px 9px; border:1px solid rgba(168,139,255,.18); border-radius:999px; background:rgba(139,92,255,.1); font-size:12px; }
.inventory-price .vcoin-icon { font-size:10px; }
.inventory-item .inventory-bottom button { right:2px; padding:5px 6px; border-radius:7px; background:rgba(200,255,56,.055); font-size:9px; }

.source-addon-selected .source-price { width:auto; color:#d9ceff; font-size:12px; }
.source-price .vcoin-icon { font-size:10px; }
.spin-button small { display:flex; align-items:center; justify-content:center; gap:5px; color:rgba(7,10,12,.68); opacity:1; }
.spin-button small > span { display:inline-flex; align-items:center; gap:4px; }
.spin-button small > i { color:rgba(7,10,12,.58); font-style:normal; }
.spin-button .spin-coin { gap:3px; color:inherit; font-size:inherit; }
.spin-button .spin-coin .vcoin-icon { order:-1; color:#fff; border-color:#e4d9ff; background:radial-gradient(circle at 33% 25%,#fff 0 7%,#d9c7ff 22%,#8b5cff 58%,#3b227d 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 0 9px rgba(101,62,204,.42); font-size:8px; }

.mobile-tabs a .inventory-tab-icon { width:20px; height:20px; display:grid; place-items:center; }
.mobile-tabs a .inventory-tab-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.live-item em { color:#bba5ff; }
.profile-inventory-grid article { min-height:132px; border-color:rgba(255,255,255,.075); background:linear-gradient(135deg,rgba(28,32,44,.98),rgba(15,18,26,.98)); }
.profile-inventory-media { position:relative; z-index:2; width:100%; height:86px; display:grid; place-items:center; }
.profile-inventory-grid .profile-inventory-media img { width:100%; height:82px; object-fit:contain; }
.profile-inventory-copy { position:relative; z-index:2; display:grid; gap:3px; min-width:0; text-align:center; }
.profile-inventory-copy small { overflow:hidden; color:#7f8799; font-size:8px; font-weight:800; letter-spacing:.08em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.profile-inventory-copy h4 { margin:0; font-size:11px; }
.profile-item-price { color:#d9ceff; font-size:12px; }
.profile-item-price .vcoin-icon { font-size:10px; }

/* Compact controls and stable hover states */
@media (min-width:1181px) {
  .app-main { width:min(1440px,calc(100% - 48px)); max-width:none; }
}
.upgrade-section::before { inset:0 auto -34px 50%; width:100vw; transform:translateX(-50%); background-position:center top; background-size:cover; }

.main-nav { gap:3px; padding:4px; border:1px solid rgba(255,255,255,.065); border-radius:14px; background:rgba(15,18,27,.9); box-shadow:inset 0 1px rgba(255,255,255,.025),0 8px 24px rgba(0,0,0,.16); }
.main-nav a,.main-nav .nav-button { min-height:36px; padding:0 14px; color:#aeb4c1; border:0; border-radius:10px; background:transparent; box-shadow:none; font-size:12px; transition:color .16s ease,background .16s ease,box-shadow .16s ease; }
.main-nav a:hover,.main-nav .nav-button:hover { color:#f6f8fb; border:0; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(200,255,56,.12),0 0 16px rgba(200,255,56,.055); }
.main-nav a.active { color:#0a0d10; border:0; background:linear-gradient(135deg,var(--lime),#eaff72); box-shadow:0 0 18px rgba(200,255,56,.15); }
.header-metrics > .online,
.header-metrics > .upgrade-count { display:flex; align-items:center; gap:9px; }
.header-metrics > .online > span,
.header-metrics > .upgrade-count > span { min-width:64px; display:grid; grid-template-rows:12px 18px; align-content:center; line-height:1; }
.header-metrics .online em,
.header-metrics .upgrade-count em { display:block; grid-column:auto; height:12px; line-height:12px; }
.upgrade-metric-icon { width:23px; height:23px; flex:0 0 23px; fill:none; stroke:var(--lime); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 8px rgba(200,255,56,.28)); }

.header-actions { position:relative; }
.quick-deposit-popover { position:absolute; z-index:70; top:calc(100% + 13px); right:96px; width:min(328px,calc(100vw - 24px)); display:grid; gap:11px; visibility:hidden; padding:16px; border:1px solid rgba(200,255,56,.22); border-radius:17px; background:rgba(17,20,29,.98); box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 30px rgba(200,255,56,.06); opacity:0; pointer-events:none; transform:translateY(-7px) scale(.98); transform-origin:top right; transition:opacity .18s ease,transform .18s ease,visibility .18s; }
.quick-deposit-popover::before { content:''; position:absolute; top:-7px; right:47px; width:12px; height:12px; border-top:1px solid rgba(200,255,56,.22); border-left:1px solid rgba(200,255,56,.22); background:#11141d; transform:rotate(45deg); }
.quick-deposit-popover.open { visibility:visible; opacity:1; pointer-events:auto; transform:none; }
.quick-deposit-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.quick-deposit-head > span { display:grid; gap:3px; }
.quick-deposit-head small { color:var(--lime); font-size:9px; font-weight:850; letter-spacing:.11em; }
.quick-deposit-head b { font-size:15px; }
.quick-deposit-head button { width:28px; height:28px; color:#aab0bd; border:1px solid var(--border); border-radius:8px; background:#1a1e29; cursor:pointer; font-size:18px; }
.quick-deposit-input { position:relative; display:block; }
.quick-deposit-input span { position:absolute; left:13px; top:50%; color:#8e95a6; transform:translateY(-50%); }
.quick-deposit-input input { width:100%; height:46px; padding:0 14px 0 35px; color:#fff; border:1px solid rgba(200,255,56,.23); border-radius:11px; outline:none; background:#0c0f17; font-size:18px; font-weight:850; }
.quick-deposit-input input:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(200,255,56,.08); }
.quick-deposit-presets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.quick-deposit-presets button { min-height:34px; color:#949bad; border:1px solid var(--border); border-radius:8px; background:#151925; cursor:pointer; font-size:10px; font-weight:800; }
.quick-deposit-presets button:hover,.quick-deposit-presets button.active { color:#fff; border-color:rgba(200,255,56,.42); box-shadow:inset 0 0 0 1px rgba(200,255,56,.05),0 0 14px rgba(200,255,56,.06); }
.quick-deposit-submit { min-height:43px; color:#090c10; border:1px solid var(--lime); border-radius:11px; background:var(--lime); cursor:pointer; font-size:13px; font-weight:900; }
.quick-deposit-submit:hover { filter:brightness(1.06); box-shadow:0 0 20px rgba(200,255,56,.18); }
.quick-deposit-more { color:#a7adba; border:0; background:transparent; cursor:pointer; font-size:10px; font-weight:750; }
.quick-deposit-more:hover { color:var(--lime); }

.fast-spin-toggle { position:relative; }
.source-tools .fast-spin-toggle { display:grid; place-items:center; }
.source-tools .fast-spin-toggle svg { width:22px; height:22px; fill:#aab1bf; stroke:#aab1bf; opacity:.7; transition:fill .16s ease,stroke .16s ease,opacity .16s ease,filter .16s ease; }
.source-tools .fast-spin-toggle.active { border-color:rgba(200,255,56,.34); background:rgba(200,255,56,.035); box-shadow:inset 0 0 14px rgba(200,255,56,.025); }
.source-tools .fast-spin-toggle.active svg { fill:var(--lime); stroke:var(--lime); opacity:.92; filter:drop-shadow(0 0 6px rgba(200,255,56,.25)); }

.preset-settings-card { width:min(500px,calc(100vw - 24px)); }
.preset-settings-note { margin:4px 0 16px; color:var(--muted); font-size:12px; line-height:1.5; }
.preset-settings-section { padding:14px; border:1px solid rgba(255,255,255,.065); border-radius:14px; background:linear-gradient(145deg,rgba(200,255,56,.025),transparent 55%),#10131c; }
.preset-settings-section + .preset-settings-section { margin-top:10px; }
.preset-settings-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.preset-settings-heading span { color:#f1f3f7; font-size:12px; font-weight:850; }
.preset-settings-heading small { color:var(--lime); font-size:9px; font-weight:800; }
.preset-settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.preset-settings-grid label { position:relative; display:grid; gap:7px; }
.preset-settings-grid label > span { color:#a3a9b7; font-size:10px; font-weight:800; }
.preset-settings-grid label > i { position:absolute; left:13px; bottom:13px; color:var(--lime); font-size:13px; font-style:normal; font-weight:900; }
.preset-settings-grid input { width:100%; height:44px; padding:0 12px 0 29px; color:#fff; border:1px solid var(--border-bright); border-radius:10px; outline:none; background:#10131c; font-size:15px; font-weight:850; }
.preset-settings-grid input:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(200,255,56,.07); }
.preset-chance-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.preset-chance-grid label > i { right:13px; left:auto; color:#b8c0cf; }
.preset-chance-grid input { padding:0 30px 0 12px; }
.preset-settings-actions { display:grid; grid-template-columns:1fr 1.4fr; gap:9px; margin-top:18px; }
.preset-settings-actions > button { min-height:45px; border:1px solid var(--border-bright); border-radius:11px; cursor:pointer; font-weight:850; }
.preset-settings-actions > button:first-child { color:#b3b9c7; background:#171b26; }

.site-header > .brand:hover,
.item-panel:hover,
.inventory-item:hover,
.history-row:hover,
.profile-option:hover,
.profile-balance-actions button:hover,
.profile-tabs button:hover,
.profile-sell-all:hover:not(:disabled),
.profile-card-head button:hover,
.skin-card:hover,
.selected-target:hover img,
.skin-card:hover img,
.skin-card:hover::before,
.profile-best:hover .profile-best-image img,
.wheel-panel:hover .chance-ring { transform:none !important; }
.item-panel:hover { border-color:rgba(200,255,56,.19); box-shadow:0 0 0 1px rgba(200,255,56,.025),0 0 28px rgba(200,255,56,.035),0 18px 55px rgba(0,0,0,.28); }
.history-row:hover { background:rgba(255,255,255,.025); }

button,.main-nav a,.stake-addon-picker,.selected-target,.target-skin-option,.inventory-item,.item-panel,.chance-ring,.source-balance,.multiplier-control { transition-property:color,background-color,border-color,box-shadow,filter,opacity; transition-duration:.16s; transition-timing-function:ease; }
.selected-target.target-swapped > * { animation:targetSwap .24s cubic-bezier(.2,.75,.25,1) both; }
.source-addon-selected { animation:targetSwap .22s cubic-bezier(.2,.75,.25,1) both; }
.target-skin-option.selected { animation:selectionGlow .28s ease both; }
.target-skin-option:active,.target-preset-grid button:active,.source-tools button:active { filter:brightness(1.12); }
@keyframes targetSwap { from { opacity:0; transform:scale(.975); filter:blur(2px); } to { opacity:1; transform:none; filter:none; } }
@keyframes selectionGlow { 50% { box-shadow:inset 0 0 0 1px rgba(200,255,56,.26),0 0 30px rgba(200,255,56,.22); } }

@media (min-width:761px) {
  .profile-view { padding:14px 12px 64px; }
  .profile-shell { width:min(590px,100%); }
  .profile-topline { margin-bottom:11px; }
  .profile-topline h2 { font-size:20px; }
  .profile-close { width:36px; height:36px; flex-basis:36px; border-radius:11px; font-size:22px; }
  .profile-balance-card { padding:19px 22px 22px; }
  .profile-card-head > span { font-size:17px; }
  .profile-card-head button { font-size:12px; }
  .profile-balance { margin:15px 0 20px; font-size:28px; }
  .profile-balance-actions button { min-height:56px; font-size:14px; }
  .profile-stats { gap:10px; margin:10px 0; }
  .profile-stats section { min-height:112px; padding:18px 22px; }
  .profile-stats span { font-size:14px; }
  .profile-stats b { font-size:20px; }
  .profile-stats i { top:17px; right:18px; width:34px; height:34px; font-size:17px; }
  .profile-best { min-height:200px; margin-bottom:10px; padding:21px 22px; }
  .profile-best-copy > span { margin-bottom:28px; font-size:14px; }
  .profile-best-copy h3 { min-height:40px; margin:5px 0 14px; font-size:14px; }
  .profile-option { min-height:78px; gap:12px; margin-bottom:10px; padding:14px 18px; }
  .profile-option-icon { width:40px; height:40px; border-radius:11px; }
  .profile-option b { font-size:14px; }
  .profile-option small { font-size:11px; }
  .profile-manage { min-height:62px; }
  .profile-collection { margin-top:16px; }
  .profile-tabs { padding:14px 14px 0; }
  .profile-tabs button { min-height:48px; font-size:11px; }
  .profile-sale-row { padding:18px 14px; }
}

@media (max-width:760px) {
  .header-metrics > .online > span { min-width:45px; grid-template-rows:10px 17px; }
  .header-metrics .online em { display:block; height:10px; font-size:7px; line-height:10px; }
  .header-metrics .online b { min-width:45px; font-size:13px; line-height:17px; }
  .quick-deposit-popover { position:fixed; top:64px; right:8px; width:min(320px,calc(100vw - 16px)); }
  .quick-deposit-popover::before { right:86px; }
  .source-tools .fast-spin-toggle svg { width:19px; height:19px; }
  .preset-settings-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .preset-chance-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .balance-box span.balance-coin { width:21px; height:21px; flex-basis:21px; border-radius:50%; font-size:8px; }
  .target-price-line .vcoin-price { gap:4px; font-size:11px; }
  .target-price-line .vcoin-icon { font-size:10px; }
  .skin-card { min-height:196px; padding:8px; }
  .skin-img-wrap { height:102px; padding:10px 4px 3px; }
  .skin-card img { height:91px; }
  .skin-card .skin-card-copy h3 { min-height:28px; font-size:10px; }
  .skin-card-price { min-height:27px; padding:5px 8px; font-size:11px; }
  .target-skin-option { min-height:184px; grid-template-rows:102px auto auto; padding:8px; }
  .target-option-media { height:102px; }
  .target-skin-option .target-option-media img { height:92px; }
  .target-option-price { font-size:11px; }
  .inventory-item { min-height:196px; padding:8px; }
  .inventory-media { height:102px; }
  .inventory-item .inventory-media img { height:92px; }
  .inventory-actions #inventoryValue { flex-wrap:wrap; justify-content:flex-end; }
  .inventory-actions .inventory-total { font-size:10px; }
  .profile-balance-value { font-size:30px; }
  .profile-balance-value .vcoin-icon { font-size:20px; }
  .profile-best-value { font-size:17px; }
  .deposit-summary .vcoin-price { font-size:16px; }
}

@media (max-width:420px) {
  .skin-grid { gap:7px; }
  .skin-card { min-height:188px; border-radius:13px; }
  .skin-img-wrap { height:96px; }
  .skin-card img { height:86px; }
  .skin-card .chance-small { padding:3px 5px; }
  .skin-card .chance-small small { display:none; }
  .wear-chip { min-width:25px; height:20px; padding:0 5px; font-size:8px; }
  .skin-card .skin-card-copy h3 { font-size:9px; }
  .skin-card-price { font-size:10px; }
  .inventory-item .inventory-bottom button { position:static; margin-left:5px; }
  .profile-inventory-grid article { grid-template-columns:96px minmax(0,1fr); }
}

/* Inline target picker: replaces the right upgrade card instead of opening a page overlay. */
.target-picker-inline { display:none; min-width:0; height:100%; overflow:hidden; contain:layout paint; }
.target-picker-inline.open { display:block; animation:inlinePickerIn .3s cubic-bezier(.2,.75,.25,1) both; }
.target-picker-inline.open.opening,.target-picker-inline.open.closing { will-change:opacity,transform; }
.target-picker-inline.open.closing { pointer-events:none; animation:inlinePickerOut .22s cubic-bezier(.4,0,.7,.2) both; }
.upgrade-workspace.target-picker-active { grid-template-columns:minmax(250px,.85fr) minmax(320px,.9fr) minmax(520px,1.65fr); }
.target-panel.picker-open {
  z-index:8;
  grid-column:3;
  grid-row:1;
  min-height:560px;
  height:min(720px,calc(100dvh - 150px));
  padding:0;
  overflow:hidden;
  border-color:rgba(200,255,56,.16);
  background:#0d1018;
  transform:none;
  box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 32px rgba(200,255,56,.035);
}
.target-panel.picker-open:hover { transform:none; }
.target-panel.picker-open > :not(.target-picker-inline) { display:none; }
.target-picker-inline .target-picker-shell {
  width:100%;
  height:100%;
  max-height:none;
  border:0;
  border-radius:inherit;
  background:linear-gradient(rgba(13,16,24,.93),rgba(13,16,24,.98)),url('./assets/picker-texture.svg') center/cover;
  box-shadow:none;
  transform:none;
}
.target-picker-inline .target-picker-header { flex:0 0 auto; grid-template-columns:38px minmax(0,1fr) 38px; padding:16px 18px 12px; }
.target-picker-inline .target-picker-mark,
.target-picker-inline .target-picker-header > button { width:38px; height:38px; border-radius:11px; }
.target-picker-inline .target-picker-header h2 { font-size:19px; }
.target-picker-inline .target-picker-filters { grid-template-columns:minmax(180px,1.45fr) minmax(150px,.9fr) minmax(90px,.55fr) minmax(90px,.55fr); gap:7px; padding:0 18px 10px; }
.target-picker-inline .target-picker-filters label,
.target-picker-inline .target-picker-sort { height:42px; padding:0 10px; border-radius:10px; }
.target-picker-inline .target-kind-filters { flex:0 0 auto; gap:6px; padding:0 18px 9px; }
.target-picker-inline .target-kind-filters button { min-height:32px; padding:0 12px; font-size:10px; }
.target-picker-inline .target-picker-summary { flex:0 0 auto; padding:0 18px 8px; }
.target-picker-inline .target-picker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0 18px 14px; }
.target-picker-inline .target-skin-option { min-height:178px; grid-template-rows:98px auto auto; gap:4px; padding:9px; border-radius:13px; content-visibility:auto; contain:layout paint style; contain-intrinsic-size:auto 178px; }
.target-picker-inline .target-option-media { height:98px; }
.target-picker-inline .target-skin-option .target-option-media img { height:88px; }
.target-picker-inline .target-option-copy small { font-size:8px; }
.target-picker-inline .target-option-copy b { font-size:11px; }
.target-picker-inline .target-option-price { min-height:27px; padding:5px 9px; font-size:11px; }
.target-picker-inline .target-option-price .vcoin-icon { font-size:9px; }
.target-picker-inline .target-option-chance { display:none; }
.target-picker-inline .target-picker-more { position:static; flex:0 0 auto; min-height:38px; margin:7px 18px 14px; }
@keyframes inlinePickerIn { from { opacity:0; transform:translateX(12px) scale(.995); } to { opacity:1; transform:none; } }
@keyframes inlinePickerOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateX(8px) scale(.996); } }
.target-picker-inline.open.opening .target-skin-option img { filter:drop-shadow(0 8px 8px rgba(0,0,0,.42)); }
.target-picker-preparing { min-height:220px; }
.target-panel { view-transition-name:upgrade-target-panel; }
::view-transition-group(upgrade-target-panel) { animation-duration:.34s; animation-timing-function:cubic-bezier(.2,.75,.25,1); }
::view-transition-old(upgrade-target-panel) { animation:targetPanelSnapshotOut .34s ease both; }
::view-transition-new(upgrade-target-panel) { animation:targetPanelSnapshotIn .34s ease both; }
@keyframes targetPanelSnapshotOut { from { opacity:1; } to { opacity:0; } }
@keyframes targetPanelSnapshotIn { from { opacity:.18; } to { opacity:1; } }

@media (max-width:1180px) and (min-width:761px) {
  .upgrade-workspace.target-picker-active { grid-template-columns:minmax(280px,.85fr) minmax(460px,1.15fr); }
  .upgrade-workspace.target-picker-active .wheel-panel { grid-column:1/-1; grid-row:1; }
  .upgrade-workspace.target-picker-active .source-panel { grid-column:1; grid-row:2; }
  .target-panel.picker-open { grid-column:2; grid-row:2; }
  .target-picker-inline .target-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .upgrade-workspace.target-picker-active { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .target-panel.picker-open { grid-column:1/-1; grid-row:3; min-height:610px; height:min(680px,calc(100dvh - 92px)); }
  .target-picker-inline .target-picker-shell { width:100%; height:100%; max-height:none; border-radius:inherit; }
  .target-picker-inline .target-picker-header { grid-template-columns:34px minmax(0,1fr) 34px; gap:8px; padding:12px 10px 9px; }
  .target-picker-inline .target-picker-mark,
  .target-picker-inline .target-picker-header > button { width:34px; height:34px; border-radius:9px; }
  .target-picker-inline .target-picker-header h2 { font-size:14px; }
  .target-picker-inline .target-picker-filters { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0 10px 8px; }
  .target-picker-inline .target-picker-search,
  .target-picker-inline .target-picker-sort { grid-column:1/-1; }
  .target-picker-inline .target-picker-filters label,
  .target-picker-inline .target-picker-sort { height:38px; padding:0 9px; }
  .target-picker-inline .target-picker-filters input,
  .target-picker-inline .target-picker-filters select { font-size:11px; }
  .target-picker-inline .target-kind-filters { gap:4px; padding:0 10px 7px; overflow-x:auto; }
  .target-picker-inline .target-kind-filters button { min-height:30px; padding:0 10px; font-size:9px; }
  .target-picker-inline .target-picker-summary { padding:0 10px 7px; font-size:9px; }
  .target-picker-inline .target-picker-summary button { font-size:9px; }
  .target-picker-inline .target-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; padding:0 10px 12px; }
  .target-picker-inline .target-skin-option { min-height:146px; grid-template-rows:76px auto auto; padding:7px; }
  .target-picker-inline .target-option-media { height:76px; }
  .target-picker-inline .target-skin-option .target-option-media img { height:68px; }
  .target-picker-inline .target-picker-more { position:static; right:auto; bottom:auto; left:auto; min-height:38px; margin:6px 10px 12px; }
}

@media (max-width:760px) {
  .target-sort-trigger { padding:0; font-size:11px; }
  .target-sort-menu { top:calc(100% + 5px); }
  .target-sort-menu button { min-height:36px; font-size:11px; }
}

@media (prefers-reduced-motion:reduce) {
  .target-picker-inline.open { animation-duration:.01ms; }
  .target-sort-menu,.target-sort-trigger svg { transition-duration:.01ms; }
}

/* Mobile usability pass. Everything below is deliberately isolated from desktop. */
@media (max-width:760px) {
  html {
    width:100%;
    max-width:100%;
    overflow-x:clip;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body {
    width:100%;
    min-width:0;
    max-width:100%;
    overflow-x:clip;
    overscroll-behavior-x:none;
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
  }
  input:not([type="range"]),select,textarea {
    font-size:16px !important;
  }
  button,a,[role="button"],input,select,textarea {
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  input[type="range"] { touch-action:pan-y; }
  .site-header,.live-strip,.app-main,.app-page,.upgrade-section,
  .upgrade-workspace,.item-panel,.wheel-panel,.profile-view,.profile-shell,
  .modal-card,.target-picker-shell { max-width:100%; }

  .site-header {
    min-height:64px;
    gap:7px;
    padding:0 max(8px,env(safe-area-inset-left)) 0 max(8px,env(safe-area-inset-right));
  }
  .site-header > .brand .brand-mark { width:28px; height:30px; }
  .header-actions { min-width:0; gap:4px; }
  .header-metrics .online { gap:4px; padding-right:0; }
  .header-metrics .online svg { width:18px; }
  .header-metrics > .online > span { min-width:42px; }
  .header-metrics .online b { min-width:42px; font-size:12px; }
  .balance-box { width:84px; height:40px; padding:0 7px; }
  .deposit-icon,.notification-button,.profile-button { width:40px; height:40px; flex:0 0 40px; }
  .quick-deposit-popover {
    top:64px;
    right:8px;
    width:min(328px,calc(100% - 16px));
    max-height:calc(100svh - 76px);
    overflow-y:auto;
  }

  .live-strip { height:62px; contain:layout paint; }
  .live-track { will-change:transform; }
  .live-item { min-width:168px; }
  .live-item b { font-size:10px; }
  .live-item small,.live-item em { font-size:9px; }

  .app-main { width:min(calc(100% - 16px),620px); }
  .app-page { min-height:0; }
  .app-page.is-active { animation:mobilePageEnter .28s cubic-bezier(.2,.75,.25,1) both; }
  .upgrade-section { padding-top:10px; }
  .upgrade-section::before { inset:0 -8px -28px; }
  .stage-title { padding-bottom:8px; }
  .stage-title h1 { font-size:19px; }

  .upgrade-workspace,
  .upgrade-workspace.target-picker-active {
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:0;
    width:100%;
  }
  .wheel-panel {
    order:1;
    display:flex;
    width:100%;
    height:auto;
    min-height:0;
    padding:15px 12px 18px;
    overflow:hidden;
  }
  .source-panel {
    order:2;
    width:100%;
    height:auto;
    min-height:0;
    padding:18px;
  }
  .target-panel {
    order:3;
    width:100%;
    height:auto;
    min-height:0;
    padding:18px;
  }
  .item-panel { border-radius:18px; }
  .wheel-wrap {
    width:min(284px,calc(100vw - 46px));
    margin:2px 0 8px;
  }
  .chance-ring { width:224px; height:224px; }
  .chance-ring::before { width:198px; height:198px; }
  .ring-core { width:164px; height:164px; }
  .ring-core strong { font-size:28px; }
  .wheel-orbit span { transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-127px); }
  .multiplier-control {
    width:min(100%,420px);
    margin:4px 0 12px;
    padding:13px 14px 11px;
  }
  .multiplier-head > span { font-size:10px; }
  .multiplier-head strong { font-size:13px; }
  .multiplier-head em { font-size:15px; }
  .multiplier-range-wrap { padding-top:10px; }
  .spin-button {
    width:min(100%,420px);
    min-height:58px;
    margin-top:6px;
  }
  .wheel-note { min-height:18px; margin-top:7px; font-size:11px; }

  .panel-topline h2 { font-size:17px; }
  .step-label { font-size:10px; }
  .small-link { min-height:40px; padding:0 6px; font-size:12px; }
  .stake-addon { margin-top:14px; padding:12px; border-radius:14px; }
  .stake-addon-head b { font-size:13px; }
  .stake-addon-head small { font-size:10px; }
  .source-skin-remove { min-height:34px; padding:0 10px; font-size:10px; }
  .stake-addon-picker { min-height:184px; margin-top:10px; padding:10px; }
  .source-addon-empty { min-height:162px; }
  .source-addon-empty > i { width:48px; height:48px; flex-basis:48px; font-size:25px; }
  .source-addon-empty b { font-size:13px; }
  .source-addon-empty small { font-size:10px; }
  .source-addon-selected { min-height:162px; grid-template-rows:104px auto auto; gap:5px; }
  .source-addon-selected img { height:104px; }
  .source-addon-selected b { font-size:12px; }
  .source-addon-selected small { font-size:9px; }
  .source-addon-selected strong { font-size:12px; }
  .source-balance { margin-top:12px; padding:13px; border-radius:14px; }
  .cash-addon-head b { font-size:13px; }
  .cash-addon-head small { font-size:10px; }
  .cash-addon-value { min-width:72px; padding:7px 9px; font-size:12px; }
  .stake-range-block input { height:32px; }
  .stake-range-scale { font-size:10px; }
  .source-tools { gap:7px; margin-top:14px; padding-top:14px; }
  .source-tools button { min-height:46px; height:46px; border-radius:12px; font-size:19px; }

  .selected-target { height:238px; margin-top:14px; padding:14px; }
  .selected-target img { height:142px; }
  .selected-target h3 { font-size:14px; }
  .selected-target p { font-size:10px; }
  .rarity-tag,.wear-tag { padding:4px 7px; font-size:9px; }
  .target-price-line { margin:13px 0; font-size:12px; }
  .target-price-line strong,.target-price-line .vcoin-price { font-size:14px; }
  .target-panel .button { min-height:46px; padding:0 12px; font-size:12px; }
  .target-presets { margin-top:16px; padding-top:14px; }
  .target-presets-head { align-items:center; flex-direction:row; gap:8px; }
  .target-presets-head > span { font-size:10px; }
  .target-presets-head output { font-size:10px; }
  .target-preset-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .target-preset-grid button { min-height:44px; font-size:11px; }

  .target-panel.picker-open {
    order:3;
    grid-column:auto;
    grid-row:auto;
    width:100%;
    height:clamp(540px,calc(100svh - 88px),720px);
    min-height:0;
    padding:0;
  }
  .target-picker-inline .target-picker-header {
    grid-template-columns:44px minmax(0,1fr) 44px;
    gap:9px;
    padding:13px 12px 10px;
  }
  .target-picker-inline .target-picker-mark,
  .target-picker-inline .target-picker-header > button {
    width:44px;
    height:44px;
    border-radius:11px;
  }
  .target-picker-inline .target-picker-header h2 { font-size:17px; }
  .target-picker-inline .target-picker-header > div > span { font-size:9px; }
  .target-picker-inline .target-picker-filters {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:0 12px 10px;
  }
  .target-picker-inline .target-picker-search,
  .target-picker-inline .target-picker-sort { grid-column:1/-1; }
  .target-picker-inline .target-picker-filters label,
  .target-picker-inline .target-picker-sort { height:48px; padding:0 11px; }
  .target-picker-inline .target-picker-filters input,
  .target-picker-inline .target-picker-filters select,
  .target-picker-inline .target-sort-trigger { font-size:16px !important; }
  .target-sort-menu { max-height:min(230px,42svh); overflow-y:auto; }
  .target-sort-menu button { min-height:44px; font-size:13px; }
  .target-picker-inline .target-kind-filters {
    gap:7px;
    padding:0 12px 10px;
    scroll-snap-type:x proximity;
  }
  .target-picker-inline .target-kind-filters button {
    min-height:42px;
    padding:0 15px;
    font-size:12px;
    scroll-snap-align:start;
  }
  .target-picker-inline .target-picker-summary { padding:0 12px 10px; font-size:12px; }
  .target-picker-inline .target-picker-summary button { min-height:36px; font-size:12px; }
  .target-picker-inline .target-picker-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:0 12px 14px;
    scrollbar-gutter:stable;
  }
  .target-picker-inline .target-skin-option {
    min-height:190px;
    grid-template-rows:102px auto auto;
    gap:5px;
    padding:9px;
    border-radius:14px;
  }
  .target-picker-inline .target-option-media { height:102px; }
  .target-picker-inline .target-skin-option .target-option-media img { height:94px; }
  .target-picker-inline .target-option-copy small { font-size:10px; }
  .target-picker-inline .target-option-copy b { font-size:12px; }
  .target-picker-inline .target-option-price { min-height:31px; padding:6px 10px; font-size:13px; }
  .target-picker-inline .target-option-price,
  .inventory-price {
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .target-picker-inline .target-picker-more {
    min-height:46px;
    margin:7px 12px 13px;
    font-size:12px;
  }
  .target-picker-inline.open .target-picker-grid { animation:mobileCatalogIn .3s cubic-bezier(.2,.75,.25,1) both; }

  .inventory-section.app-page,.history-section.app-page { padding-top:24px; }
  .inventory-section.app-page .section-heading,
  .history-section.app-page .section-heading { padding:17px; border-radius:17px; }
  .section-heading.compact { align-items:flex-start; gap:12px; }
  .section-heading.compact h2 { font-size:24px; }
  .inventory-actions { width:100%; align-items:stretch; gap:8px; }
  .inventory-actions span,.inventory-actions .inventory-total { font-size:12px; }
  .inventory-actions .button { min-height:44px; font-size:12px; }
  .inventory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .inventory-item { min-height:208px; padding:10px; border-radius:15px; }
  .inventory-media { height:110px; }
  .inventory-item .inventory-media img { height:102px; }
  .inventory-copy small { font-size:9px; }
  .inventory-item .inventory-copy h3 { min-height:32px; font-size:12px; }
  .inventory-price { min-height:30px; padding:6px 10px; font-size:13px; }
  .inventory-item .inventory-bottom button { min-height:34px; font-size:10px; }
  .history-row { grid-template-columns:54px 38px minmax(0,1fr) auto; gap:8px; min-height:76px; padding:10px; }
  .history-item-name b { font-size:12px; }

  .modal { padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
  .modal-card {
    width:calc(100% - 16px);
    max-height:calc(100svh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding:17px;
  }
  .payment-grid button { min-height:92px; }
  .promo-line { grid-template-columns:minmax(0,1fr) 104px; }
  .profile-view { top:64px; padding-bottom:calc(94px + env(safe-area-inset-bottom)); }
  .profile-shell { width:100%; max-width:560px; }

  .mobile-tabs {
    right:8px;
    bottom:max(8px,env(safe-area-inset-bottom));
    left:8px;
    padding:5px;
  }
  .mobile-tabs a { min-height:56px; font-size:11px; }
}

@media (max-width:360px) {
  .notification-button { display:none; }
  .site-header { gap:5px; padding-right:6px; padding-left:6px; }
  .balance-box { width:78px; }
  .deposit-icon,.profile-button { width:38px; height:38px; flex-basis:38px; }
  .app-main { width:calc(100% - 12px); }
  .wheel-wrap { width:min(274px,calc(100vw - 34px)); }
  .source-panel,.target-panel { padding:15px; }
  .target-picker-inline .target-picker-grid { padding-right:9px; padding-left:9px; }
  .target-picker-inline .target-skin-option { min-height:184px; grid-template-rows:94px auto auto; padding:8px; }
  .target-picker-inline .target-option-media { height:94px; }
  .target-picker-inline .target-skin-option .target-option-media img { height:86px; }
  .promo-line { grid-template-columns:minmax(0,1fr) 92px; }
  .promo-line button { width:92px; }
}

@keyframes mobilePageEnter {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:none; }
}
@keyframes mobileCatalogIn {
  from { opacity:.15; transform:translateY(7px); }
  to { opacity:1; transform:none; }
}

/* Compact mobile target catalogue. Desktop sizing stays unchanged. */
@media (max-width:760px) {
  .target-panel.picker-open {
    height:clamp(520px,calc(100svh - 82px),690px);
  }

  .target-picker-inline .target-picker-header {
    grid-template-columns:32px minmax(0,1fr) 32px;
    gap:7px;
    padding:8px 8px 7px;
  }
  .target-picker-inline .target-picker-mark,
  .target-picker-inline .target-picker-header > button {
    width:32px;
    height:32px;
    border-radius:9px;
  }
  .target-picker-inline .target-picker-header > button {
    font-size:19px;
  }
  .target-picker-inline .target-picker-header > div > span {
    font-size:7px;
    letter-spacing:.12em;
  }
  .target-picker-inline .target-picker-header h2 {
    margin-top:0;
    overflow:hidden;
    font-size:12px;
    line-height:1.15;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .target-picker-inline .target-picker-filters {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    padding:0 8px 6px;
  }
  .target-picker-inline .target-picker-search,
  .target-picker-inline .target-picker-sort {
    grid-column:auto;
  }
  .target-picker-inline .target-picker-filters label,
  .target-picker-inline .target-picker-sort {
    height:34px;
    gap:5px;
    padding:0 8px;
    border-radius:9px;
  }
  .target-picker-inline .target-picker-search svg {
    width:14px;
    flex-basis:14px;
  }
  .target-picker-inline .target-picker-filters input {
    min-width:0;
    padding:0;
    font-size:16px !important;
  }
  .target-picker-inline .target-sort-trigger {
    gap:4px;
    padding:0 7px;
    font-size:10px !important;
  }
  .target-picker-inline .target-sort-trigger svg {
    width:13px;
    height:13px;
    flex-basis:13px;
  }
  .target-picker-inline .target-picker-price .vcoin-icon {
    width:18px;
    height:18px;
    flex-basis:18px;
    font-size:7px;
  }
  .target-picker-inline .target-sort-menu {
    top:calc(100% + 4px);
    gap:3px;
    padding:4px;
    border-radius:9px;
  }
  .target-picker-inline .target-sort-menu button {
    min-height:32px;
    padding:0 7px;
    font-size:10px;
  }

  .target-picker-inline .target-kind-filters {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    padding:0 8px 6px;
    overflow:visible;
    scroll-snap-type:none;
  }
  .target-picker-inline .target-kind-filters button {
    min-width:0;
    min-height:29px;
    padding:0 4px;
    border-radius:8px;
    font-size:9px;
    scroll-snap-align:none;
  }
  .target-picker-inline .target-picker-summary {
    min-height:25px;
    padding:0 8px 5px;
    font-size:9px;
  }
  .target-picker-inline .target-picker-summary button {
    min-height:25px;
    padding:0;
    font-size:9px;
  }

  .target-picker-inline .target-picker-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-content:start;
    gap:5px;
    padding:0 8px 9px;
    scrollbar-gutter:auto;
  }
  .target-picker-inline .target-skin-option {
    min-height:136px;
    grid-template-rows:66px minmax(25px,auto) 23px;
    gap:3px;
    padding:5px;
    border-radius:10px;
    contain-intrinsic-size:auto 136px;
  }
  .target-picker-inline .target-skin-option::before {
    inset:-18% -20% 47%;
    filter:blur(9px);
  }
  .target-picker-inline .target-option-media {
    height:66px;
  }
  .target-picker-inline .target-skin-option .target-option-media img {
    height:60px;
  }
  .target-picker-inline .target-skin-option .wear-chip {
    top:0;
    right:0;
    min-width:20px;
    height:17px;
    padding:0 3px;
    border-radius:6px;
    font-size:7px;
  }
  .target-picker-inline .target-skin-option.selected::after {
    top:4px;
    left:4px;
    width:17px;
    height:17px;
    font-size:8px;
  }
  .target-picker-inline .target-option-copy {
    gap:1px;
  }
  .target-picker-inline .target-option-copy small {
    font-size:6.5px;
    line-height:1.15;
  }
  .target-picker-inline .target-option-copy b {
    display:-webkit-box;
    min-height:18px;
    overflow:hidden;
    font-size:8.5px;
    line-height:1.08;
    text-overflow:ellipsis;
    white-space:normal;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .target-picker-inline .target-option-price {
    width:auto;
    max-width:100%;
    min-height:23px;
    padding:4px 5px;
    gap:3px;
    font-size:8.5px;
  }
  .target-picker-inline .target-option-price .vcoin-icon {
    width:1.25em;
    height:1.25em;
    flex-basis:1.25em;
    font-size:7px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 7px rgba(130,91,232,.28);
  }
  .target-picker-inline .target-picker-more {
    min-height:35px;
    margin:5px 8px 9px;
    border-radius:9px;
    font-size:10px;
  }
}

@media (max-width:360px) {
  .target-picker-inline .target-picker-grid {
    gap:4px;
    padding-right:6px;
    padding-left:6px;
  }
  .target-picker-inline .target-skin-option {
    min-height:130px;
    grid-template-rows:61px minmax(24px,auto) 22px;
    padding:4px;
  }
  .target-picker-inline .target-option-media { height:61px; }
  .target-picker-inline .target-skin-option .target-option-media img { height:55px; }
  .target-picker-inline .target-option-copy b { font-size:8px; }
  .target-picker-inline .target-option-price { min-height:22px; padding:3px 4px; font-size:8px; }
}

/* Small mobile chrome and readable compact filter placeholders. */
@media (max-width:760px) {
  body {
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
  .site-header {
    min-height:60px;
    gap:6px;
    padding-right:max(7px,env(safe-area-inset-right));
    padding-left:max(7px,env(safe-area-inset-left));
  }
  .site-header > .brand .brand-mark {
    width:26px;
    height:28px;
  }
  .header-metrics .online {
    gap:3px;
  }
  .header-metrics .online svg {
    width:17px;
  }
  .header-metrics > .online > span,
  .header-metrics .online b {
    min-width:39px;
  }
  .header-metrics .online b {
    font-size:12px;
  }
  .header-actions {
    gap:3px;
  }
  .balance-box {
    width:80px;
    height:37px;
    gap:5px;
    padding:0 6px;
    border-radius:11px;
  }
  .balance-box span.balance-coin {
    width:19px;
    height:19px;
    flex-basis:19px;
  }
  .balance-box strong {
    font-size:10px;
  }
  .deposit-icon,
  .notification-button,
  .profile-button {
    width:37px;
    height:37px;
    flex-basis:37px;
    border-radius:11px;
  }
  .deposit-icon svg,
  .notification-button svg {
    width:18px;
  }
  .profile-view {
    top:60px;
  }
  .quick-deposit-popover {
    top:60px;
  }

  .target-picker-inline .target-picker-search input::placeholder,
  .target-picker-inline .target-picker-price input::placeholder {
    font-size:12px;
    font-weight:650;
    letter-spacing:0;
  }
  .target-picker-inline .target-picker-price .vcoin-icon {
    width:16px;
    height:16px;
    flex-basis:16px;
    font-size:6px;
  }

  .mobile-tabs {
    right:6px;
    bottom:max(6px,env(safe-area-inset-bottom));
    left:6px;
    gap:3px;
    padding:4px;
    border-radius:15px;
  }
  .mobile-tabs a {
    min-height:48px;
    gap:1px;
    border-radius:11px;
    font-size:10px;
  }
  .mobile-tabs a span {
    font-size:17px;
  }
}

@media (max-width:360px) {
  .site-header {
    gap:4px;
    padding-right:5px;
    padding-left:5px;
  }
  .balance-box { width:74px; }
  .deposit-icon,
  .profile-button {
    width:35px;
    height:35px;
    flex-basis:35px;
  }
}

/* Header capacity: no quick top-up, full balance, and stable mobile metrics. */
.deposit-icon,
.quick-deposit-popover {
  display:none !important;
}

@media (max-width:760px) {
  .site-header {
    grid-template-columns:26px minmax(0,1fr) auto;
  }
  .header-metrics {
    min-width:0;
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-self:stretch;
    gap:6px;
  }
  .header-metrics > .online,
  .header-metrics > .upgrade-count {
    min-width:0;
    gap:4px;
  }
  .header-metrics svg,
  .header-metrics .upgrade-metric-icon {
    width:16px;
    height:16px;
    flex-basis:16px;
  }
  .header-metrics > .online > span,
  .header-metrics > .upgrade-count > span {
    min-width:0;
    grid-template-rows:9px 16px;
  }
  .header-metrics .online em,
  .header-metrics .upgrade-count em {
    height:9px;
    overflow:visible;
    font-size:7px;
    line-height:9px;
    letter-spacing:.035em;
    white-space:nowrap;
  }
  .header-metrics .online b,
  .header-metrics .upgrade-count b {
    min-width:0;
    overflow:visible;
    font-size:12px;
    line-height:16px;
    text-overflow:clip;
    white-space:nowrap;
  }
  .header-actions {
    min-width:0;
  }
  .balance-box {
    width:clamp(112px,30vw,136px);
    min-width:112px;
    flex:0 0 clamp(112px,30vw,136px);
  }
  .balance-box strong {
    min-width:0;
    overflow:visible;
    font-size:clamp(9px,2.45vw,11px);
    text-overflow:clip;
  }
  .balance-box svg {
    width:11px;
    flex:0 0 11px;
  }
}

@media (max-width:360px) {
  .balance-box {
    width:112px;
    min-width:112px;
    flex-basis:112px;
  }
}

/* Polished inventory and profile workspace. */
.profile-view {
  overflow-x:hidden;
  padding:18px 14px 72px;
  background:
    radial-gradient(circle at 50% -10%,rgba(139,92,255,.13),transparent 36%),
    radial-gradient(circle at 100% 42%,rgba(200,255,56,.055),transparent 30%),
    rgba(7,9,14,.97);
  backdrop-filter:blur(12px);
  transform:none;
  transition:opacity .24s ease,visibility .24s;
}
.profile-view .profile-shell {
  width:min(680px,100%);
  transform:translateY(10px) scale(.992);
  opacity:.7;
  transition:transform .3s cubic-bezier(.22,.8,.24,1),opacity .22s ease;
}
.profile-view.open .profile-shell { transform:none; opacity:1; }
.profile-topline {
  align-items:center;
  margin:0 0 12px;
  padding:5px 3px;
}
.profile-heading { min-width:0; display:flex; align-items:center; gap:12px; }
.profile-heading > span:last-child { min-width:0; display:grid; gap:2px; }
.profile-heading-icon {
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  color:var(--lime);
  border:1px solid rgba(200,255,56,.2);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(200,255,56,.12),rgba(139,92,255,.07));
  box-shadow:inset 0 0 18px rgba(200,255,56,.035),0 0 24px rgba(200,255,56,.04);
}
.profile-heading-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.profile-heading .eyebrow { color:var(--lime); font-size:8px; letter-spacing:.13em; }
.profile-topline h2 { margin:0; font-size:19px; letter-spacing:-.03em; }
.profile-heading small { overflow:hidden; color:#7f8799; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.profile-close {
  width:40px;
  height:40px;
  flex-basis:40px;
  display:grid;
  place-items:center;
  color:#8c93a4;
  border-color:rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(145deg,#1a1e29,#11151e);
}
.profile-close svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }
.profile-close:hover { color:#fff; border-color:rgba(200,255,56,.28); background:#1b202a; transform:none; }

.profile-balance-card,
.profile-stats section,
.profile-option,
.profile-collection {
  border-color:rgba(255,255,255,.075);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(27,31,42,.98),rgba(14,17,25,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 16px 42px rgba(0,0,0,.2);
}
.profile-balance-card {
  position:relative;
  padding:22px;
  overflow:hidden;
  border-color:rgba(200,255,56,.12);
  background:
    radial-gradient(circle at 8% 115%,rgba(200,255,56,.11),transparent 35%),
    radial-gradient(circle at 88% -10%,rgba(139,92,255,.13),transparent 38%),
    linear-gradient(145deg,#181c27,#0f131c);
}
.profile-balance-card::before {
  content:'';
  position:absolute;
  top:0;
  right:22px;
  left:22px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,255,56,.55),transparent);
  opacity:.65;
}
.profile-card-head { position:relative; z-index:1; }
.profile-card-label { display:flex; align-items:center; gap:10px; color:#edf1f7; font-size:13px !important; font-weight:750; }
.profile-card-label > i {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--lime);
  border:1px solid rgba(200,255,56,.16);
  border-radius:11px;
  background:rgba(200,255,56,.065);
}
.profile-card-label svg,
.profile-card-head button svg,
.profile-action-icon svg,
.profile-stats svg,
.profile-best-label svg,
.profile-option-icon svg,
.profile-option-arrow,
.profile-tabs button > svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.profile-card-label svg { width:18px; height:18px; }
.profile-card-label > span { display:grid; gap:1px; }
.profile-card-label small { color:#737b8d; font-size:7px; letter-spacing:.12em; }
.profile-card-head button {
  min-height:34px;
  gap:6px;
  padding:0 9px;
  color:#a7adba;
  border:1px solid rgba(255,255,255,.075);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  font-size:10px;
}
.profile-card-head button svg { width:14px; height:14px; }
.profile-card-head button b { margin-left:1px; font-size:19px; }
.profile-card-head button:hover { color:var(--lime); border-color:rgba(200,255,56,.2); background:rgba(200,255,56,.045); transform:none; }
.profile-balance {
  position:relative;
  z-index:1;
  margin:22px 0 20px;
  font-size:32px;
  letter-spacing:-.055em;
}
.profile-balance-value { max-width:100%; flex-wrap:nowrap; }
.profile-balance-value .vcoin-number { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.profile-balance-actions { position:relative; z-index:1; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:9px; }
.profile-balance-actions button {
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:16px;
  font-size:13px;
}
.profile-balance-actions button > span { margin:0; }
.profile-action-icon { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; }
.profile-action-icon svg { width:16px; height:16px; }
.profile-primary { box-shadow:0 10px 28px rgba(200,255,56,.12); }
.profile-primary .profile-action-icon { background:rgba(7,10,13,.11); }
.profile-secondary { color:#e7eaf0; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); }
.profile-secondary .profile-action-icon { color:#c6b7ff; background:rgba(139,92,255,.12); }
.profile-balance-actions button:hover { border-color:rgba(200,255,56,.25); filter:brightness(1.05); box-shadow:0 0 24px rgba(200,255,56,.1); transform:none; }

.profile-stats { gap:9px; margin:9px 0; }
.profile-stats section {
  min-height:104px;
  justify-content:flex-end;
  gap:3px;
  padding:17px 18px;
}
.profile-stats section::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.018),transparent 45%); pointer-events:none; }
.profile-stats section > span { color:#9aa2b2; font-size:11px; line-height:1.25; }
.profile-stats b {
  min-height:1.25em;
  max-width:calc(100% - 38px);
  display:flex;
  align-items:center;
  overflow:hidden;
  color:#f4f6fa;
  font-size:clamp(15px,3vw,20px);
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-stats b > .vcoin-price,
.profile-stats b .vcoin-number { font:inherit; line-height:inherit; }
.profile-stats b .vcoin-icon { font-size:14px; }
.profile-stats small { color:#626b7d; font-size:8px; line-height:1.25; }
.profile-stats i {
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  color:#aeb5c4;
  border:1px solid rgba(255,255,255,.07);
  border-radius:11px;
  background:rgba(255,255,255,.035);
}
.profile-stats i svg { width:17px; height:17px; }
.profile-stats i.brand-mini-icon { background:rgba(200,255,56,.055) url('./assets/voltup-mark-v2.svg') center/22px 22px no-repeat; }
.profile-stats .vcoin-price { gap:5px; color:#f4f6fa; }

.profile-best {
  min-height:190px;
  margin-bottom:9px;
  padding:20px;
  border-color:color-mix(in srgb,var(--best-rarity,#8b5cff),transparent 77%);
  border-radius:24px;
  background:
    radial-gradient(circle at 80% 42%,color-mix(in srgb,var(--best-rarity,#8b5cff),transparent 72%),transparent 42%),
    linear-gradient(140deg,#171b25,#10131c 58%,#171324);
  box-shadow:inset 0 1px rgba(255,255,255,.03),0 18px 42px rgba(0,0,0,.23);
}
.profile-best::after {
  right:-65px;
  top:-52px;
  width:220px;
  height:220px;
  border:1px solid color-mix(in srgb,var(--best-rarity,#8b5cff),transparent 78%);
  border-radius:50%;
  transform:none;
  box-shadow:0 0 0 32px color-mix(in srgb,var(--best-rarity,#8b5cff),transparent 95%);
}
.profile-best-copy { width:57%; }
.profile-best-copy > span.profile-best-label { display:flex; align-items:center; gap:7px; margin-bottom:28px; color:#c3c9d5; font-size:12px; font-weight:750; }
.profile-best-label i { width:25px; height:25px; display:grid; place-items:center; color:var(--lime); border-radius:8px; background:rgba(200,255,56,.065); }
.profile-best-label svg { width:14px; height:14px; }
.profile-best-copy small { color:#747d8e; font-size:7px; letter-spacing:.13em; }
.profile-best-copy h3 { min-height:37px; margin:5px 0 12px; font-size:13px; }
.profile-best-copy b { font-size:16px; }
.profile-best-chance { top:13px; right:13px; padding:6px 9px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:rgba(9,11,17,.72); font-size:11px; backdrop-filter:blur(6px); }
.profile-best-chance::before { width:16px; height:16px; flex-basis:16px; background-image:url('./assets/voltup-mark-v2.svg'); }
.profile-best-image { right:5px; bottom:3px; width:50%; height:72%; }
.profile-best-image img { filter:drop-shadow(0 0 18px color-mix(in srgb,var(--best-rarity,#8b5cff),transparent 55%)) drop-shadow(0 16px 16px rgba(0,0,0,.5)); transform:none; transition:filter .22s ease; }
.profile-best:hover .profile-best-image img { filter:drop-shadow(0 0 22px color-mix(in srgb,var(--best-rarity,#8b5cff),transparent 45%)) drop-shadow(0 16px 16px rgba(0,0,0,.5)); transform:none; }

.profile-option {
  min-height:68px;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:11px;
  margin-bottom:9px;
  padding:12px 15px;
  border-radius:18px;
}
.profile-option:hover { border-color:rgba(200,255,56,.16); background:linear-gradient(145deg,rgba(29,34,45,.98),rgba(15,19,27,.98)); transform:none; }
.profile-option-icon { width:38px; height:38px; color:#c0c6d2; border:1px solid rgba(255,255,255,.07); border-radius:12px; background:rgba(255,255,255,.035); }
.profile-option-icon svg { width:19px; height:19px; }
.profile-option > span:nth-child(2) { gap:2px; }
.profile-option b { font-size:12px; }
.profile-option small { color:#747c8c; font-size:9px; }
.profile-manage { display:grid; justify-content:initial; text-align:left; font-size:inherit; }
.profile-manage > span { color:inherit; }
.profile-option-arrow { width:18px; height:18px; color:#737b8b; }
.switch { width:44px; height:26px; border:1px solid rgba(255,255,255,.06); background:#252a35; box-shadow:inset 0 1px 4px rgba(0,0,0,.35); }
.switch u { top:3px; left:3px; width:18px; height:18px; background:#747c8c; }
.enabled .switch { background:rgba(200,255,56,.19); border-color:rgba(200,255,56,.18); }
.enabled .switch u { left:21px; background:var(--lime); box-shadow:0 0 12px rgba(200,255,56,.45); }

.profile-collection { margin-top:14px; overflow:hidden; border-radius:24px; }
.profile-tabs { gap:6px; padding:9px; border-bottom:1px solid rgba(255,255,255,.05); }
.profile-tabs button {
  position:relative;
  min-width:0;
  min-height:53px;
  display:grid;
  grid-template-columns:18px minmax(0,auto);
  grid-template-rows:auto auto;
  align-content:center;
  align-items:center;
  justify-content:center;
  justify-items:start;
  column-gap:7px;
  row-gap:3px;
  padding:8px 9px;
  color:#8d95a5;
  border:1px solid transparent;
  border-radius:15px;
  background:transparent;
  font-size:10px;
  line-height:1;
}
.profile-tabs button > svg,
.profile-tabs button > .brand-mini-icon { grid-row:1/3; align-self:center; width:18px; height:18px; margin:0; }
.profile-tabs button > .brand-mini-icon { display:block; border-radius:5px; background:url('./assets/voltup-mark-v2.svg') center/contain no-repeat; }
.profile-tabs button > span:not(.brand-mini-icon) {
  min-width:0;
  align-self:end;
  margin:0;
  overflow:hidden;
  font-size:11px;
  font-weight:750;
  letter-spacing:-.01em;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-tabs button small {
  min-width:2ch;
  align-self:start;
  color:#5f6879;
  font-size:9px;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  line-height:1.1;
  text-align:left;
}
.profile-tabs button:hover { color:#dfe4ed; border-color:rgba(255,255,255,.07); background:rgba(255,255,255,.025); transform:none; }
.profile-tabs button.active { color:#11150e; border-color:rgba(200,255,56,.8); background:linear-gradient(135deg,var(--lime),#e4ff65); box-shadow:0 8px 24px rgba(200,255,56,.12); }
.profile-tabs button.active small { color:rgba(11,15,10,.58); }
.profile-sale-row { min-height:64px; padding:10px 13px; border-bottom-color:rgba(255,255,255,.05); }
.profile-sale-toggle { gap:9px; color:#b6bdca; font-size:10px; }
.profile-sale-row .switch { transform:scale(.82); transform-origin:right center; }
.profile-sell-all { min-height:38px; padding:0 13px; border-color:rgba(255,255,255,.11); border-radius:12px; background:rgba(255,255,255,.025); font-size:10px; }
.profile-tab-content { min-height:214px; background:rgba(8,11,17,.5); }
.profile-empty { min-height:214px; color:#8f97a7; }
.profile-empty span { width:42px; height:42px; display:grid; place-items:center; color:#6e7788; border:1px solid rgba(255,255,255,.07); border-radius:14px; background:rgba(255,255,255,.025); font-size:22px; }
.profile-empty-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.profile-empty p { margin-top:9px; font-size:12px; }
.profile-inventory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:10px; }
.profile-inventory-grid article {
  min-width:0;
  min-height:148px;
  grid-template-columns:1fr;
  grid-template-rows:76px auto;
  gap:5px;
  padding:9px;
  border-color:rgba(255,255,255,.065);
  border-radius:16px;
  background:linear-gradient(155deg,rgba(27,32,44,.98),rgba(12,15,22,.98));
}
.profile-inventory-grid article::before { inset:-35% -15% 45%; opacity:.68; }
.profile-inventory-media { height:76px; }
.profile-inventory-grid .profile-inventory-media img { height:72px; }
.profile-inventory-copy { gap:3px; }
.profile-inventory-copy h4 { min-height:27px; margin:0; display:-webkit-box; overflow:hidden; font-size:10px; line-height:1.3; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.profile-item-price { justify-content:center; font-size:10px; }
.profile-inventory-grid button { right:7px; bottom:7px; padding:4px 6px; border:1px solid rgba(200,255,56,.16); border-radius:7px; background:rgba(11,14,19,.78); }
.profile-history article { min-height:64px; grid-template-columns:40px 36px minmax(0,1fr) auto; gap:8px; padding:9px 12px; border-bottom-color:rgba(255,255,255,.055); }
.profile-history article:last-child { border-bottom:0; }
.profile-history time,.profile-history small { font-size:8px; }
.profile-history b { font-size:10px; }
.profile-history em { padding:5px 6px; border-radius:7px; background:rgba(255,255,255,.025); font-size:7px; }

.profile-footer {
  gap:18px;
  margin-top:14px;
  padding:26px 20px calc(32px + env(safe-area-inset-bottom));
  border:1px solid rgba(255,255,255,.055);
  border-radius:22px;
  background:linear-gradient(145deg,#121620,#0d1017);
}
.profile-socials { gap:7px; }
.profile-socials span { width:34px; height:34px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03); font-size:9px; }
.profile-footer small,.profile-footer p { font-size:10px; }

@media (max-width:760px) {
  .profile-view {
    top:var(--profile-viewport-top,0px);
    padding:9px 9px calc(88px + env(safe-area-inset-bottom));
    background:
      radial-gradient(circle at 50% -5%,rgba(139,92,255,.12),transparent 32%),
      radial-gradient(circle at 100% 42%,rgba(200,255,56,.045),transparent 25%),
      #090c13;
    backdrop-filter:none;
  }
  .profile-shell { width:100%; max-width:560px; }
  .profile-topline { display:flex; padding:2px 2px 8px; }
  .profile-heading-icon { width:40px; height:40px; flex-basis:40px; border-radius:13px; }
  .profile-heading-icon svg { width:20px; height:20px; }
  .profile-topline h2 { font-size:17px; }
  .profile-heading small { font-size:9px; }
  .profile-close { width:38px; height:38px; flex-basis:38px; border-radius:13px; }
  .profile-balance-card { padding:17px; border-radius:22px; }
  .profile-card-head button span { display:none; }
  .profile-card-head button { width:34px; padding:0; justify-content:center; }
  .profile-card-head button b { display:none; }
  .profile-card-head button svg { width:17px; height:17px; }
  .profile-balance { margin:18px 0 16px; font-size:clamp(24px,7.3vw,31px); }
  .profile-balance-value .vcoin-icon { font-size:19px; }
  .profile-balance-actions button { min-height:50px; font-size:12px; }
  .profile-stats { margin:8px 0; }
  .profile-stats section { min-height:92px; padding:15px; border-radius:20px; }
  .profile-stats b { max-width:calc(100% - 30px); font-size:clamp(14px,4vw,18px); }
  .profile-stats i { top:12px; right:12px; width:29px; height:29px; }
  .profile-best { min-height:174px; padding:17px; border-radius:22px; }
  .profile-best-copy > span.profile-best-label { margin-bottom:22px; }
  .profile-best-copy h3 { min-height:34px; margin-bottom:9px; font-size:12px; }
  .profile-best-value { font-size:14px; }
  .profile-option { width:100%; min-height:64px; margin:0 0 8px; padding:11px 13px; border-radius:18px; }
  .profile-manage { min-height:64px; }
  .profile-collection { margin:13px 0 0; border-radius:22px; }
  .profile-tabs { padding:8px; }
  .profile-tabs button { min-height:52px; padding:7px 8px; }
  .profile-tabs button > span:not(.brand-mini-icon) { font-size:10px; }
  .profile-tabs button small { font-size:8.5px; }
  .profile-sale-row { padding:9px 11px; }
  .profile-sale-row { align-items:center; flex-direction:row; }
  .profile-inventory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-footer { margin-top:10px; padding:22px 16px 28px; }
}

@media (max-width:380px) {
  .profile-heading small { display:none; }
  .profile-card-label > i { width:31px; height:31px; }
  .profile-card-label { gap:8px; font-size:12px !important; }
  .profile-balance-card { padding:15px; }
  .profile-balance-actions { grid-template-columns:1.25fr 1fr; }
  .profile-balance-actions button { gap:6px; padding:0 8px; font-size:11px; }
  .profile-action-icon { width:22px; height:22px; }
  .profile-stats section { padding:13px; }
  .profile-best { min-height:168px; padding:15px; }
  .profile-best-copy { width:61%; }
  .profile-best-image { width:47%; }
  .profile-option b { font-size:11px; }
  .profile-tabs button { column-gap:4px; padding-right:5px; padding-left:5px; }
  .profile-tabs button > span:not(.brand-mini-icon) { font-size:9px; }
  .profile-tabs button small { font-size:8px; }
  .profile-tabs button > svg,.profile-tabs button > .brand-mini-icon { width:16px; height:16px; }
  .profile-sale-toggle { font-size:9px; }
  .profile-sell-all { padding:0 10px; font-size:9px; }
  .profile-history article { grid-template-columns:34px 30px minmax(0,1fr) auto; padding-right:9px; padding-left:9px; }
}

/* Wheel-first compact upgrader for phones. Tablet and desktop layouts stay unchanged. */
.mobile-step-copy,
.mobile-stake-panel,
.mobile-quick-panel {
  display:none;
}

@media (max-width:600px) {
  .upgrade-section { padding-top:8px; }
  .upgrade-section .stage-title { display:none; }
  .upgrade-section .fairness-row { display:none; }

  .upgrade-workspace,
  .upgrade-workspace.target-picker-active {
    width:100%;
    min-height:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(7,auto);
    align-items:stretch;
    gap:6px;
  }

  .upgrade-workspace > .source-panel,
  .upgrade-workspace > .target-panel:not(.picker-open) {
    width:auto;
    height:auto;
    min-height:clamp(184px,48vw,205px);
    padding:9px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.065);
    border-radius:17px;
    background:
      radial-gradient(circle at 50% 38%,rgba(200,255,56,.045),transparent 50%),
      linear-gradient(155deg,rgba(25,29,40,.98),rgba(12,15,23,.98));
    box-shadow:inset 0 1px rgba(255,255,255,.028),0 12px 30px rgba(0,0,0,.2);
  }
  .upgrade-workspace > .source-panel {
    grid-column:1;
    grid-row:2;
    display:flex;
    flex-direction:column;
  }
  .upgrade-workspace > .target-panel:not(.picker-open) {
    grid-column:2;
    grid-row:2;
    display:flex;
    flex-direction:column;
  }

  .upgrade-workspace .panel-topline {
    min-height:26px;
    align-items:center;
    gap:5px;
  }
  .upgrade-workspace .panel-topline > div { min-width:0; }
  .upgrade-workspace .panel-topline h2 { display:none; }
  .upgrade-workspace .step-label {
    display:block;
    overflow:hidden;
    color:var(--lime);
    font-size:clamp(9px,2.5vw,10px);
    line-height:1.15;
    letter-spacing:.075em;
    white-space:nowrap;
  }
  .desktop-step-copy { display:none; }
  .mobile-step-copy { display:inline; }

  .target-panel:not(.picker-open) .small-link {
    width:28px;
    height:28px;
    min-height:28px;
    flex:0 0 28px;
    display:grid;
    place-items:center;
    padding:0;
    color:var(--lime);
    border:1px solid rgba(200,255,56,.18);
    border-radius:9px;
    background:rgba(200,255,56,.045);
    font-size:0;
  }
  .target-panel:not(.picker-open) .small-link::before {
    content:'↻';
    font-size:17px;
    line-height:1;
  }

  .source-panel .stake-addon {
    position:relative;
    min-height:0;
    flex:1;
    display:flex;
    margin-top:4px;
    padding:0;
    border:0;
    border-radius:14px;
    background:transparent;
    box-shadow:none;
  }
  .source-panel .stake-addon-head {
    position:absolute;
    z-index:4;
    top:7px;
    right:7px;
  }
  .source-panel .stake-addon-head > span { display:none; }
  .source-panel .source-skin-remove {
    width:28px;
    height:28px;
    min-height:28px;
    padding:0;
    border-radius:9px;
    background:rgba(12,15,23,.82);
    font-size:0;
  }
  .source-panel .source-skin-remove::before {
    content:'×';
    font-size:17px;
    line-height:1;
  }
  .source-panel .stake-addon-picker {
    min-height:clamp(102px,27vw,116px);
    height:auto;
    flex:1;
    margin:0;
    padding:6px;
    border-color:rgba(200,255,56,.2);
    border-radius:14px;
    background:
      radial-gradient(circle at 50% 45%,rgba(200,255,56,.095),transparent 48%),
      linear-gradient(155deg,rgba(20,24,33,.96),rgba(10,13,19,.96));
  }
  .source-panel .source-addon-empty {
    min-height:94px;
    height:100%;
    gap:4px;
  }
  .source-panel .source-addon-empty > i {
    width:36px;
    height:36px;
    flex-basis:36px;
    border-radius:11px;
    font-size:20px;
  }
  .source-panel .source-addon-empty b { font-size:11px; }
  .source-panel .source-addon-empty small { display:none; }
  .source-panel .source-addon-selected {
    min-height:94px;
    height:100%;
    grid-template-rows:minmax(52px,1fr) auto auto;
    gap:2px;
  }
  .source-panel .source-addon-selected img { height:clamp(52px,15vw,68px); }
  .source-panel .source-addon-selected b { font-size:9px; }
  .source-panel .source-addon-selected small { display:none; }
  .source-panel .source-addon-selected strong { font-size:10px; }
  .source-panel > .source-balance { display:none; }
  .source-panel .source-tools {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    margin-top:4px;
    padding-top:0;
    border-top:0;
  }
  .source-panel .source-tools button {
    width:100%;
    min-height:30px;
    height:30px;
    border-radius:9px;
    font-size:14px;
  }
  .source-panel .source-tools #quickBoost { font-size:16px; }
  .source-panel .source-tools .fast-spin-toggle svg,
  .source-panel .source-tools #soundToggle svg { width:16px; height:16px; }

  .target-panel:not(.picker-open) .selected-target {
    min-height:clamp(112px,29vw,126px);
    height:auto;
    flex:1;
    margin-top:4px;
    padding:6px;
    border-radius:14px;
  }
  .target-panel:not(.picker-open) .selected-target img {
    width:100%;
    height:clamp(58px,17vw,74px);
  }
  .target-panel:not(.picker-open) .selected-target h3 {
    margin-top:4px;
    overflow:hidden;
    font-size:9px;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .target-panel:not(.picker-open) .selected-target p { font-size:7px; }
  .target-panel:not(.picker-open) .target-empty { gap:4px; }
  .target-panel:not(.picker-open) .target-empty i {
    width:36px;
    height:36px;
    margin-bottom:1px;
    border-radius:11px;
    font-size:20px;
  }
  .target-panel:not(.picker-open) .target-empty b { font-size:11px; }
  .target-panel:not(.picker-open) .target-empty small { display:none; }
  .target-panel:not(.picker-open) .rarity-tag,
  .target-panel:not(.picker-open) .wear-tag {
    top:7px;
    padding:3px 5px;
    font-size:7px;
  }
  .target-panel:not(.picker-open) .rarity-tag { left:7px; }
  .target-panel:not(.picker-open) .wear-tag { right:7px; }
  .target-panel:not(.picker-open) .target-price-line {
    min-height:21px;
    margin:4px 0 0;
    font-size:9px;
  }
  .target-panel:not(.picker-open) .target-price-line strong,
  .target-panel:not(.picker-open) .target-price-line .vcoin-price { font-size:10px; }
  .target-panel:not(.picker-open) > .button,
  .target-panel:not(.picker-open) > .target-presets { display:none; }

  .upgrade-workspace > .wheel-panel {
    position:static;
    order:initial;
    display:contents;
  }
  .upgrade-workspace > .wheel-panel::before { display:none; }
  .upgrade-workspace .wheel-wrap {
    grid-column:1/-1;
    grid-row:1;
    justify-self:center;
    width:min(300px,calc(100vw - 40px));
    margin:2px 0 4px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(139,92,255,.1),transparent 67%);
    filter:drop-shadow(0 20px 32px rgba(0,0,0,.24));
  }
  .upgrade-workspace .wheel-orbit { inset:4px; }
  .upgrade-workspace .wheel-orbit span {
    width:4px;
    height:12px;
    transform:translate(-50%,-50%) rotate(var(--angle)) translateY(clamp(-136px,-34vw,-116px));
  }
  .upgrade-workspace .wheel-pointer {
    background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(200,255,56,.96)) center 22px / 3px calc(50% - 22px) no-repeat;
  }
  .upgrade-workspace .wheel-pointer::before {
    top:-5px;
    width:19px;
    height:31px;
  }
  .upgrade-workspace .wheel-pointer::after {
    width:11px;
    height:11px;
    border-width:3px;
  }
  .upgrade-workspace .chance-ring {
    position:relative;
    width:clamp(210px,61vw,238px);
    height:clamp(210px,61vw,238px);
    padding:12px;
    box-shadow:0 0 62px rgba(139,92,255,.16);
  }
  .upgrade-workspace .chance-ring::before {
    width:calc(100% - 28px);
    height:calc(100% - 28px);
  }
  .upgrade-workspace .ring-core {
    width:calc(100% - 58px);
    height:calc(100% - 58px);
    border-color:rgba(255,255,255,.075);
  }
  .upgrade-workspace .ring-core span { font-size:11px; letter-spacing:.12em; }
  .upgrade-workspace .ring-core strong {
    margin:3px 0;
    font-size:clamp(25px,8.3vw,33px);
    letter-spacing:-.06em;
  }
  .upgrade-workspace .ring-core small { font-size:11px; }
  .upgrade-workspace .result-flash { font-size:25px; }

  .upgrade-workspace .multiplier-control {
    grid-column:1/-1;
    grid-row:5;
    justify-self:stretch;
    width:100%;
    min-width:0;
    margin:0;
    padding:9px 11px 7px;
    border-radius:14px;
  }
  .upgrade-workspace .multiplier-head {
    gap:8px;
    margin-bottom:2px;
  }
  .upgrade-workspace .multiplier-head > span {
    font-size:10px;
    letter-spacing:.07em;
  }
  .upgrade-workspace .multiplier-head > div { gap:7px; }
  .upgrade-workspace .multiplier-head strong { font-size:12px; }
  .upgrade-workspace .multiplier-head em { font-size:14px; }
  .upgrade-workspace .multiplier-range-wrap { padding:5px 2px 2px; }
  .upgrade-workspace .multiplier-range-wrap input { height:23px; }
  .upgrade-workspace .multiplier-scale span { font-size:8px; }
  .upgrade-workspace .multiplier-scale b { font-size:9px; }
  .upgrade-workspace .multiplier-scale small { font-size:7px; }
  .upgrade-workspace .spin-button {
    grid-column:1/-1;
    grid-row:3;
    justify-self:stretch;
    width:100%;
    min-height:50px;
    height:auto;
    margin:0;
    border-radius:13px;
  }
  .upgrade-workspace .spin-button span { font-size:13px; }
  .upgrade-workspace .spin-button small {
    max-width:100%;
    margin-top:1px;
    overflow:hidden;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .upgrade-workspace .wheel-note {
    grid-column:1/-1;
    grid-row:4;
    min-height:0;
    margin:0;
    font-size:8.5px;
    line-height:1.25;
    text-align:center;
  }

  .upgrade-workspace > .mobile-stake-panel,
  .upgrade-workspace > .mobile-quick-panel {
    grid-column:1/-1;
    width:100%;
    min-width:0;
    display:block;
    border:1px solid rgba(255,255,255,.065);
    border-radius:14px;
    background:linear-gradient(155deg,rgba(22,26,36,.98),rgba(11,14,21,.98));
    box-shadow:inset 0 1px rgba(255,255,255,.025),0 10px 26px rgba(0,0,0,.16);
  }
  .upgrade-workspace > .mobile-stake-panel {
    grid-row:6;
    padding:8px 11px 7px;
  }
  .mobile-control-head {
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:2px;
  }
  .mobile-control-head > span {
    min-width:0;
    display:grid;
    gap:2px;
  }
  .mobile-control-head b { color:#fff; font-size:10px; }
  .mobile-control-head small {
    overflow:hidden;
    color:var(--muted);
    font-size:7.5px;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-control-head output {
    min-width:68px;
    max-width:46%;
    flex:0 0 auto;
    padding:5px 7px;
    overflow:hidden;
    color:var(--lime);
    border:1px solid rgba(200,255,56,.18);
    border-radius:9px;
    background:rgba(200,255,56,.05);
    font-size:11px;
    font-weight:900;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-stake-panel .stake-range-block label { padding:1px; }
  .mobile-stake-panel .stake-range-block input { height:25px; }
  .mobile-stake-panel .stake-range-scale {
    align-items:center;
    font-size:8px;
  }
  .mobile-stake-panel .stake-range-scale .vcoin-price { gap:3px; white-space:nowrap; }
  .mobile-stake-panel .stake-range-scale .vcoin-icon { font-size:7px; }

  .upgrade-workspace > .mobile-quick-panel {
    grid-row:7;
    padding:6px;
  }
  .mobile-quick-head {
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:7px;
  }
  .mobile-quick-head > span {
    color:#cfd4df;
    font-size:9px;
    font-weight:850;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .mobile-quick-head output {
    min-width:0;
    overflow:hidden;
    color:var(--lime);
    font-size:9px;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-preset-grid {
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:3px;
  }
  .mobile-preset-grid button {
    min-width:0;
    min-height:38px;
    padding:0 2px;
    color:#aeb5c2;
    border:1px solid rgba(255,255,255,.085);
    border-radius:9px;
    background:#151923;
    cursor:pointer;
    font-size:clamp(8px,2.45vw,10px);
    font-weight:850;
  }
  .mobile-preset-grid button:nth-child(5) { border-color:rgba(240,91,134,.3); }
  .mobile-preset-grid button:nth-child(6) { border-color:rgba(241,192,72,.32); }
  .mobile-preset-grid button:nth-child(7) { border-color:rgba(111,220,114,.3); }
  .mobile-preset-grid button:hover,
  .mobile-preset-grid button.active,
  .mobile-preset-grid button:focus-visible {
    color:#fff;
    border-color:var(--lime);
    outline:0;
    background:rgba(200,255,56,.065);
    box-shadow:0 0 12px rgba(200,255,56,.12);
  }
  .mobile-preset-grid button:disabled { cursor:not-allowed; opacity:.35; }

  .upgrade-workspace.target-picker-active {
    display:block;
  }
  .upgrade-workspace.target-picker-active > .source-panel,
  .upgrade-workspace.target-picker-active > .wheel-panel,
  .upgrade-workspace.target-picker-active > .mobile-stake-panel,
  .upgrade-workspace.target-picker-active > .mobile-quick-panel {
    display:none;
  }
  .upgrade-workspace.target-picker-active > .target-panel.picker-open {
    width:100%;
    height:clamp(520px,calc(100svh - 82px),690px);
    min-height:0;
    display:block;
    padding:0;
    border-radius:17px;
  }
}

@media (max-width:360px) {
  .upgrade-workspace,
  .upgrade-workspace.target-picker-active { gap:6px; }
  .upgrade-workspace > .source-panel,
  .upgrade-workspace > .target-panel:not(.picker-open) {
    min-height:176px;
    padding:8px;
    border-radius:14px;
  }
  .upgrade-workspace .panel-topline { min-height:24px; }
  .source-panel .stake-addon-picker { min-height:96px; }
  .source-panel .source-addon-empty,
  .source-panel .source-addon-selected { min-height:88px; }
  .target-panel:not(.picker-open) .selected-target { min-height:106px; }
  .upgrade-workspace .wheel-wrap { width:min(288px,calc(100vw - 34px)); }
  .upgrade-workspace .chance-ring { width:218px; height:218px; }
  .upgrade-workspace .multiplier-control { padding:8px 10px 6px; }
  .upgrade-workspace .multiplier-head > span { font-size:9px; }
  .upgrade-workspace .spin-button { min-height:48px; }
  .upgrade-workspace > .mobile-stake-panel { padding:7px 10px 6px; }
  .mobile-control-head small { max-width:175px; }
  .upgrade-workspace > .mobile-quick-panel { padding:5px; }
  .mobile-preset-grid { gap:3px; }
  .mobile-preset-grid button { min-height:35px; border-radius:9px; font-size:8px; }
}