/* ======================================================
   DESIGN SYSTEM - BRIDGE QUIZ IA
   ====================================================== */

/* ======================================================
   POLICES LOCALES (100% HORS-LIGNE - Pas de Google Fonts)
   ====================================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/Outfit-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Outfit-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/Outfit-ExtraBold.ttf') format('truetype');
}

:root {
    /* Color Palette - Premium Classic Forest Green felt bridge theme (Inspiré de IntoBridge) */
    --bg-main: #043521;      /* Vert tapis de bridge classique (forest green felt) */
    --bg-gradient: radial-gradient(circle at top, #0a5237 0%, #032517 100%);
    --bg-card: rgba(2, 25, 15, 0.65); /* Verre bouteille sombre très élégant */
    --bg-card-border: rgba(255, 255, 255, 0.06);
    
    --primary: #ffaa00;      /* Or / Ambre de championnat de bridge */
    --primary-light: #ffd000;
    --secondary: #00f0ff;    /* Cyber cyan */
    --success: #39ff14;      /* Vert néon */
    --fail: #ff073a;         /* Rouge néon */
    --warning: #ffb700;
    
    --btn-primary-bg: linear-gradient(135deg, var(--primary) 0%, #b87700 100%);
    --btn-primary-hover-bg: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    --btn-text-color: #043521;
    
    --text-main: #f0f0ff;
    --text-muted: #8e8eaf;
    
    /* Card Suit Color Tokens */
    --color-spade: #000000;
    --color-heart: #ff0000;
    --color-diamond: #ff9500;
    --color-club: #008000;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Outfit', sans-serif;
    
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);

    /* Level Chips Theme Variables */
    --chip-active-border: var(--secondary);
    --chip-active-bg: rgba(0, 240, 255, 0.12);
    --chip-active-color: #ffffff;
    --chip-active-shadow: 0 0 10px rgba(0, 240, 255, 0.2);
    
    --chip-inactive-border: rgba(255, 255, 255, 0.15);
    --chip-inactive-bg: rgba(255, 255, 255, 0.03);
    --chip-inactive-color: var(--text-muted);
}


/* ======================================================
   RESET & SETUP GLOBAL
   ====================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Masquer la barre de defilement pour un vrai look mobile natif */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

body, html {
    width: 100%;
    height: 100%;
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-family);
    overflow: hidden;
    position: relative;
}

/* ======================================================
   SHELL MOBILE (Simulateur d'Ecran de Smartphone)
   ====================================================== */
.mobile-shell {
    width: 100%;
    height: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg-gradient);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, 0.03);
    border-right: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.3s ease;
}

/* ======================================================
   APP HEADER
   ====================================================== */
.app-header {
    height: 64px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bg-card-border);
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 10;
}

.header-left, .header-right {
    display: flex;
    align-items: center;
}

.header-right {
    gap: 8px;
}

.app-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 5px var(--primary-light));
}

.logo-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.5px;
    background: linear-gradient(to right, #fff 40%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Premium Button in Header */
.btn-premium {
    height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    border: none;
    outline: none;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 700;
    color: #043521;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(255, 170, 0, 0.3);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-premium:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(255, 170, 0, 0.4);
}

.btn-premium:active {
    transform: translateY(0);
}

.btn-premium.premium-active {
    background: rgba(255, 215, 0, 0.08) !important;
    border: 1.5px solid #ffd700 !important;
    color: #ffd700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.25) !important;
}

/* User Profile Badge */
.user-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 5px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.25s ease;
}

.badge-name {
    font-size: 11.5px;
    font-weight: 600;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-level {
    font-size: 10px;
    font-weight: 700;
    color: var(--secondary);
    background-color: rgba(0, 240, 255, 0.1);
    padding: 2px 6px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.badge-emoji {
    order: 1;
}
.badge-name {
    order: 2;
}
.badge-level {
    order: 3;
}
.badge-settings {
    order: 5;
    margin-left: 4px;
    font-size: 13px;
    opacity: 0.8;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}
.badge-profile-icon {
    order: 4;
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.user-badge:hover .badge-settings {
    transform: rotate(45deg);
}

.badge-settings:hover {
    transform: rotate(360deg) !important;
}

.badge-settings:hover + .badge-profile-icon {
    transform: rotate(360deg) !important;
}

/* Premium Active Styling */
.user-badge.premium-active {
    border: 2px solid #ffd700;
    background: rgba(255, 215, 0, 0.08);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25), inset 0 0 6px rgba(255, 215, 0, 0.1);
}

.user-badge.premium-active .badge-level {
    background-color: rgba(255, 215, 0, 0.2) !important;
    color: #ffd700 !important;
}

/* Theme Vegas specific adjustments */
body.theme-vegas .user-badge {
    background-color: rgba(16, 42, 67, 0.04);
    border: 1.5px solid rgba(16, 42, 67, 0.15);
    color: #102a43;
}

body.theme-vegas .user-badge.premium-active {
    background-color: rgba(184, 119, 0, 0.06) !important;
    border: 2px solid #b87700 !important;
    box-shadow: 0 3px 8px rgba(184, 119, 0, 0.15) !important;
}

body.theme-vegas .user-badge.premium-active .badge-level {
    background-color: rgba(184, 119, 0, 0.15) !important;
    color: #b87700 !important;
}

body.theme-vegas .btn-premium {
    color: #ffffff;
    background: linear-gradient(135deg, #243b53 0%, #102a43 100%);
    box-shadow: 0 3px 8px rgba(16, 42, 67, 0.15);
}

body.theme-vegas .btn-premium.premium-active {
    background: rgba(184, 119, 0, 0.05) !important;
    border: 1.5px solid #b87700 !important;
    color: #b87700 !important;
    box-shadow: 0 2px 6px rgba(184, 119, 0, 0.1) !important;
}

/* Theme Midnight Cyber premium color overrides */
body.theme-midnight .user-badge.premium-active {
    border: 2px solid #ff007f;
    background: rgba(255, 0, 127, 0.08);
    box-shadow: 0 0 12px rgba(255, 0, 127, 0.35);
}

body.theme-midnight .user-badge.premium-active .badge-level {
    background-color: rgba(255, 0, 127, 0.2) !important;
    color: #ff007f !important;
}

body.theme-midnight .btn-premium {
    background: linear-gradient(135deg, #00f0ff 0%, #ff007f 100%);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(0, 240, 255, 0.3);
}

body.theme-midnight .btn-premium.premium-active {
    background: rgba(255, 0, 127, 0.08) !important;
    border: 1.5px solid #ff007f !important;
    color: #ff007f !important;
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.3) !important;
}

body.theme-midnight .btn-premium {
    background: linear-gradient(135deg, #00f0ff 0%, #ff007f 100%);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(0, 240, 255, 0.3);
}

/* ======================================================
   APP CONTENT STACK (Ecran unique actif)
   ====================================================== */
.app-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px; /* Espacement mobile resserré */
    position: relative;
    padding-bottom: 80px;
}

.app-screen {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.app-screen.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* ======================================================
   CARTE EFFET VERRE (GLASSMORPHISM)
   ====================================================== */
.card-glass {
    background-color: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 16px;
    padding: 12px; /* Marges internes resserrées */
    margin-bottom: 8px; /* Réduit pour économiser de la hauteur */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Welcome Card style */
.welcome-card {
    background: linear-gradient(135deg, rgba(255, 170, 0, 0.15) 0%, rgba(0, 240, 255, 0.10) 100%);
    border: 1px solid rgba(255, 170, 0, 0.2);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
}

.welcome-card h1 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.2;
}

.welcome-card p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ======================================================
   FORMULAIRES & INPUTS
   ====================================================== */
.setup-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Deux champs côte à côte sur la même ligne */
.form-row-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: end;
}

/* Sur mobile très étroit, empiler verticalement */
@media (max-width: 280px) {
    .form-row-double {
        grid-template-columns: 1fr;
    }
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input, .form-select {
    width: 100%;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0 16px;
    color: var(--text-main);
    font-family: var(--font-family);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
}

.form-input:focus, .form-select:focus {
    border-color: var(--secondary);
    background-color: rgba(255, 255, 255, 0.08);
}

.form-select option {
    background-color: var(--bg-main);
    color: var(--text-main);
}

/* Themes Selector */
.themes-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 140px;
    overflow-y: auto;
    padding: 4px;
}

.theme-pill-btn {
    height: 38px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}

.theme-pill-btn.selected {
    background-color: rgba(138, 43, 226, 0.2);
    border-color: var(--primary);
    color: var(--text-main);
    box-shadow: 0 0 10px rgba(138, 43, 226, 0.3);
}

/* Control Segmented */
.segmented-control {
    display: flex;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 3px;
    gap: 4px;
}

.segmented-control input[type="radio"] {
    display: none;
}

.segmented-control label {
    flex: 1;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.segmented-control input[type="radio"]:checked + label {
    background-color: rgba(0, 240, 255, 0.15);
    color: var(--text-main);
    border: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.25);
}

/* ======================================================
   BOUTONS
   ====================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    font-family: var(--font-family);
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.2s, background-color 0.2s;
}

.btn:active {
    transform: scale(0.97);
}

.btn-large {
    height: 52px;
    font-size: 16px;
    width: 100%;
}

.btn-medium {
    height: 44px;
    font-size: 14px;
    padding: 0 20px;
}

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-text-color);
    box-shadow: 0 4px 15px rgba(255, 170, 0, 0.3);
}

.btn-primary:hover {
    background: var(--btn-primary-hover-bg);
    box-shadow: 0 6px 20px rgba(255, 170, 0, 0.4);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-main);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.btn-danger {
    background-color: rgba(255, 7, 58, 0.15);
    border: 1px solid rgba(255, 7, 58, 0.3);
    color: #ff3b30;
}

.btn-danger:hover {
    background-color: rgba(255, 7, 58, 0.22);
}

/* ======================================================
   ECRAN QUIZ - LOGIQUE & ENTRAINEMENT
   ====================================================== */
.quiz-progress-bar {
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--primary), var(--secondary));
    border-radius: 3px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.quiz-step {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.quiz-score {
    font-size: 14px;
    font-weight: 700;
    color: #ff4444; /* couleur initiale (rouge) — remplacée dynamiquement par updateStreakDisplay() */
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

.quiz-score-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.1;
}

.quiz-record {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.2px;
}

/* ======================================================
   FENÊTRE "QUIZ TERMINÉ" — Hall of Fame
   ====================================================== */

@keyframes quizCompletePop {
    0%   { transform: scale(0.85); opacity: 0; }
    60%  { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes quizCompleteGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 215, 0, 0.25); }
    50%      { box-shadow: 0 0 24px rgba(255, 215, 0, 0.55); }
}

@keyframes quizCompleteTrophyBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-4px) rotate(-6deg); }
    75%      { transform: translateY(-4px) rotate(6deg); }
}

