/* ============================================================================
 * CACTUS CLASH - Identite western (v92)
 * ----------------------------------------------------------------------------
 * Charge EN DERNIER (apres main.css, shop.css, lobby.css...) : ne fait qu'habiller.
 * Palette (planche validee le 30/10/2026) :
 *   Night #1B130E (fond)  Saddle #2A1E16 (panneaux)  Leather #3A2A1F (survol)  Wood #6B4A33 (bordures)
 *   Paper #F3E6CC (texte)  Sand #CDB28A (texte 2)  Dust #B39B7C (legendes)
 *   Sunset #E8692E (LA action de l'ecran)  Gold #F2B544 (pieces)  Cactus #6DB44F (marque, positif)
 *   Saguaro #2F6B3A  Team A #E2604E  Team B #33A6A2  Danger #A8322A
 * Polices : Rye (logo, grands titres) ; Barlow Condensed (interface, chiffres) ; Barlow (textes).
 * Les couleurs neon des autres feuilles ont ete converties a la palette (outil : recolor.py).
 * ========================================================================== */
:root {
    --cc-night: #1B130E; --cc-saddle: #2A1E16; --cc-leather: #3A2A1F; --cc-wood: #6B4A33; --cc-wood-dark: #4A3628;
    --cc-paper: #F3E6CC; --cc-sand: #CDB28A; --cc-dust: #B39B7C;
    --cc-sunset: #E8692E; --cc-sunset-dark: #9E4418; --cc-gold: #F2B544; --cc-cactus: #6DB44F; --cc-saguaro: #2F6B3A;
    --cc-team-a: #E2604E; --cc-team-b: #33A6A2; --cc-danger: #A8322A;
    --cc-display: 'Rye', 'Bangers', serif;
    --cc-ui: 'Barlow Condensed', 'Orbitron', sans-serif;
    --cc-text: 'Barlow', 'Rajdhani', sans-serif;
}

html, body { background: var(--cc-night); }
body { color: var(--cc-paper); }
::selection { background: var(--cc-sunset); color: var(--cc-night); }

/* ---------- Menu : fond ---------- */
#main-menu { background: var(--cc-night) !important; }
#main-menu .menu-bg, #main-menu .menu-bg-gradient { background: var(--cc-night) !important; }
#main-menu .menu-bg-particles, #main-menu .menu-bg-cactus { opacity: 0.25; }
#main-menu, #main-menu * { text-shadow: none !important; }

/* ---------- Barre du haut ---------- */
.menu-topbar { background: var(--cc-night) !important; border-bottom: 2px solid var(--cc-leather) !important; box-shadow: none !important; }
/* v109 : la barre du haut passe AU-DESSUS de la barre d'onglets (meme z-index 10 avant, les onglets venaient apres :
   le menu du profil qui descend etait cache derriere PLAY / LOADOUT / SHOP...) */
.menu-topbar { z-index: 30 !important; }
.logo-text { font-family: var(--cc-display) !important; color: var(--cc-paper) !important; letter-spacing: 1px !important; background: none !important; -webkit-text-fill-color: var(--cc-paper) !important; filter: none !important; }
.logo-icon, .logo-icon .lucide-icon { color: var(--cc-cactus) !important; filter: none !important; }
.user-currency { background: var(--cc-saddle) !important; border: 2px solid var(--cc-gold) !important; box-shadow: none !important; }
.user-currency, .user-currency * { color: var(--cc-gold) !important; font-family: var(--cc-ui) !important; }
.auth-login-btn { background: transparent !important; border: 2px solid var(--cc-sand) !important; color: var(--cc-paper) !important; font-family: var(--cc-ui) !important; letter-spacing: 1.5px !important; text-transform: uppercase; box-shadow: none !important; }
.auth-login-btn:hover { border-color: var(--cc-paper) !important; background: var(--cc-leather) !important; }
.guest-badge { background: var(--cc-leather) !important; color: var(--cc-sand) !important; border: 1px solid var(--cc-wood) !important; }
.user-profile { background: var(--cc-saddle) !important; border: 1px solid var(--cc-wood) !important; box-shadow: none !important; }
.user-profile:hover { background: var(--cc-leather) !important; }
.user-name { color: var(--cc-paper) !important; font-family: var(--cc-ui) !important; }
.user-avatar { background: var(--cc-saguaro) !important; border: 2px solid var(--cc-cactus); }
.avatar-level-ring { border-color: var(--cc-cactus) !important; box-shadow: none !important; }
.user-level-badge { background: var(--cc-leather) !important; color: var(--cc-sand) !important; border: 1px solid var(--cc-wood) !important; }
.user-xp-bar { background: var(--cc-leather) !important; }
.user-xp-fill { background: var(--cc-cactus) !important; box-shadow: none !important; }
#hub-toggle-btn, .hub-toggle-btn { background: var(--cc-saddle) !important; border: 1px solid var(--cc-wood) !important; color: var(--cc-paper) !important; box-shadow: none !important; }

