/* Color Pick UI */
.colorpick-screen{padding:0 0 calc(var(--bh) + 20px);}
.colorpick-hero{
  padding:20px 16px 16px;
  background:radial-gradient(ellipse 100% 80% at 50% 0%,#1a2840,#0a1525 70%);
  border-bottom:1px solid var(--border2);
}
.colorpick-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;}
.colorpick-wallet strong{color:var(--cyan);font-size:13px;}
.colorpick-stage{text-align:center;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.colorpick-stage.drawing .colorpick-result-ball{animation:cpPulse .6s ease-in-out infinite;}
.colorpick-hint{font-size:12px;color:var(--text2);margin:0;}
.colorpick-result-ball{display:flex;flex-direction:column;align-items:center;gap:8px;}
.cp-win-label{font-size:14px;font-weight:800;color:var(--white);}

.cp-ball{
  width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#ffffff55,var(--ball) 45%,var(--ball-dark) 100%);
  box-shadow:0 8px 24px #00000055,inset 0 -6px 12px #00000033,inset 0 6px 12px #ffffff33;
  position:relative;
}
.cp-ball-lg{width:96px;height:96px;}
.cp-ball-shine{
  position:absolute;top:14%;left:22%;width:28%;height:18%;
  background:linear-gradient(135deg,#ffffffaa,transparent);border-radius:50%;filter:blur(1px);
}
.cp-ball.bounce{animation:cpBounce .8s cubic-bezier(.34,1.56,.64,1);}
@keyframes cpBounce{0%{transform:scale(0);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes cpPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.colorpick-balls{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;
}
.cp-ball-wrap{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 6px;border-radius:14px;border:2px solid transparent;
  background:transparent;cursor:pointer;transition:all .2s;
}
.cp-ball-wrap .cp-ball{width:56px;height:56px;}
.cp-ball-wrap.on{border-color:var(--gold);background:#f5a62312;box-shadow:0 0 20px #f5a62322;}
.cp-ball-wrap:hover{transform:translateY(-3px);}
.cp-ball-label{font-size:11px;font-weight:700;color:var(--white);}
.cp-ball-mult{font-size:10px;color:var(--cyan);font-weight:700;}

.colorpick-controls{padding:0 16px 16px;}
.colorpick-play{
  width:100%;margin-top:10px;padding:14px;border:none;border-radius:12px;
  background:linear-gradient(135deg,#c9a227,#f5a623);color:#1a1200;
  font-size:15px;font-weight:800;cursor:pointer;
}
.colorpick-play:disabled{opacity:.55;cursor:not-allowed;}

.colorpick-banner{margin-top:12px;}
.colorpick-result{padding:12px;border-radius:10px;font-weight:700;text-align:center;opacity:0;transform:translateY(6px);transition:all .35s;}
.colorpick-result.show{opacity:1;transform:translateY(0);}
.colorpick-result.win{background:#003018;border:1px solid var(--green);color:var(--green);}
.colorpick-result.lose{background:#280810;border:1px solid var(--red);color:var(--red);}

.colorpick-help{margin:0 16px;background:var(--card);border:1px solid var(--border);border-radius:14px;}
.colorpick-help summary{padding:14px 16px;cursor:pointer;font-weight:700;color:var(--white);list-style:none;}
.colorpick-help summary::-webkit-details-marker{display:none;}
.colorpick-help-body{padding:0 16px 16px;font-size:12px;color:var(--text2);line-height:1.7;}
.colorpick-help-body ol{margin:0;padding-left:18px;}

@media(min-width:400px){
  .colorpick-balls{grid-template-columns:repeat(6,1fr);}
}