@import url('common.css');

/* ============================================================
   ByteForge — Main Game CSS
   Cyberpunk theme — game-specific styles
   Prefix: bf- for all game classes
   ============================================================ */

/* ===== GAME-SPECIFIC VARIABLES ===== */
:root {
    /* Profile color (overridden by JS) */
    --bf-profile-color: #00f0ff;
    --bf-profile-rgb: 0, 240, 255;

    /* RPG overlay variables (bf- prefix) */
    --bf-primary: #00f0ff;
    --bf-secondary: #ff00e5;
    --bf-success: #00ff88;
    --bf-warning: #ffaa00;
    --bf-error: #ff3333;
    --bf-bg: #0a0e1a;
    --bf-bg-light: #141829;
    --bf-bg-card: rgba(20, 24, 41, 0.95);
    --bf-border: rgba(0, 240, 255, 0.2);
    --bf-text: #e0e0e0;
    --bf-text-dim: #888;
    --bf-font-display: 'Orbitron', monospace;
    --bf-font-body: 'Rajdhani', sans-serif;
}

img { max-width: 100%; }


/* ============================================================
   GAME APP CONTAINER
   ============================================================ */

.bf-app {
    position: relative;
    z-index: 1;
    height: 100vh;
    min-height: 100vh;
    padding-top: 42px; /* game header height */
    box-sizing: border-box;
    overflow: hidden;
}


/* ============================================================
   LOADING SCREEN
   ============================================================ */

.bf-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    gap: var(--spacing-md);
}

.bf-loading-logo {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-text);
    letter-spacing: 4px;
}

.bf-loading-logo span {
    color: var(--bf-profile-color);
    text-shadow: 0 0 30px var(--bf-profile-color), 0 0 60px var(--bf-profile-color);
}

.bf-loading-bar {
    width: 200px;
    height: 4px;
    background: var(--color-bg-lighter);
    border-radius: 2px;
    overflow: hidden;
}

.bf-loading-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--bf-profile-color), var(--color-secondary));
    border-radius: 2px;
    animation: loadFill 2s ease-in-out forwards;
}

@keyframes loadFill {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

.bf-loading p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.bf-loading-small {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--spacing-lg);
}


/* ============================================================
   HUD (top bar during game)
   ============================================================ */

.bf-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xs) var(--spacing-md);
    background: rgba(10, 14, 26, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(var(--bf-profile-rgb), 0.15);
    position: sticky;
    top: 52px;
    z-index: 50;
}

.bf-hud-left,
.bf-hud-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.bf-hud-profile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--bf-profile-color);
    font-weight: 700;
    font-size: 0.95rem;
}

.bf-hud-profile i {
    font-size: 1.1rem;
}

.bf-hud-level {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bf-hud-level-badge {
    background: var(--bf-profile-color);
    color: var(--color-bg);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 900;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.bf-hud-xp-bar {
    width: 100px;
    height: 6px;
    background: var(--color-bg-lighter);
    border-radius: 3px;
    overflow: hidden;
}

.bf-hud-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bf-profile-color), var(--color-secondary));
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bf-hud-center {
    flex: 1;
    text-align: center;
}

.bf-hud-chapter {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 1px;
}

.bf-hud-bytes {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-warning);
    font-weight: 700;
    font-size: 0.95rem;
    position: relative;
}

.bf-hud-bytes i {
    font-size: 0.85rem;
}

.bf-hud-btn {
    background: rgba(var(--bf-profile-rgb), 0.1);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.2);
    color: var(--color-text-muted);
    width: 32px; height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    font-size: 0.9rem;
}

.bf-hud-btn:hover {
    background: rgba(var(--bf-profile-rgb), 0.2);
    color: var(--bf-profile-color);
    border-color: var(--bf-profile-color);
}

/* Bytes float animation */
.bf-bytes-float {
    position: absolute;
    top: -20px;
    right: 0;
    color: var(--color-warning);
    font-weight: 700;
    font-size: 0.85rem;
    animation: bytesFloat 1.2s ease-out forwards;
    pointer-events: none;
}

@keyframes bytesFloat {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-30px); }
}


/* ============================================================
   BUTTONS
   ============================================================ */

.bf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.bf-btn-primary {
    background: linear-gradient(135deg, var(--bf-profile-color), rgba(var(--bf-profile-rgb), 0.7));
    color: var(--color-bg);
    box-shadow: 0 0 20px rgba(var(--bf-profile-rgb), 0.3);
}

.bf-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(var(--bf-profile-rgb), 0.5);
    color: var(--color-bg);
}

.bf-btn-secondary {
    background: transparent;
    color: var(--bf-profile-color);
    border: 2px solid var(--bf-profile-color);
}

.bf-btn-secondary:hover {
    background: rgba(var(--bf-profile-rgb), 0.1);
    transform: translateY(-2px);
    color: var(--bf-profile-color);
}

.bf-btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bf-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
    border-color: rgba(255, 255, 255, 0.2);
}

.bf-btn-warning {
    background: linear-gradient(135deg, var(--color-warning), #ff6600);
    color: var(--color-bg);
    animation: pulseWarning 1.5s ease-in-out infinite;
}

@keyframes pulseWarning {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 170, 0, 0.3); }
    50% { box-shadow: 0 0 35px rgba(255, 170, 0, 0.6); }
}

.bf-btn-success {
    background: var(--color-success);
    color: var(--color-bg);
}

.bf-btn-danger {
    background: var(--color-error);
    color: white;
}

.bf-btn-lg {
    padding: 0.85rem 2rem;
    font-size: 1.15rem;
}

.bf-btn-sm {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}

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

.bf-input {
    background: var(--color-bg-light);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.2);
    color: var(--color-text);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    width: 100%;
    transition: var(--transition-normal);
}

.bf-input:focus {
    outline: none;
    border-color: var(--bf-profile-color);
    box-shadow: 0 0 15px rgba(var(--bf-profile-rgb), 0.2);
}

.bf-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--spacing-lg);
    font-style: italic;
}


/* ============================================================
   MENU SCREEN
   ============================================================ */

.bf-menu {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
}

.bf-menu-welcome {
    text-align: center;
}

.bf-menu-logo {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--color-text);
    letter-spacing: 3px;
    margin-bottom: var(--spacing-sm);
}

.bf-menu-logo span {
    color: var(--bf-profile-color);
    text-shadow: 0 0 30px var(--bf-profile-color);
}

.bf-menu-greeting {
    font-size: 1.2rem;
    color: var(--color-text-muted);
}

.bf-menu-streak {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 100, 0, 0.15);
    border: 1px solid rgba(255, 100, 0, 0.3);
    color: #ff8800;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: var(--spacing-xs);
}

.bf-menu-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    width: 100%;
}

.bf-stat-card {
    background: var(--color-bg-light);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.1);
    border-radius: 12px;
    padding: var(--spacing-sm);
    text-align: center;
    transition: var(--transition-normal);
}

.bf-stat-card:hover {
    border-color: rgba(var(--bf-profile-rgb), 0.3);
    transform: translateY(-2px);
}

.bf-stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--bf-profile-color);
}

.bf-stat-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

.bf-menu-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    align-items: center;
}

.bf-menu-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    width: 100%;
}

.bf-menu-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: var(--spacing-sm);
    background: var(--color-bg-light);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.1);
    border-radius: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: var(--transition-normal);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
}

.bf-menu-nav-btn:hover {
    background: rgba(var(--bf-profile-rgb), 0.08);
    color: var(--bf-profile-color);
    border-color: rgba(var(--bf-profile-rgb), 0.3);
    transform: translateY(-2px);
}

.bf-menu-nav-btn i {
    font-size: 1.5rem;
}


/* ============================================================
   PROFILE SELECT
   ============================================================ */

.bf-profile-select {
    padding: var(--spacing-xl) var(--spacing-md);
    margin: 0 auto;
}

.bf-profile-select-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.bf-profile-select-header h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    margin-top: var(--spacing-md);
    color: var(--color-text);
}

.bf-profile-select-header p {
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

.bf-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.bf-profile-card {
    background: var(--color-bg-light);
    border: 2px solid rgba(var(--card-rgb), 0.15);
    border-radius: 16px;
    padding: var(--spacing-lg);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.bf-profile-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 0%,
        rgba(var(--card-rgb), 0.1) 0%,
        transparent 60%);
    opacity: 0;
    transition: var(--transition-normal);
}

.bf-profile-card:hover {
    border-color: var(--card-color);
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(var(--card-rgb), 0.2);
}

.bf-profile-card:hover::before {
    opacity: 1;
}

.bf-profile-card-icon {
    font-size: 3rem;
    color: var(--card-color);
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 0 25px var(--card-color);
    position: relative;
    z-index: 1;
}

.bf-profile-card-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
    position: relative;
    z-index: 1;
}

.bf-profile-card-desc {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
    position: relative;
    z-index: 1;
}

.bf-profile-card-mentor {
    color: var(--color-text-dark);
    font-size: 0.8rem;
    position: relative;
    z-index: 1;
}

.bf-profile-card-footer {
    margin-top: var(--spacing-sm);
    position: relative;
    z-index: 1;
}

.bf-profile-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(var(--card-rgb), 0.1);
    color: var(--card-color);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
}

.bf-profile-card-bonuses {
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: rgba(var(--card-rgb), 0.08);
    border-radius: 8px;
    border-left: 2px solid var(--card-color);
    position: relative;
    z-index: 1;
}

.bf-profile-bonus {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--card-color);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.15rem;
}

.bf-profile-bonus-desc {
    font-size: 0.65rem;
    color: var(--color-text-dark);
    margin-bottom: 0.3rem;
    line-height: 1.3;
}

.bf-mission-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    vertical-align: middle;
    margin-left: 0.3rem;
}


/* ============================================================
   MAP (chapter overview)
   ============================================================ */

.bf-map {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.bf-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.bf-map-header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bf-map-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.bf-map-chapter {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-light);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.bf-map-chapter:hover:not(.bf-ch-locked) {
    background: rgba(var(--bf-profile-rgb), 0.05);
    border-color: rgba(var(--bf-profile-rgb), 0.2);
    transform: translateX(5px);
}

.bf-map-chapter.bf-ch-locked {
    opacity: 0.4;
    cursor: default;
}

.bf-map-chapter.bf-ch-completed {
    border-left: 3px solid var(--color-success);
}

.bf-map-chapter.bf-ch-available {
    border-left: 3px solid var(--bf-profile-color);
}

.bf-map-ch-num {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--bf-profile-color);
    min-width: 36px;
    text-align: center;
}

.bf-map-ch-info {
    flex: 1;
}

.bf-map-ch-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
}

.bf-map-ch-concept {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.bf-map-ch-status {
    flex-shrink: 0;
}

.bf-map-ch-stars {
    display: flex;
    gap: 0.2rem;
}

.bf-map-ch-stars i {
    color: var(--color-warning);
    font-size: 0.9rem;
}

.bf-map-ch-lock {
    color: var(--color-text-dark);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}


/* ============================================================
   LEARN PHASE (dialogue)
   ============================================================ */

.bf-learn {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md);
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
}

.bf-learn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
}

.bf-learn-phase {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bf-profile-color);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.bf-learn-progress {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.bf-learn-progress-bar {
    width: 100%;
    height: 3px;
    background: var(--color-bg-lighter);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
}

.bf-learn-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bf-profile-color), var(--color-secondary));
    border-radius: 2px;
    transition: width 0.5s ease;
}

.bf-learn-content {
    flex: 1;
    display: flex;
    align-items: flex-end;
    padding-bottom: var(--spacing-xl);
}

.bf-dialogue-box {
    width: 100%;
    background: var(--color-bg-light);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.15);
    border-radius: 16px;
    padding: var(--spacing-lg);
    position: relative;
}

.bf-dialogue-mentor {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.bf-mentor-avatar {
    width: 50px; height: 50px;
    background: rgba(var(--bf-profile-rgb), 0.15);
    border: 2px solid var(--bf-profile-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--bf-profile-color);
    flex-shrink: 0;
}

.bf-mentor-name {
    font-weight: 700;
    color: var(--bf-profile-color);
    display: block;
}

.bf-mentor-title {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.bf-dialogue-text {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-text);
    min-height: 60px;
    cursor: pointer;
}

.bf-dialogue-next {
    margin-top: var(--spacing-md);
    float: right;
}


/* ============================================================
   QUIZ PHASE
   ============================================================ */

.bf-quiz {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.bf-quiz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.bf-quiz-dots {
    display: flex;
    gap: 0.4rem;
}

.bf-quiz-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--color-bg-lighter);
    transition: var(--transition-normal);
}

.bf-quiz-dot.bf-dot-done { background: var(--color-success); }
.bf-quiz-dot.bf-dot-active { background: var(--bf-profile-color); box-shadow: 0 0 8px var(--bf-profile-color); }
.bf-quiz-dot.bf-dot-pending { background: var(--color-bg-lighter); }

.bf-quiz-card {
    background: var(--color-bg-light);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.15);
    border-radius: 16px;
    padding: var(--spacing-lg);
}

.bf-quiz-qnum {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bf-profile-color);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.bf-quiz-question p {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text);
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.bf-quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.bf-quiz-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.75rem var(--spacing-md);
    background: var(--color-bg-lighter);
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    width: 100%;
}

.bf-quiz-option:hover:not(:disabled) {
    border-color: rgba(var(--bf-profile-rgb), 0.4);
    background: rgba(var(--bf-profile-rgb), 0.05);
    transform: translateX(4px);
}

.bf-quiz-option-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    background: rgba(var(--bf-profile-rgb), 0.1);
    color: var(--bf-profile-color);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 900;
    border-radius: 6px;
    flex-shrink: 0;
}

.bf-quiz-option.bf-quiz-correct {
    border-color: var(--color-success);
    background: rgba(0, 255, 136, 0.1);
}

.bf-quiz-option.bf-quiz-wrong {
    border-color: var(--color-error);
    background: rgba(255, 51, 51, 0.1);
}

.bf-quiz-feedback {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: 12px;
    animation: feedbackSlide 0.3s ease;
}

@keyframes feedbackSlide {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.bf-quiz-fb-correct {
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.bf-quiz-fb-wrong {
    background: rgba(255, 51, 51, 0.08);
    border: 1px solid rgba(255, 51, 51, 0.2);
}

.bf-quiz-fb-icon {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
}

.bf-quiz-fb-correct .bf-quiz-fb-icon { color: var(--color-success); }
.bf-quiz-fb-wrong .bf-quiz-fb-icon { color: var(--color-error); }

.bf-quiz-feedback p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-sm);
}


/* ============================================================
   BUILD PHASE
   ============================================================ */

.bf-build {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.bf-build-header {
    margin-bottom: var(--spacing-md);
}

.bf-build-instruction {
    margin-bottom: var(--spacing-lg);
}

.bf-build-instruction p {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
}

.bf-build-context {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: rgba(var(--bf-profile-rgb), 0.05);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.1);
    border-radius: 8px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.bf-build-context i {
    color: var(--bf-profile-color);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Choose type */
.bf-build-choices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.bf-build-choice {
    background: var(--color-bg-light);
    border: 2px solid rgba(var(--bf-profile-rgb), 0.1);
    border-radius: 14px;
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.bf-build-choice:hover {
    border-color: rgba(var(--bf-profile-rgb), 0.4);
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(var(--bf-profile-rgb), 0.1);
}

.bf-build-choice.bf-build-selected {
    border-color: var(--bf-profile-color);
    box-shadow: 0 0 25px rgba(var(--bf-profile-rgb), 0.3);
    background: rgba(var(--bf-profile-rgb), 0.08);
}

.bf-build-choice.bf-build-dimmed {
    opacity: 0.3;
    transform: scale(0.98);
    pointer-events: none;
}

.bf-build-choice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xs);
}

.bf-build-choice-header h4 {
    font-size: 1.1rem;
    color: var(--color-text);
}

.bf-build-choice-price {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-warning);
}

.bf-build-choice-specs {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
}

.bf-build-choice-score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.bf-build-choice-score.bf-score-high { color: var(--color-success); }
.bf-build-choice-score.bf-score-mid { color: var(--color-warning); }
.bf-build-choice-score.bf-score-low { color: var(--color-error); }

.bf-build-score-bar {
    flex: 1;
    height: 6px;
    background: var(--color-bg-lighter);
    border-radius: 3px;
    overflow: hidden;
}

.bf-build-score-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s ease;
}

.bf-score-high .bf-build-score-fill { background: var(--color-success); }
.bf-score-mid .bf-build-score-fill { background: var(--color-warning); }
.bf-score-low .bf-build-score-fill { background: var(--color-error); }

/* Assembly type */
.bf-assembly-area {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.bf-assembly-board {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--color-bg-light);
    border: 2px dashed rgba(var(--bf-profile-rgb), 0.15);
    border-radius: 16px;
    overflow: hidden;
}

.bf-assembly-target {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 100px;
    padding: 0.5rem 0.8rem;
    background: rgba(var(--bf-profile-rgb), 0.08);
    border: 2px dashed rgba(var(--bf-profile-rgb), 0.25);
    border-radius: 10px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    transition: all var(--transition-normal);
}

.bf-assembly-target.bf-drop-hover {
    border-color: var(--bf-profile-color);
    background: rgba(var(--bf-profile-rgb), 0.15);
    transform: translate(-50%, -50%) scale(1.05);
}

.bf-assembly-target.bf-drop-filled {
    border-style: solid;
    border-color: var(--bf-profile-color);
    background: rgba(var(--bf-profile-rgb), 0.12);
    color: var(--bf-profile-color);
}

.bf-assembly-target.bf-target-correct {
    border-color: var(--color-success);
    background: rgba(0, 255, 136, 0.12);
    color: var(--color-success);
}

.bf-assembly-target.bf-target-wrong {
    border-color: var(--color-error);
    background: rgba(255, 51, 51, 0.12);
    color: var(--color-error);
}

.bf-assembly-pieces {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: center;
}

.bf-assembly-piece {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    background: var(--color-bg-light);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.2);
    border-radius: 8px;
    cursor: grab;
    transition: all var(--transition-fast);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    user-select: none;
}

.bf-assembly-piece:hover {
    border-color: var(--bf-profile-color);
    transform: translateY(-2px);
}

.bf-assembly-piece.bf-dragging {
    opacity: 0.4;
}

.bf-assembly-piece.bf-piece-placed {
    opacity: 0.3;
    cursor: default;
    border-style: dashed;
}

.bf-assembly-piece i {
    color: var(--bf-profile-color);
}

.bf-assembly-validate {
    margin-top: var(--spacing-md);
    align-self: center;
}


/* ============================================================
   BENCHMARK PHASE
   ============================================================ */

.bf-benchmark {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

.bf-benchmark-header {
    margin-bottom: var(--spacing-xl);
}

.bf-benchmark-display {
    text-align: center;
    padding: var(--spacing-xl);
    background: var(--color-bg-light);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.15);
    border-radius: 20px;
}

.bf-benchmark-icon {
    font-size: 3rem;
    color: var(--bf-profile-color);
    text-shadow: 0 0 30px var(--bf-profile-color);
    margin-bottom: var(--spacing-sm);
}

.bf-benchmark-label {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: var(--spacing-xs);
}

.bf-benchmark-score {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 900;
    color: var(--bf-profile-color);
    text-shadow: 0 0 40px rgba(var(--bf-profile-rgb), 0.5);
    line-height: 1;
}

.bf-benchmark-unit {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-lg);
}

.bf-benchmark-bar {
    position: relative;
    width: 100%;
    height: 12px;
    background: var(--color-bg-lighter);
    border-radius: 6px;
    overflow: visible;
    margin-bottom: var(--spacing-sm);
}

.bf-benchmark-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-error), var(--color-warning), var(--color-success));
    border-radius: 6px;
    transition: width 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 0%;
    box-shadow: 0 0 10px rgba(var(--bf-profile-rgb), 0.3);
}

.bf-benchmark-target {
    position: absolute;
    top: -22px;
    transform: translateX(-50%);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bf-benchmark-target::after {
    content: '';
    width: 2px;
    height: 16px;
    background: var(--color-text-dark);
    margin-top: 2px;
}

.bf-benchmark-range {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-text-dark);
}


/* ============================================================
   INCIDENT PHASE
   ============================================================ */

.bf-incident {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.bf-incident-alert {
    text-align: center;
    padding: var(--spacing-xl);
    animation: incidentPulse 1.5s ease-in-out infinite;
}

@keyframes incidentPulse {
    0%, 100% { text-shadow: 0 0 20px var(--color-error); }
    50% { text-shadow: 0 0 50px var(--color-error), 0 0 80px var(--color-error); }
}

.bf-incident-alert i {
    font-size: 4rem;
    color: var(--color-error);
    display: block;
    margin-bottom: var(--spacing-sm);
}

.bf-incident-alert h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-error);
}

.bf-incident-card {
    background: var(--color-bg-light);
    border: 1px solid rgba(255, 51, 51, 0.2);
    border-radius: 16px;
    padding: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.bf-incident-desc {
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.bf-incident-symptom {
    padding: var(--spacing-sm);
    background: rgba(255, 51, 51, 0.05);
    border-left: 3px solid var(--color-error);
    border-radius: 0 8px 8px 0;
    margin-bottom: var(--spacing-md);
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.bf-incident-solutions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.bf-incident-solutions > p {
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.bf-incident-solution {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.65rem var(--spacing-md);
    background: var(--color-bg-lighter);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: left;
    width: 100%;
}

.bf-incident-solution:hover:not(:disabled) {
    border-color: var(--color-warning);
    background: rgba(255, 170, 0, 0.05);
}

.bf-incident-sol-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    background: rgba(255, 170, 0, 0.15);
    color: var(--color-warning);
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 900;
    border-radius: 50%;
    flex-shrink: 0;
}


/* ============================================================
   RESULT PHASE
   ============================================================ */

.bf-result {
    max-width: 500px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
}

.bf-result-card {
    background: var(--color-bg-light);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.2);
    border-radius: 20px;
    padding: var(--spacing-xl);
    text-align: center;
    width: 100%;
}

.bf-result-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--bf-profile-color);
    text-shadow: 0 0 20px rgba(var(--bf-profile-rgb), 0.3);
    margin-bottom: var(--spacing-md);
}

.bf-result-stars {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.bf-result-star {
    font-size: 2.5rem;
}

.bf-result-star.bf-star-earned {
    color: var(--color-warning);
    animation: starBounce 0.5s ease;
    text-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
}

.bf-result-star.bf-star-empty {
    color: var(--color-bg-lighter);
}

@keyframes starBounce {
    0% { transform: scale(0) rotate(-30deg); }
    60% { transform: scale(1.3) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}

.bf-result-score {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.bf-result-score strong {
    color: var(--color-text);
    font-size: 1.4rem;
}

.bf-result-rewards {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.bf-result-reward {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.bf-result-reward:first-child { color: var(--bf-profile-color); }
.bf-result-reward:last-child { color: var(--color-warning); }

.bf-result-levelup {
    background: rgba(var(--bf-profile-rgb), 0.1);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.3);
    color: var(--bf-profile-color);
    padding: var(--spacing-sm);
    border-radius: 10px;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    animation: pulseGlow 1.5s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(var(--bf-profile-rgb), 0.1); }
    50% { box-shadow: 0 0 25px rgba(var(--bf-profile-rgb), 0.3); }
}

.bf-result-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-top: var(--spacing-md);
}


/* ============================================================
   SHOP
   ============================================================ */

.bf-shop {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.bf-shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.bf-shop-header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bf-shop-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-warning);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(255, 170, 0, 0.05);
    border: 1px solid rgba(255, 170, 0, 0.15);
    border-radius: 12px;
}

.bf-shop-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-xs);
}

.bf-shop-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--color-bg-light);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.bf-shop-tab:hover {
    border-color: rgba(var(--bf-profile-rgb), 0.3);
    color: var(--color-text);
}

.bf-shop-tab.bf-shop-tab-active {
    background: rgba(var(--bf-profile-rgb), 0.1);
    border-color: var(--bf-profile-color);
    color: var(--bf-profile-color);
}

.bf-shop-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.bf-shop-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-light);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    transition: var(--transition-normal);
}

.bf-shop-item:hover {
    border-color: rgba(var(--bf-profile-rgb), 0.15);
}

.bf-shop-item-icon {
    width: 42px; height: 42px;
    background: rgba(var(--bf-profile-rgb), 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--bf-profile-color);
    flex-shrink: 0;
}

.bf-shop-item-info {
    flex: 1;
}

.bf-shop-item-info h4 {
    font-size: 1rem;
    color: var(--color-text);
}

.bf-shop-item-info p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.bf-shop-item-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
}

.bf-shop-item-price {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-warning);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}


/* ============================================================
   FRIENDS
   ============================================================ */

.bf-friends {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.bf-friends-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.bf-friends-header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bf-friends-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.bf-friends-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    justify-content: center;
    padding: 0.5rem;
    background: var(--color-bg-light);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.bf-friends-tab:hover { border-color: rgba(var(--bf-profile-rgb), 0.3); }

.bf-friends-tab.bf-friends-tab-active {
    background: rgba(var(--bf-profile-rgb), 0.1);
    border-color: var(--bf-profile-color);
    color: var(--bf-profile-color);
}

.bf-friends-search {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.bf-search-bar {
    display: flex;
    gap: var(--spacing-xs);
}

.bf-search-bar .bf-input { flex: 1; }

.bf-friend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-light);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    margin-bottom: var(--spacing-xs);
}

.bf-friend-info strong {
    display: block;
    color: var(--color-text);
}

.bf-friend-info span {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.bf-friend-actions {
    display: flex;
    gap: 0.3rem;
}

.bf-online {
    color: var(--color-success);
    font-size: 0.8rem;
    font-weight: 700;
}

.bf-offline {
    color: var(--color-text-dark);
    font-size: 0.8rem;
}


/* ============================================================
   LEADERBOARD
   ============================================================ */

.bf-leaderboard {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

.bf-lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.bf-lb-header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bf-lb-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-xs);
}

.bf-lb-tab {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    background: var(--color-bg-light);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.bf-lb-tab:hover { border-color: rgba(var(--bf-profile-rgb), 0.3); }

.bf-lb-tab.bf-lb-tab-active {
    background: rgba(var(--bf-profile-rgb), 0.1);
    border-color: var(--bf-profile-color);
    color: var(--bf-profile-color);
}

.bf-lb-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bf-lb-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-light);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    transition: var(--transition-fast);
}

.bf-lb-row:hover {
    background: rgba(var(--bf-profile-rgb), 0.03);
}

.bf-lb-row.bf-lb-row-me {
    border-color: var(--bf-profile-color);
    background: rgba(var(--bf-profile-rgb), 0.06);
}

.bf-lb-rank {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-muted);
    min-width: 30px;
    text-align: center;
}

.bf-lb-medal {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 900;
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.bf-lb-medal-1 { background: #ffd700; color: var(--color-bg); }
.bf-lb-medal-2 { background: #c0c0c0; color: var(--color-bg); }
.bf-lb-medal-3 { background: #cd7f32; color: var(--color-bg); }

.bf-lb-player {
    flex: 1;
}

.bf-lb-player strong {
    display: block;
    color: var(--color-text);
    font-size: 0.95rem;
}

.bf-lb-player span {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.bf-lb-score {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bf-profile-color);
}


/* ============================================================
   NOTIFICATIONS
   ============================================================ */

#bf-notifications {
    position: fixed;
    top: 65px;
    right: var(--spacing-md);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    pointer-events: none;
}

.bf-notif {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    border-radius: 10px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    font-weight: 600;
    font-size: 0.9rem;
    pointer-events: auto;
    animation: notifSlideIn 0.3s ease;
    max-width: 350px;
}

.bf-notif-info {
    background: rgba(0, 240, 255, 0.12);
    border: 1px solid rgba(0, 240, 255, 0.25);
    color: var(--color-primary);
}

.bf-notif-success {
    background: rgba(0, 255, 136, 0.12);
    border: 1px solid rgba(0, 255, 136, 0.25);
    color: var(--color-success);
}

.bf-notif-warning {
    background: rgba(255, 170, 0, 0.12);
    border: 1px solid rgba(255, 170, 0, 0.25);
    color: var(--color-warning);
}

.bf-notif-error {
    background: rgba(255, 51, 51, 0.12);
    border: 1px solid rgba(255, 51, 51, 0.25);
    color: var(--color-error);
}

@keyframes notifSlideIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.bf-notif-exit {
    animation: notifSlideOut 0.4s ease forwards;
}

@keyframes notifSlideOut {
    to { opacity: 0; transform: translateX(60px); }
}


/* ============================================================
   LEVEL UP OVERLAY
   ============================================================ */

.bf-levelup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: overlayFadeIn 0.3s ease;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.bf-levelup-exit {
    animation: overlayFadeOut 0.6s ease forwards;
}

@keyframes overlayFadeOut {
    to { opacity: 0; }
}

.bf-levelup-content {
    text-align: center;
}

.bf-levelup-icon {
    font-size: 5rem;
    color: var(--bf-profile-color);
    margin-bottom: var(--spacing-md);
    animation: levelUpBounce 0.6s ease;
}

@keyframes levelUpBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.bf-levelup-content h2 {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--bf-profile-color);
    text-shadow: 0 0 40px var(--bf-profile-color), 0 0 80px var(--bf-profile-color);
    letter-spacing: 5px;
}

.bf-levelup-content p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    margin-top: var(--spacing-sm);
}


/* ============================================================
   DAILY BONUS POPUP
   ============================================================ */

.bf-daily-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: overlayFadeIn 0.3s ease;
}

