/* ---------- upgrade tab ---------- */
.up-dial { position: relative; width: 230px; height: 230px; margin: 6px auto 4px; }
.up-dial svg { width: 100%; height: 100%; overflow: visible; }
.up-dial { margin-top: 8px; }
.up-ring-outer { fill: none; stroke: #2e2c38; stroke-width: 1.5; }
.up-ring-bg { fill: none; stroke: #23222b; stroke-width: 18; }
/* Arcs are rotated so they stay centered on the bottom; JS sets dasharray and rotation together. */
.up-ring-win, .up-ring-outer-win {
  fill: none; stroke: url(#upGrad); stroke-linecap: butt;
  stroke-dasharray: 0 610; transform-origin: 100px 100px; transform: rotate(90deg);
  transition: stroke-dasharray .35s ease, transform .35s ease;
}
.up-ring-win { stroke-width: 18; filter: drop-shadow(0 0 6px rgba(249, 115, 22, .45)); }
.up-ring-outer-win { stroke-width: 1.5; }
.up-ring-inner { fill: #15141b; stroke: #1f1e27; stroke-width: 2; }
/* Small labels inside the band, readable over both the dark band and the fill. */
.up-scale text { fill: #b9b6c8; font: 700 7px Inter, sans-serif; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 1.6px; }
.up-needle { transform-origin: 100px 100px; }
/* Dark outline: the arrow sits on the yellow-red fill and would vanish without it. */
.up-needle path { fill: #fde047; stroke: #3b1d06; stroke-width: .9; stroke-linejoin: round; filter: drop-shadow(0 0 1.5px #f59e0b); }
.up-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; text-align: center; padding: 0 50px;
}
.up-center b { font: 700 34px/1 Inter, sans-serif; color: #a3e635; letter-spacing: -.02em; }
.up-center b.win { color: #4ade80; font-size: 30px; }
.up-center b.lose { color: #ef4444; font-size: 30px; }
.up-center span { margin-top: 4px; font-size: 12px; color: var(--muted); }

.up-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.up-box {
  min-height: 150px; padding: 10px; border-radius: var(--radius); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(80% 70% at 50% 40%, rgba(234, 179, 8, .14), transparent 75%), var(--card);
  border: 1px solid var(--line);
}
.up-box-target {
  background: radial-gradient(80% 70% at 50% 40%, color-mix(in srgb, var(--r) 30%, transparent), transparent 75%), var(--card);
  border-bottom: 3px solid var(--r);
}
.up-ph { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.up-ph b { font-size: 12.5px; line-height: 1.3; }
.up-ph small { font-size: 11px; color: var(--muted); }
.up-chev { width: 42px; height: 42px; fill: none; stroke: #eab308; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(234, 179, 8, .5)); }
.up-stack { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; max-width: 120px; }
.up-mini {
  width: 44px; height: 44px; border-radius: 10px; padding: 3px;
  background: var(--card-2); border-bottom: 2px solid var(--r, #e8c66a);
}
.up-mini svg, .up-mini img { width: 100%; height: 100%; object-fit: contain; }
.up-box-sum { display: flex; align-items: center; gap: 4px; font-size: 16px; }
.up-box-sum .coin { width: 17px; height: 17px; }
.up-box small { font-size: 11px; color: var(--muted); }
.up-target-art { width: 92px; height: 92px; }
.up-target-art svg, .up-target-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.up-box-target b { font-size: 13px; }

.up-coins { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.up-coins-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); }
.up-coins-row b { display: flex; align-items: center; gap: 4px; color: #eab308; font-size: 13px; }
.up-coins-row b small { color: var(--muted); font-weight: 500; }
.up-coins-row .coin { width: 15px; height: 15px; }
.up-coins input { width: 100%; margin: 8px 0 2px; accent-color: #eab308; }

.up-go {
  width: 100%; height: 54px; margin-top: 10px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 17px; color: #1a1405;
  background: linear-gradient(180deg, #facc15, #ca8a04); box-shadow: 0 8px 22px rgba(202, 138, 4, .3);
}
.up-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.up-go:disabled { opacity: .45; box-shadow: none; }
.up-go:not(:disabled):active { transform: scale(.985); }

.up-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.up-presets button {
  height: 38px; border-radius: 10px; font-weight: 700; font-size: 13px;
  background: var(--card-2); border: 1px solid var(--line);
}
.up-presets .p35 { color: #fca5a5; border-color: #7f1d1d; }
.up-presets .p55 { color: #bef264; border-color: #3f6212; }
.up-presets .p75 { color: #86efac; border-color: #166534; }

.cs-sub small { font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.up-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 22px 0 10px; }
.up-list-head .cs-sub { margin: 0; }
.up-sort {
  flex: none; display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 9px;
  font-size: 12px; font-weight: 600; color: #c4c1d4; background: var(--card-2); border: 1px solid var(--line);
}
.up-sort svg { width: 14px; height: 14px; fill: none; stroke: #facc15; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.up-coins input:disabled { opacity: .4; }
.up-more {
  display: block; width: 100%; height: 40px; margin-top: 8px; border-radius: 12px;
  font-weight: 700; font-size: 13px; color: #c4c1d4; background: var(--card); border: 1px solid var(--line);
}
.up-more:active { transform: scale(.99); }
.up-pick { display: block; padding: 0; text-align: left; border-radius: 14px; }
.up-pick .item { height: 100%; }
.up-pick.on .item { box-shadow: 0 0 0 2px #facc15; }
.up-pick.on .item::after {
  content: "✓"; position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #1a1405; background: #facc15;
}
.up-pick.off { opacity: .35; }