/* ============================================================
La Guerre du Clic V3 — Shell CSS
Console holographique · Élite Dangereuse · Chakra Petch
============================================================ */
/* Hauteur de la tab bar de navigation mobile, partagee par toutes les pages GB
(dock clicker, dock de chat, feuille systeme, padding bas). Definie ici car
style.css est charge sur toutes les pages, y compris celles sans gb_war_nav. */
:root { --gb-tabbar-h: 58px; }
/* ------------------------------------------------------------------
1. TOKENS
------------------------------------------------------------------ */
:root {
/* Accent principal (orange ED) */
--accent: #fa6d00;
/* Fond spatial */
--bg: #06070d;
/* Dégradé de panneau (réutilisable via background) */
--panel: linear-gradient(180deg, rgba(18,21,34,.92), rgba(8,10,18,.96));
/* Archétypes planétaires */
--prod: #fa6d00;
--tech: #00c2cf;
--mil: #dc3545;
/* Factions */
--helios: #2f86d6;
--concordat: #dc3545;
/* Textures de texte */
--text: #9fb0d0;
--warm: #ffd9a8;
--dim: #8a97b8;
--dim2: #5b6a8c;
/* Biseau des coins coupés (18px sur les grands panneaux) */
--bevel: 18px;
--bevel-sm: 9px;
/* Scanlines partagées (accent sur overlay ::before) */
--scanlines:
repeating-linear-gradient(
0deg,
rgba(120, 170, 255, .04) 0 1px,
transparent 1px 3px
),
linear-gradient(rgba(120, 170, 255, .04) 1px, transparent 1px) 0 0 / 100% 28px,
linear-gradient(90deg, rgba(120, 170, 255, .04) 1px, transparent 1px) 0 0 / 28px 100%;
}
/* ------------------------------------------------------------------
2. RESET MINIMAL + BASE
------------------------------------------------------------------ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ------------------------------------------------------------------
3. BODY — espace profond atmosphérique
------------------------------------------------------------------ */
body.gbv3 {
/* Fond spatial multicouche :
- nébuleuse radiale (bleu profond, coin haut-gauche)
- seconde nébuleuse (ambre discret, bas-droite)
- grain subtil (repeating-linear en diagonale)
- fond de référence (presque noir) */
background-color: var(--bg);
background-image:
radial-gradient(ellipse 70% 55% at 18% -8%, rgba(47, 86, 180, .22), transparent 62%),
radial-gradient(ellipse 55% 45% at 82% 102%, rgba(250, 109, 0, .08), transparent 55%),
radial-gradient(ellipse 40% 30% at 50% 110%, rgba(0, 40, 80, .35), transparent 60%),
repeating-linear-gradient(
127deg,
rgba(255, 255, 255, .012) 0,
rgba(255, 255, 255, .012) 1px,
transparent 1px,
transparent 6px
);
font-family: "Chakra Petch", system-ui, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.5;
color: var(--text);
/* Full-viewport, sans scroll body — chaque écran gère son propre overflow */
min-height: 100dvh;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ------------------------------------------------------------------
4. HUD — barre de commande supérieure
------------------------------------------------------------------ */
.gbv3-hud {
position: relative;
z-index: 10;
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 12px;
padding: 0 20px;
height: 52px;
/* Panneau biseauté — coin bas-droit coupé */
background:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
var(--panel);
border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, #243049);
clip-path: polygon(
0 0,
calc(100% - var(--bevel)) 0,
100% var(--bevel),
100% 100%,
var(--bevel) 100%,
0 calc(100% - var(--bevel))
);
/* Animation d'entrée */
animation: gbv3-fadein-hud .5s ease both;
}
/* Scanlines overlay sur le HUD */
.gbv3-hud::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: screen;
opacity: .4;
background: var(--scanlines);
}
/* Titre principal */
.gbv3-hud__title {
font-weight: 700;
font-size: 15px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--warm);
text-shadow:
0 0 20px color-mix(in srgb, var(--accent) 55%, transparent),
0 0 6px color-mix(in srgb, var(--accent) 30%, transparent);
white-space: nowrap;
flex: 0 0 auto;
}
/* Fil d'Ariane — monte dynamiquement via JS */
.gbv3-breadcrumb {
flex: 1 1 0;
display: flex;
align-items: center;
gap: 0;
overflow: hidden;
min-width: 0;
font-size: 12px;
letter-spacing: .5px;
color: var(--dim);
}
/* Chaque segment cliquable */
.gbv3-breadcrumb__crumb {
cursor: pointer;
color: var(--dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color .15s ease;
background: none;
border: none;
font: inherit;
font-size: 12px;
padding: 0;
}
.gbv3-breadcrumb__crumb:hover {
color: var(--warm);
}
/* Séparateur pulsant entre les crumbs */
.gbv3-breadcrumb__sep {
display: inline-flex;
align-items: center;
padding: 0 8px;
color: var(--dim2);
flex: 0 0 auto;
gap: 4px;
}
/* Petit point accent animé */
.gbv3-breadcrumb__dot {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 7px var(--accent);
animation: gbv3-dot-pulse 1.8s ease-in-out infinite;
flex: 0 0 auto;
}
@keyframes gbv3-dot-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .25; }
}
/* Nom du commandant */
.gbv3-hud__cmdr {
flex: 0 0 auto;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--dim2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
/* ------------------------------------------------------------------
5. ZONE ÉCRAN — monte les vues JS (galaxy / system / planet)
------------------------------------------------------------------ */
.gbv3-screen {
position: relative;
flex: 1 1 0;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
/* Entrée orchestrée légèrement après le HUD */
animation: gbv3-fadein-screen .55s ease .12s both;
}
/* ------------------------------------------------------------------
6. TOAST — notification de bas de page
------------------------------------------------------------------ */
.gbv3-toast {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%) translateY(calc(100% + 28px));
z-index: 1200;
padding: 11px 22px 12px;
max-width: min(420px, calc(100vw - 32px));
width: max-content;
font-size: 13px;
font-weight: 600;
letter-spacing: .3px;
color: #e9eefc;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
/* Panel biseauté compact */
background:
repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,.05) 3px 4px),
radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 58%),
linear-gradient(180deg, rgba(20,23,36,.97), rgba(8,10,18,.98));
border: 1px solid color-mix(in srgb, var(--accent) 45%, #243049);
border-left: 2px solid var(--accent);
box-shadow:
0 14px 34px rgba(0,0,0,.6),
0 0 22px color-mix(in srgb, var(--accent) 30%, transparent),
inset 0 0 0 1px rgba(255,255,255,.03);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
clip-path: polygon(
0 0,
calc(100% - var(--bevel-sm)) 0,
100% var(--bevel-sm),
100% 100%,
var(--bevel-sm) 100%,
0 calc(100% - var(--bevel-sm))
);
transition: transform .32s cubic-bezier(.2,.9,.25,1), opacity .32s ease;
opacity: 0;
pointer-events: none;
}
/* Marqueur holographique en tête (glyphe pilotable par type via --toast-glyph) */
.gbv3-toast::before {
content: var(--toast-glyph, "◈");
margin-right: 9px;
font-size: 14px;
vertical-align: -1px;
color: color-mix(in srgb, var(--accent) 80%, var(--warm));
text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}
/* Barre de minuterie de fermeture */
.gbv3-toast::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
transform-origin: left;
transform: scaleX(0);
background: linear-gradient(
90deg,
var(--accent),
color-mix(in srgb, var(--accent) 25%, transparent)
);
box-shadow: 0 0 8px var(--accent);
}
/* Classe ajoutée par le JS pour montrer le toast */
.gbv3-toast--show {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.gbv3-toast--show::after {
animation: gbv3-toast-bar var(--toast-dur, 4500ms) linear both;
animation-play-state: var(--toast-play, running);
}
@keyframes gbv3-toast-bar {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* Message + bouton de fermeture (DOM structuré : le JS injecte un span + un ✕) */
.gbv3-toast__msg { display: inline; vertical-align: middle; }
.gbv3-toast__close {
position: absolute;
top: 50%;
right: 9px;
transform: translateY(-50%);
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 13px;
line-height: 1;
color: color-mix(in srgb, var(--accent) 70%, #cfe0ff);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
border-radius: 4px;
cursor: pointer;
transition: background .15s, color .15s, transform .12s;
}
.gbv3-toast__close:hover {
color: #0a0a0a;
background: var(--accent);
transform: translateY(-50%) scale(1.06);
}
/* Place pour le ✕ à droite (s'ajoute au padding de base) */
.gbv3-toast { padding-right: 40px; }
/* Accents par type : pop d'entrée renforcé pour les erreurs */
.gbv3-toast--error.gbv3-toast--show { animation: gbv3-toast-pop .42s cubic-bezier(.2,.9,.25,1) both; }
@keyframes gbv3-toast-pop {
0% { transform: translateX(-50%) translateY(10px) scale(.96); }
55% { transform: translateX(-50%) translateY(0) scale(1.03); }
100% { transform: translateX(-50%) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.gbv3-toast--error.gbv3-toast--show { animation: none; }
.gbv3-toast--show::after { animation: none; }
}
/* ------------------------------------------------------------------
7. BOUTONS RÉUTILISABLES
------------------------------------------------------------------ */
/* Base notchée */
.gbv3-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
appearance: none;
font-family: "Chakra Petch", system-ui, sans-serif;
font-weight: 700;
font-size: 12px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
padding: 10px 20px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
clip-path: polygon(
0 0,
calc(100% - var(--bevel-sm)) 0,
100% var(--bevel-sm),
100% 100%,
var(--bevel-sm) 100%,
0 calc(100% - var(--bevel-sm))
);
transition: background .18s ease, color .18s ease, box-shadow .2s ease, transform .1s ease;
text-decoration: none;
}
.gbv3-btn:hover {
background: var(--accent);
color: #0a0a0a;
box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
transform: translateY(-1px);
}
.gbv3-btn:active {
transform: translateY(0) scale(.98);
}
.gbv3-btn:disabled,
.gbv3-btn[aria-disabled="true"] {
opacity: .35;
cursor: not-allowed;
pointer-events: none;
}
/* Variante pleine (accent rempli) */
.gbv3-btn--accent {
background: linear-gradient(180deg, #ff9233, var(--accent));
color: #0a0a0a;
border-color: #ffb066;
box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}
.gbv3-btn--accent:hover {
filter: brightness(1.08);
box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 65%, transparent);
color: #0a0a0a;
background: linear-gradient(180deg, #ffb066, #fa8020);
}
/* Variante secondaire (petite) */
.gbv3-btn--sm {
font-size: 11px;
padding: 7px 14px;
--bevel-sm: 7px;
}
/* ------------------------------------------------------------------
8. CARTE DE BUILD — achat de structures/bâtiments planétaires
------------------------------------------------------------------ */
.gbv3-build-card {
position: relative;
overflow: hidden;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
background:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
var(--panel);
border: 1px solid color-mix(in srgb, var(--accent) 22%, #243049);
clip-path: polygon(
0 0,
calc(100% - var(--bevel-sm)) 0,
100% var(--bevel-sm),
100% 100%,
var(--bevel-sm) 100%,
0 calc(100% - var(--bevel-sm))
);
transition: border-color .2s ease, box-shadow .2s ease;
}
/* Scanlines légères sur la carte */
.gbv3-build-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: screen;
opacity: .3;
background: var(--scanlines);
}
.gbv3-build-card > * { position: relative; }
/* Achetable → allumée en accent */
.gbv3-build-card.can-buy {
border-color: color-mix(in srgb, var(--accent) 70%, transparent);
box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.gbv3-build-card.can-buy .gbv3-btn {
opacity: 1;
background: linear-gradient(180deg, #ff9233, var(--accent));
color: #0a0a0a;
border-color: #ffb066;
box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Désactivée / pas les ressources */
.gbv3-build-card.disabled {
opacity: .38;
pointer-events: none;
}
/* Possédée (lueur douce) */
.gbv3-build-card.owned {
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent);
background:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), rgba(20, 20, 28, .55));
}
/* Indice de déblocage d'un chantier verrouillé : pastille ambre discrète + cadenas.
Remplace l'ancien texte rouge. Masquée (.is-hidden) dès que le chantier est construit. */
.gbv3-unlock-hint {
display: flex;
align-items: center;
gap: 5px;
width: max-content;
max-width: 100%;
margin-top: 5px;
padding: 2px 8px 2px 6px;
border-radius: 999px;
background: color-mix(in srgb, var(--warm) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--warm) 26%, transparent);
color: var(--warm);
font: 600 9.5px/1.25 "Chakra Petch", system-ui, sans-serif;
letter-spacing: .35px;
}
.gbv3-unlock-hint__ic {
flex: 0 0 auto;
width: 11px;
height: 11px;
display: inline-flex;
opacity: .92;
}
.gbv3-unlock-hint__ic svg { width: 100%; height: 100%; display: block; }
.gbv3-unlock-hint__txt { min-width: 0; }
.gbv3-unlock-hint.is-hidden { display: none; }
/* Ligne "Débloque…" TOUJOURS réservée (remplie ou vide) : hauteur fixe pour que toutes
les cards de chantier aient la même hauteur et que les boutons "Construire" s'alignent. */
.gbv3-chantier-unlock { min-height: 26px; }
/* Taux de production + capacité de garnison sur une même ligne (garnison alignée à droite). */
.gbv3-chantier-rate-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 2px;
}
.gbv3-chantier-rate-row > :first-child { min-width: 0; }
/* Capacité de garnison apportée par un bâtiment : bleu acier (défense), discret. */
.gbv3-chantier-cap {
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
margin-top: 3px;
color: #6fa8e0;
font: 600 11px/1.2 "Chakra Petch", system-ui, sans-serif;
letter-spacing: .3px;
}
/* Dans la ligne de taux, la garnison est collée à droite, sans marge verticale. */
.gbv3-chantier-rate-row .gbv3-chantier-cap { margin-top: 0; margin-left: auto; }
.gbv3-chantier-cap__ic {
flex: 0 0 auto;
width: 12px;
height: 12px;
display: inline-flex;
opacity: .9;
}
.gbv3-chantier-cap__ic svg { width: 100%; height: 100%; display: block; }
.gbv3-chantier-cap__txt { min-width: 0; }
/* ------------------------------------------------------------------
9. TOOLTIP
------------------------------------------------------------------ */
.gbv3-tip {
position: absolute;
z-index: 500;
max-width: 280px;
padding: 10px 13px;
pointer-events: none;
font-size: 12px;
line-height: 1.55;
color: var(--text);
background:
radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
linear-gradient(180deg, rgba(18,22,38,.98), rgba(6,8,16,.99));
border: 1px solid color-mix(in srgb, var(--accent) 35%, #243049);
border-left: 2px solid var(--accent);
box-shadow: 0 12px 28px rgba(0,0,0,.55);
clip-path: polygon(
0 0,
calc(100% - 8px) 0,
100% 8px,
100% 100%,
8px 100%,
0 calc(100% - 8px)
);
opacity: 0;
transform: translateY(6px);
transition: opacity .15s ease, transform .15s ease;
}
.gbv3-tip--show {
opacity: 1;
transform: translateY(0);
}
.gbv3-tip__title {
font-weight: 700;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--warm);
margin-bottom: 4px;
}
/* ------------------------------------------------------------------
10. HELPERS : accent par type planétaire
------------------------------------------------------------------ */
.is-prod { --accent: var(--prod); }
.is-tech { --accent: var(--tech); }
.is-mil { --accent: var(--mil); }
/* ------------------------------------------------------------------
11. HELPERS TYPOGRAPHIQUES
------------------------------------------------------------------ */
.gbv3-label {
display: block;
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--dim2);
}
.gbv3-value {
font-size: 26px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--accent);
line-height: 1;
text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent);
}
.gbv3-title {
font-size: 16px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--warm);
}
.gbv3-section-head {
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--dim);
padding-bottom: 8px;
border-bottom: 1px solid #243049;
margin-bottom: 16px;
}
/* ------------------------------------------------------------------
12. PANNEAUX GÉNÉRIQUES
------------------------------------------------------------------ */
.gbv3-panel {
position: relative;
overflow: hidden;
padding: 20px 22px;
background:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
var(--panel);
border: 1px solid color-mix(in srgb, var(--accent) 28%, #243049);
clip-path: polygon(
0 0,
calc(100% - var(--bevel)) 0,
100% var(--bevel),
100% 100%,
var(--bevel) 100%,
0 calc(100% - var(--bevel))
);
}
.gbv3-panel::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: screen;
opacity: .4;
background: var(--scanlines);
}
.gbv3-panel > * { position: relative; }
/* ------------------------------------------------------------------
13. CHAMP D'ÉTOILES (fond de décor dans les écrans de navigation)
------------------------------------------------------------------ */
.gbv3-starfield {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
will-change: opacity;
background-repeat: repeat;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.85), transparent),
radial-gradient(2px 2px at 70px 120px, rgba(255,217,168,.7), transparent),
radial-gradient(1px 1px at 130px 60px, rgba(255,255,255,.9), transparent),
radial-gradient(2px 2px at 175px 165px, rgba(158,197,255,.65), transparent),
radial-gradient(1px 1px at 210px 25px, rgba(255,255,255,.8), transparent),
radial-gradient(2px 2px at 250px 110px, rgba(250,109,0,.6), transparent),
radial-gradient(1px 1px at 30px 185px, rgba(255,255,255,.7), transparent),
radial-gradient(1px 1px at 90px 70px, rgba(200,220,255,.5), transparent),
radial-gradient(2px 2px at 155px 135px, rgba(255,255,255,.55), transparent);
background-size: 260px 200px;
animation: gbv3-twinkle 4s steps(4) infinite;
}
@keyframes gbv3-twinkle {
0%, 100% { opacity: .55; }
50% { opacity: 1; }
}
/* ------------------------------------------------------------------
14. ANIMATIONS D'ENTRÉE
------------------------------------------------------------------ */
@keyframes gbv3-fadein-hud {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes gbv3-fadein-screen {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Stagger pour les listes de cartes / grilles montées par JS */
.gbv3-stagger > * {
animation: gbv3-fadein-screen .4s ease both;
}
.gbv3-stagger > *:nth-child(1) { animation-delay: .06s; }
.gbv3-stagger > *:nth-child(2) { animation-delay: .12s; }
.gbv3-stagger > *:nth-child(3) { animation-delay: .18s; }
.gbv3-stagger > *:nth-child(4) { animation-delay: .24s; }
.gbv3-stagger > *:nth-child(5) { animation-delay: .30s; }
.gbv3-stagger > *:nth-child(6) { animation-delay: .36s; }
.gbv3-stagger > *:nth-child(7) { animation-delay: .42s; }
.gbv3-stagger > *:nth-child(8) { animation-delay: .48s; }
.gbv3-stagger > *:nth-child(n+9) { animation-delay: .54s; }
/* ------------------------------------------------------------------
15. REDUCED MOTION — désactive toutes les animations
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
/* Entrées */
.gbv3-hud,
.gbv3-screen,
.gbv3-stagger > * {
animation: none;
}
/* Effets décoratifs */
.gbv3-breadcrumb__dot,
.gbv3-starfield {
animation: none;
}
/* Toast : barre statique */
.gbv3-toast--show::after {
animation: none;
transform: scaleX(1);
opacity: .45;
}
/* Tooltip : pas de transition */
.gbv3-tip {
transition: none;
}
}
/* ------------------------------------------------------------------
16. SCROLLBAR (WebKit) — sobre, ED
------------------------------------------------------------------ */
.gbv3-screen::-webkit-scrollbar,
.gbv3-panel::-webkit-scrollbar {
width: 4px;
}
.gbv3-screen::-webkit-scrollbar-track,
.gbv3-panel::-webkit-scrollbar-track {
background: rgba(255,255,255,.04);
}
.gbv3-screen::-webkit-scrollbar-thumb,
.gbv3-panel::-webkit-scrollbar-thumb {
background: color-mix(in srgb, var(--accent) 40%, #243049);
border-radius: 2px;
}
/* ------------------------------------------------------------------
17. UTILITAIRES LAYOUT LÉGERS
------------------------------------------------------------------ */
.gbv3-flex { display: flex; align-items: center; }
.gbv3-flex--gap { gap: 10px; }
.gbv3-flex--wrap { flex-wrap: wrap; }
.gbv3-flex--col { flex-direction: column; align-items: flex-start; }
.gbv3-grow { flex: 1 1 0; }
.gbv3-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ------------------------------------------------------------------
18. RESPONSIVE — HUD mobile (< 480px)
------------------------------------------------------------------ */
@media (max-width: 480px) {
.gbv3-hud {
height: 48px;
padding: 0 14px;
gap: 8px;
--bevel: 12px;
}
.gbv3-hud__title {
font-size: 13px;
letter-spacing: 2.5px;
}
.gbv3-hud__cmdr {
display: none; /* masqué sur très petits écrans, économise de la place */
}
.gbv3-toast {
bottom: 16px;
left: 14px;
right: 14px;
transform: translateX(0) translateY(calc(100% + 16px));
max-width: none;
width: auto;
}
.gbv3-toast--show {
transform: translateX(0) translateY(0);
}
}
/* ================================================================== */
/* FACTION — Terminal d'allégeance (page guerre-bed-faction.php) */
/* ================================================================== */
.gbv3-faction { --faction-color: #fa6d00;
display: grid; grid-template-columns: minmax(220px, .72fr) minmax(0, 2fr); gap: 12px; align-items: start; }
.gbv3-faction__found { grid-column: 1 / -1; }
.gbv3-faction__card { position: relative; padding: 13px 14px;
border: 1px solid color-mix(in srgb, var(--faction-color) 26%, #243049);
border-left: 3px solid color-mix(in srgb, var(--faction-color) 80%, transparent);
background: linear-gradient(158deg, color-mix(in srgb, var(--faction-color) 11%, transparent), rgba(12,14,22,.5) 60%);
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.gbv3-faction__eyebrow { display: inline-block; margin-bottom: 11px;
font: 700 13px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1.6px; text-transform: uppercase;
color: color-mix(in srgb, var(--faction-color) 70%, #fff); padding: 3px 8px;
background: color-mix(in srgb, var(--faction-color) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--faction-color) 36%, transparent);
clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
.gbv3-faction__head { display: flex; align-items: center; gap: 13px; min-width: 0; }
.gbv3-faction__flag { position: relative; flex: 0 0 auto; width: 72px; height: 46px; overflow: hidden;
border: 1px solid rgba(159,176,208,.3); background: #111827;
box-shadow: 0 4px 16px rgba(0,0,0,.45), inset 3px 0 7px rgba(0,0,0,.45); }
.gbv3-faction__flag--mini { width: 34px; height: 22px; box-shadow: 0 2px 7px rgba(0,0,0,.4), inset 2px 0 4px rgba(0,0,0,.4); }
.gbv3-faction__flag--xl { width: 92px; height: 58px; }
.gbv3-faction__flag--hero { width: 148px; height: 94px;
box-shadow: 0 8px 26px rgba(0,0,0,.55), inset 4px 0 10px rgba(0,0,0,.5),
0 0 0 1px color-mix(in srgb, var(--faction-color) 40%, transparent),
0 0 22px color-mix(in srgb, var(--faction-color) 30%, transparent); }
.gbv3-faction__logo { flex: 0 0 auto; width: 50px; height: 50px; object-fit: cover; border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--faction-color) 45%, rgba(159,176,208,.3));
box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 12px color-mix(in srgb, var(--faction-color) 28%, transparent); }
.gbv3-faction__logo--mini { width: 26px; height: 26px; justify-self: center; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.gbv3-faction__flag .pattern { position: absolute; inset: 0; }
.gbv3-faction__flag .emblem { position: absolute; inset: 0; z-index: 1; margin: auto; width: 56%; height: 56%;
-webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; background: var(--faction-color); }
.gbv3-faction__titlebox { min-width: 0; flex: 1; }
.gbv3-faction__name { font: 700 18px/1.1 "Chakra Petch", system-ui, sans-serif; color: #eef2fb;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbv3-faction__meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px;
font: 600 11px/1.2 "Chakra Petch", system-ui, sans-serif; color: #9fb0d0; }
.gbv3-faction__meta .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
background: var(--faction-color); box-shadow: 0 0 7px var(--faction-color); }
.gbv3-faction__readouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; margin-top: 13px; }
.gbv3-faction__readout { padding: 6px 8px;
border: 1px solid color-mix(in srgb, var(--faction-color) 32%, transparent);
background: color-mix(in srgb, var(--faction-color) 9%, rgba(255,255,255,.02));
clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
.gbv3-faction__readout-label { font: 700 8px/1.2 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1px;
text-transform: uppercase; color: #8493b2; }
.gbv3-faction__readout-val { margin-top: 3px; font: 800 15px/1 "Chakra Petch", system-ui, sans-serif;
color: color-mix(in srgb, var(--faction-color) 55%, #fff); font-variant-numeric: tabular-nums; }
.gbv3-faction__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.gbv3-faction__btn { height: 34px; padding: 0 14px; cursor: pointer;
border: 1px solid color-mix(in srgb, var(--faction-color) 42%, transparent);
background: color-mix(in srgb, var(--faction-color) 10%, transparent); color: #ffd9a8;
font: 700 11px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase;
clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; }
.gbv3-faction__btn.can-buy { color: #0a0a0a; border-color: #ffb066;
background: linear-gradient(180deg, #ff9233 0%, #fa6d00 100%); box-shadow: 0 0 12px rgba(250,109,0,.45); }
.gbv3-faction__btn.can-buy:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(250,109,0,.65); }
.gbv3-faction__btn.is-danger { border-color: rgba(220,53,69,.5); color: #ffb3bd; background: rgba(220,53,69,.12); }
.gbv3-faction__btn.is-danger:hover { background: rgba(220,53,69,.22); }
/* Confirmation de sauvegarde : le bouton passe au vert et pulse brièvement. */
.gbv3-faction__btn.is-saved { color: #04210f !important; border-color: #48d17a !important;
background: linear-gradient(180deg, #6ff0a0 0%, #28c76f 100%) !important;
box-shadow: 0 0 0 0 rgba(40,199,111,.55); animation: gbv3-saved-pulse .55s ease-out; }
@keyframes gbv3-saved-pulse {
0% { transform: scale(.96); box-shadow: 0 0 0 0 rgba(40,199,111,.55); }
50% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(40,199,111,0); }
100% { transform: scale(1); box-shadow: 0 0 12px 2px rgba(40,199,111,.45); }
}
@media (prefers-reduced-motion: reduce) { .gbv3-faction__btn.is-saved { animation: none; } }
.gbv3-faction__board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gbv3-faction__board-count { font: 700 10px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: .5px;
color: #8493b2; text-transform: uppercase; }
.gbv3-faction__list { display: flex; flex-direction: column; gap: 6px; }
.gbv3-faction__row { display: grid; grid-template-columns: 20px 34px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
padding: 7px 9px; border: 1px solid rgba(159,176,208,.14); background: rgba(255,255,255,.025);
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
transition: border-color .15s ease, background .15s ease; }
.gbv3-faction__row:hover { border-color: color-mix(in srgb, var(--faction-color) 38%, rgba(159,176,208,.2)); }
.gbv3-faction__row.is-current { border-color: color-mix(in srgb, var(--faction-color) 62%, transparent);
background: color-mix(in srgb, var(--faction-color) 12%, rgba(255,255,255,.02)); }
.gbv3-faction__row.is-unaligned { opacity: .82; }
.gbv3-faction__rank { text-align: center; font: 800 13px/1 "Chakra Petch", system-ui, sans-serif;
color: #6d7a98; font-variant-numeric: tabular-nums; }
.gbv3-faction__row.is-current .gbv3-faction__rank { color: color-mix(in srgb, var(--faction-color) 60%, #fff); }
.gbv3-faction__dot { width: 12px; height: 12px; border-radius: 50%; margin: 0 auto; box-shadow: 0 0 8px currentColor; }
.gbv3-faction__row-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font: 700 13px/1.1 "Chakra Petch", system-ui, sans-serif; color: #dfe7fb; }
.gbv3-faction__score { font: 600 10px/1.3 "Chakra Petch", system-ui, sans-serif; color: #8a97b8;
white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.gbv3-faction__tag { font: 700 9px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase;
color: color-mix(in srgb, var(--faction-color) 60%, #fff); white-space: nowrap; }
.gbv3-faction__join { height: 27px; padding: 0 10px; font-size: 10px; }
/* Console de fondation / édition : éditeur de drapeau partagé EN HAUT, puis contrôles
(nom / devise / bouton) en dessous. L'éditeur étant lui-même large (aperçu + atelier),
on empile en colonne pour ne rien rogner. */
.gbv3-faction__forge { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.gbv3-faction__stage { display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 14px 16px; align-self: stretch; justify-content: center;
border: 1px solid color-mix(in srgb, var(--faction-color) 22%, #243049);
background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--faction-color) 14%, transparent), rgba(8,10,18,.5) 64%);
clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.gbv3-faction__stage-name { max-width: 168px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font: 700 14px/1.15 "Chakra Petch", system-ui, sans-serif;
color: color-mix(in srgb, var(--faction-color) 45%, #fff); }
.gbv3-faction__stage-slogan { max-width: 168px; text-align: center; min-height: 12px;
font: 600 italic 10px/1.2 "Chakra Petch", system-ui, sans-serif; letter-spacing: .3px;
color: color-mix(in srgb, var(--faction-color) 35%, #cdd7ee); }
.gbv3-faction__cap { font: 700 8px/1 "Chakra Petch", system-ui, sans-serif;
letter-spacing: 1.2px; text-transform: uppercase; color: #8493b2; }
.gbv3-faction__forge-ctrls { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.gbv3-faction__forge-field { display: flex; flex-direction: column; gap: 5px; }
.gbv3-faction__forge-field.is-grow { flex: 1 1 auto; }
.gbv3-faction__forge-cta { width: 100%; height: 38px; margin-top: 3px; }
/* Disclosure « Fonder une faction » : replié par défaut, dévoilé au clic.
En-tête = bannière cliquable (titre + accroche + CTA), corps = la forge. */
.gbv3-faction__found-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
width: 100%; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gbv3-faction__found-head .gbv3-faction__eyebrow { margin-bottom: 8px; }
.gbv3-faction__found-headtext { min-width: 0; }
.gbv3-faction__found-teaser { margin: 0; max-width: 54ch;
font: 600 12.5px/1.45 "Chakra Petch", system-ui, sans-serif; color: #9fb0d0; }
.gbv3-faction__found-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
height: 36px; padding: 0 15px; white-space: nowrap; color: #ffd9a8;
font: 700 11px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase;
border: 1px solid color-mix(in srgb, var(--faction-color) 45%, transparent);
background: color-mix(in srgb, var(--faction-color) 12%, transparent);
clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
transition: background .15s ease, box-shadow .15s ease, transform .1s ease; }
.gbv3-faction__found-head:hover .gbv3-faction__found-cta {
background: color-mix(in srgb, var(--faction-color) 22%, transparent);
box-shadow: 0 0 14px color-mix(in srgb, var(--faction-color) 40%, transparent); transform: translateY(-1px); }
.gbv3-faction__found-head:focus-visible { outline: 2px solid color-mix(in srgb, var(--faction-color) 70%, #fff); outline-offset: 4px; }
.gbv3-faction__found-chevron { display: inline-block; font-size: 12px; transition: transform .25s ease; }
.gbv3-faction__found.is-open .gbv3-faction__found-chevron { transform: rotate(90deg); }
.gbv3-faction__found-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.gbv3-faction__found.is-open .gbv3-faction__found-body { grid-template-rows: 1fr; }
.gbv3-faction__found-body > .gbv3-faction__forge { overflow: hidden; min-height: 0; }
.gbv3-faction__found.is-open .gbv3-faction__found-body > .gbv3-faction__forge {
padding-top: 16px;
border-top: 1px solid color-mix(in srgb, var(--faction-color) 22%, rgba(159,176,208,.18)); }
/* Sélecteurs visuels (pastilles de couleur + vignettes emblème/motif) */
.gbv3-faction__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.gbv3-faction__chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; }
.gbv3-faction__chips--scroll::-webkit-scrollbar { height: 6px; }
.gbv3-faction__chips--scroll::-webkit-scrollbar-thumb { background: rgba(159,176,208,.3); border-radius: 3px; }
.gbv3-faction__swatch { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; cursor: pointer; position: relative;
background: var(--sw); border: 1px solid rgba(255,255,255,.18);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
transition: transform .1s ease, box-shadow .15s ease; }
.gbv3-faction__swatch:hover { transform: translateY(-1px); }
.gbv3-faction__swatch.is-on { box-shadow: 0 0 0 2px #0a0c14, 0 0 0 3px var(--sw), 0 0 10px color-mix(in srgb, var(--sw) 70%, transparent); }
.gbv3-faction__swatch.is-on::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font: 800 13px/1 "Chakra Petch", system-ui, sans-serif; color: #0a0a0a; text-shadow: 0 0 3px rgba(255,255,255,.7); }
.gbv3-faction__swatch--bg.is-on::after { color: #eef2fb; text-shadow: 0 0 4px rgba(0,0,0,.9); }
.gbv3-faction__swatch--bg { border-color: rgba(159,176,208,.34); }
.gbv3-faction__chip { flex: 0 0 auto; width: 38px; height: 30px; padding: 0; cursor: pointer; position: relative;
display: flex; align-items: center; justify-content: center; overflow: hidden;
background: rgba(6,8,14,.8); border: 1px solid rgba(159,176,208,.22);
clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.gbv3-faction__chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--faction-color) 45%, rgba(159,176,208,.3)); }
.gbv3-faction__chip.is-on { border-color: var(--faction-color);
box-shadow: 0 0 0 1px var(--faction-color), 0 0 9px color-mix(in srgb, var(--faction-color) 55%, transparent); }
.gbv3-faction__chip-emblem { width: 19px; height: 19px;
background: color-mix(in srgb, var(--faction-color) 30%, #cdd7ee);
-webkit-mask: center/contain no-repeat; mask: center/contain no-repeat; }
.gbv3-faction__chip.is-on .gbv3-faction__chip-emblem { background: var(--faction-color); }
.gbv3-faction__chip-flag { position: absolute; inset: 3px; background: #11131d; }
.gbv3-faction__field-label { font: 700 8px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1px;
text-transform: uppercase; color: #8493b2; }
.gbv3-faction__input, .gbv3-faction__select { height: 34px; color: #dbe6ff;
background: rgba(6,8,14,.7); border: 1px solid rgba(159,176,208,.25); border-radius: 0;
font: 600 12px/1 "Chakra Petch", system-ui, sans-serif;
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.gbv3-faction__input { padding: 0 10px; width: 100%; }
.gbv3-faction__select { padding: 0 8px; min-width: 124px; }
.gbv3-faction__input:focus, .gbv3-faction__select:focus { outline: none;
border-color: color-mix(in srgb, var(--faction-color) 60%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--faction-color) 45%, transparent); }
@media (max-width: 767px) {
.gbv3-faction { grid-template-columns: 1fr; }
.gbv3-faction__name { font-size: 16px; }
.gbv3-faction__forge { grid-template-columns: 1fr; }
.gbv3-faction__stage { flex-direction: row; justify-content: flex-start; gap: 12px; }
.gbv3-faction__stage .gbv3-faction__cap { display: none; }
.gbv3-faction__found-head { flex-wrap: wrap; }
.gbv3-faction__found-cta { width: 100%; justify-content: center; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
.gbv3-faction__btn, .gbv3-faction__row,
.gbv3-faction__swatch, .gbv3-faction__chip { transition: none; }
.gbv3-faction__btn.can-buy:hover,
.gbv3-faction__swatch:hover, .gbv3-faction__chip:hover { transform: none; }
.gbv3-faction__found-body, .gbv3-faction__found-chevron,
.gbv3-faction__found-cta { transition: none; }
.gbv3-faction__found-head:hover .gbv3-faction__found-cta { transform: none; }
}
/* ================================================================== */
/* MILITAIRE — Dashboard de flotte & défenses */
/* Langage radar Élite : offense = contact hostile (rouge), */
/* défense = structure/allié (bleu acier). Scoped sous .is-mil. */
/* ================================================================== */
.gbv3-mil {
--off: #ff5d6c; /* offense — rouge hostile */
--def: #6fa8e0; /* défense — bleu acier allié */
display: flex;
flex-direction: column;
gap: 14px;
}
.gbv3-mil .gbv3-section-head { margin-bottom: 0; }
/* ---- Panneau « Commandement » : jauge de capacité + readouts ------- */
.gbv3-mil-readout { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }
.gbv3-mil-cap__top {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
font-family: "Chakra Petch", system-ui, sans-serif;
}
.gbv3-mil-cap__label {
font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
color: var(--dim);
}
.gbv3-mil-cap__val {
font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
color: var(--warm); letter-spacing: .5px;
}
.gbv3-mil-cap__val b { color: var(--accent); }
.gbv3-mil-cap__val .gbv3-mil-cap__q { color: var(--off); font-style: normal; font-size: 12px; opacity: .9; }
.gbv3-mil-cap__foot {
font: 600 10px/1.2 "Chakra Petch", system-ui, sans-serif; letter-spacing: .5px; color: var(--dim);
}
.gbv3-mil-cap__foot b { color: var(--warm); }
.gbv3-mil-gauge {
position: relative; height: 8px; overflow: hidden;
background:
repeating-linear-gradient(90deg, transparent 0 13px, rgba(255,255,255,.07) 13px 14px),
rgba(220,53,69,.1);
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}
.gbv3-mil-gauge__fill {
height: 100%;
background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #7a1420), var(--accent));
box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
transition: width .5s cubic-bezier(.2,.9,.25,1);
}
.gbv3-mil-gauge__fill.is-over { background: linear-gradient(90deg, #b51d2b, #ff5d6c); }
/* Segment « réservé » : ce que la file occupera une fois construite (hachuré, ton plus froid). */
.gbv3-mil-gauge__resv {
position: absolute; top: 0; bottom: 0;
background: repeating-linear-gradient(45deg,
color-mix(in srgb, var(--off) 45%, transparent) 0 4px,
color-mix(in srgb, var(--off) 18%, transparent) 4px 8px);
}
.gbv3-mil-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.gbv3-mil-tile {
position: relative; padding: 9px 11px 10px;
background: color-mix(in srgb, var(--tile, var(--accent)) 7%, rgba(255,255,255,.012));
border: 1px solid color-mix(in srgb, var(--tile, var(--accent)) 26%, transparent);
border-left: 2px solid color-mix(in srgb, var(--tile, var(--accent)) 75%, transparent);
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
.gbv3-mil-tile--off { --tile: var(--off); }
.gbv3-mil-tile--def { --tile: var(--def); }
.gbv3-mil-tile--cnt { --tile: var(--warm); }
.gbv3-mil-tile__label {
display: flex; align-items: center; gap: 5px;
font: 700 8px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1.4px;
text-transform: uppercase; color: var(--dim);
}
.gbv3-mil-tile__val {
margin-top: 7px;
font: 700 22px/1 "Chakra Petch", system-ui, sans-serif; font-variant-numeric: tabular-nums;
color: color-mix(in srgb, var(--tile, var(--accent)) 78%, #fff);
text-shadow: 0 0 16px color-mix(in srgb, var(--tile, var(--accent)) 40%, transparent);
}
.gbv3-mil-tile__unit { font-size: 10px; font-weight: 600; color: var(--dim2); margin-left: 3px; }
/* ---- Effectifs par type : pastilles icône·nom·×N (flotte / défenses) ---- */
.gbv3-mil-bd { display: flex; align-items: flex-start; gap: 9px; }
.gbv3-mil-bd__lbl {
flex: 0 0 auto; min-width: 52px; padding-top: 3px;
font: 700 8px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1.4px;
text-transform: uppercase; color: var(--dim);
}
.gbv3-mil-bd__chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.gbv3-mil-bd__chip {
--rc: var(--off);
display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px;
background: color-mix(in srgb, var(--rc) 9%, rgba(255,255,255,.015));
border: 1px solid color-mix(in srgb, var(--rc) 28%, transparent);
clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
font: 600 10px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: .4px; color: var(--text);
}
.gbv3-mil-bd__chip.role-off { --rc: var(--off); }
.gbv3-mil-bd__chip.role-def { --rc: var(--def); }
.gbv3-mil-bd__chip.role-scout { --rc: var(--warm); }
.gbv3-mil-bd__chip.is-zero { opacity: .42; }
.gbv3-mil-bd__ic {
flex: 0 0 auto; width: 13px; height: 13px;
background-color: var(--rc);
-webkit-mask: var(--ic) center / contain no-repeat;
mask: var(--ic) center / contain no-repeat;
}
.gbv3-mil-bd__n {
font-weight: 700; font-variant-numeric: tabular-nums;
color: color-mix(in srgb, var(--rc) 80%, #fff);
}
/* ---- Production : deux sections côte à côte (flotte | défenses) ---- */
.gbv3-mil-prodrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.gbv3-mil-section { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
/* En-tête : titre + sélecteur de lot partagé */
.gbv3-mil-phead {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.gbv3-mil-phead__title {
font: 700 11px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 3px;
text-transform: uppercase; color: var(--mil);
}
.gbv3-mil-qsel { display: flex; align-items: center; gap: 8px; }
.gbv3-mil-qsel__lbl {
font: 700 8px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--dim2);
}
.gbv3-mil-qsel__grp {
display: flex;
clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}
.gbv3-mil-qbtn {
cursor: pointer; min-width: 36px; padding: 6px 9px;
font: 700 11px/1 "Chakra Petch", system-ui, sans-serif; font-variant-numeric: tabular-nums;
color: var(--dim); background: rgba(255,255,255,.03);
border: 1px solid rgba(159,176,208,.18); border-right-width: 0;
transition: background .15s ease, color .15s ease;
}
.gbv3-mil-qbtn:last-child { border-right-width: 1px; }
.gbv3-mil-qbtn:hover { color: var(--warm); background: rgba(255,255,255,.06); }
.gbv3-mil-qbtn.is-on {
color: #0a0a0a; background: var(--mil); border-color: var(--mil);
box-shadow: 0 0 10px color-mix(in srgb, var(--mil) 45%, transparent);
}
/* Carte d'unité compacte (accent + icône teintés par rôle via --rc) */
.gbv3-mil-prod { padding: 13px 15px; }
.gbv3-mil-ucards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 5px; }
.gbv3-mil-ucard {
--rc: var(--mil);
position: relative; display: flex; flex-direction: column; gap: 8px;
padding: 10px 12px 12px;
background:
radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rc) 9%, transparent), transparent 62%),
var(--panel);
border: 1px solid color-mix(in srgb, var(--rc) 24%, #243049);
border-left: 2px solid color-mix(in srgb, var(--rc) 72%, transparent);
clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.gbv3-mil-ucard.role-off { --rc: var(--off); --accent: var(--off); }
.gbv3-mil-ucard.role-def { --rc: var(--def); --accent: var(--def); }
.gbv3-mil-ucard.role-scout { --rc: var(--warm); --accent: var(--warm); }
.gbv3-mil-ucard.is-locked { --rc: var(--dim2); opacity: .62; }
.gbv3-mil-ucard__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gbv3-mil-ucard__icon {
flex: 0 0 auto; width: 20px; height: 20px; background-color: var(--rc);
-webkit-mask: var(--ic) center / contain no-repeat;
mask: var(--ic) center / contain no-repeat;
}
.gbv3-mil-ucard__name {
flex: 1 1 0; min-width: 0;
font: 700 11px/1.1 "Chakra Petch", system-ui, sans-serif; letter-spacing: .5px;
text-transform: uppercase; color: var(--warm);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gbv3-mil-ucard__have {
flex: 0 0 auto; font: 700 13px/1 "Chakra Petch", system-ui, sans-serif;
font-variant-numeric: tabular-nums; color: var(--rc);
}
.gbv3-mil-ucard__stats {
font: 600 10px/1.2 "Chakra Petch", system-ui, sans-serif; letter-spacing: .3px; color: var(--dim);
font-variant-numeric: tabular-nums;
}
/* Prix du LOT choisi : mis en avant ; rouge quand l'Influence locale ne suffit pas. */
.gbv3-mil-ucard__price { color: color-mix(in srgb, var(--warm) 85%, #fff); font-weight: 700; }
.gbv3-mil-ucard__price.is-poor { color: var(--off); }
.gbv3-mil-ucard__lock {
font: 700 9px/1.2 "Chakra Petch", system-ui, sans-serif; letter-spacing: .4px;
text-transform: uppercase; color: var(--dim2);
}
.gbv3-mil-ucard__buy { width: 100%; margin-top: 1px; }
/* ---- File de construction ------------------------------------------ */
.gbv3-mil-queue { display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; margin-top: 9px; }
.gbv3-mil-queue__head {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
font: 700 10px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase;
color: var(--accent); opacity: .85;
}
.gbv3-mil-queue__count { font-size: 9px; letter-spacing: 1px; color: var(--dim); opacity: .9; }
/* Ligne compacte : [icône·nom·×qté] | [barre extensible] | [rebours], le tout sur une rangée. */
.gbv3-mil-qrow {
display: grid; grid-template-columns: minmax(0, auto) 1fr auto; align-items: center; gap: 9px;
font: 600 11px/1.2 "Chakra Petch", system-ui, sans-serif; letter-spacing: .5px;
}
.gbv3-mil-qrow__left { display: flex; align-items: center; gap: 6px; color: var(--text); min-width: 0; }
.gbv3-mil-qrow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbv3-mil-qrow__ic {
flex: 0 0 auto; width: 14px; height: 14px;
background-color: color-mix(in srgb, var(--accent) 75%, var(--warm));
-webkit-mask: var(--ic) center / contain no-repeat;
mask: var(--ic) center / contain no-repeat;
}
.gbv3-mil-qrow__qty { flex: 0 0 auto; color: var(--off); font-weight: 700; font-variant-numeric: tabular-nums; }
.gbv3-mil-qbar {
position: relative; height: 5px; border-radius: 3px; overflow: hidden;
background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.gbv3-mil-qbar__fill {
position: absolute; inset: 0 auto 0 0; width: 0;
background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, var(--warm)), var(--accent));
box-shadow: 0 0 8px var(--accent); transition: width .9s linear;
}
.gbv3-mil-qrow.is-done .gbv3-mil-qbar__fill { background: var(--off); box-shadow: 0 0 8px var(--off); }
.gbv3-mil-qrow.is-done .gbv3-mil-qrow__eta { color: var(--off); }
.gbv3-mil-qrow__eta {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
font-size: 10px; color: var(--dim); font-variant-numeric: tabular-nums; min-width: 42px; justify-content: flex-end;
}
.gbv3-mil-qrow__eta::before {
content: ""; width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto;
background: var(--accent); box-shadow: 0 0 6px var(--accent);
animation: gbv3-dot-pulse 1.6s ease-in-out infinite;
}
.gbv3-mil-qrow.is-done .gbv3-mil-qrow__eta::before { animation: none; background: var(--off); box-shadow: 0 0 6px var(--off); }
/* Sous 760px, les deux sections de production s'empilent (colonnes trop étroites). */
@media (max-width: 760px) {
.gbv3-mil-prodrow { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.gbv3-mil-tiles { grid-template-columns: 1fr; }
.gbv3-mil-ucards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.gbv3-mil-phead { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.gbv3-mil-gauge__fill { transition: none; }
.gbv3-mil-qrow__eta::before { animation: none; }
.gbv3-mil-qbar__fill { transition: none; }
}
/* ------------------------------------------------------------------ */
/* Chat de faction — terminal de communication (comms transmission) */
/* Page guerre-bed-faction.php. Un journal de transmissions, pas une */
/* messagerie à bulles : barre de canal, flux à épine, ligne d'émission. */
/* ------------------------------------------------------------------ */
.gbv3-fchat { --fc: var(--faction-color, #fa6d00); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
/* -- Barre de canal : libellé fréquence + diode d'état temps réel -- */
.gbv3-fchat__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 11px 14px; border-bottom: 1px solid color-mix(in srgb, var(--fc) 26%, #243049);
background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 13%, transparent), transparent); }
.gbv3-fchat__chan { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gbv3-fchat__chan-label { font: 700 12px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1.4px; text-transform: uppercase;
color: color-mix(in srgb, var(--fc) 55%, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbv3-fchat__chan-label b { color: #fff; font-weight: 700; }
.gbv3-fchat__status { display: inline-flex; align-items: center; gap: 6px; flex: none;
font: 700 9px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #56688f; }
.gbv3-fchat__live { width: 8px; height: 8px; border-radius: 50%; background: #56688f; box-shadow: 0 0 0 0 transparent; }
.gbv3-fchat--live .gbv3-fchat__live { background: #39d98a; box-shadow: 0 0 8px #39d98a; animation: gbv3-fchat-pulse 1.8s ease-out infinite; }
.gbv3-fchat--live .gbv3-fchat__status { color: #39d98a; }
.gbv3-fchat--connecting .gbv3-fchat__live { background: #e0a23c; box-shadow: 0 0 7px rgba(224,162,60,.6); }
.gbv3-fchat--connecting .gbv3-fchat__status { color: #e0a23c; }
.gbv3-fchat--offline .gbv3-fchat__live { background: #6b4150; box-shadow: none; }
.gbv3-fchat--offline .gbv3-fchat__status { color: #8a5563; }
@keyframes gbv3-fchat-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, #39d98a 70%, transparent); }
70% { box-shadow: 0 0 0 6px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
/* -- Écran : flux scrollable + scanlines fixes -- */
.gbv3-fchat__screen { position: relative; }
.gbv3-fchat__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
background: repeating-linear-gradient(0deg, rgba(120,170,255,.035) 0 1px, transparent 1px 3px);
mix-blend-mode: screen; }
.gbv3-fchat__list { position: relative; z-index: 1; display: flex; flex-direction: column;
max-height: 380px; min-height: 180px; overflow-y: auto;
padding: 12px 14px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fc) 45%, #243049) transparent; }
.gbv3-fchat__list::-webkit-scrollbar { width: 7px; }
.gbv3-fchat__list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fc) 40%, #243049); border-radius: 4px; }
.gbv3-fchat__empty { margin: auto; color: #56688f; text-align: center; font-size: 13px; line-height: 1.5; padding: 26px 10px; }
/* -- Transmission : épine + en-tête (horodatage · indicatif) + corps -- */
.gbv3-fchat__msg { position: relative; padding: 5px 0 7px 13px; margin-top: 8px;
border-left: 2px solid rgba(120,140,180,.22); }
.gbv3-fchat__msg:first-child { margin-top: 0; }
.gbv3-fchat__msg::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 11px; background: rgba(159,176,208,.55); }
.gbv3-fchat__msg.is-mine { border-left-color: color-mix(in srgb, var(--fc) 60%, transparent); }
.gbv3-fchat__msg.is-mine::before { background: var(--fc); box-shadow: 0 0 7px var(--fc); }
.gbv3-fchat__msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.gbv3-fchat__time { flex: none; font: 600 10px/1.4 "Chakra Petch", system-ui, sans-serif; color: #56688f; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.gbv3-fchat__author { flex: 0 1 auto; min-width: 0; font: 700 11px/1.4 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase;
color: #9fb0d0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbv3-fchat__msg.is-mine .gbv3-fchat__author { color: color-mix(in srgb, var(--fc) 62%, #fff); }
/* Rang collé juste après le pseudo (le pseudo ne pousse plus le rang vers la droite). */
.gbv3-fchat__rank { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font: 600 9.5px/1.4 "Chakra Petch", system-ui, sans-serif; letter-spacing: .6px; text-transform: uppercase;
color: color-mix(in srgb, var(--fc) 78%, #cdd6ee); opacity: .9; }
.gbv3-fchat__text { font-size: 13.5px; line-height: 1.45; color: #dce4f5; word-wrap: break-word; overflow-wrap: anywhere; }
/* -- Ligne d'émission : prompt › + champ + bouton TX -- */
.gbv3-fchat__form { display: flex; align-items: stretch; gap: 0;
border-top: 1px solid color-mix(in srgb, var(--fc) 22%, #243049); background: rgba(6,8,16,.5); }
.gbv3-fchat__prompt { flex: none; display: flex; align-items: center; padding: 0 10px 0 14px;
font: 700 17px/1 "Chakra Petch", monospace; color: color-mix(in srgb, var(--fc) 70%, #6b7aa0); transition: color .15s, text-shadow .15s; }
.gbv3-fchat__input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; color: #eef3ff;
background: transparent; border: none; font: 500 13px/1.2 "Chakra Petch", system-ui, sans-serif; }
.gbv3-fchat__input::placeholder { color: #45557a; }
.gbv3-fchat__input:focus { outline: none; }
.gbv3-fchat__form:focus-within { background: rgba(8,11,20,.72); }
.gbv3-fchat__form:focus-within .gbv3-fchat__prompt { color: var(--fc); text-shadow: 0 0 9px color-mix(in srgb, var(--fc) 60%, transparent); }
.gbv3-fchat__send { flex: none; align-self: stretch; margin: 0; padding: 0 16px; border: none; border-radius: 0;
cursor: pointer; font: 700 11px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1.5px; text-transform: uppercase;
color: color-mix(in srgb, var(--fc) 78%, #ffd9a8); background: color-mix(in srgb, var(--fc) 14%, transparent);
border-left: 1px solid color-mix(in srgb, var(--fc) 26%, #243049); transition: background .15s, color .15s; }
.gbv3-fchat__send:hover { background: var(--fc); color: #0a0a0a; }
.gbv3-fchat__send:focus-visible { outline: 2px solid color-mix(in srgb, var(--fc) 70%, #fff); outline-offset: -2px; }
@media (max-width: 575px) {
.gbv3-fchat__send { padding: 0 12px; }
.gbv3-fchat__list { max-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
.gbv3-fchat--live .gbv3-fchat__live { animation: none; }
}
/* ------------------------------------------------------------------ */
/* Chat de faction — DOCK flottant (bas-droite, repliable) */
/* z-index 1100 : sous les toasts (#gbv3-toast = 1200) et la wmodal. */
/* ------------------------------------------------------------------ */
.gbv3-fchat-dock { --fc: var(--faction-color, #fa6d00); position: fixed; right: 18px; bottom: 18px;
z-index: 1100; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.gbv3-fchat-dock > * { pointer-events: auto; }
/* Mobile : remonter le dock de chat au-dessus de la tab bar de navigation. */
@media (max-width: 767.98px) {
.gbv3-fchat-dock { bottom: calc(18px + var(--gb-tabbar-h) + env(safe-area-inset-bottom)); }
}
/* Panneau : carte chat masquée par défaut, révélée à l'ouverture. */
.gbv3-fchat-dock__panel { width: 440px; max-width: calc(100vw - 36px);
opacity: 0; transform: translateY(14px) scale(.98); transform-origin: bottom right;
pointer-events: none; visibility: hidden; transition: opacity .18s ease, transform .18s ease; }
.gbv3-fchat-dock.is-open .gbv3-fchat-dock__panel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
/* Flottant -> fond OPAQUE (le contenu de la page ne doit pas transparaître derrière). */
.gbv3-fchat-dock__panel .gbv3-fchat { background: linear-gradient(158deg, color-mix(in srgb, var(--fc) 12%, #0b0e17), #0b0e17 62%);
box-shadow: 0 18px 48px rgba(0,0,0,.62); }
.gbv3-fchat-dock__panel .gbv3-fchat__list { max-height: min(52vh, 420px); }
/* Bulle d'ouverture/repli. */
.gbv3-fchat-dock__toggle { position: relative; display: inline-flex; align-items: center; gap: 9px;
margin: 0; padding: 10px 16px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--fc) 55%, rgba(120,140,180,.4));
background: rgba(10,13,22,.92); color: #e7eefc; border-radius: 999px;
font: 700 12px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: .8px; text-transform: uppercase;
box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 0 transparent; transition: background .2s, border-color .2s, box-shadow .2s, transform .12s; }
.gbv3-fchat-dock__toggle:hover { border-color: var(--fc);
box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 14px color-mix(in srgb, var(--fc) 40%, transparent); transform: translateY(-1px); }
.gbv3-fchat-dock__toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--fc) 70%, #fff); outline-offset: 2px; }
.gbv3-fchat-dock__toggle-icon { font-size: 15px; line-height: 1; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--fc) 60%, transparent)); }
.gbv3-fchat-dock__toggle-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbv3-fchat-dock.is-open .gbv3-fchat-dock__toggle { border-color: var(--fc);
background: color-mix(in srgb, var(--fc) 16%, rgba(10,13,22,.94)); }
/* Pastille non-lu. */
.gbv3-fchat-dock__badge { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
background: #dc3545; color: #fff; font: 700 10px/1 "Chakra Petch", system-ui, sans-serif;
box-shadow: 0 0 0 2px rgba(10,13,22,.92), 0 0 8px rgba(220,53,69,.6); }
.gbv3-fchat-dock__badge[hidden] { display: none; }
@media (max-width: 575px) {
.gbv3-fchat-dock { right: 10px; bottom: calc(10px + var(--gb-tabbar-h) + env(safe-area-inset-bottom)); left: 10px; align-items: stretch; }
.gbv3-fchat-dock__panel { width: auto; max-width: none; }
.gbv3-fchat-dock__panel .gbv3-fchat__list { max-height: 52vh; }
.gbv3-fchat-dock__toggle { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
.gbv3-fchat-dock__panel { transition: none; }
}
/* ------------------------------------------------------------------ */
/* Partisans — grille filtrable, scrollable, cliquable (vers carte) */
/* ------------------------------------------------------------------ */
.gbv3-faction__roster { --fc: var(--faction-color, #fa6d00); }
/* En-tête du roster : titre + recherche + compteur sur une seule ligne. */
.gbv3-faction__roster-head { align-items: center; gap: 10px; margin-bottom: 9px; }
.gbv3-faction__roster-head .gbv3-faction__eyebrow { margin-bottom: 0; flex: none; }
.gbv3-faction__roster-head .gbv3-faction__search { flex: 1 1 auto; margin: 0; }
.gbv3-faction__roster-head .gbv3-faction__board-count { flex: none; }
.gbv3-faction__search { width: 100%; max-width: 330px; height: 30px !important; margin: 2px 0 9px; padding: 0 10px 0 26px; color: #e7eefc;
background: rgba(8,10,18,.5) url("data:image/svg+xml;utf8,") 8px center / 12px no-repeat;
border: none; border-bottom: 1px solid rgba(120,140,180,.28);
font: 500 11px/24px "Chakra Petch", system-ui, sans-serif; }
.gbv3-faction__search::placeholder { color: #45557a; }
.gbv3-faction__search::-webkit-search-cancel-button { filter: invert(.5); }
.gbv3-faction__search:focus { outline: none; border-bottom-color: color-mix(in srgb, var(--fc) 70%, transparent);
box-shadow: 0 1px 0 0 color-mix(in srgb, var(--fc) 45%, transparent); }
.gbv3-faction__roster-scroll { max-height: 300px; overflow-y: auto; padding-right: 4px;
scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fc) 45%, #243049) transparent; }
.gbv3-faction__roster-scroll::-webkit-scrollbar { width: 7px; }
.gbv3-faction__roster-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fc) 40%, #243049); border-radius: 4px; }
.gbv3-faction__members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.gbv3-faction__members-empty { color: #56688f; text-align: center; font-size: 12.5px; padding: 18px 0; }
.gbv3-faction__member { display: flex; align-items: center; gap: 8px; padding: 7px 9px; min-width: 0;
text-decoration: none; cursor: pointer; color: inherit;
border: 1px solid rgba(120,140,180,.16); background: rgba(12,14,22,.42);
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
transition: border-color .15s, background .15s, transform .1s; }
.gbv3-faction__member:hover { border-color: color-mix(in srgb, var(--fc) 55%, transparent);
background: color-mix(in srgb, var(--fc) 10%, rgba(12,14,22,.5)); transform: translateY(-1px); }
.gbv3-faction__member:focus-visible { outline: 2px solid color-mix(in srgb, var(--fc) 70%, #fff); outline-offset: 1px; }
.gbv3-faction__member.is-current { border-color: color-mix(in srgb, var(--fc) 45%, transparent);
background: color-mix(in srgb, var(--fc) 13%, rgba(12,14,22,.5)); }
.gbv3-faction__member-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--fc);
box-shadow: 0 0 6px color-mix(in srgb, var(--fc) 60%, transparent); }
.gbv3-faction__member-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.gbv3-faction__member-name { font: 700 12px/1.2 "Chakra Petch", system-ui, sans-serif;
color: #e7eefc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbv3-faction__member.is-current .gbv3-faction__member-name { color: color-mix(in srgb, var(--fc) 55%, #fff); }
.gbv3-faction__member-score { font: 600 10px/1.3 "Chakra Petch", system-ui, sans-serif; color: #6a7aa0;
font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbv3-faction__member-go { flex: none; font-size: 13px; color: #45557a; transition: color .15s, transform .15s; }
.gbv3-faction__member:hover .gbv3-faction__member-go { color: var(--fc); transform: translate(2px, -2px); }
@media (max-width: 900px) { .gbv3-faction__members { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .gbv3-faction__members { grid-template-columns: 1fr; } }
/* Cellule partisan : le tile empilé avec, en vue chef, le sélecteur de rang. */
.gbv3-faction__member-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Badge de rang cosmétique : discret, teinté faction, distinct du tag « Chef » (qui est
en texte nu). Petite pastille pour signaler le rang attribué par le chef. */
.gbv3-faction__rank-tag { display: inline-block; vertical-align: middle;
font: 700 8px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: .6px; text-transform: uppercase;
padding: 2px 5px; border-radius: 3px; white-space: nowrap;
color: color-mix(in srgb, var(--fc) 78%, #fff);
background: color-mix(in srgb, var(--fc) 16%, rgba(12,14,22,.6));
border: 1px solid color-mix(in srgb, var(--fc) 38%, transparent); }
/* Sélecteur d'attribution de rang (vue chef), hors du lien de localisation. */
.gbv3-faction__rank-assign { height: 26px; width: 100%; padding: 0 6px; cursor: pointer;
color: #cdd7ee; background: rgba(12,14,22,.55);
border: 1px solid color-mix(in srgb, var(--fc) 26%, rgba(120,140,180,.18));
font: 600 10px/1 "Chakra Petch", system-ui, sans-serif;
clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
.gbv3-faction__rank-assign:focus { outline: none; border-color: color-mix(in srgb, var(--fc) 60%, transparent); }
/* Éditeur de catalogue de rangs (vue chef). */
.gbv3-faction__rank-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.gbv3-faction__rank-row { display: flex; align-items: center; gap: 6px; }
.gbv3-faction__rank-input { flex: 1 1 auto; }
.gbv3-faction__rank-del { flex: none; width: 34px; padding: 0; }
/* ------------------------------------------------------------------ */
/* Carte d'administration du chef : onglets (Modifier la faction / Rangs) */
/* ------------------------------------------------------------------ */
.gbv3-faction__admin { --fc: var(--faction-color, #fa6d00); grid-column: 1 / -1; }
/* En-tête pliable global : replie/déplie tout le bloc (onglets + contenu). */
.gbv3-faction__admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
width: 100%; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; }
.gbv3-faction__admin-head .gbv3-faction__eyebrow { margin-bottom: 0; }
.gbv3-faction__admin-head:focus-visible { outline: 2px solid color-mix(in srgb, var(--fc) 70%, #fff); outline-offset: 4px; }
.gbv3-faction__admin-head .gbv3-faction__found-chevron { transition: transform .25s ease; }
.gbv3-faction__admin.is-open .gbv3-faction__admin-head .gbv3-faction__found-chevron { transform: rotate(90deg); }
/* Corps : masqué tant que le bloc n'est pas déplié. */
.gbv3-faction__admin-body { display: none; margin-top: 14px; }
.gbv3-faction__admin.is-open .gbv3-faction__admin-body { display: block; }
/* Barre d'onglets : deux boutons sur la même ligne, segmentée. */
.gbv3-faction__admin-tabs { display: flex; gap: 6px; padding: 4px; margin-bottom: 14px;
border: 1px solid color-mix(in srgb, var(--fc) 22%, #243049); background: rgba(8,10,18,.4);
clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.gbv3-faction__admin-tab { flex: 1 1 0; padding: 9px 10px; cursor: pointer; text-align: center;
border: 1px solid transparent; background: transparent; color: #9fb0d0;
font: 700 11px/1 "Chakra Petch", system-ui, sans-serif; letter-spacing: 1.2px; text-transform: uppercase;
transition: background .15s, color .15s, border-color .15s;
clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
.gbv3-faction__admin-tab:hover { color: color-mix(in srgb, var(--fc) 55%, #fff); background: color-mix(in srgb, var(--fc) 8%, transparent); }
.gbv3-faction__admin-tab.is-active { color: #0a0a0a; border-color: color-mix(in srgb, var(--fc) 60%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--fc) 88%, #fff) 0%, var(--fc) 100%);
box-shadow: 0 0 12px color-mix(in srgb, var(--fc) 40%, transparent); }
.gbv3-faction__admin-tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--fc) 70%, #fff); outline-offset: 2px; }
/* Panneaux : un seul actif. On profite de toute la largeur disponible du bloc
(le bloc admin occupe déjà toute la largeur de la grille faction). */
.gbv3-faction__admin-pane { display: none; }
.gbv3-faction__admin-pane.is-active { display: block; }
.gbv3-faction__admin-panes > .gbv3-faction__admin-pane { width: 100%; margin: 0; }
/* L'éditeur de drapeau partagé s'étend sur toute la largeur du panneau (au lieu du
max-width 850px hérité du contexte modale du hub) : plus rien n'est rogné, la
colonne de contrôles (emblèmes/motifs/effets) respire. */
.gbv3-faction__admin .gb-flag-editor .fe-flag { max-width: none; }
/* Le contenu « Rangs » reste à une largeur de lecture confortable. */
.gbv3-faction__admin-pane .gbv3-faction__rank-list,
.gbv3-faction__admin-pane > .gbv3-faction__found-teaser,
.gbv3-faction__admin-pane > .gbv3-faction__actions { max-width: 720px; }
/* ------------------------------------------------------------------
WARMAP — carte HUD ancrée au clic système + modales d'action
------------------------------------------------------------------ */
.gbv3-wm { position: absolute; z-index: 40; width: 232px; max-width: calc(100% - 16px);
background: linear-gradient(180deg, rgba(16,22,38,.98), rgba(8,11,20,.99)); border: 1px solid #2f4a7a;
box-shadow: 0 18px 50px rgba(0,0,0,.7); color: #e3ebff;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
animation: gbv3-wm-in .14s ease; }
@keyframes gbv3-wm-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.gbv3-wm__hd { padding: 10px 13px; border-bottom: 1px solid #22324f; border-left: 2px solid var(--rel, #5b6a8c); }
.gbv3-wm__nm { font: 700 13px/1.2 "Chakra Petch", system-ui, sans-serif; letter-spacing: .5px; color: #fff; }
.gbv3-wm__meta { display: block; font-size: 10px; color: #9fb0d0; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
.gbv3-wm__tag { font-weight: 700; color: var(--rel, #9fb0d0); }
.gbv3-wm__row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; cursor: pointer;
font: 600 12px/1 "Chakra Petch", sans-serif; letter-spacing: .6px; color: #e3ebff; border-top: 1px solid rgba(40,56,90,.45);
background: none; width: 100%; text-align: left; }
.gbv3-wm__row:hover { background: rgba(255,255,255,.04); }
.gbv3-wm__row[disabled] { opacity: .4; cursor: not-allowed; }
.gbv3-wm__ic { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 13px; background: rgba(0,194,207,.12); border: 1px solid #2f6a7a; flex: 0 0 auto; }
.gbv3-wm__row--col .gbv3-wm__ic { background: rgba(250,109,0,.14); border-color: #7a5320; }
.gbv3-wm__row--atk .gbv3-wm__ic { background: rgba(255,90,90,.12); border-color: #7a2f3a; color: #ff9a9a; }
.gbv3-wm__row--sup .gbv3-wm__ic { background: rgba(72,209,122,.12); border-color: #2f7a4a; color: #9ff0bd; }
.gbv3-wm__eta { padding: 0px 13px 0; font-size: 9px; color: #9fb0d0; }
.gbv3-wm__warn { margin: 0 13px 10px; padding: 6px 9px; font: 600 9.5px/1.3 "Chakra Petch", sans-serif; letter-spacing: .5px;
text-transform: uppercase; color: #ffcaca; background: rgba(220,53,69,.12); border: 1px solid rgba(220,53,69,.4); border-left: 2px solid #dc3545; }
/* Cadre de modale commun (Fiche, Sonde, …) */
.gbv3-wmodal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px;
background: rgba(4,6,12,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.gbv3-wmodal__box { position: relative; width: min(460px, calc(100vw - 24px)); max-height: 86vh; overflow: auto;
background: linear-gradient(180deg, rgba(20,23,36,.98), rgba(8,10,18,.99)); border: 1px solid #243049;
box-shadow: 0 22px 60px rgba(0,0,0,.7); color: #dfe7fb;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.gbv3-wmodal__hd { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #22324f; }
.gbv3-wmodal__title { flex: 1; font: 700 14px/1.2 "Chakra Petch", sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #ffd9a8; }
.gbv3-wmodal__close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer;
color: #ffd9a8; background: rgba(250,109,0,.10); border: 1px solid rgba(250,109,0,.45); font-size: 14px; }
.gbv3-wmodal__close:hover { background: #fa6d00; color: #0a0a0a; }
.gbv3-wmodal__body { padding: 14px 16px; font-size: 13px; line-height: 1.5; }
.gbv3-wmodal__err { margin: 0 16px 12px; padding: 8px 10px; color: #ffcaca; background: rgba(220,53,69,.12);
border: 1px solid rgba(220,53,69,.4); font-size: 12px; }
.gbv3-wmodal__lane { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed rgba(60,80,120,.4); font-size: 12px; }
.gbv3-wmodal__lane b { color: #fff; }
/* Champs de formulaire dans les modales (sonde, attaque…) : compacts et au thème sombre,
au lieu des inputs bootstrap clairs et trop hauts. La largeur reste libre (gérée au cas
par cas) pour ne pas perturber les petits champs de quantité de la modale d'attaque. */
.gbv3-wmodal select,
.gbv3-wmodal input[type="number"] {
height: 34px; padding: 0 11px; box-sizing: border-box; vertical-align: middle;
font: 600 13px/1 "Chakra Petch", system-ui, monospace; color: #e8eefc;
background: #0c111c; border: 1px solid #2c3a55; border-radius: 4px;
transition: border-color .15s, box-shadow .15s; }
.gbv3-wmodal select {
-webkit-appearance: none; appearance: none; padding-right: 30px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a97b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 11px center; }
.gbv3-wmodal input[type="number"] { padding-right: 6px; }
.gbv3-wmodal select:focus,
.gbv3-wmodal input[type="number"]:focus {
outline: none; border-color: #fa6d00;
box-shadow: 0 0 0 1px rgba(250,109,0,.35), 0 0 10px rgba(250,109,0,.18); }
.gbv3-wmodal option { background: #0c111c; color: #e8eefc; }
/* Bloc de champ étiqueté (label discret au-dessus du contrôle) */
.gbv3-wmodal__sub { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: #9fb0d0; }
.gbv3-wmodal__field { margin: 0 0 15px; }
.gbv3-wmodal__flabel { display: block; font: 700 10px/1 "Chakra Petch", sans-serif; letter-spacing: 1.5px;
text-transform: uppercase; color: #8a97b8; margin-bottom: 7px; }
.gbv3-wmodal__field > select { width: 100%; }
.gbv3-wmodal__numrow { display: flex; align-items: center; gap: 11px; }
.gbv3-wmodal__numrow input[type="number"] { width: 86px; }
.gbv3-wmodal__hint { font-size: 12.5px; color: #7e8cab; }
.gbv3-wmodal__hint b { color: #cfe0ff; }
.gbv3-wmodal__maxbtn { margin-left: auto; font: 700 10px/1 "Chakra Petch", sans-serif; letter-spacing: 1px;
text-transform: uppercase; color: #ffd9a8; background: rgba(250,109,0,.10); border: 1px solid rgba(250,109,0,.4);
padding: 8px 13px; border-radius: 4px; cursor: pointer; transition: background .15s, color .15s; }
.gbv3-wmodal__maxbtn:hover { background: #fa6d00; color: #0a0a0a; }
/* Bouton d'action principal pleine largeur */
.gbv3-wmodal__submit { width: 100%; margin-top: 6px; justify-content: center; }
/* Mobile : modales d'action (et selecteur de planetes) en plein ecran. */
@media (max-width: 767.98px) {
.gbv3-wmodal { padding: 0; align-items: stretch; }
.gbv3-wmodal__box {
width: 100vw; max-width: none; max-height: none;
height: 100vh; height: 100dvh; border-radius: 0;
display: flex; flex-direction: column;
}
.gbv3-wmodal__body {
flex: 1 1 auto; overflow-y: auto;
padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
}
.gbv3-wm__hint { opacity: .7; font-size: 11px; }
/* Indicateur d'entretien d'empire (transparence) près du +/s empire */
.gbv3-upkeep { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #cdd6ee; opacity: .85; }
.gbv3-upkeep__icon { width: 13px; height: 13px; }
.gbv3-upkeep__info { background: none; border: none; color: #7f8db0; cursor: pointer; font-size: 11px; padding: 0 2px; line-height: 1; }
.gbv3-upkeep-pop { position: absolute; z-index: 50; max-width: 260px; background: rgba(7,11,20,.96); border: 1px solid rgba(250,109,0,.4); border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.4; color: #cdd6ee; text-align: left; }
.gbv3-upkeep-pop strong { color: #fa6d00; }
.gbv3-upkeep-pop p { margin: .4em 0 0; }
.gbv3-wm__grab { display: none; }
@media (max-width: 767.98px) {
.gbv3-wm {
left: 0 !important; right: 0 !important; top: auto !important;
/* .gbv3-wm est en position:absolute dans #gbv3-screen, dont le bas est deja
cale au ras de la tab bar (carte = 100dvh - hero - tab bar). bottom:0 colle
donc la feuille juste au-dessus de la tab bar, sans gap. */
bottom: 0 !important;
width: auto; max-width: none;
border-radius: 14px 14px 0 0; border-bottom: 0;
padding-top: 10px;
box-shadow: 0 -8px 24px rgba(0,0,0,.55);
animation: gbv3-wm-up .18s ease-out;
}
.gbv3-wm__grab { display: block; width: 38px; height: 4px; border-radius: 2px;
background: #3a4560; margin: 0 auto 8px; }
}
@keyframes gbv3-wm-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }