/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

[x-cloak] {
    display: none !important;
}

/* Focus states */
button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Remove animations for Build Wizard */
    .building-icon,
    .building-step-icon,
    .success-check,
    .progress-fill,
    .wizard-chip:hover,
    .wizard-chip.is-selected,
    .build-img:hover,
    .btn-buy:hover,
    .btn-primary:hover,
    .btn-view:hover,
    .progress-step:hover,
    .progress-step.is-active {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ============================================
   GPU Reliance Badge
   Shows inherent game GPU/CPU dependency
   ============================================ */

.gpu-reliance-badge {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: clamp(0.625rem, 2vw, 0.875rem);
    margin-top: 0.75rem;
}

.gpu-reliance-badge .badge-label {
    display: block;
    font-size: clamp(0.625rem, 1.5vw, 0.75rem);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.reliance-bar {
    display: flex;
    height: clamp(20px, 4vw, 28px);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.reliance-gpu {
    background: linear-gradient(90deg, var(--nvidia-green, #10b981), var(--nvidia-green-dark, #059669));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: clamp(0.625rem, 1.5vw, 0.75rem);
    font-weight: 600;
    min-width: 0;
    transition: width 0.3s ease;
}

.reliance-gpu span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.25rem;
}

.reliance-cpu {
    background: linear-gradient(90deg, var(--intel-blue, #3b82f6), var(--intel-blue-dark, #2563eb));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: clamp(0.625rem, 1.5vw, 0.75rem);
    font-weight: 600;
    min-width: 0;
    transition: width 0.3s ease;
}

.reliance-cpu span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.25rem;
}

.gpu-reliance-badge .badge-hint {
    display: block;
    font-size: clamp(0.6875rem, 1.5vw, 0.8rem);
    color: var(--text-secondary);
}

/* Hide text labels on very small widths */
@media (max-width: 350px) {
    .reliance-gpu span,
    .reliance-cpu span {
        font-size: 0.5625rem;
    }
}