/* Narcotrafic.com — styles complémentaires à Tailwind */

html, body { background: #000; color: #E5E5E5; }
::selection { background: #10B981; color: #000; }

/* Grain + scanlines discrets : ambiance "écran de surveillance" */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}

.tabular { font-variant-numeric: tabular-nums; }

/* Cartes des familles (accueil) : même cadre que les zones du jeu, une couleur par famille (--fc) */
.faction-card {
  --fc: #C9A227; position: relative; overflow: hidden; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--fc) 28%, #202022); border-top: 2px solid color-mix(in srgb, var(--fc) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 8%, #0B0B0C), #0B0B0C 55%);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}
.faction-card:hover { border-color: color-mix(in srgb, var(--fc) 55%, #202022); box-shadow: 0 14px 34px -16px color-mix(in srgb, var(--fc) 45%, transparent); }
.faction-card:focus-visible { outline: 2px solid var(--fc); outline-offset: 2px; }
.faction-card .faction-index { color: var(--fc); }
.faction-banner { position: relative; aspect-ratio: 16 / 7; overflow: hidden; }
.faction-banner img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; filter: brightness(.72) saturate(.9); transition: filter .3s, transform .6s; }
.faction-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--fc) 6%, #0B0B0C)); }
.faction-card:hover .faction-banner img { filter: brightness(.9) saturate(1); transform: scale(1.03); }
/* Carte sélectionnée : cadre plein de la couleur de la famille */
.faction-card[aria-pressed="true"] { border-color: var(--fc); box-shadow: 0 0 0 1px var(--fc), 0 0 36px -8px var(--fc); }
.faction-card[aria-pressed="true"] .faction-banner img { filter: brightness(1) saturate(1.05); }

/* Jauge de Menace segmentée */
.heat-seg { transition: background-color .4s, box-shadow .4s; }
.heat-seg.on { background: #EF4444; box-shadow: 0 0 10px rgba(239,68,68,.7); }
.heat-critical .heat-seg.on { animation: pulse-heat 1.1s ease-in-out infinite; }
@keyframes pulse-heat { 50% { opacity: .45; } }

/* Flash de valeur modifiée */
.flash-up { animation: flash-up .9s ease-out; }
.flash-down { animation: flash-down .9s ease-out; }
@keyframes flash-up { from { color: #6EE7B7; text-shadow: 0 0 18px #10B981; } }
@keyframes flash-down { from { color: #FCA5A5; text-shadow: 0 0 18px #EF4444; } }

/* Curseur clignotant façon terminal */
.cursor::after { content: '▌'; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

input[type=range] { accent-color: #10B981; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== War Room (carte SVG) ===== */
.wr-land { fill: #14201a; stroke: #4d7a63; stroke-width: 1.1; }
.wr-borders { fill: none; stroke: #3a5a4a; stroke-width: 0.7; stroke-linejoin: round; }
.wr-route { fill: none; stroke-linecap: round; }
.wr-idle    { stroke: rgba(16,185,129,.7); stroke-width: 1.6; }
.wr-transit { stroke: #10B981; stroke-width: 2; stroke-dasharray: 6 7; animation: wr-flow 1.4s linear infinite; }
.wr-tension { stroke: #F97316; stroke-width: 2; animation: wr-pulse 1.6s ease-in-out infinite; }
.wr-seized  { stroke: rgba(239,68,68,.55); stroke-width: 1.2; stroke-dasharray: 2 5; }
.wr-cargo   { fill: #D1FAE5; }
.wr-hub     { fill: #E5E5E5; opacity: .85; }
.wr-label   { fill: #C8C8C8; paint-order: stroke; stroke: #000; stroke-width: .3em; font-family: "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .04em; }
@keyframes wr-flow  { to { stroke-dashoffset: -26; } }
@keyframes wr-pulse { 50% { opacity: .45; } }

/* ===== V5 : bannière d'identité — le boss du clan, qui gagne en éclat avec le rang =====
   (01/11 : le boss était presque invisible — luminosité 30 %, voile plein cadre. Il est désormais bien visible :
   à droite sur ordinateur, en haut sur téléphone ; la couleur revient toujours avec le rang.) */
.identity { min-height: 17rem; background: #000; }
.identity-img { object-position: 50% 22%; filter: grayscale(.4) brightness(.72) contrast(1.05); transition: filter .8s ease; }
@media (min-width: 640px) {
  .identity { min-height: 22rem; display: flex; align-items: center; }
  .identity > div.relative { width: 100%; }
  .identity-img { object-position: 50% 30%; left: auto !important; width: min(58%, 880px) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
  .identity-veil { background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.82) 38%, rgba(0,0,0,0) 60%), linear-gradient(0deg, #000 0%, transparent 32%); }
}
@media (max-width: 639px) {
  .identity { min-height: 30rem; display: flex; align-items: flex-end; }
  .identity > div.relative { width: 100%; }
  .identity-img { height: 70% !important; bottom: auto !important;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
  .identity-veil { background: linear-gradient(0deg, #000 34%, rgba(0,0,0,.5) 52%, transparent 72%); }
}
.identity[data-rank="2"] .identity-img { filter: grayscale(.28) brightness(.78) contrast(1.05); }
.identity[data-rank="3"] .identity-img { filter: grayscale(.15) brightness(.84) contrast(1.04); }
.identity[data-rank="4"] .identity-img { filter: grayscale(.05) brightness(.9); }
.identity[data-rank="4"] { border-bottom-color: rgba(16,185,129,.45); }
.identity[data-rank="5"] .identity-img { filter: brightness(.96) saturate(1.1); }
.identity[data-rank="5"] { border-bottom-color: #C9A227; box-shadow: inset 0 -1px 0 #C9A227, inset 0 -40px 60px -40px rgba(201,162,39,.35); }
.identity[data-rank="5"] h1 { text-shadow: 0 0 28px rgba(201,162,39,.45); }
.text-gold { color: #C9A227; }

/* ===== V5 : couplage War Room ↔ fiches de routes ===== */
.wr-hit { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; pointer-events: stroke; }
.wr-route.is-dim { opacity: .2; }
.wr-route.is-focus { stroke-width: 3.2; opacity: 1; }

/* ===== Sprint gameplay : panneau Dossier & journal, onglets défilants ===== */
.drawer { transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.drawer.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
select.order-field { appearance: auto; }

/* ===== Sprint 3 visuel : portraits des lieutenants (le monogramme ne s'affiche qu'en repli) ===== */
li.has-portrait .lt-mono { display: none; }
.lt-portrait img { object-position: 50% 28%; }

/* Sprint 2.3 : lieutenant neutralisé — portrait éteint (la figure est conservée entre deux rafraîchissements) */
li.is-out .lt-portrait img { filter: grayscale(0.85) brightness(0.6); }
li.is-hiding .lt-portrait img { filter: grayscale(1) brightness(0.45); }

/* Dilemme de lieutenant : légende lisible sur le portrait */
.dilemma-lt { text-shadow: 0 1px 2px #000, 0 0 14px rgba(0,0,0,.9); }
.dilemma-visual:has(.dilemma-lt:not(.hidden)) > div { background: linear-gradient(0deg, #000 0%, rgba(0,0,0,.72) 30%, rgba(0,0,0,.05) 70%); }

/* Titre de l'écran de raid : tient sur un écran de téléphone (« Organisation démantelée ») */
#raid-title { font-size: clamp(1.8rem, 8.6vw, 3.75rem); overflow-wrap: break-word; hyphens: none; }
.raid-screen > div { box-shadow: 0 0 60px -10px rgba(239,68,68,.7); animation: raid-in .35s ease-out; }
@keyframes raid-in { from { transform: scale(.94); opacity: 0; } }

/* Sprint 3 : badge « Dossier prioritaire » clignotant (désactivé si l'utilisateur réduit les animations) */
@keyframes priority-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); } 50% { opacity: 0.45; box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.35); } }
.priority-blink { animation: priority-blink 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .priority-blink { animation: none; } }

/* Sprint 3 : panneau de test (démo, ?test=1) */
#test-panel { position: fixed; left: 12px; bottom: 12px; z-index: 80; max-width: min(340px, calc(100vw - 24px)); }
#test-panel summary { cursor: pointer; list-style: none; }
#test-panel summary::-webkit-details-marker { display: none; }

/* Couches 2 et 3 (reportées de la démo) : Coups à jouer (cyan) et Conjoncture (vert / rouge) */
.opps-wrap { border: 1px solid rgba(34, 211, 238, 0.35); border-top: 2px solid #22D3EE; background: linear-gradient(180deg, rgba(34, 211, 238, 0.07), transparent 55%); scroll-margin-top: 140px; }
.opp { padding: 14px; border-radius: 4px; background: #070808; border: 1px solid #1f2023; animation: opp-in 0.35s ease-out; }
@keyframes opp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .opp { animation: none; } }
.opp-src { color: #22D3EE; }
.opp-effect { color: #A5F3FC; font: 500 12px/1.4 "IBM Plex Mono", ui-monospace, monospace; }
.opp-btn { border-radius: 3px; padding: 10px 12px; font: 800 15px/1.1 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.15s, color 0.15s, opacity 0.15s; }
.opp-accept { background: #22D3EE; color: #001014; text-align: left; }
.opp-accept:hover:not(:disabled) { box-shadow: 0 0 22px -4px rgba(34, 211, 238, 0.7); }
.opp-decline { border: 1px solid #2a2a2c; color: #8A8A8A; font-size: 13px; }
.opp-decline:hover:not(:disabled) { color: #fff; border-color: #555; }
.opp-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.intel { padding: 12px 14px; border-radius: 3px; background: #070808; border: 1px solid #1f2023; border-left: 3px solid; }
.intel-good { border-left-color: #10B981; }
.intel-bad { border-left-color: #EF4444; }
.intel-good .intel-effect { color: #6EE7B7; }
.intel-bad .intel-effect { color: #FCA5A5; }
.intel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.intel-chips[hidden] { display: none; }
.intel-chip { padding: 5px 9px; border-radius: 999px; font: 500 10.5px/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.04em; background: #0b0b0c; border: 1px solid; }
.intel-chip.intel-good { color: #6EE7B7; border-color: rgba(16, 185, 129, 0.45); }
.intel-chip.intel-bad { color: #FCA5A5; border-color: rgba(239, 68, 68, 0.45); }
.rb-opps { display: block; width: 100%; padding: 8px 16px; background: rgba(34, 211, 238, 0.1); border-top: 1px solid rgba(34, 211, 238, 0.35); color: #22D3EE; font: 500 11px/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-opps[hidden] { display: none !important; }

/* ── Zones colorées (reprise du design de la démo du 31/10) ─────────────────────────────
   Chaque onglet a sa couleur : QG or, Opérations bleu, Finances vert, Actifs orange, Rivalités violet.
   Les blocs deviennent des cadres arrondis à liseré supérieur coloré, les titres portent une barre lumineuse,
   le fond reçoit un halo discret de la couleur de la zone. Purement visuel : aucune règle du jeu ici. */
:root { --z: #C9A227; --panel: #0B0B0C; --panel-line: #202022; }
body[data-tab="qg"]     { --z: #C9A227; }
body[data-tab="ops"]    { --z: #38BDF8; }
body[data-tab="fin"]    { --z: #10B981; }
body[data-tab="assets"] { --z: #FB923C; }
body[data-tab="sec"]    { --z: #A78BFA; }
.tab[data-tab="qg"]     { --zc: #C9A227; }
.tab[data-tab="ops"]    { --zc: #38BDF8; }
.tab[data-tab="fin"]    { --zc: #10B981; }
.tab[data-tab="assets"] { --zc: #FB923C; }
.tab[data-tab="sec"]    { --zc: #A78BFA; }

body[data-tab] { background: #000 radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--z) 9%, transparent), transparent 60%) fixed; transition: background 0.4s; }

/* onglets : couleur de la zone et trait lumineux sous l'onglet actif */
.tab { transition: color 0.2s, border-color 0.2s; }
.tab[aria-selected="true"] { color: var(--zc) !important; border-color: var(--zc) !important; box-shadow: 0 10px 14px -12px var(--zc); }
.tab:not([aria-selected="true"]):hover { color: color-mix(in srgb, var(--zc) 70%, #fff) !important; }

/* titres de section : barre verticale de la couleur de la zone */
[role="tabpanel"] h2.border-b { position: relative; padding-left: 14px; border-color: var(--panel-line); }
[role="tabpanel"] h2.border-b::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--z); box-shadow: 0 0 12px var(--z); }

/* grilles « collées » (gap-px bg-line) → cartes séparées */
[role="tabpanel"] .gap-px.bg-line { gap: 12px; background: transparent; }
[role="tabpanel"] .gap-px.bg-line > * {
  background: var(--panel); border: 1px solid var(--panel-line); border-top: 2px solid color-mix(in srgb, var(--z) 55%, transparent);
  border-radius: 10px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9); overflow: hidden;
}
/* blocs encadrés (rapport, prévisions, blanchiment, profil bas…) → même cadre, légèrement teinté */
[role="tabpanel"] section.border.border-line {
  border-radius: 10px; border-color: color-mix(in srgb, var(--z) 30%, var(--panel-line)); border-top: 2px solid color-mix(in srgb, var(--z) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--z) 6%, var(--panel)), var(--panel) 70%); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9); overflow: hidden;
}
/* listes à séparateurs (routes…) dans un cadre */
[role="tabpanel"] ul.divide-y { border-radius: 10px; }
/* la Menace garde son rouge, les coups à jouer leur cyan, la victoire son vert */
#heat-card { border-top-color: rgba(239, 68, 68, 0.7) !important; }
.opps-wrap { border-radius: 10px; }
#victory { border-radius: 10px; }
/* bannière d'identité au QG : liseré or */
#identity { border-bottom-color: color-mix(in srgb, var(--z) 45%, var(--panel-line)); }
/* panneau des lieutenants : liseré de zone, statut neutralisé prioritaire */
#council > li { border-top-width: 2px; }
.intel, .opp { border-radius: 8px; }
/* un bloc masqué reste masqué même s'il porte une classe d'affichage (flex, grid…) */
#priority-qg[hidden], #opps-wrap[hidden], #intel-wrap[hidden], #priority-alert[hidden] { display: none !important; }

/* ── Point 3 du plan avant bêta : guide, passage de rang, verrous, aide ── */
.guide-card { border: 1px solid rgba(201, 162, 39, 0.45); border-top: 2px solid #C9A227; border-radius: 10px; background: linear-gradient(180deg, rgba(201, 162, 39, 0.09), #0B0B0C 70%); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9); }
.guide-card[hidden], .unlock-card[hidden] { display: none !important; }
.guide-btn-primary { border-radius: 6px; background: #C9A227; color: #0a0800; padding: 8px 14px; font: 600 11px/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.guide-btn-primary:hover { filter: brightness(1.1); }
.guide-btn { border-radius: 6px; border: 1px solid #2a2a2c; color: #d4d4d4; padding: 8px 14px; font: 500 11px/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.guide-btn:hover { border-color: #C9A227; color: #fff; }
.unlock-card { border: 1px solid rgba(201, 162, 39, 0.6); border-top: 3px solid #C9A227; border-radius: 10px; background: radial-gradient(120% 120% at 0% 0%, rgba(201, 162, 39, 0.16), #0B0B0C 60%); animation: opp-in 0.4s ease-out; }
@keyframes guide-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); } 30% { box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.85), 0 0 26px 6px rgba(201, 162, 39, 0.45); } }
.guide-pulse { animation: guide-pulse 1.4s ease-in-out 3; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .guide-pulse { animation: none; outline: 3px solid #C9A227; } }
.orientation-btn.rank-locked { opacity: 0.45; cursor: not-allowed; }
.help-btn { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 4px; border-radius: 999px; border: 1px solid #3a3a3d; color: #9a9a9a; font: 600 9px/1 "IBM Plex Mono", ui-monospace, monospace; vertical-align: middle; cursor: help; }
.help-btn:hover { color: #fff; border-color: #C9A227; }
.help-pop { position: absolute; z-index: 90; padding: 10px 12px; border-radius: 8px; background: #111113; border: 1px solid #C9A227; color: #e5e5e5; font: 400 12.5px/1.45 Inter, system-ui, sans-serif; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7); }
dt .help-btn { margin-left: 2px; }

/* ── Point 4 du plan avant bêta : objectif du jour, rappels ── */
.daily-card { border: 1px solid rgba(251, 146, 60, 0.35); border-top: 2px solid #FB923C; border-radius: 10px; background: linear-gradient(180deg, rgba(251, 146, 60, 0.07), #0B0B0C 65%); }
.daily-card[hidden] { display: none !important; }
.daily-card.daily-done { border-top-color: #10B981; border-color: rgba(16, 185, 129, 0.35); background: linear-gradient(180deg, rgba(16, 185, 129, 0.07), #0B0B0C 65%); }
#notify-box summary::-webkit-details-marker { display: none; }

/* ── Pass Parrain : purement esthétique ── */
.pass-card { border: 1px solid rgba(201, 162, 39, 0.4); border-radius: 10px; background: linear-gradient(135deg, rgba(201, 162, 39, 0.10), #0B0B0C 55%); }
.pass-card[hidden] { display: none !important; }
.parrain-chip { margin-left: 8px; padding: 1px 7px; border-radius: 999px; border: 1px solid #C9A227; color: #C9A227; background: rgba(201, 162, 39, 0.12); letter-spacing: 0.12em; }
.parrain-chip[hidden] { display: none !important; }
.pass-theme { border-radius: 999px; border: 1px solid #2a2a2c; padding: 6px 12px; font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); }
.pass-theme.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: 0 0 14px -4px var(--c); }
/* Parrain : boss en pleine lumière et cadre doré (ou couleur du thème) dès le rang 1 */
body[data-parrain] { --pc: #C9A227; }
body[data-parrain][data-qgtheme="sang"] { --pc: #DC2626; }
body[data-parrain][data-qgtheme="neon"] { --pc: #22D3EE; }
body[data-parrain][data-qgtheme="emeraude"] { --pc: #10B981; }
body[data-parrain] .identity .identity-img { filter: brightness(.96) saturate(1.08) !important; }
body[data-parrain] .identity { border-bottom: 2px solid var(--pc); box-shadow: inset 0 -40px 60px -40px color-mix(in srgb, var(--pc) 40%, transparent); }
body[data-parrain] #id-faction { text-shadow: 0 0 28px color-mix(in srgb, var(--pc) 45%, transparent); }
body[data-parrain][data-tab="qg"] { --z: var(--pc); }
body[data-parrain] .parrain-chip { border-color: var(--pc); color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); }