.bf-daily-card {
    background: var(--color-bg-light);
    border: 1px solid rgba(var(--bf-profile-rgb), 0.2);
    border-radius: 20px;
    padding: var(--spacing-xl);
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.bf-daily-card h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--color-warning);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.bf-daily-days {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.bf-daily-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.5rem;
    background: var(--color-bg-lighter);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    min-width: 44px;
    transition: var(--transition-normal);
}

.bf-daily-day.bf-daily-earned {
    background: rgba(255, 170, 0, 0.1);
    border-color: rgba(255, 170, 0, 0.3);
}

.bf-daily-day.bf-daily-today {
    border-color: var(--color-warning);
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.3);
    animation: dailyPulse 1.5s ease-in-out infinite;
}

@keyframes dailyPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 170, 0, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 170, 0, 0.4); }
}

.bf-daily-day-num {
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-text-muted);
}

.bf-daily-day-reward {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--color-warning);
}

.bf-daily-day i {
    font-size: 0.7rem;
}

.bf-daily-earned i { color: var(--color-warning); }

.bf-daily-reward {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-warning);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}


/* ============================================================
   PROFILE THEME OVERRIDES
   ============================================================ */

.bf-theme-gamer { --bf-profile-color: #00f0ff; --bf-profile-rgb: 0, 240, 255; }
.bf-theme-codeur { --bf-profile-color: #00ff88; --bf-profile-rgb: 0, 255, 136; }
.bf-theme-modelisateur { --bf-profile-color: #b44dff; --bf-profile-rgb: 180, 77, 255; }
.bf-theme-monteur { --bf-profile-color: #ff4444; --bf-profile-rgb: 255, 68, 68; }
.bf-theme-secretaire { --bf-profile-color: #4d9fff; --bf-profile-rgb: 77, 159, 255; }


/* ============================================================
   LANDING PAGE — HERO
   ============================================================ */

.bf-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    overflow: hidden;
}

.bf-hero-particles {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.bf-hero-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.bf-hero-logo {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 900;
    letter-spacing: 6px;
    margin-bottom: var(--spacing-md);
    line-height: 1;
}

.bf-hero-byte {
    color: var(--color-text);
}

.bf-hero-forge {
    color: var(--color-primary);
    text-shadow: 0 0 40px var(--color-primary), 0 0 80px var(--color-primary);
}

.bf-hero-tagline {
    font-family: var(--font-display);
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.bf-hero-sub {
    font-size: 1.1rem;
    color: var(--color-text-dark);
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
    line-height: 1.8;
}

.bf-hero-ctas {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.bf-hero-cta-main {
    animation: ctaPulse 2s ease-in-out infinite;
}

@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 240, 255, 0.3); }
    50% { box-shadow: 0 0 40px rgba(0, 240, 255, 0.5); }
}

.bf-float-anim {
    animation: heroFloat 4s ease-in-out infinite;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}


/* ============================================================
   LANDING PAGE — SECTIONS
   ============================================================ */

.bf-section-title {
    font-family: var(--font-display);
    font-size: 2rem;
    text-align: center;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.bf-section-sub {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.05rem;
    margin-bottom: var(--spacing-xl);
}

/* Profiles preview */
.bf-profiles-section {
    padding: var(--spacing-2xl) 0;
    position: relative;
    z-index: 1;
}

.bf-profiles-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.bf-preview-card {
    background: var(--color-bg-light);
    border: 2px solid rgba(var(--card-rgb), 0.12);
    border-radius: 16px;
    padding: var(--spacing-lg);
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.bf-preview-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--card-color);
    opacity: 0;
    transition: var(--transition-normal);
}

.bf-preview-card:hover {
    border-color: rgba(var(--card-rgb), 0.4);
    transform: translateY(-6px);
    box-shadow: 0 12px 35px rgba(var(--card-rgb), 0.15);
}

.bf-preview-card:hover::before { opacity: 1; }

.bf-preview-icon {
    font-size: 2.5rem;
    color: var(--card-color);
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 0 20px var(--card-color);
}

.bf-preview-card h3 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.bf-preview-card p {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-xs);
}

.bf-preview-mentor {
    font-size: 0.75rem;
    color: var(--color-text-dark);
}

/* Features */
.bf-features-section {
    padding: var(--spacing-2xl) 0;
    position: relative;
    z-index: 1;
}

.bf-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.bf-feature-card {
    background: var(--color-bg-light);
    border: 1px solid rgba(0, 240, 255, 0.08);
    border-radius: 16px;
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
}

.bf-feature-card:hover {
    border-color: rgba(0, 240, 255, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.08);
}

.bf-feature-icon {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.bf-feature-card h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.bf-feature-card p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Chapters preview */
.bf-chapters-preview {
    padding: var(--spacing-2xl) 0;
    position: relative;
    z-index: 1;
}

.bf-chapters-scroll {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    padding-bottom: var(--spacing-md);
    scroll-snap-type: x mandatory;
}

.bf-chapter-preview-card {
    flex: 0 0 180px;
    background: var(--color-bg-light);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 14px;
    padding: var(--spacing-md);
    text-align: center;
    scroll-snap-align: start;
    transition: all var(--transition-normal);
}

.bf-chapter-preview-card:hover {
    border-color: rgba(0, 240, 255, 0.3);
    transform: translateY(-4px);
}

.bf-chapter-preview-card .bf-ch-num {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--color-primary);
    display: block;
    margin-bottom: var(--spacing-xs);
}

.bf-chapter-preview-card h4 {
    font-size: 0.95rem;
    color: var(--color-text);
    margin-bottom: 0.3rem;
}

.bf-chapter-preview-card p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.bf-ch-more {
    border-style: dashed;
}

/* Final CTA */
.bf-final-cta {
    padding: var(--spacing-2xl) 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.bf-final-cta h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.bf-final-cta p {
    color: var(--color-text-muted);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-lg);
}

/* Footer */
.bf-footer {
    padding: var(--spacing-lg) 0;
    border-top: 1px solid rgba(0, 240, 255, 0.08);
    position: relative;
    z-index: 1;
}

.bf-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bf-footer-logo {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--color-text);
}

.bf-footer-logo span {
    color: var(--color-primary);
}

.bf-footer-brand p {
    font-size: 0.8rem;
    color: var(--color-text-dark);
}

.bf-footer-links {
    display: flex;
    gap: var(--spacing-md);
}

.bf-footer-links a {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    transition: var(--transition-fast);
}

.bf-footer-links a:hover {
    color: var(--color-primary);
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

.bf-fade-in {
    animation: bfFadeIn 0.4s ease;
}

@keyframes bfFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.bf-slide-up {
    animation: bfSlideUp 0.4s ease both;
}

@keyframes bfSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.bf-slide-down {
    animation: bfSlideDown 0.3s ease;
}

@keyframes bfSlideDown {
    from { opacity: 0; transform: translateY(-15px); }
    to { opacity: 1; transform: translateY(0); }
}

.bf-pulse-glow {
    animation: bfPulseGlow 2s ease-in-out infinite;
}

@keyframes bfPulseGlow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(var(--bf-profile-rgb), 0.3);
    }
    50% {
        text-shadow: 0 0 40px rgba(var(--bf-profile-rgb), 0.6),
                     0 0 80px rgba(var(--bf-profile-rgb), 0.3);
    }
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-bg-lighter);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--bf-profile-rgb), 0.3);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .nav-links {
        gap: var(--spacing-sm);
    }

    .nav-link {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    /* Navbar mobile */
    .nav-burger { display: flex; }

    .nav-links {
        position: fixed;
        top: 52px; left: 0;
        width: 100%;
        flex-direction: column;
        background: rgba(10, 14, 26, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: var(--spacing-md);
        gap: 0;
        border-bottom: 1px solid rgba(0, 240, 255, 0.1);
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
        z-index: 999;
    }

    .nav-links.nav-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .nav-link {
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    /* HUD mobile */
    .bf-hud {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .bf-hud-center { display: none; }

    .bf-hud-xp-bar { width: 60px; }

    /* Menu mobile */
    .bf-menu-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .bf-menu-nav {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Profile select mobile */
    .bf-profile-grid {
        grid-template-columns: 1fr;
        max-width: 350px;
        margin: 0 auto;
    }

    /* Hero mobile */
    .bf-hero {
        padding-top: 100px;
        min-height: auto;
        padding-bottom: var(--spacing-xl);
    }

    .bf-hero-logo {
        letter-spacing: 3px;
    }

    /* Preview cards mobile */
    .bf-profiles-preview {
        grid-template-columns: 1fr 1fr;
    }

    .bf-features-grid {
        grid-template-columns: 1fr;
    }

    /* Quiz mobile */
    .bf-quiz-option {
        padding: 0.6rem var(--spacing-sm);
    }

    /* Build mobile */
    .bf-assembly-board {
        aspect-ratio: 4 / 3;
    }

    /* Result mobile */
    .bf-result-stars {
        gap: var(--spacing-sm);
    }

    .bf-result-star { font-size: 2rem; }

    /* Footer mobile */
    .bf-footer-content {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }

    .bf-footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .bf-hero-ctas {
        flex-direction: column;
        align-items: center;
    }

    .bf-profiles-preview {
        grid-template-columns: 1fr;
    }

    .bf-menu-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .bf-stat-value {
        font-size: 1.2rem;
    }

    .bf-build-choice {
        padding: var(--spacing-sm);
    }

    .bf-benchmark-score {
        font-size: 3rem;
    }

    .bf-daily-days {
        gap: 4px;
    }

    .bf-daily-day {
        min-width: 38px;
        padding: 0.3rem;
    }

    .bf-levelup-content h2 {
        font-size: 2rem;
    }
}


/* ################################################################
   ################################################################
   RPG OVERLAY SYSTEM — Canvas-based game UI
   All styles below are for the top-down RPG mode
   (rpg-dialogue.js, rpg-hud.js overlays on #bf-canvas)
   ################################################################
   ################################################################ */


/* ============================================================
   RPG GAME CONTAINER
   ============================================================ */

.bf-game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #0a0e1a;
}

#bf-canvas {
    position: absolute;
    top: 42px; left: 0;
    width: 100%; height: calc(100% - 42px);
    z-index: 1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#bf-overlay {
    position: absolute;
    top: 42px; left: 0;
    width: 100%; height: calc(100% - 42px);
    z-index: 100;
    pointer-events: none;
}

#bf-overlay > * {
    pointer-events: auto;
}


/* ============================================================
   RPG HUD — Persistent overlay (top + bottom bars)
   ============================================================ */

#bf-overlay .bf-hud {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    z-index: 110;
    pointer-events: none;
}

#bf-overlay .bf-hud > * {
    pointer-events: auto;
}

.bf-hud-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    gap: 16px;
}

.bf-hud-top .bf-hud-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bf-hud-top .bf-hud-profile > i {
    font-size: 1.1rem;
    color: var(--bf-profile-color, var(--bf-primary));
}

.bf-hud-top .bf-hud-level {
    font-family: var(--bf-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bf-text);
    letter-spacing: 1px;
}

.bf-hud-top .bf-hud-xp-bar {
    width: 100px;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    position: relative;
}

.bf-hud-top .bf-hud-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bf-profile-color, var(--bf-primary)), var(--bf-secondary));
    transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bf-hud-top .bf-hud-xp-text {
    font-size: 0.65rem;
    color: var(--bf-text-dim);
    white-space: nowrap;
}

.bf-hud-top .bf-hud-bytes {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--bf-warning);
}

.bf-hud-top .bf-hud-bytes i {
    font-size: 0.85rem;
}

.bf-hud-top .bf-hud-quest {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--bf-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.bf-hud-top .bf-hud-quest i {
    color: var(--bf-profile-color, var(--bf-primary));
    flex-shrink: 0;
}

.bf-hud-bottom {
    position: fixed;
    top: 100px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bf-border);
    border-radius: 8px;
    z-index: 115;
}

.bf-hud-bottom .bf-hud-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.15);
    color: var(--bf-text-dim);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bf-hud-bottom .bf-hud-btn:hover {
    background: rgba(0, 240, 255, 0.15);
    border-color: var(--bf-primary);
    color: var(--bf-primary);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
}

/* ===== VOLUME CONTROL ===== */
.bf-hud-spacer {
    flex: 1;
}

.bf-volume-control {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

/* ===== Volume Widget (right side) ===== */
/* ===== VOLUME (horizontal, in header) ===== */
.bf-volume-header {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bf-vol-icon-btn {
    background: none;
    border: none;
    color: var(--bf-primary);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 2px;
    transition: color 0.2s ease;
}

.bf-vol-icon-btn:hover {
    color: #fff;
}

.bf-vol-slider-h {
    -webkit-appearance: none;
    appearance: none;
    width: 90px;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.bf-vol-slider-h::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bf-primary);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

.bf-vol-slider-h::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bf-primary);
    cursor: pointer;
    border: none;
}

.bf-vol-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bf-text-dim);
    min-width: 32px;
    text-align: center;
}

.bf-vol-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
    border-radius: 2px;
    cursor: pointer;
}

.bf-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bf-primary);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

.bf-vol-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bf-primary);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

/* ===== MINI-MAP ===== */
.bf-minimap {
    position: fixed;
    top: 55px;
    left: 12px;
    width: 260px;
    z-index: 115;
    pointer-events: auto;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(0, 240, 255, 0.04) 0%, transparent 70%),
        rgba(5, 8, 16, 0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1.5px solid rgba(0, 240, 255, 0.25);
    border-radius: 6px;
    overflow: visible;
    animation: bf-slide-in-left 0.4s ease;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.5),
        0 2px 16px rgba(0, 0, 0, 0.6),
        0 0 1px rgba(0, 240, 255, 0.3);
    margin-bottom: 8px;
}

/* Corner brackets — top-left */
.bf-minimap::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 14px;
    height: 14px;
    border-top: 2px solid rgba(0, 240, 255, 0.5);
    border-left: 2px solid rgba(0, 240, 255, 0.5);
    border-radius: 6px 0 0 0;
    pointer-events: none;
    z-index: 2;
}

/* Corner brackets — bottom-right */
.bf-minimap::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 14px;
    height: 14px;
    border-bottom: 2px solid rgba(0, 240, 255, 0.5);
    border-right: 2px solid rgba(0, 240, 255, 0.5);
    border-radius: 0 0 6px 0;
    pointer-events: none;
    z-index: 2;
}

.bf-minimap-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-family: var(--bf-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(0, 240, 255, 0.7);
    border-bottom: 1px solid rgba(0, 240, 255, 0.12);
    background: rgba(0, 240, 255, 0.03);
}

.bf-minimap-header i {
    font-size: 0.65rem;
}

/* Scanline dot after title */
.bf-minimap-header span::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background: rgba(0, 240, 255, 0.5);
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    animation: bf-mm-scan-dot 2s ease-in-out infinite;
}

@keyframes bf-mm-scan-dot {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.bf-minimap-grid {
    position: relative;
    z-index: 1;
    padding: 12px 14px 14px;
    /* Subtle grid background like blueprint */
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            rgba(0, 240, 255, 0.018) 19px,
            rgba(0, 240, 255, 0.018) 20px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            rgba(0, 240, 255, 0.018) 19px,
            rgba(0, 240, 255, 0.018) 20px
        );
}

/* SVG connections layer */
.bf-mm-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.bf-mm-connections line {
    stroke: rgba(0, 240, 255, 0.15);
    stroke-width: 1.5;
    stroke-dasharray: 3 2;
}

/* Room nodes layout — CSS Grid */
.bf-mm-map-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 6px 8px;
    position: relative;
}

.bf-mm-room {
    padding: 6px 5px;
    text-align: center;
    font-family: var(--bf-font-body);
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    transition: all 0.3s ease;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    position: relative;
    cursor: default;
    line-height: 1.3;
    /* Dashed inner feel like a floor plan */
    outline: 1px dashed rgba(255, 255, 255, 0.03);
    outline-offset: -3px;
}

.bf-mm-room:hover {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
}

.bf-mm-room.bf-mm-active {
    color: #fff;
    background:
        radial-gradient(ellipse at center, rgba(0, 240, 255, 0.15) 0%, rgba(0, 240, 255, 0.04) 70%);
    border-color: rgba(0, 240, 255, 0.6);
    outline-color: rgba(0, 240, 255, 0.08);
    box-shadow:
        0 0 8px rgba(0, 240, 255, 0.2),
        inset 0 0 12px rgba(0, 240, 255, 0.06);
    animation: bf-mm-pulse 2.5s ease-in-out infinite;
}

.bf-mm-room.bf-mm-active::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 6px;
    border: 1px solid rgba(0, 240, 255, 0.15);
    animation: bf-mm-pulse 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bf-mm-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(0, 240, 255, 0.2), inset 0 0 12px rgba(0, 240, 255, 0.06);
    }
    50% {
        box-shadow: 0 0 14px rgba(0, 240, 255, 0.35), inset 0 0 16px rgba(0, 240, 255, 0.1);
    }
}

/* Connecting corridors between rooms */
.bf-mm-conn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bf-mm-conn-h {
    width: 100%;
    height: 0;
    border-top: 1px dashed rgba(0, 240, 255, 0.2);
    position: relative;
}

.bf-mm-conn-h::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    background: rgba(0, 240, 255, 0.15);
    border: 1px solid rgba(0, 240, 255, 0.25);
    border-radius: 1px;
    /* Small door icon in the middle of corridor */
}

.bf-mm-conn-v {
    width: 0;
    height: 100%;
    min-height: 6px;
    border-left: 1px dashed rgba(0, 240, 255, 0.2);
}

.bf-mm-empty {
    /* empty grid cell placeholder */
}

/* Room icon */
.bf-mm-room i {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 2px;
    opacity: 0.35;
}

.bf-mm-room.bf-mm-active i {
    opacity: 1;
    color: var(--bf-primary);
    filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.4));
}

/* ===== MINIMAP — Player Sprite Avatar ===== */
.bf-mm-avatar {
    position: absolute;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border-radius: 2px;
    border: 1.5px solid rgba(0, 240, 255, 0.6);
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.5), 0 0 12px rgba(0, 240, 255, 0.2);
    animation: bf-mm-avatar-pulse 1.5s ease-in-out infinite;
}

@keyframes bf-mm-avatar-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(0, 240, 255, 0.5), 0 0 12px rgba(0, 240, 255, 0.2); }
    50% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.8), 0 0 18px rgba(0, 240, 255, 0.4); }
}

/* ===== MINIMAP — Quest Badge on Room ===== */
.bf-mm-quest-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    pointer-events: none;
    line-height: 1;
    animation: bf-mm-badge-bounce 2s ease-in-out infinite;
}

.bf-mm-quest-badge.bf-mm-qb-new {
    background: #ffd700;
    color: #1a1a00;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

.bf-mm-quest-badge.bf-mm-qb-active {
    background: #4499ff;
    color: #fff;
    box-shadow: 0 0 6px rgba(68, 153, 255, 0.6);
}

@keyframes bf-mm-badge-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* ===== MINIMAP — Hover Tooltip ===== */
.bf-mm-tooltip {
    position: absolute;
    z-index: 200;
    min-width: 170px;
    max-width: 240px;
    background: rgba(5, 8, 18, 0.97);
    border: 1.5px solid rgba(0, 240, 255, 0.35);
    border-radius: 6px;
    padding: 10px 12px;
    pointer-events: none;
    font-family: var(--bf-font-body);
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 240, 255, 0.12);
    animation: bf-mm-tip-in 0.15s ease;
}

@keyframes bf-mm-tip-in {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}

.bf-mm-tip-title {
    font-family: var(--bf-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--bf-primary);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.bf-mm-tip-section {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bf-mm-tip-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(0, 240, 255, 0.55);
    margin-bottom: 3px;
}

.bf-mm-tip-npc, .bf-mm-tip-obj {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.bf-mm-tip-npc i, .bf-mm-tip-obj i {
    font-size: 0.78rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.bf-mm-tip-quest {
    font-size: 0.72rem;
    font-weight: 800;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    flex-shrink: 0;
}

.bf-mm-tip-quest-new {
    background: #ffd700;
    color: #1a1a00;
}

.bf-mm-tip-quest-active {
    background: #4499ff;
    color: #fff;
}

.bf-mm-tip-quest-done {
    background: #44cc55;
    color: #fff;
}

/* ===== OBJECTIVE PANEL ===== */
.bf-hud-objective {
    position: fixed;
    top: 56px;
    right: 12px;
    width: 320px;
    z-index: 115;
    pointer-events: auto;
    animation: bf-slide-in-right 0.4s ease;
}

@keyframes bf-slide-in-right {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes bf-slide-in-left {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

.bf-obj-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(10, 14, 26, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-bottom: none;
    cursor: pointer;
    user-select: none;
    font-family: var(--bf-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bf-primary);
}

.bf-obj-header:hover {
    background: rgba(10, 14, 26, 0.97);
}

.bf-obj-header > i:first-child {
    font-size: 0.85rem;
}

.bf-obj-header > span {
    flex: 1;
}

.bf-obj-chevron {
    font-size: 0.7rem;
    transition: transform 0.25s ease;
    opacity: 0.6;
}

.bf-obj-body {
    background: rgba(10, 14, 26, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 240, 255, 0.15);
    border-top: none;
    padding: 10px 12px 12px;
}

.bf-obj-quest {
    margin-bottom: 6px;
}

.bf-obj-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bf-text-dim);
    margin-bottom: 2px;
    font-family: var(--bf-font-display);
}

.bf-obj-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bf-text);
    line-height: 1.2;
}

.bf-obj-status {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 2px;
}

.bf-obj-status--active {
    background: rgba(0, 240, 255, 0.15);
    color: var(--bf-primary);
    border: 1px solid rgba(0, 240, 255, 0.3);
}

.bf-obj-status--available {
    background: rgba(255, 200, 0, 0.15);
    color: #ffc800;
    border: 1px solid rgba(255, 200, 0, 0.3);
}

.bf-obj-status--turnin {
    background: rgba(0, 200, 100, 0.15);
    color: #00cc66;
    border: 1px solid rgba(0, 200, 100, 0.3);
}

.bf-obj-status--done {
    background: rgba(0, 200, 100, 0.2);
    color: #00ff88;
    border: 1px solid rgba(0, 200, 100, 0.4);
}

.bf-obj-status--locked {
    background: rgba(255, 68, 68, 0.12);
    color: #ff6666;
    border: 1px solid rgba(255, 68, 68, 0.25);
}

.bf-obj-hint {
    font-size: 0.95rem;
    color: var(--bf-text-dim);
    line-height: 1.4;
    margin-top: 4px;
    font-style: italic;
}

.bf-obj-concept {
    font-size: 0.85rem;
    color: var(--bf-profile-color, var(--bf-primary));
    margin-top: 4px;
    margin-bottom: 6px;
    padding: 4px 8px;
    background: rgba(0, 240, 255, 0.06);
    border-left: 2px solid var(--bf-profile-color, var(--bf-primary));
    line-height: 1.3;
}

.bf-obj-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 6px;
}

.bf-obj-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    color: var(--bf-text);
}

.bf-obj-detail > i {
    font-size: 0.75rem;
    color: var(--bf-profile-color, var(--bf-primary));
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.bf-obj-detail > span {
    font-weight: 600;
}

.bf-obj-divider {
    height: 1px;
    background: rgba(0, 240, 255, 0.1);
    margin: 8px 0;
}

.bf-obj-stats {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.bf-obj-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
}

.bf-obj-stat > i {
    font-size: 0.85rem;
    color: var(--bf-profile-color, var(--bf-primary));
    flex-shrink: 0;
}

.bf-obj-stat > i.bi-coin {
    font-size: 1.3rem;
}

.bf-obj-stat-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bf-text);
    line-height: 1.1;
}

.bf-obj-stat-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bf-text-dim);
}

.bf-obj-extras {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bf-obj-extra {
    font-size: 0.97rem;
    color: var(--bf-text-dim);
    display: flex;
    align-items: center;
    gap: 5px;
}

.bf-obj-extra i {
    font-size: 0.92rem;
    color: var(--bf-profile-color, var(--bf-primary));
    opacity: 0.7;
    width: 14px;
    text-align: center;
}

.bf-obj-extra span {
    color: var(--bf-text);
    font-weight: 600;
}

/* Profile tooltip on hover */
.bf-obj-profile-row {
    position: relative;
    cursor: pointer;
}

.bf-obj-profile-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    padding: 10px 12px;
    background: rgba(10, 14, 26, 0.95);
    border: 1px solid var(--bf-profile-color, var(--bf-primary));
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--bf-text-dim);
    line-height: 1.5;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    pointer-events: none;
}

.bf-obj-profile-tooltip strong {
    display: block;
    color: var(--bf-profile-color, var(--bf-primary));
    font-size: 0.82rem;
    margin-bottom: 4px;
}

.bf-obj-profile-tooltip .bf-obj-tt-desc {
    color: var(--bf-text-dim);
    opacity: 0.8;
    font-size: 0.7rem;
    margin-bottom: 4px;
}

.bf-obj-profile-row:hover .bf-obj-profile-tooltip:not(:empty) {
    display: block;
}

/* Objective panel buttons */
.bf-obj-buttons {
    display: flex;
    gap: 6px;
    padding-top: 4px;
}

.bf-obj-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    background: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.15);
    color: var(--bf-primary);
    font-family: var(--bf-font-display);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bf-obj-btn:hover {
    background: rgba(0, 240, 255, 0.15);
    border-color: var(--bf-primary);
    color: #fff;
}

.bf-obj-btn i {
    font-size: 0.8rem;
}

.bf-obj-btn-logout {
    flex: 0;
    padding: 7px 10px;
    background: rgba(255, 51, 51, 0.08);
    border-color: rgba(255, 51, 51, 0.2);
    color: #ff5555;
}

.bf-obj-btn-logout:hover {
    background: rgba(255, 51, 51, 0.2);
    border-color: #ff5555;
    color: #fff;
}

/* Mobile: move objective and minimap, full width */
@media (max-width: 768px) {
    .bf-minimap {
        top: auto;
        bottom: 120px;
        left: 8px;
        right: 8px;
        width: auto;
    }
    .bf-hud-objective {
        position: fixed;
        top: auto;
        bottom: 60px;
        left: 8px;
        right: 8px;
        width: auto;
    }
}

/* HUD notification container */
.bf-hud-notifications {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    max-width: 420px;
    width: max-content;
}


/* ============================================================
   RPG NOTIFICATIONS (floating)
   ============================================================ */

.bf-notification {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    font-weight: 600;
    font-size: 0.9rem;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

.bf-notification-show {
    opacity: 1;
    transform: translateY(0);
}

.bf-notification-exit {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.4s ease;
}

.bf-notification-info {
    background: rgba(0, 240, 255, 0.12);
    border: 1px solid rgba(0, 240, 255, 0.25);
    color: var(--bf-primary);
}

.bf-notification-success {
    background: rgba(0, 255, 136, 0.12);
    border: 1px solid rgba(0, 255, 136, 0.25);
    color: var(--bf-success);
}

.bf-notification-warning {
    background: rgba(255, 170, 0, 0.12);
    border: 1px solid rgba(255, 170, 0, 0.25);
    color: var(--bf-warning);
}

.bf-notification-error {
    background: rgba(255, 51, 51, 0.12);
    border: 1px solid rgba(255, 51, 51, 0.25);
    color: var(--bf-error);
}


/* ============================================================
   RPG DIALOGUE BOX (overlay at bottom of screen)
   ============================================================ */

#bf-overlay .bf-dialogue-box {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    background: rgba(10, 14, 26, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--bf-border);
    border-top: 2px solid var(--bf-primary);
    padding: 16px 20px;
    display: flex;
    gap: 16px;
    z-index: 200;
    cursor: pointer;
    animation: bf-slide-up 0.3s ease;
    box-shadow: 0 -4px 30px rgba(0, 240, 255, 0.08);
}