/* ---------- Onglets ---------- */
.menu-nav { background: #22180F !important; border-bottom: 2px solid var(--cc-leather) !important; }
.nav-tab { color: var(--cc-sand) !important; }
.nav-tab .nav-text { font-family: var(--cc-ui) !important; font-weight: 700 !important; letter-spacing: 2px !important; font-size: 0.95em !important; }
.nav-tab:hover { background: var(--cc-saddle) !important; color: var(--cc-paper) !important; }
.nav-tab.active { color: var(--cc-paper) !important; background: var(--cc-leather) !important; box-shadow: none !important; }
.nav-tab.active .nav-icon, .nav-tab.active .lucide-icon { color: var(--cc-sunset) !important; }
.nav-tab::after { background: var(--cc-sunset) !important; box-shadow: none !important; }

/* ---------- Panneaux ---------- */
.character-showcase, .player-card, .map-select-container, .stats-container, .settings-container,
.menu-panel .panel-card, .stat-card, .profile-card {
    background: var(--cc-saddle) !important; border: 1px solid var(--cc-wood) !important; box-shadow: none !important;
}
.section-label { font-family: var(--cc-ui) !important; font-weight: 700 !important; letter-spacing: 3px !important; color: var(--cc-sand) !important; }
.player-card-header { background: var(--cc-leather) !important; border: 1px solid var(--cc-wood) !important; color: var(--cc-paper) !important; font-family: var(--cc-ui) !important; }
.player-stats-mini .stat-item { background: var(--cc-night) !important; border: 1px solid var(--cc-leather) !important; }
.player-stats-mini .stat-value { color: var(--cc-gold) !important; font-family: var(--cc-ui) !important; }
.player-stats-mini .stat-label { color: var(--cc-dust) !important; }

/* ---------- Cartes de jeu ---------- */
.play-card { background: var(--cc-saddle) !important; border: 2px solid var(--cc-wood) !important; box-shadow: none !important; }
.play-card::before, .play-card-glow { display: none !important; }
.play-card:hover { background: var(--cc-leather) !important; border-color: var(--cc-sunset) !important; transform: translateY(-2px); }
.play-card-title { font-family: var(--cc-ui) !important; font-weight: 700 !important; color: var(--cc-paper) !important; letter-spacing: 2px !important; }
.play-card-desc { color: var(--cc-sand) !important; font-family: var(--cc-text) !important; }
.play-card-icon, .play-card-icon .lucide-icon { color: var(--cc-sunset) !important; filter: none !important; }

/* Quick Play : la seule grosse action orange de l'ecran */
.main-play-btn { background: var(--cc-sunset) !important; border: 2px solid var(--cc-sunset-dark) !important; box-shadow: 0 6px 0 var(--cc-sunset-dark) !important; }
.main-play-btn:hover { background: #F07A3D !important; border-color: var(--cc-sunset-dark) !important; box-shadow: 0 4px 0 var(--cc-sunset-dark) !important; transform: translateY(2px) !important; }
.main-play-btn .play-card-title { font-family: var(--cc-display) !important; font-weight: 400 !important; color: var(--cc-night) !important; letter-spacing: 2px !important; font-size: 2.6em !important; }
.main-play-btn .play-card-desc { color: #3A1A0A !important; font-weight: 600; }
.main-play-btn .play-card-icon, .main-play-btn .play-card-icon .lucide-icon { color: var(--cc-night) !important; }
.main-play-btn .play-card-players { color: var(--cc-night) !important; font-family: var(--cc-ui) !important; font-weight: 700; letter-spacing: 1px; }
.main-play-btn .online-dot { background: var(--cc-saguaro) !important; box-shadow: none !important; }
.play-card-players { color: var(--cc-cactus) !important; }

.mode-card, .mode-card.mode-active { background: var(--cc-saddle) !important; border: 2px solid var(--cc-wood) !important; }
.mode-card:hover, .mode-card.mode-active:hover { border-color: var(--cc-sunset) !important; background: var(--cc-leather) !important; }
.mode-card .play-card-title { color: var(--cc-paper) !important; }

/* ---------- Cartes (maps) ---------- */
.map-card { background: transparent !important; border: 2px solid transparent !important; box-shadow: none !important; }
.map-card:hover { background: var(--cc-leather) !important; }
.map-card.selected { background: var(--cc-leather) !important; border-color: var(--cc-sunset) !important; box-shadow: none !important; }
.map-card .map-name, .map-card.selected .map-info .map-name { font-family: var(--cc-ui) !important; font-weight: 700 !important; font-size: 1.15em !important; color: var(--cc-paper) !important; letter-spacing: 0.5px !important; }
.map-card .map-type { color: var(--cc-sand) !important; }
.map-preview { border-radius: 6px !important; background-size: cover !important; background-position: center !important; }

/* ---------- Pied de page ---------- */
.menu-footer { background: var(--cc-night) !important; border-top: 2px solid var(--cc-leather) !important; color: var(--cc-dust) !important; }
.menu-footer a { color: var(--cc-sand) !important; }
.menu-footer a:hover { color: var(--cc-paper) !important; }

/* ---------- Boutons generiques ---------- */
.btn-primary, .lobby-btn-primary, .pause-btn.primary, .auth-submit-btn, .cs-buy-btn {
    background: var(--cc-sunset) !important; border: 2px solid var(--cc-sunset-dark) !important; color: var(--cc-night) !important;
    font-family: var(--cc-ui) !important; font-weight: 700 !important; letter-spacing: 1.5px; box-shadow: 0 4px 0 var(--cc-sunset-dark) !important; text-shadow: none !important;
}
.btn-primary:hover, .lobby-btn-primary:hover, .pause-btn.primary:hover, .auth-submit-btn:hover, .cs-buy-btn:hover { background: #F07A3D !important; }
.pause-btn { background: var(--cc-leather) !important; border: 2px solid var(--cc-wood) !important; color: var(--cc-paper) !important; font-family: var(--cc-ui) !important; font-weight: 700 !important; letter-spacing: 1.5px; text-transform: uppercase; }
.pause-btn:hover { border-color: var(--cc-sand) !important; }
.pause-btn.danger { background: var(--cc-danger) !important; border-color: #7A231D !important; color: var(--cc-paper) !important; }
.pause-btn.warning { background: var(--cc-leather) !important; }
#pause-menu .pause-container { background: var(--cc-saddle) !important; border: 2px solid var(--cc-wood) !important; box-shadow: 0 20px 60px rgba(0,0,0,.6) !important; }
#pause-menu h2 { font-family: var(--cc-display) !important; font-weight: 400 !important; color: var(--cc-paper) !important; letter-spacing: 2px; text-shadow: none !important; }
#pause-menu h2 .lucide-icon { color: var(--cc-sunset) !important; }
.pause-hint { color: var(--cc-dust) !important; }
.pause-code-container { background: var(--cc-night) !important; border: 1px solid var(--cc-wood) !important; }
.pause-code-value { color: var(--cc-gold) !important; font-family: var(--cc-ui) !important; letter-spacing: 4px !important; }
.pause-code-label { color: var(--cc-dust) !important; font-family: var(--cc-ui) !important; }
.pause-code-copy-btn { border-color: var(--cc-sand) !important; color: var(--cc-paper) !important; background: transparent !important; }
.pause-code-copy-btn:hover { background: var(--cc-leather) !important; }

/* ---------- Salles personnalisees (lobby) ---------- */
.lobby-select-btn { background: var(--cc-night) !important; border: 1px solid var(--cc-wood) !important; color: var(--cc-sand) !important; font-family: var(--cc-ui) !important; letter-spacing: 1px; }
.lobby-select-btn:hover { border-color: var(--cc-sand) !important; color: var(--cc-paper) !important; }
.lobby-select-btn.active { background: var(--cc-leather) !important; border: 2px solid var(--cc-sunset) !important; color: var(--cc-paper) !important; }
#btn-custom-map-select { background: var(--cc-night) !important; color: var(--cc-gold) !important; border: 1px dashed var(--cc-gold) !important; }
#btn-custom-map-select.active { border-style: solid !important; border-width: 2px !important; }

/* ---------- Petites icones des onglets du hub social ---------- */
.hub-tab .hub-tab-ico { vertical-align: -2px; margin-right: 3px; }
.hub-tab { color: var(--cc-dust) !important; font-family: var(--cc-ui) !important; font-weight: 600 !important; letter-spacing: 0.5px; }
.hub-tab:hover { color: var(--cc-paper) !important; background: rgba(243, 230, 204, 0.06) !important; }
.hub-tab.active { color: var(--cc-paper) !important; background: var(--cc-leather) !important; box-shadow: inset 0 -2px 0 var(--cc-sunset); }
.hub-tab.active .hub-tab-ico { color: var(--cc-sunset); }

/* ---------- Loadout / skins ---------- */
.loadout-section .section-title, .stats-section h3, .clips-section .section-title { font-family: var(--cc-ui) !important; color: var(--cc-paper) !important; letter-spacing: 1.5px; text-shadow: none !important; }
.loadout-preview, .preview-controls { border-color: var(--cc-wood) !important; }
.preview-rotate, .preview-zoom-btn, .preview-reset { background: var(--cc-leather) !important; border: 1px solid var(--cc-wood) !important; color: var(--cc-sand) !important; }
.preview-rotate:hover, .preview-zoom-btn:hover, .preview-reset:hover { border-color: var(--cc-sunset) !important; color: var(--cc-paper) !important; }
.accessory-btn { background: var(--cc-saddle) !important; }
.accessory-btn .accessory-name { color: var(--cc-sand) !important; }
.accessory-btn.selected { background: var(--cc-leather) !important; border-color: var(--cc-sunset) !important; box-shadow: none !important; }
.accessory-btn.selected .accessory-name { color: var(--cc-paper) !important; }
.color-btn.selected { border-color: var(--cc-sunset) !important; }
.weapon-skin-slot .skin-name, .skin-name { color: var(--cc-gold) !important; }

/* ---------- Stats / clips ---------- */
.stats-header-card, .clips-section { border-color: var(--cc-wood) !important; }
.stats-level, #stats-level, .clips-ico { color: var(--cc-gold) !important; }
.stat-card-icon { background: var(--cc-leather) !important; color: var(--cc-gold) !important; }
button.sel { background: var(--cc-leather) !important; border-color: var(--cc-sunset) !important; color: var(--cc-paper) !important; }

/* ---------- Boutique ---------- */
.shop-category-btn.active { background: var(--cc-leather) !important; border-color: var(--cc-sunset) !important; color: var(--cc-paper) !important; }
.shop-header h2 { color: var(--cc-paper) !important; text-shadow: none !important; }

/* ============================================================================
 * HUD EN PARTIE (v92) - plaques de bois sombre, chiffres en Barlow Condensed,
 * argent en or, kill feed sur papier, vie dans un cadre creme rempli de vert cactus.
 * Seules les couleurs / bordures / polices changent : les positions restent celles d'avant
 * (rien ne bouge sur telephone).
 * ========================================================================== */
#round-bar { background: rgba(27, 19, 14, 0.88) !important; border: 2px solid var(--cc-wood) !important; border-radius: 10px !important; margin-top: 10px; padding: 4px 24px !important; }
#team-score-a, #team-score-b, #round-timer { font-family: var(--cc-ui) !important; font-weight: 700 !important; text-shadow: none !important; }
#team-score-a { color: var(--cc-team-a, #E2604E) !important; }
#team-score-b { color: var(--cc-team-b, #33A6A2) !important; }
#round-timer { color: var(--cc-paper) !important; letter-spacing: 1px; }
#round-timer.warning { color: var(--cc-sunset) !important; }
#round-timer.critical { color: #E2604E !important; }
#round-info { background: rgba(27, 19, 14, 0.7); border-radius: 4px; padding: 2px 10px; font-family: var(--cc-ui); font-weight: 600; letter-spacing: 2px; color: var(--cc-sand) !important; text-transform: uppercase; }
#round-kills { font-family: var(--cc-ui); font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
#round-kills-a { color: #E2604E !important; }
#round-kills-b { color: #5FC4BF !important; }

#stats-container { background: rgba(27, 19, 14, 0.82); border: 1px solid var(--cc-wood); border-radius: 8px; padding: 6px 14px; }
#money-display { color: var(--cc-gold) !important; text-shadow: none !important; font-family: var(--cc-ui) !important; margin-bottom: 2px !important; }
#money-display:empty { display: none; }
#stats-display { font-family: var(--cc-ui); font-weight: 600; letter-spacing: 1px; color: var(--cc-sand) !important; }
#stats-display .kills { color: var(--cc-paper) !important; }
#stats-display .deaths { color: var(--cc-sand) !important; }
#stats-display .kd { color: var(--cc-gold) !important; }

#health-container { background: var(--cc-leather) !important; border: 2px solid var(--cc-sand) !important; border-radius: 8px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important; }
#health-bar { background-image: linear-gradient(90deg, #A8322A 0%, #C4472A 25%, #E8692E 50%, #8FB048 75%, #6DB44F 100%) !important; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18) !important; }
#health-text { font-family: var(--cc-ui) !important; color: var(--cc-paper) !important; font-size: 1.05em !important; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.8) !important; }
#armor-container { background: var(--cc-leather) !important; border: 2px solid var(--cc-sand) !important; border-radius: 6px !important; }
#armor-bar { background: linear-gradient(90deg, #2B7F7C, #33A6A2, #5FC4BF) !important; box-shadow: none !important; }
#armor-text { color: var(--cc-paper) !important; font-family: var(--cc-ui) !important; text-shadow: 0 1px 2px #000 !important; }
#armor-icon { color: #5FC4BF !important; }

#weapon-name { font-family: var(--cc-ui) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1.5px; color: var(--cc-gold) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important; }
#ammo-display { display: inline-block; background: rgba(27, 19, 14, 0.82); border: 1px solid var(--cc-wood); border-radius: 8px; padding: 0 14px 2px; font-family: var(--cc-ui) !important; text-shadow: none !important; line-height: 1.1; }
#ammo-display .current { color: var(--cc-paper) !important; }
#ammo-display .divider { color: var(--cc-wood) !important; }
#ammo-display .reserve { color: var(--cc-sand) !important; }
.weapon-slot { background: rgba(27, 19, 14, 0.8) !important; border: 1px solid var(--cc-wood) !important; border-radius: 6px !important; color: var(--cc-dust) !important; font-family: var(--cc-ui) !important; font-weight: 600 !important; letter-spacing: 1px; text-transform: uppercase; }
.weapon-slot.active { background: rgba(27, 19, 14, 0.92) !important; border: 2px solid var(--cc-sunset) !important; color: var(--cc-paper) !important; box-shadow: none !important; }
.weapon-slot .slot-key { color: var(--cc-sand); }
.weapon-slot.active .slot-key { color: var(--cc-sunset); }
.grenade-slot { background: rgba(27, 19, 14, 0.8) !important; border: 1px solid var(--cc-wood) !important; }
.grenade-slot.selected { border: 2px solid var(--cc-sunset) !important; box-shadow: none !important; }
.grenade-slot .g-count { color: var(--cc-gold) !important; font-weight: 700; }

/* kill feed : billets de papier */
.kill-entry { background: rgba(243, 230, 204, 0.93) !important; border: none !important; border-radius: 4px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--cc-night) !important; font-family: var(--cc-ui); font-weight: 700; font-size: 1.05em; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.kill-entry .killer, .kill-entry .victim { text-shadow: none !important; }
.kill-entry .killer.team-a, .kill-entry .victim.team-a { color: #B5402F !important; }
.kill-entry .killer.team-b, .kill-entry .victim.team-b { color: #2B7F7C !important; }
.kill-entry .weapon { color: var(--cc-leather) !important; background: rgba(27, 19, 14, 0.08) !important; }
.kill-entry .weapon.premium { color: var(--cc-sunset-dark) !important; text-shadow: none !important; }
.kill-entry .headshot-icon { color: var(--cc-sunset-dark) !important; text-shadow: none !important; }
.kill-entry .hitzone { color: var(--cc-wood) !important; }

/* ---------- Boutique : banniere "Featured" (fond cuir, la rarete reste en lueur discrete) ---------- */
.shop-hero { background: var(--cc-night) !important; border: 2px solid var(--cc-wood) !important; }
.hero-slide { background:
        radial-gradient(120% 140% at 85% 30%, rgba(var(--hero-rgb, 242, 181, 68), 0.13), transparent 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(232, 105, 46, 0.10), transparent 60%),
        linear-gradient(120deg, #2A1E16, #1B130E) !important; }
.hero-title { font-family: var(--cc-display) !important; font-weight: 400 !important; text-shadow: none !important; }
.hero-desc { color: var(--cc-sand) !important; }
.hero-list li { color: var(--cc-paper) !important; }
.hero-cta { background: var(--cc-sunset) !important; color: var(--cc-night) !important; box-shadow: 0 3px 0 var(--cc-sunset-dark) !important; }

/* ---------- Onglet POSSE ---------- */
#tab-team h2, #tab-team h3, .team-empty h3 { font-family: var(--cc-ui) !important; color: var(--cc-paper) !important; }
.team-no-clan h2 { font-family: var(--cc-display) !important; font-weight: 400 !important; color: var(--cc-paper) !important; letter-spacing: 1px; text-shadow: none !important; }
.team-no-clan p { color: var(--cc-sand) !important; }
.team-create-btn { background: var(--cc-sunset) !important; color: var(--cc-night) !important; border: 2px solid var(--cc-sunset-dark) !important; font-family: var(--cc-ui) !important; font-weight: 700 !important; letter-spacing: 1.5px; box-shadow: none !important; }
.team-create-form input { background: var(--cc-night) !important; border: 1px solid var(--cc-wood) !important; color: var(--cc-paper) !important; }

/* ---------- Chat en partie, zone d'achat ---------- */
.chat-message { background: rgba(27, 19, 14, 0.78) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--cc-paper); font-family: var(--cc-text); }
.chat-message .sender { color: var(--cc-sunset) !important; font-family: var(--cc-ui); }
.chat-message.system { border-left: 2px solid var(--cc-gold) !important; color: var(--cc-sand); }
.chat-message.system .sender { color: var(--cc-gold) !important; }
#buy-zone-indicator { font-family: var(--cc-ui) !important; font-weight: 700; letter-spacing: 1.5px; }
#buy-zone-indicator.in-zone { background: rgba(27, 19, 14, 0.85) !important; border: 2px solid var(--cc-gold) !important; color: var(--cc-gold) !important; }
#buy-zone-indicator.out-zone { background: rgba(27, 19, 14, 0.85) !important; border: 2px solid #E2604E !important; color: #E2604E !important; }
#buy-time-remaining { font-family: var(--cc-ui) !important; color: var(--cc-gold) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important; }
.pause-code-copy-btn { font-family: var(--cc-ui) !important; font-weight: 700; letter-spacing: 1px; }

/* ---------- Ecran d'annonce de manche ---------- */
#round-announcement .score-a { color: var(--cc-team-a) !important; }
#round-announcement .score-b { color: var(--cc-team-b) !important; }
#round-announcement .round-title { color: var(--cc-sunset) !important; }

/* ---------- v95 : bandeau "Connection Lost" au-dessus de tout (commandes tactiles comprises) ---------- */
#connection-status { z-index: 100002 !important; background: rgba(168, 50, 42, 0.95) !important; border: 2px solid #7A231D; border-radius: 10px !important;
    color: var(--cc-paper); font-family: var(--cc-ui); font-weight: 700; letter-spacing: 1px; pointer-events: auto; touch-action: manipulation; }
#connection-status .reconnect-btn { display: block; margin: 12px auto 0 !important; font-family: var(--cc-ui); font-size: 1em; letter-spacing: 1.5px; text-transform: uppercase;
    background: var(--cc-paper) !important; color: #7A231D !important; min-height: 44px; }
#connection-status .reconnect-btn:disabled { opacity: 0.7; cursor: wait; }

/* ---------- v95 : annonce de manche / partie : une seule carte lisible, tailles qui suivent l'ecran ---------- */
#round-announcement { background: rgba(27, 19, 14, 0.72) !important; padding: 16px; text-align: center; }
#round-announcement .round-title { font-family: var(--cc-display) !important; font-weight: 400 !important; font-size: clamp(2rem, 7vw, 4rem) !important;
    letter-spacing: 3px !important; color: var(--cc-sunset) !important; text-shadow: 0 3px 0 #1B130E, 0 6px 18px rgba(0, 0, 0, 0.6) !important; line-height: 1.05; }
#round-announcement .round-subtitle { font-family: var(--cc-ui) !important; font-weight: 700; font-size: clamp(1rem, 3.2vw, 1.7rem) !important; letter-spacing: 2px !important;
    color: var(--cc-gold) !important; margin-top: 10px !important; text-transform: uppercase; max-width: 90vw; }
#round-announcement .round-scores { font-family: var(--cc-ui) !important; font-weight: 700; font-size: clamp(2rem, 6vw, 3rem) !important; margin-top: 12px !important; gap: 28px !important; color: var(--cc-paper); }
#round-announcement .winner-text { font-family: var(--cc-ui) !important; font-weight: 700; font-size: clamp(1.3rem, 4.5vw, 2.3rem) !important; letter-spacing: 3px;
    margin-top: 10px !important; animation: none !important; text-shadow: 0 2px 0 #1B130E !important; }
#round-announcement .round-bonus-line { font-family: var(--cc-ui); font-weight: 700; font-size: clamp(0.95rem, 2.6vw, 1.25rem); letter-spacing: 2px; margin-top: 12px; padding: 4px 14px;
    border-radius: 4px; display: none; }
#round-announcement .round-bonus-line.win { display: block; color: var(--cc-gold); background: rgba(27, 19, 14, 0.85); border: 1px solid var(--cc-gold); }
#round-announcement .round-bonus-line.lose { display: block; color: var(--cc-sand); background: rgba(27, 19, 14, 0.85); border: 1px solid var(--cc-wood); }
/* prime de manche affichee seule (hors annonce) : plus bas, pour ne rien cacher */
#round-bonus { top: 62% !important; font-family: var(--cc-ui) !important; font-weight: 700; letter-spacing: 2px; }
#round-bonus.win { background: rgba(27, 19, 14, 0.9) !important; border-color: var(--cc-gold) !important; color: var(--cc-gold) !important; }
#round-bonus.lose { background: rgba(27, 19, 14, 0.9) !important; border-color: var(--cc-wood) !important; color: var(--cc-sand) !important; }
/* telephone : le panneau argent / K / D commence apres les boutons reglages + pause (encoche comprise) */
html.cc-touch #stats-container { left: calc(112px + env(safe-area-inset-left, 0px)) !important; }

/* ---------- v95 : colonne des textes d'etat sous le score (voir StatusStack dans game.js) ---------- */
#cc-status-stack { position: fixed; left: 50%; transform: translateX(-50%); top: 110px; z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
#cc-status-stack > * { position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; margin: 0 !important; }
#cc-status-stack > #spawn-protection:not(.active) { display: none !important; }
#cc-status-stack #warmup-indicator, #cc-status-stack #freeze-text, #cc-status-stack #buy-time-remaining, #cc-status-stack #spawn-protection {
    font-family: var(--cc-ui) !important; font-weight: 700; letter-spacing: 2px; padding: 3px 12px; border-radius: 4px; background: rgba(27, 19, 14, 0.72); text-shadow: 0 1px 2px #000; white-space: nowrap; }
#cc-status-stack #warmup-indicator { color: var(--cc-gold) !important; font-size: 1.05em !important; }
#cc-status-stack #freeze-text { color: #9FD4E0 !important; font-size: 1.3em !important; }
#cc-status-stack #buy-time-remaining { color: var(--cc-gold) !important; font-size: 1em !important; }
#cc-status-stack #spawn-protection { color: #9FD4E0 !important; font-size: 0.95em !important; }
#seed-message-overlay { top: 36% !important; }   /* v95 : sous la colonne des textes d etat */

/* ---------- v95 : vote de carte sur petit ecran (telephone a l'horizontale) : tout tient, rien ne deborde ---------- */
#vote-map-overlay .vote-map-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }
@media (max-height: 520px), (max-width: 700px) {
    #vote-map-overlay .vote-map-container { padding: 10px 14px !important; width: 96% !important; max-height: 94vh; overflow-y: auto; border-radius: 12px !important; }
    #vote-map-overlay .vote-map-header { margin-bottom: 8px !important; }
    #vote-map-overlay .vote-map-header h2 { font-size: 1.05em !important; }
    #vote-map-overlay .vote-map-grid { grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important; }
    #vote-map-overlay .vote-map-card { padding: 8px 4px !important; border-radius: 8px !important; }
    #vote-map-overlay .vote-map-icon { font-size: 1.3em !important; margin-bottom: 2px !important; }
    #vote-map-overlay .vote-map-name { font-size: 0.75em !important; }
    #vote-map-overlay .vote-map-desc { display: none !important; }
    #vote-map-overlay .vote-map-votes { font-size: 1em !important; margin-top: 2px !important; }
    #vote-map-overlay .vote-leave-btn { padding: 6px 10px !important; font-size: 12px !important; }
}
/* en partie, les notifications (+coins...) passent en bas de l'ecran : elles ne couvrent plus le vote / l'annonce */
body.cc-ingame .menu-notification { top: auto !important; bottom: 18% !important; }
#round-announcement { background: rgba(27, 19, 14, 0.86) !important; }

/* ---------- v96 : vraies vignettes des cartes (menu + vote de fin de partie) ---------- */
.map-card[data-map="dust"] .map-preview { background: #2A1E16 url(../assets/maps/dust.jpg) center / cover no-repeat !important; }
.map-card[data-map="canyon"] .map-preview { background: #2A1E16 url(../assets/maps/canyon.jpg) center / cover no-repeat !important; }
.map-card[data-map="de_custom"] .map-preview { background: #2A1E16 url(../assets/maps/de_custom.jpg) center / cover no-repeat !important; }
.map-card[data-map="thorn_pit"] .map-preview { background: #2A1E16 url(../assets/maps/thorn_pit.jpg) center / cover no-repeat !important; }
.map-card[data-map="spine_yard"] .map-preview { background: #2A1E16 url(../assets/maps/spine_yard.jpg) center / cover no-repeat !important; }
.map-card[data-map="dusty_gulch"] .map-preview { background: #2A1E16 url(../assets/maps/dusty_gulch.jpg) center / cover no-repeat !important; }
.map-card[data-map="needle_factory"] .map-preview { background: #2A1E16 url(../assets/maps/needle_factory.jpg) center / cover no-repeat !important; }
.map-preview { width: 72px !important; height: 40px !important; box-shadow: inset 0 0 0 1px rgba(243, 230, 204, 0.15); }
.play-right .map-preview { width: 48px !important; height: 30px !important; }
.vote-map-thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #2A1E16 center / cover no-repeat; margin-bottom: 8px; box-shadow: inset 0 0 0 1px rgba(243, 230, 204, 0.15); }
@media (max-height: 520px), (max-width: 700px) { #vote-map-overlay .vote-map-thumb { margin-bottom: 3px !important; border-radius: 5px !important; } }

/* ---------- v100 : inspection de l'arme (touche F / bouton 🔍) : fiche western, plus lisible ---------- */
#inspect-hud .ins-vignette { background: radial-gradient(ellipse 58% 52% at 50% 52%, rgba(27,19,14,0) 40%, rgba(27,19,14,0.72) 100%) !important; }
#inspect-hud .ins-card { background: linear-gradient(160deg, rgba(58,42,31,0.92), rgba(27,19,14,0.92)) !important; border: 1px solid #6B4A33 !important;
  border-left: 4px solid var(--rc) !important; width: clamp(190px, 23vw, 270px) !important; font-family: 'Barlow', 'Rajdhani', sans-serif !important; }
#inspect-hud .ins-rarity { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 800; font-size: 10px !important; box-shadow: none !important; }
#inspect-hud .ins-name { font-family: 'Rye', Georgia, serif !important; font-weight: 400 !important; font-size: clamp(19px, 2vw, 26px) !important; color: #F2B544 !important; letter-spacing: 0.5px; }
#inspect-hud .ins-stat { color: #CDB28A !important; font-family: 'Barlow Condensed', sans-serif; font-size: 12px !important; }
#inspect-hud .ins-hint { font-size: 11.5px !important; color: #CDB28A !important; font-weight: 600; }
html.cc-touch #inspect-hud .ins-card { top: calc(64px + env(safe-area-inset-top, 0px)) !important; transform: none !important; animation: none !important; width: clamp(170px, 30vw, 230px) !important; }

/* ---------- v104 : onglet Settings complet (touches, pied de page) ---------- */
.cc-keymap-title { margin: 22px 0 10px; font: 800 12px 'Barlow Condensed', Arial, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: #E8692E; display: flex; align-items: center; gap: 6px; }
.cc-keymap-title .lucide-icon { width: 15px; height: 15px; }
.cc-keymap { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; }
.cc-keyrow { display: flex; align-items: center; gap: 4px; padding: 5px 0; border-bottom: 1px solid rgba(243, 230, 204, 0.05); min-width: 0; }
.cc-keyrow kbd { font: 700 11.5px 'Barlow Condensed', Arial, sans-serif; color: #F3E6CC; background: #3A2A1F; border: 1px solid #6B4A33; border-bottom-width: 2px; border-radius: 5px; padding: 2px 7px; min-width: 22px; text-align: center; white-space: nowrap; }
.cc-keyrow span { margin-left: 8px; color: #CDB28A; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setting-hint { color: #8F7A60; font-size: 11.5px; font-weight: 500; }
.settings-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid rgba(243, 230, 204, 0.08); background: rgba(0, 0, 0, 0.25); }
.settings-saved { color: #8FB97A; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.settings-saved .lucide-icon, .settings-reset-btn .lucide-icon { width: 15px; height: 15px; }
.settings-reset-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid #6B4A33; color: #CDB28A; border-radius: 8px; padding: 8px 14px; font: 700 13px 'Barlow', Arial, sans-serif; cursor: pointer; }
.settings-reset-btn:hover { border-color: #E8692E; color: #F3E6CC; }
html.cc-touch #stab-controls .cc-keymap-title, html.cc-touch #stab-controls .cc-keymap { display: none; }
@media (max-width: 700px) { .cc-keymap { grid-template-columns: 1fr 1fr; gap: 4px 10px; } .cc-keyrow span { font-size: 12px; margin-left: 5px; } .settings-footer { padding: 12px 14px; } }
/* v104 : page Posse sans posse : ce qu'apporte une posse + connexion */
.team-perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 640px; margin: 22px auto 18px; text-align: left; }
.team-perk { display: flex; gap: 10px; align-items: flex-start; background: #2A1E16; border: 1px solid #4A3526; border-radius: 10px; padding: 11px 12px; }
.team-perk .lucide-icon { width: 20px; height: 20px; color: #F2B544; flex: none; margin-top: 2px; }
.team-perk b { display: block; color: #F3E6CC; font: 700 14px 'Barlow', Arial, sans-serif; }
.team-perk span { display: block; color: #B39B7C; font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.team-signin { margin: 6px auto 0; }
.team-signin p { margin: 0 0 10px !important; }
@media (max-width: 700px) { .team-perks { grid-template-columns: 1fr; margin: 14px auto 12px; } }
/* v104 : boutique de pieces aux couleurs western (etait bleu nuit) */
#coin-store-modal .cs-container { background: linear-gradient(160deg, #2A1E16 0%, #1B130E 100%) !important; border-color: #6B4A33 !important; }
#coin-store-modal .cs-pack { background: linear-gradient(160deg, #3A2A1F, #2A1E16) !important; border-color: #5A4030 !important; }
#coin-store-modal .cs-pack:hover { border-color: #F2B544 !important; }
#coin-store-modal .cs-pack-emoji { color: #F2B544; }
#coin-store-modal .cs-header h2 .lucide-icon, #coin-store-modal .cs-coin-icon { color: #F2B544; }
/* v105 : paquets de pieces pas encore en vente */
#coin-store-modal .cs-pack { position: relative; }
#coin-store-modal .cs-pack.cs-soon { opacity: 0.72; cursor: default; }
#coin-store-modal .cs-pack.cs-soon:hover { transform: none !important; border-color: #5A4030 !important; }
#coin-store-modal .cs-soon-tag { position: absolute; top: 8px; left: 8px; font: 800 10px 'Barlow Condensed', Arial, sans-serif; letter-spacing: 1.2px; color: #1B130E; background: #CDB28A; border-radius: 4px; padding: 2px 6px; }
#coin-store-modal .cs-earn { color: #E6D8BC !important; font-size: 13px; line-height: 1.45; margin-top: 6px; }
#coin-store-modal .cs-earn .lucide-icon { color: #F2B544; vertical-align: -2px; }
#coin-store-modal .cs-earn b { color: #F2B544; }

/* v109c : onglet PLAY sur ordinateur. Le canevas 3D du cactus prenait la hauteur de son propre rendu (jusqu'a ~960 px) :
   la colonne de gauche s'allongeait, la colonne du milieu se centrait dans cette hauteur -> grand vide en haut et
   cactus coupe en bas. Le canevas remplit maintenant son cadre sans le pousser, et le milieu commence en haut. */
@media (min-width: 1200px) {
    /* la ligne de la grille garde la hauteur de l'ecran (avant : etiree par la liste des cartes, ~1050 px) ;
       la colonne de droite defile dans son cadre si elle est plus haute */
    .play-container { grid-template-rows: minmax(0, 1fr); }
    .play-right { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    .play-left { min-height: 0; }
    .character-showcase { min-height: 0; }
    .character-showcase canvas#preview-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
    .play-center { justify-content: flex-start; }
    .play-center > * { flex-shrink: 0; }      /* (cartes jamais ecrasees : sur un petit ecran, on fait defiler la page) */
}

/* v110 : barre d'achat sur ordinateur, au-dessus de la barre de vie, quand on peut acheter (echauffement / phase d'achat
   en zone d'achat). Remplace le petit badge « BUY [B] » en bas a droite (qui reste au telephone et pour « LEFT BUY ZONE »). */
#buy-bar {
    position: fixed; left: 50%; bottom: 72px; transform: translate(-50%, 12px);
    display: flex; align-items: center; gap: 14px; z-index: 91; pointer-events: none;
    padding: 6px 18px 6px 6px; border-radius: 12px;
    background: rgba(27, 19, 14, 0.9); border: 2px solid #F2B544; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    font-family: 'Anton', 'Bebas Neue', Impact, sans-serif; letter-spacing: 2px; color: #F3E6CC; font-size: 18px;
    opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s;
}
#buy-bar.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.25s, transform 0.25s; animation: buyBarPulse 1.6s ease-out 1; }
#buy-bar kbd {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 8px;
    background: #E8692E; color: #24170F; font-family: inherit; font-size: 22px; font-weight: bold; border: 2px solid #24170F;
    box-shadow: 0 3px 0 #24170F;
}
#buy-bar .bb-money { color: #8FD16A; }
#buy-bar .bb-time { color: #F2B544; min-width: 34px; text-align: right; }
@keyframes buyBarPulse { 0% { box-shadow: 0 0 0 0 rgba(242, 181, 68, 0.7); } 100% { box-shadow: 0 0 0 16px rgba(242, 181, 68, 0); } }
html:not(.cc-touch) #buy-zone-indicator.in-zone { display: none !important; }
html.cc-touch #buy-bar, body.kc-active #buy-bar { display: none !important; }