/* ToutKin : Kuluna Mobile — design bleu, compact : petits textes et petits boutons pour laisser la place au contenu. */
:root {
  --fond: #07101f;
  --fond2: #0d1a30;
  --verre: rgba(120, 170, 255, .07);
  --verre-bord: rgba(140, 185, 255, .2);
  --texte: #eef4ff;
  --texte2: #93a7c6;
  --bleu: #2f8cff;
  --bleu-fonce: #1859c9;
  --bleu-clair: #7cc0ff;
  --accent: #46a2ff;          /* couleur principale (titres, sélection, chiffres) */
  --jaune: var(--accent);     /* ancien nom gardé pour les règles du jeu */
  --rouge: #ff4d5e;
  --vert: #38d97a;
  --rayon: 10px;
  --titre: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --corps: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --coque: #d6d6d4; --coque2: #c4c4c1; --coque-texte: #1b1b1b; --coque-label: #1b1b1b; --bezel: #a9a29a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte); font-family: var(--corps); font-size: 13px; overflow: hidden; overscroll-behavior: none; }
body { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
input, select { user-select: text; -webkit-user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: var(--bleu-clair); }
[hidden] { display: none !important; }


/* ---------- Icônes (SVG en masque) ---------- */
.ic { display: inline-block; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; vertical-align: -0.2em; }
.ic-etoile { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 7h7l-5.6 4.3L18.5 21 12 16.8 5.5 21l2.1-7.7L2 9h7z'/%3E%3C/svg%3E"); }
.ic-nuage { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 19a4.5 4.5 0 01-.6-9A6 6 0 0117.6 9 4.8 4.8 0 0118 19zM12 10l-4 4h3v4h2v-4h3z'/%3E%3C/svg%3E"); }
.ic-reglages { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.4 13a7.6 7.6 0 000-2l2.1-1.6-2-3.5-2.5 1a7 7 0 00-1.7-1L15 3h-4l-.4 2.9a7 7 0 00-1.7 1l-2.5-1-2 3.5L6.6 11a7.6 7.6 0 000 2l-2.1 1.6 2 3.5 2.5-1c.5.4 1.1.7 1.7 1L11 21h4l.4-2.9c.6-.3 1.2-.6 1.7-1l2.5 1 2-3.5zM13 15.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z'/%3E%3C/svg%3E"); }
.ic-gang { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h2v20H5zM8 3h12l-3 4.5L20 12H8z'/%3E%3C/svg%3E"); }
.ic-coupe { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v2h4v3a5 5 0 01-4.6 5A5 5 0 0113 16v2h4v3H7v-3h4v-2a5 5 0 01-3.4-3A5 5 0 013 8V5h4zm0 4H5v1a3 3 0 002 2.8zm10 0v3.8A3 3 0 0019 8V7z'/%3E%3C/svg%3E"); }
.ic-profil { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 21c0-5 4-8 9-8s9 3 9 8z'/%3E%3C/svg%3E"); }
.ic-retour { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 3L7 12l8.5 9 2-2L11 12l6.5-7z'/%3E%3C/svg%3E"); }
.ic-camera { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h4l2-3h6l2 3h4v13H3zm9 11a4.5 4.5 0 100-9 4.5 4.5 0 000 9z'/%3E%3C/svg%3E"); }
.ic-pause { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4v16H6zm8 0h4v16h-4z'/%3E%3C/svg%3E"); }
.ic-attaque { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 2L9 13.5l1.5 1.5L22 3.5V2zM8 14.5l-2.5 2.5-1-1L3 17.5 6.5 21 8 19.5l-1-1 2.5-2.5z'/%3E%3C/svg%3E"); }
.ic-saut { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l7 8h-4.5v5h-5v-5H5zm-7 16h14v3H5z'/%3E%3C/svg%3E"); }
.ic-genou { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4' r='2.5'/%3E%3Cpath d='M9 8h5l2 6h-3l-1 2 4 2v3h-2v-2l-5-2 1-4-2-1v4H6v-5z'/%3E%3C/svg%3E"); }
.ic-courir { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='15' cy='4' r='2.5'/%3E%3Cpath d='M10 7l5 1 2 3 3 1-.5 2-4-1.3-1.2-1.4-1.3 3.2 3 2.5V22h-2v-4l-3.3-2.4L8.5 22h-2.2l2.8-8.5L10 9.5l-2 1V13H6V9.3z'/%3E%3C/svg%3E"); }
.ic-skin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2l-6 4 3 5 2-1v12h10V10l2 1 3-5-6-4c-.5 1.7-2 3-4 3S8.5 3.7 8 2z'/%3E%3C/svg%3E"); }
.ic-plein { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h7v2.5H5.5V10H3zm11 0h7v7h-2.5V5.5H14zM3 14h2.5v4.5H10V21H3zm15.5 0H21v7h-7v-2.5h4.5z'/%3E%3C/svg%3E"); }
.ic-reduire { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 3H10v7H3V7.5h4.5zM14 3h2.5v4.5H21V10h-7zM3 14h7v7H7.5v-4.5H3zm11 0h7v2.5h-4.5V21H14z'/%3E%3C/svg%3E"); }
.ic-ordre-attaque { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h10.2l-4.6-4.6L11 5l7 7-7 7-1.4-1.4 4.6-4.6H4zm15-6h2v14h-2z'/%3E%3C/svg%3E"); }
.ic-partager { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16a3 3 0 00-2.2 1l-7-4.1a3 3 0 000-1.8l7-4.1A3 3 0 1015 5a3 3 0 00.1.8L8 9.9a3 3 0 100 4.2l7.1 4.1A3 3 0 1018 16z'/%3E%3C/svg%3E"); }
.ic-arme { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 0113.7-5.7L15 9h7V2l-2.3 2.3A11 11 0 001 12zm16 0a8 8 0 01-13.7 5.7L9 15H2v7l2.3-2.3A11 11 0 0023 12z'/%3E%3C/svg%3E"); }

/* ---------- Écrans ---------- */
.ecran { position: fixed; inset: 0; display: none; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ecran.actif { display: flex; }
#ecran-jeu { overflow: hidden; }
.fond-menu {
  background:
    radial-gradient(900px 480px at 85% -15%, rgba(47, 140, 255, .32), transparent 60%),
    radial-gradient(700px 420px at -10% 115%, rgba(24, 89, 201, .3), transparent 60%),
    linear-gradient(165deg, #0c1a33 0%, #07101f 60%, #0a1428 100%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.defilant { flex: 1; overflow-y: auto; padding: 8px 18px 14px; -webkit-overflow-scrolling: touch; }
.centre { text-align: center; }
.petit { font-size: 11px; color: var(--texte2); line-height: 1.4; }
.erreur { color: #ff8a95; font-size: 11px; margin: 2px 0; }
h1, h2, h3 { font-family: var(--titre); font-weight: 800; letter-spacing: .02em; margin: 0 0 6px; }
h1 { font-size: 15px; }
h2 { font-size: 14px; }
h3 { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; margin-top: 12px; }

.carte-verre { background: var(--verre); border: 1px solid var(--verre-bord); border-radius: var(--rayon); padding: 10px 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); margin-bottom: 10px; }
.petite-carte { width: min(340px, 90vw); margin: auto; display: flex; flex-direction: column; gap: 8px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--texte2); margin-bottom: 8px; }
input, select { font: inherit; font-size: 13px; color: var(--texte); background: rgba(0, 10, 30, .45); border: 1px solid var(--verre-bord); border-radius: 8px; padding: 7px 10px; outline: none; }
input:focus, select:focus { border-color: var(--bleu); }
select option { color: #000; }

.btn { display: block; width: 100%; padding: 8px 14px; border-radius: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; transition: transform .08s, filter .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { filter: grayscale(1) brightness(.6); }
.btn-jaune, .btn-bleu { background: linear-gradient(180deg, #4aa0ff, var(--bleu-fonce)); color: #fff; box-shadow: 0 4px 14px rgba(47, 140, 255, .35); }
.btn-verre { background: var(--verre); border: 1px solid var(--verre-bord); }
.btn-rouge { background: linear-gradient(180deg, #ff5a6a, #c4243a); color: #fff; }
.btn.large { font-size: 14px; padding: 10px 16px; }
.rond { width: 32px; height: 32px; border-radius: 50%; background: var(--verre); border: 1px solid var(--verre-bord); display: inline-grid; place-items: center; font-size: 14px; }
.rond.petit { width: 30px; height: 30px; font-size: 13px; }
.badge { display: inline-block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 5px; background: #445; color: #fff; }

/* ---------- Accueil ---------- */
.accueil { width: min(340px, 90vw); margin: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.logo { text-align: center; font-family: "Arial Black", "Segoe UI Black", system-ui, sans-serif; font-style: italic; line-height: .9; transform: skew(-6deg); }
.logo-tout, .logo-kin { font-size: clamp(34px, 10vw, 48px); }
.logo-tout { color: #fff; text-shadow: 0 3px 0 #0b3a87; }
.logo-kin { background: linear-gradient(180deg, #9ad0ff, #2f8cff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #082a66); }
.logo small { display: block; font-size: 10px; letter-spacing: .5em; color: var(--accent); margin-top: 4px; font-style: normal; }
.slogan { text-align: center; color: var(--texte2); margin: 0 0 4px; font-size: 11px; }

/* ---------- Lobby ---------- */
.barre-haut { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; gap: 8px; }
.profil-mini { display: flex; align-items: center; gap: 8px; text-align: left; background: rgba(0, 10, 30, .45); border: 1px solid var(--verre-bord); border-radius: 30px; padding: 3px 12px 3px 3px; min-width: 0; }
.profil-mini b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.profil-mini small { color: var(--accent); font-size: 10px; }
.drapeau-mini canvas { width: 28px !important; height: 28px !important; border-radius: 50%; display: block; object-fit: cover; }
.drapeau-hud canvas { border-radius: 4px; display: block; }
.jetons { display: flex; gap: 6px; align-items: center; }
.jeton { display: inline-flex; gap: 5px; align-items: center; background: rgba(0, 10, 30, .45); border: 1px solid var(--verre-bord); padding: 4px 10px; border-radius: 16px; color: var(--accent); font-size: 11px; }
.jeton.synchro { color: var(--bleu-clair); }
.lobby-centre { flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 6px; min-height: 160px; }
.scene-lobby { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene-lobby .soleil { position: absolute; width: 200px; height: 200px; right: 12%; top: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(140, 200, 255, .55) 0, rgba(47, 140, 255, .25) 45%, transparent 70%); }
.scene-lobby .immeubles { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: repeating-linear-gradient(90deg, #13223c 0 70px, #101c33 70px 120px, #182a48 120px 170px, #0f1a2e 170px 230px);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 25%); mask: linear-gradient(180deg, transparent 0, #000 25%);
  clip-path: polygon(0 30%, 8% 30%, 8% 12%, 18% 12%, 18% 38%, 30% 38%, 30% 5%, 41% 5%, 41% 28%, 55% 28%, 55% 15%, 66% 15%, 66% 34%, 78% 34%, 78% 8%, 90% 8%, 90% 26%, 100% 26%, 100% 100%, 0 100%); }
.scene-lobby .silhouettes { display: none; }
#canvas-lobby { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.gang-carte { position: relative; display: flex; gap: 8px; align-items: center; background: rgba(0, 10, 30, .6); border: 1px solid var(--verre-bord); border-radius: var(--rayon); padding: 5px 10px; cursor: pointer; }
.gang-carte canvas { width: 36px !important; height: 24px !important; border-radius: 3px; }
.gang-carte small { color: var(--texte2); display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.gang-carte b { display: block; font-size: 12px; text-transform: uppercase; }
.menu-cote { position: absolute; left: calc(14px + env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.menu-cote button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 54px; padding: 6px 0; border-radius: 10px; background: rgba(0, 10, 30, .55); border: 1px solid var(--verre-bord); font-size: 9.5px; font-weight: 700; }
.menu-cote .ic { font-size: 16px; color: var(--accent); }
.lobby-bas { padding: 6px 16px 12px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; z-index: 2; }
.mode-info { flex: 1; color: var(--texte2); font-size: 10px; margin: 0; }
.btn-jouer { font-weight: 900; letter-spacing: .08em; font-size: 16px; padding: 9px 38px; border-radius: 10px; color: #fff; background: linear-gradient(180deg, #5aaaff, var(--bleu-fonce)); box-shadow: 0 6px 20px rgba(47, 140, 255, .45); animation: pulse 2s infinite; }
.btn-jouer:active { transform: scale(.96); }
@keyframes pulse { 50% { filter: brightness(1.18); } }

/* ---------- Titres d'écrans ---------- */
.titre-ecran { display: flex; align-items: center; gap: 10px; padding: 8px 18px 2px; }
.titre-ecran h1 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.retour { width: 28px; height: 28px; border-radius: 8px; background: var(--verre); border: 1px solid var(--verre-bord); display: grid; place-items: center; font-size: 13px; }
.bas-fixe { padding: 6px 18px 12px; display: flex; justify-content: flex-end; }
.bas-fixe .btn { width: auto; min-width: 200px; }

/* ---------- Choix de l'adversaire ---------- */
#adv-info { margin: 0 0 8px; }
.cartes-adv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.carte-adv { position: relative; text-align: left; border-radius: var(--rayon); padding: 8px 10px; background: var(--verre); border: 1.5px solid var(--verre-bord); display: flex; flex-direction: column; gap: 3px; transition: transform .1s, border-color .15s; }
.carte-adv canvas { width: 36px !important; height: 24px !important; border-radius: 3px; }
.carte-adv.choisie { border-color: var(--bleu); background: rgba(47, 140, 255, .14); box-shadow: 0 0 0 3px rgba(47, 140, 255, .2); }
.carte-adv b { font-size: 12px; text-transform: uppercase; }
.carte-adv .lieu { color: var(--texte2); font-size: 10px; }
.carte-adv .force { font-size: 10.5px; }
.carte-adv .force b { font-size: 10.5px; color: var(--accent); }
.puces { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 18px; }
.defilant .puces { padding: 0; }
.puces button { padding: 4px 10px; border-radius: 14px; background: var(--verre); border: 1px solid var(--verre-bord); font-size: 11px; white-space: nowrap; }
.puces button.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 700; }
.puce-terrain small { display: none; }

/* ---------- Classement ---------- */
.onglets { display: flex; margin: 4px 18px; background: rgba(0, 10, 30, .45); border-radius: 9px; padding: 3px; }
.onglets button { flex: 1; padding: 5px 4px; border-radius: 7px; font-size: 11px; font-weight: 700; color: var(--texte2); }
.onglets button.actif { background: var(--bleu); color: #fff; }
#periodes button { padding: 3px 10px; font-size: 10.5px; }
.ligne-classement { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; background: rgba(120, 170, 255, .05); margin-bottom: 4px; }
.ligne-classement canvas { width: 27px !important; height: 18px !important; border-radius: 3px; }
.ligne-classement.moi { background: rgba(47, 140, 255, .16); border: 1px solid rgba(47, 140, 255, .55); }
.ligne-classement .pos { width: 24px; text-align: center; font-weight: 900; font-size: 12px; color: var(--texte2); }
.ligne-classement:nth-child(1) .pos { color: #ffd54f; } .ligne-classement:nth-child(2) .pos { color: #d7e0ea; } .ligne-classement:nth-child(3) .pos { color: #e09a5f; }
.ligne-classement .nom { flex: 1; min-width: 0; }
.ligne-classement .nom b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-classement .nom small { color: var(--texte2); font-size: 10px; }
.ligne-classement .pts { font-weight: 800; color: var(--accent); font-size: 11px; }
.vide { text-align: center; color: var(--texte2); padding: 16px 10px; font-size: 12px; }

/* ---------- Gang ---------- */
.grille-drapeaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 5px; margin: 4px 0 8px; }
.grille-drapeaux button { padding: 2px; border-radius: 6px; border: 2px solid transparent; background: rgba(0, 10, 30, .3); }
.grille-drapeaux button.actif { border-color: var(--bleu); }
.grille-drapeaux canvas { width: 100% !important; height: auto !important; border-radius: 3px; display: block; }
.gang-entete { display: flex; gap: 10px; align-items: center; }
.gang-entete canvas { width: 48px !important; height: 32px !important; border-radius: 4px; }
.gang-entete b { font-size: 14px; text-transform: uppercase; display: block; }
.actions { display: flex; gap: 8px; margin-top: 8px; }
.ligne-gang { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; background: rgba(120, 170, 255, .05); margin-bottom: 4px; width: 100%; text-align: left; }
.ligne-gang canvas { width: 30px !important; height: 20px !important; border-radius: 3px; }
.ligne-gang .nom { flex: 1; min-width: 0; }
.ligne-gang .nom b { display: block; font-size: 12px; }
.ligne-gang .nom small { color: var(--texte2); font-size: 10px; }
.ligne-gang .btn { padding: 5px 9px !important; font-size: 10px !important; }
.recherche { display: flex; gap: 6px; }
.recherche input { flex: 1; }
.recherche .btn { width: auto; }

/* ---------- Réglages ---------- */
.reglages .ligne, .reglages div.ligne { display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: var(--texte); padding: 3px 0; margin: 0; font-size: 12px; }
.reglages select { min-width: 120px; padding: 4px 8px; font-size: 12px; }
.reglages input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--bleu); }
.coques { display: flex; gap: 8px; }
.coques button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; }
.coques [data-coque=gris] { background: #d6d6d4; } .coques [data-coque=noir] { background: #222; } .coques [data-coque=rouge] { background: #d71920; }
.coques button.actif { border-color: var(--bleu-clair); }
.touches-pc { margin: 0; padding-left: 16px; color: var(--texte2); font-size: 11px; line-height: 1.7; }
kbd { background: #1d2d4d; border-radius: 4px; padding: 0 4px; font-size: 10px; color: #fff; border-bottom: 2px solid #0a1428; }
#ecran-reglages .defilant > .btn { width: auto; margin: 0 auto 6px; padding: 7px 28px; }

/* ---------- Profil ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; }
.stats div { background: rgba(0, 10, 30, .4); border-radius: 8px; padding: 6px 4px; text-align: center; }
.stats b { display: block; font-size: 15px; color: var(--accent); font-weight: 900; }
.stats small { color: var(--texte2); font-size: 9.5px; line-height: 1.1; display: block; }
.progression { height: 6px; background: rgba(255, 255, 255, .1); border-radius: 4px; overflow: hidden; margin: 5px 0 3px; }
.progression i { display: block; height: 100%; background: linear-gradient(90deg, var(--bleu-clair), var(--bleu)); }
.grade-grand { font-weight: 900; font-size: 15px; color: var(--accent); text-transform: uppercase; }

/* ---------- Fin ---------- */
.fin { margin: auto; text-align: center; width: min(460px, 92vw); padding: 12px 0; }
.fin h1 { font-family: "Arial Black", system-ui, sans-serif; font-style: italic; font-size: 30px; margin: 0; }
.fin.victoire h1 { background: linear-gradient(180deg, #a6d6ff, #2f8cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fin.defaite h1 { color: var(--rouge); }
.fin.egalite h1 { color: #c9d6ea; }
.fin p { color: var(--texte2); font-size: 12px; margin: 4px 0; }
.fin-stats { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.fin-stats div { background: rgba(0, 10, 30, .45); border: 1px solid var(--verre-bord); border-radius: 8px; padding: 5px 8px; min-width: 64px; }
.fin-stats b { display: block; font-size: 15px; font-weight: 900; }
.fin-stats small { color: var(--texte2); font-size: 9.5px; }
.fin-points { font-weight: 900; font-size: 15px; margin-bottom: 10px; }
.fin-points.plus { color: var(--vert); } .fin-points.moins { color: var(--rouge); }
.fin-actions { display: flex; gap: 10px; justify-content: center; }
.fin-actions .btn { max-width: 170px; }

/* ---------- Toast / voiles ---------- */
.toast { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: rgba(7, 16, 31, .94); border: 1px solid var(--verre-bord); padding: 6px 14px; border-radius: 18px; z-index: 50; font-size: 11px; max-width: 90vw; text-align: center; }
.voile { position: fixed; inset: 0; background: rgba(3, 8, 18, .72); display: flex; z-index: 40; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.chargement { margin: auto; display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 12px; }
.chargement span { width: 18px; height: 18px; border: 3px solid var(--bleu); border-right-color: transparent; border-radius: 50%; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Chargement des données ---------- */
.chargement-donnees { margin: auto; width: min(340px, 84vw); display: flex; flex-direction: column; gap: 10px; padding: 14px 0; }
.jauge { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.jauge i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--bleu-clair), var(--bleu)); transition: width .2s; }

/* ---------- Skins ---------- */
.skins { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 12px; padding: 6px 18px 12px; }
.apercu-skin { position: relative; min-height: 200px; border-radius: var(--rayon); background: radial-gradient(circle at 50% 38%, rgba(47, 140, 255, .28), rgba(0, 8, 24, .4) 70%); border: 1px solid var(--verre-bord); overflow: hidden; }
.apercu-skin canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.apercu-skin b { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 1px 3px #000; }
.choix-skins { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.interrupteur { flex-direction: row; align-items: center; gap: 8px; color: var(--texte); font-weight: 700; font-size: 11.5px; margin: 0; background: rgba(0, 10, 30, .4); padding: 6px 10px; border-radius: 8px; border: 1px solid var(--verre-bord); }
.interrupteur input { width: 15px; height: 15px; accent-color: var(--bleu); }
.choix-skins .petit { margin: 0; }
.grille-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; overflow-y: auto; align-content: start; min-height: 0; padding-bottom: 4px; }
.grille-skins.grise { opacity: .45; }
.carte-skin { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 8px; border-radius: 8px; background: var(--verre); border: 1.5px solid transparent; font-size: 10.5px; font-weight: 700; text-align: left; }
.onglets-skins { margin: 0; }
.carte-skin { position: relative; }
.carte-skin.verrou { opacity: .5; }
.cadenas { font-size: 9px; color: var(--texte2); font-weight: 600; }
.carte-skin.choisie { border-color: var(--bleu); background: rgba(47, 140, 255, .16); }
.pastilles { display: flex; gap: 3px; }
.pastilles i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45); }
@media (orientation: portrait) {
  .skins { grid-template-columns: 1fr; grid-template-rows: 38vh auto; }
}

/* =====================================================================
   JEU
   ===================================================================== */
#ecran-jeu { background: #000; }
.console { position: absolute; inset: 0; display: flex; flex-direction: column; }
.console-ecran { flex: 1; position: relative; min-height: 0; }
.vue { position: absolute; inset: 0; overflow: hidden; }
#canvas-jeu { width: 100%; height: 100%; display: block; touch-action: none; }
.console-bas { display: none; }

/* HUD */
.hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--corps); }
.hud button { pointer-events: auto; }
.hud-haut { position: absolute; top: calc(6px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; }
.equipe { display: flex; align-items: center; gap: 5px; background: rgba(3, 10, 24, .55); padding: 3px 6px; border-radius: 8px; }
.drapeau-hud canvas { width: 22px !important; height: 15px !important; }
.equipe b { font-weight: 900; font-size: 13px; min-width: 14px; text-align: center; }
.e0 b { color: var(--vert); } .e1 b { color: var(--rouge); }
.barre-drapeau { width: 48px; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.barre-drapeau i { display: block; height: 100%; width: 100%; transition: width .2s; }
.e0 .barre-drapeau i { background: var(--vert); }
.e1 .barre-drapeau { transform: scaleX(-1); }
.e1 .barre-drapeau i { background: var(--rouge); }
.chrono { font-weight: 900; font-size: 13px; background: rgba(3, 10, 24, .6); padding: 3px 10px; border-radius: 8px; min-width: 54px; text-align: center; border: 1px solid rgba(70, 162, 255, .35); }
.chrono.urgent { color: var(--rouge); animation: pulse .6s infinite; }
.carte { position: absolute; top: calc(36px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: 170px; height: 34px; border-radius: 6px; background: rgba(3, 10, 24, .35); }
.fil { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 3px; font-size: 10px; }
.fil div { background: rgba(3, 10, 24, .55); padding: 2px 8px; border-radius: 6px; animation: apparait .2s; border-left: 3px solid var(--vert); }
.fil div.e1 { border-left-color: var(--rouge); }
@keyframes apparait { from { opacity: 0; transform: translateX(-10px); } }
.annonce { position: absolute; top: 34%; left: 0; right: 0; text-align: center; font-family: var(--titre); font-style: italic; font-size: clamp(28px, 6vw, 52px); color: #fff; text-shadow: 0 3px 0 #0b3a87, 0 0 24px rgba(47, 140, 255, .7); opacity: 0; }
.annonce.montre { animation: annonce 1.1s ease-out forwards; }
@keyframes annonce { 0% { opacity: 0; transform: scale(2); } 15% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(.9); } }
.message { position: absolute; top: 26%; left: 50%; transform: translateX(-50%); background: rgba(3, 10, 24, .7); padding: 4px 12px; border-radius: 14px; font-weight: 700; font-size: 11.5px; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.message.montre { opacity: 1; }
.message.alerte { background: rgba(200, 30, 50, .85); }
.hud-bas { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(240px, 32vw); display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.vie { position: relative; }
#hud-pv { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-size: 8.5px; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px #000; }
.vie, .souffle { height: 10px; border-radius: 5px; background: rgba(0, 0, 0, .55); overflow: hidden; border: 1px solid rgba(255, 255, 255, .25); }
.vie + .souffle { height: 4px; }
.vie i, .souffle i { display: block; height: 100%; width: 100%; transition: width .15s; }
.vie i { background: linear-gradient(90deg, #2bd46a, #9dff5c); }
.vie i.bas { background: linear-gradient(90deg, #ff3b3b, #ff8a3b); }
.souffle i { background: var(--bleu-clair); }
.arme-info { text-align: center; font-size: 10.5px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.arme-info b { color: var(--jaune); }
.flash-touche { position: absolute; inset: 0; box-shadow: inset 0 0 80px rgba(255, 0, 0, .7); opacity: 0; transition: opacity .3s; }
.flash-touche.montre { opacity: 1; transition: none; }
.haut-droite { position: absolute; top: calc(6px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); display: flex; gap: 6px; }
.haut-droite .rond { background: rgba(3, 10, 24, .5); width: 28px; height: 28px; font-size: 12px; }

/* Commandes paysage */
.tactile-paysage { display: none; position: absolute; inset: 0; pointer-events: none; }
.zone-joystick { position: absolute; left: 0; bottom: 0; width: 45%; height: 70%; pointer-events: auto; touch-action: none; }
.joystick { position: absolute; left: 96px; top: calc(100% - 100px); width: 108px; height: 108px; margin: -54px 0 0 -54px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .08), rgba(255, 255, 255, .18)); border: 2px solid rgba(255, 255, 255, .35); opacity: .7; }
.joystick.actif { opacity: 1; }
.manche { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c9d3e0); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.boutons-droite { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); width: 270px; height: 185px; pointer-events: none; transform-origin: 100% 100%; transform: scale(.78); }
.bt { position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; display: grid; place-items: center; background: rgba(3, 10, 24, .45); border: 2px solid rgba(160, 200, 255, .45); color: #fff; font-size: 22px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.bt.appuye { transform: scale(.92); background: rgba(47, 140, 255, .55); }
.bt.bascule { background: rgba(47, 140, 255, .6); border-color: var(--bleu-clair); }
/* boutons en arc autour du bouton d'attaque, bien espacés pour ne pas appuyer sur le voisin */
.bt-attaque { width: 90px; height: 90px; right: 0; bottom: 0; font-size: 38px; background: radial-gradient(circle at 40% 35%, rgba(90, 170, 255, .85), rgba(24, 89, 201, .75)); border-color: rgba(190, 220, 255, .85); }
.bt-saut { width: 58px; height: 58px; right: 122px; bottom: 16px; font-size: 20px; }
.bt-courir { width: 54px; height: 54px; right: 93px; bottom: 93px; font-size: 20px; }
.bt-arme { width: 58px; height: 58px; right: 16px; bottom: 122px; font-size: 20px; }
.bt-genou { width: 52px; height: 52px; right: 209px; bottom: 8px; font-size: 19px; }
.nb-pierres { position: absolute; bottom: -6px; right: -6px; background: var(--bleu); color: #fff; font-size: 11px; border-radius: 10px; padding: 1px 6px; font-style: normal; }

/* ---------- Mode PC ---------- */
body.mode-pc .tactile-paysage { display: none; }

/* ---------- Mode paysage (téléphone couché) ---------- */
body.mode-paysage .tactile-paysage { display: block; }
body.mode-paysage .hud-bas { bottom: calc(8px + env(safe-area-inset-bottom)); width: min(230px, 28vw); }




/* =====================================================================
   Téléphone couché (paysage) : les écrans se rangent en colonnes pour tout voir sans défiler.
   ===================================================================== */
@media (orientation: landscape) {
  .cartes-adv { grid-template-columns: repeat(3, 1fr); }
  #gang-contenu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  #gang-contenu .carte-verre { margin: 0; }
  #resultats-gangs { max-height: calc(100vh - 130px); overflow-y: auto; }
  #liste-classement { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; align-content: start; }
  #liste-classement > p { grid-column: 1 / -1; margin: 2px 0; }
  #profil-contenu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
  #profil-contenu .carte-verre { margin: 0; }
  #profil-contenu .carte-verre:nth-child(3) { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(5, 1fr); }
  #ecran-reglages .defilant { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px 12px; align-content: start; }
  #ecran-reglages .carte-verre { margin: 0; }
  #ecran-reglages .carte-verre h3 { margin-top: 0; }
  #ecran-reglages .defilant > .btn, #ecran-reglages .defilant > p { grid-column: 1 / -1; }
  .fin { width: min(640px, 92vw); display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "titre stats" "raison stats" "points actions"; column-gap: 18px; align-items: center; }
  #fin-titre { grid-area: titre; }
  #fin-raison { grid-area: raison; }
  #fin-stats { grid-area: stats; }
  #fin-points { grid-area: points; margin: 0; }
  .fin-actions { grid-area: actions; }
}
@media (orientation: landscape) and (max-height: 420px) {
  .defilant { padding: 4px 18px 8px; }
  .titre-ecran { padding: 6px 18px 0; }
  .carte-verre { padding: 8px 10px; margin-bottom: 8px; }
  .apercu-skin { min-height: 0; }
  .lobby-bas { padding: 4px 16px 8px; }
}
@media (orientation: portrait) and (max-width: 520px) {
  .menu-cote { position: static; transform: none; flex-direction: row; justify-content: center; padding: 4px 12px; }
  .menu-cote button { flex: 1; max-width: 70px; }
  .lobby-bas { flex-direction: column; align-items: stretch; }
  .btn-jouer { width: 100%; }
  .mode-info { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .btn-jouer { animation: none; } }

/* Ordres aux coéquipiers (en jeu, à gauche) */
.ordres { position: absolute; left: calc(8px + env(safe-area-inset-left)); top: 34%; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.ordres button { pointer-events: auto; touch-action: none; display: flex; flex-direction: column; align-items: center; gap: 1px; width: 44px; padding: 4px 0; border-radius: 9px; background: rgba(3, 10, 24, .5); border: 1px solid rgba(140, 185, 255, .3); color: #fff; font-size: 13px; }
.ordres button small { font-size: 8px; font-weight: 700; color: var(--texte2); }
.ordres button.actif { background: rgba(47, 140, 255, .65); border-color: var(--bleu-clair); }
.ordres button.actif small { color: #fff; }
.ordres button.appuye { transform: scale(.94); }
.fin-actions { flex-wrap: wrap; }

/* Choix des 3 armes (écran adversaire) */
.bas-fixe { align-items: center; gap: 12px; }
.choix-armes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.choix-armes > small { font-size: 10px; color: var(--texte2); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.choix-armes .puces { padding: 0; gap: 5px; }
.puce-arme { padding: 3px 9px !important; font-size: 10.5px !important; }
.puce-arme small { color: var(--bleu-clair); font-weight: 800; }
.puce-arme.actif small { color: #fff; }
@media (orientation: portrait) { .bas-fixe { flex-direction: column; align-items: stretch; } .bas-fixe .btn { width: 100%; } }

/* Préparation du match */
.chargement-match { margin: auto; width: min(360px, 84vw); display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.chargement-match .chargement { margin: 0; justify-content: center; }
.chargement-match b { font-size: 12px; font-weight: 700; }

/* Petits téléphones couchés : tout tient sans défiler */
@media (orientation: landscape) and (max-height: 400px) {
  #adv-info, .carte-adv .lieu { display: none; }
  .carte-adv { padding: 5px 9px; gap: 2px; }
  #ecran-adversaire h3 { margin: 6px 0 4px; }
  #ecran-adversaire .puces button { padding: 3px 9px; }
  .bas-fixe { padding: 4px 18px 6px; }
  .bas-fixe .btn.large { padding: 8px 14px; }
  .reglages .ligne, .reglages div.ligne { padding: 1px 0; }
}
/* Sur téléphone, l'aide des touches du clavier ne sert à rien */
@media (pointer: coarse) {
  #ecran-reglages .defilant > .carte-verre:nth-of-type(2) { display: none; }
  #ecran-reglages .defilant { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   1.6 — Boutons carrés à coins arrondis : noir transparent, texte blanc ;
   bleu pour ce qui est important (jouer, commencer, valider) ; contour bleu pour ce qui est choisi.
   ===================================================================== */
:root { --bouton: rgba(0, 0, 0, .55); --bouton-bord: rgba(255, 255, 255, .16); --coin: 7px; }
.btn { border-radius: var(--coin); }
.btn-verre { background: var(--bouton); border: 1px solid rgba(70, 162, 255, .55); color: #fff; }
.btn-jaune, .btn-bleu { background: linear-gradient(180deg, #3d97ff, var(--bleu-fonce)); border: 1px solid rgba(160, 205, 255, .6); color: #fff; }
.btn-rouge { border-radius: var(--coin); }
.btn-jouer { border-radius: var(--coin); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.rond, .rond.petit, .retour { border-radius: var(--coin); background: var(--bouton); border: 1px solid var(--bouton-bord); color: #fff; }
.rond .ic, .retour .ic { color: #fff; }
.menu-cote button, .gang-carte, .profil-mini, .jeton { border-radius: var(--coin); background: var(--bouton); border-color: var(--bouton-bord); }
.menu-cote .ic { color: var(--bleu-clair); }
.puces button, .onglets button, .carte-skin, .carte-adv, .ligne-gang, .ligne-classement { border-radius: var(--coin); }
.puces button { background: var(--bouton); border-color: var(--bouton-bord); color: #fff; }
.puces button.actif { background: rgba(47, 140, 255, .22); border-color: var(--bleu); color: #fff; }
.onglets { border-radius: calc(var(--coin) + 2px); background: var(--bouton); }
.onglets button.actif { background: rgba(47, 140, 255, .25); color: #fff; box-shadow: inset 0 0 0 1px var(--bleu); }
.carte-adv, .carte-skin { background: var(--bouton); border-color: var(--bouton-bord); }
.carte-adv.choisie, .carte-skin.choisie { border-color: var(--bleu); background: rgba(47, 140, 255, .14); }
.carte-adv .force b, .carte-adv b { color: #fff; }
.carte-adv .force b { color: var(--bleu-clair); }
.interrupteur { border-radius: var(--coin); background: var(--bouton); }
.coques button { border-radius: 5px; }

/* En jeu : boutons tactiles carrés (coins arrondis), noir transparent */
.bt { border-radius: 14px; background: rgba(0, 0, 0, .45); border: 1.5px solid rgba(255, 255, 255, .35); }
.bt-attaque { border-radius: 18px; background: linear-gradient(180deg, rgba(61, 151, 255, .85), rgba(24, 89, 201, .85)); border-color: rgba(190, 220, 255, .85); }
.bt.bascule { background: rgba(0, 0, 0, .5); border-color: var(--bleu-clair); color: var(--bleu-clair); }
.bt.appuye { background: rgba(47, 140, 255, .45); }
.joystick { border-radius: 50%; }
.haut-droite .rond { border-radius: 8px; background: rgba(0, 0, 0, .45); }
.ordres button { border-radius: 8px; background: rgba(0, 0, 0, .45); border-color: rgba(255, 255, 255, .25); }
.ordres button.actif { background: rgba(0, 0, 0, .55); border-color: var(--bleu); color: var(--bleu-clair); }
.ordres button.actif small { color: var(--bleu-clair); }
.equipe, .chrono, .message, .fil div { border-radius: 6px; }
.nb-pierres { border-radius: 5px; }

/* Étape 2 : choix des armes */
.etape { margin: 10px 0 0; }
.cartes-armes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.carte-arme { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: var(--coin); background: var(--bouton); border: 1.5px solid var(--bouton-bord); color: #fff; }
.carte-arme b { font-size: 12.5px; text-transform: uppercase; }
.carte-arme > small { font-size: 10px; color: var(--texte2); line-height: 1.3; min-height: 2.6em; }
.carte-arme.choisie { border-color: var(--bleu); background: rgba(47, 140, 255, .16); }
.carte-arme.choisie b { color: var(--bleu-clair); }
.stat { display: grid; grid-template-columns: 46px 1fr 30px; align-items: center; gap: 6px; font-size: 9.5px; }
.stat em { font-style: normal; color: var(--texte2); }
.stat i { display: block; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--bleu-clair), var(--bleu)); }
.stat u { text-decoration: none; text-align: right; font-weight: 800; }
.bas-fixe { justify-content: space-between; }
.info-armes { margin: 0; flex: 1; font-size: 11px; }
@media (orientation: portrait) { .cartes-armes { grid-template-columns: 1fr 1fr; } }

/* Terrain tiré au sort (pendant la préparation du match) */
.tirage-terrain { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tirage-terrain small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-clair); font-weight: 800; }
.tirage-terrain img { width: min(320px, 70vw); aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--coin); border: 1.5px solid var(--bleu); box-shadow: 0 8px 30px rgba(0, 0, 0, .5); background: #0d1a30; }
.tirage-terrain b { font-size: 15px; font-weight: 900; text-transform: uppercase; }
.tirage-terrain span { font-size: 11px; color: var(--texte2); }
@media (orientation: landscape) and (max-height: 420px) { .tirage-terrain img { width: min(240px, 40vw); } }
@media (orientation: landscape) and (max-height: 400px) {
  #armes-contre, .carte-arme > small { display: none; }
  .carte-arme { padding: 5px 8px; gap: 2px; }
  .stat { font-size: 9px; }
}

/* Les boutons du HUD (ordres, caméra, pause, plein écran) passent au-dessus de la zone invisible du joystick,
   sinon le joystick « attrape » les appuis. Le reste du HUD laisse passer les doigts. */
.hud { z-index: 3; }
.tactile-paysage { z-index: 2; }

/* Manette : cadre bleu autour du bouton sélectionné */
body.manette :focus { outline: 2px solid var(--bleu-clair); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(47, 140, 255, .35); }
body:not(.manette) :focus:not(:focus-visible) { outline: none; }
/* Icônes des armes (panneau des armes) */
.ic-w-mabanga { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%277.5%27 cy=%2716%27 r=%275%27/%3E%3Ccircle cx=%2717%27 cy=%2716.5%27 r=%274.2%27/%3E%3Ccircle cx=%2712.5%27 cy=%278%27 r=%274.4%27/%3E%3C/svg%3E"); }
.ic-w-manchette { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M2.5 20.5l3.2-3.2 1.6 1.6-3.2 3.2a1.1 1.1 0 0 1-1.6-1.6z%27/%3E%3Cpath d=%27M7 15.4L18.6 3.2c1.9-.4 3.1.9 2.8 2.8L9.2 17.6z%27/%3E%3C/svg%3E"); }
.ic-w-baton { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Crect x=%2710.6%27 y=%270.5%27 width=%272.8%27 height=%2723%27 rx=%271.4%27 transform=%27rotate%2842 12 12%29%27/%3E%3C/svg%3E"); }
.ic-w-chaine { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cg fill=%27none%27 stroke=%27black%27 stroke-width=%272.3%27%3E%3Crect x=%271.8%27 y=%2714.2%27 width=%278.6%27 height=%275.4%27 rx=%272.7%27 transform=%27rotate%28-40 6.1 16.9%29%27/%3E%3Crect x=%277.7%27 y=%279.3%27 width=%278.6%27 height=%275.4%27 rx=%272.7%27 transform=%27rotate%2850 12 12%29%27/%3E%3Crect x=%2713.6%27 y=%274.4%27 width=%278.6%27 height=%275.4%27 rx=%272.7%27 transform=%27rotate%28-40 17.9 7.1%29%27/%3E%3C/g%3E%3C/svg%3E"); }
.ic-w-bouteille { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M9.8 1.5l1.1 1.6 1.1-1.6 1.1 1.6 1.1-1.6V6l2.2 3.2V21a1.5 1.5 0 0 1-1.5 1.5H9.1A1.5 1.5 0 0 1 7.6 21V9.2L9.8 6z%27/%3E%3C/svg%3E"); }
.ic-w-poing { --i: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M5.5 10.5A2 2 0 0 1 7.5 8.5H8V6.6a1.7 1.7 0 0 1 3.4 0V8h.2V6a1.7 1.7 0 0 1 3.4 0v2h.2V6.8a1.7 1.7 0 0 1 3.4 0v6.4c0 4.6-3.2 8.3-7.6 8.3h-.9c-2.7 0-4.6-2-4.6-4.6z%27/%3E%3C/svg%3E"); }

/* =====================================================================
   1.10 — Tableau de score, panneau des armes, console portrait bleue
   ===================================================================== */
:root {
  --eq0: #2f8cff; --eq0-clair: #8fcbff;   /* ton équipe : bleu */
  --eq1: #ff5a3c; --eq1-clair: #ffb09c;   /* l'adversaire : orange-rouge */
  --label: "Arial Narrow", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Tableau de score ---------- */
.hud-haut { gap: 0; align-items: stretch; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.hud-haut .equipe { gap: 5px; padding: 3px 5px; border-radius: 0; background: linear-gradient(180deg, rgba(8, 20, 44, .82), rgba(3, 9, 22, .82)); }
.hud-haut .e0 { clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); border-bottom: 2px solid var(--eq0); }
.hud-haut .e1 { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); border-bottom: 2px solid var(--eq1); }
.infos-eq { display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.hud-haut .barre-drapeau { width: 64px; height: 7px; border-radius: 1px; background: rgba(255, 255, 255, .12); }
.hud-haut .barre-drapeau i { -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 6.5px); mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 6.5px); }
.hud-haut .e0 .barre-drapeau i { background: linear-gradient(180deg, var(--eq0-clair), var(--eq0)); }
.hud-haut .e1 .barre-drapeau i { background: linear-gradient(180deg, var(--eq1-clair), var(--eq1)); }
.pips { display: flex; gap: 2px; height: 4px; }
.e1 .pips { justify-content: flex-end; }
.pips i { width: 5px; height: 4px; border-radius: 1px; transform: skewX(-20deg); }
.e0 .pips i { background: var(--eq0-clair); } .e1 .pips i { background: var(--eq1-clair); }
.pips i.tombe { background: rgba(255, 255, 255, .18); }
.score-eq { display: grid; place-items: center; min-width: 26px; height: 26px; align-self: center; font-size: 17px !important; font-weight: 900; font-style: italic; color: #fff !important; border-radius: 3px; }
.e0 .score-eq { background: linear-gradient(180deg, #4aa6ff, #1655c4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.e1 .score-eq { background: linear-gradient(180deg, #ff7a52, #c9301a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.chrono-boite { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px 9px 3px; background: linear-gradient(180deg, #0f2a57, #071630); border-bottom: 2px solid var(--bleu-clair); min-width: 70px; }
.chrono-boite .chrono { background: none; border: 0; padding: 0; min-width: 0; font-size: 18px; line-height: 1; font-weight: 900; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 10px rgba(70, 162, 255, .7); }
.chrono-boite .chrono.urgent { color: #ff6a5a; text-shadow: 0 0 10px rgba(255, 60, 60, .8); }
.chrono-boite small { font-size: 7.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu-clair); white-space: nowrap; margin-top: 2px; }
.chrono-boite.police small { color: #ff8a7a; }
.hud-haut .drapeau-hud canvas { width: 24px !important; height: 16px !important; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.carte { top: calc(46px + env(safe-area-inset-top)); }
.fil div { border-left-color: var(--eq0); }
.fil div.e1 { border-left-color: var(--eq1); }

/* ---------- Panneau des armes (haut à droite) ---------- */
.panneau-armes { position: absolute; top: calc(40px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); width: 162px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.panneau-armes button { pointer-events: auto; touch-action: none; }
.arme-active { display: flex; align-items: center; gap: 8px; padding: 5px 8px; color: #fff; text-align: left; background: linear-gradient(100deg, rgba(47, 140, 255, .85), rgba(16, 64, 160, .8)); border: 1px solid rgba(160, 210, 255, .7); border-radius: 3px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
.arme-active .ic { font-size: 22px; flex: none; }
.arme-active span { min-width: 0; display: flex; flex-direction: column; }
.arme-active b { font-size: 11.5px; font-weight: 900; font-style: italic; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arme-active small { font-size: 9px; font-weight: 700; color: #d6ebff; }
.arme-active.appuye { filter: brightness(1.25); }
.cases-armes { display: flex; gap: 3px; }
.case-arme { position: relative; flex: 1; height: 36px; display: grid; place-items: center; color: #fff; background: rgba(3, 10, 24, .62); border: 1px solid rgba(140, 185, 255, .3); border-radius: 3px; font-size: 18px; }
.case-arme.actif { background: rgba(47, 140, 255, .35); border-color: var(--bleu-clair); box-shadow: inset 0 -2px 0 var(--bleu-clair); }
.case-arme.appuye { transform: scale(.93); }
.case-arme sup { position: absolute; top: 1px; right: 3px; font-size: 8.5px; font-weight: 900; color: var(--bleu-clair); }
.case-arme.vide { opacity: .45; }
body.mode-portrait .panneau-armes { top: 52px; right: 5px; width: 104px; }
body.mode-portrait .arme-active { display: none; }
body.mode-portrait .case-arme { height: 28px; font-size: 15px; }
body.mode-portrait .case-arme sup { font-size: 7.5px; }
body.mode-pc .panneau-armes { width: 180px; }

/* =====================================================================
   Mode portrait : manette de poche bleue
   (écran en haut, joystick rond à gauche, A / B à droite, petits boutons autour)
   ===================================================================== */
body { --coque: #0b1a38; --coque2: #050d22; --coque-label: #d4e8ff; --coque-trait: rgba(70, 162, 255, .16); --bezel: #030915; --bezel-bord: rgba(70, 162, 255, .55); }
body.coque-gris { --coque: #dfe4ec; --coque2: #c4ccd8; --coque-label: #0f2a57; --coque-trait: rgba(20, 70, 160, .14); --bezel: #9aa6b6; --bezel-bord: rgba(255, 255, 255, .7); }
body.coque-noir { --coque: #191c22; --coque2: #0b0d10; --coque-label: #9fd0ff; --coque-trait: rgba(70, 162, 255, .1); --bezel: #040506; --bezel-bord: rgba(70, 162, 255, .35); }
body.coque-rouge { --coque: #c5161d; --coque2: #8f0f14; --coque-label: #fff; --coque-trait: rgba(255, 255, 255, .12); --bezel: #1b0b0c; --bezel-bord: rgba(255, 255, 255, .35); }
.coques [data-coque=bleu] { background: linear-gradient(135deg, #2f8cff, #0b1a38); }
.coques [data-coque=gris] { background: #dfe4ec; }

.console-titre { display: none; }
body.mode-portrait #ecran-jeu { background: var(--coque2); }
body.mode-portrait .console {
  padding: calc(4px + env(safe-area-inset-top)) 10px max(18px, calc(env(safe-area-inset-bottom) + 10px));
  background:
    linear-gradient(118deg, transparent 0 62%, var(--coque-trait) 62% 62.4%, transparent 62.4% 70%, var(--coque-trait) 70% 70.3%, transparent 70.3%),
    linear-gradient(62deg, transparent 0 18%, var(--coque-trait) 18% 18.3%, transparent 18.3% 24%, var(--coque-trait) 24% 24.2%, transparent 24.2%),
    radial-gradient(120% 60% at 50% 100%, rgba(47, 140, 255, .14), transparent 70%),
    linear-gradient(180deg, var(--coque), var(--coque2));
}
body.mode-portrait .console-titre { display: flex; justify-content: center; align-items: center; gap: 6px; height: 28px; flex: none; }
.console-titre span { font-family: "Arial Black", var(--titre); font-style: italic; font-weight: 900; font-size: 19px; letter-spacing: .06em; color: var(--coque-label); transform: skewX(-6deg); }
.console-titre em { font-style: normal; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: #fff; background: linear-gradient(180deg, #3d97ff, var(--bleu-fonce)); padding: 1px 6px; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
body.mode-portrait .console-ecran { flex: 0 0 auto; height: min(47vh, 92vw); background: var(--bezel); border-radius: 12px; padding: 6px; border: 1.5px solid var(--bezel-bord); box-shadow: 0 0 18px rgba(47, 140, 255, .25), inset 0 2px 6px rgba(0, 0, 0, .5); }
body.mode-portrait .console-ecran::before, body.mode-portrait .console-ecran::after { content: none; }
body.mode-portrait .vue { position: relative; inset: auto; width: 100%; height: 100%; border-radius: 7px; }
body.mode-portrait .console-bas {
  display: grid; flex: 1; min-height: 0; position: relative;
  grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "logo logo" "pad ab" "pil pil";
  padding: 4px 4px 0; color: var(--coque-label);
}
body.mode-portrait .tactile-paysage, body.mode-portrait .haut-droite, body.mode-portrait .carte { display: none; }

.logo-grave { grid-area: logo; justify-self: center; font-family: var(--titre); font-style: italic; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--coque-label); opacity: .55; border: 0; padding: 0 16px; background: none; -webkit-text-stroke: 0; }

/* Joystick rond (gauche) */
.pad-zone { grid-area: pad; position: relative; display: flex; align-items: center; justify-content: center; padding-bottom: 26px; }
.croix { position: relative; width: min(164px, 42vw, 25vh); aspect-ratio: 1; border-radius: 50%; touch-action: none;
  background: radial-gradient(circle at 50% 50%, rgba(5, 14, 32, .9) 0 46%, rgba(10, 32, 72, .95) 62%, rgba(4, 12, 28, .95) 100%);
  box-shadow: 0 0 0 3px rgba(47, 140, 255, .55), 0 0 0 6px rgba(4, 12, 28, .7), 0 0 22px rgba(47, 140, 255, .45), inset 0 4px 10px rgba(0, 0, 0, .6); }
.croix::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; }
.croix .fl { position: absolute; width: 13%; height: 13%; border: solid var(--bleu-clair); border-width: 0 0 3px 3px; border-radius: 2px; filter: drop-shadow(0 0 4px rgba(70, 162, 255, .9)); opacity: .9; }
.croix .fl-h { left: 43.5%; top: 9%; transform: rotate(135deg); }
.croix .fl-b { left: 43.5%; bottom: 9%; transform: rotate(-45deg); }
.croix .fl-g { top: 43.5%; left: 9%; transform: rotate(45deg); }
.croix .fl-d { top: 43.5%; right: 9%; transform: rotate(-135deg); }
.croix .centre-croix { position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; margin: -20% 0 0 -20%; border-radius: 50%; transition: transform .05s;
  background: radial-gradient(circle at 38% 30%, #bfe3ff 0, #4aa6ff 26%, #1859c9 66%, #0b347f 100%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .55), 0 0 0 3px rgba(190, 225, 255, .35), inset 0 -4px 6px rgba(0, 0, 0, .35); }

/* Boutons ronds bleus (petits et grands) */
.petit-rond, .gb {
  color: #fff; touch-action: none; position: absolute;
  background: radial-gradient(circle at 36% 28%, #9fd6ff 0, #3d97ff 30%, #1859c9 68%, #0b347f 100%);
  box-shadow: 0 0 0 2px rgba(4, 14, 34, .85), 0 0 0 4px rgba(120, 190, 255, .6), 0 5px 12px rgba(0, 0, 0, .5), 0 0 14px rgba(47, 140, 255, .35), inset 0 -4px 6px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(255, 255, 255, .45);
  transition: transform .06s, filter .06s;
}
.petit-rond { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; }
.gb { width: min(78px, 20vw, 11.5vh); aspect-ratio: 1; border-radius: 50%; }
.petit-rond.appuye, .gb.appuye { transform: scale(.92); filter: brightness(1.25); }
.petit-rond.bascule { background: radial-gradient(circle at 36% 28%, #e3f3ff 0, #7cc0ff 30%, #2f8cff 70%, #1859c9 100%); box-shadow: 0 0 0 2px rgba(4, 14, 34, .85), 0 0 0 4px #bfe3ff, 0 0 18px rgba(124, 192, 255, .9); }
.petit-rond small, .gb small { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) skewX(-8deg); margin-top: 8px; font-family: var(--label); font-size: 11px; font-weight: 900; letter-spacing: .04em; color: var(--coque-label); white-space: nowrap; text-shadow: none; }
.gb span { font-size: clamp(24px, 6.5vw, 32px); font-family: "Arial Black", var(--titre); font-weight: 900; font-style: italic; color: #fff; text-shadow: 0 2px 2px rgba(0, 0, 0, .4); }
.gb::after { content: none !important; }
.gb small { bottom: auto; }
.pad-zone .genou { left: 2px; bottom: 22px; width: 42px; height: 42px; font-size: 18px; }
.nb-pierres { bottom: auto; top: -7px; right: -7px; background: #ff3b4e; color: #fff; font-size: 10px; font-weight: 900; border-radius: 9px; padding: 1px 5px; box-shadow: 0 0 0 2px rgba(4, 14, 34, .85); }

.boutons-ab { grid-area: ab; position: relative; }
.mini-ligne { position: absolute; top: 4px; right: 4px; display: flex; gap: 18px; }
.mini-ligne .petit-rond { position: relative; }
.gb.b { left: 4%; top: 50%; }
.gb.a { right: 4%; top: 28%; width: min(88px, 23vw, 13vh); }

/* SELECT / START : touches en biseau, façon jeu de tir */
.pilules { grid-area: pil; display: flex; justify-content: center; gap: 26px; padding: 4px 0 0; }
.pilules button { display: flex; flex-direction: column; align-items: center; gap: 5px; touch-action: none; }
.pilules span { width: 70px; height: 16px; border-radius: 0; transform: none; background: linear-gradient(180deg, #4aa6ff, #1655c4); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); box-shadow: none; }
.pilules button.appuye span { filter: brightness(1.3); transform: translateY(1px); }
.pilules small { font-family: var(--label); font-size: 10.5px; font-weight: 900; letter-spacing: .04em; color: var(--coque-label); }
.haut-parleur { position: absolute; right: 6px; bottom: 2px; width: 58px; height: 44px; background: radial-gradient(circle, var(--coque-label) 1.6px, transparent 2px) 0 0/8px 8px; transform: rotate(-22deg); opacity: .25; pointer-events: none; }

/* HUD en portrait : écran plus petit, tout est plus serré */
body.mode-portrait .hud-haut { top: 4px; }
body.mode-portrait .hud-haut .equipe { padding: 2px 4px; gap: 4px; }
body.mode-portrait .hud-haut .barre-drapeau { width: 44px; height: 6px; }
body.mode-portrait .hud-haut .drapeau-hud canvas { width: 20px !important; height: 13px !important; }
body.mode-portrait .score-eq { min-width: 22px; height: 22px; font-size: 15px !important; }
body.mode-portrait .chrono-boite { min-width: 58px; padding: 1px 6px 2px; }
body.mode-portrait .chrono-boite .chrono { font-size: 16px; }
body.mode-portrait .chrono-boite small { font-size: 6.5px; }
body.mode-portrait .pips i { width: 4px; }
body.mode-portrait .ordres { top: 52px; left: 5px; flex-direction: row; gap: 3px; }
body.mode-portrait .ordres button { width: 34px; padding: 2px 0; font-size: 11px; }
body.mode-portrait .fil { top: 90px; left: 5px; font-size: 9.5px; }
body.mode-portrait .hud-bas { width: 60%; bottom: 6px; }
body.mode-portrait .vie { height: 9px; }
body.mode-portrait .arme-info { font-size: 11px; }
body.mode-portrait .message { font-size: 12px; top: 30%; }
body.mode-portrait .annonce { font-size: 38px; }

/* Petits téléphones en portrait */
@media (orientation: portrait) and (max-height: 680px) {
  body.mode-portrait .console-titre { height: 20px; }
  .console-titre span { font-size: 15px; }
  body.mode-portrait .console-ecran { height: min(44vh, 92vw); }
  .logo-grave { font-size: 11px; }
  .petit-rond { width: 40px; height: 40px; font-size: 17px; }
  .petit-rond small, .gb small { font-size: 9.5px; margin-top: 6px; }
  .pilules span { height: 13px; width: 60px; }
}

/* ---------- Lobby en portrait : JOUER plus haut (téléphones où l'affichage bord à bord est mal géré) ---------- */
@media (orientation: portrait) {
  .lobby-bas { padding-bottom: max(14px, calc(44px - env(safe-area-inset-bottom))); }
  .bas-fixe { padding-bottom: max(12px, calc(32px - env(safe-area-inset-bottom))); }
}

/* =====================================================================
   1.11 — Design général calme et uniforme (menus ; le HUD du combat n'est pas touché)
   - Une seule forme de bouton partout : rectangle aux coins arrondis (6 px).
   - Bouton le plus important : fond bleu. Bouton important : texte et icône bleus sur noir transparent (70 %).
     Bouton normal : texte blanc sur noir transparent (70 %). Jamais plus de 2 boutons bleus par écran :
     une sélection (carte, onglet, drapeau) est montrée en blanc, pas en bleu.
   - Texte toujours normal (ni gras, ni italique), 17 px au plus.
   ===================================================================== */
:root { --b-fond: rgba(0, 0, 0, .7); --b-bord: rgba(255, 255, 255, .14); --b-coin: 6px; --b-choisi: rgba(255, 255, 255, .85); --bleu-b: #2f8cff; }

/* Texte : normal partout sauf dans le HUD du combat */
body :not(.hud, .hud *, .gb span) { font-weight: 400 !important; font-style: normal !important; }
h1 { font-size: 16px; } h2 { font-size: 15px; } h3 { font-size: 11px; letter-spacing: .08em; }
.titre-ecran h1 { font-size: 15px; letter-spacing: .04em; }

/* Logo compact (17 px au plus) */
.logo { transform: none; font-family: var(--titre); line-height: 1.2; }
.logo-tout, .logo-kin { font-size: 17px; letter-spacing: .32em; text-shadow: none; filter: none; }
.logo-kin { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--bleu-clair); }
.logo small { font-size: 10px; letter-spacing: .42em; color: var(--texte2); }
.logo::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 10px; background: url(../icones/icone.svg) center/contain no-repeat; }

/* Forme unique des boutons */
.btn, .btn-jouer, .rond, .rond.petit, .retour, .menu-cote button, .puces button, .onglets button, .profil-mini, .gang-carte,
.carte-adv, .carte-arme, .carte-skin, .ligne-gang, .grille-drapeaux button, .interrupteur, #voile-pause .btn, .fin-actions .btn {
  border-radius: var(--b-coin); clip-path: none; box-shadow: none; text-shadow: none; animation: none;
}
/* normal : texte blanc, noir transparent 70 % */
.btn, .btn-verre, .rond, .rond.petit, .retour, .menu-cote button, .puces button, .profil-mini, .gang-carte, .jeton,
.carte-adv, .carte-arme, .carte-skin, .ligne-gang, .interrupteur, .grille-drapeaux button {
  background: var(--b-fond); border: 1px solid var(--b-bord); color: #fff;
}
.btn { font-size: 13px; letter-spacing: .03em; padding: 9px 14px; text-transform: none; }
.btn.large { font-size: 14px; padding: 11px 16px; }
.rond .ic, .retour .ic, .menu-cote .ic { color: #fff; }
/* important : texte et icône bleus, noir transparent 70 % */
.btn-important, .btn-important .ic { background: var(--b-fond); border: 1px solid rgba(70, 162, 255, .45); color: var(--bleu-clair); }
/* le plus important : fond bleu */
.btn-bleu, .btn-jaune, .btn-jouer { background: var(--bleu-b); border: 1px solid var(--bleu-b); color: #fff; }
.btn-bleu:not(:disabled):active, .btn-jouer:active { background: #1f74e0; transform: scale(.98); }
.btn:disabled { filter: none; opacity: .45; }
/* danger : texte rouge clair, même fond que les autres */
.btn-danger, .btn-rouge { background: var(--b-fond); border: 1px solid rgba(255, 110, 125, .35); color: #ff8a95; }
.btn:not(:disabled):hover, .rond:hover, .retour:hover, .menu-cote button:hover { filter: brightness(1.15); }

/* Lobby */
.btn-jouer { font-size: 17px; letter-spacing: .14em; padding: 11px 46px; }
.menu-cote button { flex-direction: row; justify-content: flex-start; gap: 8px; width: 136px; padding: 8px 10px; font-size: 13px; color: #fff; border-left: 1px solid var(--b-bord); text-transform: none; letter-spacing: 0; }
.menu-cote .ic { font-size: 15px; }
.profil-mini small { color: var(--texte2); }
.jeton { color: #fff; } .jeton .ic { color: var(--texte2); }
.gang-carte small { color: var(--texte2); }
.gang-carte b { text-transform: none; }
@media (orientation: portrait) and (max-width: 520px) {
  .menu-cote { gap: 6px; }
  .menu-cote button { width: auto; flex: 1; max-width: none; flex-direction: column; gap: 3px; padding: 7px 2px; font-size: 11px; }
  .btn-jouer { padding: 13px 20px; }
}

/* Sélections : en blanc (le bleu reste pour les boutons) */
.puces button.actif, .onglets button.actif { background: rgba(255, 255, 255, .14); border-color: var(--b-choisi); color: #fff; box-shadow: none; }
.onglets { background: var(--b-fond); border: 1px solid var(--b-bord); border-radius: calc(var(--b-coin) + 2px); }
.onglets button { color: var(--texte2); border-radius: var(--b-coin); }
.carte-adv.choisie, .carte-arme.choisie, .carte-skin.choisie { background: rgba(255, 255, 255, .1); border-color: var(--b-choisi); box-shadow: none; }
.carte-arme.choisie b, .carte-adv .force b { color: #fff; }
.carte-adv.choisie::after, .carte-arme.choisie::after { content: "✓"; position: absolute; top: 6px; right: 8px; font-size: 12px; color: #fff; }
.carte-arme { position: relative; }
.grille-drapeaux button.actif { border-color: var(--b-choisi); }
.ligne-classement.moi { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
.coques button.actif { border-color: #fff; }
.btn-ligne { width: auto; padding: 7px 12px; font-size: 12px; }
.ligne-gang .btn { padding: 6px 10px !important; font-size: 11px !important; }
.badge { text-transform: none; letter-spacing: 0; }

/* Écrans de fin, titres et chiffres : pas de gros textes */
.fin h1 { font-family: var(--titre); font-size: 17px; letter-spacing: .3em; }
.fin.victoire h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--bleu-clair); }
.fin-stats b, .stats b, .fin-points, .grade-grand, .tirage-terrain b { font-size: 15px; }
.stats b { color: #fff; }

/* Fond du menu d'accueil : image 16:9 qui remplit l'écran sans être étirée (recadrée au centre) */
#ecran-accueil, #ecran-lobby {
  background:
    linear-gradient(180deg, rgba(4, 10, 24, .35) 0%, rgba(4, 10, 24, .15) 40%, rgba(4, 10, 24, .7) 100%),
    var(--fond-accueil, url(../assets/fonds/accueil.jpg)) center / cover no-repeat,
    #07101f;
}
.scene-lobby .soleil, .scene-lobby .immeubles { display: none; }

/* Proposer le paysage avant le combat */
.paysage-carte { text-align: center; align-items: stretch; }
.paysage-carte .petit { margin: 0 0 4px; }
.ligne-case { flex-direction: row; justify-content: center; align-items: center; gap: 6px; margin: 2px 0 0; color: var(--texte2); }
.ligne-case input { width: 15px; height: 15px; accent-color: var(--bleu-b); }
.tel-tourne { width: 74px; height: 74px; margin: 2px auto 4px; display: grid; place-items: center; }
.tel-tourne i { width: 30px; height: 52px; border: 2px solid #fff; border-radius: 6px; position: relative; animation: tourne-tel 2.4s ease-in-out infinite; }
.tel-tourne i::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 2px; margin-left: -3px; background: #fff; border-radius: 1px; }
@keyframes tourne-tel { 0%, 25% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .tel-tourne i { animation: none; transform: rotate(-90deg); } }

/* Manette portrait : mêmes règles de texte (normal, 17 px au plus) */
.console-titre span { font-family: var(--titre); font-size: 15px; letter-spacing: .3em; transform: none; }
.console-titre em { font-size: 9px; }
.petit-rond small, .gb small, .pilules small { font-family: var(--titre); font-size: 10.5px; letter-spacing: .06em; transform: translateX(-50%); }
.pilules small { transform: none; }
.logo-grave { font-size: 12px; }

/* ---------- 1.12 : choix du terrain (3 terrains, jour ou nuit) ---------- */
.onglets.moment { margin: 0 auto 10px; max-width: 260px; }
.cartes-terrain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.carte-terrain { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 6px 6px 9px; text-align: left; color: #fff;
  background: var(--b-fond); border: 1px solid var(--b-bord); border-radius: var(--b-coin); }
.carte-terrain .vignette { display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #0d1a30; margin-bottom: 4px; }
.carte-terrain img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-terrain b { font-size: 13px; padding: 0 3px; }
.carte-terrain small { font-size: 10.5px; color: var(--texte2); line-height: 1.35; padding: 0 3px; }
.carte-terrain.choisie { background: rgba(255, 255, 255, .1); border-color: var(--b-choisi); }
.carte-terrain.choisie::after { content: "✓"; position: absolute; top: 10px; right: 12px; width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; color: #fff; background: rgba(0, 0, 0, .7); border-radius: 4px; }
@media (orientation: portrait) {
  .cartes-terrain { grid-template-columns: 1fr; }
  .carte-terrain { display: grid; grid-template-columns: 42% 1fr; grid-template-rows: auto 1fr; column-gap: 8px; padding: 6px; }
  .carte-terrain .vignette { grid-row: 1 / 3; margin: 0; }
  .carte-terrain b { align-self: end; }
}
@media (orientation: landscape) and (max-height: 400px) {
  .carte-terrain small { display: none; }
  .onglets.moment { margin-bottom: 6px; }
}
.tirage-terrain.de-nuit img { filter: none; }

/* ---------- 1.12 : bande de résultat (victoire bleue, défaite grise) avec le score du match ---------- */
.bande-resultat {
  --br-fond: rgba(47, 140, 255, .58); --br-trait: rgba(160, 210, 255, .9);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 16px 12px; color: #fff; text-align: center;
  background: linear-gradient(90deg, transparent 0, var(--br-fond) 14%, var(--br-fond) 86%, transparent 100%);
  border-top: 1px solid var(--br-trait); border-bottom: 1px solid var(--br-trait);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.bande-resultat.defaite { --br-fond: rgba(90, 92, 98, .66); --br-trait: rgba(210, 214, 220, .55); }
.bande-resultat.egalite { --br-fond: rgba(70, 82, 104, .62); --br-trait: rgba(200, 212, 230, .55); }
.br-titre { font-size: 17px; font-weight: 400; letter-spacing: .5em; text-transform: uppercase; padding-left: .5em; }
.br-score { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; }
.br-eq { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 0; }
.br-e0 { justify-content: flex-end; } .br-e1 { justify-content: flex-start; }
.br-nom { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; opacity: .92; }
.br-d canvas { width: 27px !important; height: 18px !important; border-radius: 2px; display: block; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); }
.br-chiffres { display: flex; align-items: center; gap: 8px; flex: none; font-size: 17px; font-variant-numeric: tabular-nums; }
.br-chiffres b, .br-chiffres i { font-weight: 400; font-style: normal; }
.br-chiffres b { min-width: 26px; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .35); }
.br-legende { font-size: 10px; opacity: .8; letter-spacing: .04em; }
/* en jeu : au milieu de l'écran, elle s'ouvre comme un rideau */
.hud .bande-resultat { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 4; }
.hud .bande-resultat .br-titre, .hud .bande-resultat b, .hud .bande-resultat i { font-weight: 400 !important; font-style: normal !important; }
.hud .bande-resultat.montre { animation: bande-ouvre .45s ease-out both; }
@keyframes bande-ouvre { from { opacity: 0; transform: translateY(-50%) scaleY(0); } to { opacity: 1; transform: translateY(-50%) scaleY(1); } }
body.mode-portrait .hud .bande-resultat { padding: 9px 8px 8px; gap: 4px; }
body.mode-portrait .br-nom { display: none; }

/* écran de fin : la bande traverse l'écran au milieu, la dernière image du combat en fond */
#ecran-fin { background:
  linear-gradient(180deg, rgba(4, 10, 24, .55), rgba(4, 10, 24, .82)),
  var(--fond-fin, none) center / cover no-repeat, #07101f; }
#ecran-fin .fin { width: 100%; max-width: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; margin: auto 0; }
#ecran-fin .fin > :not(.bande-resultat) { width: min(640px, 92vw); }
#ecran-fin .bande-resultat { width: 100%; padding: 18px 16px 14px; }
#ecran-fin #fin-raison { text-align: center; margin: 4px auto 0; }
#ecran-fin .fin-stats { margin: 4px auto; }
#ecran-fin .fin-points, #ecran-fin .fin-actions { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- 1.16 : choix du mode (baston de gangs, duel, entraînement) ---------- */
.cartes-mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 980px; margin: 6px auto 0; }
.carte-mode { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 14px 12px; text-align: left; color: #fff;
  background: var(--b-fond); border: 1px solid var(--b-bord); border-radius: var(--b-coin); }
.carte-mode .ic { font-size: 22px; color: #fff; margin-bottom: 2px; }
.carte-mode b { font-size: 15px; }
.carte-mode small { font-size: 11px; color: var(--texte2); line-height: 1.45; flex: 1; }
.carte-mode em { font-style: normal; font-size: 10.5px; color: var(--texte2); border-top: 1px solid var(--b-bord); padding-top: 6px; width: 100%; }
.carte-mode.choisie { background: rgba(255, 255, 255, .1); border-color: var(--b-choisi); }
.carte-mode:active { transform: scale(.98); }
@media (orientation: portrait) { .cartes-mode { grid-template-columns: 1fr; } }
.hud.duel .barre-drapeau { display: none; }
.hud.duel .pips { height: 6px; gap: 4px; }
.hud.duel .pips i { width: 14px; height: 6px; }

/* ===== Bulles au-dessus des têtes (1.17) ===== */
.bulles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; contain: strict; }
.bulle {
  --equipe: #46a2ff;
  position: absolute; left: 0; top: 0; max-width: 46vw;
  padding: 4px 9px 5px; border-radius: 9px;
  background: rgba(255, 255, 255, .94); color: #111;
  border: 2px solid var(--equipe);
  font: 500 13px/1.15 var(--corps); white-space: nowrap; letter-spacing: .1px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transform-origin: 50% 100%; will-change: transform, opacity;
  animation: bulle-entre .18s ease-out;
}
.bulle::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -6px;
  border: 6px solid transparent; border-bottom: 0; border-top-color: var(--equipe);
}
.bulle.moi { background: #fff7c2; font-size: 14px; }
.bulle.sort { opacity: 0; transition: opacity .3s; }
@keyframes bulle-entre { from { opacity: 0; } to { opacity: 1; } }
@media (max-height: 420px) { .bulle { font-size: 11.5px; padding: 3px 7px 4px; } .bulle.moi { font-size: 12.5px; } }

/* ===== Application : mise à jour prête, installation (1.17) ===== */
.ic-telecharger { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.2l3.3-3.3 1.4 1.4L12 16 6.3 10.3l1.4-1.4 3.3 3.3zM4 18h16v3H4z'/%3E%3C/svg%3E"); }
.ic-maj { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 017.7 6h-2.1A6 6 0 106 13H9l-4 4-4-4h3a8 8 0 018-9zm8 7l4 4h-3a8 8 0 01-15.7 2h2.1A6 6 0 0018 15h-3z'/%3E%3C/svg%3E"); }
.bandeau-app {
  position: absolute; left: 50%; top: calc(54px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px);
  padding: 6px 6px 6px 12px; border-radius: var(--coin, 7px);
  background: rgba(7, 16, 31, .9); border: 1px solid rgba(70, 162, 255, .5);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); font-size: 13px; animation: bulle-entre .25s ease-out;
}
.bandeau-app[hidden] { display: none; }
.bandeau-app > .ic { color: var(--bleu-clair); flex: none; }
.bandeau-app span { flex: 1 1 auto; min-width: 0; }
.bandeau-app .btn { width: auto; flex: none; padding: 6px 12px; white-space: nowrap; }
@media (max-width: 520px) {
  .bandeau-app { flex-wrap: wrap; justify-content: flex-end; }
  .bandeau-app span { flex-basis: calc(100% - 40px); }
}
.etapes-ios { margin: 4px 0 6px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.35; }
.ic-partage { width: 20px; height: 20px; vertical-align: -4px; color: var(--bleu-clair); }

/* 1.19 : entraînement conseillé au premier lancement ; historique des combats (Profil) */
.carte-mode .conseille { position: absolute; top: 10px; right: 10px; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  background: #f2c230; color: #1a1400; padding: 3px 7px; border-radius: 10px; }
.historique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.historique li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.historique .h-issue { font-weight: 800; min-width: 22px; text-align: center; border-radius: 6px; padding: 2px 5px; }
.historique .victoire .h-issue { background: #2e7d32; }
.historique .defaite .h-issue { background: #7a2b2b; }
.historique .egalite .h-issue { background: #555c66; }
.historique .h-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historique small { color: var(--texte2); white-space: nowrap; }


/* 1.22 : chiffres des dégâts du joueur ; vie basse */
.degat { position: absolute; left: 0; top: 0; pointer-events: none; font: 800 17px/1 var(--titre, var(--corps)); color: #fff;
  text-shadow: 0 1px 0 #000, 0 0 4px rgba(0, 0, 0, .8); will-change: transform, opacity; }
.degat.tete { color: #ffd23f; font-size: 20px; }
#hud.pv-bas .flash-touche:not(.montre) { animation: pv-bas 1.1s ease-in-out infinite; }
@keyframes pv-bas { 0%, 100% { opacity: .12; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { #hud.pv-bas .flash-touche:not(.montre) { animation: none; opacity: .3; } }

/* 1.23 : pendant la pub de fin de combat, les boutons attendent */
.fin-actions.attente-pub .btn { pointer-events: none; opacity: .55; }