/* ==========================================
   Random Picker Wheel – Tool Scoped Styles
   ========================================== */

.tool-random-picker .tool-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: flex-start;
}

/* Responsive */
@media (max-width: 900px) {
    .tool-random-picker .tool-container {
        grid-template-columns: 1fr;
    }
}

/* Panels */
.tool-random-picker .panel {
    background: var(--bg-surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.tool-random-picker .panel-hint {
    font-size: 0.85rem;
    color: var(--text-medium);
}

/* Wheel */
.tool-random-picker .wheel-wrapper {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
}

.tool-random-picker #wheel {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--bg-body);
    border: 3px solid var(--border);
    transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}

/* Pointer – couleur flashy fixe */
.tool-random-picker .pointer {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%); /* pointe vers le haut */
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 18px solid #39ff14; /* vert fluo super voyant */
    z-index: 10;
}

/* Result */
.tool-random-picker .result-box {
    margin-top: 1.5rem;
    text-align: center;
}

.tool-random-picker .result-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted, #94a3b8);
    margin-bottom: 0.25rem;
}

.tool-random-picker .result-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--success);
}

/* Button */
.tool-random-picker .primary-btn {
    margin-top: 1rem;
    width: 100%;
}