/* ============================================================
   chips.css — Betting chip styles
   ============================================================ */

/* ---------- Base Chip ---------- */
.chip {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    border: 3px dashed rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9em;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    outline: none;
    position: relative;
    user-select: none;
}

.chip:hover:not(:disabled) {
    transform: scale(1.1);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.chip:active:not(:disabled) {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.chip:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

/* ---------- Chip Colors ---------- */
.chip-5 {
    background: radial-gradient(circle at 35% 35%, #f55c4e, #e74c3c 60%, #c0392b);
}

.chip-10 {
    background: radial-gradient(circle at 35% 35%, #5dade2, #3498db 60%, #2980b9);
}

.chip-25 {
    background: radial-gradient(circle at 35% 35%, #58d68d, #27ae60 60%, #1e8449);
}

.chip-50 {
    background: radial-gradient(circle at 35% 35%, #af7ac5, #8e44ad 60%, #6c3483);
}

.chip-100 {
    background: radial-gradient(circle at 35% 35%, #555, #1a1a1a 60%, #000);
}

/* ---------- Inner ring decoration ---------- */
.chip::before {
    content: '';
    position: absolute;
    top: 0.35em;
    left: 0.35em;
    right: 0.35em;
    bottom: 0.35em;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
}