#quiz-complete-modal .card-glass {
    animation: quizCompletePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.quiz-complete-icon {
    font-size: 46px;
    margin-bottom: 6px;
}

.quiz-complete-title {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

.quiz-complete-message {
    font-size: 13px;
    color: #c9c9d8;
    line-height: 1.5;
}

.quiz-complete-banner {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.quiz-complete-banner.hof-success {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), rgba(255, 140, 0, 0.08));
    border: 1px solid rgba(255, 215, 0, 0.45);
    animation: quizCompleteGlow 2.2s ease-in-out infinite;
}

.quiz-complete-banner.hof-success .quiz-complete-banner-icon {
    font-size: 30px;
    animation: quizCompleteTrophyBounce 1.6s ease-in-out infinite;
}

.quiz-complete-banner.hof-success .quiz-complete-banner-text {
    font-size: 13px;
    font-weight: 700;
    color: #ffd700;
    line-height: 1.4;
}

.quiz-complete-banner.hof-dethrone {
    background: rgba(255, 77, 77, 0.10);
    border: 1px solid rgba(255, 77, 77, 0.35);
}

.quiz-complete-banner.hof-dethrone .quiz-complete-banner-icon {
    font-size: 26px;
}

.quiz-complete-banner.hof-dethrone .quiz-complete-banner-text {
    font-size: 13px;
    font-weight: 600;
    color: #ff8a80;
    line-height: 1.4;
}

