/* =================== THEMES =================== */

/* --- BACKGROUND THEMES --- */
.theme-home {
    --home-bg-center: #21212c;
    --home-bg-edge: #0c0b10;
    background: radial-gradient(
        circle,
        var(--home-bg-center) 30%,
        var(--home-bg-edge) 100%
    );
    background-color: var(--home-bg-edge);
}

.theme-normal {
    --accent: #66ea49;
    --accent-weak: rgba(102,234,73,.35);
    --bg-center: #1a331e;
    --bg-edge: #111016;
    --bg-card: #131a13;
}

.theme-group {
    --accent: #4872eb;
    --accent-weak: rgba(72, 168, 235, 0.5);
    --bg-center: #0f2b3f;
    --bg-edge: #111016;
    --bg-card: #13141a;
}

.theme-virus {
    --accent: #ee4a59;
    --accent-weak: rgba(238, 74, 89, 0.5);
    --bg-center: #3d2224;
    --bg-edge: #111016;
    --bg-card: #1b1213;
}

.theme-penalty {
    --accent: #ebe947;
    --accent-weak: rgba(235, 233, 71, 0.5);
    --bg-center: #4d4c26;
    --bg-edge: #111016;
    --bg-card: #1a1813;
}

.theme-premium {
    --accent: #ebe947;
    --accent-weak: rgba(235, 233, 71, 0.5);
    --bg-center: #25232e;
    --bg-edge: #111016;
    --bg-card: #1a1813;
}

@supports (padding: env(safe-area-inset-top)) {
    @media (display-mode: standalone) {
        body {
            overflow: hidden;
            overscroll-behavior: none;
        }
    }
}

/* Base body styles */
body {
    background: radial-gradient(circle, var(--bg-center) 40%, var(--bg-edge) 100%);
    background-color: #08080a;
    color: #ffffff;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    overflow-x: hidden;
    font-size: 18px;
    width: 100%;
    max-width: 100%;
    scrollbar-gutter: stable both-edges;
}

/* Tes conteneurs qui doivent scroller (ex: la liste des modes) */
.overflow-auto, [data-scrollable], .js-scrollable {
    overscroll-behavior: contain;        /* empêche la chaîne de remonter au viewport */
    -webkit-overflow-scrolling: touch;   /* inertie iOS */
    touch-action: pan-y;                 /* évite les scrolls horizontaux parasites */
}

/* Scrollbar */
/* Masquer toutes les barres de défilement (mais conserver le scroll) */
html, body {
    height: 100%;
    /* Firefox */
    scrollbar-width: none;
    /* IE 10-11 / Edge Legacy */
    -ms-overflow-style: none;
}

/* WebKit (Chrome, Edge Chromium, Safari, Opera) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;       /* principal */
    width: 0;            /* ceinture & bretelles */
    height: 0;
    background: transparent;
}

