/* Upgrader quick-selection row + «Настройки» dialog + empty stake/target tiles
   (owner 2026-10-12). Loads after upgrader-spotlight.css. */

/* ---------- quick row: ×2 ×5 ×10 | 30% 50% 70% | ⚙ — separate tiles ---------- */
html body #view-upgrade .sp-seg {
  grid-template-columns: repeat(6, minmax(0, 1fr)) 40px;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  background: none;
}
html body #view-upgrade #wheelPanel .sp-chips button,
html body #view-upgrade #wheelPanel .sp-cfg {
  position: relative;
  height: 40px;
  border-radius: 11px !important;
  background: #29293f !important;
  color: #cfcbea !important;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html body #view-upgrade #wheelPanel .sp-chips button:hover,
html body #view-upgrade #wheelPanel .sp-cfg:hover { background: #33334d !important; color: #fff !important; }
html body #view-upgrade #wheelPanel .sp-chips button.on { background: #a99afb !important; color: #1b1830 !important; }
html body #view-upgrade #wheelPanel .sp-cfg {
  position: relative;
  height: 40px;
  border-radius: 11px !important;
  background: #29293f !important;
  color: #cfcbea !important;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html body #view-upgrade #wheelPanel .sp-chips button:hover,
html body #view-upgrade #wheelPanel .sp-cfg:hover { background: #33334d !important; color: #fff !important; }
html body #view-upgrade #wheelPanel .sp-chips button.on { background: #a99afb !important; color: #1b1830 !important; }
/* chance tiles carry a small risk bar: red long shot → amber → green safe */
html body #view-upgrade #wheelPanel .sp-cfg {
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 !important;
  box-shadow: none !important;
  color: #a99bff !important;
  transition: background-color .16s ease, color .16s ease;
}
html body #view-upgrade #wheelPanel .sp-cfg svg { width: 19px; height: 19px; }
html body #view-upgrade #wheelPanel .sp-cfg:focus-visible,
html body #view-upgrade #wheelPanel .sp-chips button:focus-visible { outline: 2px solid #aa96f4 !important; outline-offset: 2px !important; }
@media (max-width: 760px) {
  html body #view-upgrade .sp-seg { grid-template-columns: repeat(6, minmax(0, 1fr)) 36px; gap: 5px; }
  html body #view-upgrade #wheelPanel .sp-chips button,
  html body #view-upgrade #wheelPanel .sp-cfg { height: 38px; font-size: 13px; }
  html body #view-upgrade #wheelPanel .sp-cfg { width: 36px; }
}

/* ---------- empty stake / target tiles: chevrons instead of +, target and dashes ---------- */
html body #view-upgrade .sp-tg svg.sp-logo { width: 30px; height: 28px; color: #5f5c86; }
html body #view-upgrade .sp-ln.is-none .sp-tx b:empty { display: none; }
/* no multiplier yet: drop its reserved row so the % sits in the true middle of the tiles */
html body #view-upgrade .sp-odds:has(#spMult[hidden]):has(.sp-delta[hidden]) .sp-mxw { display: none; }

/* ---------- «Настройки» dialog ---------- */
.qc-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(12, 11, 24, .66);
}
.qc-modal[hidden] { display: none; }
.qc-card {
  width: min(100%, 520px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border-radius: 20px;
  background: #2a2a40;
  color: #f5f3ff;
  font-family: Rubik, sans-serif;
  animation: qc-in .22s cubic-bezier(.22, .61, .36, 1);
}
@keyframes qc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.qc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: #24243a;
}
.qc-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #fff;
  font: 700 19px/1 Rubik, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.qc-head h2 svg { width: 20px; height: 20px; color: #a99bff; }
.qc-x {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #9c97ba;
  cursor: pointer;
}
.qc-x:hover { background: #33334d; color: #fff; }
.qc-x svg { width: 18px; height: 18px; }
.qc-body { padding: 18px 20px 20px; }
.qc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qc-top h3 { margin: 0; color: #fff; font: 700 16px/1.2 Rubik, sans-serif; letter-spacing: 0; text-transform: none; }
.qc-default {
  min-height: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #a99bff;
  font: 600 13px/1 Rubik, sans-serif;
  cursor: pointer;
}
.qc-default:hover { color: #c9bfff; }
.qc-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qc-group { padding: 14px; border-radius: 14px; background: #323250; }
.qc-group p { margin: 0 0 12px; color: #b8b6d0; font: 500 13px/1.4 Rubik, sans-serif; }
.qc-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 30px; align-items: center; gap: 6px; }
.qc-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 44px;
  padding: 0 6px;
  border-radius: 10px;
  background: #24243a;
  box-shadow: inset 0 0 0 1.5px transparent;
  cursor: text;
  transition: box-shadow .15s ease;
}
.qc-in:focus-within { box-shadow: inset 0 0 0 1.5px #aa96f4; }
.qc-in.is-bad { box-shadow: inset 0 0 0 1.5px #ee6360; }
.qc-in span { color: #77749a; font: 700 15px/1 Rubik, sans-serif; }
.qc-in input {
  width: 100%;
  min-width: 0;
  max-width: 3.4ch;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none !important;
  background: transparent;
  color: #fff;
  font: 700 16px/1 Rubik, sans-serif;
  text-align: center;
}
.qc-in input:focus-visible { outline: none !important; }
.qc-in.is-pct input { max-width: 2.6ch; text-align: right; }
.qc-reset {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #a99bff;
  cursor: pointer;
}
.qc-reset:hover { background: #3a3a5a; }
.qc-reset svg { width: 18px; height: 18px; }
.qc-hint { display: block; margin-top: 8px; color: #77749a; font: 500 11.5px/1 Rubik, sans-serif; }
.qc-save {
  display: block;
  width: 100%;
  height: 50px;
  margin-top: 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(115deg, #a34ef4, #7265fd);
  color: #fff;
  font: 400 15px/1 Benzin, Rubik, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .15s ease, opacity .15s ease;
}
.qc-save:hover { filter: brightness(1.07); }
.qc-save:disabled { opacity: .45; cursor: default; filter: none; }
.qc-x:focus-visible, .qc-default:focus-visible, .qc-reset:focus-visible, .qc-save:focus-visible { outline: 2px solid #aa96f4; outline-offset: 2px; }
/* phones: the same centred card, groups stacked */
@media (max-width: 560px) {
  .qc-head { padding: 16px 16px; }
  .qc-body { padding: 16px; }
  .qc-groups { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .qc-card { animation: none; } }
/* the site-wide input skin draws its own box; inside .qc-in the field is bare text */
html body #quickCfg .qc-in input,
html body #quickCfg .qc-in input:focus,
html body #quickCfg .qc-in input:hover {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
  font: 700 16px/1 Rubik, sans-serif !important;
}