/* ============================================================
   Upgrader · Spotlight v3 — "Minimal" (DESIGN-PROPOSALS/upgrader-spotlight-v3.html, option 1)
   Owner of the upgrader centre (orbit, spotlight, odds, stake line, presets),
   the picker headers/filter menus, the add-balance bar and the phone shortcuts.
   Scope: #view-upgrade only. Loaded after the theme so these rules win.
   responsive.css keeps root scrolling, the narrow panel workflow (absolute
   pickers, hidden/inert centre) and the column grid; this file only adds the
   Spotlight geometry inside it. Quiet controls: colour-only feedback.
   ============================================================ */
html body #view-upgrade {
  --sp-panel: #303047;
  --sp-input: #272739;
  --sp-raised: #3a3a5a;
  --sp-lilac: #aa96f4;
  --sp-dim: #8d8ba8;
  --sp-text: #f5f3ff;
  --sp-gold: var(--gold, #ffcb47);
  --sp-grad: linear-gradient(115deg, #a34ef4, #7265fd);
}

/* ---------- panels ---------- */
html body #view-upgrade .upgrade-grid > .panel,
html body #view-upgrade #wheelPanel.panel.center {
  border-radius: 20px !important;
  background: var(--sp-panel) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body #view-upgrade .upgrade-grid > .panel.sp-side {
  gap: 12px !important;
  padding: 16px !important;
}

/* ---------- picker header ---------- */
html body #view-upgrade .sp-head {
  position: relative; display: flex; flex: 0 0 auto; align-items: center; gap: 8px;
  min-width: 0; min-height: 32px; margin: 0;
}
html body #view-upgrade .sp-head h2 {
  margin: 0; color: var(--sp-lilac); font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
}
html body #view-upgrade .sp-count { color: #8f8cb0; font-size: 14px; font-weight: 600; }
html body #view-upgrade .sp-selchip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; margin-left: auto; padding: 0 4px 0 10px;
  border-radius: 999px; background: rgba(170, 150, 244, .15); color: #e3dcfd;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
html body #view-upgrade .sp-selchip[hidden] { display: none; }
html body #view-upgrade .sp-selchip b { font-weight: 600; }
html body #view-upgrade .sp-selchip button {
  display: grid; place-items: center; width: 18px; height: 18px; min-height: 0; padding: 0; border: 0;
  border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; overflow: visible;
  transition: background-color .16s ease;
}
html body #view-upgrade .sp-selchip button::before { content: ""; position: absolute; inset: -12px; }
html body #view-upgrade .sp-selchip button:hover { background: rgba(255, 255, 255, .22); }
html body #view-upgrade .sp-selchip svg { width: 10px; height: 10px; }

/* ---------- search + filter menu ---------- */
html body #view-upgrade .sp-bar { position: relative; display: flex; flex: 0 0 auto; gap: 8px; min-width: 0; }
html body #view-upgrade .sp-srch {
  display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 12px;
  border-radius: 12px; background: var(--sp-input); color: var(--sp-dim); cursor: text;
}
html body #view-upgrade .sp-srch svg { flex: none; width: 16px; height: 16px; }
html body #view-upgrade .sp-srch input {
  flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; min-height: 0; margin: 0; padding: 0;
  border: 0 !important; outline: 0; border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; color: var(--sp-text) !important;
}
html body #view-upgrade .sp-srch input::-webkit-search-cancel-button { -webkit-appearance: none; }
html body #view-upgrade :is(.sp-srch, .sp-pr label):focus-within { box-shadow: inset 0 0 0 2px rgba(170, 150, 244, .7); }
html body #view-upgrade :is(.sp-srch, .sp-pr label) input:focus-visible { outline: none !important; }
html body #view-upgrade .sp-srch input::placeholder,
html body #view-upgrade .sp-pr input::placeholder { color: var(--sp-dim) !important; }
html body #view-upgrade .sp-filter { position: relative; flex: none; }
html body #view-upgrade .sp-ibtn {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0;
  border: 0; border-radius: 12px; background: var(--sp-input); color: #b9b4da; overflow: visible;
  box-shadow: none; transform: none; transition: background-color .16s ease, color .16s ease;
}
html body #view-upgrade .sp-ibtn svg { width: 17px; height: 17px; }
html body #view-upgrade .sp-ibtn:hover { color: #fff; }
html body #view-upgrade .sp-ibtn.is-open { background: #3a3a5c; color: #fff; }
html body #view-upgrade .sp-dot {
  position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--sp-lilac);
}
html body #view-upgrade .sp-dot[hidden] { display: none; }
html body #view-upgrade .sp-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 232px; max-width: calc(100vw / var(--pz, 1) - 32px);
  padding: 6px; border-radius: 14px; background: #36364f; box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