.bf-dialogue-portrait {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 72px;
}

.bf-dialogue-portrait #bf-portrait-canvas {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    border: 2px solid var(--bf-primary);
    background: rgba(0, 240, 255, 0.05);
}

.bf-dialogue-name {
    font-family: var(--bf-font-display);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--bf-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
}

.bf-dialogue-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 64px;
    position: relative;
}

#bf-overlay .bf-dialogue-text {
    font-family: var(--bf-font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--bf-text);
    min-height: 1.6em;
}

/* Typewriter blinking cursor */
.bf-dialogue-text.bf-typing::after {
    content: '\2588';
    color: var(--bf-primary);
    animation: bf-typewriter-cursor 0.6s step-end infinite;
    margin-left: 2px;
}

.bf-dialogue-advance {
    position: absolute;
    bottom: 0;
    right: 0;
    color: var(--bf-primary);
    font-size: 0.9rem;
    animation: bf-float 1.2s ease-in-out infinite;
}

/* Choices */
.bf-dialogue-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.bf-choice {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    background: rgba(0, 240, 255, 0.04);
    border: 1px solid rgba(0, 240, 255, 0.12);
    color: var(--bf-text);
    font-family: var(--bf-font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bf-choice:hover,
.bf-choice.bf-choice-selected {
    background: rgba(0, 240, 255, 0.12);
    border-color: var(--bf-primary);
    color: var(--bf-primary);
    padding-left: 20px;
}

#bf-overlay .bf-dialogue-box.bf-dialogue-choices-active .bf-dialogue-advance {
    display: none;
}

/* Dialogue hint */
.bf-dialogue-hint {
    position: absolute;
    bottom: 4px;
    left: 0;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    font-family: var(--bf-font-body);
    pointer-events: none;
}


/* ============================================================
   RPG MENU OVERLAY (full-screen)
   ============================================================ */

.bf-menu-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: bf-fade-in 0.2s ease;
}

.bf-menu-overlay.bf-menu-exit {
    animation: bfOverlayFadeOut 0.3s ease forwards;
}

@keyframes bfOverlayFadeOut {
    to { opacity: 0; }
}

.bf-menu-content {
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bf-bg-card);
    border: 1px solid var(--bf-border);
    padding: 24px;
    animation: bf-slide-up 0.3s ease;
}

/* When containing the wide admin panel, expand to fit */
.bf-menu-content:has(.bf-admin-panel--wide) {
    max-width: 98vw;
    width: 98vw;
    max-height: 92vh;
    padding: 0;
    background: transparent;
    border: none;
    overflow: visible;
}

.bf-menu-content::-webkit-scrollbar { width: 4px; }
.bf-menu-content::-webkit-scrollbar-track { background: transparent; }
.bf-menu-content::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.15); }

/* Pause menu */
.bf-pause-menu {
    text-align: center;
}

.bf-pause-title {
    font-family: var(--bf-font-display);
    font-size: 1.5rem;
    color: var(--bf-primary);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bf-pause-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 300px;
    margin: 0 auto 24px;
}

.bf-pause-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: left;
}

.bf-pause-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.bf-pause-stat-label {
    font-size: 1.05rem;
    color: var(--bf-text-dim);
}

.bf-pause-stat-value {
    font-family: var(--bf-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bf-text);
}

/* Settings */
.bf-settings-menu {
    max-width: 400px;
    margin: 0 auto;
}

.bf-settings-menu h2 {
    font-family: var(--bf-font-display);
    font-size: 1.3rem;
    color: var(--bf-primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bf-settings-group {
    margin-bottom: 20px;
}

.bf-settings-label {
    display: block;
    font-size: 0.85rem;
    color: var(--bf-text-dim);
    margin-bottom: 8px;
}

.bf-settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bf-settings-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.bf-settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    background: var(--bf-primary);
    cursor: pointer;
}

.bf-settings-slider::-moz-range-thumb {
    width: 16px; height: 16px;
    background: var(--bf-primary);
    border: none;
    cursor: pointer;
}

.bf-settings-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}


/* ============================================================
   RPG SHOP OVERLAY (inside menu)
   ============================================================ */

.bf-shop-overlay {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bf-shop-overlay .bf-shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bf-shop-overlay .bf-shop-header h2 {
    font-family: var(--bf-font-display);
    font-size: 1.3rem;
    color: var(--bf-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* ── Help hint (? icon + tooltip) ── */
.bf-help-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    color: var(--bf-text-dim, #888);
    font-size: 0.85em;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
}
.bf-help-hint:hover {
    opacity: 1;
    color: var(--bf-primary, #00f0ff);
}
.bf-help-tip-fixed {
    position: fixed;
    z-index: 100000;
    background: linear-gradient(135deg, #141925 0%, #1a2035 100%);
    border: 1px solid rgba(0, 240, 255, 0.25);
    border-radius: 8px;
    padding: 12px 16px;
    max-width: 340px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #c8d6e5;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 240, 255, 0.08);
    pointer-events: none;
}

.bf-shop-overlay .bf-shop-balance {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bf-warning);
    margin: 0 auto;
    padding: 4px 10px;
    background: rgba(255, 170, 0, 0.06);
    border: 1px solid rgba(255, 170, 0, 0.12);
    border-radius: 6px;
}

.bf-shop-overlay .bf-shop-categories {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.bf-shop-overlay .bf-shop-cat {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--bf-text-dim);
    font-family: var(--bf-font-body);
    font-size: 1.0rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bf-shop-overlay .bf-shop-cat:hover {
    border-color: rgba(0, 240, 255, 0.3);
    color: var(--bf-text);
}

.bf-shop-overlay .bf-shop-cat.active {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--bf-primary);
    color: var(--bf-primary);
}

.bf-shop-overlay .bf-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.bf-shop-overlay .bf-shop-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
    position: relative;
}

.bf-shop-overlay .bf-shop-item:hover {
    border-color: rgba(0, 240, 255, 0.2);
    background: rgba(0, 240, 255, 0.03);
}

.bf-shop-overlay .bf-shop-item.bf-shop-owned {
    opacity: 0.7;
}

.bf-shop-overlay .bf-shop-item.bf-shop-expensive {
    opacity: 0.5;
}

.bf-shop-overlay .bf-shop-rarity-badge {
    position: absolute;
    top: 6px; right: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bf-rarity-rare { background: rgba(0, 150, 255, 0.2); color: #4d9fff; border: 1px solid rgba(0, 150, 255, 0.3); }
.bf-rarity-epic { background: rgba(180, 77, 255, 0.2); color: #b44dff; border: 1px solid rgba(180, 77, 255, 0.3); }
.bf-rarity-legendary { background: rgba(255, 170, 0, 0.2); color: #ffaa00; border: 1px solid rgba(255, 170, 0, 0.3); }

.bf-shop-overlay .bf-shop-item-icon {
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--bf-primary);
    margin-bottom: 8px;
}

.bf-shop-overlay .bf-shop-item-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bf-text);
    margin-bottom: 4px;
}

.bf-shop-overlay .bf-shop-item-desc {
    font-size: 0.9rem;
    color: var(--bf-text-dim);
    margin-bottom: 10px;
    line-height: 1.3;
}

.bf-shop-overlay .bf-shop-item-footer {
    margin-top: auto;
}

.bf-shop-overlay .bf-shop-owned-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    color: var(--bf-success);
    font-weight: 600;
}

.bf-shop-overlay .bf-shop-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--bf-text-dim);
}

.bf-shop-overlay .bf-shop-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
}

.bf-shop-balance-flash {
    animation: bf-shake 0.4s ease;
}


/* ============================================================
   RPG FRIENDS OVERLAY (inside menu)
   ============================================================ */

.bf-friends-overlay {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bf-friends-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bf-friends-header-bar h2 {
    font-family: var(--bf-font-display);
    font-size: 1.3rem;
    color: var(--bf-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bf-social-tabs {
    display: flex;
    gap: 6px;
}

.bf-social-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--bf-text-dim);
    font-family: var(--bf-font-body);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bf-social-tab:hover {
    border-color: rgba(0, 240, 255, 0.3);
    color: var(--bf-text);
}

.bf-social-tab.active {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--bf-primary);
    color: var(--bf-primary);
}

.bf-social-count {
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 6px;
}

.bf-social-badge {
    font-size: 0.8rem;
    background: var(--bf-error);
    color: white;
    padding: 1px 5px;
    font-weight: 700;
}

.bf-social-content {
    min-height: 150px;
}

.bf-social-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--bf-text-dim);
}

.bf-social-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 12px;
    opacity: 0.5;
}

.bf-social-empty p {
    margin-bottom: 4px;
}

.bf-friends-list,
.bf-requests-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bf-friend-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
}

.bf-friend-card:hover {
    border-color: rgba(0, 240, 255, 0.15);
    background: rgba(0, 240, 255, 0.02);
}

.bf-friend-card.bf-friend-online {
    border-left: 2px solid var(--bf-success);
}

.bf-friend-info {
    flex: 1;
    min-width: 0;
}

.bf-friend-pseudo {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--bf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bf-friend-tag {
    font-size: 0.9rem;
    color: var(--bf-text-dim);
}

.bf-tag-hash {
    color: var(--bf-primary);
}

.bf-friend-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.bf-friend-level {
    font-size: 0.9rem;
    color: var(--bf-text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
}

.bf-friend-status {
    font-size: 0.85rem;
    color: var(--bf-text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
}

.bf-friend-status.online {
    color: var(--bf-success);
}

.bf-friend-status-dot {
    width: 6px; height: 6px;
    background: var(--bf-text-dim);
    border-radius: 50%;
    display: inline-block;
}

.bf-friend-status.online .bf-friend-status-dot {
    background: var(--bf-success);
    box-shadow: 0 0 6px var(--bf-success);
    animation: bf-pulse 2s ease-in-out infinite;
}

.bf-friend-actions,
.bf-request-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.bf-request-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.bf-request-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Search section */
.bf-search-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bf-search-form {
    display: flex;
    gap: 8px;
}

.bf-search-form .bf-input {
    flex: 1;
}

.bf-search-found {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(0, 240, 255, 0.03);
    border: 1px solid rgba(0, 240, 255, 0.12);
}

.bf-search-hint {
    font-size: 0.9rem;
    color: var(--bf-text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}

.bf-text-error { color: var(--bf-error); font-size: 0.85rem; }
.bf-text-success { color: var(--bf-success); font-size: 0.85rem; }
.bf-text-muted { color: var(--bf-text-dim); font-size: 0.85rem; }

.bf-loading-spinner {
    text-align: center;
    color: var(--bf-text-dim);
    padding: 30px;
    font-size: 0.9rem;
}

.bf-spin {
    animation: bfSpin 1s linear infinite;
}

@keyframes bfSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* ============================================================
   RPG LEADERBOARD OVERLAY (inside menu)
   ============================================================ */

.bf-leaderboard-overlay {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bf-leaderboard-overlay .bf-lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bf-leaderboard-overlay .bf-lb-header h2 {
    font-family: var(--bf-font-display);
    font-size: 1.3rem;
    color: var(--bf-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bf-leaderboard-overlay .bf-lb-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.bf-leaderboard-overlay .bf-lb-tab {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--bf-text-dim);
    font-family: var(--bf-font-body);
    font-size: 1.0rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bf-leaderboard-overlay .bf-lb-tab:hover {
    border-color: rgba(0, 240, 255, 0.3);
}

.bf-leaderboard-overlay .bf-lb-tab.active {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--bf-primary);
    color: var(--bf-primary);
}

.bf-lb-mode-tabs {
    display: flex;
    gap: 4px;
}

.bf-lb-mode {
    flex: 1;
    padding: 6px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--bf-text-dim);
    font-family: var(--bf-font-body);
    font-size: 1.0rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bf-lb-mode.active {
    background: rgba(0, 240, 255, 0.08);
    border-color: var(--bf-primary);
    color: var(--bf-primary);
}

.bf-leaderboard-overlay .bf-lb-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bf-leaderboard-overlay .bf-lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
}

.bf-leaderboard-overlay .bf-lb-row:hover {
    background: rgba(0, 240, 255, 0.03);
}

.bf-leaderboard-overlay .bf-lb-row.bf-lb-row-me {
    border-color: var(--bf-primary);
    background: rgba(0, 240, 255, 0.06);
}

.bf-leaderboard-overlay .bf-lb-rank {
    font-family: var(--bf-font-display);
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--bf-text-dim);
    min-width: 30px;
    text-align: center;
}

.bf-leaderboard-overlay .bf-lb-medal {
    font-size: 1rem;
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bf-leaderboard-overlay .bf-lb-medal-1 { color: #ffd700; }
.bf-leaderboard-overlay .bf-lb-medal-2 { color: #c0c0c0; }
.bf-leaderboard-overlay .bf-lb-medal-3 { color: #cd7f32; }

.bf-leaderboard-overlay .bf-lb-player {
    flex: 1;
}

.bf-leaderboard-overlay .bf-lb-player strong {
    display: block;
    font-size: 1.05rem;
    color: var(--bf-text);
}

.bf-leaderboard-overlay .bf-lb-player span {
    font-size: 0.85rem;
    color: var(--bf-text-dim);
}

.bf-leaderboard-overlay .bf-lb-score {
    font-family: var(--bf-font-display);
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--bf-primary);
}


/* ============================================================
   RPG QUEST LOG (inside menu)
   ============================================================ */

.bf-quest-log {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bf-quest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bf-quest-header h2 {
    font-family: var(--bf-font-display);
    font-size: 1.3rem;
    color: var(--bf-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bf-quest-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bf-quest-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
}

.bf-quest-item:hover:not(.bf-quest-locked) {
    border-color: rgba(0, 240, 255, 0.15);
    background: rgba(0, 240, 255, 0.02);
}

.bf-quest-item.bf-quest-locked {
    opacity: 0.35;
}

.bf-quest-item.bf-quest-completed {
    border-left: 2px solid var(--bf-success);
}

.bf-quest-item.bf-quest-available {
    border-left: 2px solid var(--bf-primary);
}

.bf-quest-num {
    font-family: var(--bf-font-display);
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--bf-primary);
    min-width: 32px;
    text-align: center;
}

.bf-quest-info {
    flex: 1;
    min-width: 0;
}

.bf-quest-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--bf-text);
}

.bf-quest-concept {
    font-size: 1.0rem;
    color: var(--bf-text-dim);
}

.bf-quest-score {
    font-size: 0.9rem;
    color: var(--bf-text-dim);
    margin-top: 2px;
}

.bf-quest-status {
    flex-shrink: 0;
}

.bf-quest-stars {
    display: flex;
    gap: 2px;
}

.bf-quest-stars i {
    color: var(--bf-warning);
    font-size: 1.0rem;
}

.bf-quest-lock {
    font-size: 0.9rem;
    color: var(--bf-text-dim);
    display: flex;
    align-items: center;
    gap: 4px;
}


/* ============================================================
   RPG PROFILE SELECT (overlay)
   ============================================================ */

#bf-profile-select-overlay {
    position: fixed;
    top: 42px; left: 0;
    width: 100%; height: calc(100% - 42px);
    background: #0a0e1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 500;
    padding: 30px 20px;
    overflow-y: auto;
}

#bf-profile-select-overlay .bf-profile-logo {
    font-family: var(--bf-font-display);
    font-size: 3rem;
    font-weight: 900;
    color: var(--bf-text);
    letter-spacing: 3px;
    margin-bottom: 12px;
}

#bf-profile-select-overlay .bf-profile-logo span {
    color: var(--bf-primary);
    text-shadow: 0 0 30px var(--bf-primary);
}

#bf-profile-select-overlay .bf-profile-select-header {
    text-align: center;
    margin-bottom: 40px;
}

#bf-profile-select-overlay .bf-profile-select-header h2 {
    font-family: var(--bf-font-display);
    font-size: 2rem;
    color: var(--bf-text);
    margin-top: 10px;
}

#bf-profile-select-overlay .bf-profile-select-header p {
    color: var(--bf-text-dim);
    margin-top: 6px;
    font-size: 1.05rem;
}

#bf-profile-select-overlay .bf-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 1200px;
    width: 100%;
}

#bf-profile-select-overlay .bf-profile-card {
    display: flex;
    flex-direction: column;
}

#bf-profile-select-overlay .bf-profile-card-icon {
    font-size: 3.5rem;
}

#bf-profile-select-overlay .bf-profile-card-name {
    font-size: 1.3rem;
}

#bf-profile-select-overlay .bf-profile-card-desc {
    font-size: 1rem;
    flex: 1;
}

#bf-profile-select-overlay .bf-profile-card-mentor small {
    font-size: 0.9rem;
}

#bf-profile-select-overlay .bf-profile-card-bonuses {
    margin: 0.6rem 0;
    padding: 0.6rem;
}

#bf-profile-select-overlay .bf-profile-bonus {
    font-size: 0.85rem;
}

#bf-profile-select-overlay .bf-profile-bonus-desc {
    font-size: 0.75rem;
}

#bf-profile-select-overlay .bf-profile-card-tag {
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
}


/* ============================================================
   RPG MINI-GAME OVERLAY
   ============================================================ */

.bf-minigame-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 14, 26, 0.95);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    animation: bf-fade-in 0.3s ease;
}

.bf-minigame-overlay.bf-minigame-exit {
    animation: bfOverlayFadeOut 0.3s ease forwards;
}

.bf-minigame-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid var(--bf-border);
    flex-shrink: 0;
}

.bf-minigame-title {
    font-family: var(--bf-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--bf-primary);
    letter-spacing: 1px;
}

.bf-minigame-close {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bf-minigame-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.bf-minigame-content > * {
    max-width: 900px;
    width: 100%;
}


/* ============================================================
   ADMIN: Mini-game split layout (dialogue + minigame)
   ============================================================ */

.bf-admin-mg-split {
    flex-direction: row !important;
}

.bf-admin-mg-dialogue {
    width: 340px;
    min-width: 300px;
    max-width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: rgba(0, 20, 40, 0.6);
    border-right: 1px solid var(--bf-border);
    overflow: hidden;
}

.bf-admin-mg-dialogue-header {
    padding: 12px 16px;
    font-family: var(--bf-font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bf-primary);
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--bf-border);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bf-admin-mg-dialogue-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--bf-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.bf-admin-mg-dialogue-tab {
    padding: 4px 12px;
    font-size: 0.75rem;
    font-family: var(--bf-font-display);
    font-weight: 600;
    color: var(--bf-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.bf-admin-mg-dialogue-tab:hover {
    color: var(--bf-text);
    background: rgba(255, 255, 255, 0.1);
}

.bf-admin-mg-dialogue-tab.active {
    color: var(--bf-primary);
    border-color: var(--bf-primary);
    background: rgba(0, 240, 255, 0.08);
}

.bf-admin-mg-dialogue-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.bf-admin-mg-dialogue-body {
    display: none;
}

.bf-admin-mg-dialogue-body.active {
    display: block;
}

.bf-admin-mg-dialogue-chapter {
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.15);
    border-radius: 6px;
    font-size: 1.05rem;
    color: var(--bf-text);
}

.bf-admin-mg-dialogue-npc {
    display: block;
    margin-top: 4px;
    font-size: 0.9rem;
    color: var(--bf-muted);
    font-style: italic;
}

.bf-admin-mg-dialogue-line {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--bf-primary);
    border-radius: 0 4px 4px 0;
}

.bf-admin-mg-dialogue-speaker {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bf-primary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bf-admin-mg-dialogue-line p {
    margin: 0;
    font-size: 1.05rem;
    color: var(--bf-text);
    line-height: 1.6;
}

.bf-admin-mg-dialogue-empty {
    font-size: 1rem;
    color: var(--bf-muted);
    font-style: italic;
    text-align: center;
    padding: 20px;
}

.bf-admin-mg-split .bf-minigame-content {
    flex: 1;
    min-width: 0;
}

.bf-admin-mg-split .bf-minigame-content > * {
    max-width: 100%;
}

.bf-admin-mg-close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 50, 50, 0.15);
    border: 1px solid rgba(255, 50, 50, 0.4);
    border-radius: 8px;
    color: #ff5555;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.bf-admin-mg-close:hover {
    background: rgba(255, 50, 50, 0.3);
    border-color: #ff5555;
    color: #fff;
}


/* ============================================================
   RPG LEVEL UP OVERLAY (dramatic)
   ============================================================ */

#bf-overlay .bf-levelup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 700;
    animation: bf-fade-in 0.3s ease;
    cursor: pointer;
}

#bf-overlay .bf-levelup-overlay.bf-levelup-exit {
    animation: bfOverlayFadeOut 0.5s ease forwards;
}

#bf-overlay .bf-levelup-content {
    text-align: center;
    position: relative;
}

.bf-levelup-burst {
    position: absolute;
    top: 50%; left: 50%;
    width: 300px; height: 300px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 240, 255, 0.15) 0%, transparent 70%);
    animation: bf-glow 2s ease-in-out infinite;
    pointer-events: none;
}

#bf-overlay .bf-levelup-icon {
    font-size: 5rem;
    color: var(--bf-primary);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    animation: levelUpBounce 0.6s ease;
    text-shadow: 0 0 40px var(--bf-primary);
}

.bf-levelup-title {
    font-family: var(--bf-font-display);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--bf-primary);
    text-shadow: 0 0 40px var(--bf-primary), 0 0 80px var(--bf-primary);
    letter-spacing: 5px;
    position: relative;
    z-index: 1;
}

.bf-levelup-sub {
    color: var(--bf-text-dim);
    font-size: 1.1rem;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

.bf-levelup-bonus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 6px 16px;
    background: rgba(255, 170, 0, 0.1);
    border: 1px solid rgba(255, 170, 0, 0.3);
    color: var(--bf-warning);
    font-weight: 700;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}


/* ============================================================
   RPG CHAPTER RESULT OVERLAY
   ============================================================ */

.bf-result-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 600;
    animation: bf-fade-in 0.3s ease;
}

.bf-result-overlay.bf-result-exit {
    animation: bfOverlayFadeOut 0.4s ease forwards;
}

.bf-result-overlay .bf-result-card {
    background: var(--bf-bg-card);
    border: 1px solid var(--bf-border);
    padding: 32px;
    text-align: center;
    max-width: 450px;
    width: 90%;
    animation: bf-slide-up 0.4s ease;
}

.bf-result-chapter {
    font-family: var(--bf-font-display);
    font-size: 0.85rem;
    color: var(--bf-text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.bf-result-grade {
    font-family: var(--bf-font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--bf-primary);
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
    margin-bottom: 16px;
}

.bf-result-overlay .bf-result-stars {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.bf-result-overlay .bf-result-star {
    font-size: 2.5rem;
}

.bf-result-overlay .bf-star-earned {
    color: var(--bf-warning);
    animation: bf-star-pop 0.5s ease both;
    text-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
}

.bf-result-overlay .bf-star-empty {
    color: rgba(255, 255, 255, 0.1);
}

.bf-result-overlay .bf-result-score {
    font-size: 1.1rem;
    color: var(--bf-text-dim);
    margin-bottom: 16px;
}

.bf-result-overlay .bf-result-score strong {
    color: var(--bf-text);
    font-size: 1.3rem;
}

.bf-result-overlay .bf-result-rewards {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 20px;
}

.bf-result-overlay .bf-result-reward {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    font-weight: 700;
}

.bf-result-overlay .bf-result-reward:first-child { color: var(--bf-primary); }
.bf-result-overlay .bf-result-reward:last-child { color: var(--bf-warning); }


/* ============================================================
   RPG DAILY BONUS OVERLAY
   ============================================================ */

#bf-overlay .bf-daily-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 700;
    animation: bf-fade-in 0.3s ease;
}

#bf-overlay .bf-daily-overlay.bf-daily-exit {
    animation: bfOverlayFadeOut 0.4s ease forwards;
}

#bf-overlay .bf-daily-card {
    background: var(--bf-bg-card);
    border: 1px solid var(--bf-border);
    padding: 28px;
    text-align: center;
    max-width: 380px;
    width: 90%;
}

#bf-overlay .bf-daily-card h3 {
    font-family: var(--bf-font-display);
    font-size: 1.2rem;
    color: var(--bf-warning);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bf-daily-streak {
    font-size: 0.85rem;
    color: var(--bf-text-dim);
    margin-bottom: 16px;
}

#bf-overlay .bf-daily-days {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

#bf-overlay .bf-daily-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-width: 40px;
}

#bf-overlay .bf-daily-day.bf-daily-earned {
    background: rgba(255, 170, 0, 0.1);
    border-color: rgba(255, 170, 0, 0.3);
}

#bf-overlay .bf-daily-day.bf-daily-today {
    border-color: var(--bf-warning);
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.3);
}

#bf-overlay .bf-daily-day-num {
    font-family: var(--bf-font-display);
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--bf-text-dim);
}

#bf-overlay .bf-daily-day-reward {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--bf-warning);
}

#bf-overlay .bf-daily-day i {
    font-size: 0.65rem;
}

#bf-overlay .bf-daily-earned i { color: var(--bf-warning); }

#bf-overlay .bf-daily-reward {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bf-warning);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}


/* ============================================================
   RPG ANIMATIONS
   ============================================================ */

@keyframes bf-typewriter-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes bf-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes bf-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bf-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bf-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bf-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

@keyframes bf-glow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}

@keyframes bf-star-pop {
    0% { transform: scale(0) rotate(-30deg); opacity: 0; }
    60% { transform: scale(1.4) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes bf-xp-fill {
    from { width: 0%; }
}

@keyframes bf-flip {
    0% { transform: perspective(600px) rotateY(0); }
    50% { transform: perspective(600px) rotateY(90deg); }
    100% { transform: perspective(600px) rotateY(0); }
}

@keyframes bf-heat-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}


/* ============================================================
   MINI-GAME: Drag & Drop (.bf-mg-drag)
   ============================================================ */

.bf-mg-drag {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.bf-mg-drag-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.bf-mg-drag-item {
    padding: 12px 20px;
    background: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.15);
    color: var(--bf-text);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: grab;
    user-select: none;
    transition: all 0.2s ease;
}

.bf-mg-drag-item:active { cursor: grabbing; }

.bf-mg-drag-item.dragging {
    opacity: 0.4;
    border-style: dashed;
}

.bf-mg-drag-item.placed {
    opacity: 0.3;
    cursor: default;
}

.bf-mg-drag-zones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.bf-mg-drag-zone {
    min-height: 70px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(0, 240, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--bf-text-dim);
    transition: all 0.2s ease;
}

.bf-mg-drag-zone.drag-over {
    border-color: var(--bf-primary);
    background: rgba(0, 240, 255, 0.08);
}

.bf-mg-drag-zone.filled {
    border-style: solid;
    border-color: var(--bf-primary);
    background: rgba(0, 240, 255, 0.05);
    color: var(--bf-text);
}

.bf-mg-drag-zone.correct {
    border-color: var(--bf-success);
    background: rgba(0, 255, 136, 0.08);
    color: var(--bf-success);
}

.bf-mg-drag-zone.wrong {
    border-color: var(--bf-error);
    background: rgba(255, 51, 51, 0.08);
    color: var(--bf-error);
    animation: bf-shake 0.4s ease;
}


/* ============================================================
   MINI-GAME: PC Schematic (identify mode)
   ============================================================ */

.bf-mg-pc-schematic {
    box-shadow: inset 0 0 60px rgba(0, 240, 255, 0.03), 0 0 20px rgba(0, 240, 255, 0.05);
}

/* ── RAM Place mini-game ── */

.bf-mg-ram-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(0, 240, 255, 0.2);
    background: rgba(0, 240, 255, 0.02);
    transition: all 0.2s ease;
    z-index: 2;
    cursor: default;
}
.bf-mg-ram-slot-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(0, 240, 255, 0.8);
    pointer-events: none;
}
.bf-mg-ram-slot.drag-over {
    border-color: var(--bf-primary);
    background: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.3);
}
.bf-mg-ram-slot.filled {
    border-style: solid;
    border-color: var(--bf-primary);
    background: rgba(0, 240, 255, 0.05);
    padding: 0;
}
.bf-mg-ram-slot.correct {
    border-color: var(--bf-success);
    background: rgba(0, 255, 136, 0.06);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}