.group-title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* GRILLE TABLEAU D'ENCHERES S/O/N/E */
.auction-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.auction-cell {
    height: 36px; /* Réduction de hauteur pour compacité */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px; /* Ajusté */
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.auction-cell.header {
    background: transparent !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
    padding: 6px 2px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 6px); /* Remplit pratiquement toute la case en laissant un infime espace de 3px de chaque côté */
    height: 31px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    border-radius: 8px; /* Coins arrondis parfaits */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

/* Vulnérable : Framboise pastel chic avec texte rouge très foncé */
.header-badge.vulnerable {
    background-color: #ffccd5 !important;
    color: #590d22 !important;
}

/* Non-vulnérable : Vert sauge pastel chic avec texte vert très foncé */
.header-badge.not-vulnerable {
    background-color: #d8f3dc !important;
    color: #1b4332 !important;
}

.auction-cell.north, .auction-cell.south {
    color: #000000 !important; /* Chiffres/textes noirs et pleins */
}

.auction-cell.east, .auction-cell.west {
    color: #000000 !important; /* Chiffres/textes noirs et pleins */
}

.auction-cell.vulnerable-col {
    background-color: #fff2f3 !important; /* Framboise hyper-pastel presque invisible (rosé à 97%) */
}

.auction-cell.not-vulnerable-col {
    background-color: #e5f7eb !important; /* Vert sauge pastel doux, un peu plus prononcé */
}

.auction-cell.active-bid {
    background-color: #e0faff !important; /* Enchère active en cyan clair */
    border: 2px solid var(--secondary) !important;
    color: #008080 !important;
    box-shadow: inset 0 0 10px rgba(0, 240, 255, 0.2) !important;
}

/* RENDU DE LA MAIN DE BRIDGE */
.group-hand {
    border: 1px solid rgba(255, 170, 0, 0.15);
    box-shadow: 0 0 20px rgba(255, 170, 0, 0.05);
}

.hand-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.hcp-badge {
    background-color: rgba(255, 170, 0, 0.15);
    border: 1px solid var(--primary);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.hand-suits {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px; /* Rembourrage très compact */
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.suit-symbol {
    font-size: 24px; /* Rendus de diagrammes plus compacts */
    font-weight: 800;
    width: 28px;
    text-align: center;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
}

.suit-symbol.spade { color: var(--color-spade); text-shadow: 0 0 1px #fff, 0 0 2px #fff; }
.suit-symbol.heart { color: var(--color-heart); filter: drop-shadow(0 0 5px rgba(255, 59, 48, 0.3)); }
.suit-symbol.diamond { color: var(--color-diamond); filter: drop-shadow(0 0 5px rgba(255, 149, 0, 0.3)); }
.suit-symbol.club { color: var(--color-club); filter: drop-shadow(0 0 5px rgba(52, 199, 89, 0.3)); }

.suit-cards {
    font-family: var(--font-heading);
    font-size: 16px; /* Plus serré */
    font-weight: 700;
    letter-spacing: 1px;
}

.quiz-question-prompt {
    text-align: center;
    margin: 8px 0; /* Économie d'espace verticale */
}

.quiz-question-prompt p {
    font-family: var(--font-heading);
    font-size: 15px; /* Plus petit */
    font-weight: 700;
    color: var(--secondary);
}

/* BOUTONS DE QCM (CHOIX MULTIPLES) */
.quiz-choices-container {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Moins d'espace entre les boutons QCM */
    margin-bottom: 8px;
}

.choice-btn {
    height: 44px; /* Hauteur réduite de 54px à 44px */
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-main);
    font-family: var(--font-family);
    font-size: 18px; /* Ajusté */
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}

.choice-btn:hover {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
}

.choice-btn:active {
    transform: scale(0.98);
}

/* Etats de selection QCM */
.choice-btn.correct {
    background-color: rgba(57, 255, 20, 0.15) !important;
    border-color: var(--success) !important;
    color: var(--success) !important;
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.25) !important;
}

.choice-btn.incorrect {
    background-color: rgba(255, 7, 58, 0.15) !important;
    border-color: var(--fail) !important;
    color: var(--fail) !important;
    box-shadow: 0 0 15px rgba(255, 7, 58, 0.25) !important;
}

/* BLOC CORRECTION ET SIGNIFICATION */
.correction-panel {
    border-color: var(--bg-card-border);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.correction-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.correction-icon {
    font-size: 20px;
}

.correction-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
}

.correct-answer-text {
    font-size: 16.5px;
    margin-bottom: 10px;
}

.correct-answer-text strong {
    color: var(--success);
    font-size: 18.5px;
}

.explanation-box {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px 14px;
}

.explanation-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

#lbl-correction-meaning {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(240, 240, 255, 0.9);
}

/* Actions */
.quiz-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

/* ======================================================
   ECRAN STATISTIQUES & PROFIL
   ====================================================== */
.profile-summary {
    text-align: center;
    margin-bottom: 24px;
}

.avatar-circle {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 50%;
    margin: 0 auto 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 15px rgba(255, 170, 0, 0.25);
}

.profile-summary h2 {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
}

.stats-user-level {
    font-size: 14px;
    color: var(--secondary);
    font-weight: 600;
    margin-top: 2px;
}

.xp-progress-container {
    margin: 12px auto 0 auto;
    max-width: 260px;
}

.xp-progress-bar {
    height: 6px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.xp-progress-fill {
    height: 100%;
    background-color: var(--secondary);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.xp-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

/* Grille de stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.stat-card {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: var(--text-main);
}

.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
}

.stat-success .stat-num { color: var(--success); }
.stat-fail .stat-num { color: var(--fail); }
.stat-ratio .stat-num { color: var(--secondary); }

/* Succès (Badges) */
.achievements-group {
    border-color: rgba(0, 240, 255, 0.15);
}

.achievements-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.achievement-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 8px 12px;
}

.achievement-icon {
    font-size: 20px;
}

.achievement-details {
    display: flex;
    flex-direction: column;
}

.achievement-title {
    font-size: 13px;
    font-weight: 700;
}

.achievement-desc {
    font-size: 11px;
    color: var(--text-muted);
}

/* ======================================================
   ECRAN INFOS & CREDIT
   ====================================================== */
.info-logo-container {
    text-align: center;
    margin-bottom: 24px;
}

.info-logo-large {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 10px var(--primary-light));
}

.info-logo-container h2 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
}

.info-logo-container p {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.info-details h3 {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}

.info-details p {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(240, 240, 255, 0.8);
    margin-bottom: 12px;
}

.info-details ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-details li {
    font-size: 12px;
    color: rgba(240, 240, 255, 0.8);
    line-height: 1.4;
}

.info-details li strong {
    color: var(--secondary);
}

.info-credits {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 24px;
}

/* ======================================================
   BARRE DE NAVIGATION BASSE (APP NAVBAR)
   ====================================================== */
.app-navbar {
    height: 72px;
    background-color: rgba(0, 0, 0, 0.55);
    border-top: 1px solid var(--bg-card-border);
    backdrop-filter: blur(15px);
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding-bottom: var(--safe-area-bottom);
}

.nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    gap: 4px;
    cursor: pointer;
    transition: color 0.2s;
    outline: none;
}

.nav-tab:active {
    transform: scale(0.95);
}

.tab-icon {
    font-size: 20px;
    transition: transform 0.2s;
}

.tab-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-tab.active {
    color: var(--secondary);
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}

.nav-tab.active .tab-icon {
    transform: translateY(-2px);
    filter: drop-shadow(0 0 5px var(--secondary));
}

/* Premium Tab Special Style */
#tab-premium {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(255, 170, 0, 0.25) 100%) !important;
    border: 1.5px solid #ffaa00 !important;
    border-radius: 12px;
    margin: 6px 12px;
    padding: 2px 10px;
    color: #ffd700 !important;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.3);
    animation: shiny-glow 2s infinite alternate;
    transition: all 0.3s ease;
}

#tab-premium .tab-label {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    font-weight: 800;
}

#tab-premium .tab-icon {
    filter: drop-shadow(0 0 3px #ffd700);
}

#tab-premium:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.22) 0%, rgba(255, 170, 0, 0.4) 100%) !important;
    box-shadow: 0 0 18px rgba(255, 170, 0, 0.6) !important;
    transform: scale(1.02);
}

@keyframes shiny-glow {
    0% {
        box-shadow: 0 0 6px rgba(255, 170, 0, 0.2), inset 0 0 3px rgba(255, 215, 0, 0.1);
        border-color: rgba(255, 170, 0, 0.7) !important;
    }
    100% {
        box-shadow: 0 0 16px rgba(255, 170, 0, 0.5), inset 0 0 6px rgba(255, 215, 0, 0.2);
        border-color: rgba(255, 215, 0, 1) !important;
    }
}

/* ======================================================
   ANIMATIONS & EFFETS VISUELS
   ====================================================== */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pulse {
    animation: shadowPulse 2s infinite;
}

@keyframes shadowPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 240, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 240, 255, 0);
    }
}

/* ======================================================
   VISUEL DE VRAIES CARTES DE JEU (STYLE COMPACT ET LEGER)
   ====================================================== */
.hand-cards-container {
    display: flex;
    flex-direction: column;
    gap: 6px; /* Resserré */
}

.suit-cards-fan {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 6px 8px; /* Un peu plus d'espace */
    min-height: 72px; /* Hauteur augmentée pour de plus grandes cartes */
    position: relative;
    overflow: visible; /* Permet aux cartes de s'élever au survol */
}

.suit-cards-fan-symbol {
    font-size: 24px; /* Ajusté */
    font-weight: 800;
    width: 28px;
    text-align: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.suit-cards-fan-symbol.spade { color: var(--color-spade); text-shadow: 0 0 1px #fff, 0 0 2px #fff; }
.suit-cards-fan-symbol.heart { color: var(--color-heart); filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.4)); }
.suit-cards-fan-symbol.diamond { color: var(--color-diamond); filter: drop-shadow(0 0 4px rgba(255, 149, 0, 0.4)); }
.suit-cards-fan-symbol.club { color: var(--color-club); filter: drop-shadow(0 0 4px rgba(0, 128, 0, 0.4)); }

.cards-fan-row {
    display: flex;
    padding-left: 2px;
    position: relative;
    height: 64px; /* Rétabli pour plus de lisibilité */
    align-items: center;
    flex-grow: 1;
}

.bridge-playing-card {
    width: 44px; /* Largeur augmentée */
    height: 64px; /* Hauteur augmentée */
    background: #ffffff;
    border: 1px solid #d1d1d6;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3px 4px;
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.3);
    margin-right: -20px; /* Effet de chevauchement adapté à la nouvelle largeur */
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s;
    position: relative;
    cursor: pointer;
    user-select: none;
}

/* Survol et clic : élévation de la carte */
.bridge-playing-card:hover, .bridge-playing-card:active {
    transform: translateY(-8px) scale(1.05); /* Légère élévation */
    z-index: 200 !important; /* Force la carte au-dessus des autres */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    border-color: var(--secondary);
}

.card-top-left {
    font-family: var(--font-heading);
    font-size: 15px; /* Texte plus grand */
    font-weight: 800;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.card-suit-mini {
    font-size: 11px; /* Mini enseigne plus grande */
    margin-top: 1px;
}

.card-center-suit {
    font-size: 18px; /* Enseigne centrale beaucoup plus lisible */
    align-self: flex-end;
    line-height: 1;
    margin-bottom: 1px;
}

/* Couleurs des enseignes à l'intérieur des cartes blanches */
.bridge-playing-card.spade { color: #000000; }
.bridge-playing-card.heart { color: #ff0000; }
.bridge-playing-card.diamond { color: #ff9500; }
.bridge-playing-card.club { color: #008000; }

/* ======================================================
   GESTION DU RENDU DES SYMBOLES DANS L'APPLICATION
   ====================================================== */
.suit-symbol-spade,
.suit-symbol-heart,
.suit-symbol-diamond,
.suit-symbol-club {
    font-size: 1.3em;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
}

/* Couleurs par défaut (historique d'enchères sur fond blanc) */
.suit-symbol-heart { color: var(--color-heart); }
.suit-symbol-diamond { color: var(--color-diamond); }
.suit-symbol-club { color: var(--color-club); }
.suit-symbol-spade { color: var(--color-spade); }

/* --- SPÉCIFICITÉ POUR LES ZONES SOMBRES (Boutons QCM, Panneau Correction, Explication) --- */
/* Pour éviter que le Pique noir (#000000) soit invisible dans les zones sombres,
   on l'insère dans un magnifique petit badge circulaire blanc très contrasté. */
.choice-btn .suit-symbol-spade,
.correction-panel .suit-symbol-spade,
.explanation-box .suit-symbol-spade,
.quiz-question-prompt .suit-symbol-spade {
    background: none !important; /* Suppression complète du fond blanc */
    color: #000000 !important; /* Pique noir */
    font-size: 1.3em; /* Même grande taille que précédemment */
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    /* Ombre blanche (halo lumineux) ultra-propre et lisible sur fond noir */
    text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff, 0 0 6px #ffffff, 0 0 8px #ffffff !important;
}

/* ======================================================
   DISPOSITION COTE-A-COTE : MAIN ET PROPOSITIONS QCM
   ====================================================== */
.hand-and-choices-wrapper {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: stretch;
    margin-bottom: 8px;
    overflow: visible; /* Permet aux cartes de s'élever au survol */
}

/* Ajustement des proportions dynamiquement */
.hand-and-choices-wrapper #quiz-hand-group {
    flex: 1.25 !important; /* Plus de place pour les 13 cartes */
    margin-bottom: 0 !important; /* Reset margin */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hand-and-choices-wrapper #quiz-interactive-column {
    flex: 0.75 !important; /* Colonne compacte et élégante pour les boutons QCM */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

/* Ajustement si la main est masquée (Quiz Signification) */
#quiz-hand-group[style*="display: none"] ~ #quiz-interactive-column {
    flex: 1 !important; /* Pleine largeur automatique quand il n'y a pas de main */
}

/* Rendre le bouton "Propositions" plus grand et tactile verticalement */
#btn-reveal-choices {
    height: 100%;
    min-height: 144px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}

/* ======================================================
   SÉLECTEUR DE THÈMES VISUEL HAUTE FIDÉLITÉ (CARDS GRID)
   ====================================================== */
.theme-visual-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 8px;
}

.theme-visual-card {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
}

.theme-visual-card:hover {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
}

.theme-visual-card.selected {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.15);
}

/* Specific glows for selected cards */
body.theme-classic .theme-visual-card.selected { border-color: #ffaa00; box-shadow: 0 0 15px rgba(255, 170, 0, 0.25); }
body.theme-midnight .theme-visual-card.selected { border-color: #00f0ff; box-shadow: 0 0 15px rgba(0, 240, 255, 0.35); }
body.theme-royal .theme-visual-card.selected { border-color: #ffaa00; box-shadow: 0 0 15px rgba(255, 170, 0, 0.25); }
body.theme-vegas .theme-visual-card.selected { border-color: #ffaa00; box-shadow: 0 0 15px rgba(255, 170, 0, 0.25); }

/* The thumbnail preview */
.theme-thumbnail {
    height: 52px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.classic-thumb { background: radial-gradient(circle at top, #0a5237 0%, #032517 100%); }
.midnight-thumb { background: radial-gradient(circle at top, #16162a 0%, #09090e 100%); }
.royal-thumb { background: radial-gradient(circle at top, #0f4c81 0%, #03162d 100%); }
.vegas-thumb { background: radial-gradient(circle at top, #7a1c1c 0%, #220303 100%); }

/* Thumbnails mini elements */
.thumb-mini-card {
    width: 22px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #d1d1d6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #000000;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
}
.thumb-mini-card.cyber {
    background: #09090e;
    color: #00f0ff;
    border: 1px solid #00f0ff;
    box-shadow: 0 0 5px rgba(0,240,255,0.4);
}
.thumb-mini-card.royal {
    border: 1px solid #ffaa00;
}
.thumb-mini-card.vegas {
    border: 1px solid #ffd000;
}

.thumb-mini-btn {
    width: 26px;
    height: 14px;
    border-radius: 4px;
    background: #ffaa00;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.thumb-mini-btn.cyber {
    background: #00f0ff;
    box-shadow: 0 0 5px rgba(0,240,255,0.4);
}

.theme-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.theme-card-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.theme-card-desc {
    font-size: 10px;
    color: var(--text-muted);
}

/* ======================================================
   DEFINITIONS DES CHARTES GRAPHIQUES (THEMES DYNAMIQUES)
   ====================================================== */

/* ---------------------------------------------
   1. Thème Classique Feutre Vert (IntoBridge)
   --------------------------------------------- */
body.theme-classic {
    --bg-main: #043521;
    --bg-gradient: radial-gradient(circle at top, #0a5237 0%, #032517 100%);
    --bg-card: rgba(2, 25, 15, 0.65);
    --primary: #ffaa00;
    --primary-light: #ffd000;
    --secondary: #00f0ff;
    --btn-primary-bg: linear-gradient(135deg, var(--primary) 0%, #b87700 100%);
    --btn-primary-hover-bg: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    --btn-text-color: #043521;
}

/* ---------------------------------------------
   2. Thème Midnight Cyber (Overhaul Visuel Cyber)
   --------------------------------------------- */
body.theme-midnight {
    --bg-main: #0d0d1e;
    --bg-gradient: radial-gradient(circle at top, #16162a 0%, #09090e 100%);
    --bg-card: rgba(22, 22, 42, 0.65);
    --primary: #00f0ff; /* Cyan cyber */
    --primary-light: #80f7ff;
    --secondary: #ff007f; /* Rose néon */
    --btn-primary-bg: linear-gradient(135deg, var(--primary) 0%, #0088cc 100%);
    --btn-primary-hover-bg: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    --btn-text-color: #09090e;
}

/* Midnight Overhaul: Vraies cartes de jeu sombres futuristes */
body.theme-midnight .bridge-playing-card {
    background: #09090e !important;
    border: 1px solid rgba(0, 240, 255, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.25) !important;
}
body.theme-midnight .bridge-playing-card.spade { color: #00f0ff !important; }
body.theme-midnight .bridge-playing-card.heart { color: #ff007f !important; }
body.theme-midnight .bridge-playing-card.diamond { color: #ffaa00 !important; }
body.theme-midnight .bridge-playing-card.club { color: #39ff14 !important; }

/* Midnight Overhaul: Boutons QCM avec bordures cyan néon fines */
body.theme-midnight .choice-btn {
    background-color: rgba(0, 240, 255, 0.03) !important;
    border: 1px solid rgba(0, 240, 255, 0.2) !important;
}
body.theme-midnight .choice-btn:hover {
    background-color: rgba(0, 240, 255, 0.08) !important;
    border-color: #00f0ff !important;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.2) !important;
}

/* Midnight Overhaul: En-têtes, badges et éléments */
body.theme-midnight .hcp-badge {
    background-color: rgba(0, 240, 255, 0.15) !important;
    border-color: #00f0ff !important;
}
body.theme-midnight .card-glass {
    border-color: rgba(0, 240, 255, 0.15) !important;
}
body.theme-midnight .auction-grid {
    border-color: rgba(0, 240, 255, 0.2) !important;
}

/* ---------------------------------------------
   3. Thème Royal Feutre Bleu (Overhaul Casino Prestige)
   --------------------------------------------- */
body.theme-royal {
    --bg-main: #082c54;
    --bg-gradient: radial-gradient(circle at top, #0f4c81 0%, #03162d 100%);
    --bg-card: rgba(3, 22, 45, 0.65);
    --primary: #ffaa00; /* Or de casino */
    --primary-light: #ffd000;
    --secondary: #00e5ff;
    --btn-primary-bg: linear-gradient(135deg, var(--primary) 0%, #b87700 100%);
    --btn-primary-hover-bg: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    --btn-text-color: #03162d;
}

/* Royal Overhaul: Vraies cartes avec liserés or et ombres prononcées */
body.theme-royal .bridge-playing-card {
    border: 1px solid #ffaa00 !important;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Royal Overhaul: Boutons QCM or mat */
body.theme-royal .choice-btn {
    background-color: rgba(255, 170, 0, 0.02) !important;
    border: 1px solid rgba(255, 170, 0, 0.15) !important;
}
body.theme-royal .choice-btn:hover {
    background-color: rgba(255, 170, 0, 0.08) !important;
    border-color: #ffaa00 !important;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.2) !important;
}

body.theme-royal .hcp-badge {
    background-color: rgba(255, 170, 0, 0.15) !important;
    border-color: #ffaa00 !important;
}

/* ---------------------------------------------
   4. Thème Vegas Feutre Rouge (Overhaul High-Roller Casino)
   --------------------------------------------- */
body.theme-vegas {
    --bg-main: #f5f7fa;      /* Blanc cassé feutre premium */
    --bg-gradient: radial-gradient(circle at top, #ffffff 0%, #e4e7eb 100%);
    --bg-card: rgba(255, 255, 255, 0.88); /* Blanc vitreux semi-transparent glossy */
    --bg-card-border: rgba(0, 0, 0, 0.08);
    --primary: #102a43;      /* Bleu ardoise de championnat (contraste élevé) */
    --primary-light: #243b53;
    --secondary: #1976d2;    /* Bleu moderne */
    --btn-primary-bg: linear-gradient(135deg, #102a43 0%, #243b53 100%);
    --btn-primary-hover-bg: linear-gradient(135deg, #243b53 0%, #334e68 100%);
    --btn-text-color: #ffffff;
    --text-main: #102a43;    /* Texte foncé très lisible */
    --text-muted: #627d98;

    /* Level Chips variables for Vegas theme */
    --chip-active-border: #1976d2;
    --chip-active-bg: rgba(25, 118, 210, 0.12);
    --chip-active-color: #1976d2;
    --chip-active-shadow: 0 4px 10px rgba(25, 118, 210, 0.15);
    
    --chip-inactive-border: rgba(16, 42, 67, 0.15);
    --chip-inactive-bg: rgba(16, 42, 67, 0.03);
    --chip-inactive-color: #627d98;
}


/* Vegas Overhaul: Vraies cartes avec contours épurés */
body.theme-vegas .bridge-playing-card {
    border: 1px solid rgba(16, 42, 67, 0.15) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    background-color: #ffffff !important;
}

/* Vegas Overhaul: Boutons QCM avec fond clair et bords adoucis */
body.theme-vegas .choice-btn {
    background-color: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #102a43 !important;
}
body.theme-vegas .choice-btn:hover {
    background-color: rgba(16, 42, 67, 0.05) !important;
    border-color: #102a43 !important;
    color: #102a43 !important;
    box-shadow: 0 4px 8px rgba(16, 42, 67, 0.1) !important;
}

body.theme-vegas .hcp-badge {
    background-color: rgba(16, 42, 67, 0.08) !important;
    border-color: #102a43 !important;
    color: #102a43 !important;
}

/* Vegas Overhaul: Rendre les encadrés de la page d'accueil (card-glass) parfaitement visibles */
body.theme-vegas .card-glass {
    background-color: #d6dce2 !important; /* Perfect soft steel-grey for ultimate contrast with white cards */
    border: 1px solid rgba(16, 42, 67, 0.12) !important;
    box-shadow: 0 8px 24px rgba(16, 42, 67, 0.06) !important;
}




/* Vegas Overhaul: Pave Explication Pédagogique (Correction) contrasté et lisible */
body.theme-vegas .explanation-box {
    background-color: rgba(16, 42, 67, 0.04) !important;
    border: 1px solid rgba(16, 42, 67, 0.1) !important;
}
body.theme-vegas .explanation-title {
    color: #627d98 !important;
}
body.theme-vegas #lbl-correction-meaning {
    color: #102a43 !important;
}

/* Vegas Overhaul: Rendre les entrées de saisie et dropdowns très marqués et haut de gamme dans le thème blanc */
body.theme-vegas .dropdown-trigger,
body.theme-vegas .form-select,
body.theme-vegas input[type="text"],
body.theme-vegas .pseudo-input,
body.theme-vegas #txt-pseudo {
    background-color: #ffffff !important;
    border: 1.5px solid #aebfd0 !important; /* Steel blue/light slate border for high legibility */
    color: #102a43 !important;
    box-shadow: 0 2px 6px rgba(16, 42, 67, 0.04) !important;
    transition: all 0.2s ease !important;
}

body.theme-vegas .dropdown-trigger:hover,
body.theme-vegas .form-select:hover,
body.theme-vegas input[type="text"]:focus,
body.theme-vegas #txt-pseudo:focus {
    border-color: #1976d2 !important; /* Modern focus blue */
    box-shadow: 0 4px 10px rgba(25, 118, 210, 0.1) !important;
}



/* ======================================================
   DROPDOWNS PERSONNALISÉS HAUTE FIDÉLITÉ (CUSTOM SELECTS)
   ====================================================== */
.custom-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-trigger {
    width: 100%;
    height: 48px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.dropdown-trigger:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.custom-dropdown.open .dropdown-trigger {
    border-color: var(--secondary);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.25);
}

.trigger-caret {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.custom-dropdown.open .trigger-caret {
    transform: rotate(180deg);
}

.dropdown-menu-list {
    position: absolute;
    top: 54px;
    left: 0;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    background-color: var(--bg-main);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: none; /* Controlé par JS */
    padding: 6px;
    animation: dropdownFade 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Variante qui s'ouvre vers le HAUT (pour les dropdowns en bas de page) */
.custom-dropdown.dropdown-upward .dropdown-menu-list {
    top: auto;
    bottom: 54px;
    animation: dropdownFadeUp 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.header-dropdown-menu {
    top: 42px !important;
    left: auto !important;
    right: 0 !important;
    width: 180px !important;
    background-color: #12121c !important; /* Solid non-transparent background */
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75) !important;
}

.header-dropdown-menu .dropdown-item {
    font-size: 13px;
    font-weight: 500;
    color: #ffffff !important; /* Always white text for high contrast against dark background */
    transition: background-color 0.2s, transform 0.1s;
    border-radius: 8px;
    padding: 10px 12px;
}

.header-dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    transform: translateX(-2px);
}

.badge-hamburger {
    transition: transform 0.2s ease-in-out;
}

.user-badge:hover .badge-hamburger {
    transform: scale(1.15);
}

/* Éléments de liste */
.dropdown-item {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dropdown-item.selected {
    background-color: rgba(0, 240, 255, 0.1);
    color: var(--secondary);
}

.item-check {
    font-weight: 800;
    display: none;
}

.dropdown-item.selected .item-check {
    display: block;
}

/* Style spécifique pour les checkboxes de thèmes */
.theme-checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    color: var(--text-main);
}

.theme-checkbox-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.theme-checkbox-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    cursor: pointer;
}

.theme-checkbox-item input[type="checkbox"]:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.theme-checkbox-item input[type="checkbox"]:checked::before {
    content: "✓";
    font-size: 11px;
    font-weight: 900;
    color: #043521; /* Noir / Vert foncé contrasté */
}

/* Contraste texte thèmes cochés */
.theme-checkbox-item.checked {
    color: var(--primary-light);
    background-color: rgba(255, 170, 0, 0.06);
}

.theme-checkbox-label {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* ======================================================
   BIBLIOTHÈQUE DE COURS - STYLES GÉNÉRAUX & RESPONSIVES
   ====================================================== */
.lesson-container {
    padding: 8px 4px;
    color: var(--text-main);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lesson-title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #ffffff 30%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.05);
}

/* Heading glow in dark/midnight themes */
body.theme-classic .lesson-title { background: linear-gradient(135deg, #ffffff 40%, var(--primary-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
body.theme-midnight .lesson-title { background: linear-gradient(135deg, #ffffff 30%, var(--secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.3)); }
body.theme-royal .lesson-title { background: linear-gradient(135deg, #ffffff 40%, var(--primary-light) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
body.theme-vegas .lesson-title {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #102a43 !important;
    text-shadow: none !important;
}

.lesson-section {
    margin-bottom: 28px;
}

.lesson-section h2 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    border-bottom: 1.5px solid var(--bg-card-border);
    padding-bottom: 8px;
    color: var(--secondary);
}
body.theme-classic .lesson-section h2 { color: var(--primary-light); }
body.theme-royal .lesson-section h2 { color: var(--primary-light); }
body.theme-vegas .lesson-section h2 { color: #1976d2 !important; border-bottom-color: rgba(16, 42, 67, 0.12) !important; }

.lesson-subtitle {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}

.lesson-card {
    background-color: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 16px;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.lesson-card-header {
    background-color: rgba(255, 255, 255, 0.04);
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid var(--bg-card-border);
    color: #ffffff;
}

.lesson-card-body {
    padding: 16px;
}

.lesson-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px 20px;
    padding: 10px 0;
}

.lesson-label {
    flex-shrink: 0;
    max-width: 100%;
}

.lesson-value {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 240px;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.lesson-divider {
    height: 1px;
    background-color: var(--bg-card-border);
    margin: 14px 0;
}

/* Tables in Lessons */
.bid-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 4px 0;
    font-size: 14.5px;
    text-align: center;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--bg-card-border);
}

.bid-table th {
    padding: 8px 10px;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom: 1.5px solid var(--bg-card-border);
    color: var(--text-muted);
    font-family: var(--font-heading);
}

.bid-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--text-main);
    vertical-align: middle;
}

.bid-table tr:last-child td {
    border-bottom: none;
}

.bid-table th.col-active,
.bid-table td.col-active {
    background-color: rgba(0, 240, 255, 0.03);
}

.bid-highlight {
    font-weight: 800;
}

.bid-pass {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 500;
}

/* Suit Badges for Auctions */
.suit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    min-width: 54px;
    font-family: var(--font-heading);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
}

.suit-badge.spades {
    background: rgba(0, 240, 255, 0.08) !important;
    color: #00f0ff !important;
    border: 2px solid #00f0ff !important;
    text-shadow: 0 0 4px rgba(0, 240, 255, 0.4);
}

.suit-badge.hearts {
    background: rgba(255, 77, 77, 0.08) !important;
    color: #ff4d4d !important;
    border: 2px solid #ff4d4d !important;
    text-shadow: 0 0 4px rgba(255, 77, 77, 0.4);
}

.suit-badge.diamonds {
    background: rgba(255, 149, 0, 0.08) !important;
    color: #ff9500 !important;
    border: 2px solid #ff9500 !important;
    text-shadow: 0 0 4px rgba(255, 149, 0, 0.4);
}

.suit-badge.clubs {
    background: rgba(57, 255, 20, 0.08) !important;
    color: #39ff14 !important;
    border: 2px solid #39ff14 !important;
    text-shadow: 0 0 4px rgba(57, 255, 20, 0.4);
}

.suit-badge.notrump {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

.suit-badge.double {
    background: rgba(255, 59, 48, 0.08) !important;
    color: #ff3b30 !important;
    border: 2px solid #ff3b30 !important;
    text-shadow: 0 0 4px rgba(255, 59, 48, 0.4);
}

.suit-badge.redouble {
    background: rgba(52, 199, 89, 0.08) !important;
    color: #34c759 !important;
    border: 2px solid #34c759 !important;
    text-shadow: 0 0 4px rgba(52, 199, 89, 0.4);
}

/* Symboles plus petits et discrets lorsqu'ils apparaissent dans du texte (hors tableaux d'enchères) */
.lesson-value .suit-badge,
.lesson-subtitle .suit-badge,
.lesson-alert .suit-badge,
p .suit-badge,
li .suit-badge {
    padding: 2.5px 8px !important;
    font-size: 12.5px !important;
    min-width: 38px !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
    vertical-align: middle !important;
    margin: 0 2px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

/* Alerts / Notes Blocks */
.lesson-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    margin: 16px 0;
    font-size: 15px;
    line-height: 1.5;
}

.lesson-alert.alert-info {
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.15);
    color: rgba(240, 240, 255, 0.95);
}

.lesson-alert.alert-warning {
    background: rgba(255, 170, 0, 0.05);
    border: 1px solid rgba(255, 170, 0, 0.15);
    color: rgba(240, 240, 255, 0.95);
}

/* Responsive adjustment for mobiles */
@media (max-width: 520px) {
    .lesson-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .lesson-label {
        width: 100% !important;
        display: flex;
        justify-content: center;
    }
    .bid-table {
        width: 100% !important;
        max-width: 280px;
    }
}

/* ======================================================
   VEGAS (WHITE THEME) SPECIFIC OVERRIDES FOR LESSON VIEWER
   ====================================================== */
body.theme-vegas .lesson-container {
    color: #102a43 !important;
}

body.theme-vegas .lesson-card {
    background-color: #ffffff !important;
    border-color: rgba(16, 42, 67, 0.12) !important;
    box-shadow: 0 4px 16px rgba(16, 42, 67, 0.05) !important;
}

body.theme-vegas .lesson-card-header {
    background-color: rgba(16, 42, 67, 0.03) !important;
    border-bottom-color: rgba(16, 42, 67, 0.08) !important;
    color: #102a43 !important;
}

body.theme-vegas .lesson-value {
    color: #102a43 !important;
}

body.theme-vegas .lesson-divider {
    background-color: rgba(16, 42, 67, 0.08) !important;
}

body.theme-vegas .bid-table {
    background-color: #ffffff !important;
    border-color: rgba(16, 42, 67, 0.12) !important;
}

body.theme-vegas .bid-table th {
    background-color: rgba(16, 42, 67, 0.02) !important;
    color: #627d98; /* Retrait de !important pour permettre les couleurs de vulnérabilité */
}

body.theme-vegas .bid-table td {
    color: #102a43; /* Retrait de !important pour permettre les couleurs spécifiques des enchéres */
    border-bottom-color: rgba(16, 42, 67, 0.04) !important;
}

body.theme-vegas .bid-table th.col-active,
body.theme-vegas .bid-table td.col-active {
    background-color: rgba(25, 118, 210, 0.03) !important;
}

body.theme-vegas .bid-pass {
    color: #627d98 !important;
}

/* High-contrast Suit Badges for Vegas White Theme */
body.theme-vegas .suit-badge {
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(16, 42, 67, 0.06) !important;
}

body.theme-vegas .suit-badge.spades {
    background: rgba(21, 101, 192, 0.04) !important;
    color: #1565c0 !important;
    border: 2px solid #1565c0 !important;
    text-shadow: none !important;
}

body.theme-vegas .suit-badge.hearts {
    background: rgba(255, 0, 0, 0.04) !important;
    color: #d32f2f !important;
    border: 2px solid #d32f2f !important;
    text-shadow: none !important;
}

body.theme-vegas .suit-badge.diamonds {
    background: rgba(245, 124, 0, 0.04) !important;
    color: #e65100 !important;
    border: 2px solid #e65100 !important;
    text-shadow: none !important;
}

body.theme-vegas .suit-badge.clubs {
    background: rgba(56, 142, 60, 0.06) !important;
    color: #1b5e20 !important;
    border: 2px solid #1b5e20 !important;
    text-shadow: none !important;
}

body.theme-vegas .suit-badge.notrump {
    background: rgba(16, 42, 67, 0.04) !important;
    color: #102a43 !important;
    border: 2px solid #102a43 !important;
    text-shadow: none !important;
}

body.theme-vegas .suit-badge.double {
    background: rgba(211, 47, 47, 0.04) !important;
    color: #d32f2f !important;
    border: 2px solid #d32f2f !important;
    text-shadow: none !important;
}

body.theme-vegas .suit-badge.redouble {
    background: rgba(27, 94, 32, 0.06) !important;
    color: #1b5e20 !important;
    border: 2px solid #1b5e20 !important;
    text-shadow: none !important;
}

body.theme-vegas .lesson-alert.alert-info {
    background: rgba(25, 118, 210, 0.04) !important;
    border-color: rgba(25, 118, 210, 0.12) !important;
    color: #102a43 !important;
}

body.theme-vegas .lesson-alert.alert-warning {
    background: rgba(255, 170, 0, 0.04) !important;
    border-color: rgba(255, 170, 0, 0.12) !important;
    color: #102a43 !important;
}

body.theme-vegas #screen-lesson {
    background-color: #f5f7fa !important;
}

body.theme-vegas #screen-lesson > div:first-child {
    background-color: #ffffff !important;
    border-bottom-color: rgba(16, 42, 67, 0.08) !important;
}

body.theme-vegas #screen-lesson > div:first-child svg {
    color: #1976d2 !important;
}

/* 4x Installment Promo Box styling */
.installment-promo-box {
    border: 1.5px solid var(--secondary) !important;
    background: rgba(0, 240, 255, 0.08) !important;
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.15);
    animation: box-glow 2s infinite alternate;
}

@keyframes box-glow {
    0% {
        box-shadow: 0 0 6px rgba(0, 240, 255, 0.15), inset 0 0 4px rgba(0, 240, 255, 0.05);
        border-color: rgba(0, 240, 255, 0.4) !important;
    }
    100% {
        box-shadow: 0 0 16px rgba(0, 240, 255, 0.35), inset 0 0 8px rgba(0, 240, 255, 0.15);
        border-color: rgba(0, 240, 255, 0.9) !important;
    }
}

/* Specific styling for suit badges inside the bidding panel (both quiz table and courses) */
.bid-table td .suit-badge {
    background-color: #12121c !important; /* Solid dark background for maximum readability */
    padding: 4px 8px !important;
    font-size: 15.5px !important;
    min-width: 52px !important;
    height: 29px !important;
    border-radius: 6px !important;
    border-width: 1.5px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-heading) !important;
    margin: 0 !important;
}

.bid-table td .bid-pass {
    font-size: 16.5px !important;
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Softer, standard-like badge for the question mark ? in bidding table */
.bid-question-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #12121c !important; /* Solid dark background identical to other bids */
    color: #00f0ff !important; /* Cyan text */
    border: 1.5px solid #00f0ff !important; /* Cyan border */
    font-weight: 800 !important;
    font-size: 15.5px !important;
    min-width: 52px !important;
    height: 29px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    font-family: var(--font-heading) !important;
    line-height: 1 !important;
    margin: 0 auto !important;
}

/* ======================================================
   VEGAS THEME (WHITE CHARTE) ACCESSIBILITY OVERRIDES
   ====================================================== */
body.theme-vegas .app-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(16, 42, 67, 0.08) !important;
}

body.theme-vegas .logo-title {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #102a43 !important;
}

body.theme-vegas .btn-premium.premium-active {
    background: rgba(184, 119, 0, 0.08) !important;
    border: 1.5px solid #a05a00 !important;
    color: #a05a00 !important;
    font-weight: 800 !important;
}

body.theme-vegas .app-navbar {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(16, 42, 67, 0.08) !important;
    box-shadow: 0 -4px 16px rgba(16, 42, 67, 0.04) !important;
}

body.theme-vegas .nav-tab {
    color: #627d98 !important;
}

body.theme-vegas .nav-tab.active {
    color: #1976d2 !important;
    text-shadow: none !important;
}

body.theme-vegas .nav-tab.active .tab-icon {
    filter: drop-shadow(0 2px 4px rgba(25, 118, 210, 0.2)) !important;
}

body.theme-vegas #tab-premium {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%) !important;
    border: 1.5px solid #ffaa00 !important;
    color: #102a43 !important;
    box-shadow: 0 4px 12px rgba(255, 170, 0, 0.15) !important;
}

body.theme-vegas #tab-premium .tab-label {
    color: #102a43 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

body.theme-vegas #tab-premium .tab-icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)) !important;
}

/* Vegas Theme Pricing Page High Contrast Overrides */
body.theme-vegas #screen-pricing {
    color: #102a43 !important;
}

body.theme-vegas #screen-pricing .top-title {
    color: #102a43 !important;
}

body.theme-vegas #screen-pricing .welcome-card {
    background: rgba(25, 118, 210, 0.05) !important;
    border: 1.5px solid rgba(25, 118, 210, 0.15) !important;
}

body.theme-vegas #screen-pricing .welcome-card h1 {
    color: #102a43 !important;
}

body.theme-vegas #screen-pricing .welcome-card p {
    color: #627d98 !important;
}

body.theme-vegas #screen-pricing .pricing-card {
    background: #ffffff !important;
    border: 1.5px solid rgba(16, 42, 67, 0.15) !important;
    color: #102a43 !important;
}

body.theme-vegas #screen-pricing .pricing-card.active {
    background: rgba(25, 118, 210, 0.03) !important;
    border: 2.5px solid #ffaa00 !important;
    box-shadow: 0 4px 12px rgba(255, 170, 0, 0.15) !important;
}

body.theme-vegas #screen-pricing .pricing-card h3 {
    color: #102a43 !important;
}

body.theme-vegas #screen-pricing .pricing-card .text-muted {
    color: #627d98 !important;
}

body.theme-vegas #screen-pricing .pricing-card div[style*="color: #ffd700"],
body.theme-vegas #screen-pricing .pricing-card div[style*="color: #fff"],
body.theme-vegas #screen-pricing .pricing-card div[style*="color: #ffffff"] {
    color: #102a43 !important;
}

body.theme-vegas #screen-pricing #plan-card-annual strong {
    color: #102a43 !important;
}

body.theme-vegas #screen-pricing #annual-card-price {
    color: #102a43 !important;
    font-weight: 800 !important;
}

body.theme-vegas #screen-pricing .degressive-step {
    background: rgba(16, 42, 67, 0.02) !important;
    border: 1.5px solid rgba(16, 42, 67, 0.1) !important;
}

body.theme-vegas #screen-pricing .degressive-step strong {
    color: #102a43 !important;
}

body.theme-vegas #screen-pricing .degressive-step span {
    color: #627d98 !important;
}

body.theme-vegas #screen-pricing .degressive-step#deg-step-2 {
    border-color: #1976d2 !important;
    background: rgba(25, 118, 210, 0.03) !important;
}

body.theme-vegas #screen-pricing .degressive-step#deg-step-2 span,
body.theme-vegas #screen-pricing .degressive-step#deg-step-2 strong {
    color: #1976d2 !important;
}

body.theme-vegas #screen-pricing .degressive-step#deg-step-3 {
    border-color: #388e3c !important;
    background: rgba(56, 142, 60, 0.03) !important;
}

body.theme-vegas #screen-pricing .degressive-step#deg-step-3 span,
body.theme-vegas #screen-pricing .degressive-step#deg-step-3 strong {
    color: #388e3c !important;
}

body.theme-vegas #screen-pricing .installment-promo-box {
    border-color: #1976d2 !important;
    background: rgba(25, 118, 210, 0.05) !important;
    box-shadow: none !important;
}

