/* ===== 开奖动画覆盖层:三款游戏共用
       JS 侧入口 js/draw-anim.js 的 playDrawAnimation() 会把
       .draw-overlay 追加到具体弹窗内,依次生成 N 颗 .draw-ball,
       每颗球 rolling(抖动 + 数字滚动)后 settled(落定 + 弹性 scale)
       并由 colorClassFor 附加 b-red/.../c-N 配色
===== */

.draw-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.draw-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.draw-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 18px;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.draw-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 14px;
    padding: 18px 20px;
    max-width: 320px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.draw-ball {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-weight: 800;
    font-size: 18px;
    position: relative;
    background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%),
                radial-gradient(circle at 32% 32%, #e0e0e0, #909090 65%, #5a5a5a);
    box-shadow:
        0 3px 8px rgba(0,0,0,0.4),
        inset -3px -4px 8px rgba(0,0,0,0.22),
        inset 3px 4px 8px rgba(255,255,255,0.32);
    flex: 0 0 auto;
}
.draw-ball::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 10px;
    width: 12px;
    height: 7px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}
.draw-ball.rolling {
    animation: drawShake 0.12s ease-in-out infinite alternate;
}
.draw-ball.settled {
    animation: drawSettle 0.4s cubic-bezier(.3,1.6,.5,1);
}
@keyframes drawShake {
    from { transform: translateY(-3px) rotate(-2deg); }
    to   { transform: translateY(3px) rotate(2deg); }
}
@keyframes drawSettle {
    0%   { transform: scale(1.35); }
    60%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}
/* am28 / ssc 色球(0-9)按值映射到 4 色 */
.draw-ball.b-red   { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #ffb1a8, #e63b2f 65%, #a31b10); }
.draw-ball.b-blue  { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #adcdff, #3a82ff 65%, #1a4bb8); }
.draw-ball.b-green { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #b8efbd, #3ac24a 65%, #198726); }
.draw-ball.b-gray  { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #d4d4d4, #888 65%, #555); }
/* pk10 十色球(1-10) */
.draw-ball.c-1  { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #ffe680, #f7c022 65%, #c08800); }
.draw-ball.c-2  { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #b3e6ff, #3aa8e8 65%, #1573b0); }
.draw-ball.c-3  { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #b0b0b0, #444 65%, #1a1a1a); }
.draw-ball.c-4  { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #ffd0a8, #f48848 65%, #c45a18); }
.draw-ball.c-5  { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #b3eddc, #3cd3a3 65%, #169668); }
.draw-ball.c-6  { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #d8d0f3, #7e6dca 65%, #4d3a8f); }
.draw-ball.c-7  { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #f0f0f0, #b0b0b0 65%, #707070); }
.draw-ball.c-8  { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #ffd5e3, #f08aa8 65%, #b54a72); }
.draw-ball.c-9  { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #ffb1a8, #e63b2f 65%, #a31b10); }
.draw-ball.c-10 { background: radial-gradient(circle at 50% 50%, #fff 0 42%, transparent 43%), radial-gradient(circle at 32% 32%, #b8efbd, #3ac24a 65%, #198726); font-size: 15px; }