.bf-mg-ram-slot.wrong {
    border-color: var(--bf-error);
    background: rgba(255, 51, 51, 0.08);
    animation: bf-shake 0.4s ease;
}
.bf-mg-ram-placed-svg {
    width: 100%;
    height: 100%;
}

.bf-mg-ram-items {
    justify-content: center;
    gap: 20px;
}
.bf-mg-ram-stick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(0, 200, 100, 0.04);
    border: 2px solid rgba(0, 240, 255, 0.2);
    border-radius: 8px;
    cursor: grab;
    transition: all 0.2s ease;
    user-select: none;
}
.bf-mg-ram-stick:hover {
    border-color: rgba(0, 240, 255, 0.5);
    background: rgba(0, 200, 100, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 240, 255, 0.15);
}
.bf-mg-ram-stick.dragging {
    opacity: 0.3;
    border-style: dashed;
}
.bf-mg-ram-stick.placed {
    opacity: 0.2;
    pointer-events: none;
    cursor: default;
    border-color: rgba(0, 255, 136, 0.2);
}
.bf-mg-ram-stick-svg {
    width: 38px;
    height: 100px;
}
.bf-mg-ram-stick-brand {
    font-family: 'Orbitron', monospace;
    font-size: 0.6rem;
    color: rgba(0, 240, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}
.bf-mg-ram-stick-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    color: var(--bf-text);
    text-align: center;
    white-space: nowrap;
    font-weight: 600;
}
.bf-mg-ram-stick-cap {
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}
.bf-mg-ram-hint {
    text-align: center;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 10px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 6px;
}

/* Header fixe en haut du mini-jeu (titre + compteur) */
.bf-mg-counter-header {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 12px;
    flex-shrink: 0;
}

/* Titre de quête */
.bf-mg-quest-title {
    text-align: center;
    font-family: var(--bf-font-display, monospace);
    font-size: 0.85rem;
    color: var(--bf-text-dim);
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Compteur placés / erreurs / récompenses */
.bf-mg-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 10px;
    font-family: var(--bf-font-display, monospace);
    font-size: 0.95rem;
}

.bf-mg-counter > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bf-mg-counter-ok {
    color: var(--bf-success);
}

.bf-mg-counter-err {
    color: var(--bf-error);
}

.bf-mg-counter-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.1);
}

.bf-mg-counter-reward {
    color: var(--bf-warning, #ffaa00);
}

.bf-mg-stars-3 { color: #ffcc00; }
.bf-mg-stars-2 { color: #ccaa00; }
.bf-mg-stars-1 { color: #886600; }

.bf-mg-counter-xp {
    color: var(--bf-primary, #00f0ff);
}

.bf-mg-counter-bytes {
    color: var(--bf-warning, #ffaa00);
}

.bf-mg-reward-shake {
    animation: bf-reward-shake 0.5s ease;
}

@keyframes bf-reward-shake {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-4px) scale(1.1); color: var(--bf-error); }
    30%  { transform: translateX(4px) scale(1.1); }
    45%  { transform: translateX(-3px); }
    60%  { transform: translateX(3px); }
    75%  { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

/* Drop points — small circles with "+" */
.bf-mg-drop-point {
    position: absolute;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
    border-radius: 50%;
    border: 2px solid rgba(0, 240, 255, 0.35);
    background: rgba(0, 10, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.25s ease;
    cursor: default;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.1);
    overflow: visible;
}

.bf-mg-drop-plus {
    color: rgba(0, 240, 255, 0.6);
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1;
    font-family: var(--bf-font-display, monospace);
}

.bf-mg-drop-point.drag-over {
    border-color: rgba(0, 240, 255, 0.8);
    background: rgba(0, 240, 255, 0.15);
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
    transform: scale(1.3);
}

.bf-mg-drop-point.correct {
    border-color: var(--bf-success);
    background: rgba(0, 255, 136, 0.15);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.2);
}

.bf-mg-drop-check {
    color: var(--bf-success);
    font-size: 1rem;
    line-height: 1;
}

.bf-mg-drop-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--bf-success);
    font-family: var(--bf-font-display, monospace);
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
    pointer-events: none;
}

.bf-mg-drop-point.wrong {
    border-color: var(--bf-error);
    background: rgba(255, 51, 51, 0.15);
    box-shadow: 0 0 12px rgba(255, 51, 51, 0.2);
    animation: bf-shake 0.4s ease;
}

.bf-mg-drop-point.filled {
    cursor: default;
}

/* Error bubble */
.bf-mg-error-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 8px 14px;
    background: rgba(255, 51, 51, 0.92);
    color: #fff;
    font-size: 0.95rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    animation: bf-bubble-pop 2.5s ease forwards;
}

.bf-mg-error-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border: 4px solid transparent;
    border-top-color: rgba(255, 51, 51, 0.9);
}

@keyframes bf-bubble-pop {
    0%   { opacity: 0; transform: translateX(-50%) translateY(5px); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* Success bubble */
.bf-mg-success-bubble {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 6px 12px;
    background: rgba(0, 200, 100, 0.92);
    color: #fff;
    font-size: 0.9rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    animation: bf-bubble-pop 1.8s ease forwards;
}
.bf-mg-success-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border: 4px solid transparent;
    border-top-color: rgba(0, 200, 100, 0.92);
}

/* Visual component cards */
.bf-mg-drag-items--visual {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.bf-mg-drag-item--visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(0, 240, 255, 0.04);
    border: 1px solid rgba(0, 240, 255, 0.15);
    border-radius: 8px;
    cursor: grab;
    transition: all 0.2s ease;
    width: 90px;
}

.bf-mg-drag-item--visual:hover {
    border-color: rgba(0, 240, 255, 0.4);
    background: rgba(0, 240, 255, 0.08);
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.1);
    transform: translateY(-2px);
}

.bf-mg-drag-item--visual:active {
    cursor: grabbing;
}

.bf-mg-drag-item--visual.dragging {
    opacity: 0.3;
    border-style: dashed;
}

.bf-mg-drag-item--visual.placed {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

.bf-mg-comp-icon {
    width: 56px;
    height: 56px;
}

.bf-mg-comp-icon svg {
    width: 100%;
    height: 100%;
}

.bf-mg-comp-name {
    font-size: 0.75rem;
    color: var(--bf-text);
    text-align: center;
    line-height: 1.2;
    font-family: var(--bf-font-display, monospace);
}

/* ============================================================
   MINI-GAME: Compare CPU Quiz (.bf-mg-compare)
   ============================================================ */

.bf-mg-compare-wrap {
    max-width: 800px;
    margin: 0 auto;
}

.bf-mg-compare-cards {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.bf-mg-compare-card {
    flex: 1;
    min-width: 150px;
    max-width: 240px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(0,240,255,0.12);
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bf-mg-compare-card:hover {
    border-color: var(--bf-primary);
    background: rgba(0,240,255,0.06);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,240,255,0.15);
}

.bf-mg-compare-card-correct {
    border-color: var(--bf-success) !important;
    background: rgba(0,255,136,0.12) !important;
    box-shadow: 0 0 20px rgba(0,255,136,0.25) !important;
}

.bf-mg-compare-card-wrong {
    border-color: var(--bf-error) !important;
    background: rgba(255,51,51,0.1) !important;
    box-shadow: 0 0 16px rgba(255,51,51,0.2) !important;
    animation: bf-reward-shake 0.4s ease;
}

.bf-mg-compare-card-name {
    font-family: var(--bf-font-display, monospace);
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,240,255,0.1);
}

.bf-mg-compare-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.95rem;
}

.bf-mg-compare-stat-label {
    color: var(--bf-text-dim);
    font-size: 0.9rem;
}

.bf-mg-compare-stat-value {
    color: var(--bf-primary);
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--bf-font-display, monospace);
}

.bf-mg-compare-price {
    font-family: var(--bf-font-display, monospace);
    font-size: 1rem;
    color: var(--bf-warning);
    font-weight: 700;
    margin-top: 10px;
    text-align: right;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.bf-mg-compare-question-area {
    background: rgba(0,240,255,0.03);
    border: 1px solid rgba(0,240,255,0.12);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    margin-bottom: 16px;
}

.bf-mg-compare-question-text {
    font-size: 1.05rem;
    color: var(--bf-text);
    margin-bottom: 0;
    font-family: var(--bf-font-display, monospace);
    line-height: 1.5;
}

.bf-mg-compare-qnum {
    display: inline-block;
    background: rgba(0,240,255,0.12);
    color: var(--bf-primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-right: 6px;
    font-weight: 700;
}

.bf-mg-compare-feedback {
    display: none;
    color: var(--bf-error);
    font-size: 0.88rem;
    margin-bottom: 12px;
    padding: 8px 14px;
    background: rgba(255,51,51,0.08);
    border: 1px solid rgba(255,51,51,0.2);
    border-radius: 6px;
    animation: bf-bubble-pop 0.3s ease;
}

.bf-mg-compare-feedback-show {
    display: block;
}

.bf-mg-compare-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    padding: 10px 14px;
    background: rgba(20, 20, 40, 0.97);
    border: 1px solid rgba(255, 100, 100, 0.5);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
    z-index: 20;
    pointer-events: none;
    animation: bf-tip-appear 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.bf-mg-compare-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: rgba(255, 100, 100, 0.5);
}

@keyframes bf-tip-appear {
    0%   { opacity: 0; transform: translateX(-50%) translateY(6px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.bf-mg-compare-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: center;
    align-items: center;
    padding: 8px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
}
.bf-mg-compare-hint > i { color: #fc0; margin-right: 2px; }
.bf-mg-compare-hint > strong { color: rgba(255,255,255,0.7); margin-right: 4px; }
.bf-mg-compare-hint-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bf-mg-compare-hint-item i {
    font-size: 0.8rem;
    color: rgba(0,240,255,0.6);
}

/* ============================================================
   MINI-GAME: Connect Lines (.bf-mg-connect)
   ============================================================ */

.bf-mg-connect {
    display: flex;
    gap: 20px;
    width: 100%;
    position: relative;
}

.bf-mg-connect-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bf-mg-connect-item {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--bf-text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.bf-mg-connect-item:hover {
    border-color: var(--bf-primary);
    background: rgba(0, 240, 255, 0.06);
}

.bf-mg-connect-item.selected {
    border-color: var(--bf-primary);
    background: rgba(0, 240, 255, 0.1);
    color: var(--bf-primary);
}

.bf-mg-connect-item.matched {
    border-color: var(--bf-success);
    background: rgba(0, 255, 136, 0.08);
    color: var(--bf-success);
    pointer-events: none;
}

.bf-mg-connect-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}


/* ============================================================
   MINI-GAME: Cards/Compare (.bf-mg-cards)
   ============================================================ */

.bf-mg-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    width: 100%;
}

.bf-mg-card {
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
    cursor: pointer;
}

.bf-mg-card:hover {
    border-color: rgba(0, 240, 255, 0.2);
}

.bf-mg-card.selected {
    border-color: var(--bf-primary);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
}

.bf-mg-card-title {
    font-family: var(--bf-font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bf-primary);
    margin-bottom: 10px;
}

.bf-mg-card-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.8rem;
    color: var(--bf-text-dim);
}

.bf-mg-card-stat-bar {
    width: 60%;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.bf-mg-card-stat-fill {
    height: 100%;
    background: var(--bf-primary);
    transition: width 0.6s ease;
}


/* ============================================================
   MINI-GAME: Memory Match (.bf-mg-memory)
   ============================================================ */

.bf-mg-memory {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
}

.bf-mg-memory-card {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
    font-size: 1.5rem;
    color: var(--bf-primary);
    position: relative;
}

.bf-mg-memory-card.flipped {
    animation: bf-flip 0.5s ease;
    background: rgba(0, 240, 255, 0.08);
    border-color: var(--bf-primary);
}

.bf-mg-memory-card.matched {
    background: rgba(0, 255, 136, 0.08);
    border-color: var(--bf-success);
    color: var(--bf-success);
    pointer-events: none;
}

.bf-mg-memory-card.face-down {
    color: transparent;
}

.bf-mg-memory-card.face-down::after {
    content: '?';
    color: var(--bf-text-dim);
    font-family: var(--bf-font-display);
    font-size: 1.2rem;
}


/* ============================================================
   MINI-GAME: BIOS Interface (.bf-mg-bios) — AMI/UEFI style
   ============================================================ */

.bf-mg-bios {
    background: #0c0c2e;
    color: #c0c0d8;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    padding: 0;
    width: 100%;
    min-height: 340px;
    border: 2px solid #3030a0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0,0,128,0.3), inset 0 0 60px rgba(0,0,40,0.5);
}

/* Top bar: logo + version */
.bf-mg-bios-topbar {
    background: linear-gradient(180deg, #1a1a5e, #0e0e3a);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 2px solid #4040c0;
}
.bf-mg-bios-logo {
    color: #6060ff;
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(96,96,255,0.4);
}
.bf-mg-bios-ver {
    color: #808090;
    font-size: 0.75rem;
}

/* System info line */
.bf-mg-bios-sysinfo {
    background: rgba(0,0,0,0.3);
    color: #7070a0;
    font-size: 0.7rem;
    padding: 4px 16px;
    border-bottom: 1px solid #252560;
}

/* Tab row */
.bf-mg-bios-tabs {
    display: flex;
    gap: 0;
    background: #151548;
    border-bottom: 2px solid #4040c0;
}
.bf-mg-bios-tab {
    padding: 6px 18px;
    cursor: pointer;
    color: #7070a0;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 1px;
    border-right: 1px solid #252560;
    transition: background 0.15s, color 0.15s;
    user-select: none;
}
.bf-mg-bios-tab:hover {
    background: #1a1a60;
    color: #a0a0d0;
}
.bf-mg-bios-tab--active {
    background: #2020a0;
    color: #ffffff;
    box-shadow: inset 0 -3px 0 #6060ff;
}

/* Content area */
.bf-mg-bios-content {
    padding: 12px 16px;
    min-height: 200px;
}
.bf-mg-bios-section-title {
    color: #6060ff;
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Rows */
.bf-mg-bios-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.12s;
    border-radius: 2px;
    margin: 2px 0;
}
.bf-mg-bios-row:hover {
    background: rgba(48,48,160,0.35);
}
.bf-mg-bios-row--flash {
    background: rgba(96,96,255,0.3) !important;
}
.bf-mg-bios-key {
    color: #d0d0e8;
}
.bf-mg-bios-value {
    color: #ffdd44;
    font-weight: bold;
}

/* Help line at bottom of content */
.bf-mg-bios-help {
    margin-top: 16px;
    padding-top: 6px;
    border-top: 1px solid #252560;
    font-size: 0.7rem;
    color: #505080;
    text-align: center;
}

/* ── Objectives panel (below BIOS) ── */
.bf-mg-bios-objectives {
    margin-top: 14px;
    background: rgba(10,14,26,0.9);
    border: 1px solid rgba(0,240,255,0.15);
    border-radius: 8px;
    padding: 12px 16px;
}
.bf-mg-bios-obj-title {
    color: #00f0ff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.bf-mg-bios-obj-item {
    padding: 6px 8px;
    margin: 4px 0;
    background: rgba(20,25,45,0.8);
    border-left: 3px solid #555;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #c0c0d0;
    transition: border-color 0.3s, background 0.3s;
}
.bf-mg-bios-obj-item--done {
    border-left-color: #00ff88;
    background: rgba(0,255,136,0.06);
}
.bf-mg-bios-obj-item--done .bf-mg-bios-obj-check {
    color: #00ff88;
}
.bf-mg-bios-obj-val {
    color: #ffdd44;
    font-weight: bold;
}
.bf-mg-bios-obj-desc {
    color: #7080a0;
    font-size: 0.78rem;
    font-style: italic;
}

/* Save button */
.bf-mg-bios-save {
    margin-top: 10px;
    text-align: center;
    cursor: pointer;
    color: #ffdd44;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    padding: 8px 20px;
    background: linear-gradient(180deg, #1a1a5e, #0e0e3a);
    border: 2px solid #4040c0;
    border-radius: 4px;
    transition: background 0.15s, box-shadow 0.15s;
    letter-spacing: 1px;
}
.bf-mg-bios-save:hover {
    background: linear-gradient(180deg, #2020a0, #151560);
    box-shadow: 0 0 12px rgba(96,96,255,0.4);
}


/* ============================================================
   MINI-GAME: Sliders (.bf-mg-slider)
   ============================================================ */

.bf-mg-slider {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.bf-mg-slider-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bf-mg-slider-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--bf-text);
}

.bf-mg-slider-label span:last-child {
    font-family: var(--bf-font-display);
    font-weight: 700;
    color: var(--bf-primary);
}

.bf-mg-slider-track {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.bf-mg-slider-track input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: transparent;
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
}

.bf-mg-slider-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    background: var(--bf-primary);
    cursor: pointer;
    margin-top: -5px;
}

.bf-mg-slider-track input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    background: var(--bf-primary);
    border: none;
    cursor: pointer;
}

.bf-mg-slider-zone-bad { background: rgba(255, 51, 51, 0.15); }
.bf-mg-slider-zone-ok { background: rgba(255, 170, 0, 0.15); }
.bf-mg-slider-zone-good { background: rgba(0, 255, 136, 0.15); }


/* ============================================================
   MINI-GAME: Timer (.bf-mg-timer)
   ============================================================ */

.bf-mg-timer {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.bf-mg-timer-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--bf-error), var(--bf-warning), var(--bf-success));
    transition: width 0.1s linear;
    transform-origin: left;
}

.bf-mg-timer-fill.low {
    background: var(--bf-error);
    animation: bf-heat-pulse 0.5s ease-in-out infinite;
}

.bf-mg-timer-text {
    position: absolute;
    top: -20px;
    right: 0;
    font-family: var(--bf-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bf-text);
}


/* ============================================================
   MINI-GAME: Budget (.bf-mg-budget)
   ============================================================ */

.bf-mg-budget {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.bf-mg-budget-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.bf-mg-budget-bar-label {
    font-size: 0.85rem;
    color: var(--bf-text-dim);
    white-space: nowrap;
}

.bf-mg-budget-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.bf-mg-budget-bar-fill {
    height: 100%;
    background: var(--bf-success);
    transition: width 0.3s ease;
}

.bf-mg-budget-bar-fill.over {
    background: var(--bf-error);
}

.bf-mg-budget-bar-value {
    font-family: var(--bf-font-display);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bf-text);
    min-width: 80px;
    text-align: right;
}

.bf-mg-budget-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.bf-mg-budget-item {
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.bf-mg-budget-item:hover {
    border-color: rgba(0, 240, 255, 0.2);
}

.bf-mg-budget-item.in-cart {
    border-color: var(--bf-primary);
    background: rgba(0, 240, 255, 0.05);
}

.bf-mg-budget-item-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bf-text);
    margin-bottom: 4px;
}

.bf-mg-budget-item-price {
    font-family: var(--bf-font-display);
    font-size: 0.75rem;
    color: var(--bf-warning);
}

.bf-mg-budget-cart {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 60px;
}

.bf-mg-budget-cart-title {
    font-family: var(--bf-font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bf-primary);
    letter-spacing: 1px;
    margin-bottom: 4px;
}


/* ============================================================
   MINI-GAME: Tetris Grid (.bf-mg-tetris)
   ============================================================ */

.bf-mg-tetris {
    display: flex;
    gap: 16px;
    width: 100%;
}

.bf-mg-tetris-grid {
    display: grid;
    gap: 2px;
    flex: 1;
}

.bf-mg-tetris-cell {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.15s ease;
}

.bf-mg-tetris-cell.filled {
    background: rgba(0, 240, 255, 0.15);
    border-color: var(--bf-primary);
}

.bf-mg-tetris-cell.preview {
    background: rgba(0, 240, 255, 0.08);
    border-color: rgba(0, 240, 255, 0.3);
    border-style: dashed;
}

.bf-mg-tetris-cell.invalid {
    background: rgba(255, 51, 51, 0.1);
    border-color: var(--bf-error);
}

.bf-mg-tetris-pieces {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 120px;
}

.bf-mg-tetris-piece {
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: grab;
    transition: all 0.2s ease;
}

.bf-mg-tetris-piece:hover {
    border-color: var(--bf-primary);
}

.bf-mg-tetris-piece.active {
    border-color: var(--bf-primary);
    background: rgba(0, 240, 255, 0.06);
}


/* ============================================================
   MINI-GAME: Thermal View (.bf-mg-thermal)
   ============================================================ */

.bf-mg-thermal {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #0a0a14;
    overflow: hidden;
}

.bf-mg-thermal-zone {
    position: absolute;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bf-font-display);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.bf-mg-thermal-cold { background: rgba(0, 100, 255, 0.3); color: #4da6ff; border: 1px solid rgba(0, 100, 255, 0.4); }
.bf-mg-thermal-warm { background: rgba(255, 170, 0, 0.3); color: #ffaa00; border: 1px solid rgba(255, 170, 0, 0.4); }
.bf-mg-thermal-hot { background: rgba(255, 50, 50, 0.4); color: #ff5555; border: 1px solid rgba(255, 50, 50, 0.5); animation: bf-heat-pulse 1s ease-in-out infinite; }
.bf-mg-thermal-critical { background: rgba(255, 0, 0, 0.5); color: #ff2222; border: 2px solid #ff0000; animation: bf-heat-pulse 0.4s ease-in-out infinite; }

.bf-mg-thermal-legend {
    position: absolute;
    bottom: 8px; right: 8px;
    display: flex;
    gap: 8px;
    font-size: 0.65rem;
}

.bf-mg-thermal-legend span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bf-mg-thermal-legend-dot {
    width: 8px; height: 8px;
    display: inline-block;
}


/* ============================================================
   MINI-GAME: Sequence Sort (.bf-mg-sequence)
   ============================================================ */

.bf-mg-sequence {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    align-items: flex-start;
}

/* ── Sequence: panel titles ── */
.bf-mg-seq-panel-title {
    font-family: var(--bf-font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bf-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 240, 255, 0.15);
}

/* ── Sequence: left pool cards ── */
.bf-mg-seq-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    transition: all 0.2s ease;
}
.bf-mg-seq-card:hover {
    border-color: var(--bf-primary);
    background: rgba(0, 240, 255, 0.04);
}
.bf-mg-seq-card:active { cursor: grabbing; }
.bf-mg-seq-card.dragging {
    opacity: 0.4;
    border-style: dashed;
}
.bf-mg-seq-card-label {
    flex: 1;
    font-size: 0.82rem;
    color: var(--bf-text);
    font-weight: 600;
    line-height: 1.3;
}

/* ── Sequence: icons ── */
.bf-mg-sequence-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: rgba(0, 240, 255, 0.04);
    border: 1px solid rgba(0, 240, 255, 0.12);
    border-radius: 5px;
}
.bf-mg-sequence-icon svg { display: block; }

/* ── Sequence: right grid slots ── */
.bf-mg-seq-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 4px;
    min-height: 52px;
    background: rgba(255, 255, 255, 0.015);
    border: 1.5px dashed rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
}
.bf-mg-seq-slot--filled {
    border-style: solid;
    border-color: rgba(0, 240, 255, 0.2);
    background: rgba(0, 240, 255, 0.03);
    cursor: grab;
}
.bf-mg-seq-slot--hover {
    border-color: var(--bf-primary) !important;
    background: rgba(0, 240, 255, 0.08) !important;
    box-shadow: inset 0 0 12px rgba(0, 240, 255, 0.1);
}
.bf-mg-seq-slot.dragging {
    opacity: 0.4;
    border-style: dashed;
}
.bf-mg-seq-slot-num {
    font-family: var(--bf-font-display);
    font-size: 0.8rem;
    font-weight: 900;
    color: var(--bf-primary);
    min-width: 22px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 240, 255, 0.08);
    border-radius: 50%;
    flex-shrink: 0;
}
.bf-mg-seq-slot-placeholder {
    font-size: 0.75rem;
    color: var(--bf-text-dim);
    opacity: 0.5;
    font-style: italic;
}
.bf-mg-seq-slot-remove {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #ff4444;
    cursor: pointer;
    opacity: 0.4;
    border-radius: 50%;
    transition: all 0.15s;
}
.bf-mg-seq-slot-remove:hover {
    opacity: 1;
    background: rgba(255, 68, 68, 0.15);
}

/* ── Sequence: validation result ── */
.bf-mg-seq-slot.correct {
    border-color: var(--bf-success);
    background: rgba(0, 255, 136, 0.05);
}
.bf-mg-seq-slot.correct .bf-mg-seq-slot-num {
    background: var(--bf-success);
    color: #000;
}
.bf-mg-seq-slot.wrong {
    border-color: var(--bf-error);
    background: rgba(255, 51, 51, 0.05);
    animation: bf-shake 0.3s ease;
}
.bf-mg-seq-slot.wrong .bf-mg-seq-slot-num {
    background: var(--bf-error);
    color: #fff;
}

/* ── Responsive: stack on small screens ── */
@media (max-width: 700px) {
    .bf-mg-sequence { flex-direction: column !important; }
}


/* ============================================================
   MINI-GAME: Diagnostic (.bf-mg-diagnostic)
   ============================================================ */

.bf-mg-diagnostic {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.bf-mg-diagnostic-zone {
    position: absolute;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bf-mg-diagnostic-zone:hover {
    border-color: rgba(0, 240, 255, 0.4);
    background: rgba(0, 240, 255, 0.05);
}

.bf-mg-diagnostic-zone.inspected {
    border-color: var(--bf-primary);
    background: rgba(0, 240, 255, 0.08);
}

.bf-mg-diagnostic-zone.found-issue {
    border-color: var(--bf-error);
    background: rgba(255, 51, 51, 0.1);
    animation: bf-pulse 1.5s ease-in-out infinite;
}

.bf-mg-diagnostic-zone.healthy {
    border-color: var(--bf-success);
    background: rgba(0, 255, 136, 0.05);
}

.bf-mg-diagnostic-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bf-text);
    text-align: center;
    pointer-events: none;
}

.bf-mg-diagnostic-tooltip {
    position: absolute;
    background: var(--bf-bg-card);
    border: 1px solid var(--bf-border);
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--bf-text);
    z-index: 10;
    max-width: 200px;
    pointer-events: none;
    animation: bf-fade-in 0.2s ease;
}


/* ============================================================
   RPG OVERLAY — RESPONSIVE (>= 960px)
   ============================================================ */

@media (max-width: 959px) {
    #bf-overlay .bf-dialogue-box {
        width: 95%;
        padding: 12px 14px;
        gap: 10px;
        bottom: 50px;
    }

    .bf-dialogue-portrait {
        width: 56px;
    }

    .bf-dialogue-portrait #bf-portrait-canvas {
        width: 48px;
        height: 48px;
    }

    #bf-overlay .bf-dialogue-text {
        font-size: 0.9rem;
    }

    .bf-hud-top {
        padding: 6px 10px;
        gap: 8px;
    }

    .bf-hud-top .bf-hud-xp-bar {
        width: 60px;
    }

    .bf-hud-top .bf-hud-quest {
        display: none;
    }

    .bf-hud-bottom {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
        border: none;
        border-top: 1px solid var(--bf-border);
        justify-content: center;
        gap: 4px;
        padding: 6px 10px;
    }

    .bf-hud-bottom .bf-hud-btn {
        width: 36px; height: 36px;
        font-size: 1rem;
    }

    .bf-menu-content {
        width: 95%;
        padding: 16px;
        max-height: 90vh;
    }

    .bf-pause-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .bf-shop-overlay .bf-shop-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .bf-mg-cards {
        grid-template-columns: 1fr;
    }

    .bf-mg-memory {
        grid-template-columns: repeat(3, 1fr);
    }

    .bf-mg-tetris {
        flex-direction: column;
    }

    .bf-mg-tetris-pieces {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .bf-mg-connect {
        flex-direction: column;
    }
}

/* ============================================================
   TOUCH CONTROLS — D-pad + Interact button
   ============================================================ */