body.theme-vegas #screen-pricing .installment-promo-box div[style*="color: #ffffff"],
body.theme-vegas #screen-pricing .installment-promo-box div[style*="color: #fff"] {
    color: #102a43 !important;
}


body.theme-vegas #screen-pricing .card-glass {
    background: #ffffff !important;
    border: 1.5px solid rgba(16, 42, 67, 0.15) !important;
    color: #102a43 !important;
}

body.theme-vegas #screen-pricing .card-glass label {
    color: #102a43 !important;
}

body.theme-vegas #screen-pricing .card-glass div {
    color: #102a43 !important;
}

body.theme-vegas #screen-pricing .card-glass span {
    color: #102a43 !important;
}

body.theme-vegas #screen-pricing .card-glass span[id="receipt-gift"] {
    color: #1976d2 !important;
    font-weight: bold !important;
}

body.theme-vegas #screen-pricing #my-referral-code {
    background: rgba(16, 42, 67, 0.05) !important;
    color: #102a43 !important;
    border: 1px solid rgba(16, 42, 67, 0.1) !important;
}

/* Vegas Theme High Contrast Overrides for Premium Status Banner */
body.theme-vegas #premium-status-banner {
    background: rgba(56, 142, 60, 0.05) !important;
    border: 1.5px solid #388e3c !important;
}

