/* ================= GAMEPAD ================= */
.gamepad-visual { position: relative; width: 600px; height: 400px; margin: 0 auto; perspective: 1000px; }
.gp-body { width: 100%; height: 100%; background: #222; border-radius: 40px 40px 80px 80px; border: 2px solid var(--border-color); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.gp-btn, .gp-dpad-btn, .gp-trigger, .gp-bumper, .gp-stick { position: absolute; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); transition: all 0.05s; }
.gp-active, .gp-btn.gp-tested { background: var(--accent-green) !important; color: #000 !important; box-shadow: 0 0 15px var(--accent-green); }

/* --- Positionnement simplifié --- */
.gp-face-btns { position: absolute; top: 100px; right: 80px; }
.gp-dpad { position: absolute; top: 100px; left: 80px; }
.gp-stick { width: 70px; height: 70px; border-radius: 50%; background: rgba(0,0,0,0.5); }
.gp-stick.left { bottom: 80px; left: 130px; }
.gp-stick.right { bottom: 80px; right: 130px; }
.gp-bumper { width: 100px; height: 30px; top: 20px; }
.gp-trigger { width: 80px; height: 40px; top: -20px; z-index: -1; }

@media (max-width: 650px) { .gamepad-visual { transform: scale(0.6); transform-origin: top center; width: 100%; } }

/* ================= PC TESTER ================= */
.section-title {color: var(--primary);font-size: 0.8rem;letter-spacing: 2px;margin-bottom: 15px;border-bottom: 1px solid rgba(0, 224, 255, 0.1);padding-bottom: 5px;}
.component-grid {display: grid;grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */gap: 20px;margin-bottom: 30px;}
@media (max-width: 768px) {
    .component-grid {grid-template-columns: 1fr;}}
.input-group label {display: block;color: var(--text-muted);font-size: 0.75rem;margin-bottom: 8px;}
.cyber-input {width: 100%;padding: 10px;background: rgba(0,0,0,0.3);border: 1px solid #333;color: white;border-radius: 4px;}
.search-section {margin-bottom: 30px;}
.steam-search-bar {display: flex;align-items: center;background: rgba(0,0,0,0.5);border: 1px solid rgba(255,255,255,0.1);padding: 5px;border-radius: 8px;}
    .steam-search-bar i {font-size: 1.5rem;padding: 0 15px;color: #66c0f4; /* Bleu Steam */}
    .steam-search-bar input {flex-grow: 1;background: transparent !important;border: none !important;color: white !important;font-size: 1.1rem;box-shadow: none !important;}
.btn-neon {background: var(--primary);color: #000;border: none;padding: 10px 25px;font-weight: bold;border-radius: 4px;cursor: pointer;transition: 0.3s;}
    .btn-neon:hover {box-shadow: 0 0 15px var(--primary);}
.specs-section {background: rgba(255,255,255,0.02);padding: 20px;border-radius: 8px;margin-bottom: 20px;animation: fadeIn 0.5s;}
.game-info-header {display: flex;align-items: center;gap: 15px;margin-bottom: 20px;}
    .game-info-header img {height: 60px;border-radius: 4px;}
    .game-info-header h3 {margin: 0;color: white;text-transform: uppercase;}
.requirements-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;}
.req-box h5 {margin: 0 0 10px 0;color: var(--text-muted);text-align: center;border-bottom: 1px solid #333;}
.req-box ul {list-style: none;padding: 0;font-size: 0.85rem; color: #ccc;}
    .req-box ul li {margin-bottom: 5px;}

.verdict-section {position: relative;border-radius: 12px;padding: 25px;margin-top: 25px;overflow: hidden;border: 1px solid rgba(255, 255, 255, 0.1);border-left-width: 6px;animation: slideUpFade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);display: flex;align-items: center;}
.verdict-success {background: linear-gradient(90deg, rgba(0, 230, 118, 0.15) 0%, rgba(0, 230, 118, 0) 90%);border-left-color: var(--accent-green);box-shadow: 0 0 30px rgba(0, 230, 118, 0.05); /* Légère lueur */}
    .verdict-success h2 {color: var(--accent-green);text-shadow: 0 0 10px rgba(0, 230, 118, 0.4);}
    .verdict-success .verdict-icon {color: var(--accent-green);filter: drop-shadow(0 0 5px rgba(0, 230, 118, 0.6));}
.verdict-warning {background: linear-gradient(90deg, rgba(255, 204, 0, 0.15) 0%, rgba(255, 204, 0, 0) 90%);border-left-color: #ffcc00;}
    .verdict-warning h2 {color: #ffcc00;}
    .verdict-warning .verdict-icon {color: #ffcc00;}
.verdict-fail {background: linear-gradient(90deg, rgba(255, 59, 48, 0.15) 0%, rgba(255, 59, 48, 0) 90%);border-left-color: var(--danger);box-shadow: 0 0 30px rgba(255, 59, 48, 0.05);}
    .verdict-fail h2 {color: var(--danger);text-shadow: 0 0 10px rgba(255, 59, 48, 0.4);}
    .verdict-fail .verdict-icon {color: var(--danger);filter: drop-shadow(0 0 5px rgba(255, 59, 48, 0.6));}
.verdict-content {display: flex;align-items: center;width: 100%;position: relative;z-index: 2;}
.verdict-icon {font-size: 3.5rem;margin-right: 30px;display: flex;align-items: center;justify-content: center;width: 80px;}
.verdict-text h2 {margin: 0 0 8px 0;font-size: 1.6rem;font-weight: 800;text-transform: uppercase;letter-spacing: 1px;font-family: 'Neue Plak', sans-serif;}
.verdict-text p {margin: 0;color: #ccc;font-size: 1rem;line-height: 1.5;max-width: 800px;}
@keyframes slideUpFade {from { opacity: 0; transform: translateY(20px);}to {opacity: 1;transform: translateY(0);}}
.grid-3-col {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;width: 100%;}
@media (max-width: 768px) {.grid-3-col {grid-template-columns: 1fr;}}
#app-pc-tester .search-section {overflow: visible !important;position: relative;z-index: 100;}
#app-pc-tester .search-results-dropdown {position: absolute;top: 60px;left: 0;right: 0;background: #1a1b26;border: 1px solid #2f3b52;border-radius: 8px;box-shadow: 0 10px 30px rgba(0,0,0,0.5);z-index: 9999;max-height: 300px;overflow-y: auto;display: none;}
#app-pc-tester .search-result-item {display: flex;align-items: center; gap: 15px;padding: 12px 15px;border-bottom: 1px solid rgba(255,255,255,0.05);cursor: pointer;transition: background 0.2s;color: #a0a0b0;}
#app-pc-tester .search-result-item:hover {background: rgba(0, 224, 255, 0.05);color: white;}
#app-pc-tester .search-result-item img {width: 40px;height: 40px;object-fit: cover;border-radius: 4px;}
#app-pc-tester .search-result-title {font-weight: 600;font-size: 0.95rem;}
#pc-dashboard {overflow: visible !important;z-index: 100;}
.activity-timeline {padding: 10px 0;position: relative;}
.activity-timeline::before {content: '';position: absolute;left: 20px;top: 10px;bottom: 10px;width: 2px;background: rgba(255,255,255,0.1);}
.activity-item {display: flex;gap: 20px;margin-bottom: 20px;position: relative;align-items: flex-start;}
.activity-icon {width: 40px;height: 40px;border-radius: 50%;background: var(--bg-panel);border: 2px solid #444;display: flex;align-items: center;justify-content: center;z-index: 2;flex-shrink: 0;font-size: 1.1rem;box-shadow: 0 0 10px rgba(0,0,0,0.5);}
.activity-content {background: rgba(255,255,255,0.03);padding: 12px 15px;border-radius: 8px;border: 1px solid rgba(255,255,255,0.05);flex-grow: 1;}
.activity-header {display: flex;justify-content: space-between;margin-bottom: 5px;}
.act-title {font-weight: bold;color: var(--text-main);font-size: 0.9rem;}
.act-date {font-size: 0.75rem;color: var(--text-muted);}
.act-details {color: #ccc;font-size: 0.85rem;}

/* ================= ANDROID & PHONE VS ================= */
.android-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; }
.app-check-card { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; padding: 15px; display: flex; gap: 15px; }
.app-check-card.compatible { border-left: 4px solid var(--accent-green); }

.vs-search-container { display: flex; gap: 20px; padding: 20px 0; }
.vs-table { width: 100%; border-collapse: collapse; margin-top: 30px; }
.vs-table td, .vs-table th { padding: 15px; border-bottom: 1px solid var(--border-color); }
.data-cell.win { color: var(--accent-green); background: linear-gradient(90deg, rgba(0,230,118,0.05), transparent); border-left: 3px solid var(--accent-green); }

/* ================= ANDROID checker ================= */
.android-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 15px;padding: 10px 0;}
.app-check-card {background: var(--bg-panel);border: 1px solid var(--border-color);border-radius: 12px;padding: 15px;display: flex;align-items: center;gap: 15px;transition: all 0.2s ease;}
    .app-check-card:hover {transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
    .app-check-card.compatible {border-left: 4px solid var(--accent-green);}
    .app-check-card.incompatible {border-left: 4px solid var(--danger);opacity: 0.7;}
.app-icon-wrapper {width: 50px;height: 50px;border-radius: 10px;overflow: hidden;background: white;display: flex;align-items: center;justify-content: center;}
    .app-icon-wrapper img {width: 100%;height: 100%;object-fit: cover;}
.app-info h4 {margin: 0 0 4px 0;color: var(--text-main);}
.app-req {font-size: 0.8rem;color: var(--text-muted);}
.app-status {font-size: 0.9rem;font-weight: bold;margin-top: 5px;}

/* Phone VS Cards & Animations */
.phone-card-empty, .phone-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 25px;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
}

.phone-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.phone-card-empty i {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    opacity: 0.5;
}

.phone-card-empty span {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.phone-card-empty.loading {
    border-color: var(--primary-glow);
    animation: pulseGlow 1.5s ease-in-out infinite;
}

/* Winner & Loser styles */
.phone-card.winner {
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 25px rgba(0, 230, 118, 0.15), inset 0 0 15px rgba(0, 230, 118, 0.05);
    transform: scale(1.02);
}

.phone-card.loser {
    opacity: 0.5;
    border-color: rgba(255, 255, 255, 0.03);
    filter: grayscale(50%);
}

.vs-header img.vs-img {
    height: 120px;
    width: auto;
    object-fit: contain;
    margin-bottom: 15px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.phone-card.winner .vs-header img.vs-img {
    transform: translateY(-5px) scale(1.05);
}

.vs-specs-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 15px;
    width: 100%;
}

.vs-specs-preview span {
    background: rgba(255, 255, 255, 0.04);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.8em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color);
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.6; box-shadow: 0 0 5px rgba(0, 224, 255, 0.05); }
    50% { opacity: 1; box-shadow: 0 0 15px rgba(0, 224, 255, 0.2); }
}