html body #view-upgrade .sp-pop[hidden] { display: none; }
html body #view-upgrade .sp-lbl {
  padding: 8px 10px 4px; color: #8f8cb0; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
}
html body #view-upgrade .sp-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 36px; min-height: 0;
  padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: #d9d4f5;
  font-size: 13.5px; font-weight: 500; text-align: left; box-shadow: none; transform: none;
  transition: background-color .16s ease, color .16s ease;
}
html body #view-upgrade .sp-opt:hover { background: #40405f; }
html body #view-upgrade .sp-opt svg { width: 15px; height: 15px; color: var(--sp-lilac); visibility: hidden; }
html body #view-upgrade .sp-opt.on { color: #fff; font-weight: 600; }
html body #view-upgrade .sp-opt.on svg { visibility: visible; }
html body #view-upgrade .sp-pr { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 2px 4px 6px; }
html body #view-upgrade .sp-pr label {
  display: flex; align-items: center; gap: 4px; min-width: 0; height: 36px; padding: 0 10px; border-radius: 10px;
  background: #2a2a41; color: var(--sp-dim); font-size: 12.5px; cursor: text;
}
html body #view-upgrade .sp-pr input {
  flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; min-height: 0; margin: 0; padding: 0;
  border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important;
  color: var(--sp-text) !important; -moz-appearance: textfield; appearance: textfield;
}
html body #view-upgrade .sp-pr input::-webkit-outer-spin-button,
html body #view-upgrade .sp-pr input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html body #view-upgrade .sp-pr em { color: var(--sp-gold); font-size: 12px; font-style: normal; font-weight: 700; }
html body #view-upgrade .sp-pr > span { color: #77749a; }
html body #view-upgrade .sp-rst {
  width: 100%; height: 34px; min-height: 0; margin-top: 2px; padding: 0; border: 0; border-radius: 9px;
  background: transparent; color: #cfc6f5; font-size: 13px; font-weight: 600; box-shadow: none; transform: none;
  transition: background-color .16s ease;
}
html body #view-upgrade .sp-rst:hover:not(:disabled) { background: #40405f; }
html body #view-upgrade .sp-rst:disabled { opacity: .35; cursor: default; }

/* ---------- target cards: chance with the current stake ---------- */
html body #view-upgrade #targets .skin .sp-tc {
  position: relative; z-index: 2; grid-row: 1; grid-column: 1; justify-self: start; align-self: center;
  margin: 0; padding: 0; color: #c9bef8; font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
html body #view-upgrade #targets .skin .sp-tc:empty { display: none; }

/* ---------- add balance: one drag bar ---------- */
html body #view-upgrade .sp-fbar {
  --p: 0;
  position: relative; flex: 0 0 auto; height: 44px; margin: 0; overflow: hidden;
  border-radius: 12px; background: var(--sp-input);
}
html body #view-upgrade .sp-fbar .sp-fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--p) * 100%);
  border-radius: 0 10px 10px 0; background: rgba(170, 150, 244, .26);
}
html body #view-upgrade .sp-fbar :is(.sp-lb, .sp-vl) {
  position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600;
  white-space: nowrap; pointer-events: none;
}
html body #view-upgrade .sp-fbar .sp-lb { left: 14px; color: #d6d1ef; }
html body #view-upgrade .sp-fbar .sp-vl { right: 14px; color: #fff; }
html body #view-upgrade .sp-fbar .sp-vl s { margin-left: 4px; color: #8f8cb0; font-weight: 500; text-decoration: none; }
html body #view-upgrade #upgradeInventory .sp-fbar input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
}
html body #view-upgrade .sp-fbar.is-off :is(.sp-lb, .sp-vl) { color: #6c6990; }
html body #view-upgrade #upgradeInventory .sp-fbar.is-off input[type="range"] { cursor: default; }
html body #view-upgrade .sp-fbar:has(input:focus-visible) { box-shadow: inset 0 0 0 2px rgba(221, 212, 255, .9); }

/* ---------- centre ---------- */
html body #view-upgrade #wheelPanel.panel.center.sp-play {
  --sp-tint: #8b72f5;
  --sp-orbit: clamp(13rem, min(58%, calc(100svh / var(--pz, 1)) - 32.625rem), 22.5rem);
  position: relative !important;
  display: flex !important; flex-direction: column !important; align-items: stretch !important;
  gap: 0 !important; padding: 16px 22px 20px !important;
  background: radial-gradient(62% 46% at 50% 38%, color-mix(in srgb, var(--sp-tint) 20%, transparent), transparent 76%), #27273c !important;
  transition: background .6s ease;
}
html body #view-upgrade #wheelPanel.panel.center.sp-play > * { flex: 0 0 auto !important; grid-column: auto !important; grid-row: auto !important; }

/* speed toggle lives in the corner, so the wheel keeps the space */
html body #view-upgrade #wheelPanel .sp-quick {
  position: absolute !important; top: 14px; right: 14px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 0; margin: 0; padding: 0 12px 0 10px;
  border-radius: 999px; background: #303049; color: #a9a5c9; font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; user-select: none; transition: background-color .16s ease, color .16s ease;
}
html body #view-upgrade #wheelPanel .sp-quick input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
html body #view-upgrade #wheelPanel .sp-quick svg { width: 14px; height: 14px; }
html body #view-upgrade #wheelPanel .sp-quick:hover { color: #fff; }
html body #view-upgrade #wheelPanel .sp-quick:has(input:checked) { background: rgba(255, 184, 76, .14); color: #ffbd5a; }
html body #view-upgrade #wheelPanel .sp-quick:has(input:focus-visible) { outline: 2px solid #ddd4ff; outline-offset: 3px; }