body.theme-vegas #premium-status-banner div[style*="color: #4dff4d"] {
    color: #1b5e20 !important;
}

body.theme-vegas #premium-status-banner #renewal-degressive-bonus {
    color: #e65100 !important;
}

/* Green discount text in Vegas Theme receipt summary */
body.theme-vegas #screen-pricing #receipt-promo-container,
body.theme-vegas #screen-pricing #receipt-promo-container span,
body.theme-vegas #screen-pricing #receipt-referral-container,
body.theme-vegas #screen-pricing #receipt-referral-container span {
    color: #1b5e20 !important;
}

body.theme-vegas #screen-pricing #receipt-4x-line {
    background: rgba(25, 118, 210, 0.05) !important;
    border: 1.5px dashed rgba(25, 118, 210, 0.3) !important;
}

body.theme-vegas #screen-pricing #receipt-4x-line span {
    color: #1565c0 !important;
}

body.theme-vegas .installment-promo-box {
    border: 1.5px solid #1976d2 !important;
    background: rgba(25, 118, 210, 0.04) !important;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.06) !important;
}

body.theme-vegas .installment-promo-box span[style*="background: var(--secondary)"] {
    background: #1976d2 !important;
    color: #ffffff !important;
}

body.theme-vegas .installment-promo-box div[style*="color: #ffffff"] {
    color: #102a43 !important;
}