.bf-touch-controls {
    position: fixed;
    bottom: 70px;
    left: 16px;
    z-index: 120;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.bf-touch-dpad {
    display: grid;
    grid-template-columns: 48px 48px 48px;
    grid-template-rows: 48px 48px 48px;
    gap: 3px;
}

.bf-touch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(10, 14, 26, 0.8);
    border: 1px solid rgba(0, 240, 255, 0.25);
    color: rgba(0, 240, 255, 0.7);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s, border-color 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.bf-touch-btn.active {
    background: rgba(0, 240, 255, 0.25);
    border-color: var(--bf-primary);
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.bf-touch-up    { grid-column: 2; grid-row: 1; }
.bf-touch-left  { grid-column: 1; grid-row: 2; }
.bf-touch-center{ grid-column: 2; grid-row: 2; pointer-events: none; opacity: 0.15; border: none; }
.bf-touch-right { grid-column: 3; grid-row: 2; }
.bf-touch-down  { grid-column: 2; grid-row: 3; }

.bf-touch-interact {
    position: fixed;
    bottom: 90px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(10, 14, 26, 0.8);
    border: 2px solid rgba(0, 240, 255, 0.3);
    border-radius: 50%;
    color: var(--bf-primary);
    font-family: var(--bf-font-display);
    font-size: 0.7rem;
    cursor: pointer;
    gap: 2px;
    z-index: 120;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s, border-color 0.1s;
}

.bf-touch-interact i { font-size: 1.3rem; }

.bf-touch-interact.active {
    background: rgba(0, 240, 255, 0.25);
    border-color: var(--bf-primary);
    color: #fff;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

/* Minimap toggle button (for small screens) — hidden by default */
.bf-minimap-toggle {
    display: none;
    position: fixed;
    top: 50px;
    left: 12px;
    z-index: 118;
    width: 38px;
    height: 38px;
    background: rgba(10, 14, 26, 0.85);
    border: 1px solid rgba(0, 240, 255, 0.25);
    border-radius: 6px;
    color: var(--bf-primary);
    font-size: 1.1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.bf-minimap-toggle.active {
    background: rgba(0, 240, 255, 0.15);
    border-color: var(--bf-primary);
}

/* ============================================================
   RESPONSIVE < 1000px — Compact Histoire + floating minimap
   ============================================================ */
@media (max-width: 999px) {
    /* Minimap: hidden by default, shown when toggled */
    .bf-minimap {
        display: none;
        position: fixed;
        top: 95px;
        left: 12px;
        right: auto;
        width: 220px;
        z-index: 117;
        animation: bf-slide-in-left 0.2s ease;
    }

    .bf-minimap.bf-minimap-open {
        display: block;
    }

    /* Show the minimap toggle button */
    .bf-minimap-toggle {
        display: flex;
    }

    /* Histoire panel: compact floating version */
    .bf-hud-objective {
        position: fixed;
        top: auto;
        bottom: 60px;
        right: auto;
        left: 12px;
        width: 260px;
        max-height: 55vh;
        overflow-y: auto;
    }

    .bf-obj-body {
        max-height: 40vh;
        overflow-y: auto;
    }

    /* Inventory button repositioned */
    .bf-inventory-btn {
        top: 50px !important;
        right: auto !important;
        left: 56px !important;
    }
}

/* ===================================================================
   INVENTORY BUTTON (above Histoire panel)
   =================================================================== */
.bf-inventory-btn {
    position: fixed;
    right: 340px;
    top: 56px;
    z-index: 50;
    background: rgba(10,14,26,0.85);
    border: 1px solid rgba(0,240,255,0.3);
    border-radius: 8px;
    padding: 8px 14px;
    color: #00f0ff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.bf-inventory-btn:hover {
    background: rgba(0,240,255,0.15);
    border-color: #00f0ff;
    box-shadow: 0 0 12px rgba(0,240,255,0.3);
}
.bf-inv-badge {
    background: #ff4444;
    color: #fff;
    font-size: 0.65rem;
    font-family: 'Rajdhani', sans-serif;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-weight: 700;
}

/* ===================================================================
   SHOP — Main & Sub Tabs
   =================================================================== */
.bf-shop-main-tabs {
    display: flex;
    gap: 4px;
    padding: 0 16px;
    margin-bottom: 8px;
}
.bf-shop-main-tab {
    flex: 1;
    padding: 8px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.6);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.bf-shop-main-tab:hover { background: rgba(0,240,255,0.1); color: #fff; }
.bf-shop-main-tab.active {
    background: rgba(0,240,255,0.15);
    border-color: #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 8px rgba(0,240,255,0.2);
}

.bf-shop-sub-tabs {
    display: flex;
    gap: 3px;
    padding: 0 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.bf-shop-sub-tab {
    padding: 6px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    color: rgba(255,255,255,0.5);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 3px;
}
.bf-shop-sub-tab:hover { background: rgba(0,240,255,0.08); color: #fff; }
.bf-shop-sub-tab.active {
    background: rgba(0,240,255,0.12);
    border-color: rgba(0,240,255,0.5);
    color: #00f0ff;
}
.bf-tab-count {
    background: rgba(0,240,255,0.2);
    color: #00f0ff;
    font-size: 0.8rem;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 700;
}

/* Menu description text */
.bf-menu-desc {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.4;
    margin: 0 16px 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid rgba(0,240,255,0.25);
    border-radius: 0 6px 6px 0;
}

/* ===================================================================
   COMPONENT CARDS (Shop, Inventory, Builder Picker)
   =================================================================== */
.bf-comp-card {
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s;
    position: relative;
    min-height: 64px;
}
.bf-comp-card:hover {
    background: rgba(0,240,255,0.05);
    border-color: rgba(0,240,255,0.3);
}
.bf-comp-locked {
    opacity: 0.45;
    pointer-events: none;
}
.bf-comp-mounted {
    border-color: rgba(0,255,136,0.3);
    background: rgba(0,255,136,0.05);
}

.bf-comp-lock {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 26, 0.6);
    color: #ff6666;
    font-size: 1.3rem;
    font-weight: 700;
    border-radius: 8px;
    font-family: 'Rajdhani', sans-serif;
    z-index: 2;
    gap: 2px;
}
.bf-comp-lock i {
    font-size: 2rem;
}
.bf-comp-mounted-badge {
    font-size: 0.6rem;
    color: #00ff88;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
}
.bf-comp-owned-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 1rem;
    color: #0a0e1a;
    background: rgba(0,240,255,0.85);
    padding: 1px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    cursor: default;
    z-index: 3;
}
.bf-comp-owned-tt {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    white-space: nowrap;
    padding: 6px 12px;
    background: rgba(6,14,30,0.95);
    border: 1px solid rgba(0,240,255,0.5);
    border-radius: 6px;
    color: #00f0ff;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    pointer-events: none;
    z-index: 30;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 8px rgba(0,240,255,0.15);
    text-shadow: 0 0 6px rgba(0,240,255,0.4);
}
.bf-comp-owned-tt::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 12px;
    border: 5px solid transparent;
    border-top-color: rgba(0,240,255,0.5);
}
.bf-comp-owned-badge:hover .bf-comp-owned-tt {
    display: block;
}
.bf-comp-equipped-badge {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 0.85rem;
    color: #0a0e1a;
    background: #00ff88;
    padding: 3px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    cursor: default;
    z-index: 1;
}
.bf-comp-equipped-badge i {
    font-size: 0.85rem;
}

.bf-comp-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.3rem;
    color: rgba(0, 240, 255, 0.4);
}
.bf-comp-info {
    flex: 1;
    min-width: 0;
}
.bf-comp-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    padding-right: 30px;
    word-break: break-word;
    line-height: 1.25;
}

/* Score bar */
.bf-comp-score-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 3px;
}
.bf-comp-score-bar--sm { height: 4px; }
.bf-comp-score-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #00f0ff, #00ff88);
    transition: width 0.3s;
}
.bf-comp-score-text {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.6);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}

/* Tags */
.bf-comp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 3px;
}
.bf-comp-tag {
    font-size: 0.9rem;
    padding: 3px 9px;
    border-radius: 3px;
    background: rgba(0,240,255,0.1);
    color: rgba(0,240,255,0.85);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    white-space: nowrap;
}

.bf-comp-footer {
    display: flex;
    align-items: center;
}
.bf-comp-footer .bf-btn {
    font-size: 1.05rem;
    padding: 6px 14px;
    font-weight: 700;
    gap: 5px;
    display: inline-flex;
    align-items: center;
}
.bf-comp-footer .bf-btn i {
    font-size: 1.1rem;
}

/* ── Buy button tooltip ── */
.bf-comp-buy-wrap {
    position: relative;
    display: inline-flex;
}
.bf-comp-buy-tt {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 6px 14px;
    background: rgba(6,14,30,0.95);
    border: 1px solid rgba(0,240,255,0.5);
    border-radius: 6px;
    color: #00f0ff;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    pointer-events: none;
    z-index: 30;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 8px rgba(0,240,255,0.15);
    text-shadow: 0 0 6px rgba(0,240,255,0.4);
}
.bf-comp-buy-tt--nope {
    color: #ff5555;
    border-color: rgba(255,68,68,0.5);
    text-shadow: 0 0 6px rgba(255,68,68,0.4);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 8px rgba(255,68,68,0.15);
}
.bf-comp-buy-tt--nope::after {
    border-top-color: rgba(255,68,68,0.5);
}
.bf-comp-buy-tt::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: rgba(0,240,255,0.5);
}
.bf-comp-buy-wrap:hover .bf-comp-buy-tt {
    display: block;
}

/* ── Sell button (inventory & shop sell mode) ── */
.bf-comp-sell-btn {
    background: rgba(220, 50, 50, 0.2) !important;
    border: 1px solid rgba(220, 50, 50, 0.4) !important;
    color: #ff6b6b !important;
    transition: all 0.2s ease;
}
.bf-comp-sell-btn:hover:not(:disabled) {
    background: rgba(220, 50, 50, 0.35) !important;
    border-color: rgba(255, 80, 80, 0.6) !important;
    color: #ff8888 !important;
    box-shadow: 0 0 8px rgba(220, 50, 50, 0.3);
}
.bf-comp-sell-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.bf-comp-sell-btn i.bi-coin {
    font-size: 0.85em;
    opacity: 0.8;
}

/* ── Buy confirmation popup ── */
.bf-buy-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bf-fade-in 0.15s ease;
}
.bf-buy-confirm-box {
    background: linear-gradient(135deg, #0a0e1a 0%, #0c1220 100%);
    border: 1px solid rgba(0,240,255,0.4);
    border-radius: 12px;
    padding: 0;
    min-width: 320px;
    max-width: 420px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 20px rgba(0,240,255,0.1);
    overflow: hidden;
}
.bf-buy-confirm-title {
    padding: 14px 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #00f0ff;
    background: rgba(0,240,255,0.06);
    border-bottom: 1px solid rgba(0,240,255,0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 0 8px rgba(0,240,255,0.4);
}
.bf-buy-confirm-body {
    padding: 20px 24px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    color: #ccc;
    line-height: 1.7;
}
.bf-buy-confirm-body p {
    margin: 0;
}
.bf-buy-confirm-item {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    padding: 4px 0;
}
.bf-buy-confirm-price {
    color: #00f0ff;
    font-weight: 700;
    font-size: 1.1rem;
}
.bf-buy-confirm-price i {
    color: #ffcc00;
}
.bf-buy-confirm-remaining {
    margin-top: 6px !important;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.95rem;
    color: #999;
}
.bf-buy-confirm-remaining span {
    color: #00ff88;
    font-weight: 700;
}
.bf-buy-confirm-remaining span i {
    color: #ffcc00;
}
.bf-buy-confirm-actions {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,0.06);
    justify-content: flex-end;
}
.bf-buy-confirm-actions .bf-btn {
    font-size: 1rem;
    padding: 8px 18px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ===================================================================
   PC BUILDER
   =================================================================== */
.bf-builder-overlay { max-width: 1200px; }

.bf-builder-layout {
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

/* Inline score in header */
.bf-builder-header-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bf-builder-header-inline h2 { white-space: nowrap; }
.bf-builder-score-inline {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.bf-builder-score-bar-inline {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    min-width: 60px;
}
.bf-builder-score-val-inline {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: #00f0ff;
    text-shadow: 0 0 12px rgba(0,240,255,0.5);
    white-space: nowrap;
}
.bf-builder-score-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #ff4444 0%, #ffaa00 25%, #00ff88 50%, #00f0ff 100%);
    transition: width 0.5s;
}

/* Category bar */
.bf-builder-catbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #334 transparent;
}
.bf-builder-cat {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(255,255,255,0.6);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.bf-builder-cat:hover { border-color: rgba(0,240,255,0.4); color: #fff; }
.bf-builder-cat.active {
    background: rgba(0,240,255,0.15);
    border-color: #00f0ff;
    color: #00f0ff;
}
.bf-builder-cat.has-item { color: #00ff88; border-color: rgba(0,255,136,0.3); }
.bf-builder-cat.has-item.active { color: #00f0ff; border-color: #00f0ff; }

/* Horizontal picker zone */
.bf-builder-hpicker {
    margin: 0 16px 8px;
    min-height: 50px;
    background: rgba(10,14,26,0.5);
    border: 1px solid rgba(0,240,255,0.1);
    border-radius: 8px;
    padding: 8px;
}
.bf-builder-hpicker-hint {
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    padding: 12px;
}
.bf-hpicker-installed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: rgba(0,255,136,0.06);
    border: 1px solid rgba(0,255,136,0.2);
    border-radius: 6px;
}
.bf-hpicker-installed-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    color: #fff;
    font-weight: 600;
}
.bf-hpicker-inst-score {
    color: rgba(255,255,255,0.5);
    font-weight: 400;
}
.bf-hpicker-empty {
    text-align: center;
    color: rgba(255,255,255,0.35);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    padding: 10px;
}
.bf-hpicker-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: #334 transparent;
}
.bf-hpicker-card {
    flex: 0 0 170px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: all 0.2s;
    min-height: 100px;
}
.bf-hpicker-card:hover { border-color: rgba(0,240,255,0.3); }
.bf-hpicker-card.bf-picker-incompatible {
    opacity: 0.55;
    border-color: rgba(255,170,0,0.4);
    position: relative;
}
.bf-hpicker-card.bf-comp-mounted {
    opacity: 0.75;
    border-color: rgba(0,255,136,0.4);
    position: relative;
}

/* Mounted = green checkmark overlay */
.bf-hpicker-mounted-check {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #00ff88;
    filter: drop-shadow(0 0 8px rgba(0,255,136,0.5));
    margin-top: auto;
    position: relative;
}

/* Fixed hover tooltip (appended to body via JS) */
.bf-hpicker-hover-tt-fixed {
    position: fixed;
    z-index: 100000;
    padding: 6px 12px;
    background: rgba(5,10,25,0.97);
    border: 1px solid rgba(0,240,255,0.4);
    border-radius: 6px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #cef;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Incompatible = yellow warning overlay centered */
.bf-hpicker-incompat-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #ffaa00;
    background: rgba(10,14,26,0.55);
    border-radius: 8px;
    cursor: help;
    z-index: 5;
    filter: drop-shadow(0 0 10px rgba(255,170,0,0.4));
}
/* Fixed tooltip for incompatible cards (appended to body via JS) */
.bf-hpicker-incompat-tt-fixed {
    position: fixed;
    z-index: 100000;
    max-width: 300px;
    padding: 10px 14px;
    background: rgba(10,14,26,0.98);
    border: 1px solid rgba(255,170,0,0.6);
    border-radius: 8px;
    color: #ffcc44;
    font-size: 1rem;
    line-height: 1.5;
    font-family: 'Rajdhani', sans-serif;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    white-space: normal;
}
.bf-hpicker-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #00f0ff;
    font-size: 1.05rem;
}
.bf-hpicker-card-score {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}
.bf-hpicker-card-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bf-hpicker-card-reason {
    font-size: 0.8rem;
    color: #ff4444;
    font-family: 'Rajdhani', sans-serif;
}
.bf-hpicker-card .bf-btn { margin-top: auto; align-self: center; }

/* Picker card tags */
.bf-hpicker-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.bf-hpicker-tag {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(0,240,255,0.1);
    border: 1px solid rgba(0,240,255,0.2);
    border-radius: 4px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(0,240,255,0.8);
    line-height: 1.3;
}

/* Install button (purple wrench) */
.bf-hpicker-install-btn {
    background: rgba(160,100,255,0.15) !important;
    border: 1px solid rgba(160,100,255,0.5) !important;
    color: #b580ff !important;
    font-size: 1.6rem !important;
    padding: 6px 18px !important;
    transition: all 0.2s;
    position: relative;
}
.bf-hpicker-install-btn:hover {
    background: rgba(160,100,255,0.3) !important;
    border-color: #b580ff !important;
    color: #d4b0ff !important;
    box-shadow: 0 0 10px rgba(160,100,255,0.3);
}

/* PC Schema (clickable SVG) */
.bf-pc-schema {
    flex: 1 1 0;
    min-width: 400px;
    background: rgba(10,14,26,0.6);
    border: 1px solid rgba(0,240,255,0.12);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bf-pc-svg {
    width: 100%;
    max-width: 600px;
    height: auto;
}
.bf-pc-svg .bf-svg-slot {
    transition: all 0.2s;
}
.bf-pc-svg .bf-svg-slot:hover {
    filter: brightness(1.5);
    stroke-width: 2.5;
}
.bf-svg-zone { transition: filter 0.2s, opacity 0.2s; }
.bf-svg-highlight {
    opacity: 1;
    filter: brightness(2.5) drop-shadow(0 0 8px rgba(0,240,255,0.6));
}

.bf-pc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: center;
    padding: 8px 0 4px;
}

/* Vertical legend (right side of schema) */
.bf-pc-legend--vertical {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 8px 10px;
    margin-left: 8px;
    background: rgba(10,14,26,0.5);
    border: 1px solid rgba(0,240,255,0.1);
    border-radius: 8px;
    align-self: flex-start;
}

.bf-pc-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    color: #556;
    cursor: pointer;
    transition: color 0.2s;
}

.bf-pc-legend-item:hover { color: #aee; }

.bf-pc-legend-item.active { color: #cff; }

.bf-pc-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #334;
    border: 1px solid #556;
}

.bf-pc-legend-item.active .bf-pc-legend-dot {
    background: #00f0ff;
    border-color: #00f0ff;
    box-shadow: 0 0 6px rgba(0,240,255,0.4);
}
.bf-legend-score {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    color: #00f0ff;
    text-shadow: 0 0 6px rgba(0,240,255,0.4);
}

/* Legend total score */
.bf-legend-total {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,240,255,0.15);
}
.bf-legend-total-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    color: rgba(0,240,255,0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.bf-legend-total-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.05rem;
    font-weight: 900;
    color: #00f0ff;
    text-shadow: 0 0 10px rgba(0,240,255,0.5);
}
.bf-legend-bn {
    font-size: 1rem;
}

/* Save button under legend */
.bf-legend-save-btn {
    width: 100%;
    margin-top: 8px;
    font-size: 0.9rem !important;
    padding: 6px 10px !important;
}

/* Save prompt popup */
.bf-save-prompt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bf-fadeIn 0.15s;
}
.bf-save-prompt-box {
    background: rgba(10,14,26,0.98);
    border: 1px solid rgba(0,240,255,0.4);
    border-radius: 12px;
    padding: 20px 24px;
    min-width: 320px;
    max-width: 400px;
    box-shadow: 0 0 30px rgba(0,240,255,0.15), 0 8px 32px rgba(0,0,0,0.6);
}
.bf-save-prompt-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: #00f0ff;
    margin-bottom: 14px;
    text-align: center;
}
.bf-save-prompt-title i { margin-right: 6px; }
.bf-save-prompt-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(0,240,255,0.3);
    border-radius: 6px;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.bf-save-prompt-input:focus {
    border-color: #00f0ff;
    box-shadow: 0 0 8px rgba(0,240,255,0.2);
}
.bf-save-prompt-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* ── Compact header ── */
.bf-builder-header--compact { padding: 6px 12px; gap: 8px; }
.bf-builder-header--compact h2 { font-size: 1rem; }
.bf-builder-score-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: rgba(0,240,255,0.6);
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Compact schema ── */
.bf-pc-schema--compact { padding: 8px; }
.bf-pc-schema--compact .bf-pc-svg { max-width: 500px; }

/* ── Cross-highlighting: SVG slot glow ── */
.bf-svg-slot-highlight rect,
.bf-svg-slot-highlight {
    filter: brightness(2) drop-shadow(0 0 6px rgba(0,240,255,0.5));
    stroke-width: 2.5 !important;
}

/* ── Cross-highlighting: catbar button glow ── */
.bf-cat-highlight {
    border-color: rgba(0,240,255,0.8) !important;
    background: rgba(0,240,255,0.2) !important;
    color: #00f0ff !important;
    box-shadow: 0 0 12px rgba(0,240,255,0.25);
}

/* ── Cross-highlighting: legend item glow ── */
.bf-legend-highlight {
    color: #00f0ff !important;
    text-shadow: 0 0 8px rgba(0,240,255,0.4);
}
.bf-legend-highlight .bf-pc-legend-dot {
    background: #00f0ff;
    border-color: #00f0ff;
    box-shadow: 0 0 8px rgba(0,240,255,0.5);
}

/* ── Info "?" buttons in SVG ── */
.bf-svg-info-btn {
    cursor: help;
    pointer-events: all;
}
.bf-svg-info-btn:hover circle {
    fill: rgba(0,240,255,0.25);
    stroke: rgba(0,240,255,0.85);
}
.bf-svg-info-btn:hover text {
    fill: #00f0ff;
}

/* ── Info tooltip ── */
.bf-builder-info-tooltip {
    position: fixed;
    z-index: 100000;
    max-width: 320px;
    padding: 14px 18px;
    background: rgba(5,10,25,0.98);
    border: 1px solid rgba(0,240,255,0.45);
    border-radius: 8px;
    box-shadow: 0 0 24px rgba(0,240,255,0.2);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #e0e8f0;
    pointer-events: none;
}
.bf-info-title {
    font-weight: 700;
    color: #00f0ff;
    font-size: 1.2rem;
    margin-bottom: 8px;
}
.bf-info-title i { margin-right: 4px; }
.bf-info-desc {
    margin-bottom: 10px;
    color: rgba(224,232,240,0.9);
    font-size: 1.1rem;
}
.bf-info-tip {
    padding-top: 8px;
    border-top: 1px solid rgba(0,240,255,0.12);
    color: #ffaa00;
    font-size: 1.05rem;
}

/* ── Incompatibility badge on picker cards ── */
.bf-incompat-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background: rgba(255,170,0,0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: #1a1000;
    z-index: 5;
    cursor: help;
    box-shadow: 0 0 8px rgba(255,170,0,0.4);
    animation: bf-incompat-pulse 2s ease-in-out infinite;
}
@keyframes bf-incompat-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(255,170,0,0.3); }
    50%      { box-shadow: 0 0 14px rgba(255,170,0,0.6); }
}
.bf-incompat-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    padding: 8px 12px;
    background: rgba(40,30,0,0.96);
    border: 1px solid rgba(255,170,0,0.5);
    border-radius: 6px;
    color: rgba(255,220,130,0.95);
    font-size: 0.9rem;
    line-height: 1.4;
    font-family: 'Rajdhani', sans-serif;
    text-align: left;
    pointer-events: none;
    z-index: 100000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    white-space: normal;
}
.bf-incompat-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: rgba(255,170,0,0.5);
}
.bf-incompat-badge:hover .bf-incompat-tooltip {
    display: block;
}

.bf-builder-slots {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin-bottom: 12px;
    max-height: 450px;
    overflow-y: auto;
}

.bf-builder-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    transition: all 0.2s;
    min-height: 56px;
}
.bf-builder-slot:hover {
    border-color: rgba(0,240,255,0.3);
}
.bf-builder-slot-icon {
    font-size: 1.3rem;
    color: #00f0ff;
    min-width: 32px;
    text-align: center;
}
.bf-builder-slot-info { flex: 1; min-width: 0; }
.bf-builder-slot-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
}
.bf-builder-slot-item {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    word-break: break-word;
    line-height: 1.2;
}
.bf-builder-slot-empty {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    color: rgba(255,255,255,0.25);
    font-style: italic;
}
.bf-builder-slot-actions {
    display: flex;
    gap: 4px;
}

/* Builder Picker */
.bf-builder-picker {
    margin: 0 16px 16px;
    background: rgba(10,14,26,0.95);
    border: 1px solid rgba(0,240,255,0.3);
    border-radius: 8px;
    padding: 12px;
    max-height: 300px;
    overflow-y: auto;
}
.bf-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.bf-picker-header h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: #00f0ff;
    margin: 0;
}
.bf-picker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bf-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    transition: all 0.2s;
    min-height: 56px;
}
.bf-picker-item:hover { border-color: rgba(0,240,255,0.3); }
.bf-picker-incompatible {
    border-color: rgba(255,68,68,0.3) !important;
    background: rgba(255,68,68,0.05);
}
.bf-picker-reason {
    font-size: 0.85rem;
    color: #ff6666;
    margin-top: 2px;
}

/* ===================================================================
   MISSIONS
   =================================================================== */
.bf-missions-overlay { max-width: 700px; }

.bf-missions-score {
    text-align: center;
    padding: 12px 16px;
    margin: 0 16px 10px;
    background: rgba(0,240,255,0.05);
    border: 1px solid rgba(0,240,255,0.15);
    border-radius: 6px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
}
.bf-missions-score strong {
    color: #00f0ff;
}

.bf-missions-list {
    flex-direction: column;
    gap: 6px;
    padding: 0 16px 16px;
    max-height: 400px;
    overflow-y: auto;
}

.bf-mission-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    margin: 5px;
}
.bf-mission-card:hover { border-color: rgba(0,240,255,0.3); }

.bf-mission-locked {
    opacity: 1;
}
.bf-mission-lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 26, 0.65);
    z-index: 2;
    border-radius: 8px;
    gap: 4px;
}
.bf-mission-lock-overlay i {
    font-size: 1.8rem;
    color: rgba(255,255,255,0.4);
}
.bf-mission-lock-overlay .bf-mission-lock-req {
    font-family: 'Orbitron', monospace;
    font-size: 0.88rem;
    color: #ff4444;
    font-weight: 700;
}
.bf-mission-completed {
    border-color: rgba(0,255,136,0.2);
    background: rgba(0,255,136,0.03);
}
.bf-mission-collectible {
    border-color: rgba(255,200,0,0.4);
    background: rgba(255,200,0,0.05);
    animation: bf-pulse-border 1.5s ease infinite;
}
@keyframes bf-pulse-border {
    0%, 100% { border-color: rgba(255,200,0,0.4); }
    50% { border-color: rgba(255,200,0,0.8); box-shadow: 0 0 12px rgba(255,200,0,0.2); }
}

.bf-mission-icon {
    font-size: 1.6rem;
    color: #00f0ff;
    min-width: 36px;
    text-align: center;
}
.bf-mission-locked .bf-mission-icon { color: rgba(255,255,255,0.3); }
.bf-mission-completed .bf-mission-icon { color: #00ff88; }

.bf-mission-icon { position: relative; z-index: 3; }
.bf-mission-info { flex: 1; min-width: 0; position: relative; z-index: 3; }
.bf-mission-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 5px;
    line-height: 1.2;
}
.bf-mission-meta {
    display: flex;
    gap: 12px;
    font-size: 1rem;
    color: rgba(255,255,255,0.5);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    margin-bottom: 4px;
}
.bf-mission-meta i { margin-right: 3px; }
.bf-mission-rewards {
    display: flex;
    gap: 12px;
    font-size: 1rem;
    color: rgba(0,240,255,0.7);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}
.bf-mission-rewards i { margin-right: 3px; }

.bf-mission-timer {
    font-size: 0.95rem;
    color: #ffaa00;
    font-family: 'Orbitron', sans-serif;
    margin-top: 5px;
}

.bf-mission-action {
    min-width: 80px;
    text-align: center;
}
.bf-mission-locked .bf-mission-title { color: rgba(255,255,255,0.4); }
.bf-mission-locked .bf-mission-meta { color: rgba(255,255,255,0.25); }
.bf-mission-locked .bf-mission-rewards { color: rgba(255,255,255,0.2); }
.bf-mission-active-badge {
    font-size: 0.8rem;
    color: #ffaa00;
    font-family: 'Rajdhani', sans-serif;
}

.bf-btn-glow {
    animation: bf-btn-glow-anim 1.5s ease infinite;
}
@keyframes bf-btn-glow-anim {
    0%, 100% { box-shadow: 0 0 5px rgba(0,240,255,0.3); }
    50% { box-shadow: 0 0 15px rgba(0,240,255,0.6); }
}


/* ============================================================
   GAME HEADER (replaces navbar for game page)
   ============================================================ */