/* orbit: ring + chance arc + rotating marker + spotlight */
html body #view-upgrade #wheelPanel.panel.center > .sp-slot { display: block; width: 100%; min-width: 0; margin: 6px 0 0; }
html body #view-upgrade #wheelPanel.panel.center > .sp-slot > .wheel-stage.sp-orbit {
  position: relative !important; display: block !important;
  width: var(--sp-orbit) !important; height: auto !important; aspect-ratio: 1 !important;
  min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: none !important;
  margin: 0 auto !important; align-self: center !important; overflow: visible !important;
  container-type: size !important;
}
html body #view-upgrade .sp-orb { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
html body #view-upgrade .sp-rot { position: absolute; inset: 0; pointer-events: none; will-change: transform; transform: rotate(0deg); }
html body #view-upgrade .sp-trail {
  border-radius: 50%; opacity: 0;
  background: conic-gradient(from -70deg, rgba(205, 190, 255, 0) 0deg, rgba(205, 190, 255, .55) 70deg, rgba(205, 190, 255, 0) 70.2deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(88% - 5px), #000 calc(88% - 4px), #000 calc(88% + 4px), transparent calc(88% + 5px));
  mask: radial-gradient(closest-side, transparent calc(88% - 5px), #000 calc(88% - 4px), #000 calc(88% + 4px), transparent calc(88% + 5px));
  transition: opacity .4s ease;
}
html body #view-upgrade .wheel-stage.is-spinning .sp-trail { opacity: 1; }
html body #view-upgrade .sp-mk-rot { z-index: 3; }
html body #view-upgrade .sp-mk {
  position: absolute; top: 6%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(170, 150, 244, .3), 0 0 14px 2px rgba(186, 164, 255, .75);
  transition: background-color .3s ease, box-shadow .3s ease;
}
html body #view-upgrade #wheelPanel.sp-is-win .sp-mk { background: #e8fff4; box-shadow: 0 0 0 4px rgba(67, 224, 160, .35), 0 0 14px 2px rgba(67, 224, 160, .75); }
html body #view-upgrade #wheelPanel.sp-is-lose .sp-mk { background: #ffe8eb; box-shadow: 0 0 0 4px rgba(255, 107, 122, .3), 0 0 14px 2px rgba(255, 107, 122, .7); }
html body #view-upgrade .sp-spot {
  position: absolute; inset: 14%; z-index: 2; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--sp-tint) 30%, transparent), transparent 68%);
  transition: background .6s ease;
}
html body #view-upgrade #wheelPanel.sp-is-lose .sp-spot { background: radial-gradient(circle at 50% 44%, rgba(255, 107, 122, .14), transparent 68%); }
html body #view-upgrade :is(.sp-spot-in, .sp-result) {
  position: relative; display: grid; justify-items: center; gap: 3px; width: 100%; min-width: 0; text-align: center;
}
html body #view-upgrade .sp-result { display: none; }
html body #view-upgrade .sp-spot:is(.win, .lose) .sp-spot-in { display: none; }
html body #view-upgrade .sp-spot:is(.win, .lose) .sp-result { display: grid; }
html body #view-upgrade .sp-spot-in:empty { display: none; }
html body #view-upgrade :is(.sp-spot-in, .sp-result) .sp-art { position: relative; width: 88%; height: 32cqh; }
html body #view-upgrade :is(.sp-spot-in, .sp-result) .sp-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .5));
}
html body #view-upgrade :is(.sp-spot-in, .sp-result) small { display: block; max-width: 86%; margin-top: 6px; overflow: hidden; color: #b3b1cf; font-size: 11.5px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
html body #view-upgrade :is(.sp-spot-in, .sp-result) b { display: block; max-width: 86%; overflow: hidden; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
html body #view-upgrade .sp-gtag { margin-top: 2px; color: #cfc6f5; font-size: 11.5px; font-weight: 600; }
html body #view-upgrade .sp-empty { display: grid; justify-items: center; gap: 10px; color: #a9a6c8; font-size: 13px; font-weight: 600; text-align: center; }
html body #view-upgrade .sp-empty img { width: 24cqw; max-width: none; opacity: .9; }
html body #view-upgrade .sp-empty span { display: flex; align-items: center; gap: 6px; }
html body #view-upgrade .sp-goldonly { display: grid; justify-items: center; gap: 3px; }
html body #view-upgrade .sp-g { color: var(--sp-gold); font-family: Benzin, Rubik, sans-serif; font-size: 7cqw; line-height: 1.2; }
html body #view-upgrade .sp-goldonly small { color: #b3b1cf; font-size: 11.5px; }
/* several staked items: quiet chevrons inside the caption line (no backing, colour-only hover) */
html body #view-upgrade .sp-spot-in small.sp-cap { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 96%; margin-top: 4px; overflow: visible; }
html body #view-upgrade .sp-cap > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html body #view-upgrade .sp-cap-btn {
  position: relative; display: grid; flex: none; place-items: center; width: 22px; height: 22px; min-width: 0; min-height: 0; padding: 0;
  border: 0; border-radius: 7px; background: transparent; color: #a99cf0; overflow: visible; cursor: pointer;
  box-shadow: none !important; transform: none !important; filter: none; transition: background-color .16s ease, color .16s ease;
}
html body #view-upgrade .sp-cap-btn::before { content: ""; position: absolute; inset: -6px -4px; }
html body #view-upgrade .sp-cap-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .07); color: #fff; }
html body #view-upgrade .sp-cap-btn:focus-visible { outline: 2px solid #b9a6ff; outline-offset: 0; }
html body #view-upgrade .sp-cap-btn:disabled { color: #4b4968; cursor: default; }
html body #view-upgrade .sp-cap-btn svg { width: 13px; height: 13px; }

