/* ============================================
   SPOKAZ ROULETTE
   ============================================ */
.spk-rl-wrap { max-width: 100%; display: flex; flex-direction: column; gap: 8px; }

/* ── Title ── */
.spk-rl-title-bar { background: linear-gradient(135deg, #0c2d5e, #1a6dff); border-radius: var(--spk-radius); padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; color: #fff; }
.spk-rl-game-num { font-size: 16px; font-weight: 900; letter-spacing: 1px; }
.spk-rl-game-num .num { color: #ff4757; font-size: 20px; }
.spk-rl-phase-info { font-size: 12px; font-weight: 600; color: #a88; }

/* ── Timer ── */
.spk-rl-timer { background: linear-gradient(135deg, #1a0a0a, #3a1a1a); border-radius: 10px; padding: 8px 14px; display: flex; align-items: center; gap: 10px; color: #fff; }
.spk-rl-timer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--spk-green); box-shadow: 0 0 6px var(--spk-green); animation: spkPulse 1.5s ease infinite; }
.spk-rl-timer-dot.betting { background: var(--spk-accent); box-shadow: 0 0 6px var(--spk-accent); }
.spk-rl-timer-dot.spinning { background: var(--spk-red); box-shadow: 0 0 6px var(--spk-red); }
.spk-rl-timer-dot.result { background: #0abf53; box-shadow: 0 0 6px #0abf53; }
.spk-rl-label { font-size: 12px; font-weight: 700; }
.spk-rl-countdown { font-size: 18px; font-weight: 900; color: var(--spk-accent); font-variant-numeric: tabular-nums; min-width: 48px; }
.spk-rl-progress { flex: 1; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.spk-rl-progress-bar { height: 100%; background: linear-gradient(90deg, #ff4757, #ffcc33); transition: width 1s linear; }
.spk-rl-round-tag { font-size: 10px; color: #a88; background: rgba(255,255,255,.08); padding: 2px 8px; border-radius: 10px; }

/* ── Main ── */
.spk-rl-game { display: flex; gap: 10px; align-items: flex-start; }
.spk-rl-left { flex: 0 0 420px; width: 420px; display: flex; flex-direction: column; gap: 8px; }
.spk-rl-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* ── Wheel ── */
.spk-rl-wheel-wrap { background: var(--spk-card); border-radius: var(--spk-radius); box-shadow: var(--spk-shadow); padding: 16px; text-align: center; position: relative; }
.spk-rl-wheel-container { position: relative; width: 360px; height: 360px; margin: 0 auto; }
.spk-rl-wheel { width: 360px; height: 360px; border-radius: 50%; position: relative; transition: transform 0s; border: 4px solid #333; box-shadow: 0 0 30px rgba(0,0,0,.3), inset 0 0 20px rgba(0,0,0,.2); }
.spk-rl-wheel.spinning { transition: transform 8s cubic-bezier(0.17, 0.67, 0.12, 0.99); }
.spk-rl-pointer { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #ffcc33; z-index: 10; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.spk-rl-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, #444, #1a1a1a); border: 3px solid #555; z-index: 5; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #999; }

/* 결과 표시 */
.spk-rl-result-display { margin-top: 12px; text-align: center; }
.spk-rl-result-num { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; font-size: 28px; font-weight: 900; color: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.spk-rl-result-num.red { background: radial-gradient(circle, #ff4757, #cc2233); }
.spk-rl-result-num.black { background: radial-gradient(circle, #333, #111); }
.spk-rl-result-num.green { background: radial-gradient(circle, #0abf53, #068f3c); }

/* ── Recent Results ── */
.spk-rl-recent { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px; background: var(--spk-card); border-radius: 8px; }
.spk-rl-recent-ball { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.spk-rl-recent-ball.red { background: #cc2233; }
.spk-rl-recent-ball.black { background: #222; border: 1px solid #444; }
.spk-rl-recent-ball.green { background: #068f3c; }

/* ── Jackpot ── */
.spk-rl-jackpot { background: linear-gradient(135deg, #2a1a00, #4a3000); border-radius: 10px; padding: 10px 16px; text-align: center; color: #ffcc33; font-size: 14px; font-weight: 800; }
.spk-rl-jackpot .jp-val { font-size: 20px; }

/* ── Betting Table ── */
.spk-rl-table { background: var(--spk-card); border-radius: var(--spk-radius); box-shadow: var(--spk-shadow); padding: 10px; }
.spk-rl-table-hd { font-size: 12px; font-weight: 800; color: var(--spk-text); margin-bottom: 8px; display: flex; justify-content: space-between; }
.spk-rl-table-hd .pts { font-size: 11px; color: var(--spk-primary); font-weight: 600; }

/* 숫자 그리드 */
.spk-rl-nums { display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; margin-bottom: 6px; }
.spk-rl-num-btn { padding: 8px 2px; border: 1px solid #ddd; border-radius: 4px; text-align: center; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s; color: #fff; }
.spk-rl-num-btn:hover { transform: scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,.2); z-index: 2; }
.spk-rl-num-btn.bet-placed { box-shadow: 0 0 0 2px #ffcc33, 0 2px 8px rgba(255,204,51,.4); }
.spk-rl-num-btn.red { background: #cc2233; }
.spk-rl-num-btn.black { background: #222; }
.spk-rl-num-btn.green { background: #068f3c; }
.spk-rl-num-btn.zero { grid-row: 1 / span 3; grid-column: 1; display: flex; align-items: center; justify-content: center; }
.spk-rl-num-btn.disabled { opacity: .3; pointer-events: none; }

/* Outside bets */
.spk-rl-outside { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-bottom: 6px; }
.spk-rl-out-btn { padding: 8px 4px; border: 2px solid var(--spk-line); border-radius: 6px; text-align: center; font-size: 10px; font-weight: 700; cursor: pointer; transition: all .15s; background: var(--spk-card); color: var(--spk-text); }
.spk-rl-out-btn:hover { border-color: var(--spk-primary); background: rgba(26,109,255,.05); }
.spk-rl-out-btn.bet-placed { border-color: #ffcc33; background: rgba(255,204,51,.1); }
.spk-rl-out-btn.disabled { opacity: .3; pointer-events: none; }
.spk-rl-out-btn .odds { display: block; font-size: 9px; color: var(--spk-muted); }
.spk-rl-out-btn.is-red { border-color: #cc2233; color: #cc2233; }
.spk-rl-out-btn.is-black { border-color: #333; color: #333; }

/* Bet input */
.spk-rl-bet-input { display: flex; gap: 4px; align-items: center; padding: 6px 0; }
.spk-rl-bet-input .q-btns { display: flex; gap: 2px; }
.spk-rl-bet-input .q-btns button { padding: 4px 8px; border: 1px solid var(--spk-line); border-radius: 4px; background: #fff; font-size: 9px; font-weight: 600; color: var(--spk-muted); cursor: pointer; }
.spk-rl-bet-input .q-btns button:hover { border-color: var(--spk-primary); color: var(--spk-text); }
.spk-rl-bet-input input { flex: 1; padding: 5px 8px; border: 1px solid var(--spk-line); border-radius: 6px; font-size: 12px; font-weight: 700; outline: none; }

/* ── My Bets ── */
.spk-rl-my { background: var(--spk-card); border-radius: var(--spk-radius); box-shadow: var(--spk-shadow-soft); overflow: hidden; }
.spk-rl-my-hd { background: linear-gradient(135deg, #3a0a0a, #6a1a1a); color: #fff; padding: 8px 12px; font-size: 12px; font-weight: 800; }
.spk-rl-my table { width: 100%; border-collapse: collapse; }
.spk-rl-my th { padding: 4px 6px; background: var(--spk-bg); font-size: 9px; font-weight: 700; color: var(--spk-muted); text-align: center; }
.spk-rl-my td { padding: 4px 6px; font-size: 10px; color: var(--spk-text); text-align: center; border-bottom: 1px solid var(--spk-line); }
.spk-rl-my .w { color: var(--spk-green); font-weight: 700; }
.spk-rl-my .l { color: var(--spk-red); }
.spk-rl-my-paging { display: flex; justify-content: center; gap: 3px; padding: 6px; }
.spk-rl-my-paging button { width: 22px; height: 22px; border: 1px solid var(--spk-line); border-radius: 4px; background: #fff; font-size: 9px; cursor: pointer; }
.spk-rl-my-paging button.active { background: var(--spk-primary); color: #fff; border-color: var(--spk-primary); }

/* ── Bottom ── */
.spk-rl-bottom { display: flex; gap: 10px; }
.spk-rl-bottom > * { flex: 1; min-width: 0; }

.spk-rl-hist { background: var(--spk-card); border-radius: var(--spk-radius); box-shadow: var(--spk-shadow-soft); overflow: hidden; }
.spk-rl-hist-hd { background: linear-gradient(135deg, #5a1a1a, #8a2a2a); color: #fff; padding: 8px 14px; font-size: 12px; font-weight: 800; }
.spk-rl-hist table { width: 100%; border-collapse: collapse; }
.spk-rl-hist th { padding: 5px 6px; background: var(--spk-bg); font-size: 10px; font-weight: 700; color: var(--spk-muted); text-align: center; }
.spk-rl-hist td { padding: 5px 6px; font-size: 11px; color: var(--spk-text); text-align: center; border-bottom: 1px solid var(--spk-line); }

.spk-rl-posts { background: var(--spk-card); border-radius: var(--spk-radius); box-shadow: var(--spk-shadow-soft); overflow: hidden; }
.spk-rl-posts .hd { background: linear-gradient(135deg, #2a0a0a, #5a1a1a); color: #fff; padding: 8px 14px; font-size: 12px; font-weight: 800; display: flex; justify-content: space-between; }
.spk-rl-posts .hd a { color: #faa; font-size: 10px; }

/* ── Animations ── */
@keyframes rlResultPop { 0%{transform:scale(0) rotate(-30deg)} 60%{transform:scale(1.2) rotate(5deg)} 100%{transform:scale(1) rotate(0)} }

@media (max-width: 900px) {
    .spk-rl-game { flex-direction: column; }
    .spk-rl-left { flex: none; width: 100%; }
    .spk-rl-bottom { flex-direction: column; }
}