.bf-game-header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 42px;
    background: rgba(10, 14, 26, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    gap: 10px;
}

.bf-game-header .logo {
    font-size: 0.9rem;
    gap: 0.2rem;
    flex-shrink: 0;
}
.bf-game-header .logo-bracket {
    font-size: 1.2rem;
}

/* ===== HEADER IDENTITY (pseudo + gamertag) ===== */
.bf-hdr-identity {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.bf-hdr-pseudo {
    font-family: var(--bf-font-display, 'Orbitron', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bf-profile-color, var(--color-primary));
}

.bf-hdr-gamertag {
    font-size: 0.7rem;
    color: var(--color-text-muted, rgba(255,255,255,0.4));
    font-weight: 400;
}

.bf-hdr-copy {
    cursor: pointer;
    font-size: 0.6rem;
    opacity: 0.4;
    transition: opacity 0.2s;
}

.bf-hdr-copy:hover {
    opacity: 1;
    color: var(--color-primary, #00f0ff);
}

/* ===== HEADER CENTER (level, XP, bytes) ===== */
.bf-header-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.bf-header-center > i {
    font-size: 1.2rem;
    color: var(--bf-profile-color, var(--color-primary));
}
.bf-hdr-level {
    font-family: var(--bf-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}
.bf-hdr-xp-bar {
    width: 120px;
    height: 10px;
    background: rgba(0,240,255,0.1);
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
}
.bf-hdr-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), #00ff88);
    border-radius: 5px;
    transition: width 0.4s;
}
.bf-hdr-xp-text {
    font-size: 0.9rem;
    color: var(--bf-text-dim);
    white-space: nowrap;
}
.bf-hdr-bytes {
    font-family: var(--bf-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffcc00;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}
.bf-hdr-bytes i {
    font-size: 0.95rem;
}

/* ===== HEADER RIGHT (buttons + title) ===== */
.bf-game-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bf-header-sep {
    display: none;
}

.bf-game-title {
    font-family: var(--bf-font-display);
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--color-text);
    letter-spacing: 2px;
    margin-left: 8px;
}
.bf-game-title .bf-game-title-accent {
    color: var(--color-primary);
    text-shadow: 0 0 12px var(--color-primary);
}
.bf-game-title .logo-bracket {
    color: var(--color-primary);
    font-weight: 400;
}

.bf-header-btn {
    background: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.15);
    color: var(--color-text);
    font-size: 1.25rem;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.bf-header-btn:hover {
    background: rgba(0, 240, 255, 0.18);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.bf-header-btn-logout {
    color: #ff5566;
    border-color: rgba(255,85,102,0.2);
    background: rgba(255,85,102,0.06);
}
.bf-header-btn-logout:hover {
    background: rgba(255,85,102,0.18);
    border-color: #ff5566;
    color: #ff5566;
}

.bf-header-btn-labeled {
    flex-direction: column;
    gap: 1px;
    padding: 4px 8px 2px;
    min-width: 58px;
}

.bf-header-btn-logout.bf-header-btn-labeled {
    min-width: auto;
}

.bf-header-btn-label {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.6;
    line-height: 1;
}

.bf-header-btn-labeled:hover .bf-header-btn-label {
    opacity: 1;
}

@media (max-width: 768px) {
    .bf-game-title { display: none; }
    .bf-header-sep { display: none; }
    .bf-header-center { gap: 5px; }
    .bf-hdr-xp-bar { width: 50px; }
    .bf-hdr-xp-text { display: none; }
    .bf-game-header { padding: 0 6px; gap: 6px; }
    .bf-header-btn { padding: 4px 6px; font-size: 0.8rem; }
    .bf-header-btn-label { display: none; }
}


/* ============================================================
   LEADERBOARD PC VIEW MODAL
   ============================================================ */

.bf-pc-view-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bf-fade-in 0.2s ease;
}

.bf-pc-view-content {
    background: var(--bf-bg-card);
    border: 1px solid var(--bf-border);
    border-radius: 10px;
    width: 90%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px;
}

.bf-pc-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.bf-pc-view-header h3 {
    font-family: var(--bf-font-display);
    font-size: 1rem;
    color: var(--color-primary);
}

.bf-pc-view-score {
    text-align: center;
    margin-bottom: 16px;
}
.bf-pc-view-score-val {
    font-family: var(--bf-font-display);
    font-size: 2rem;
    color: var(--color-primary);
}
.bf-pc-view-score-label {
    font-size: 0.8rem;
    color: var(--bf-text-dim);
}

.bf-pc-view-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bf-pc-view-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0, 240, 255, 0.04);
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 6px;
}
.bf-pc-view-slot i {
    font-size: 1.1rem;
    color: var(--color-primary);
    width: 24px;
    text-align: center;
}
.bf-pc-view-slot-info {
    flex: 1;
}
.bf-pc-view-slot-label {
    font-size: 0.7rem;
    color: var(--bf-text-dim);
    text-transform: uppercase;
    font-family: var(--bf-font-display);
}
.bf-pc-view-slot-name {
    font-size: 0.85rem;
    color: var(--color-text);
}
.bf-pc-view-slot-empty {
    font-size: 0.85rem;
    color: var(--bf-text-dim);
    font-style: italic;
}

.bf-pc-view-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    justify-content: center;
}


/* ============================================================
   SAVED BUILDS TAB
   ============================================================ */

.bf-saved-builds-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
}

.bf-saved-build-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(0, 240, 255, 0.04);
    border: 1px solid rgba(0, 240, 255, 0.12);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.bf-saved-build-card:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--color-primary);
}

.bf-saved-build-info {
    flex: 1;
}
.bf-saved-build-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
}
.bf-saved-build-score {
    font-size: 0.95rem;
    color: var(--color-primary);
    font-family: var(--bf-font-display);
}
.bf-saved-build-date {
    font-size: 0.9rem;
    color: var(--bf-text-dim);
}

.bf-saved-build-actions {
    display: flex;
    gap: 4px;
}


/* ============================================================
   FRIENDS — TRADE & SELL SYSTEM
   ============================================================ */

.bf-friend-card {
    position: relative;
}

.bf-friend-pc-score {
    font-size: 0.7rem;
    color: var(--color-primary);
    font-family: var(--bf-font-display);
}

.bf-trade-section {
    padding: 12px;
}

.bf-trade-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 240, 255, 0.04);
    border: 1px solid rgba(0, 240, 255, 0.12);
    border-radius: 6px;
    margin-bottom: 8px;
}
.bf-trade-card-info {
    flex: 1;
}
.bf-trade-card-title {
    font-size: 0.85rem;
    font-weight: 600;
}
.bf-trade-card-detail {
    font-size: 0.75rem;
    color: var(--bf-text-dim);
}
.bf-trade-status {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.bf-trade-status-pending { background: rgba(255,170,0,0.15); color: #ffaa00; }
.bf-trade-status-accepted { background: rgba(0,255,136,0.15); color: #00ff88; }
.bf-trade-status-refused { background: rgba(255,51,51,0.15); color: #ff3333; }

.bf-trade-propose-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-top: 8px;
}

.bf-trade-item-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.bf-trade-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition-fast);
}
.bf-trade-item-row:hover {
    background: rgba(0, 240, 255, 0.08);
}
.bf-trade-item-row.selected {
    background: rgba(0, 240, 255, 0.15);
    border: 1px solid var(--color-primary);
}
.bf-trade-item-row.incompatible {
    opacity: 0.4;
    cursor: not-allowed;
}

.bf-friend-is-friend {
    color: var(--color-primary);
    font-size: 0.8rem;
    margin-left: 4px;
}

.bf-lb-row { cursor: pointer; transition: var(--transition-fast); }
.bf-lb-row:hover { background: rgba(0, 240, 255, 0.06); }


/* ============================================================
   AVATARS — Pixel Art Profile Pictures
   ============================================================ */
.bf-avatar {
    position: relative;
    display: inline-block;
    border-radius: 4px;
    overflow: hidden;
    background: #0a0e1a;
    flex-shrink: 0;
    image-rendering: pixelated;
}
.bf-avatar-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.3);
    font-size: 0.8em;
}

/* Profile page */
.bf-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    margin-bottom: 12px;
    background: rgba(0,240,255,0.04);
    border: 1px solid rgba(0,240,255,0.15);
    border-radius: 8px;
}

.bf-profile-header .bf-profile-account-btn {
    margin-left: auto;
}
.bf-profile-avatar-current .bf-avatar {
    border: 2px solid #00f0ff;
    box-shadow: 0 0 12px rgba(0,240,255,0.3);
    border-radius: 6px;
}
.bf-profile-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bf-profile-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.bf-profile-level {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    color: #00f0ff;
}
.bf-profile-avatar-section {
    margin-top: 16px;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}
.bf-profile-avatar-section h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: #00f0ff;
    margin: 0 0 12px;
}

/* Avatar grid */
.bf-avatar-grid {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #334 transparent;
}
.bf-avatar-cat-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 8px 0 4px;
}
.bf-avatar-cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.bf-avatar-pick {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 2px;
    transition: all 0.2s;
}
.bf-avatar-pick:hover {
    border-color: rgba(0,240,255,0.5);
    transform: scale(1.1);
}
.bf-avatar-pick.bf-avatar-selected {
    border-color: #00f0ff;
    box-shadow: 0 0 10px rgba(0,240,255,0.4);
}

/* Avatar in leaderboard rows */
.bf-lb-row .bf-avatar {
    margin-right: 4px;
    border-radius: 3px;
}

/* Avatar in friend cards */
.bf-friend-card .bf-avatar {
    border-radius: 4px;
    border: 1px solid rgba(0,240,255,0.2);
}


/* ============================================================
   NOTIFICATION BADGES (friend requests)
   ============================================================ */

.bf-notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ff3344;
    color: #fff;
    font-family: var(--bf-font-display);
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    line-height: 1;
    box-shadow: 0 0 8px rgba(255,51,68,0.6);
    animation: bf-badge-pulse 2s ease-in-out infinite;
}
.bf-header-btn {
    position: relative;
}
#bf-header-friends-badge {
    position: absolute;
    bottom: -5px;
    left: -5px;
}
.bf-hud-friends-btn {
    position: relative;
    overflow: visible;
}
.bf-hud-friends-badge {
    position: absolute;
    bottom: -4px;
    left: -4px;
}
.bf-tab-badge {
    margin-left: 6px;
    font-size: 0.6rem;
    min-width: 14px;
    height: 14px;
}
@keyframes bf-badge-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(255,51,68,0.5); }
    50% { box-shadow: 0 0 14px rgba(255,51,68,0.9); }
}


/* ============================================================
   SCORE WARNING (bottleneck)
   ============================================================ */

.bf-score-warning {
    color: #ffaa00;
    font-size: 1.1rem;
    cursor: help;
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    animation: bf-warning-pulse 1.5s ease-in-out infinite;
}
/* Bottleneck tooltip is now handled via JS (fixed position) */
.bf-bottleneck-tip {
    position: fixed;
    z-index: 100000;
    max-width: 340px;
    padding: 10px 14px;
    background: rgba(10,14,26,0.98);
    border: 1px solid #ffaa00;
    color: #ffaa00;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Rajdhani', sans-serif;
    line-height: 1.5;
    white-space: normal;
    box-shadow: 0 0 16px rgba(255,170,0,0.3);
    pointer-events: none;
}
@keyframes bf-warning-pulse {
    0%, 100% { text-shadow: 0 0 6px rgba(255,170,0,0.4); }
    50% { text-shadow: 0 0 14px rgba(255,170,0,0.9); }
}


/* ============================================================
   QUEST RECAP MODAL
   ============================================================ */

.bf-quest-clickable {
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.bf-quest-clickable:hover {
    border-color: var(--bf-primary) !important;
    box-shadow: 0 0 12px rgba(0,240,255,0.15);
}

.bf-quest-recap-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bf-fade-in 0.2s ease;
}

.bf-quest-recap-content {
    background: var(--bf-surface, #12162a);
    border: 1px solid var(--bf-border, rgba(0,240,255,0.15));
    border-radius: 12px;
    width: 90%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0,240,255,0.1);
}

.bf-quest-recap-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--bf-border, rgba(0,240,255,0.1));
}
.bf-quest-recap-header h3 {
    font-family: var(--bf-font-display);
    font-size: 1.3rem;
    color: var(--bf-primary);
    margin: 0 0 4px;
}
.bf-quest-recap-concept {
    font-size: 1.0rem;
    color: var(--bf-text-dim);
    font-style: italic;
}

.bf-quest-recap-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.bf-recap-line {
    font-size: 1.0rem;
    color: var(--bf-text, #c8d6e5);
    margin: 0 0 10px;
    line-height: 1.5;
    padding-left: 4px;
}
.bf-recap-line i {
    color: var(--bf-primary);
    margin-right: 6px;
    font-size: 0.9rem;
}

.bf-recap-subtitle {
    font-family: var(--bf-font-display);
    font-size: 1.05rem;
    color: #ffaa00;
    margin: 16px 0 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,170,0,0.15);
}
.bf-recap-subtitle i {
    margin-right: 6px;
}

.bf-recap-takeaway {
    font-size: 1.0rem;
    color: var(--bf-text, #c8d6e5);
    margin: 0 0 8px;
    line-height: 1.45;
    padding: 8px 10px;
    background: rgba(255,170,0,0.05);
    border-left: 2px solid rgba(255,170,0,0.3);
    border-radius: 0 6px 6px 0;
}
.bf-recap-takeaway strong {
    color: #ffcc44;
}

.bf-quest-recap-close {
    margin: 12px 20px 16px;
    align-self: flex-start;
}


/* ============================================================
   MISSION REPEAT BADGE & PENALTY
   ============================================================ */

.bf-mission-repeat-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--bf-font-body);
    font-size: 0.68rem;
    font-weight: 600;
    color: #ffaa00;
    background: rgba(255,170,0,0.1);
    border: 1px solid rgba(255,170,0,0.25);
    padding: 1px 7px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}

.bf-mission-penalty {
    color: #ff5566;
    font-weight: 700;
}

.bf-mission-rewards-base {
    font-size: 0.68rem;
    color: var(--bf-text-dim);
    font-style: italic;
    opacity: 0.7;
    margin-left: 4px;
}

/* ===== GEMS IN HEADER ===== */
.bf-hdr-gems {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #b44dff;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    margin-left: 10px;
}
.bf-hdr-gems i {
    font-size: 0.9rem;
    color: #b44dff;
}

/* ===== ACHIEVEMENTS MENU ===== */
.bf-achievements-overlay {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}
.bf-achievements-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.bf-achievements-header h2 {
    font-family: 'Orbitron', monospace;
    color: #00f0ff;
    font-size: 1.3rem;
    margin: 0;
}
.bf-achievements-summary {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bf-ach-count {
    font-family: 'Orbitron', monospace;
    font-size: 1.05rem;
    color: #aaa;
}
.bf-ach-gems {
    font-family: 'Orbitron', monospace;
    font-size: 1.05rem;
    color: #b44dff;
    font-weight: 700;
}
.bf-ach-claim-all {
    font-size: 0.85rem !important;
    padding: 5px 12px !important;
}
.bf-achievements-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.bf-ach-tab {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #aaa;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Rajdhani', sans-serif;
}
.bf-ach-tab:hover {
    background: rgba(0,240,255,0.1);
    color: #fff;
}
.bf-ach-tab.active {
    background: rgba(0,240,255,0.15);
    border-color: #00f0ff;
    color: #00f0ff;
}
.bf-achievements-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 4px;
}

/* Achievement Card */
.bf-ach-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.2s;
}
.bf-ach-card:hover {
    background: rgba(255,255,255,0.06);
}
.bf-ach-locked {
    opacity: 0.5;
}
.bf-ach-unlocked {
    border-color: #00f0ff;
    background: rgba(0,240,255,0.08);
    animation: bf-ach-glow 2s ease-in-out infinite;
}
@keyframes bf-ach-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(0,240,255,0); }
    50% { box-shadow: 0 0 12px rgba(0,240,255,0.3); }
}
.bf-ach-claimed {
    border-color: rgba(0,255,136,0.3);
    background: rgba(0,255,136,0.05);
}
.bf-ach-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    font-size: 1.5rem;
    flex-shrink: 0;
}
.bf-ach-locked .bf-ach-icon {
    color: #555;
}
.bf-ach-unlocked .bf-ach-icon {
    color: #00f0ff;
    background: rgba(0,240,255,0.15);
}
.bf-ach-claimed .bf-ach-icon {
    color: #00ff88;
    background: rgba(0,255,136,0.15);
}
.bf-ach-info {
    flex: 1;
    min-width: 0;
}
.bf-ach-name {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
}
.bf-ach-desc {
    font-size: 1.0rem;
    color: #888;
    margin-top: 2px;
}
.bf-ach-tier {
    font-size: 0.9rem;
    color: #f5a623;
}
.bf-ach-tier i {
    font-size: 0.8rem;
}
.bf-ach-reward {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}
.bf-ach-gems-value {
    font-family: 'Orbitron', monospace;
    font-size: 1.05rem;
    color: #b44dff;
    font-weight: 700;
}
.bf-ach-gems-value i {
    font-size: 1.0rem;
}
.bf-ach-claim-btn {
    font-size: 0.95rem !important;
    padding: 5px 12px !important;
    animation: bf-badge-pulse 1.5s ease-in-out infinite;
}
.bf-ach-claimed-label {
    font-size: 1.0rem;
    color: #00ff88;
}

/* Achievement Progress Bar */
.bf-ach-progress {
    height: 5px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    margin-top: 5px;
    overflow: hidden;
}
.bf-ach-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00f0ff, #b44dff);
    border-radius: 2px;
    transition: width 0.3s;
}
.bf-ach-progress-text {
    font-size: 0.9rem;
    color: #666;
    font-family: 'Orbitron', monospace;
}

/* Profile Top Row (succes | pseudo | gemmes) */
.bf-profile-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    overflow: visible;
    padding-bottom: 8px;
}

.bf-profile-top-row .bf-pause-title {
    margin: 0;
    flex: 1;
    text-align: center;
}

/* Profile Mid Row (stats + avatar side by side) */
.bf-profile-mid-row {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.bf-profile-mid-row .bf-profile-info {
    flex: 1;
}

.bf-profile-mid-row .bf-profile-avatar-section {
    margin-top: 0;
    width: 200px;
    flex-shrink: 0;
}

.bf-pause-stat-label i {
    margin-right: 4px;
    font-size: 0.85em;
    opacity: 0.7;
}

/* Profile Achievements Button Row (legacy) */
.bf-profile-achievements-btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 10px 0;
}
.bf-profile-achievements-btn {
    position: relative;
}
.bf-profile-gems {
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    color: #b44dff;
    font-weight: 700;
}
.bf-profile-achievements-btn {
    position: relative;
    overflow: visible !important;
}
.bf-ach-profile-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    z-index: 100;
    pointer-events: none;
}

/* Profile button notification badge */
.bf-hdr-profile-btn {
    position: relative;
}
#bf-hdr-achievement-badge {
    position: absolute;
    bottom: -5px;
    left: -5px;
    z-index: 10;
}

/* ===== FRIEND PROFILE MODAL ===== */
.bf-friend-profile-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: bf-menu-fadein 0.2s ease;
}
.bf-friend-profile-content {
    background: linear-gradient(135deg, #0d1117 0%, #151b28 100%);
    border: 1px solid rgba(0,240,255,0.2);
    border-radius: 12px;
    padding: 20px;
    width: 90%;
    max-width: 380px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.bf-friend-profile-close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.9rem;
}
.bf-friend-profile-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.bf-friend-profile-avatar {
    flex-shrink: 0;
}
.bf-friend-profile-pseudo {
    font-family: 'Orbitron', monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}
.bf-friend-profile-tag {
    font-size: 0.9rem;
    color: #888;
}
.bf-friend-profile-status {
    font-size: 0.85rem;
    color: #888;
    margin-top: 2px;
}
.bf-friend-profile-status.online {
    color: #00ff88;
}
.bf-friend-profile-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.bf-friend-profile-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.06);
}
.bf-friend-profile-stat i {
    font-size: 1rem;
    color: #00f0ff;
}
.bf-friend-profile-stat span {
    font-size: 0.95rem;
    color: #ccc;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
}
.bf-friend-profile-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.bf-friend-profile-actions .bf-btn {
    flex: 1;
}

/* ============================================================
   ADMIN PANEL STYLES
   ============================================================ */

/* --- Admin room minimap highlight --- */
.bf-mm-room--admin {
    border-color: #f44 !important;
    color: #f44 !important;
    text-shadow: 0 0 6px rgba(255, 68, 68, 0.6);
}
.bf-mm-room--admin.bf-mm-active {
    background: rgba(255, 68, 68, 0.2) !important;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.5) !important;
}

/* --- Admin panel overlay --- */
.bf-admin-panel {
    width: 600px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #1a0a0a 0%, #0a0e1a 100%);
    border: 1px solid rgba(255, 68, 68, 0.4);
    border-radius: 12px;
    overflow: hidden;
}
.bf-admin-panel--wide {
    width: 98vw;
    max-width: 1600px;
    max-height: 90vh;
}

.bf-admin-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: rgba(255, 68, 68, 0.1);
    border-bottom: 1px solid rgba(255, 68, 68, 0.3);
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #f44;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
}
.bf-admin-close {
    margin-left: auto;
    color: #888 !important;
    font-size: 1.3rem;
}
.bf-admin-close:hover {
    color: #f44 !important;
}

.bf-admin-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.bf-admin-hint {
    color: #999;
    font-size: 1rem;
    margin-bottom: 14px;
    font-family: 'Rajdhani', sans-serif;
}

.bf-admin-error {
    color: #f44;
    font-size: 1.05rem;
    text-align: center;
    padding: 20px;
}

/* --- Mini-games grid --- */
.bf-admin-mg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.bf-admin-mg-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 68, 68, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: #ccc;
    font-family: 'Rajdhani', sans-serif;
}
.bf-admin-mg-btn:hover {
    background: rgba(255, 68, 68, 0.15);
    border-color: rgba(255, 68, 68, 0.6);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 68, 68, 0.2);
}
.bf-admin-mg-btn i {
    font-size: 1.8rem;
    color: #f44;
}
.bf-admin-mg-name {
    font-weight: 700;
    font-size: 1.1rem;
}
.bf-admin-mg-desc {
    font-size: 0.95rem;
    color: #888;
    text-align: center;
    line-height: 1.3;
}
.bf-admin-mg-chapter {
    font-size: 1.05rem;
    font-weight: 700;
    color: #00f0ff;
    text-align: center;
    line-height: 1.3;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(0,240,255,0.2);
    width: 100%;
    text-shadow: 0 0 8px rgba(0,240,255,0.4);
}
.bf-admin-mg-chapter--none {
    color: #555;
    font-style: italic;
    font-weight: 400;
    font-size: 0.85rem;
    text-shadow: none;
}

/* --- Players table --- */
.bf-admin-players-loading {
    text-align: center;
    padding: 30px;
    color: #888;
    font-size: 0.9rem;
}

.bf-admin-players-count {
    color: #888;
    font-size: 1rem;
    margin-bottom: 10px;
    font-family: 'Rajdhani', sans-serif;
}

.bf-admin-players-table-wrap {
    overflow-x: auto;
}

.bf-admin-players-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
}
.bf-admin-players-table th {
    padding: 10px 12px;
    text-align: left;
    color: #f44;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 68, 68, 0.3);
    white-space: nowrap;
}
.bf-admin-players-table td {
    padding: 8px 12px;
    color: #ccc;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    white-space: nowrap;
}
.bf-admin-players-table tr:hover td {
    background: rgba(255, 68, 68, 0.06);
}

.bf-admin-gamertag {
    color: #0ff !important;
    font-weight: 600;
}

.bf-admin-input {
    width: 80px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}
.bf-admin-input:focus {
    outline: none;
    border-color: #f44;
    box-shadow: 0 0 6px rgba(255, 68, 68, 0.3);
}

.bf-admin-actions {
    display: flex;
    gap: 6px;
}

.bf-admin-save-btn,
.bf-admin-delete-btn {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.05rem;
    transition: all 0.2s;
    background: transparent;
}

.bf-admin-save-btn {
    color: #0f8;
    border-color: rgba(0, 255, 136, 0.3);
}
.bf-admin-save-btn:hover {
    background: rgba(0, 255, 136, 0.15);
    border-color: rgba(0, 255, 136, 0.6);
}

.bf-admin-delete-btn {
    color: #f44;
    border-color: rgba(255, 68, 68, 0.3);
}
.bf-admin-delete-btn:hover {
    background: rgba(255, 68, 68, 0.15);
    border-color: rgba(255, 68, 68, 0.6);
}

/* ========== VRAM SLIDER MINI-GAME ========== */
.bf-mg-vram-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: auto;
    max-width: 520px;
    margin: 0 auto;
    padding: 6px 0;
}

/* Question — prominent */
.bf-mg-vram-question {
    text-align: center;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(0,240,255,0.08), rgba(0,200,100,0.06));
    border: 2px solid rgba(0,240,255,0.3);
    border-radius: 12px;
    box-shadow: 0 0 16px rgba(0,240,255,0.1);
}
.bf-mg-vram-qnum {
    display: block;
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 6px;
}
.bf-mg-vram-qtext {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 0 6px rgba(0,240,255,0.2);
}

/* Main area: left controls | right visuals */
.bf-mg-vram-main {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* === LEFT column: slider vertical + val + button === */
.bf-mg-vram-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Row: labels + slider side by side */
.bf-mg-vram-slider-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    height: 180px;
}

.bf-mg-vram-steps {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    justify-content: space-between;
    padding: 4px 0;
}

.bf-mg-vram-slider-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 180px;
    position: relative;
}
.bf-mg-vram-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 170px;
    height: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    transform: rotate(-90deg);
    position: absolute;
}
.bf-mg-vram-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #0d1520 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='6' width='28' height='18' rx='3' fill='%231a2030' stroke='%2300f0ff' stroke-width='1.5'/%3E%3Ccircle cx='11' cy='15' r='5' fill='none' stroke='%2300f0ff' stroke-width='1' opacity='.6'/%3E%3Ccircle cx='22' cy='15' r='5' fill='none' stroke='%2300f0ff' stroke-width='1' opacity='.6'/%3E%3Cline x1='6' y1='15' x2='16' y2='15' stroke='%2300f0ff' stroke-width='.5' opacity='.3'/%3E%3Crect x='8' y='24' width='16' height='3' rx='1' fill='%23cc9900' opacity='.5'/%3E%3C/svg%3E") center/contain no-repeat;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0,240,255,0.5);
    border: 2px solid rgba(0,240,255,0.5);
    transform: rotate(90deg);
}
.bf-mg-vram-slider::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #0d1520 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='6' width='28' height='18' rx='3' fill='%231a2030' stroke='%2300f0ff' stroke-width='1.5'/%3E%3Ccircle cx='11' cy='15' r='5' fill='none' stroke='%2300f0ff' stroke-width='1' opacity='.6'/%3E%3Ccircle cx='22' cy='15' r='5' fill='none' stroke='%2300f0ff' stroke-width='1' opacity='.6'/%3E%3Cline x1='6' y1='15' x2='16' y2='15' stroke='%2300f0ff' stroke-width='.5' opacity='.3'/%3E%3Crect x='8' y='24' width='16' height='3' rx='1' fill='%23cc9900' opacity='.5'/%3E%3C/svg%3E") center/contain no-repeat;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(0,240,255,0.5);
    border: 2px solid rgba(0,240,255,0.5);
    transform: rotate(90deg);
}

.bf-mg-vram-gauge-val {
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 1.4rem;
    color: #0ff;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 0 12px rgba(0,240,255,0.6);
    padding: 4px 0;
}

.bf-mg-vram-validate {
    padding: 8px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0,240,255,0.2), rgba(0,200,100,0.2));
    border: 2px solid rgba(0,240,255,0.4);
    color: #0ff;
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    white-space: nowrap;
}
.bf-mg-vram-validate:hover {
    background: linear-gradient(135deg, rgba(0,240,255,0.35), rgba(0,200,100,0.35));
    border-color: rgba(0,240,255,0.7);
    box-shadow: 0 4px 16px rgba(0,240,255,0.3);
}

