@property --fill {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.upgrade {
  --up-panel: rgba(27, 31, 37, .78);
  --up-bar: rgba(40, 44, 51, .92);
  --up-btn: #33373d;
  --up-orange: #f08a12;
  --up-text: #d9dcdf;
  padding: 14px 3.5% 34px;
  background:
    radial-gradient(ellipse 30% 26% at 50% 66%, rgba(255, 126, 26, .32), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 18%, rgba(118, 144, 166, .22), transparent 70%),
    linear-gradient(180deg, #34404b 0%, #222b33 45%, #1d2228 75%, #262320 100%);
  color: var(--up-text);
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}

.upgrade button { font: inherit; cursor: pointer; }
.upgrade button:disabled { cursor: not-allowed; }
.upgrade svg { display: block; }

.up-coin { display: inline-block !important; width: 13px; height: 13px; margin-left: 3px; vertical-align: -1px; fill: currentColor; }
.up-coin .up-coin-cut { fill: rgba(0,0,0,.55); }
.up-price { white-space: nowrap; }

/* Тулбар демо-режима */
.up-toolbar { display: flex; align-items: center; gap: 10px; min-height: 30px; margin-bottom: 14px; font-size: 13px; }
.up-demo { padding: 4px 9px; border-radius: 3px; background: var(--up-orange); color: #1b1d20; font-weight: 700; letter-spacing: .5px; }
.up-toolbar-balance { color: #aeb3b8; }
.up-toolbar-balance .up-price { color: #fff; font-weight: 700; }
.up-toolbar button { height: 28px; padding: 0 12px; border: 0; border-radius: 3px; background: var(--up-btn); color: #c9ccd0; font-size: 12px; text-transform: uppercase; }
.up-toolbar button:hover { background: #3f444b; color: #fff; }

/* Сетка рядов */
.up-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 406px) minmax(0, 1fr); gap: 20px; }
.up-row + .up-row { margin-top: 20px; }
.up-row-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.up-panel { min-width: 0; background: var(--up-panel); backdrop-filter: blur(6px); }

/* Верхние слоты */
.up-slot { display: flex; flex-direction: column; min-height: 460px; }
.up-panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0 10px 0 20px; background: var(--up-bar); font-size: 15px; }
.up-clear { height: 34px; padding: 0 18px; border: 0; border-radius: 2px; background: var(--up-btn); color: #fff; font-size: 14px !important; font-weight: 700; }
.up-clear:hover:not(:disabled) { background: #444950; }
.up-slot-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 18px; }

.up-stake-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; align-self: flex-start; }
.up-balance-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 118px; border: 1px dashed rgba(255,255,255,.2); color: #fff; font-size: 20px; font-weight: 700; }
.up-balance-chip span { color: #9ba0a5; font-size: 12px; font-weight: 400; text-transform: uppercase; }

.up-target-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.up-target-meta { color: #aeb3b8; font-size: 15px; }
.up-target-meta b { color: var(--up-orange); font-size: 18px; }

/* Центр: логотип и колесо */
.up-centre-col { display: flex; flex-direction: column; align-items: center; }
.up-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; }
.up-logo img { width: 150px; height: auto; }
.up-centre-col > [data-region="wheel"] { display: flex; justify-content: center; width: 100%; }

.up-wheel { position: relative; width: min(380px, 100%); aspect-ratio: 1; margin-top: 12px; }
.up-ticks { position: absolute; inset: 0; width: 100%; height: 100%; stroke: rgba(170, 178, 186, .35); stroke-width: 1.5; }
.up-ticks .is-major { stroke: rgba(200, 206, 212, .6); stroke-width: 2.5; }

.up-dial {
  position: absolute;
  inset: 8.5%;
  border-radius: 50%;
  background:
    conic-gradient(from calc(180deg - var(--fill) / 2), transparent 0 var(--fill), #121417 var(--fill) 360deg),
    linear-gradient(0deg, #8a3a03 0%, #d96a0b 35%, #f39a1b 80%, #ffb43a 100%);
  box-shadow: 0 0 0 9px #2c3036, 0 0 0 11px #3b4046, 0 18px 50px rgba(0,0,0,.55);
  transition: --fill .35s ease;
}
.up-mark { position: absolute; z-index: 1; color: rgba(255,255,255,.4); font-size: 12px; font-weight: 700; }
.up-mark-top { top: 5%; left: 50%; transform: translateX(-50%); }
.up-mark-left { top: 50%; left: 3%; transform: translateY(-50%); }
.up-mark-right { top: 50%; right: 3%; transform: translateY(-50%); }

.up-core {
  position: absolute;
  inset: 15%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #1d2024 0%, #111316 75%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.06), inset 0 0 30px rgba(0,0,0,.8), 0 0 24px rgba(0,0,0,.6);
}
.up-emblem { position: absolute; width: 74%; height: 74%; fill: none; stroke: var(--up-orange); stroke-width: 3; opacity: .55; }
.up-emblem path + path { stroke-width: 6; opacity: .7; }
.up-readout { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.up-readout strong { color: #fff; font-size: clamp(30px, 4vw, 42px); font-weight: 700; line-height: 1; }
.up-readout span { max-width: 160px; margin-top: 4px; color: #fff; font-size: 12px; letter-spacing: .3px; }
.up-readout .is-win { color: #3be08a; }
.up-readout .is-lose { color: #ff5d4d; }
.up-readout .is-lucky { color: #ffd34d; font-size: clamp(26px, 3.4vw, 36px); text-shadow: 0 0 18px rgba(255, 200, 60, .8), 0 2px 8px rgba(0,0,0,.9); }
.up-wheel.is-lucky .up-dial { box-shadow: 0 0 0 9px #2c3036, 0 0 0 11px #ffcf4a, 0 0 60px rgba(255, 200, 60, .55), 0 18px 50px rgba(0,0,0,.55); animation: up-lucky-glow 1.6s ease-in-out 3; }
@keyframes up-lucky-glow { 50% { box-shadow: 0 0 0 9px #2c3036, 0 0 0 11px #fff1a8, 0 0 90px rgba(255, 210, 80, .9), 0 18px 50px rgba(0,0,0,.55); } }

.up-pointer { position: absolute; inset: 8.5%; pointer-events: none; }
.up-pointer span {
  position: absolute;
  bottom: -3%;
  left: 50%;
  width: 34px;
  height: 40px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ffd27a, #f7931e 55%, #c75a05);
  clip-path: polygon(50% 0, 100% 100%, 50% 80%, 0 100%);
  filter: drop-shadow(0 0 8px rgba(255, 150, 30, .9));
}
.up-pointer.is-spinning { transition: transform 4.5s cubic-bezier(.12, .78, .16, 1); }

/* Ряд управления */
.up-row-controls > * { min-height: 62px; }
.up-balance { display: flex; align-items: center; gap: 18px; padding: 0 20px; }
.up-balance-label { color: #aeb3b8; font-size: 14px; font-weight: 700; line-height: 1.25; }
.up-range { flex: 1; }
.up-range input { width: 100%; height: 6px; margin: 0; appearance: none; border-radius: 3px; background: #3a3f45; cursor: pointer; }
.up-range input::-webkit-slider-thumb { width: 17px; height: 13px; appearance: none; border-radius: 2px; background: #fff; }
.up-range input::-moz-range-thumb { width: 17px; height: 13px; border: 0; border-radius: 2px; background: #fff; }
.up-balance-value { display: flex; flex-direction: column; align-items: center; min-width: 66px; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.1); }
.up-balance-value strong { color: #fff; font-size: 18px; }
.up-balance-value span { color: #9ba0a5; font-size: 12px; }

.up-go {
  width: 100%;
  height: 100%;
  min-height: 62px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, #f6a02a, #d8700c);
  color: #fff;
  font-size: 25px !important;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 0 28px rgba(240,138,18,.35);
}
.up-go { position: relative; }
.up-go:hover:not(:disabled) { filter: brightness(1.08); }
.up-lucky-tag {
  position: absolute;
  top: -11px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffd85a, #f5a623);
  color: #2a1a00;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  box-shadow: 0 0 14px rgba(255, 200, 60, .7);
  animation: up-lucky-pulse 1.4s ease-in-out infinite;
}
@keyframes up-lucky-pulse { 50% { box-shadow: 0 0 22px rgba(255, 210, 80, 1); } }
.up-go:disabled { background: rgba(44,48,54,.92); color: #8b9096; box-shadow: none; }

.up-picks { display: flex; align-items: center; gap: 9px; padding: 9px; background: none; backdrop-filter: none; }
.up-pick { flex: 1; height: 44px; border: 0; border-radius: 2px; background: var(--up-btn); color: #c9ccd0; font-size: 17px !important; }
.up-pick:hover:not(:disabled) { background: #444950; color: #fff; }
.up-pick:disabled { opacity: .55; }
.up-pick-auto { display: grid; place-items: center; border: 1px solid #5ff09a; background: #27a55a; color: #fff; }
.up-pick-auto:hover:not(:disabled) { background: #2fbd68; }
.up-pick-auto svg { width: 24px; height: 24px; fill: currentColor; }

/* Списки */
.up-list { display: flex; flex-direction: column; }
.up-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 10px 20px; background: var(--up-bar); }
.up-list-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font-size: 19px; font-weight: 700; }
.up-list-head h2 svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.up-list-head h2 svg .is-solid { fill: #fff; stroke: none; }
.up-list-tools { display: flex; align-items: center; gap: 12px; }

.up-icon-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: #c9ccd0; }
.up-icon-btn:hover { color: #fff; }
.up-icon-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.up-divider { width: 1px; height: 30px; background: rgba(255,255,255,.12); }

.up-price-filter { display: flex; align-items: center; gap: 10px; color: #aeb3b8; font-size: 16px; }
.up-price-filter input, .up-search {
  width: 96px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 2px;
  background: #1b1e22;
  color: #fff;
  font: inherit;
  font-size: 15px;
}
.up-price-filter input::-webkit-inner-spin-button { appearance: none; }
.up-search { width: 150px; }
.up-price-filter input:focus, .up-search:focus { outline: 1px solid var(--up-orange); }

.up-list-body { flex: 1; min-height: 300px; }
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 13px; max-height: 556px; padding: 20px; overflow-y: auto; }

.up-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 300px; padding: 20px; text-align: center; }
.up-empty-state strong { color: #fff; font-size: 21px; }
.up-empty-state span { color: #9ba0a5; font-size: 16px; }
.up-green { display: inline-flex; align-items: center; height: 38px; margin-top: 18px; padding: 0 30px; border: 1px solid #5ff09a; background: #27a55a; color: #fff; font-size: 15px !important; font-weight: 700; }
.up-green:hover { background: #2fbd68; }

/* Карточка предмета */
.up-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  height: 125px;
  padding: 0 4px 7px;
  overflow: hidden;
  border: 0;
  border-bottom: 5px solid var(--rarity);
  background: radial-gradient(ellipse at 50% 42%, #8e9296 0%, #686c71 42%, #4b4f54 100%);
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0,0,0,.7);
  transition: filter .15s ease, box-shadow .15s ease;
}
.up-card:hover:not(:disabled) { filter: brightness(1.12); }
.up-card.is-active { box-shadow: inset 0 0 0 2px var(--up-orange); }
.up-card:disabled { filter: grayscale(.4) brightness(.55); }
.up-card-price { position: absolute; z-index: 1; top: 5px; right: 6px; font-size: 14px; font-weight: 700; }
.up-card-wear { position: absolute; z-index: 1; top: 24px; right: 6px; color: #e1e3e5; font-size: 12px; font-weight: 700; }
.up-card-name, .up-card-skin { position: relative; z-index: 1; }
.up-card-art { position: absolute; top: 6px; left: 4%; width: 92%; height: 92px; object-fit: cover; filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)); pointer-events: none; user-select: none; transition: transform .2s ease; }
.up-card:hover:not(:disabled) .up-card-art { transform: scale(1.06); }
.up-card-name { overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.up-card-skin { overflow: hidden; font-size: 13px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }

.up-card.is-large { width: min(260px, 100%); height: 190px; }
.up-card.is-large .up-card-art { top: 8px; height: 140px; }
.up-card.is-large .up-card-name, .up-card.is-large .up-card-skin { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .up-pointer.is-spinning { transition-duration: .8s; }
  .up-lucky-tag, .up-wheel.is-lucky .up-dial { animation: none; }
}

@media (max-width: 1100px) {
  .upgrade { display: flex; flex-direction: column; gap: 16px; }
  .up-toolbar { margin-bottom: 0; }
  .up-row-stage, .up-row-controls { display: contents; }
  .up-row + .up-row { margin-top: 0; }
  .up-centre-col { order: 1; }
  .up-row-controls > [data-region="go"] { order: 2; }
  .up-picks { order: 3; padding: 0; }
  .up-row-stage > .up-slot:first-child { order: 4; }
  .up-balance { order: 5; }
  .up-row-stage > .up-slot:last-child { order: 6; }
  .up-row-lists { order: 7; grid-template-columns: 1fr; }
  .up-slot { min-height: 220px; }
}

@media (max-width: 560px) {
  .upgrade { padding: 12px 12px 26px; }
  .up-toolbar { flex-wrap: wrap; }
  .up-panel-bar { font-size: 13px; }
  .up-stake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-picks { flex-wrap: wrap; }
  .up-pick { flex: 1 0 calc(25% - 9px); }
  .up-list-head { padding: 10px 14px; }
  .up-price-filter input { width: 70px; }
  .up-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; padding: 14px; }
}