/* simple result transitions: cross-fade on a win, grey fade on a loss */
@keyframes spOut { to { opacity: 0; transform: scale(.97); } }
@keyframes spIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes spFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spDim { to { opacity: .45; filter: grayscale(1) drop-shadow(0 14px 16px rgba(0, 0, 0, .5)); } }
html body #view-upgrade .sp-spot.win .sp-result .sp-art .out { animation: spOut .25s ease forwards; }
html body #view-upgrade .sp-spot.win .sp-result .sp-art .in { opacity: 0; animation: spIn .45s cubic-bezier(.22, .61, .36, 1) .12s forwards; }
html body #view-upgrade .sp-spot.win .sp-result :is(small, b) { animation: spFade .35s ease .2s both; }
html body #view-upgrade .sp-spot.lose .sp-result .sp-art img { animation: spDim .5s ease forwards; }
html body #view-upgrade .sp-spot.lose .sp-result :is(small, b) { animation: spFade .35s ease .15s both; }
html body #view-upgrade .sp-spot.lose .sp-result b { color: #ff9aa5; }

/* odds: chance + ×multiplier chip between the two tiles */
html body #view-upgrade .sp-odds { display: grid; justify-items: center; align-content: center; gap: 6px; min-width: 7.5rem; margin: 0; }
html body #view-upgrade .sp-pc { color: #fff; font-family: Benzin, Rubik, sans-serif; font-size: 36px; line-height: 1; white-space: nowrap; }
html body #view-upgrade .sp-pc small { margin-left: 2px; color: var(--sp-gold); font-size: .45em; }
html body #view-upgrade .sp-pc.is-off { color: #5f5d80; }
html body #view-upgrade .sp-mxw { display: flex; align-items: center; justify-content: center; height: 26px; }
html body #view-upgrade .sp-mx { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; border-radius: 9px; background: #35345a; color: #d8ccff; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; }
html body #view-upgrade .sp-mx svg { flex: none; width: 14px; height: 14px; color: #b9a9ff; }
html body #view-upgrade .sp-delta { font-family: Benzin, Rubik, sans-serif; line-height: 1; white-space: nowrap; animation: spFade .35s ease .2s both; }
html body #view-upgrade .sp-delta.is-win { color: #43e0a0; font-size: 24px; }
html body #view-upgrade .sp-delta.is-lose { color: #ff8b98; font-size: 22px; }
html body #view-upgrade .sp-odds [hidden] { display: none; }
html body #view-upgrade .sp-odds:has(> .sp-delta:not([hidden])) .sp-mxw { display: none; }

/* stake tile | odds | target tile (mirrored) */
html body #view-upgrade .sp-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 12px;
  width: 100%; max-width: 600px; margin: 10px auto 12px; padding: 0; background: none;
}
html body #view-upgrade .sp-ln {
  --rc: #55557a;
  position: relative; display: flex; min-width: 0; padding: 8px; border-radius: 16px; overflow: hidden; container-type: inline-size;
  background: radial-gradient(120% 140% at 50% 120%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%), #323250;
}
html body #view-upgrade .sp-ln::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 34px; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--rc); opacity: .9; transform: translateX(-50%);
}
html body #view-upgrade .sp-ln.is-none::after { display: none; }
html body #view-upgrade .sp-ln-in { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; text-align: left; }
html body #view-upgrade .sp-ln-b .sp-ln-in { flex-direction: row-reverse; text-align: right; }
html body #view-upgrade .sp-tx { min-width: 0; line-height: 1.2; }
html body #view-upgrade .sp-tx small { display: block; color: #8e8baf; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
html body #view-upgrade .sp-tx b { display: block; color: var(--sp-gold); font-size: 15px; font-weight: 700; white-space: nowrap; }
html body #view-upgrade .sp-tx i { display: block; overflow: hidden; color: #cfc8f5; font-size: 11.5px; font-style: normal; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
html body #view-upgrade .sp-tg { position: relative; flex: none; display: grid; place-items: center; width: 58px; height: 46px; border-radius: 12px; background: transparent; }
html body #view-upgrade .sp-tg img { max-width: 56px; max-height: 40px; object-fit: contain; }
html body #view-upgrade .sp-tg svg { width: 20px; height: 20px; color: #77749a; }
html body #view-upgrade .sp-coin { color: var(--sp-gold); font-family: Benzin, Rubik, sans-serif; font-size: 15px; line-height: 1; }
html body #view-upgrade .sp-tg.is-stack { background: var(--sp-raised); }
html body #view-upgrade .sp-tg.is-stack img { position: absolute; max-width: 40px; max-height: 28px; }
html body #view-upgrade .sp-tg.is-stack img:nth-of-type(1) { left: 3px; top: 4px; }
html body #view-upgrade .sp-tg.is-stack img:nth-of-type(2) { right: 3px; top: 4px; }
html body #view-upgrade .sp-tg.is-stack img:nth-of-type(3) { left: 50%; bottom: 3px; transform: translateX(-50%); }
html body #view-upgrade .sp-tg.is-stack em {
  position: absolute; right: -4px; top: -5px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #a99afb; color: #1b1830; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px #323250;
}
@container (max-width: 170px) {
  html body #view-upgrade .sp-ln-in,
  html body #view-upgrade .sp-ln-b .sp-ln-in { flex-direction: column; gap: 4px; text-align: center; }
  html body #view-upgrade .sp-tg { width: 100%; height: 40px; }
  html body #view-upgrade .sp-tg img { max-width: 76px; max-height: 38px; }
  html body #view-upgrade .sp-tg.is-stack { width: 64px; }
  html body #view-upgrade .sp-tx { width: 100%; }
}