body.theme-vegas .installment-promo-box div[style*="color: var(--secondary)"] {
    color: #1565c0 !important;
}

/* Custom CSS states for the 4x payment toggle switch */
#toggle-4x:checked ~ #toggle-4x-track-v2 {
    background: rgba(0, 240, 255, 0.25) !important;
    border-color: rgba(0, 240, 255, 0.5) !important;
}

#toggle-4x:checked ~ #toggle-4x-thumb-v2 {
    background: #00f0ff !important;
    left: 24px !important;
}

body.theme-vegas #toggle-4x-track-v2 {
    background: #cbd5e1 !important;
    border: 1px solid #94a3b8 !important;
}

body.theme-vegas #toggle-4x-thumb-v2 {
    background: #e02424 !important;
    left: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Vegas White Theme Checked State */
body.theme-vegas #toggle-4x:checked ~ #toggle-4x-track-v2 {
    background: #1976d2 !important;
    border-color: #1565c0 !important;
}

body.theme-vegas #toggle-4x:checked ~ #toggle-4x-thumb-v2 {
    background: #ffffff !important;
    left: 24px !important;
}


/* Base style rules for pricing cards (to replace hardcoded HTML inline borders) */
.pricing-card {
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

.pricing-card.active {
    border: 2.5px solid #ffd700 !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4) !important;
}

/* Specific Vegas Theme Active Card rule to win CSS specificity */
body.theme-vegas #screen-pricing .pricing-card.active {
    border: 2.5px solid #e6a100 !important;
    box-shadow: 0 0 10px rgba(230, 161, 0, 0.25) !important;
}