/* === RIGHT column: screen + price + GPU card === */
.bf-mg-vram-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* PC Screen */
.bf-mg-vram-screen-frame {
    width: 280px;
    height: 170px;
    border: 3px solid rgba(255,255,255,0.25);
    border-radius: 6px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.3);
}
.bf-mg-vram-screen-img {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    filter: blur(10px);
}
.bf-mg-vram-screen-img i { font-size: 2.8rem; }
.bf-mg-vram-screen-img span { font-size: 0.85rem; font-weight: 600; }

.bf-mg-vram-scene-office {
    background: linear-gradient(135deg, #1a2a4a, #2a3a5a, #1a3050);
    color: rgba(100,180,255,0.9);
}
.bf-mg-vram-scene-gaming {
    background: linear-gradient(135deg, #1a0a2e, #2d1b4e, #0a2020);
    color: rgba(0,255,200,0.9);
}
.bf-mg-vram-scene-video {
    background: linear-gradient(135deg, #2a1a0a, #3a2010, #1a1020);
    color: rgba(255,180,80,0.9);
}
.bf-mg-vram-scene-render3d {
    background: linear-gradient(135deg, #200a2a, #301040, #100a30);
    color: rgba(200,120,255,0.9);
}
.bf-mg-vram-scene-default {
    background: linear-gradient(135deg, #0a1a2a, #1a2a3a, #0a1020);
    color: rgba(150,200,255,0.9);
}

/* Price */
.bf-mg-vram-price {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    text-align: center;
    padding: 5px 12px;
    background: rgba(255,200,0,0.06);
    border: 1px solid rgba(255,200,0,0.15);
    border-radius: 8px;
}
.bf-mg-vram-price strong { color: #fc0; font-size: 1.1rem; }
.bf-mg-vram-price i { color: #fc0; margin-right: 4px; }

/* GPU card — looks like a real GPU */
.bf-mg-vram-gpu {
    width: 280px;
    background: linear-gradient(180deg, #1a1e2e 0%, #12151f 100%);
    border: 2px solid rgba(0,240,255,0.15);
    border-radius: 10px;
    padding: 10px 14px 6px;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.bf-mg-vram-gpu-fans {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 6px;
}
.bf-mg-vram-gpu-fan {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,240,255,0.05) 30%, rgba(255,255,255,0.03) 70%);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bf-mg-vram-gpu-fan i {
    font-size: 1.8rem;
    color: rgba(255,255,255,0.25);
    animation: bf-fan-spin 3s linear infinite;
    display: block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-align: center;
}
@keyframes bf-fan-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.bf-mg-vram-gpu-label {
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 0.75rem;
    color: rgba(0,240,255,0.5);
    text-align: center;
    letter-spacing: 3px;
    margin-bottom: 8px;
}
.bf-mg-vram-gpu-vram-bar {
    padding: 0 4px;
}
.bf-mg-vram-gauge {
    height: 14px;
    background: rgba(255,255,255,0.06);
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(0,240,255,0.12);
}
.bf-mg-vram-gauge-fill {
    height: 100%;
    background: linear-gradient(90deg, #0af, #0ff, #0f8);
    border-radius: 7px;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(0,240,255,0.4);
}
.bf-mg-vram-gpu-pcie {
    margin-top: 8px;
    height: 6px;
    background: linear-gradient(90deg, rgba(255,200,0,0.3), rgba(255,200,0,0.1));
    border-radius: 3px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

/* Feedback — full width below main */
.bf-mg-vram-feedback {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.4;
    animation: bf-vram-fb-in 0.3s ease;
}
.bf-mg-vram-fb-ok {
    background: rgba(0,255,136,0.1);
    border: 1px solid rgba(0,255,136,0.3);
    color: rgba(255,255,255,0.95);
}
.bf-mg-vram-fb-ok i { color: #0f8; margin-right: 6px; }

.bf-mg-vram-fb-toomuch {
    background: rgba(255,200,0,0.1);
    border: 1px solid rgba(255,200,0,0.3);
    color: rgba(255,255,255,0.95);
}
.bf-mg-vram-fb-toomuch i { color: #fc0; margin-right: 6px; }

.bf-mg-vram-fb-notenough {
    background: rgba(255,60,60,0.1);
    border: 1px solid rgba(255,60,60,0.3);
    color: rgba(255,255,255,0.95);
}
.bf-mg-vram-fb-notenough i { color: #f44; margin-right: 6px; }

@keyframes bf-vram-fb-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 500px) {
    .bf-mg-vram-main { flex-direction: column; align-items: center; }
    .bf-mg-vram-left { flex-direction: row; height: auto; min-width: unset; }
    .bf-mg-vram-slider-wrap { height: auto; width: 100%; }
    .bf-mg-vram-slider {
        -webkit-appearance: none;
        appearance: none;
        writing-mode: horizontal-tb;
        direction: ltr;
        width: 100%;
        height: 8px;
    }
    .bf-mg-vram-steps { flex-direction: row; height: auto; }
    .bf-mg-vram-screen-frame { width: 240px; height: 145px; }
}

/* ========== FRONT PANEL MINI-GAME ========== */
.bf-mg-fp-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 560px;
    margin: 0 auto;
    padding: 6px 0;
    position: relative;
}

.bf-mg-fp-instr {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.75);
    text-align: center;
    padding: 10px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    line-height: 1.5;
}
.bf-mg-fp-instr i { color: #0ff; margin-right: 4px; }
.bf-mg-fp-instr strong { color: #fc0; }

/* Board area: pin header + front panel box */
.bf-mg-fp-board-area {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    min-height: 220px;
    position: relative;
}

/* ---- Full motherboard schematic ---- */
.bf-mg-fp-mobo {
    flex: 1;
    min-height: 240px;
    position: relative;
    /* PCB texture */
    background:
        repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(0,180,80,0.03) 14px, rgba(0,180,80,0.03) 15px),
        repeating-linear-gradient(90deg, transparent, transparent 14px, rgba(0,180,80,0.03) 14px, rgba(0,180,80,0.03) 15px),
        repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(180,140,60,0.02) 30px, rgba(180,140,60,0.02) 31px),
        linear-gradient(160deg, #0b1a12 0%, #071510 50%, #0a1810 100%);
    border: 2px solid rgba(0,140,70,0.25);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.4), 0 2px 10px rgba(0,0,0,0.3);
}
/* 4 mounting holes */
.bf-mg-fp-mobo::before,
.bf-mg-fp-mobo::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid rgba(180,140,60,0.2);
    background: rgba(0,0,0,0.3);
}
.bf-mg-fp-mobo::before { top: 5px; left: 5px; }
.bf-mg-fp-mobo::after { top: 5px; right: 5px; }

/* --- Decorative motherboard components (absolute positioned) --- */

/* I/O panel (top-left) */
.bf-mg-fp-mobo-io {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 18px;
    height: 70px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bf-mg-fp-mobo-io span {
    font-size: 0.4rem;
    color: rgba(255,255,255,0.2);
    font-family: monospace;
    writing-mode: vertical-lr;
    letter-spacing: 1px;
}

/* CPU socket (top-center) */
.bf-mg-fp-mobo-cpu {
    position: absolute;
    top: 14px;
    left: 36px;
    width: 58px;
    height: 58px;
    background: rgba(255,255,255,0.02);
    border: 1.5px solid rgba(180,140,60,0.15);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bf-mg-fp-mobo-cpu::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(180,140,60,0.1);
    border-radius: 1px;
}
.bf-mg-fp-mobo-cpu span {
    font-size: 0.5rem;
    color: rgba(255,255,255,0.2);
    font-family: monospace;
}

/* RAM slots (top-right) */
.bf-mg-fp-mobo-ram {
    position: absolute;
    top: 10px;
    right: 14px;
    display: flex;
    gap: 4px;
}
.bf-mg-fp-mobo-ram-slot {
    width: 6px;
    height: 70px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(100,180,255,0.12);
    border-radius: 1px;
}

/* ATX 24-pin (right edge) */
.bf-mg-fp-mobo-atx24 {
    position: absolute;
    top: 10px;
    right: 2px;
    width: 10px;
    height: 50px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bf-mg-fp-mobo-atx24 span {
    font-size: 0.3rem;
    color: rgba(255,255,255,0.15);
    font-family: monospace;
    writing-mode: vertical-lr;
}

/* PCIe x16 slot (middle-left) */
.bf-mg-fp-mobo-pcie {
    position: absolute;
    top: 110px;
    left: 16px;
    width: 120px;
    height: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(100,180,255,0.1);
    border-radius: 1px;
    display: flex;
    align-items: center;
    padding-left: 4px;
}
.bf-mg-fp-mobo-pcie span {
    font-size: 0.35rem;
    color: rgba(255,255,255,0.15);
    font-family: monospace;
}

/* M.2 slot (middle) */
.bf-mg-fp-mobo-m2 {
    position: absolute;
    top: 90px;
    left: 50px;
    width: 50px;
    height: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(180,140,60,0.1);
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bf-mg-fp-mobo-m2 span {
    font-size: 0.3rem;
    color: rgba(255,255,255,0.15);
    font-family: monospace;
}

/* Chipset (center-bottom) */
.bf-mg-fp-mobo-chipset {
    position: absolute;
    bottom: 50px;
    left: 50px;
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(180,140,60,0.12);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bf-mg-fp-mobo-chipset span {
    font-size: 0.3rem;
    color: rgba(255,255,255,0.15);
    font-family: monospace;
}

/* SATA ports (bottom-left) */
.bf-mg-fp-mobo-sata {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    gap: 3px;
}
.bf-mg-fp-mobo-sata div {
    width: 10px;
    height: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,100,50,0.12);
    border-radius: 1px;
}

/* ---- Highlighted FRONT PANEL zone (bottom-right of mobo) ---- */
.bf-mg-fp-zone {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 4px;
    border: 2px solid rgba(0,240,255,0.5);
    border-radius: 4px;
    background: rgba(0,240,255,0.04);
    box-shadow: 0 0 14px rgba(0,240,255,0.15), inset 0 0 10px rgba(0,240,255,0.05);
    animation: bf-fp-glow 2s ease-in-out infinite alternate;
}
@keyframes bf-fp-glow {
    from { box-shadow: 0 0 10px rgba(0,240,255,0.1), inset 0 0 8px rgba(0,240,255,0.03); }
    to   { box-shadow: 0 0 18px rgba(0,240,255,0.25), inset 0 0 12px rgba(0,240,255,0.06); }
}
.bf-mg-fp-zone-label {
    font-size: 0.65rem;
    font-family: monospace;
    color: rgba(0,240,255,0.7);
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: 1.5px;
    font-weight: 700;
}

/* Pin grid inside the highlighted zone */
.bf-mg-fp-pin-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
}

.bf-mg-fp-pin-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 6px;
    background: rgba(0,0,0,0.3);
    border: 1.5px dashed rgba(180,140,60,0.2);
    border-radius: 2px;
    min-height: 42px;
    min-width: 56px;
    transition: all 0.3s;
}

.bf-mg-fp-pin-label {
    font-size: 0.72rem;
    font-family: monospace;
    color: rgba(255,255,255,0.75);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.bf-mg-fp-pin-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,170,80,0.4) 0%, rgba(200,170,80,0.15) 100%);
    border: 1px solid rgba(200,170,80,0.3);
    box-shadow: 0 0 3px rgba(200,170,80,0.15);
}
.bf-mg-fp-pin-filled {
    border-color: rgba(0,255,136,0.5) !important;
    border-style: solid !important;
    background: rgba(0,255,136,0.06);
}
.bf-mg-fp-pin-filled .bf-mg-fp-pin-dot {
    background: #0f8;
    box-shadow: 0 0 6px rgba(0,255,136,0.5);
}
.bf-mg-fp-pin-wrong {
    border-color: rgba(255,68,68,0.6) !important;
    background: rgba(255,68,68,0.08);
    animation: bf-fp-shake 0.4s ease;
}
@keyframes bf-fp-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Front panel box */
.bf-mg-fp-box {
    width: 90px;
    background: linear-gradient(180deg, #1a1e2e 0%, #12151f 100%);
    border: 2px solid rgba(255,200,0,0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bf-mg-fp-box-label {
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 0.7rem;
    color: rgba(255,200,0,0.6);
    text-align: center;
    line-height: 1.6;
    letter-spacing: 1px;
}
.bf-mg-fp-box-label i {
    font-size: 1.4rem;
    color: rgba(255,200,0,0.4);
    display: block;
    margin-bottom: 4px;
}

/* Connector buttons (draggable) */
.bf-mg-fp-connectors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    width: 100%;
}
.bf-mg-fp-conn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: transform 0.15s, box-shadow 0.15s;
    z-index: 5;
}
.bf-mg-fp-conn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.bf-mg-fp-conn-label {
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.bf-mg-fp-conn-dragging {
    cursor: grabbing;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    transform: scale(1.1);
    opacity: 0.9;
}
.bf-mg-fp-conn-placed {
    cursor: default;
    opacity: 0.7;
    pointer-events: none;
    border-color: rgba(0,255,136,0.4);
}

/* Feedback */
.bf-mg-fp-feedback {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: center;
    animation: bf-vram-fb-in 0.3s ease;
}
.bf-mg-fp-fb-ok {
    background: rgba(0,255,136,0.1);
    border: 1px solid rgba(0,255,136,0.3);
    color: rgba(255,255,255,0.95);
}
.bf-mg-fp-fb-ok i { color: #0f8; margin-right: 6px; }
.bf-mg-fp-fb-err {
    background: rgba(255,60,60,0.1);
    border: 1px solid rgba(255,60,60,0.3);
    color: rgba(255,255,255,0.95);
}
.bf-mg-fp-fb-err i { color: #f44; margin-right: 6px; }

/* ============================================================
   STORAGE MINI-GAME — Drag data into HDD / SSD SATA / NVMe
   ============================================================ */
.bf-mg-storage-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 680px;
    margin: 0 auto;
    padding: 6px 0;
}
.bf-mg-storage-instr {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.75);
    text-align: center;
    padding: 10px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    line-height: 1.5;
}
.bf-mg-storage-instr i { color: #0ff; margin-right: 4px; }

/* --- 3 storage zones row --- */
.bf-mg-storage-zones {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
}
.bf-mg-storage-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    border: 2px dashed rgba(255,255,255,0.1);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    transition: border-color 0.25s, background 0.25s;
    min-height: 180px;
}
.bf-mg-storage-zone--hover {
    border-color: rgba(0,240,255,0.5) !important;
    background: rgba(0,240,255,0.04);
}

/* Device visuals — HDD = big square, SATA = slim rectangle, NVMe = small stick */
.bf-mg-storage-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    position: relative;
}
.bf-mg-storage-device--hdd {
    width: 95px;
    height: 80px;
    background: linear-gradient(145deg, #2a2d3a 0%, #1e2030 100%);
    border: 1.5px solid rgba(180,180,200,0.2);
    border-radius: 4px;
}
.bf-mg-storage-device--hdd::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(180,180,200,0.12);
    background: rgba(180,180,200,0.04);
}
.bf-mg-storage-device--sata {
    width: 95px;
    height: 58px;
    background: linear-gradient(145deg, #1c2836 0%, #141e2a 100%);
    border: 1.5px solid rgba(100,180,255,0.2);
    border-radius: 4px;
}
.bf-mg-storage-device--nvme {
    width: 105px;
    height: 28px;
    background: linear-gradient(90deg, #1a2a1c 0%, #0e1a12 100%);
    border: 1.5px solid rgba(0,220,120,0.25);
    border-radius: 3px;
}
.bf-mg-storage-device--nvme::before {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 14px;
    background: rgba(0,220,120,0.08);
    border: 1px solid rgba(0,220,120,0.15);
    border-radius: 1px;
}
.bf-mg-storage-device-icon {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.4);
    z-index: 1;
}
.bf-mg-storage-device--nvme .bf-mg-storage-device-icon { font-size: 1rem; }
.bf-mg-storage-device-name {
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    margin-top: 2px;
    z-index: 1;
}
.bf-mg-storage-device--nvme .bf-mg-storage-device-name { display: none; }

/* Subtitle under each device */
.bf-mg-storage-subtitle {
    font-size: 0.88rem;
    text-align: center;
    line-height: 1.45;
    padding: 0 4px;
    color: rgba(255,255,255,0.6);
}
.bf-mg-storage-zone--hdd .bf-mg-storage-subtitle { color: rgba(180,180,200,0.8); }
.bf-mg-storage-zone--sata .bf-mg-storage-subtitle { color: rgba(100,180,255,0.8); }
.bf-mg-storage-zone--nvme .bf-mg-storage-subtitle { color: rgba(0,220,120,0.8); }

/* Zone colors */
.bf-mg-storage-zone--hdd  { border-color: rgba(180,180,200,0.15); }
.bf-mg-storage-zone--sata { border-color: rgba(100,180,255,0.15); }
.bf-mg-storage-zone--nvme { border-color: rgba(0,220,120,0.15); }

/* Drop area inside zone */
.bf-mg-storage-drop {
    width: 100%;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Item count */
.bf-mg-storage-count {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    font-family: monospace;
}

/* Placed tags inside zones */
.bf-mg-storage-tag {
    font-size: 0.82rem;
    padding: 4px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.bf-mg-storage-tag--ok {
    background: rgba(0,255,136,0.06);
    border: 1px solid rgba(0,255,136,0.2);
    color: rgba(255,255,255,0.85);
}
.bf-mg-storage-tag--ok i { color: #0f8; font-size: 0.75rem; }

/* --- Data items row (draggable) --- */
.bf-mg-storage-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    width: 100%;
}
.bf-mg-storage-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.3s;
}
.bf-mg-storage-item i {
    font-size: 1.25rem;
    color: rgba(255,200,0,0.7);
}
.bf-mg-storage-item span {
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}
.bf-mg-storage-item small {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    font-family: monospace;
    margin-left: 3px;
}
.bf-mg-storage-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.bf-mg-storage-item--dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.bf-mg-storage-item--placed {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
    border-color: rgba(0,255,136,0.2);
}
.bf-mg-storage-item--wrong {
    animation: bf-fp-shake 0.4s ease;
    border-color: rgba(255,68,68,0.5);
}

/* Feedback */
.bf-mg-storage-feedback {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1.05rem;
    line-height: 1.4;
    text-align: center;
    animation: bf-vram-fb-in 0.3s ease;
}
.bf-mg-storage-fb-ok {
    background: rgba(0,255,136,0.1);
    border: 1px solid rgba(0,255,136,0.3);
    color: rgba(255,255,255,0.95);
}
.bf-mg-storage-fb-ok i { color: #0f8; margin-right: 6px; }
.bf-mg-storage-fb-err {
    background: rgba(255,60,60,0.1);
    border: 1px solid rgba(255,60,60,0.3);
    color: rgba(255,255,255,0.95);
}
.bf-mg-storage-fb-err i { color: #f44; margin-right: 6px; }

/* ============================================================
   PSU MINI-GAME — Match power supplies to PCs
   ============================================================ */
.bf-mg-psu-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 780px;
    margin: 0 auto;
    padding: 6px 0;
}
.bf-mg-psu-instr {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.8);
    text-align: center;
    padding: 12px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    line-height: 1.5;
}
.bf-mg-psu-instr i { color: #0ff; margin-right: 5px; }
.bf-mg-psu-instr strong { color: #fc0; }

/* --- 4 PCs row --- */
.bf-mg-psu-pcs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
}
.bf-mg-psu-pc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    background: rgba(255,255,255,0.02);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    transition: border-color 0.3s;
}

/* PC visual — monitor + tower */
.bf-mg-psu-pc-visual {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}
.bf-mg-psu-monitor {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.bf-mg-psu-screen {
    width: 48px;
    height: 34px;
    background: linear-gradient(145deg, #0d1520 0%, #0a1018 100%);
    border: 2px solid rgba(100,180,255,0.2);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bf-mg-psu-screen i {
    font-size: 1.1rem;
    color: rgba(100,180,255,0.3);
}
.bf-mg-psu-stand {
    width: 16px;
    height: 4px;
    background: rgba(100,180,255,0.12);
    border-radius: 0 0 2px 2px;
}
.bf-mg-psu-tower {
    width: 20px;
    height: 42px;
    background: linear-gradient(180deg, #1e2230 0%, #161a28 100%);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 2px;
    position: relative;
}
.bf-mg-psu-tower-front {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.bf-mg-psu-tower-led {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #0f8;
    box-shadow: 0 0 4px rgba(0,255,136,0.5);
}
.bf-mg-psu-tower-btn {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
}

/* PC name */
.bf-mg-psu-pc-name {
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    text-align: center;
}

/* Power breakdown */
.bf-mg-psu-breakdown {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bf-mg-psu-comp-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 4px;
    font-size: 0.95rem;
}
.bf-mg-psu-comp-name {
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    gap: 5px;
}
.bf-mg-psu-comp-name i {
    font-size: 0.95rem;
    color: rgba(0,240,255,0.6);
}
.bf-mg-psu-comp-watts {
    font-family: monospace;
    font-weight: 700;
    color: rgba(255,200,0,0.85);
    font-size: 1rem;
}

/* Total line */
.bf-mg-psu-total {
    width: 100%;
    text-align: center;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.9);
    padding: 8px 4px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.bf-mg-psu-total strong {
    color: #fc0;
    font-size: 1.15rem;
}

/* Drop slot */
.bf-mg-psu-slot {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px dashed rgba(255,200,0,0.2);
    border-radius: 8px;
    background: rgba(255,200,0,0.02);
    font-size: 0.88rem;
    color: rgba(255,255,255,0.35);
    transition: all 0.25s;
}
.bf-mg-psu-slot i { color: rgba(255,200,0,0.3); font-size: 1.1rem; }
.bf-mg-psu-slot--hover {
    border-color: rgba(255,200,0,0.6) !important;
    background: rgba(255,200,0,0.06);
    color: rgba(255,255,255,0.6);
}
.bf-mg-psu-slot--filled {
    border-style: solid;
    border-color: rgba(0,255,136,0.4);
    background: rgba(0,255,136,0.04);
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
}
.bf-mg-psu-slot--filled i { color: #0f8; }
.bf-mg-psu-slot--filled strong { color: #0f8; }
.bf-mg-psu-slot--filled span { color: rgba(255,255,255,0.5); font-size: 0.82rem; margin-left: 4px; }

/* --- PSU buttons row (draggable) --- */
.bf-mg-psu-psus {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    width: 100%;
}
.bf-mg-psu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(145deg, rgba(255,200,0,0.06) 0%, rgba(255,200,0,0.02) 100%);
    border: 2px solid rgba(255,200,0,0.2);
    border-radius: 8px;
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.3s;
}
.bf-mg-psu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.bf-mg-psu-btn-icon {
    font-size: 1.4rem;
    color: rgba(255,200,0,0.6);
}
.bf-mg-psu-btn-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.bf-mg-psu-btn-name {
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}
.bf-mg-psu-btn-watts {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: monospace;
    color: rgba(255,200,0,0.9);
}
.bf-mg-psu-btn--dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.bf-mg-psu-btn--placed {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
    border-color: rgba(0,255,136,0.2);
}
.bf-mg-psu-btn--wrong {
    animation: bf-fp-shake 0.4s ease;
    border-color: rgba(255,68,68,0.5);
}

/* Feedback */
.bf-mg-psu-feedback {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1.05rem;
    line-height: 1.45;
    text-align: center;
    animation: bf-vram-fb-in 0.3s ease;
}
.bf-mg-psu-fb-ok {
    background: rgba(0,255,136,0.1);
    border: 1px solid rgba(0,255,136,0.3);
    color: rgba(255,255,255,0.95);
}
.bf-mg-psu-fb-ok i { color: #0f8; margin-right: 6px; }
.bf-mg-psu-fb-err {
    background: rgba(255,60,60,0.1);
    border: 1px solid rgba(255,60,60,0.3);
    color: rgba(255,255,255,0.95);
}
.bf-mg-psu-fb-err i { color: #f44; margin-right: 6px; }

/* ============================================================
   AIRFLOW MINI-GAME — Side-view PC case fan placement
   ============================================================ */
.bf-mg-airflow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 750px;
    margin: 0 auto;
    padding: 6px 0;
}
.bf-mg-airflow-instr {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.85);
    text-align: center;
    padding: 14px 20px;
    background: rgba(10,14,26,0.92);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    line-height: 1.5;
    position: relative;
    z-index: 10;
}
.bf-mg-airflow-instr i { color: #00ccff; margin-right: 5px; }
.bf-mg-airflow-instr strong { color: #00f0ff; }
.bf-mg-airflow-info-bar {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.bf-mg-airflow-counter,
.bf-mg-airflow-money {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.75);
}
.bf-mg-airflow-counter i { color: #00ccff; margin-right: 4px; }
.bf-mg-airflow-counter strong { color: #00f0ff; }
.bf-mg-airflow-money i { color: #ffcc00; margin-right: 4px; }
.bf-mg-airflow-money strong { color: #ffcc00; }

/* --- Case side-view --- */
.bf-mg-airflow-case {
    position: relative;
    width: 100%;
    max-width: 620px;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, rgba(10,14,30,0.95), rgba(20,28,50,0.9));
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0,200,255,0.08), inset 0 0 40px rgba(0,0,0,0.4);
    overflow: visible;
}
.bf-mg-airflow-canvas {
    position: absolute;
    pointer-events: none;
    z-index: 5;
}
.bf-mg-airflow-case-label {
    position: absolute;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.3);
    pointer-events: none;
}
.bf-mg-airflow-case-label--front { right: -26px; top: 50%; transform: translateY(-50%) rotate(90deg); }
.bf-mg-airflow-case-label--rear { left: -26px; top: 50%; transform: translateY(-50%) rotate(-90deg); }
.bf-mg-airflow-case-label--top { top: -22px; left: 50%; transform: translateX(-50%); }
.bf-mg-airflow-case-label--bottom { bottom: -22px; left: 50%; transform: translateX(-50%); }

/* Ventilation grilles */
.bf-mg-airflow-grille {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.bf-mg-airflow-grille--front {
    right: 0; top: 8%; width: 4px; height: 84%;
    background: repeating-linear-gradient(
      180deg,
      rgba(0,200,255,0.25) 0px, rgba(0,200,255,0.25) 3px,
      transparent 3px, transparent 7px
    );
    border-left: 1px solid rgba(0,200,255,0.15);
    border-radius: 0 12px 12px 0;
}
.bf-mg-airflow-grille--rear {
    left: 0; top: 8%; width: 4px; height: 50%;
    background: repeating-linear-gradient(
      180deg,
      rgba(255,100,60,0.25) 0px, rgba(255,100,60,0.25) 3px,
      transparent 3px, transparent 7px
    );
    border-right: 1px solid rgba(255,100,60,0.15);
    border-radius: 12px 0 0 0;
}
.bf-mg-airflow-grille--top {
    top: 0; left: 15%; height: 4px; width: 70%;
    background: repeating-linear-gradient(
      90deg,
      rgba(255,100,60,0.2) 0px, rgba(255,100,60,0.2) 3px,
      transparent 3px, transparent 7px
    );
    border-bottom: 1px solid rgba(255,100,60,0.12);
    border-radius: 12px 12px 0 0;
}
.bf-mg-airflow-grille--bottom {
    bottom: 0; right: 8%; height: 4px; width: 55%;
    background: repeating-linear-gradient(
      90deg,
      rgba(0,200,255,0.2) 0px, rgba(0,200,255,0.2) 3px,
      transparent 3px, transparent 7px
    );
    border-top: 1px solid rgba(0,200,255,0.12);
    border-radius: 0 0 12px 0;
}
/* Solid panel (left side = rear bottom, no airflow) */
.bf-mg-airflow-panel--right {
    position: absolute;
    left: 0; bottom: 0;
    width: 4px; height: 42%;
    background: rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.08);
    pointer-events: none;
    border-radius: 0 0 0 12px;
}

/* Components inside case */
.bf-mg-airflow-comp {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    transform: translate(-50%, -50%);
    transition: border-color 0.4s, box-shadow 0.4s;
    z-index: 2;
}
.bf-mg-airflow-comp i {
    font-size: 2.2rem;
    color: rgba(255,255,255,0.5);
    transition: color 0.4s;
}
.bf-mg-airflow-comp-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
}
.bf-mg-airflow-comp-temp {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: monospace;
    min-height: 1.2em;
}

/* GPU — horizontal (like a real GPU mounted horizontally) */
.bf-mg-airflow-comp--gpu {
    flex-direction: row;
    gap: 10px;
    padding: 8px 22px;
    min-width: 180px;
    border-radius: 6px;
}
.bf-mg-airflow-comp--gpu i { font-size: 2rem; }
.bf-mg-airflow-comp--gpu .bf-mg-airflow-comp-name,
.bf-mg-airflow-comp--gpu .bf-mg-airflow-comp-temp {
    text-align: left;
}

/* CPU — square shape, icon well inside */
.bf-mg-airflow-comp--cpu {
    width: 88px;
    height: 88px;
    border-radius: 6px;
    padding: 6px;
    justify-content: center;
    overflow: hidden;
}
.bf-mg-airflow-comp--cpu i { font-size: 1.8rem; }
.bf-mg-airflow-comp--cpu .bf-mg-airflow-comp-name { font-size: 0.78rem; }
.bf-mg-airflow-comp--cpu .bf-mg-airflow-comp-temp { font-size: 0.95rem; }

/* RAM — tall narrow barrettes on the left */
.bf-mg-airflow-comp--ram {
    padding: 10px 4px;
    border-radius: 4px;
    min-height: 70px;
    width: 38px;
    gap: 1px;
}
.bf-mg-airflow-comp--ram i { font-size: 1.4rem; }
.bf-mg-airflow-comp--ram .bf-mg-airflow-comp-name { font-size: 0.72rem; }

/* CPU Cooler (ventirad) */
.bf-mg-airflow-cooler {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    z-index: 3;
    pointer-events: none;
}
.bf-mg-airflow-cooler-fins {
    position: absolute;
    inset: 4px;
    border-radius: 6px;
    background: repeating-linear-gradient(
      0deg,
      rgba(180,180,200,0.15) 0px, rgba(180,180,200,0.15) 2px,
      transparent 2px, transparent 5px
    );
    border: 1px solid rgba(180,180,200,0.2);
}
.bf-mg-airflow-cooler-fan {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.6rem;
    color: rgba(255,255,255,0.25);
    transition: color 0.3s;
}
.bf-mg-airflow-cooler--active .bf-mg-airflow-cooler-fan {
    color: rgba(0,200,255,0.6);
    animation: bf-cooler-spin 0.8s linear infinite;
}
@keyframes bf-cooler-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
.bf-mg-airflow-cooler-arrows {
    position: absolute;
    inset: -8px;
    opacity: 0;
    transition: opacity 0.3s;
}
.bf-mg-airflow-cooler--active .bf-mg-airflow-cooler-arrows {
    opacity: 1;
}
.bf-mg-airflow-cooler-arrow {
    position: absolute;
    font-size: 0.7rem;
    color: rgba(0,200,255,0.5);
}
.bf-mg-airflow-cooler-arrow--left {
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
}
.bf-mg-airflow-cooler-arrow--right {
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
}
.bf-mg-airflow-cooler-arrow--up {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}

/* Simulation warning tooltip */
.bf-mg-airflow-sim-warn {
    position: fixed;
    z-index: 100000;
    background: rgba(20,15,30,0.95);
    border: 1px solid rgba(255,170,0,0.5);
    color: #ffcc44;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    animation: bf-sim-warn-fade 1.8s ease-out forwards;
}
@keyframes bf-sim-warn-fade {
    0% { opacity: 0; transform: translateY(4px); }
    15% { opacity: 1; transform: translateY(0); }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

/* PSU decorative */
.bf-mg-airflow-psu {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22%;
    height: 20%;
    background: linear-gradient(135deg, #1a1a2e, #2a2a3e);
    border-top: 2px solid rgba(255,255,255,0.25);
    border-right: 2px solid rgba(255,255,255,0.25);
    border-bottom: none;
    border-left: none;
    border-radius: 0 6px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.6), 0 0 6px rgba(255,255,255,0.05);
}
.bf-mg-airflow-psu span {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
}

/* Fan slots */
.bf-mg-airflow-slot {
    position: absolute;
    width: 56px;
    height: 56px;
    border: 2px dashed rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    z-index: 3;
}
.bf-mg-airflow-slot:hover {
    border-color: rgba(0,200,255,0.5);
    background: rgba(0,200,255,0.06);
}
.bf-mg-airflow-slot--hover {
    border-color: rgba(0,255,136,0.6) !important;
    background: rgba(0,255,136,0.1) !important;
    box-shadow: 0 0 14px rgba(0,255,136,0.25);
}
.bf-mg-airflow-slot--filled {
    border-style: solid;
    border-color: rgba(0,200,255,0.4);
    background: rgba(0,20,40,0.6);
    cursor: grab;
}
.bf-mg-airflow-slot--filled:active { cursor: grabbing; }
.bf-mg-airflow-slot-plus {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
}

/* Fan icon inside slot */
.bf-mg-airflow-fan-icon {
    font-size: 1.8rem;
    color: #00ccff;
    animation: bf-cooling-spin 1.5s linear infinite;
    display: block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-align: center;
}

/* Arrow showing air direction on fan slot */
.bf-mg-airflow-arrow {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform-origin: center;
    margin-left: -9px;
}
.bf-mg-airflow-arrow i {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.6);
    transition: color 0.3s;
}

/* Flip button */
.bf-mg-airflow-flip-btn {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(0,200,255,0.5);
    background: rgba(0,20,40,0.9);
    color: #00ccff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    z-index: 4;
    transition: background 0.2s, transform 0.15s;
}
.bf-mg-airflow-flip-btn:hover {
    background: rgba(0,200,255,0.25);
    transform: scale(1.1);
}
.bf-mg-airflow-remove-btn {
    position: absolute;
    top: -16px;
    left: -16px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255,60,60,0.6);
    background: rgba(40,0,0,0.9);
    color: #ff4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    z-index: 4;
    transition: background 0.2s, transform 0.15s;
}
.bf-mg-airflow-remove-btn:hover {
    background: rgba(255,60,60,0.3);
    transform: scale(1.1);
}

/* --- Fan tray (below the case) --- */
.bf-mg-airflow-tray {
    width: 100%;
    max-width: 620px;
    text-align: center;
}
.bf-mg-airflow-tray-label {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
}
.bf-mg-airflow-tray-label i { margin-right: 5px; color: #00ccff; }
.bf-mg-airflow-tray-fans {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 60px;
}
.bf-mg-airflow-tray-fan {
    width: 54px;
    height: 54px;
    border: 2px solid rgba(0,200,255,0.35);
    border-radius: 50%;
    background: rgba(0,20,40,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.bf-mg-airflow-tray-fan:hover {
    border-color: rgba(0,200,255,0.7);
    transform: scale(1.08);
    box-shadow: 0 0 12px rgba(0,200,255,0.2);
}
.bf-mg-airflow-tray-fan:active { cursor: grabbing; }
.bf-mg-airflow-tray-fan i {
    font-size: 1.6rem;
    color: #00ccff;
}
.bf-mg-airflow-tray-fan--dragging {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.8;
    width: 54px;
    height: 54px;
    border: 2px solid rgba(0,200,255,0.6);
    border-radius: 50%;
    background: rgba(0,20,40,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bf-mg-airflow-tray-fan--dragging i {
    font-size: 1.6rem;
    color: #00ccff;
}

/* Sim button active state (pause mode) */
.bf-mg-airflow-sim-btn--active {
    background: rgba(255,170,0,0.15) !important;
    border-color: rgba(255,170,0,0.5) !important;
    color: #ffaa00 !important;
}
.bf-mg-airflow-sim-btn--active:hover {
    background: rgba(255,170,0,0.25) !important;
}

/* Buttons row */
.bf-mg-airflow-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.bf-mg-airflow-sim-btn,
.bf-mg-airflow-val-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 12px 26px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.bf-mg-airflow-sim-btn {
    background: rgba(0,200,255,0.12);
    border-color: rgba(0,200,255,0.4);
    color: #00ccff;
}
.bf-mg-airflow-sim-btn:hover { background: rgba(0,200,255,0.22); transform: translateY(-1px); }
.bf-mg-airflow-val-btn {
    background: rgba(0,255,136,0.12);
    border-color: rgba(0,255,136,0.4);
    color: #00ff88;
}
.bf-mg-airflow-val-btn:hover { background: rgba(0,255,136,0.22); transform: translateY(-1px); }

/* Feedback panel (legacy, hidden) */
.bf-mg-airflow-feedback {
    display: none !important;
}

/* Modal overlay */
.bf-mg-airflow-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0px);
    transition: background 0.35s, backdrop-filter 0.35s;
    padding: 20px;
}
.bf-mg-airflow-modal-overlay--visible {
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
}
.bf-mg-airflow-modal {
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px 24px;
    background: linear-gradient(135deg, rgba(10,14,26,0.97), rgba(15,20,35,0.97));
    border: 1px solid rgba(0,240,255,0.25);
    border-radius: 14px;
    box-shadow: 0 0 40px rgba(0,240,255,0.1), 0 8px 32px rgba(0,0,0,0.5);
    transform: scale(0.85) translateY(30px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), opacity 0.3s;
}
.bf-mg-airflow-modal-overlay--visible .bf-mg-airflow-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.bf-mg-airflow-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    font-family: 'Orbitron', sans-serif;
}
.bf-mg-airflow-modal-header--success span { color: #00ff88; }
.bf-mg-airflow-modal-header--fail span { color: #ff6644; }

/* Schema for ideal placement */
.bf-mg-airflow-schema-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    margin: 16px 0 8px;
    text-align: center;
}
.bf-mg-airflow-schema {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.bf-mg-airflow-schema-svg {
    width: 100%;
    max-width: 420px;
    height: auto;
}
.bf-mg-airflow-fb-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    text-align: center;
    margin-bottom: 12px;
}
.bf-mg-airflow-fb-title i { color: #00f0ff; margin-right: 6px; }
.bf-mg-airflow-fb-title strong { color: #00f0ff; }
.bf-mg-airflow-fb-cost {
    text-align: center;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 12px;
}
.bf-mg-airflow-fb-cost i { color: #ffcc00; margin-right: 4px; }
.bf-mg-airflow-fb-cost strong { color: #ffcc00; }
.bf-mg-airflow-fb-temps {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-bottom: 14px;
    font-size: 1.1rem;
    font-weight: 700;
}
.bf-mg-airflow-fb-temps i { margin-right: 4px; }
.bf-mg-airflow-fb-line {
    padding: 8px 12px;
    margin: 5px 0;
    border-radius: 6px;
    font-size: 1.05rem;
    line-height: 1.45;
}
.bf-mg-airflow-fb-line i { margin-right: 6px; }
.bf-mg-airflow-fb-line--ok {
    background: rgba(0,255,136,0.06);
    color: rgba(255,255,255,0.88);
}
.bf-mg-airflow-fb-line--ok i { color: #0f8; }
.bf-mg-airflow-fb-line--err {
    background: rgba(255,60,60,0.06);
    color: rgba(255,255,255,0.88);
}
.bf-mg-airflow-fb-line--err i { color: #f44; }

/* Done button */
.bf-mg-airflow-done-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 16px auto 0;
    padding: 12px 32px;
    border-radius: 8px;
    border: 1px solid rgba(0,255,136,0.4);
    background: rgba(0,255,136,0.12);
    color: #00ff88;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}
.bf-mg-airflow-done-btn:hover { background: rgba(0,255,136,0.25); }

/* Responsive */
@media (max-width: 540px) {
    .bf-mg-airflow-case { aspect-ratio: 3 / 3; }
    .bf-mg-airflow-slot { width: 44px; height: 44px; }
    .bf-mg-airflow-fan-icon { font-size: 1.4rem; }
    .bf-mg-airflow-comp i { font-size: 1.6rem; }
    .bf-mg-airflow-tray-fan { width: 46px; height: 46px; }
    .bf-mg-airflow-fb-temps { flex-direction: column; align-items: center; gap: 6px; }
    .bf-mg-airflow-modal { padding: 20px 16px; max-width: 95vw; }
    .bf-mg-airflow-modal-header { font-size: 1.2rem; }
    .bf-mg-airflow-schema-svg { max-width: 300px; }
}

/* ============================================================
   COOLING MINI-GAME — Real-time thermometer challenge
   ============================================================ */
.bf-mg-cooling-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 680px;
    margin: 0 auto;
    padding: 6px 0;
}
.bf-mg-cooling-instr {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.8);
    text-align: center;
    padding: 12px 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    line-height: 1.5;
}
.bf-mg-cooling-instr i { color: #ff6600; margin-right: 5px; }
.bf-mg-cooling-instr strong { color: #ff4444; }

/* --- Main area: thermometer + CPU --- */
.bf-mg-cooling-main {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    justify-content: center;
    padding: 10px 0;
}

/* Thermometer */
.bf-mg-cooling-thermo {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    position: relative;
    flex-shrink: 0;
}
.bf-mg-cooling-thermo-labels {
    position: relative;
    width: 50px;
    height: 220px;
}
.bf-mg-cooling-thermo-label {
    position: absolute;
    right: 0;
    font-size: 0.78rem;
    font-family: monospace;
    color: rgba(255,255,255,0.4);
    transform: translateY(50%);
    white-space: nowrap;
}
.bf-mg-cooling-thermo-label--danger { color: rgba(255,68,68,0.7); }
.bf-mg-cooling-thermo-label--warn { color: rgba(255,170,0,0.7); }
.bf-mg-cooling-thermo-label--ok { color: rgba(0,170,255,0.6); }

.bf-mg-cooling-thermo-bar {
    width: 44px;
    height: 220px;
    background: rgba(0,0,0,0.4);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}
.bf-mg-cooling-thermo-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0%;
    border-radius: 0 0 20px 20px;
    transition: background 0.3s;
}
.bf-mg-cooling-thermo-zones {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.bf-mg-cooling-tz { flex: 1; }
.bf-mg-cooling-tz--crit { background: rgba(255,0,0,0.06); }
.bf-mg-cooling-tz--danger { background: rgba(255,50,50,0.04); }
.bf-mg-cooling-tz--warn { background: rgba(255,170,0,0.03); }
.bf-mg-cooling-tz--ok { background: rgba(0,255,136,0.02); }
.bf-mg-cooling-tz--cold { background: rgba(0,100,255,0.03); }

/* Temp display */
.bf-mg-cooling-thermo-temp {
    position: absolute;
    bottom: -36px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 1.3rem;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(0,0,0,0.5);
}
.bf-mg-cooling-thermo-temp--warn { color: #ffaa00; text-shadow: 0 0 10px rgba(255,170,0,0.4); }
.bf-mg-cooling-thermo-temp--danger { color: #ff3333; text-shadow: 0 0 12px rgba(255,50,50,0.5); animation: bf-cooling-pulse 0.5s ease infinite alternate; }

@keyframes bf-cooling-pulse {
    from { opacity: 0.8; transform: translateX(-50%) scale(1); }
    to   { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

/* --- CPU Display --- */
.bf-mg-cooling-cpu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 24px;
    background: rgba(255,255,255,0.02);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    min-width: 200px;
    transition: border-color 0.5s, box-shadow 0.5s;
}
.bf-mg-cooling-cpu--hot {
    border-color: rgba(255,100,0,0.3);
    box-shadow: 0 0 20px rgba(255,80,0,calc(var(--heat,0) * 0.3));
}
.bf-mg-cooling-cpu-icon {
    font-size: 3.5rem;
    color: rgba(0,240,255,0.6);
    transition: color 0.5s;
    line-height: 1;
}
.bf-mg-cooling-cpu--hot .bf-mg-cooling-cpu-icon {
    color: rgba(255,100,0,0.7);
}
.bf-mg-cooling-cpu-name {
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}
.bf-mg-cooling-cpu-tdp {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    padding: 6px 14px;
    background: rgba(255,170,0,0.1);
    border: 1px solid rgba(255,170,0,0.25);
    border-radius: 6px;
}
.bf-mg-cooling-cpu-tdp i { color: #ffaa00; margin-right: 4px; }
.bf-mg-cooling-cpu-tdp strong { color: #fc0; font-size: 1.2rem; }

.bf-mg-cooling-round-badge {
    font-size: 0.88rem;
    color: rgba(0,240,255,0.7);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Start button */
.bf-mg-cooling-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, rgba(0,240,255,0.2) 0%, rgba(0,200,255,0.1) 100%);
    border: 2px solid rgba(0,240,255,0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 4px;
}
.bf-mg-cooling-start-btn:hover {
    background: linear-gradient(135deg, rgba(0,240,255,0.3) 0%, rgba(0,200,255,0.2) 100%);
    box-shadow: 0 0 16px rgba(0,240,255,0.3);
    transform: translateY(-1px);
}
.bf-mg-cooling-start-btn i { font-size: 1.2rem; }

/* --- Cooler cards --- */
.bf-mg-cooling-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
}
.bf-mg-cooling-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.bf-mg-cooling-card:hover:not(.bf-mg-cooling-card--disabled) {
    border-color: rgba(0,240,255,0.5);
    background: rgba(0,240,255,0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.bf-mg-cooling-card--disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}
.bf-mg-cooling-card--correct {
    opacity: 1 !important;
    border-color: rgba(0,255,136,0.5) !important;
    background: rgba(0,255,136,0.06) !important;
    pointer-events: none;
}
.bf-mg-cooling-card--wrong {
    opacity: 1 !important;
    border-color: rgba(255,68,68,0.5) !important;
    background: rgba(255,68,68,0.06) !important;
    animation: bf-fp-shake 0.4s ease;
    pointer-events: none;
}
/* Start overlay — covers cards area until clicked */
.bf-mg-cooling-start-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 24px 0;
}

/* ---- Cooler visual shapes ---- */
.bf-mg-cooling-shape {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    position: relative;
}

/* Stock: small square base + small fan */
.bf-mg-cooling-shape--stock {
    flex-direction: column;
    gap: 2px;
}
.bf-mg-cooling-shape--stock .bf-mg-cooling-shape-fan {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(180,180,200,0.08);
    border: 2px solid rgba(180,180,200,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bf-mg-cooling-shape--stock .bf-mg-cooling-shape-fan i {
    font-size: 1.4rem;
    color: rgba(180,180,200,0.5);
    animation: bf-spin 3s linear infinite;
    display: block; width: 1em; height: 1em; line-height: 1; text-align: center;
}
.bf-mg-cooling-shape--stock .bf-mg-cooling-shape-base {
    width: 36px;
    height: 8px;
    background: repeating-linear-gradient(90deg, rgba(180,180,200,0.15) 0px, rgba(180,180,200,0.15) 2px, transparent 2px, transparent 4px);
    border-radius: 2px;
}

/* Tower: tall fins + fan on side + copper pipes */
.bf-mg-cooling-shape--tower {
    gap: 0;
    height: 60px;
}
.bf-mg-cooling-shape--tower .bf-mg-cooling-shape-fins {
    width: 28px;
    height: 52px;
    background: repeating-linear-gradient(0deg, rgba(200,200,220,0.2) 0px, rgba(200,200,220,0.2) 2px, transparent 2px, transparent 5px);
    border: 1.5px solid rgba(200,200,220,0.15);
    border-radius: 2px;
}
.bf-mg-cooling-shape--tower .bf-mg-cooling-shape-fan {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(100,180,255,0.06);
    border: 2px solid rgba(100,180,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -4px;
}
.bf-mg-cooling-shape--tower .bf-mg-cooling-shape-fan i {
    font-size: 1.6rem;
    color: rgba(100,180,255,0.5);
    display: block; width: 1em; height: 1em; line-height: 1; text-align: center;
    animation: bf-spin 2.5s linear infinite;
}
.bf-mg-cooling-shape--tower .bf-mg-cooling-shape-pipes {
    position: absolute;
    bottom: 0;
    left: 6px;
    display: flex;
    gap: 3px;
}
.bf-mg-cooling-shape--tower .bf-mg-cooling-shape-pipes::before,
.bf-mg-cooling-shape--tower .bf-mg-cooling-shape-pipes::after {
    content: '';
    width: 3px;
    height: 16px;
    background: rgba(200,140,60,0.4);
    border-radius: 1.5px;
}

/* AIO: pump block + tubes + radiator with fans */
.bf-mg-cooling-shape--aio {
    gap: 4px;
    align-items: flex-end;
}
.bf-mg-cooling-shape--aio .bf-mg-cooling-shape-pump {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,240,255,0.15) 0%, rgba(0,240,255,0.04) 100%);
    border: 2px solid rgba(0,240,255,0.3);
    flex-shrink: 0;
}
.bf-mg-cooling-shape--aio .bf-mg-cooling-shape-tubes {
    width: 20px;
    height: 2px;
    position: relative;
}
.bf-mg-cooling-shape--aio .bf-mg-cooling-shape-tubes::before,
.bf-mg-cooling-shape--aio .bf-mg-cooling-shape-tubes::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 1.5px;
    background: rgba(100,100,100,0.3);
}
.bf-mg-cooling-shape--aio .bf-mg-cooling-shape-tubes::before { top: -3px; }
.bf-mg-cooling-shape--aio .bf-mg-cooling-shape-tubes::after { top: 3px; }

.bf-mg-cooling-shape-rad {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: repeating-linear-gradient(0deg, rgba(150,150,170,0.1) 0px, rgba(150,150,170,0.1) 1px, transparent 1px, transparent 3px);
    border: 1.5px solid rgba(150,150,170,0.15);
    border-radius: 3px;
}
.bf-mg-cooling-shape-rad i {
    font-size: 1.1rem;
    color: rgba(0,240,255,0.4);
    animation: bf-spin 2s linear infinite;
    display: block; width: 1em; height: 1em; line-height: 1; text-align: center;
}
.bf-mg-cooling-shape-rad--240 { padding: 4px 6px; }
.bf-mg-cooling-shape-rad--360 { padding: 4px 6px; }

.bf-mg-cooling-card--correct .bf-mg-cooling-shape-rad i,
.bf-mg-cooling-card--correct .bf-mg-cooling-shape--stock .bf-mg-cooling-shape-fan i,
.bf-mg-cooling-card--correct .bf-mg-cooling-shape--tower .bf-mg-cooling-shape-fan i { color: #0f8; }
.bf-mg-cooling-card--wrong .bf-mg-cooling-shape-rad i,
.bf-mg-cooling-card--wrong .bf-mg-cooling-shape--stock .bf-mg-cooling-shape-fan i,
.bf-mg-cooling-card--wrong .bf-mg-cooling-shape--tower .bf-mg-cooling-shape-fan i { color: #f44; }

.bf-mg-cooling-card-name {
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
}
.bf-mg-cooling-card-max {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: monospace;
    color: rgba(255,200,0,0.85);
}
.bf-mg-cooling-card-desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.3;
}

/* --- Feedback --- */
.bf-mg-cooling-feedback {
    width: 100%;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 1.05rem;
    line-height: 1.5;
    text-align: center;
    animation: bf-vram-fb-in 0.3s ease;
}
.bf-mg-cooling-fb-ok {
    background: rgba(0,255,136,0.1);
    border: 1px solid rgba(0,255,136,0.3);
    color: rgba(255,255,255,0.95);
}
.bf-mg-cooling-fb-ok i { color: #0f8; margin-right: 6px; }
.bf-mg-cooling-fb-warn {
    background: rgba(255,170,0,0.1);
    border: 1px solid rgba(255,170,0,0.3);
    color: rgba(255,255,255,0.95);
}
.bf-mg-cooling-fb-warn i { color: #ffaa00; margin-right: 6px; }
.bf-mg-cooling-fb-fail {
    background: rgba(255,60,60,0.1);
    border: 1px solid rgba(255,60,60,0.3);
    color: rgba(255,255,255,0.95);
}
.bf-mg-cooling-fb-fail i { color: #f44; margin-right: 6px; }

/* Retry button */
.bf-mg-cooling-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    font-family: var(--bf-font-display, 'Orbitron', monospace);
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255,60,60,0.15);
    border: 2px solid rgba(255,60,60,0.35);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
}
.bf-mg-cooling-retry-btn:hover {
    background: rgba(255,60,60,0.25);
    box-shadow: 0 0 12px rgba(255,60,60,0.2);
}

/* Spin animation for loading */
@keyframes bf-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.bf-spin {
    animation: bf-spin 1s linear infinite;
    display: inline-block;
}

/* ============================================================
   MINI-GAME: Cable Management (.bf-mg-cb-)
   ============================================================ */
.bf-mg-cb-wrap {
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin-top: 10px;
}
.bf-mg-cb-panel {
    position: relative;
    flex: 1;
    max-width: 440px;
    background: rgba(10,14,26,0.85);
    border: 1px solid rgba(0,240,255,0.15);
    border-radius: 10px;
    overflow: hidden;
}
.bf-mg-cb-panel svg {
    display: block;
    width: 100%;
    height: auto;
}
.bf-mg-cb-panel-label {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(0,240,255,0.8);
    text-transform: uppercase;
    letter-spacing: 3px;
    z-index: 2;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(0,240,255,0.4);
}
.bf-mg-cb-tray {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(10,14,26,0.7);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
}
.bf-mg-cb-tray-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 105px;
}
.bf-mg-cb-tray-btn svg { pointer-events: none; }
.bf-mg-cb-tray-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(0,240,255,0.3);
}
.bf-mg-cb-tray-btn--active {
    background: rgba(0,240,255,0.15) !important;
    border-color: #00f0ff !important;
    color: #00f0ff;
    box-shadow: 0 0 12px rgba(0,240,255,0.25);
}
.bf-mg-cb-tray-btn--done {
    background: rgba(0,255,136,0.1) !important;
    border-color: rgba(0,255,136,0.4) !important;
    color: #00ff88;
    opacity: 0.7;
    cursor: default;
}
.bf-mg-cb-tray-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: center;
    line-height: 1.2;
}
/* SVG interactive elements */
.bf-mg-cb-port { cursor: pointer; }
.bf-mg-cb-port:hover circle.cb-port-ring { stroke-opacity: 1; }
.bf-mg-cb-grommet { cursor: pointer; }
.bf-mg-cb-hook { cursor: pointer; }
/* === Port highlight — glow vert vif + pulse === */
@keyframes bf-cb-port-glow {
    0%, 100% { r: 8; opacity: 0.6; }
    50% { r: 13; opacity: 1; }
}
.bf-mg-cb-port--available circle.cb-port-ring {
    stroke: #00ff88 !important;
    stroke-width: 3 !important;
    stroke-opacity: 1 !important;
    filter: drop-shadow(0 0 8px #00ff88) drop-shadow(0 0 16px rgba(0,255,136,0.5));
}
.bf-mg-cb-port--available circle.cb-port-pulse {
    fill: #00ff88 !important;
    animation: bf-cb-port-glow 0.7s ease-in-out infinite;
    filter: drop-shadow(0 0 6px #00ff88);
}
.bf-mg-cb-port--available text {
    fill: #00ff88 !important;
    font-weight: bold;
}

/* === Grommet highlight — glow jaune vif + pulse === */
@keyframes bf-cb-grommet-glow {
    0%, 100% { r: 8; stroke-width: 2; opacity: 0.6; }
    50% { r: 13; stroke-width: 3.5; opacity: 1; }
}
.bf-mg-cb-grommet--available circle {
    stroke: #ffcc00 !important;
    stroke-width: 3 !important;
    stroke-opacity: 1 !important;
    fill: rgba(255,204,0,0.15) !important;
    filter: drop-shadow(0 0 8px #ffcc00) drop-shadow(0 0 14px rgba(255,204,0,0.4));
}
.bf-mg-cb-grommet--available circle.cb-grommet-pulse {
    fill: #ffcc00 !important;
    animation: bf-cb-grommet-glow 0.7s ease-in-out infinite;
}
.bf-mg-cb-grommet--available text {
    fill: #ffcc00 !important;
    font-weight: bold;
}

/* === Hook highlight — glow rose/violet + pulse === */
@keyframes bf-cb-hook-glow {
    0%, 100% { stroke-opacity: 0.5; stroke-width: 1.5; }
    50% { stroke-opacity: 1; stroke-width: 2.5; }
}
.bf-mg-cb-hook--available path {
    stroke: #ff88ff !important;
    animation: bf-cb-hook-glow 0.7s ease-in-out infinite;
    filter: drop-shadow(0 0 6px #ff88ff) drop-shadow(0 0 12px rgba(255,136,255,0.4));
}
.bf-mg-cb-hook--available circle {
    fill: rgba(255,136,255,0.25) !important;
    stroke: #ff88ff !important;
    filter: drop-shadow(0 0 5px #ff88ff);
}
.bf-mg-cb-instr {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.7);
    text-align: center;
    padding: 8px 14px;
    background: rgba(10,14,26,0.85);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    margin-top: 6px;
    line-height: 1.4;
}
.bf-mg-cb-instr strong { color: #00f0ff; }