/* Option : pour n'importe quel conteneur scrollable */
.hide-scrollbar {
    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* IE/Edge Legacy */
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

/* iOS : inertie fluide sur les conteneurs qui scrolent (facultatif) */
.ios-smooth { -webkit-overflow-scrolling: touch; }


/* (optionnel) iOS: inertie fluide */
body {
    --webkit-overflow-scrolling: touch;
}


/* Verrou global pendant le swipe (X + Y) */
.is-swiping {
    overflow: hidden;           /* bloque X et Y */
    overscroll-behavior: none;  /* pas de "bounce" */
}

@supports (overflow: clip) {
    .is-swiping {
        overflow: clip;           /* clip propre au viewport si dispo */
    }
}

/* Pendant le drag, on désactive les gestures scroll du doigt sur la carte */
.card-draggable.dragging {
    touch-action: none;         /* empêche pan-x/y natif pendant le drag */
}

/* Attempting to fix iOS opacity random bug... */
/* 1) Pulse de repaint: neutralise toute atténuation pendant 120ms */
html.ios-dim-fix body,
html.ios-dim-fix .game-wrapper,
html.ios-dim-fix .container-fluid {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateZ(0.001px); /* micro-nudge CSS-only */
}

/* 2) iOS: coupe les backdrops (source #1 du dim fantôme) et background fixed */
@supports (-webkit-touch-callout: none) {
    /* Couper tous les backdrops "glass" sur iOS */
    [data-ref="timerWrap"] .badge,
    [data-ref="timerWrap"] .progress,
    .virus-overlay,
    .premium-card-inner,
    .game-overlay,
    .overlay-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Évite les backgrounds en "fixed" (problèmes de compositing iOS 18.x) */
    .premium-screen {
        background-attachment: scroll !important;
    }
}

/* DEV ONLY: à retirer si tout va bien */
@supports (-webkit-touch-callout: none) {
    body, .container-fluid, .game-wrapper, * {
        filter: none !important;
        -webkit-filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}










:root{
    --bg-deep:#0b0a0f;
    --bg-soft:#15141b;
    --panel:#181821;
    --panel-2:#1e1e2a;
    --text:#ffffff;
    --muted:#c9c9cf;
    --accent:#e74444;     /* rouge principal */
    --accent-d:#cc3232;   /* ombre rouge */
    --accent-l:#ff6b6b;   /* survol */
    --chip:#23222c;
}

.page-teams{
    color:var(--text);
}

.btn-ghost{
    background:transparent;
    border:0;
    color:var(--muted);
    font-weight:600;
    padding:.6rem 1rem;
    border-radius:999px;
}

.subtitle{
    font-weight:700;
    opacity:.85;
}

.page-title{
    text-align:center;
    font-weight:500;
    letter-spacing:.2px;
    margin:0;
}

.teams-grid .team-card{
    border:0;
    border-radius:20px;
    background: #00000000;
}

.team-head {
    gap: 12px;
    background: #1b1213;
    padding: 10px;
    border-radius: 25px;
    padding-left: 20px;
}

.team-name{
    margin:0;
    font-weight:800;
    outline:none;
    font-size: 13px;
    color: #ffffff;
}
.team-name[contenteditable="true"]:focus{
    /*box-shadow: inset 0 -2px 0 var(--accent);*/
}

.chip-counter{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:28px;
    padding:0 .6rem;
    border-radius:999px;
    background:#2a2934;
    color:#d7d7df;
    font-weight:700;
    font-size:.9rem;
}

.team-member {
    background: #ec4849;
    color: #fff;
    border: 0;
    padding: 12px 14px;
    border-radius: 16px;
    margin-bottom: 10px;
    /* font-weight: 700; */
    letter-spacing: .2px;
    box-shadow: 0 8px 18px rgb(0 0 0 / 25%), inset 0 -2px 0 rgba(0, 0, 0, .15);
}

.btn-add{
    width: 72px;
    height: 48px;
    border-radius: 25px;
    border: 0;
    background: #0f0f14;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
}

.btn-toggle{
    border:0;
    background:#0f0f14;
    color:#fff;
    padding:14px 22px;
    border-radius:18px;
    font-weight:800;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 12px 30px rgba(231, 68, 68, .18);
}
.btn-toggle:active{ transform: translateY(1px); }

.btn-play{
    display:block;
    width:min(900px, 100%);
    height:68px;
    border-radius:20px;
    border:0;
    background:var(--accent);
    color:#000;
    font-weight:900;
    font-size:1.4rem;
    letter-spacing:.2px;
    box-shadow: 0 16px 36px rgba(231, 68, 68, .35), inset 0 -2px 0 var(--accent-d);
}
.btn-play:disabled{
    filter:grayscale(.4) brightness(.8);
    opacity:.7;
}

/* édition inline: visibilité du caret + feedback focus */
.team-member{
    user-select: text;
    cursor: text;
    line-height: 1.15;
}
.team-member[contenteditable="true"]:focus{
    outline: 2px solid rgba(255,255,255,.22);
    box-shadow: 0 8px 18px rgba(231, 68, 68, .28), inset 0 -2px 0 rgba(0,0,0,.15);
}
.team-name[contenteditable="true"]{
    cursor: text;
}



/* pour que l’ellipsis/scroll fonctionne en flex */
.team-head { min-width: 0; }
.team-head .team-name { flex: 1 1 auto; min-width: 0; }

/* Affichage (pas focus) : une ligne + ellipsis */
.team-name[contenteditable="true"]:not(:focus),
.team-member[contenteditable="true"]:not(:focus) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Édition (focus) : une ligne + scroll horizontal */
.team-name[contenteditable="true"]:focus,
.team-member[contenteditable="true"]:focus {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: clip;
    -webkit-overflow-scrolling: touch; /* iOS */
    /* option: cacher la barre de scroll visuelle mais garder le scroll */
    scrollbar-width: thin;            /* Firefox */
}

/* En édition: une ligne + scroll horizontal, mais SANS barre visible */
.team-name[contenteditable="true"]:focus,
.team-member[contenteditable="true"]:focus {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: clip;
    -webkit-overflow-scrolling: touch;

    /* cacher la barre (Firefox + IE/Edge legacy) */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge (pre-Chromium) */
}

/* cacher la barre (Chromium/WebKit: Chrome, Edge, Safari, iOS) */
.team-name[contenteditable="true"]:focus::-webkit-scrollbar,
.team-member[contenteditable="true"]:focus::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* === LISTES D'ÉQUIPE: WRAP SUR PLUSIEURS LIGNES === */
[data-ref="teamAList"],
[data-ref="teamBList"],
.team-list {
    display: flex;
    flex-wrap: wrap;       /* ⬅️ retour à la ligne auto */
    gap: 10px;             /* espace entre pills (X et Y) */
    justify-content: flex-start;  /* au lieu de center */
    align-content: flex-start;    /* évite un centrage vertical quand ça wrap */
    text-align: left;
    padding: 6px 0;
    min-height: 56px;
    width: 100%;           /* prend toute la largeur dispo */
}

/* Les pills s’adaptent et passent à la ligne quand il n’y a plus de place */
.team-member {
    margin: 0;             /* on utilise gap */
    flex: 1 1 200px;       /* base 200px, peut s’étirer/rétrécir */
    min-width: 95px;
    max-width: 95px;
    text-align: left;
}

/* Le container qui entoure la zone équipes + footer */
.page-teams .flex-grow-1{
    display:flex;
    flex-direction:column;
    align-items:stretch !important; /* au lieu de center → occupe 100% de la largeur */
    justify-content:flex-start;
    min-height:0;                   /* ⬅️ clé: autorise l'enfant à scroller */
    width:100%;
}

/* Le container qui entoure la zone scrollable + footer */
.page-teams .teams-layout{
    display:flex;
    flex-direction:column;
    align-items:stretch;   /* pas center → pleine largeur */
    min-height:0;          /* clé pour autoriser le scroll du child */
}

/* La zone scrollable prend tout l'espace restant */
.page-teams .teams-scroll{
    flex:1 1 auto;
    min-height:0;                 /* Safari/iOS */
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;           /* souffle au-dessus du footer */
}

/* Option: neutraliser les marges négatives de .row dans le pane */
.page-teams .teams-scroll > .row{
    margin-left:0;
    margin-right:0;
}

/* Le footer ne rétrécit pas */
.page-teams .actions{
    flex-shrink:0;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
}

/* Assure un vrai viewport plein écran sur mobile */
.page-teams.container-fluid{
    min-height:100dvh;            /* remplace 100vh sur mobiles modernes */
}
@supports not (height: 100dvh){
    .page-teams.container-fluid{ min-height:100vh; }
}

/* Les pills n'ajoutent pas de marges parasites */
.team-member {
    margin: 0;
}
/* When changing a player name on the team page, avoid showing a border around the text */
:focus-visible {
    outline: -webkit-focus-ring-color auto 0px !important;
}

/* largeur fixe des pills (variable pratique) */
:root { --pill-w: 125px; }

/* les pills gardent une largeur fixe, même en focus */
.team-member {
    box-sizing: border-box;
    flex: 0 0 var(--pill-w);
    width: var(--pill-w);
    min-width: var(--pill-w);
    max-width: var(--pill-w);
}

/* ⚠️ ne pas élargir les .team-member en focus */
.team-member[contenteditable="true"]:focus {
    /* on enlève le max-width:100% qui venait du groupe générique */
    max-width: var(--pill-w);
    width: var(--pill-w);
    min-width: var(--pill-w);
    /* on garde le scroll horizontal interne pour l'édition longue */
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: clip;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge Legacy */
}
.team-member[contenteditable="true"]:focus::-webkit-scrollbar { width:0; height:0; }

/* le header d'équipe peut, lui, s'étirer (ok pour team-name) */
.team-name[contenteditable="true"]:focus {
    max-width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.team-name[contenteditable="true"]:focus::-webkit-scrollbar { width:0; height:0; }


/* Largeur fixe/responsive du nom d’équipe */
:root {
    /* adapte si tu veux : mini 120px, ~40% viewport, maxi 220px */
    --teamname-w: clamp(100px, 32vw, 120px);
}

/* Le nom d’équipe ne “pousse” pas le layout */
.team-head .team-name {
    box-sizing: border-box;
    flex: 0 0 var(--teamname-w);   /* ⬅️ plus de flex-grow */
    width: var(--teamname-w);
    min-width: var(--teamname-w);
    max-width: var(--teamname-w);
}

/* Affichage: ellipsis (inchangé) */
.team-name[contenteditable="true"]:not(:focus) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Édition: une seule ligne + scroll interne + barre cachée */
.team-name[contenteditable="true"]:focus {
    width: var(--teamname-w);
    min-width: var(--teamname-w);
    max-width: var(--teamname-w);
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: clip;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge legacy */
}
.team-name[contenteditable="true"]:focus::-webkit-scrollbar {
    width: 0; height: 0;          /* WebKit */
}

/* Petit rappel utile pour le header en flex */
.team-head { min-width: 0; }

/* feedback drop */
.team-list.drop-over,
[data-ref="teamAList"].drop-over,
[data-ref="teamBList"].drop-over {
    outline: 2px dashed rgba(231, 68, 68, .6);
    border-radius: 14px;
}


/* Mise en page de la pill: handle + texte */
.team-member {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
}

/* Handle drag */
.drag-handle {
    width: 16px; height: 16px;
    flex: 0 0 16px;
    opacity: .9;
    cursor: grab;
    user-select: none;
    pointer-events: auto; /* reçoit bien le drag */
    -webkit-user-drag: none;
    /* si ton png est sombre, tu peux éclaircir : */
    /* filter: invert(1) brightness(1.2); */
}
.team-member.dragging {
    opacity: .85;
    z-index: 999;
    cursor: grabbing;
    will-change: transform;
    position: relative; /* pour z-index */
}

/* feedback drop (si pas déjà présent) */
[data-ref="teamAList"].drop-over,
[data-ref="teamBList"].drop-over { outline:2px dashed rgba(231,68,68,.6); border-radius:14px; }

/* Zone éditable: n'élargit jamais la pill, ellipsis / scroll interne */
.team-member-text {
    flex: 1 1 auto;
    min-width: 0;                 /* clé pour ellipsis/scroll en flex */
    color: #fff;
}

/* affichage: ellipsis */
.team-member-text:not(:focus) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* édition: scroll horizontal interne (barre cachée) */
.team-member-text:focus {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: clip;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.team-member-text:focus::-webkit-scrollbar { width: 0; height: 0; }

/* hitbox correcte + centrage icône */
.recycle-drop {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    position: relative;
    pointer-events: auto;       /* s'assure que ça capte bien */
    touch-action: none;         /* évite pan-y de prendre le dessus en drag */
}

.recycle-drop.recycle-over{
    outline: 2px dashed rgba(231, 68, 68, .7);
    box-shadow: 0 0 0 6px rgba(231, 68, 68, .18);
    transform: scale(1.05);
}

.team-member.dragging {
    z-index: 50;                /* passe au-dessus visuellement */
    pointer-events: none;       /* n'intercepte pas */
}

.recycle-drop {
    position: relative;
    z-index: 5;
    pointer-events: auto;
    touch-action: none;  /* ne pas "pan" pendant le drag */
}
.recycle-drop svg,
.recycle-drop img { pointer-events: none; } /* laisse le bouton capter l'event */

.recycle-drop.recycle-over{
    outline: 2px dashed rgba(231, 68, 68, .7);
    box-shadow: 0 0 0 6px rgba(231, 68, 68, .18);
    transform: scale(1.05);
}

/* le draggable passe devant visuellement */
.team-member.dragging { z-index: 50; }

span.badge.bg-light.text-dark.team-counter {
    position: absolute;
    bottom: 0px;
    right: 10px;
    border-radius: 25px 0px 0px 5px;
}

/*
.card-text{
    overflow-y: scroll;
    height: 200px;
}*/