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

/* ── Title Bar (회차) ── */
.spk-bingo-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-bingo-game-num {
    font-size: 16px; font-weight: 900; letter-spacing: 1px;
}
.spk-bingo-game-num .num {
    color: var(--spk-accent); font-size: 20px;
}
.spk-bingo-phase-info {
    font-size: 12px; font-weight: 600; color: #8aa;
}

/* ── Carry-over Banner ── */
.spk-bingo-carry {
    display: none;
    background: linear-gradient(135deg, #ff6b00, #ff2d55);
    border-radius: var(--spk-radius);
    padding: 8px 16px; text-align: center;
    color: #fff; font-weight: 800; font-size: 13px;
    box-shadow: 0 4px 16px rgba(255,45,85,.3);
    animation: carryPulse 2s ease infinite;
}
.spk-bingo-carry.show { display: block; }

/* ── Timer ── */
.spk-bingo-timer {
    background: linear-gradient(135deg, #0c1a2e, #1a3050);
    border-radius: 10px; padding: 8px 14px;
    display: flex; align-items: center; gap: 10px; color: #fff;
}
.spk-bingo-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-bingo-timer-dot.betting { background: var(--spk-accent); box-shadow: 0 0 6px var(--spk-accent); }
.spk-bingo-timer-dot.revealing { background: var(--spk-red); box-shadow: 0 0 6px var(--spk-red); }
.spk-bingo-timer-dot.finished { background: #666; box-shadow: none; animation: none; }
.spk-bingo-timer-dot.opening { background: #00d4ff; box-shadow: 0 0 6px #00d4ff; }
.spk-bingo-label { font-size: 12px; font-weight: 700; white-space: nowrap; }
.spk-bingo-countdown { font-size: 18px; font-weight: 900; color: var(--spk-accent); font-variant-numeric: tabular-nums; min-width: 48px; }
.spk-bingo-progress { flex: 1; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.spk-bingo-progress-bar { height: 100%; background: linear-gradient(90deg, var(--spk-green), var(--spk-accent)); transition: width 1s linear; }
.spk-bingo-round-tag { font-size: 10px; color: #8aa; background: rgba(255,255,255,.08); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }

/* ── Odds Panel (우측, 3x4 그리드) ── */
.spk-bingo-odds {
    background: var(--spk-card);
    border-radius: var(--spk-radius);
    box-shadow: var(--spk-shadow);
    padding: 10px 12px;
}
.spk-bingo-odds-hd {
    font-size: 12px; font-weight: 800; color: var(--spk-text);
    margin-bottom: 6px; padding-bottom: 5px;
    border-bottom: 1px solid var(--spk-line);
    display: flex; align-items: center; justify-content: space-between;
}
.spk-bingo-odds-pool {
    font-size: 10px; font-weight: 700; color: #ff6b00;
    background: rgba(255,107,0,.08); padding: 2px 8px; border-radius: 10px;
}
.spk-bingo-odds-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 4px;
}
.spk-bingo-ol {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 6px 2px;
    border-radius: 8px;
    cursor: pointer; transition: all .18s;
    border: 2px solid var(--spk-line);
    background: var(--spk-card); text-align: center;
}
.spk-bingo-ol:hover { border-color: var(--spk-primary); background: rgba(26,109,255,.04); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(26,109,255,.1); }
.spk-bingo-ol.sel { background: linear-gradient(135deg, rgba(26,109,255,.1), rgba(26,109,255,.18)); border-color: var(--spk-primary); box-shadow: 0 4px 14px rgba(26,109,255,.2); }
.spk-bingo-ol.off { opacity: .3; pointer-events: none; }
.spk-bingo-ol.wl { background: linear-gradient(135deg, rgba(10,191,83,.08), rgba(10,191,83,.15)); border-color: var(--spk-green); }
.spk-bingo-ol .nm { font-size: 10px; font-weight: 800; color: var(--spk-text); margin-bottom: 1px; }
.spk-bingo-ol .od { font-size: 13px; font-weight: 900; color: var(--spk-primary); }
.spk-bingo-ol.wl .od { color: var(--spk-green); }
.spk-bingo-ol .nd { font-size: 8px; color: var(--spk-muted); }

/* ── Main Row: Board+Bet(좌) + 나의빙고(우) ── */
.spk-bingo-game { display: flex; gap: 10px; align-items: flex-start; }
.spk-bingo-left { flex: 0 0 600px; width: 600px; display: flex; flex-direction: column; gap: 8px; }
.spk-bingo-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

/* ── 5x5 Grid ── */
.spk-bingo-board {
    background: var(--spk-card); border-radius: var(--spk-radius);
    box-shadow: var(--spk-shadow); padding: 14px; position: relative;
}
.spk-bingo-board-title {
    font-size: 14px; font-weight: 800; margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px; color: var(--spk-text);
}
.spk-bingo-board-title .gid { font-size: 10px; font-weight: 500; color: var(--spk-muted); background: var(--spk-bg); padding: 2px 8px; border-radius: 8px; }
/* ── 최근 뽑힌 숫자 ── */
.spk-bingo-last-draw {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px; padding: 8px 12px;
    background: linear-gradient(135deg, #0a1628, #162d50);
    border-radius: 10px;
}
.spk-bingo-last-draw .last-label {
    font-size: 10px; font-weight: 900; color: #ffcc33;
    letter-spacing: 1px; white-space: nowrap;
}
.spk-bingo-last-draw .last-nums {
    display: flex; gap: 5px; flex-wrap: wrap; flex: 1;
}
.spk-bingo-last-draw .ld-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 13px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #1a6dff, #0c2d5e);
    box-shadow: 0 2px 6px rgba(26,109,255,.3);
    transition: all .3s;
}
.spk-bingo-last-draw .ld-num:last-child {
    background: linear-gradient(135deg, #ffcc33, #ff9900);
    color: #1a1a00;
    box-shadow: 0 2px 10px rgba(255,204,51,.5);
    transform: scale(1.15);
    animation: lastNumPop .6s cubic-bezier(.17,.67,.35,1.2);
}
.spk-bingo-last-draw .ld-num.empty {
    background: rgba(255,255,255,.1); color: #445; box-shadow: none;
}
@keyframes lastNumPop {
    0% { transform: scale(0) rotate(-20deg); }
    50% { transform: scale(1.3) rotate(5deg); }
    100% { transform: scale(1.15) rotate(0); }
}

/* ── Grid with Labels ── */
.spk-bingo-grid-wrap { }
.spk-grid-col-labels {
    display: grid; grid-template-columns: 24px repeat(5, 1fr); gap: 6px;
    margin-bottom: 2px;
}
.spk-grid-col-labels span {
    text-align: center; font-size: 9px; font-weight: 600;
    color: var(--spk-muted); opacity: .45;
}
.spk-grid-body {
    display: flex; gap: 2px;
}
.spk-grid-row-labels {
    display: flex; flex-direction: column; gap: 6px;
    width: 22px; flex-shrink: 0; padding-top: 0;
}
.spk-grid-row-labels span {
    flex: 1; display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 600; color: var(--spk-muted); opacity: .45;
    writing-mode: horizontal-tb;
}
.spk-bingo-grid { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.spk-bingo-cell {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #e8edf4, #dde3ed);
    border-radius: 10px; font-size: 22px; font-weight: 800;
    color: #a0b0c4;
    cursor: default; transition: all .4s; border: 2px solid transparent; position: relative;
    overflow: hidden;
}
/* 미공개: 숫자 보이지만 흐릿 */
.spk-bingo-cell .num {
    transition: all .3s;
}

/* 공개된 셀 */
.spk-bingo-cell.open {
    background: linear-gradient(135deg, #1a6dff, #0c2d5e);
    color: #fff;
    box-shadow: 0 3px 10px rgba(26,109,255,.3);
    border-color: rgba(26,109,255,.3);
}

/* 방금 뽑힌 셀 - 드라마틱 애니메이션 */
.spk-bingo-cell.fresh {
    background: linear-gradient(135deg, #ffcc33, #ff9900);
    color: #1a1a00;
    box-shadow: 0 0 30px rgba(255,204,51,.7), 0 0 60px rgba(255,150,0,.3);
    border-color: #fff;
    z-index: 5;
    animation: pickBounce 1.2s cubic-bezier(.17,.67,.35,1.2);
}
.spk-bingo-cell.fresh::before {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 14px;
    background: conic-gradient(#ffcc33, #ff6b00, #ff2d55, #ffcc33);
    z-index: -1;
    animation: pickGlow 1.2s ease;
    opacity: 0;
}
.spk-bingo-cell.fresh .num {
    animation: pickNum 1.2s cubic-bezier(.17,.67,.35,1.2);
}

/* 당첨 라인 셀 */
.spk-bingo-cell.win-cell {
    background: linear-gradient(135deg, #0abf53, #068f3c);
    color: #fff;
    animation: winGlow 1s ease infinite;
}

/* 라인 하이라이트 */
.spk-bingo-cell.hl {
    border-color: var(--spk-accent);
    transform: scale(1.05);
    background: linear-gradient(135deg, #f0e8d0, #e8dcc0);
    color: #6a5a30;
}
.spk-bingo-cell.open.hl {
    background: linear-gradient(135deg, #2a7dff, #1c3d6e);
    color: #fff;
}

/* 셔플 */
.spk-bingo-cell.shuffle .num { animation: shuffleAni .15s ease infinite; }

/* ── Result Overlay ── */
.spk-bingo-result { display: none; position: absolute; inset: 0; background: rgba(10,23,38,.92); border-radius: var(--spk-radius); z-index: 10; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.spk-bingo-result.show { display: flex; }
.spk-bingo-result .ico { font-size: 48px; margin-bottom: 8px; }
.spk-bingo-result .ttl { font-size: 26px; font-weight: 900; color: var(--spk-accent); }
.spk-bingo-result .ln { font-size: 15px; color: #fff; margin: 6px 0 12px; }
.spk-bingo-result .nxt { font-size: 12px; color: #8aa; }
.spk-bingo-result .carry-msg { margin-top: 8px; font-size: 14px; font-weight: 800; color: #ff6b00; background: rgba(255,107,0,.12); padding: 4px 14px; border-radius: 20px; }

/* ── Bet Panel ── */
.spk-bingo-bet {
    background: var(--spk-card); border-radius: var(--spk-radius);
    box-shadow: var(--spk-shadow-soft); padding: 12px 14px;
}
.spk-bingo-bet.closed { opacity: .5; pointer-events: none; }
.spk-bingo-bet-header { font-size: 14px; font-weight: 800; color: var(--spk-text); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.spk-bingo-bet-header .pts { font-size: 11px; color: var(--spk-primary); font-weight: 600; }
.spk-bingo-bet-sel { display: none; background: linear-gradient(135deg, rgba(26,109,255,.06), rgba(26,109,255,.12)); border: 2px solid var(--spk-primary); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; text-align: center; }
.spk-bingo-bet-sel.show { display: block; }
.spk-bingo-bet-sel .sel-line { font-size: 18px; font-weight: 900; color: var(--spk-primary); }
.spk-bingo-bet-sel .sel-odds { font-size: 14px; font-weight: 800; color: var(--spk-primary-deep); margin-left: 8px; }
.spk-bingo-bet .no-sel { font-size: 14px; font-weight: 800; color: var(--spk-primary); text-align: center; padding: 10px 0; letter-spacing: 1px; }
.spk-bingo-bet-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.spk-bingo-bet-form .inp-wrap { position: relative; flex: 1; }
.spk-bingo-bet-form .inp-wrap input { width: 100%; padding: 8px 30px 8px 10px; border: 1.5px solid var(--spk-line); border-radius: 8px; font-size: 14px; font-weight: 700; outline: none; }
.spk-bingo-bet-form .inp-wrap input:focus { border-color: var(--spk-primary); }
.spk-bingo-bet-form .inp-wrap .u { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--spk-muted); font-weight: 600; }
.spk-bingo-bet-form .q-btns { display: flex; gap: 3px; }
.spk-bingo-bet-form .q-btns button { padding: 6px 10px; border: 1px solid var(--spk-line); border-radius: 6px; background: #fff; font-size: 10px; font-weight: 600; color: var(--spk-muted); cursor: pointer; transition: all .15s; }
.spk-bingo-bet-form .q-btns button:hover { background: var(--spk-bg); border-color: var(--spk-primary); color: var(--spk-text); }
.spk-bingo-bet-form .go-btn { padding: 8px 20px; border: none; border-radius: 8px; background: linear-gradient(135deg, var(--spk-primary), var(--spk-primary-deep)); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 10px rgba(26,109,255,.25); transition: all .15s; white-space: nowrap; }
.spk-bingo-bet-form .go-btn:hover { transform: translateY(-1px); }
.spk-bingo-bet-form .go-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.spk-bingo-bet-form .cancel-btn { padding: 8px 14px; border: 1.5px solid var(--spk-line); border-radius: 8px; background: #fff; color: var(--spk-muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; }
.spk-bingo-bet-form .cancel-btn:hover { border-color: var(--spk-red); color: var(--spk-red); }

/* ── My Bingo (우측) ── */
.spk-bingo-my { background: var(--spk-card); border-radius: var(--spk-radius); box-shadow: var(--spk-shadow-soft); overflow: hidden; }
.spk-bingo-my-hd { background: linear-gradient(135deg, #1a0a3e, #4a1a7a); color: #fff; padding: 8px 12px; font-size: 12px; font-weight: 800; }
.spk-bingo-my table { width: 100%; border-collapse: collapse; }
.spk-bingo-my th { padding: 5px 6px; background: var(--spk-bg); font-size: 9px; font-weight: 700; color: var(--spk-muted); text-align: center; border-bottom: 1px solid var(--spk-line); }
.spk-bingo-my td { padding: 5px 6px; font-size: 10px; color: var(--spk-text); text-align: center; border-bottom: 1px solid var(--spk-line); }
.spk-bingo-my .res-w { font-weight: 700; color: var(--spk-green); }
.spk-bingo-my .res-l { color: var(--spk-red); }
.spk-bingo-my .res-p { color: var(--spk-muted); }
.spk-bingo-my .payout { font-weight: 700; color: var(--spk-green); }
.spk-bingo-my-empty { padding: 20px; text-align: center; font-size: 11px; color: var(--spk-muted); }
.spk-bingo-my-paging {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 6px 0;
}
.spk-bingo-my-paging button {
    width: 24px; height: 24px; border: 1px solid var(--spk-line); border-radius: 6px;
    background: #fff; font-size: 10px; font-weight: 700; color: var(--spk-muted);
    cursor: pointer; transition: all .15s;
}
.spk-bingo-my-paging button:hover { border-color: var(--spk-primary); color: var(--spk-primary); }
.spk-bingo-my-paging button.active { background: var(--spk-primary); color: #fff; border-color: var(--spk-primary); }
.spk-bingo-my-paging button:disabled { opacity: .3; cursor: default; }

/* ── History ── */
.spk-bingo-hist { background: var(--spk-card); border-radius: var(--spk-radius); box-shadow: var(--spk-shadow-soft); overflow: hidden; }
.spk-bingo-hist-hd { background: linear-gradient(135deg, var(--spk-primary), var(--spk-primary-deep)); color: #fff; padding: 8px 14px; font-size: 12px; font-weight: 800; }
.spk-bingo-hist-scroll { max-height: 300px; overflow-y: auto; }
.spk-bingo-hist table { width: 100%; border-collapse: collapse; }
.spk-bingo-hist thead { position: sticky; top: 0; z-index: 1; }
.spk-bingo-hist th { padding: 6px 8px; background: var(--spk-bg); font-size: 10px; font-weight: 700; color: var(--spk-muted); text-align: center; border-bottom: 1px solid var(--spk-line); }
.spk-bingo-hist td { padding: 6px 8px; font-size: 11px; color: var(--spk-text); text-align: center; border-bottom: 1px solid var(--spk-line); }
.spk-bingo-hist .wn { font-weight: 700; color: var(--spk-green); }
.spk-bingo-hist .carry-tag { display: inline-block; font-size: 9px; font-weight: 700; color: #ff6b00; background: rgba(255,107,0,.1); padding: 1px 6px; border-radius: 8px; }

/* ── Posts ── */
.spk-bingo-posts { background: var(--spk-card); border-radius: var(--spk-radius); box-shadow: var(--spk-shadow-soft); overflow: hidden; }
.spk-bingo-posts .hd { background: linear-gradient(135deg, #0a2028, #1a7088); color: #fff; padding: 8px 14px; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; }
.spk-bingo-posts .hd a { color: #8dd; font-size: 10px; }

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

/* ── Animations ── */
@keyframes spkPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* 뽑기: 위에서 떨어지며 바운스 */
@keyframes pickBounce {
    0% { transform: scale(0.3) translateY(-80px) rotate(-15deg); opacity: 0; box-shadow: none; }
    30% { transform: scale(1.25) translateY(5px) rotate(3deg); opacity: 1; }
    50% { transform: scale(0.95) translateY(-3px) rotate(-1deg); }
    70% { transform: scale(1.08) translateY(1px) rotate(0deg); }
    85% { transform: scale(0.98); }
    100% { transform: scale(1) translateY(0) rotate(0deg); }
}

/* 뽑기: 숫자 확대 펄스 */
@keyframes pickNum {
    0% { transform: scale(0); opacity: 0; }
    35% { transform: scale(1.5); opacity: 1; }
    55% { transform: scale(0.85); }
    75% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* 뽑기: 테두리 글로우 */
@keyframes pickGlow {
    0% { opacity: 0; transform: scale(0.8); }
    30% { opacity: .8; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.3); }
}

@keyframes winGlow {
    0%,100% { box-shadow: 0 2px 8px rgba(10,191,83,.3); }
    50% { box-shadow: 0 2px 20px rgba(10,191,83,.7), 0 0 40px rgba(10,191,83,.2); transform: scale(1.04); }
}
@keyframes shuffleAni { 0%{transform:translateY(-2px);opacity:.3} 50%{opacity:1} 100%{transform:translateY(2px);opacity:.3} }

/* ── 날아오는 공 ── */
.spk-fly-ball {
    position: fixed;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe066, #ffaa00, #ff6600);
    color: #1a0a00;
    font-size: 18px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    pointer-events: none;
    box-shadow:
        0 0 20px rgba(255,170,0,.6),
        0 0 40px rgba(255,100,0,.3),
        inset 0 -3px 6px rgba(0,0,0,.15);
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.spk-fly-ball.spk-fly-land {
    animation: flyLand .3s ease forwards;
}
@keyframes flyLand {
    0% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.6); opacity: .8; box-shadow: 0 0 40px rgba(255,200,0,.8); }
    100% { transform: scale(0); opacity: 0; }
}

/* 트레일 이펙트 */
.spk-fly-trail {
    position: fixed;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,200,0,.6), transparent);
    z-index: 9998;
    pointer-events: none;
    animation: trailFade .4s ease forwards;
}
@keyframes trailFade {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(2.5); opacity: 0; }
}
@keyframes carryPulse { 0%,100%{box-shadow:0 4px 16px rgba(255,45,85,.3)} 50%{box-shadow:0 4px 24px rgba(255,45,85,.5)} }

/* ── 카테고리(바카라식) 베팅판 ── */
.spk-bingo-cat-bet {
    background: var(--spk-card); border-radius: var(--spk-radius);
    box-shadow: var(--spk-shadow); padding: 10px;
}
.spk-bingo-cat-bet.closed { opacity: .4; pointer-events: none; }
.spk-bingo-cat-bet-hd { font-size: 11px; font-weight: 800; color: var(--spk-text); margin-bottom: 8px; }
.spk-bingo-cat-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cat-btn {
    padding: 14px 8px; border-radius: 10px; text-align: center;
    cursor: pointer; transition: all .2s; border: 2px solid transparent;
}
.cat-btn .cat-label { font-size: 14px; font-weight: 900; display: block; margin-bottom: 2px; }
.cat-btn .cat-odds { font-size: 12px; font-weight: 700; }
.cat-btn .cat-icon { font-size: 20px; display: block; margin-bottom: 4px; }
.cat-row { background: rgba(26,109,255,.08); color: #1a6dff; border-color: rgba(26,109,255,.2); }
.cat-row:hover, .cat-row.sel { border-color: #1a6dff; background: rgba(26,109,255,.15); box-shadow: 0 4px 12px rgba(26,109,255,.2); }
.cat-col { background: rgba(204,34,51,.08); color: #cc2233; border-color: rgba(204,34,51,.2); }
.cat-col:hover, .cat-col.sel { border-color: #cc2233; background: rgba(204,34,51,.15); box-shadow: 0 4px 12px rgba(204,34,51,.2); }
.cat-diag { background: rgba(10,191,83,.08); color: #0abf53; border-color: rgba(10,191,83,.2); }
.cat-diag:hover, .cat-diag.sel { border-color: #0abf53; background: rgba(10,191,83,.15); box-shadow: 0 4px 12px rgba(10,191,83,.2); }
.cat-btn.win { animation: catWin 1s ease infinite; }
@keyframes catWin { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03);box-shadow:0 4px 20px rgba(255,204,51,.4)} }

/* ── Mid Row: 결과판 + 나의빙고 ── */
.spk-bingo-mid-row { display: flex; gap: 10px; }
.spk-bingo-mid-row .spk-bingo-baccarat { flex: 1; min-width: 0; }
.spk-bingo-mid-row .spk-bingo-my { flex: 0 0 360px; width: 360px; }

/* ── 바카라식 결과 로드맵 ── */
.spk-bingo-baccarat {
    background: var(--spk-card); border-radius: var(--spk-radius);
    box-shadow: var(--spk-shadow-soft); padding: 10px;
    max-height: 220px; overflow: auto;
}
.bac-grid {
    display: flex; gap: 1px; min-height: 140px;
    background: rgba(0,0,0,.03);
    border: 1px solid var(--spk-line);
    border-radius: 6px;
    padding: 4px;
}
.bac-col {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 20px;
}
.bac-ball {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,.15);
}
/* 그리드 배경선 */
.bac-grid::before { display: none; }
.bac-col { position: relative; }
.bac-col::after {
    content: ''; position: absolute; right: -1px; top: 0; bottom: 0;
    width: 1px; background: var(--spk-line); opacity: .3;
}
.bac-col:last-child::after { display: none; }
.bac-ball + .bac-ball { margin-top: 0; }
/* 가로 그리드선: 각 공 아래 */
.bac-ball { position: relative; }
.bac-ball::after {
    content: ''; position: absolute; left: -2px; right: -2px; bottom: -1px;
    height: 1px; background: var(--spk-line); opacity: .2;
}

.bac-ball-inline { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.bac-legend { display: flex; gap: 12px; margin-top: 6px; font-size: 10px; color: var(--spk-muted); }
.bac-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 3px; }

/* ── 결과 오버레이 카테고리 ── */
.spk-bingo-result .cat-result { margin-top: 6px; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .spk-bingo-game { flex-direction: column; }
    .spk-bingo-left { flex: none; width: 100%; }
    .spk-bingo-odds-list { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
    .spk-bingo-mid-row { flex-direction: column; }
    .spk-bingo-mid-row .spk-bingo-my { flex: none; width: 100%; }
    .spk-bingo-bottom { flex-direction: column; }
}