/* Free-demo upgrader — layered on top of demo.css (reuses .demo-* + .rc-*). */

.demo-upgrade .up-cols{
  display:grid; grid-template-columns:1fr 230px 1fr; gap:18px; align-items:start;
}
@media(max-width:980px){ .demo-upgrade .up-cols{grid-template-columns:1fr} }

.demo-upgrade .up-h{
  color:#c3dcff; font-weight:700; font-size:14px; margin-bottom:10px;
}
.demo-upgrade .up-h span{color:#6f7789; font-weight:400; font-size:12px}

.demo-upgrade .demo-grid{
  grid-template-columns:repeat(auto-fill,minmax(138px,1fr));
  max-height:430px; overflow-y:auto; padding-right:4px;
}
.demo-upgrade .demo-card{
  cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .05s;
}
.demo-upgrade .demo-card:hover{border-color:#f6a45a}
.demo-upgrade .demo-card:active{transform:translateY(1px)}
.demo-upgrade .demo-card.sel{
  border-color:#f6a45a; box-shadow:0 0 0 2px rgba(246,164,90,.35);
}
.demo-upgrade .demo-card .ch{
  display:flex; justify-content:space-between; margin-top:6px; font-size:11px;
}
.demo-upgrade .demo-card .ch .c{color:#5ee08a; font-weight:700}
.demo-upgrade .demo-card .ch .x{color:#f6a45a; font-weight:700}

/* middle column */
.demo-upgrade .up-mid{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center; padding-top:28px;
}
.demo-upgrade .up-chance b{display:block; font-size:36px; color:#fff; line-height:1}
.demo-upgrade .up-chance span{
  color:#8b93a4; font-size:11px; text-transform:uppercase; letter-spacing:.6px;
}
.demo-upgrade .up-mult{color:#f6a45a; font-weight:700; font-size:13px; min-height:18px}

.demo-upgrade .up-bar{
  position:relative; width:100%; height:14px; border-radius:999px;
  background:#3a2530; border:1px solid #26303f; overflow:visible;
}
.demo-upgrade .up-bar-win{
  position:absolute; left:0; top:0; bottom:0; width:0; border-radius:999px 0 0 999px;
  background:linear-gradient(90deg,#2e7d4f,#5ee08a); transition:width .2s ease;
}
.demo-upgrade .up-marker{
  position:absolute; top:-4px; left:0; width:3px; height:20px; border-radius:2px;
  background:#fff; box-shadow:0 0 9px 1px rgba(255,255,255,.85);
}
.demo-upgrade .up-legend{
  display:flex; justify-content:space-between; width:100%;
  font-size:10px; color:#6f7789; margin-top:-4px;
}

.demo-upgrade .up-empty{
  color:#8b93a4; padding:34px 10px; text-align:center; font-size:14px;
  border:1px dashed #2a3242; border-radius:10px;
}
.demo-upgrade .up-empty a{color:#f6a45a; text-decoration:none}
.demo-upgrade .up-empty a:hover{text-decoration:underline}

.demo-result.lose{border-left-color:#eb4b4b}
.demo-result.lose .rinfo .rr{color:#eb4b4b}