/* presets: one pill row */
html body #view-upgrade .sp-seg {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 8px repeat(3, minmax(0, 1fr)); align-items: center; gap: 2px;
  width: 100%; max-width: 560px; margin: 0 auto 10px; padding: 4px; border-radius: 999px; background: #202033;
}
html body #view-upgrade .sp-chips { display: contents; }
html body #view-upgrade #wheelPanel .sp-chips button {
  width: 100%; height: 38px; min-height: 0; margin: 0; padding: 0 2px; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; color: #aeabcb !important; font-size: 14px; font-weight: 600;
  box-shadow: none !important; transform: none !important; transition: background-color .16s ease, color .16s ease;
}
html body #view-upgrade #wheelPanel .sp-chips button:hover { color: #fff !important; }
html body #view-upgrade #wheelPanel .sp-chips button.on { background: #a99afb !important; color: #1b1830 !important; }
html body #view-upgrade .sp-sep { justify-self: center; width: 4px; height: 4px; border-radius: 50%; background: #4a4a6c; }

/* main action */
html body #view-upgrade #wheelPanel.panel.center #go {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important;
  width: 100% !important; max-width: 560px !important; height: 56px !important; min-height: 56px !important; max-height: none !important;
  margin: 0 auto !important; padding: 0 20px !important; border: 0 !important; border-radius: 999px !important;
  color: #fff !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 2.6px !important;
  text-transform: uppercase !important; box-shadow: none !important; transform: none !important; align-self: center !important;
  transition: filter .16s ease, background-color .16s ease !important;
}
html body #view-upgrade #wheelPanel.panel.center #go:not(:disabled) { background: var(--sp-grad) !important; }
html body #view-upgrade #wheelPanel.panel.center #go:not(:disabled):hover { filter: brightness(1.07) !important; }
html body #view-upgrade #wheelPanel.panel.center #go:disabled { background: #393954 !important; color: #8d8aac !important; filter: none !important; cursor: default !important; }
html body #view-upgrade #wheelPanel.panel.center #go .go-icon { flex: none; width: 22px !important; height: 21px !important; margin: 0 !important; }
html body #view-upgrade #wheelPanel.panel.center #go .go-label { letter-spacing: inherit; }

/* desktop: the board is content-sized (theme), so the orbit size is what fits the first screen */
@media (min-width: 1200px) {
  html body #view-upgrade .upgrade-grid { grid-template-columns: minmax(min(21.5rem, 30%), 1fr) minmax(20rem, 1.55fr) minmax(min(21.5rem, 30%), 1fr) !important; }
}