/* ======================================================
   HALL OF FAME LEADERBOARD & AUTHENTICATION STYLES
   ====================================================== */
.hof-player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.hof-player-row:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Podium special visual highlights */
.hof-rank-1 {
    background: rgba(255, 215, 0, 0.08) !important;
    border-color: rgba(255, 215, 0, 0.25) !important;
}
.hof-rank-2 {
    background: rgba(192, 192, 192, 0.08) !important;
    border-color: rgba(192, 192, 192, 0.2) !important;
}
.hof-rank-3 {
    background: rgba(205, 127, 50, 0.08) !important;
    border-color: rgba(205, 127, 50, 0.2) !important;
}

.hof-player-name {
    font-weight: 700;
    font-size: 14px;
    color: #ffffff;
}

.hof-player-streak {
    font-size: 15px;
    font-weight: 800;
    color: #ff9500;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Vegas White Theme High Contrast Compat */
body.theme-vegas .hof-player-row {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}
body.theme-vegas .hof-player-row:hover {
    background: #e9ecef;
}
body.theme-vegas .hof-player-name {
    color: #212529;
}
body.theme-vegas .hof-player-streak {
    color: #d94a00;
}
body.theme-vegas .hof-rank-1 {
    background: #fffdf0 !important;
    border-color: #ffd700 !important;
}
body.theme-vegas .hof-rank-2 {
    background: #f1f3f5 !important;
    border-color: #ced4da !important;
}
body.theme-vegas .hof-rank-3 {
    background: #fff8f3 !important;
    border-color: #e59363 !important;
}
body.theme-vegas #screen-hall-of-fame h2 {
    color: #212529 !important;
}

/* Eviter l'étirement du placeholder sur les inputs de code PIN */
#auth-input-code:placeholder-shown,
#auth-input-new-code:placeholder-shown {
    letter-spacing: normal !important;
    font-weight: normal !important;
    font-size: 14px !important;
}