:root {
    --felt: #0a5c28;
    --wood: #3a1e0b;
    --gold: #d4a942;
    --gold-light: #f7d774;
    --red: #c41e3a;
    --black: #1a1a1a;
}

.cc-roulette { 
    font-family:'Plus Jakarta Sans', sans-serif; 
    max-width:920px; 
    margin:0 auto; 
    background:var(--wood); 
    border:6px solid #221106; 
    border-radius:20px; 
    padding:20px; 
    color:#fff; 
    box-shadow:0 15px 35px rgba(0,0,0,0.7); 
    position:relative; 
    box-sizing: border-box;
}

/* Kompaktes Online-Badge im Header */
.cc-online-badge {
    background: rgba(0, 163, 42, 0.15);
    border: 1px solid #00a32a;
    color: #2ecc71;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cc-header { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    border-bottom:2px solid var(--gold); 
    padding-bottom:12px; 
    margin-bottom:15px; 
}

.cc-title { 
    font-family:'Orbitron', sans-serif; 
    color:var(--gold); 
    margin:0; 
    font-size:24px; 
    text-transform:uppercase; 
    letter-spacing:2px; 
    display:flex; 
    align-items:center; 
    gap:8px; 
}

.cc-balance-badge { 
    background:linear-gradient(180deg, var(--gold-light), var(--gold)); 
    color:#000; 
    padding:8px 16px; 
    border-radius:20px; 
    font-weight:800; 
    font-size:16px; 
    border:2px solid #fff; 
    box-shadow:0 2px 6px rgba(0,0,0,0.4); 
    display:flex; 
    align-items:center; 
    gap:6px; 
}

.cc-grid { 
    display:grid; 
    grid-template-columns: 1fr; 
    gap:20px; 
}

@media (min-width: 768px) { 
    .cc-grid { 
        grid-template-columns: 310px 1fr; 
    } 
}

.cc-wheel-box { 
    background:var(--felt); 
    border:3px solid var(--gold); 
    border-radius:14px; 
    padding:15px; 
    text-align:center; 
    position:relative; 
}

.cc-wheel-wrapper { 
    position:relative; 
    width:250px; 
    height:250px; 
    margin:0 auto; 
    overflow:hidden; 
    border-radius:50%; 
}

.cc-wheel-svg { 
    width:100%; 
    height:100%; 
}

.cc-pointer { 
    position:absolute; 
    top:-2px; 
    left:50%; 
    transform:translateX(-50%); 
    width:0; 
    height:0; 
    border-left:10px solid transparent; 
    border-right:10px solid transparent; 
    border-top:20px solid var(--gold); 
    z-index:10; 
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.8)); 
}

.cc-table { 
    background:var(--felt); 
    border:3px solid var(--gold); 
    border-radius:14px; 
    padding:12px; 
    box-shadow:inset 0 0 15px rgba(0,0,0,0.5); 
}

.cc-table-grid { 
    display:grid; 
    grid-template-columns: 40px repeat(12, 1fr) 40px; 
    gap:3px; 
    margin-bottom:6px; 
}

.cc-cell { 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-weight:800; 
    font-size:12px; 
    height:38px; 
    border-radius:4px; 
    cursor:pointer; 
    border:1px solid rgba(255,255,255,0.15); 
    user-select:none; 
    position:relative; 
    transition:all 0.15s ease; 
}

.cc-cell:hover { 
    transform:scale(1.05); 
    z-index:2; 
}

.cc-cell.green { background:#0a8040; }
.cc-cell.red { background:var(--red); }
.cc-cell.black { background:var(--black); }
.cc-cell.outside { background:#252525; font-size:11px; }

.cc-cell.selected { 
    border:2px solid var(--gold-light); 
    box-shadow:0 0 10px var(--gold); 
}

.cc-cell.selected::after { 
    content:attr(data-amt); 
    position:absolute; 
    top:-8px; 
    right:-8px; 
    background:var(--gold); 
    color:#000; 
    font-size:10px; 
    font-weight:900; 
    border-radius:10px; 
    padding:2px 6px; 
    border:1px solid #fff; 
    box-shadow:0 2px 4px rgba(0,0,0,0.5); 
}

/* Chips Selector */
.cc-chips-selector { 
    display:flex; 
    justify-content:center; 
    gap:8px; 
    margin:15px 0 10px 0; 
}

.cc-chip { 
    width:42px; 
    height:42px; 
    border-radius:50%; 
    border:3px dashed #fff; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-weight:900; 
    font-size:12px; 
    cursor:pointer; 
    box-shadow:0 4px 6px rgba(0,0,0,0.4); 
    transition:all 0.2s ease; 
    user-select:none; 
}

.cc-chip:hover { transform:translateY(-3px) scale(1.08); }
.cc-chip.active { transform:translateY(-5px) scale(1.12); border-style:solid; box-shadow:0 0 12px var(--gold-light); }

.cc-chip-5 { background:#e74c3c; color:#fff; }
.cc-chip-10 { background:#2980b9; color:#fff; }
.cc-chip-25 { background:#27ae60; color:#fff; }
.cc-chip-50 { background:#2c3e50; color:#fff; }
.cc-chip-100 { background:linear-gradient(135deg, #8e44ad, #f1c40f); color:#fff; text-shadow:0 1px 2px #000; }

.cc-controls { 
    display:flex; 
    gap:10px; 
    margin-top:10px; 
    align-items:center; 
}

.cc-btn { 
    background:linear-gradient(180deg, var(--gold-light), var(--gold)); 
    color:#000; 
    border:none; 
    padding:12px 20px; 
    border-radius:8px; 
    font-weight:900; 
    cursor:pointer; 
    text-transform:uppercase; 
    letter-spacing:1px; 
    flex:1; 
    font-size:15px; 
    box-shadow:0 4px 10px rgba(0,0,0,0.3); 
}

.cc-btn:disabled { 
    opacity:0.4; 
    cursor:not-allowed; 
    transform:none !important; 
}

.cc-btn-clear { 
    background:#444; 
    color:#fff; 
    border:none; 
    padding:12px 16px; 
    border-radius:8px; 
    cursor:pointer; 
    font-weight:bold; 
    font-size:13px; 
}

.cc-overlay { 
    position:fixed; 
    inset:0; 
    background:rgba(0,0,0,0.85); 
    z-index:99999; 
    display:none; 
    align-items:center; 
    justify-content:center; 
}

.cc-overlay.show { display:flex; }

.cc-modal { 
    background:var(--wood); 
    border:3px solid var(--gold); 
    border-radius:16px; 
    padding:30px; 
    text-align:center; 
    max-width:320px; 
    width:90%; 
    box-shadow:0 10px 30px rgba(0,0,0,0.8); 
}

.cc-modal-num { 
    font-size:48px; 
    font-family:'Orbitron', sans-serif; 
    width:85px; 
    height:85px; 
    line-height:85px; 
    border-radius:50%; 
    margin:0 auto 15px; 
    border:3px solid #fff; 
    box-shadow:0 4px 10px rgba(0,0,0,0.5); 
}

.cc-history { 
    display:flex; 
    gap:6px; 
    margin-top:12px; 
    overflow-x:auto; 
    padding-bottom:4px; 
}

.cc-hist-item { 
    min-width:28px; 
    height:28px; 
    border-radius:50%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:11px; 
    font-weight:bold; 
    border:1px solid rgba(255,255,255,0.3); 
}

#cc-wheel-rotate { transform-origin: 150px 150px; }
#cc-ball-rotate { transform-origin: 150px 150px; }