/* tablets and touch landscape: orbit left, odds/summary/presets/action right */
@media (max-width: 1199px) and (min-width: 761px), (min-width: 640px) and (max-width: 960px) and (max-height: 500px) {
  html body #view-upgrade #wheelPanel.panel.center.sp-play {
    --sp-orbit: min(100%, 19rem);
    display: grid !important; grid-template-columns: minmax(12rem, .9fr) minmax(0, 1.1fr) !important;
    grid-template-rows: auto auto auto 1fr auto !important; column-gap: 1.25rem !important; row-gap: 0 !important; align-items: center !important;
  }
  html body #view-upgrade #wheelPanel.panel.center.sp-play > .sp-slot { grid-column: 1 !important; grid-row: 1 / 6 !important; margin: 0 !important; }
  html body #view-upgrade #wheelPanel.panel.center.sp-play > .sp-line { grid-column: 2 !important; grid-row: 1 !important; margin: 40px 0 12px; }
  html body #view-upgrade #wheelPanel.panel.center.sp-play > .sp-seg { grid-column: 2 !important; grid-row: 2 !important; }
  html body #view-upgrade #wheelPanel.panel.center.sp-play > #go { grid-column: 2 !important; grid-row: 5 !important; align-self: end !important; }
}
@media (min-width: 640px) and (max-width: 960px) and (max-height: 500px) {
  html body #view-upgrade #wheelPanel.panel.center.sp-play { --sp-orbit: min(100%, 17rem); padding: 12px 16px 14px !important; }
  html body #view-upgrade #wheelPanel.panel.center.sp-play .sp-pc { font-size: 28px; }
  html body #view-upgrade #wheelPanel.panel.center.sp-play > .sp-line { gap: 8px; margin: 36px 0 8px; }
  html body #view-upgrade #wheelPanel.panel.center.sp-play .sp-odds { min-width: 6rem; gap: 4px; }
  html body #view-upgrade #wheelPanel.panel.center.sp-play .sp-ln { padding: 6px; }
  html body #view-upgrade #wheelPanel.panel.center.sp-play .sp-tg { width: 52px; height: 40px; }
  html body #view-upgrade #wheelPanel.panel.center.sp-play .sp-chips button { height: 32px; font-size: 13px; }
  html body #view-upgrade #wheelPanel.panel.center.sp-play > .sp-seg { margin-bottom: 6px; }
  html body #view-upgrade #wheelPanel.panel.center #go { height: 48px !important; min-height: 48px !important; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  html body #view-upgrade .upgrade-grid > .panel.sp-side { padding: 14px !important; }
  html body #view-upgrade .sp-head h2 { font-size: 17px; }
  html body #view-upgrade #wheelPanel.panel.center.sp-play { --sp-orbit: min(20rem, 86%); padding: 14px 14px 16px !important; }
  html body #view-upgrade #wheelPanel.panel.center > .sp-slot { margin-top: 4px; }
  html body #view-upgrade #wheelPanel .sp-quick { top: 12px; right: 12px; justify-content: center; gap: 0; width: 32px; padding: 0; font-size: 0; }
  html body #view-upgrade .sp-line { gap: 8px; margin: 8px 0 10px; }
  html body #view-upgrade .sp-odds { min-width: 6rem; gap: 4px; }
  html body #view-upgrade .sp-pc { font-size: 28px; }
  html body #view-upgrade .sp-ln { padding: 6px; }
  html body #view-upgrade .sp-ln .sp-tx i { display: none; }
  html body #view-upgrade #wheelPanel .sp-chips button { height: 34px; font-size: 13px; }
  html body #view-upgrade #wheelPanel.panel.center #go { height: 52px !important; min-height: 52px !important; }
}
html body #view-upgrade.upgrade-narrow .sp-ln { cursor: pointer; }
html body #view-upgrade.upgrade-narrow .sp-empty { cursor: pointer; }
html body #view-upgrade.upgrade-narrow .sp-cap-btn::before { inset: -9px -6px; }

/* phone tabs: count badge on Предметы */
html body #view-upgrade .upgrade-workflow button { display: flex; align-items: center; justify-content: center; gap: 6px; }
html body #view-upgrade .sp-tab-n {
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); font-size: 11px; font-style: normal; font-weight: 700; line-height: 1;
}
html body #view-upgrade .sp-tab-n[hidden] { display: none; }
html body #view-upgrade .upgrade-workflow button[aria-pressed="true"] .sp-tab-n { background: rgba(27, 24, 48, .16); }

/* phone shortcuts under the board: "Мои предметы" on the upgrade tab, floating "К апгрейду" on the pickers */
/* the pickers fill the board height, so the board never gets shorter than a usable list */
html body #view-upgrade.upgrade-narrow #wheelPanel.panel.center.sp-play { min-height: 360px !important; }
html body #view-upgrade.upgrade-narrow .upgrade-panel-actions { height: 62px; margin-top: 12px !important; }
html body #view-upgrade.upgrade-narrow:is([data-upgrade-panel="inventory"], [data-upgrade-panel="target"]) .upgrade-panel-actions {
  position: sticky; bottom: calc(var(--bottom-nav, 4.5rem) + 12px); z-index: 6; pointer-events: none;
}
html body #view-upgrade.upgrade-narrow[data-upgrade-panel="play"] .upgrade-panel-jump.sp-items[data-for="play"] {
  display: flex !important; align-items: center; gap: 12px; width: 100% !important; height: 62px; min-height: 0 !important;
  margin: 0 !important; padding: 10px 10px 10px 12px !important; border: 0 !important; border-radius: 20px !important;
  background: var(--sp-panel) !important; color: var(--sp-text) !important; text-align: left; box-shadow: none !important;
  filter: none !important; transform: none !important; transition: background-color .16s ease !important;
}
html body #view-upgrade.upgrade-narrow .sp-items:hover { background: #36364f !important; }
html body #view-upgrade .sp-stk { display: flex; flex: none; }
html body #view-upgrade .sp-stk:empty { display: none; }
html body #view-upgrade .sp-stk span {
  display: grid; place-items: center; width: 46px; height: 38px; margin-left: -16px; border-radius: 11px;
  background: var(--sp-raised); box-shadow: 0 0 0 3px var(--sp-panel);
}
html body #view-upgrade .sp-stk span:first-child { margin-left: 0; }
html body #view-upgrade .sp-stk img { max-width: 42px; max-height: 32px; object-fit: contain; }
html body #view-upgrade .sp-items-tx { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
html body #view-upgrade .sp-items-tx b { display: block; color: #fff; font-size: 15px; font-weight: 700; }
html body #view-upgrade .sp-items-tx small { display: block; overflow: hidden; color: #b9b5d8; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
html body #view-upgrade .sp-items-ch { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #3d3d60; color: #fff; }
html body #view-upgrade .sp-items.is-need .sp-items-ch { background: var(--sp-grad); }
html body #view-upgrade .sp-items-ch svg { width: 16px; height: 16px; }
html body #view-upgrade.upgrade-narrow[data-upgrade-panel="inventory"] .upgrade-panel-jump.sp-float[data-for="inventory"],
html body #view-upgrade.upgrade-narrow[data-upgrade-panel="target"] .upgrade-panel-jump.sp-float[data-for="target"] {
  display: flex !important; align-items: center; gap: 10px; width: auto !important; height: 48px; min-height: 0 !important;
  margin: 7px auto 0 !important; padding: 0 20px !important; border: 0 !important; border-radius: 999px !important;
  background: var(--sp-grad) !important; color: #fff !important; font-size: 14px; font-weight: 700;
  box-shadow: 0 12px 28px rgba(60, 30, 140, .55) !important; filter: none !important; transform: none !important;
  pointer-events: auto; transition: filter .16s ease !important;
}
html body #view-upgrade.upgrade-narrow .sp-float:has(.sp-float-pct:not([hidden])) { padding-right: 6px !important; }
html body #view-upgrade.upgrade-narrow .sp-float:hover { filter: brightness(1.07) !important; }
html body #view-upgrade .sp-float-pct { padding: 7px 11px; border-radius: 999px; background: rgba(20, 10, 50, .28); font-family: Benzin, Rubik, sans-serif; font-size: 13px; font-weight: 700; }
html body #view-upgrade .sp-float-pct[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  html body #view-upgrade :is(.sp-trail, .sp-mk, .sp-spot, #wheelPanel.sp-play) { transition: none !important; }
  html body #view-upgrade :is(.sp-result, .sp-result *, .sp-delta) { animation-duration: .01ms !important; animation-delay: 0s !important; }
}