/* ==========================================================================
   Application de jeu
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body.game {
    position: fixed;
    inset: 0;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
input, textarea { user-select: text; -webkit-user-select: text; }
#stage { position: absolute; inset: 0; }
.btn-block { width: 100%; }

/* ==========================================================================
   ÉCRAN DE CHARGEMENT (invité)
   ========================================================================== */
.ls {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr minmax(360px, 440px);
    grid-template-rows: auto 1fr auto;
    gap: 0 clamp(20px, calc(4 * var(--u-vw)), 64px);
    padding: clamp(16px, calc(3 * var(--u-vw)), 36px);
    background:
        linear-gradient(115deg, transparent 55%, rgba(255, 46, 136, .18) 55.2%, transparent 72%),
        radial-gradient(ellipse 80% 70% at 20% 60%, #2a0f3d 0%, var(--ink) 70%);
    overflow: hidden;
}
.ls-collage {
    grid-row: 1 / 4;
    grid-column: 1;
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    margin: 40px 0 70px;
    transform: rotate(-2deg);
}
.ls-panel {
    --tone: var(--pink);
    position: relative;
    overflow: hidden;
    background:
        repeating-linear-gradient(135deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 9px),
        linear-gradient(160deg, color-mix(in srgb, var(--tone) 80%, #fff) 0%, var(--tone) 55%, color-mix(in srgb, var(--tone) 50%, #000) 100%);
    box-shadow: inset 0 0 0 5px #000, 12px 12px 0 rgba(0, 0, 0, .5);
}
.ls-panel--a { grid-row: 1 / 3; --tone: var(--pink); }
.ls-panel--b { --tone: var(--violet); }
.ls-panel--c { --tone: var(--orange); }
.ls-panel img {
    position: absolute;
    inset: 6% 4% 0;
    width: 92%;
    height: 94%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, .3));
    animation: kenburns 18s ease-in-out infinite alternate;
}
.ls-panel--b img { animation-delay: -6s; }
.ls-panel--c img { animation-delay: -12s; }
@keyframes kenburns { from { transform: scale(1) translateY(0); } to { transform: scale(1.1) translateY(-3%); } }

.ls-logo { grid-column: 1; grid-row: 1; z-index: 2; justify-self: start; position: relative; }
.ls-logo { text-decoration: none; }

.ls-auth {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    display: grid;
    gap: 14px;
    position: relative;
    z-index: 3;
}
.ls-langs { display: flex; gap: 4px; justify-content: flex-end; }
.ls-langs button, .phone-langs button {
    border: 0;
    padding: 6px 9px 4px;
    background: rgba(0, 0, 0, .55);
    color: var(--muted);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
}
.ls-langs button:hover { color: var(--paper); }
.ls-langs button[aria-current], .phone-langs button[aria-current] { background: var(--paper); color: var(--ink); }

.ls-tip {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 760px;
    padding: 12px 18px;
    background: rgba(0, 0, 0, .78);
    box-shadow: inset 4px 0 0 var(--pink);
    font-size: 1.02rem;
}
.ls-tip b { flex: none; color: var(--pink); font-weight: 900; font-style: italic; text-transform: uppercase; }
.ls-tip span { flex: 1; transition: opacity .4s; }
.ls-spinner {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .2);
    border-top-color: var(--paper);
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Carte d'auth : menu pause ---- */
.auth-card {
    background: rgba(10, 6, 16, .88);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0, 0, 0, .6);
    padding: 0 0 22px;
}
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; }
.auth-tabs button {
    border: 0;
    padding: 14px 10px 11px;
    background: rgba(255, 255, 255, .06);
    color: var(--muted);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.auth-tabs button:hover { color: var(--paper); background: rgba(255, 255, 255, .12); }
.auth-tabs .is-active { background: var(--paper); color: var(--ink); cursor: default; }
.auth-title { font-size: clamp(2.4rem, calc(4 * var(--u-vw)), 3.2rem); margin: 26px 26px 8px; }
.auth-lead { margin: 0 26px 20px; color: var(--muted); }
.auth-card .form { padding: 0 26px; }
.auth-secure, .auth-row { margin: 18px 26px 0; font-size: .85rem; color: var(--dim); }
.auth-secure { display: flex; align-items: center; gap: 8px; }
.auth-secure .ico { color: var(--cash); font-size: 1rem; }
.auth-row { display: flex; justify-content: space-between; gap: 16px; }
.auth-row--forgot { justify-content: center; margin-top: 12px; }

/* ---- Formulaires ---- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > span:first-child { font-size: .8rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.field input, .field-pass input {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px 10px;
    border: 0;
    border-bottom: 3px solid var(--line);
    background: rgba(255, 255, 255, .06);
    font-size: 1.1rem;
    outline: 0;
    transition: border-color .2s, background .2s;
}
.field input:focus { border-bottom-color: var(--pink); background: rgba(255, 255, 255, .1); }
.field input[aria-invalid="true"] { border-bottom-color: var(--danger); }
.field small { color: var(--dim); font-size: .82rem; }
.field-pass { position: relative; display: block; }
.field-pass input { padding-right: 50px; }
.field-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    translate: 0 -50%;
    width: 38px;
    height: 38px;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: .6;
}
.field-eye::before {
    content: '';
    position: absolute;
    inset: 9px 6px;
    border: 2px solid var(--paper);
    border-radius: 50% / 60%;
}
.field-eye::after {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: var(--paper);
}
.field-eye[aria-pressed="true"] { opacity: 1; }
.field-eye:hover { opacity: 1; }

.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.strength i { height: 4px; background: var(--line); transition: background .3s; }
.strength[data-score="1"] i:nth-child(-n+1) { background: var(--danger); }
.strength[data-score="2"] i:nth-child(-n+2) { background: var(--orange); }
.strength[data-score="3"] i:nth-child(-n+3) { background: var(--sun); }
.strength[data-score="4"] i { background: var(--cash); }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--muted); cursor: pointer; }
.check input {
    appearance: none;
    flex: none;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    border: 2px solid var(--muted);
    display: grid;
    place-items: center;
    cursor: pointer;
}
.check input:checked { background: var(--pink); border-color: var(--pink); }
/* Coche dessinée en CSS (pas de glyphe unicode). */
.check input:checked::after { content: ''; width: 6px; height: 11px; margin-top: -3px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-error {
    margin: 0;
    padding: 10px 14px;
    background: rgba(255, 65, 65, .14);
    box-shadow: inset 4px 0 0 var(--danger);
    color: #ffd0d0;
    font-size: .95rem;
}

/* minmax(0, 1fr) + min-width 0 : un champ a une largeur minimale implicite (~20 caractères) ; avec
   « 1fr » seul, les 6 cases élargissaient la carte au-delà d'un petit écran (dernières cases coupées). */
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.otp input {
    width: 100%;
    min-width: 0;
    aspect-ratio: 4 / 5;
    border: 0;
    border-bottom: 3px solid var(--line);
    background: rgba(255, 255, 255, .06);
    padding: 0;
    text-align: center;
    /* Taille ajustée à la case : en italique gras 2rem (tout le jeu est en italique), la pente du
       chiffre dépassait à droite et Firefox rogne tout ce qui sort de la zone de texte d'un champ. */
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    outline: 0;
}
.otp input:focus { border-bottom-color: var(--sun); background: rgba(255, 255, 255, .1); }

/* ==========================================================================
   SCÈNE CARTE
   ========================================================================== */
.world { position: absolute; inset: 0; background: #120d1c; }
.map { position: absolute; inset: 0; }
.map-vignette {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(5, 3, 10, .75) 100%),
        repeating-linear-gradient(180deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px);
}
/* Attribution OSM/OpenMapTiles : obligatoire (licence ODbL) mais repliée
   derrière un petit 'i' discret, sans texte visible par défaut. */
.maplibregl-ctrl-bottom-right { bottom: 92px; }
.maplibregl-ctrl-attrib.maplibregl-compact { min-height: 22px; margin: 0 12px 0 0; background: rgba(0, 0, 0, .35); opacity: .35; }
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner { display: none; }
.maplibregl-ctrl-attrib.maplibregl-compact:hover, .maplibregl-ctrl-attrib.maplibregl-compact:focus-within { opacity: 1; background: rgba(0, 0, 0, .85); }
.maplibregl-ctrl-attrib.maplibregl-compact:hover .maplibregl-ctrl-attrib-inner, .maplibregl-ctrl-attrib.maplibregl-compact:focus-within .maplibregl-ctrl-attrib-inner { display: block; color: var(--muted); }
.maplibregl-ctrl-attrib a { color: var(--muted); }

/* Écran assombri pendant la saisie du nom (le globe tourne derrière). */
body[data-dim] .map-vignette { background: rgba(5, 3, 10, .55); transition: background 1s; }

/* ---- Marqueurs ---- */
.hq-pin { position: relative; width: 0; height: 0; pointer-events: none; }
.hq-pin::before {
    content: '';
    position: absolute;
    left: -14px;
    top: -14px;
    width: 28px;
    height: 28px;
    background: var(--pin, var(--pink)); /* couleur de la ville (map.js viewWorld) */
    border: 3px solid #fff;
    transform: rotate(45deg);
    box-shadow: 0 0 0 3px #000, 0 0 30px var(--pin, var(--pink));
}
.hq-pin::after {
    content: '';
    position: absolute;
    left: -40px;
    top: -40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--pin, var(--pink));
    animation: radar 1.8s ease-out infinite;
}
@keyframes radar { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.hq-pin span {
    position: absolute;
    left: 50%;
    bottom: 26px;
    translate: -50% 0;
    padding: 4px 9px 2px;
    background: #000;
    color: #fff;
    font-weight: 900;
    font-style: italic;
    font-size: .9rem;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---- Objectif façon GTA (consigne en haut d'écran) ---- */
.objective {
    position: absolute;
    left: 50%;
    top: max(20px, env(safe-area-inset-top));
    translate: -50% 0;
    z-index: 30;
    max-width: calc(calc(100 * var(--u-vw)) - 32px);
    padding: 10px 20px 8px;
    background: rgba(0, 0, 0, .8);
    text-align: center;
    font-size: clamp(1.05rem, calc(2 * var(--u-vw)), 1.35rem);
    font-weight: 700;
    text-shadow: 0 1px 0 #000;
}
.objective em { font-style: normal; color: var(--sun); }
.objective-actions { display: flex; justify-content: center; gap: 18px; margin-top: 6px; font-size: .9rem; font-weight: 400; }

/* ==========================================================================
   HUD — panneaux "verre fumé" arrondis, liseré lumineux, chiffres tabulaires
   ========================================================================== */
.world {
    --glass: rgba(16, 10, 26, .62);
    --glass-strong: rgba(16, 10, 26, .78);
    --glass-line: rgba(255, 246, 236, .1);
    --glass-shadow: 0 12px 32px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.glass, .hud-id, .hud-res, .viewswitch, .phone-btn {
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
            backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-line);
}

.hud {
    position: absolute;
    inset: 0 0 auto;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: max(14px, env(safe-area-inset-top)) clamp(12px, calc(2 * var(--u-vw)), 24px) 0;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.hud > * { pointer-events: auto; }

/* ---- Identité (haut gauche) ---- */
.hud-id {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 18px 6px 6px;
    border-radius: 999px;
}
.hud-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sunset-x);
    color: #1a0f22;
    font-weight: 900;
    font-style: italic;
    font-size: 1.35rem;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 18px rgba(255, 46, 136, .55);
}
.hud-id-text { display: grid; gap: 2px; }
.hud-name { font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.05rem; line-height: 1.05; }
.hud-meta { display: flex; align-items: center; gap: 10px; font-size: .8rem; }
.hud-city { color: var(--muted); }
.hud-respect { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--sun); }
.hud-respect .ico { font-size: 1rem; }

/* ---- Ressources (haut droite) ---- */
.hud-res {
    display: grid;
    gap: 8px;
    padding: 10px 10px 10px 16px;
    border-radius: 20px;
    justify-items: end;
}
.hud-cash { display: flex; align-items: center; gap: 10px; padding-right: 6px; }
.hud-cash .gta {
    font-size: clamp(1.9rem, calc(3.6 * var(--u-vw)), 2.7rem);
    color: var(--cash);
    -webkit-text-stroke-width: .07em;
    text-shadow: .04em .05em 0 #000, 0 0 22px rgba(141, 242, 124, .35);
}
.hud-cash .gta b { font-weight: inherit; }
.hud-cash-ico { font-size: clamp(1.7rem, calc(3 * var(--u-vw)), 2.2rem); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.hud-goods { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.res {
    --c: var(--paper);
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    font-weight: 700;
    font-size: .98rem;
    transition: background .2s;
}
.res:hover { background: rgba(255, 255, 255, .11); }
.res-ico {
    font-size: 1.45rem;
    padding: 2px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 18%, transparent);
}
.res--alcohol { --c: #ffb02e; }
.res--weed { --c: #6be26b; }
.res--powder { --c: #dfe6ff; }
.res--gems { --c: #59e3ff; padding-right: 4px; }
.res-buy {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-left: 4px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #7deeff, #22b7e0);
    color: #06202a;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(34, 183, 224, .5);
    transition: transform .2s var(--ease-out);
}
.res-buy .ico { font-size: .8rem; }
.res-buy:hover { transform: scale(1.12) rotate(90deg); }

/* ---- Onglets Vue QG / Vue Monde (bas centre) ---- */
.viewswitch {
    position: absolute;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    translate: -50% 0;
    z-index: 20;
    display: flex;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
}
.viewswitch-pill {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: var(--w, 0);
    transform: translateX(var(--x, 0));
    border-radius: 999px;
    background: var(--sunset-x);
    box-shadow: 0 6px 20px rgba(255, 46, 136, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .45s var(--ease-out), width .45s var(--ease-out);
}
.viewswitch-pill.no-anim { transition: none; }
.viewswitch button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1rem;
    cursor: pointer;
    transition: color .3s;
}
.viewswitch .ico { font-size: 1.35rem; }
.viewswitch button:hover { color: var(--paper); }
.viewswitch button[aria-selected="true"] { color: #1a0f22; cursor: default; }

/* ---- Téléphone (bas droite) ---- */
.phone-btn {
    position: absolute;
    right: clamp(12px, calc(2 * var(--u-vw)), 24px);
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 20;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    color: var(--paper);
    cursor: pointer;
    transition: transform .25s var(--ease-out), background .25s;
}
.phone-btn .ico { font-size: 26px; }
.phone-btn:hover { background: var(--pink); transform: translateY(-3px); }


/* ==========================================================================
   DIALOGUE (Carla)
   ========================================================================== */
#layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
#layer > * { pointer-events: auto; }

.talk {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 760px);
    align-items: end;
    gap: 0;
    padding: 0 clamp(12px, calc(3 * var(--u-vw)), 40px) max(18px, env(safe-area-inset-bottom));
    pointer-events: none;
}
.talk > * { pointer-events: auto; }
.talk-portrait { position: relative; width: clamp(150px, calc(20 * var(--u-vw)), 270px); margin-right: -30px; z-index: 1; }
.talk-portrait::before { /* halo coucher de soleil derrière Carla */
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 8%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 46, 136, .55), transparent 70%);
    z-index: -1;
}
.talk-portrait img { width: 100%; height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); }
.talk-box {
    position: relative;
    margin-bottom: 14px;
    padding: 30px 30px 24px 52px;
    background: rgba(8, 5, 14, .9);
    backdrop-filter: blur(8px);
    /* Le polygone déborde vers le haut pour ne pas rogner l'étiquette du nom. */
    clip-path: polygon(0 -60px, 100% -60px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
    box-shadow: inset 0 3px 0 var(--pink);
}
.talk-name {
    position: absolute;
    top: -1px;
    left: 52px;
    translate: 0 -60%;
    padding: 5px 14px 3px;
    background: var(--pink);
    color: #fff;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.1rem;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.talk-text { margin: 6px 0 18px; font-size: clamp(1.1rem, calc(1.7 * var(--u-vw)), 1.35rem); line-height: 1.4; min-height: 2.8em; }
.talk-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.talk-form .field { flex: 1 1 240px; }
.talk-form .form-error { flex-basis: 100%; }
.talk-hint { flex-basis: 100%; color: var(--dim); font-size: .85rem; }

.talk-cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.city-pick {
    --accent: var(--pink);
    position: relative;
    display: grid;
    gap: 4px;
    justify-items: start;
    padding: 18px 20px 16px;
    border: 0;
    background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 80%), rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);
    text-align: left;
    cursor: pointer;
    transition: transform .25s var(--ease-out), box-shadow .25s, background .25s;
}
.city-pick strong { font-size: 2rem; }
.city-pick span { color: var(--muted); font-size: .95rem; }
.city-pick:hover, .city-pick:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 3px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 45%, transparent); }
.city-pick--summercity { --accent: #ff3d8b; }
.city-pick--havanacity { --accent: #ffb627; }

/* ==========================================================================
   TÉLÉPHONE
   ========================================================================== */
.phone-wrap { position: absolute; inset: 0; }
.phone-backdrop { position: absolute; inset: 0; background: rgba(5, 3, 10, .45); }
.phone {
    position: absolute;
    right: clamp(14px, calc(4 * var(--u-vw)), 60px);
    bottom: 0;
    width: min(360px, calc(calc(100 * var(--u-vw)) - 28px));
    height: min(680px, calc(calc(100 * var(--u-svh)) - 40px));
    padding: 14px 12px 10px;
    background: #050308;
    border-radius: 38px 38px 0 0;
    box-shadow: 0 0 0 2px #2a2233, 0 30px 80px rgba(0, 0, 0, .7);
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.phone-bar { display: flex; justify-content: space-between; padding: 4px 18px 8px; font-size: .85rem; font-weight: 700; }
.phone-net { display: flex; align-items: center; gap: 6px; color: var(--cash); }
.phone-net .ico { font-size: .95rem; }
.phone-screen {
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 22px;
    padding: 22px 18px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 120%, rgba(255, 197, 49, .55), transparent 55%),
        linear-gradient(180deg, #2a0b3d 0%, #8a1a5c 60%, #ff7a1a 130%);
}
.phone-hello { margin: 0; font-weight: 900; font-style: italic; font-size: 1.6rem; text-transform: uppercase; line-height: 1; text-shadow: 2px 2px 0 #000; }
.phone-apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; justify-items: center; }
.phone-app {
    --c: var(--pink);
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 6px;
    border: 0;
    background: none;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
}
.phone-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: var(--c);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 -4px 0 rgba(0, 0, 0, .2);
    transition: transform .2s var(--ease-out);
}
.phone-icon .ico { font-size: 30px; color: #fff; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25)); }
.phone-app:hover .phone-icon { transform: scale(1.08) rotate(-4deg); }
.phone-app--business { --c: #ff2e88; }
.phone-app--crew { --c: #7b2cff; }
.phone-app--map { --c: #12b8a5; }
.phone-app--messages { --c: #ff7a1a; }
.phone-app--casino { --c: #e2a400; }
.phone-app--market { --c: #2f9e44; }
.phone-langs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.phone-home { justify-self: center; width: 120px; height: 5px; margin-top: 10px; border: 0; border-radius: 3px; background: #fff; opacity: .7; cursor: pointer; }

/* ==========================================================================
   TOASTS & "MISSION RÉUSSIE"
   ========================================================================== */
.toasts {
    position: fixed;
    left: 50%;
    top: max(16px, env(safe-area-inset-top));
    translate: -50% 0;
    z-index: 90;
    display: grid;
    gap: 8px;
    width: min(460px, calc(calc(100 * var(--u-vw)) - 32px));
    pointer-events: none;
}
.toast {
    padding: 12px 16px 10px;
    background: rgba(0, 0, 0, .88);
    box-shadow: inset 4px 0 0 var(--teal);
    font-size: 1.02rem;
}
.toast--error { box-shadow: inset 4px 0 0 var(--danger); }

.mission {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 6px;
    pointer-events: none;
}
.mission::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 210px;
    translate: 0 -50%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .75) 20%, rgba(0, 0, 0, .75) 80%, transparent);
    z-index: -1;
}
.mission-title {
    font-size: clamp(3rem, calc(9 * var(--u-vw)), 6.5rem);
    background: linear-gradient(180deg, var(--sun), var(--orange));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* Texte transparent (dégradé) : text-shadow le recouvrirait de noir.
       Contour + ombre dure passent par des drop-shadow. */
    -webkit-text-stroke: 0;
    text-shadow: none;
    filter: drop-shadow(.04em 0 0 #000) drop-shadow(-.04em 0 0 #000) drop-shadow(0 .04em 0 #000) drop-shadow(0 -.04em 0 #000) drop-shadow(.06em .07em 0 #000);
    text-align: center;
}
.mission-sub { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 1.6rem; color: #fff; text-shadow: 3px 3px 0 #000; }

/* ==========================================================================
   PAGE D'ERREUR
   ========================================================================== */
.error-page { min-height: calc(100 * var(--u-svh)); display: grid; place-items: center; background: var(--sunset); }
.error { padding: 32px 16px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.error-code { margin: 0; font-weight: 900; font-size: 1.2rem; color: rgba(255, 255, 255, .7); }
.error-title { margin: 0; font-size: clamp(4rem, calc(14 * var(--u-vw)), 10rem); }
.error-text { margin: 0 0 18px; font-size: 1.25rem; max-width: 28em; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .ls { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; overflow-y: auto; }
    .ls-collage { position: absolute; inset: 0; margin: 0; opacity: .35; transform: rotate(-4deg) scale(1.15); }
    .ls-auth { grid-column: 1; grid-row: 2; align-self: end; }
    .ls-tip { display: none; }
    .ls-logo { justify-self: center; }
    .talk { grid-template-columns: 1fr; }
    .talk-portrait { position: absolute; left: 8px; bottom: calc(100% - 60px); width: 120px; margin: 0; }
    .talk-box { padding: 30px 18px 18px; }
    .talk-name { left: 130px; }
    .hud-id { padding-right: 10px; }
    .hud-name { font-size: 1rem; }
    .hud-avatar { width: 38px; height: 38px; font-size: 1.3rem; }
    .phone { right: 50%; translate: 50% 0; }
}
@media (max-height: 560px) and (max-width: 900px) {
    .talk-portrait { display: none; }
    .talk-name { left: 18px; }
}

/* ---- HUD sur petits écrans : 2 lignes, rien ne sort de l'écran ---- */
@media (max-width: 640px) {
    .hud {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        padding-inline: 10px;
    }
    .hud-res { display: contents; }
    .hud-id { min-width: 0; padding: 4px 12px 4px 4px; gap: 8px; }
    .hud-id-text { min-width: 0; }
    .hud-name { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hud-meta { gap: 8px; font-size: .72rem; }
    .hud-avatar { width: 34px; height: 34px; font-size: 1.1rem; }
    .hud-cash, .hud-goods {
        background: var(--glass);
        -webkit-backdrop-filter: blur(16px) saturate(1.3);
                backdrop-filter: blur(16px) saturate(1.3);
        box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-line);
    }
    .hud-cash { gap: 6px; height: 42px; padding: 0 14px 0 8px; border-radius: 999px; }
    .hud-cash .gta { font-size: 1.55rem; }
    .hud-cash-ico { font-size: 1.4rem; }
    .hud-goods {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        padding: 5px;
        border-radius: 999px;
    }
    .res { justify-content: center; height: 32px; padding: 0 6px; gap: 4px; font-size: .9rem; min-width: 0; }
    .res b { overflow: hidden; text-overflow: ellipsis; }
    .res-ico { font-size: 1.2rem; }
    .res-buy { width: 22px; height: 22px; margin-left: 2px; }

    /* Onglets : pictos seuls, calés à gauche (le téléphone est à droite). */
    .viewswitch { left: 10px; translate: none; }
    .viewswitch button { min-height: 44px; padding: 0 16px; }
    .viewswitch-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .phone-btn { right: 10px; width: 54px; height: 54px; }
}

/* ---- QG central (vue QG) : illustration isométrique du bâtiment ---- */
.hq-building { position: relative; width: clamp(130px, calc(15 * var(--u-vw)), 200px); pointer-events: none; }
.hq-building img { width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(255, 46, 136, .35)); }
.hq-building span {
    position: absolute;
    left: 50%;
    top: -6px;
    translate: -50% -100%;
    padding: 4px 9px 2px;
    background: #000;
    color: #fff;
    font-weight: 900;
    font-style: italic;
    font-size: .9rem;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ==========================================================================
   DA "GTA VI" — panneaux arrondis translucides, typo droite et propre,
   onglets pilule lilas, accents rose/lilas. S'applique à toute l'app de jeu.
   ========================================================================== */
.game {
    --lilac: #b39bff;
    --lilac-2: #7c5cff;
    --panel: rgba(18, 12, 30, .58);
    --panel-strong: rgba(18, 12, 30, .82);
    --radius-lg: 26px;
    --radius-md: 16px;
}

/* Typo d'interface : droite, capitales propres (l'italique-contour reste pour les gros titres). */
.hud-name, .viewswitch button, .res, .hud-respect, .auth-tabs button, .talk-name, .objective, .toast, .mission-sub {
    font-style: normal;
}
.hud-name { font-weight: 700; }
.hud-cash .gta {
    font-style: normal;
    font-weight: 800;
    -webkit-text-stroke: 0;
    color: #9dff8a;
    text-shadow: 0 2px 14px rgba(141, 242, 124, .45), 0 1px 0 rgba(0, 0, 0, .6);
}
.hud-res { border-radius: var(--radius-lg); }
.hud-id, .hud-res, .viewswitch, .phone-btn { background: var(--panel); box-shadow: 0 14px 40px rgba(10, 4, 24, .35); }

/* Onglets : barre sombre, onglet actif en dégradé lilas, texte foncé. */
.viewswitch { background: rgba(14, 10, 22, .78); }
.viewswitch-pill {
    background: linear-gradient(90deg, var(--lilac-2), var(--lilac));
    box-shadow: 0 6px 22px rgba(124, 92, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.viewswitch button { font-weight: 700; }
.viewswitch button[aria-selected="true"] { color: #140c26; }
.phone-btn:hover { background: linear-gradient(135deg, var(--lilac-2), var(--pink)); }

/* Boutons du jeu : pilules arrondies (plus de parallélogrammes). */
.game .btn {
    clip-path: none;
    border-radius: 999px;
    font-style: normal;
    font-weight: 800;
    overflow: hidden;
}
.game .btn-hot { --bg: linear-gradient(90deg, var(--pink), #ff5fa8); background: var(--bg); }
.game .btn-ghost { box-shadow: inset 0 0 0 2px rgba(255, 246, 236, .55); }

/* Connexion : carte arrondie, onglets pilule. */
.auth-card { border-radius: var(--radius-lg); background: var(--panel-strong); overflow: hidden; padding-top: 10px; }
.auth-tabs { margin: 0 14px; padding: 5px; gap: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.auth-tabs button { border-radius: 999px; background: transparent; font-weight: 700; padding: 11px 10px 9px; }
.auth-tabs .is-active { background: linear-gradient(90deg, var(--lilac-2), var(--lilac)); color: #140c26; }
.field input, .field-pass input { border-radius: 12px; border-bottom-width: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.field input:focus { box-shadow: inset 0 0 0 2px var(--lilac); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
.otp input { border-radius: 12px; border-bottom-width: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.otp input:focus { box-shadow: inset 0 0 0 2px var(--lilac); }
.check input { border-radius: 6px; }
.form-error { border-radius: 12px; }
.ls-langs { padding: 4px; gap: 2px; border-radius: 999px; background: rgba(0, 0, 0, .45); justify-self: end; }
.ls-langs button, .phone-langs button { border-radius: 999px; background: transparent; }
.ls-langs button[aria-current], .phone-langs button[aria-current] { background: var(--paper); }
.ls-tip { border-radius: 999px; background: var(--panel-strong); box-shadow: none; padding: 10px 14px 10px 22px; }
.ls-panel { border-radius: 22px; }

/* Dialogue de Carla : panneau arrondi translucide, étiquette pilule. */
.talk-box {
    clip-path: none;
    border-radius: var(--radius-lg);
    background: var(--panel-strong);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px rgba(10, 4, 24, .45), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.talk-name {
    clip-path: none;
    border-radius: 999px;
    padding: 6px 16px 5px;
    background: linear-gradient(90deg, var(--pink), #ff7ab8);
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(255, 46, 136, .45);
}
.city-pick { border-radius: 20px; }

/* Consignes, toasts, bannière, téléphone. */
.objective { border-radius: 999px; background: var(--panel-strong); padding: 10px 24px 9px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.toast { border-radius: 999px; padding: 11px 20px 10px; background: var(--panel-strong); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .35); }
.toast--error { box-shadow: inset 0 0 0 2px var(--danger); }
.hq-pin span, .hq-building span { border-radius: 999px; padding: 4px 12px 3px; font-style: normal; font-weight: 700; background: var(--panel-strong); }
.res-buy { background: linear-gradient(180deg, var(--lilac), var(--lilac-2)); color: #fff; box-shadow: 0 2px 10px rgba(124, 92, 255, .55); }

/* ==========================================================================
   SIGNATURE "WAHOU" : dégradé coucher de soleil + reflet qui balaie
   (remplace le lilas). Variables reprises par onglets, focus, gemmes…
   ========================================================================== */
.game {
    --lilac: #ff9a3c;     /* (nom conservé) accent orange solaire */
    --lilac-2: #ff2e88;   /* rose néon */
    --cta: linear-gradient(100deg, #ff2e88 0%, #ff5a5f 38%, #ff8a2a 70%, #ffc531 100%);
    --cta-glow: 0 10px 28px rgba(255, 70, 110, .45), 0 0 0 1px rgba(255, 255, 255, .18) inset;
}
@keyframes sheen { 0% { transform: translateX(-130%) skewX(-20deg); } 55%, 100% { transform: translateX(260%) skewX(-20deg); } }
@keyframes glow-pulse { 0%, 100% { box-shadow: var(--cta-glow); } 50% { box-shadow: 0 12px 38px rgba(255, 110, 60, .65), 0 0 0 1px rgba(255, 255, 255, .25) inset; } }

.game .btn-hot {
    background: var(--cta);
    background-size: 160% 100%;
    color: #fff;
    text-shadow: 0 1px 2px rgba(80, 0, 30, .45);
    box-shadow: var(--cta-glow);
    transition: transform .25s var(--ease-out), background-position .6s var(--ease-out), box-shadow .3s;
}
.game .btn-hot::after { /* reflet lumineux qui balaie en boucle */
    content: '';
    position: absolute;
    inset: -20% auto -20% 0;
    width: 38%;
    z-index: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-130%) skewX(-20deg);
    transform-origin: center;
    animation: sheen 3.2s ease-in-out infinite;
    pointer-events: none;
}
.game .btn-hot:hover { background-position: 100% 0; transform: translateY(-2px); color: #fff; }
.game .btn-hot:not([disabled]) { animation: glow-pulse 2.8s ease-in-out infinite; }
.game .btn-hot[disabled] { animation: none; filter: grayscale(.85); opacity: .55; }
.game .btn-hot[disabled]::after { display: none; }

.viewswitch-pill { background: var(--cta); box-shadow: var(--cta-glow); overflow: hidden; }
.viewswitch-pill::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
    animation: sheen 3.6s ease-in-out infinite;
}
.viewswitch button[aria-selected="true"] { color: #fff; text-shadow: 0 1px 2px rgba(80, 0, 30, .5); }
.auth-tabs .is-active { background: var(--cta); color: #fff; text-shadow: 0 1px 2px rgba(80, 0, 30, .45); box-shadow: var(--cta-glow); }
.res-buy { background: var(--cta); color: #fff; box-shadow: 0 2px 10px rgba(255, 70, 110, .55); }
.phone-btn:hover { background: var(--cta); }

/* ==========================================================================
   Grille du QG : infobulle, compte à rebours
   ========================================================================== */
.map-tip {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    margin: -46px 0 0 14px;
    padding: 6px 14px 5px;
    border-radius: 999px;
    background: rgba(14, 9, 22, .9);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .1);
    color: var(--paper);
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.map-tip[data-kind="free"] { box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 0 0 2px #ff6a4a; }
.map-tip[data-kind="locked"] { color: var(--muted); }
.build-timer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 4px;
    border-radius: 999px;
    background: var(--cta);
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--cta-glow);
    pointer-events: none;
}

/* ==========================================================================
   Panneaux latéraux (fiche bâtiment, menu de construction)
   ========================================================================== */
.sheet-wrap { position: absolute; inset: 0; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(8, 4, 16, .3); }
.sheet {
    position: absolute;
    top: 100px;
    right: clamp(12px, calc(2 * var(--u-vw)), 24px);
    bottom: 96px;
    width: min(400px, calc(calc(100 * var(--u-vw)) - 24px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 26px 24px 24px;
    border-radius: 26px;
    background: rgba(16, 10, 26, .86);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
            backdrop-filter: blur(18px) saturate(1.3);
    box-shadow: 0 24px 60px rgba(5, 2, 12, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.sheet--wide { width: min(540px, calc(calc(100 * var(--u-vw)) - 24px)); }
.sheet-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--paper);
    cursor: pointer;
    transition: background .2s, transform .3s var(--ease-out);
}
.sheet-close .ico { font-size: 1.1rem; transform: rotate(45deg); }
.sheet-close:hover { background: rgba(255, 255, 255, .16); transform: rotate(90deg); }
.sheet-hero {
    display: grid;
    place-items: center;
    margin: -6px -6px 6px;
    padding: 12px 0 4px;
    border-radius: 20px;
    background: radial-gradient(ellipse 60% 70% at 50% 70%, rgba(255, 106, 74, .35), transparent 70%);
}
.sheet-hero img { width: min(220px, 70%); height: auto; filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .5)); }
.sheet-kicker { margin: 0; color: var(--sun); font-weight: 700; font-size: .8rem; text-transform: uppercase; }
.sheet-title { margin: 4px 0 10px; font-weight: 800; font-size: 1.9rem; line-height: 1; text-transform: uppercase; }
.sheet-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 6px 14px 5px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}
.sheet-status.is-ready { background: rgba(141, 242, 124, .14); color: #a9ff98; }
.sheet-status.is-building { background: rgba(255, 154, 60, .16); color: #ffc078; }
.sheet-text { margin: 0 0 18px; color: var(--muted); }
.sheet-label { margin: 0 0 8px; font-size: .78rem; font-weight: 700; text-transform: uppercase; color: var(--dim); }
.sheet-stats { display: grid; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.sheet-stats li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.sheet-stats li span { flex: 1; text-transform: capitalize; }
.sheet-stats li b { color: #a9ff98; }
.sheet-actions { display: grid; gap: 10px; }
.sheet-notice { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 154, 60, .14); color: #ffc078; font-size: .92rem; }

.build-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.build-card {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 4px 14px;
    align-items: center;
    padding: 12px 14px 12px 8px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    transition: background .2s, transform .25s var(--ease-out);
}
.build-card:not(.is-locked):hover { background: rgba(255, 255, 255, .09); transform: translateY(-2px); }
.build-img { grid-row: 1 / 3; width: 100px; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.build-body h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; font-weight: 800; font-size: 1.1rem; text-transform: uppercase; }
.build-body h3 small { font-size: .78rem; font-weight: 700; color: var(--dim); }
.build-body p { margin: 0 0 8px; color: var(--muted); font-size: .86rem; line-height: 1.35; }
.build-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.build-meta li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 6px; border-radius: 999px; background: rgba(0, 0, 0, .3); font-size: .82rem; font-variant-numeric: tabular-nums; }
.build-meta li .ico { font-size: 1.05rem; }
.build-meta li.is-bad { color: #ff8f8f; box-shadow: inset 0 0 0 1px rgba(255, 65, 65, .5); }
.build-cta { grid-column: 2; justify-self: start; margin-top: 4px; }
.build-cta .btn { min-height: 40px; padding: .4em 1.3em .35em; font-size: .95rem; }
.build-card.is-locked { opacity: .72; }

@media (max-width: 640px) {
    .sheet, .sheet--wide {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: calc(80 * var(--u-svh));
        border-radius: 26px 26px 0 0;
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
    .sheet-title { font-size: 1.6rem; }
    .build-card { grid-template-columns: 64px minmax(0, 1fr); }
    .build-img { width: 64px; }
}

/* ==========================================================================
   NIVEAU DU PERSONNAGE : badge bien visible + anneau d'XP
   ========================================================================== */
.hud-avatar-wrap { position: relative; width: 54px; height: 54px; flex: none; display: grid; place-items: center; }
.hud-xp { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.hud-xp-track { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 3.2; }
.hud-xp-bar { fill: none; stroke: #ffc531; stroke-width: 3.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 197, 49, .8)); }
.hud-avatar-wrap .hud-avatar { width: 42px; height: 42px; box-shadow: none; }
.hud-level {
    position: absolute;
    right: -8px;
    bottom: -6px;
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--cta);
    color: #fff;
    font-weight: 900;
    font-size: .95rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(80, 0, 30, .5);
    box-shadow: 0 0 0 3px rgba(16, 10, 26, .95), 0 4px 12px rgba(255, 70, 110, .55);
}
.hud-id { padding-left: 8px; }

/* ==========================================================================
   ÎLE D'INFOS (heure, météo) — se transforme pour les notifications
   ========================================================================== */
.island {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(8, 5, 14, .86);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 26px var(--tod-glow, rgba(255, 46, 136, .25));
    overflow: hidden;
    white-space: nowrap;
    transition: box-shadow 1.2s;
}
.island-idle { display: flex; align-items: center; gap: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.island-wx { display: inline-flex; align-items: center; gap: 6px; }
.island-wx-ico { font-size: 1.3rem; color: var(--tod-ico, #ffc531); filter: drop-shadow(0 0 6px currentColor); }
.island-sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .18); }
.island-clock { font-size: 1.1rem; }
.island-city { color: var(--muted); font-size: .82rem; text-transform: uppercase; }
.island-msg { max-width: min(460px, calc(80 * var(--u-vw))); padding: 10px 2px; font-weight: 700; white-space: normal; text-align: center; line-height: 1.25; }
.island.is-open { border-radius: 22px; }
.island[data-type="error"] { box-shadow: 0 12px 30px rgba(0, 0, 0, .4), inset 0 0 0 2px var(--danger); }

/* Teinte de l'interface selon le moment de la journée (body[data-tod]). */
body[data-tod="night"]  { --tod-glow: rgba(255, 46, 136, .3);  --tod-ico: #c9b8ff; }
body[data-tod="dawn"]   { --tod-glow: rgba(255, 176, 160, .3); --tod-ico: #ffb0a0; }
body[data-tod="day"]    { --tod-glow: rgba(127, 214, 255, .35); --tod-ico: #ffc531; }
body[data-tod="sunset"] { --tod-glow: rgba(255, 122, 26, .45); --tod-ico: #ff9a3c; }

/* ==========================================================================
   MOTION : deltas de ressources, onde de clic, pastille élastique
   ========================================================================== */
.res, .hud-cash, .hud-respect { position: relative; }
.res-delta {
    position: absolute;
    right: 6px;
    top: 50%;
    z-index: 2;
    padding: 2px 9px 1px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    white-space: nowrap;
}
.res-delta.is-up { background: #2fbf5a; color: #fff; box-shadow: 0 6px 16px rgba(47, 191, 90, .5); }
.res-delta.is-down { background: #ff3d5e; color: #fff; box-shadow: 0 6px 16px rgba(255, 61, 94, .5); }
.map-ripple {
    position: absolute;
    z-index: 4;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    border-radius: 50%;
    border: 3px solid #ffc531;
    box-shadow: 0 0 30px rgba(255, 154, 60, .7), inset 0 0 20px rgba(255, 46, 136, .5);
    pointer-events: none;
}
/* La pastille des onglets s'étire avec un rebond élastique. */
.viewswitch-pill { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), width .6s cubic-bezier(.34, 1.56, .64, 1); }
.game .btn:active { transform: scale(.95); }

@media (max-width: 640px) {
    .island { grid-column: 1 / -1; justify-self: center; min-height: 36px; padding: 0 14px; order: 5; }
    .island-city { display: none; }
    .hud-avatar-wrap { width: 44px; height: 44px; }
    .hud-avatar-wrap .hud-avatar { width: 34px; height: 34px; }
    .hud-level { min-width: 22px; height: 22px; font-size: .8rem; right: -6px; bottom: -4px; }
}

/* Comptes à rebours des chantiers : utiles en vue QG seulement. */
body[data-mode="world"] .build-timer { display: none; }

/* ==========================================================================
   SURVOL D'UN BÂTIMENT : nom affiché DANS la case, au-dessus de sa barre de vie
   (case dorée via WebGL ; un seul élément DOM pour toute la carte)
   ========================================================================== */
.cell-name {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    margin: 0;
    pointer-events: none;
    white-space: nowrap;
    font-weight: 900;
    font-size: clamp(.9rem, calc(1.2 * var(--u-vw)), 1.1rem);
    color: #fff;
    text-shadow: 0 2px 0 #000, 0 0 2px #000, 0 0 8px rgba(0, 0, 0, .8);
    translate: -50% calc(-100% - 6px);
}

/* ==========================================================================
   AMBIANCE : poussière néon flottante au-dessus de la ville
   ========================================================================== */
.ambient { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) { .ambient { display: none; } }

/* ==========================================================================
   DA « CLASH × GTA »
   Codes "jeu mobile" de Clash of Clans (textes blancs à gros contour noir,
   boutons 3D à tranche, panneaux biseautés à bordure épaisse, blasons)
   + l'ADN GTA (nuit, néons rose / orange / or).
   Cette couche surcharge volontairement les styles précédents.
   ========================================================================== */
.game {
    --edge: #1a0d22;                 /* contour sombre commun */
    --edge-w: 3px;
    --pop: 0 4px 0 var(--edge);      /* "tranche" 3D sous les éléments */
    --panel-top: #3a2156;
    --panel-bot: #1d1030;
}

/* Texte "Supercell" : blanc, gros contour noir, ombre portée dure. */
.game .chunky,
.hud-name, .hud-cash .gta, .res b, .viewswitch button, .game .btn, .sheet-title,
.auth-tabs button, .talk-name, .cell-name, .hud-level, .build-body h3, .island-clock, .island-wx b,
.res-delta, .mission-title, .mission-sub, .build-timer {
    font-style: normal;
    font-weight: 900;
    -webkit-text-stroke: 4px var(--edge);
    paint-order: stroke fill;
    text-shadow: 0 2px 0 var(--edge);
}

/* ---- Boutons 3D ---- */
.game .btn {
    --b1: #fff3d6;
    --b2: #ffd27a;
    --side: #b8741a;
    min-height: 50px;
    padding: .45em 1.4em .4em;
    border: var(--edge-w) solid var(--edge);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--b1) 0%, var(--b2) 100%);
    color: #fff;
    font-size: 1.1rem;
    text-transform: uppercase;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18), inset 0 3px 0 rgba(255, 255, 255, .55), 0 5px 0 var(--edge), 0 9px 16px rgba(0, 0, 0, .4);
    transition: transform .12s, box-shadow .12s, filter .2s;
    animation: none;
    overflow: visible;
}
.game .btn::after { content: none; animation: none; }
.game .btn::before { /* reflet brillant en haut */
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 4px;
    height: 34%;
    border-radius: 10px 10px 40% 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.game .btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.game .btn:active { transform: translateY(4px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), inset 0 3px 0 rgba(255, 255, 255, .5), 0 1px 0 var(--edge), 0 3px 6px rgba(0, 0, 0, .4); }
/* Principal : coucher de soleil GTA. */
.game .btn-hot { --b1: #ff7ab8; --b2: #ff2e88; background: linear-gradient(180deg, #ff8fc4 0%, #ff4f9a 45%, #ff2e6e 100%); }
.game .btn-hot:hover { background: linear-gradient(180deg, #ffa3cf 0%, #ff63a6 45%, #ff3f7c 100%); }
/* Secondaire : bleu nuit. */
.game .btn-ghost { background: linear-gradient(180deg, #6a5a9a 0%, #3c2d66 100%); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25), inset 0 3px 0 rgba(255, 255, 255, .3), 0 5px 0 var(--edge), 0 9px 16px rgba(0, 0, 0, .4); }
.game .btn[disabled] { filter: grayscale(1) brightness(.75); opacity: 1; }

/* ---- Panneaux biseautés ---- */
.hud-id, .hud-res, .hud-cash, .hud-goods, .viewswitch, .sheet, .auth-card, .talk-box, .island, .phone-btn {
    border: var(--edge-w) solid var(--edge);
    background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bot) 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), inset 0 -3px 0 rgba(0, 0, 0, .3), var(--pop), 0 10px 22px rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
}
.hud-res { background: none; border: 0; box-shadow: none; padding: 0; gap: 10px; }

/* ---- Identité + blason de niveau ---- */
.hud-id { border-radius: 999px 18px 18px 999px; padding: 5px 18px 5px 5px; }
.hud-name { font-size: 1.2rem; text-transform: uppercase; }
.hud-meta { -webkit-text-stroke: 0; }
.hud-level {
    min-width: 30px;
    height: 32px;
    right: -10px;
    bottom: -9px;
    border: var(--edge-w) solid var(--edge);
    border-radius: 9px 9px 50% 50%; /* blason */
    background: linear-gradient(180deg, #ffe27a, #ffb21e 60%, #e08a00);
    font-size: 1.05rem;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 var(--edge);
}
.hud-xp-bar { stroke: #ffd23f; }

/* ---- Ressources : barre + picto qui déborde à gauche ---- */
.hud-cash {
    position: relative;
    height: 48px;
    padding: 0 18px 0 46px;
    border-radius: 14px;
    gap: 0;
}
.hud-cash-ico { position: absolute; left: -16px; top: 50%; translate: 0 -50%; font-size: 2.6rem; filter: drop-shadow(0 3px 0 var(--edge)); }
.hud-cash .gta { font-size: 1.9rem; color: #b6ff86; -webkit-text-stroke-width: 5px; }
.hud-goods { padding: 6px 8px 6px 18px; border-radius: 14px; gap: 18px; }
.res { position: relative; height: 32px; padding: 0 12px 0 26px; border-radius: 10px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35); }
.res-ico { position: absolute; left: -14px; top: 50%; translate: 0 -50%; font-size: 1.9rem; padding: 0; background: none; filter: drop-shadow(0 2px 0 var(--edge)); }
.res b { font-size: 1.05rem; color: #fff; }
.res-buy { border: 2px solid var(--edge); border-radius: 8px; background: linear-gradient(180deg, #8dff6a, #2fbf3a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 2px 0 var(--edge); }

/* ---- Onglets QG / Ville ---- */
.viewswitch { padding: 5px; gap: 4px; border-radius: 18px; }
.viewswitch-pill {
    top: 5px;
    bottom: 5px;
    border: var(--edge-w) solid var(--edge);
    border-radius: 13px;
    background: linear-gradient(180deg, #ff8fc4 0%, #ff4f9a 45%, #ff2e6e 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(0, 0, 0, .2);
}
.viewswitch-pill::after { content: none; }
.viewswitch button { border-radius: 13px; color: #cdbbe6; -webkit-text-stroke-width: 3px; }
.viewswitch button[aria-selected="true"] { color: #fff; }
.phone-btn { border-radius: 18px; }
.phone-btn .ico { color: #fff; filter: drop-shadow(0 2px 0 var(--edge)); }

/* ---- Panneaux latéraux ---- */
.sheet { border-radius: 24px; padding-top: 30px; }
.sheet-title {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 18px 5px;
    border: var(--edge-w) solid var(--edge);
    border-radius: 12px;
    background: linear-gradient(180deg, #ff8fc4, #ff2e6e);
    font-size: 1.6rem;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--edge);
    transform: rotate(-1.5deg);
}
.sheet-close { border: var(--edge-w) solid var(--edge); background: linear-gradient(180deg, #ff6a6a, #d61f3a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--edge); }
.build-card { border: 2px solid var(--edge); background: linear-gradient(180deg, #2c1a44, #1a0f2a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 3px 0 var(--edge); }
.build-body h3 { font-size: 1.2rem; }
.build-meta li { border: 2px solid var(--edge); }
.sheet-stats li, .sheet-notice, .sheet-status { border: 2px solid var(--edge); }

/* ---- Connexion, dialogue, île, toasts ---- */
.auth-card { border-radius: 24px; }
.auth-tabs { background: rgba(0, 0, 0, .35); border: 2px solid var(--edge); }
.auth-tabs .is-active { border: 2px solid var(--edge); background: linear-gradient(180deg, #ff8fc4, #ff2e6e); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.field input, .field-pass input, .otp input { border: 2px solid var(--edge); background: #120a1e; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .4); }
.talk-box { border-radius: 24px; }
.talk-name { border: var(--edge-w) solid var(--edge); background: linear-gradient(180deg, #ff8fc4, #ff2e6e); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 var(--edge); font-size: 1.15rem; }
.island { border-radius: 16px; }
.toast { border: var(--edge-w) solid var(--edge); border-radius: 14px; background: linear-gradient(180deg, var(--panel-top), var(--panel-bot)); box-shadow: var(--pop); font-weight: 700; }
.build-timer { border: 2px solid var(--edge); border-radius: 10px; color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--edge); }

/* ---- Carte : nom au survol façon Clash ---- */
.cell-name { font-size: clamp(1rem, calc(1.4 * var(--u-vw)), 1.25rem); -webkit-text-stroke-width: 5px; text-shadow: 0 3px 0 var(--edge); }
.map-tip { border: 2px solid var(--edge); border-radius: 10px; background: linear-gradient(180deg, var(--panel-top), var(--panel-bot)); box-shadow: 0 3px 0 var(--edge); }

@media (max-width: 640px) {
    .hud-cash { height: 40px; padding-left: 36px; }
    .hud-cash-ico { font-size: 2rem; left: -10px; }
    .hud-cash .gta { font-size: 1.45rem; }
    .hud-goods { padding-left: 14px; gap: 14px; }
    .res-ico { font-size: 1.5rem; left: -10px; }
}

/* Transition QG / Ville : flash flou qui masque le saut de caméra. */
@keyframes map-warp { 0% { filter: none; } 25% { filter: blur(6px) brightness(1.35) saturate(1.3); } 100% { filter: none; } }
.map.is-warping { animation: map-warp .5s ease-out; }
@media (prefers-reduced-motion: reduce) { .map.is-warping { animation: none; } }

/* Mobile : valeurs des ressources toujours sur une ligne. */
.res b { white-space: nowrap; }
@media (max-width: 640px) {
    .hud-goods { gap: 10px; padding: 5px 6px 5px 14px; }
    .res { padding: 0 6px 0 18px; height: 30px; justify-content: flex-start; }
    .res b { font-size: .85rem; -webkit-text-stroke-width: 3px; overflow: visible; }
    .res-ico { font-size: 1.35rem; left: -9px; }
    .res--gems { padding-right: 2px; }
    .res-buy { width: 20px; height: 20px; margin-left: auto; }
}

/* Moins de rose : principal = orange solaire / or (le rose reste en accent). */
.game { --sun-btn: linear-gradient(180deg, #ffd56a 0%, #ffa726 48%, #f57c00 100%); --sun-btn-hover: linear-gradient(180deg, #ffe08a 0%, #ffb547 48%, #ff8a1a 100%); }
.game .btn-hot, .viewswitch-pill, .sheet-title, .auth-tabs .is-active, .talk-name { background: var(--sun-btn); }
.game .btn-hot:hover { background: var(--sun-btn-hover); }

/* ==========================================================================
   MODALES CENTRÉES (fiche bâtiment, construction) + CARROUSEL DE CARTES
   ========================================================================== */
.sheet-wrap { display: grid; place-items: center; padding: 90px 16px 100px; }
.sheet-backdrop { background: rgba(8, 4, 16, .62); }
.sheet,
.sheet--wide {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    width: min(440px, 100%);
    max-height: calc(calc(100 * var(--u-svh)) - 190px);
}
.sheet--wide { width: min(1080px, 100%); overflow: visible; }

/* Carrousel : défilement natif + aimantation, glisser à la souris géré en JS. */
.carousel { position: relative; margin: 6px -10px 0; }
.build-list {
    display: flex;
    gap: 16px;
    padding: 10px 10px 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
}
.build-list::-webkit-scrollbar { display: none; }
.build-list.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.build-list.is-dragging .build-card { pointer-events: none; }
.build-card {
    flex: 0 0 230px;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 8px;
    padding: 10px 12px 14px;
    border-radius: 20px;
    text-align: center;
    user-select: none;
}
.build-card:not(.is-locked):hover { transform: translateY(-4px); }
.build-img-wrap {
    display: grid;
    place-items: end center;
    height: 150px;
    margin: -2px -4px 0;
    border-radius: 14px;
    border: 2px solid var(--edge);
    background: radial-gradient(ellipse 70% 60% at 50% 75%, rgba(255, 167, 38, .35), transparent 70%), linear-gradient(180deg, #2a1640, #160b24);
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, .35);
}
.build-img { grid-row: auto; width: auto; height: 132px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .5)); pointer-events: none; }
.build-body h3 { justify-content: center; flex-wrap: wrap; margin: 2px 0 4px; }
.build-body p { margin: 0 0 8px; font-size: .82rem; min-height: 3.6em; }
.build-meta { justify-content: center; }
.build-cta { grid-column: auto; justify-self: stretch; margin: 0; }
.build-cta .btn { width: 100%; }
.build-card.is-locked .build-img { filter: grayscale(1) brightness(.6) drop-shadow(0 8px 8px rgba(0, 0, 0, .5)); }

.carousel-nav {
    position: absolute;
    top: 42%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 3px solid var(--edge);
    border-radius: 50%;
    background: var(--sun-btn, linear-gradient(180deg, #ffd56a, #f57c00));
    color: #fff;
    cursor: pointer;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--edge), 0 8px 16px rgba(0, 0, 0, .45);
    transition: transform .15s, opacity .2s;
}
.carousel-nav .ico { font-size: 1.4rem; filter: drop-shadow(0 2px 0 var(--edge)); }
.carousel-nav:hover { transform: scale(1.08); }
.carousel-nav:active { transform: translateY(3px); }
.carousel-nav--prev { left: -18px; }
.carousel-nav--next { right: -18px; }
.carousel-nav[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 640px) {
    .sheet-wrap { place-items: end stretch; padding: 0; }
    .sheet, .sheet--wide { width: 100%; max-height: calc(82 * var(--u-svh)); border-radius: 24px 24px 0 0; }
    .build-card { flex-basis: 74%; }
    .carousel-nav { display: none; }
}

/* La largeur du carrousel ne doit jamais élargir la modale. */
.sheet-wrap { grid-template-columns: minmax(0, 1fr); }
.sheet, .sheet--wide, .carousel, .build-list { min-width: 0; }
.sheet--wide { justify-self: center; }
@media (max-width: 640px) { .sheet--wide { justify-self: stretch; } }

/* Compteur de chantiers : petite pastille noire 40 %. */
.sheet-slots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 5px 12px 4px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .4);
    font-weight: 800;
    font-size: .85rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.sheet-slots .ico { font-size: 1rem; }
.slot-dots { display: inline-flex; gap: 4px; margin-left: 2px; }
.slot-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .4); }
.slot-dots i.is-on { background: #ffb547; box-shadow: 0 0 6px rgba(255, 181, 71, .8); }

/* Pictos contourés comme les textes (contour sombre + ombre dure). */
.game .btn .ico, .viewswitch .ico, .sheet-slots .ico, .build-meta .ico:not([class*="res"]), .phone-btn .ico,
.carousel-nav .ico, .sheet-status .ico, .res-buy .ico, .sheet-close .ico, .sheet-stats .ico, .sheet-notice .ico, .auth-secure .ico {
    color: #fff;
    filter: drop-shadow(1.5px 0 0 var(--edge)) drop-shadow(-1.5px 0 0 var(--edge)) drop-shadow(0 1.5px 0 var(--edge)) drop-shadow(0 -1.5px 0 var(--edge)) drop-shadow(0 2px 0 var(--edge));
}
.sheet-status.is-ready .ico { color: #a9ff98; }
.sheet-status.is-building .ico, .sheet-notice .ico { color: #ffc078; }
.auth-secure .ico { color: #8df27c; }

/* Cartes de construction : proportions respectées (même échelle pour tous les
   bâtiments, socle calé en bas du cadre) ; les bâtiments hauts débordent au-dessus. */
.build-list { padding-top: 70px; }
.build-img-wrap { position: relative; height: 120px; overflow: visible; display: block; }
.build-img {
    position: absolute;
    left: 50%;
    bottom: -12px;
    translate: -50% 0;
    max-width: none;
    height: auto;
    object-fit: initial;
}

/* Échelle unique (sprites normalisés : socle 340 px -> ~150 px), ancrée sur le
   bas du cadre ; marge haute pour le débordement (le carrousel rogne en Y). */
.build-list { padding-top: 110px; }
.build-img {
    width: auto;
    height: auto;
    max-width: none;
    transform: translateX(-50%) scale(.41);
    translate: none;
    transform-origin: 50% 100%;
    bottom: -48px;
}

/* Textes alignés d'une carte à l'autre : rangées fixes, bouton en bas. */
.build-card { display: flex; flex-direction: column; align-items: stretch; }
.build-body { display: flex; flex-direction: column; flex: 1; }
.build-body h3 { white-space: nowrap; margin: 6px 0 4px; min-height: 1.3em; }
.build-body p {
    min-height: 2.7em;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.build-meta { align-content: flex-start; min-height: 66px; }
.build-cta { margin-top: auto; }

/* Cartes : socle posé sur le bas du cadre (sans recouvrir le titre). */
.build-list { padding-top: 84px; }
.build-img { bottom: 0; }

/* Éléments posés dans la carte : MapLibre impose Helvetica, on remet notre police. */
.maplibregl-map .map-tip, .maplibregl-map .cell-name, .maplibregl-map .build-timer, .maplibregl-map .hq-pin span { font-family: var(--font); }
.map-tip {
    padding: 6px 14px 5px;
    border: 3px solid var(--edge);
    border-radius: 12px;
    background: linear-gradient(180deg, #3a2156, #1d1030);
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
    -webkit-text-stroke: 4px var(--edge);
    paint-order: stroke fill;
    text-shadow: 0 2px 0 var(--edge);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 4px 0 var(--edge), 0 10px 20px rgba(0, 0, 0, .45);
}
.map-tip[data-kind="locked"] { color: #d6c8ea; }
.map-tip[data-kind="free"] { background: linear-gradient(180deg, #ffd56a, #f57c00); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--edge), 0 10px 20px rgba(0, 0, 0, .45); }

/* Petits pictos : le contour 4 directions les empâte -> simple ombre dure. */
.res-buy .ico, .sheet-slots .ico, .build-meta .ico, .auth-secure .ico, .sheet-status .ico, .sheet-stats .ico, .sheet-notice .ico {
    filter: drop-shadow(0 1.5px 0 var(--edge));
}
.res-buy .ico { font-size: .85rem; }

/* Cartes remontées sous le titre : la zone de débordement du carrousel passe
   derrière l'en-tête (les bâtiments hauts peuvent chevaucher le titre). La piste
   laisse passer les clics hors des cartes (pastille, fermeture). */
.carousel { margin-top: -78px; }
.build-list { pointer-events: none; }
.build-card, .carousel-nav { pointer-events: auto; }
.sheet-close { z-index: 3; }
@media (max-width: 640px) { .carousel { margin-top: -60px; } }

/* Fermeture / précédent / suivant : glyphes SVG déjà contourés (pas de filtre). */
.sheet-close .ico, .carousel-nav .ico { filter: none; transform: none; color: inherit; }
.sheet-close .ico { font-size: 1.35rem; }
.carousel-nav .ico { font-size: 1.6rem; }
.sheet-close:hover { transform: scale(1.08); }

/* Messages flash : bandeau dédié sous l'île d'infos (l'île garde heure + météo). */
.toasts { top: max(76px, calc(env(safe-area-inset-top) + 64px)); z-index: 90; justify-items: center; }
.toast { justify-self: center; padding: 10px 20px 9px; text-align: center; color: #fff; }
.toast--error { border-color: #7a0f22; background: linear-gradient(180deg, #ff6a6a, #c4192f); }
@media (max-width: 640px) { .toasts { top: 196px; } }

/* Sans heure, la ville reste visible aussi sur mobile. */
@media (max-width: 640px) { .island-city { display: inline; } }

/* Tour de jeu dans l'île. */
.island-turn { display: inline-flex; align-items: center; gap: 6px; }
.island-turn .ico { font-size: 1.05rem; color: #ffb547; filter: drop-shadow(0 1.5px 0 var(--edge)); }
.island-turn small { color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; -webkit-text-stroke: 0; }
.island-turn b { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; }
@media (max-width: 640px) { .island-turn small { display: none; } }

/* Halo derrière le bâtiment : dégradé circulaire qui s'estompe en douceur
   (plus de coupure nette au bord du cadre). */
.sheet-hero { position: relative; background: none; overflow: visible; isolation: isolate; }
.sheet-hero::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 58%;
    width: 120%;
    aspect-ratio: 1.6;
    translate: -50% -50%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 140, 50, .42), rgba(255, 90, 60, .16) 55%, transparent 100%);
    filter: blur(6px);
    pointer-events: none;
}
.build-img-wrap {
    background: radial-gradient(closest-side at 50% 72%, rgba(255, 167, 38, .32), rgba(255, 167, 38, .08) 60%, transparent 100%), linear-gradient(180deg, #2a1640, #160b24);
}

/* Perspective subtile qui suit la souris (bâtiments des fiches et du shop). */
[data-tilt] { perspective: 700px; }
[data-tilt] > img {
    transition: rotate .4s cubic-bezier(.22, 1, .36, 1), transform .4s cubic-bezier(.22, 1, .36, 1), filter .3s;
    will-change: transform;
}
.sheet-hero[data-tilt] > img { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.build-img-wrap[data-tilt] > .build-img { transform: translateX(-50%) scale(.41) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@media (prefers-reduced-motion: reduce) { [data-tilt] > img { transform: none; } }

/* Un peu plus d'air sous l'en-tête, bâtiments un poil plus petits. */
.carousel { margin-top: -62px; }
.build-img-wrap[data-tilt] > .build-img { transform: translateX(-50%) scale(.37) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
@media (max-width: 640px) { .carousel { margin-top: -46px; } }

/* Boutons désactivés des cartes (niveau requis, fonds…) : texte plus petit, sur une ligne. */
.build-cta .btn[disabled] { font-size: .8rem; gap: 6px; white-space: nowrap; -webkit-text-stroke-width: 3px; }
.build-cta .btn[disabled] .ico { font-size: .95rem; }

/* Avatar du joueur légèrement plus grand. */
.hud-avatar-wrap { width: 62px; height: 62px; }
.hud-avatar-wrap .hud-avatar { width: 50px; height: 50px; font-size: 1.6rem; }
@media (max-width: 640px) {
    .hud-avatar-wrap { width: 50px; height: 50px; }
    .hud-avatar-wrap .hud-avatar { width: 40px; height: 40px; font-size: 1.3rem; }
}

/* Carrousel en mode libre : pas d'aimantation (souris comme tactile). */
.build-list { scroll-snap-type: none; }

/* Identité réduite à l'avatar (niveau + XP) : pastille compacte. */
.hud-id { padding: 5px; border-radius: 999px; }

/* Pictos de ressources qui volent (gain / dépense), au-dessus de tout le HUD. */
.res-fly { position: fixed; z-index: 120; pointer-events: none; margin: 0; filter: drop-shadow(0 3px 0 var(--edge)) drop-shadow(0 0 8px rgba(255, 220, 120, .6)); }

/* Bouton "+" des gemmes : propre, glyphe SVG contouré, bord net. */
.res-buy {
    width: 26px;
    height: 26px;
    border: 2px solid var(--edge);
    border-radius: 9px;
    background: linear-gradient(180deg, #7ef55e 0%, #36c23f 55%, #219a2c 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 2px 0 var(--edge);
}
.res-buy .ico { font-size: 1.15rem; filter: none; color: inherit; }

/* Shop : bâtiments plus petits, débordement max ~25-30 px au-dessus du cadre. */
.build-img-wrap { height: 140px; }
.build-img-wrap[data-tilt] > .build-img { transform: translateX(-50%) scale(.34) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.carousel { margin-top: -40px; }
@media (max-width: 640px) { .carousel { margin-top: -30px; } }

/* Fiche d'un bâtiment : jamais de barre de défilement horizontale (halo, tilt). */
.sheet:not(.sheet--wide) { overflow-x: hidden; }
.sheet-hero::before { width: 100%; }

/* Messages flash : un seul à la fois, centrés en bas au-dessus des onglets,
   texte blanc gras sur pastille noire 40 %. */
.toasts {
    top: auto;
    bottom: calc(max(18px, env(safe-area-inset-bottom)) + 78px);
    width: auto;
    max-width: calc(calc(100 * var(--u-vw)) - 32px);
}
.toast, .toast--error {
    padding: 9px 18px 8px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    box-shadow: none;
    color: #fff;
    font-weight: 800;
    font-size: .98rem;
    -webkit-text-stroke: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.toast--error { color: #ff9a9a; }
@media (max-width: 640px) { .toasts { top: auto; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 70px); } }

/* Cadenas des boutons verrouillés : glyphe blanc déjà contouré (pas de filtre). */
.build-cta .btn[disabled] .ico { filter: none; color: inherit; font-size: 1.05rem; }

/* Identité : famille (guilde) au-dessus, nom du personnage en ellipse si trop long. */
.hud-id { padding: 5px 16px 5px 5px; border-radius: 999px 18px 18px 999px; max-width: min(260px, calc(46 * var(--u-vw))); }
.hud-id-text { display: grid; min-width: 0; gap: 1px; }
.hud-family { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-stroke: 0; }
.hud-name { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.1rem; }
@media (max-width: 640px) {
    .hud-id { max-width: calc(48 * var(--u-vw)); padding-right: 12px; }
    .hud-name { font-size: .95rem; }
    .hud-family { font-size: .64rem; }
}

/* Identité : nom d'abord, famille dans un badge noir translucide (cliquable à terme). */
.hud-id-text { gap: 3px; }
.hud-family {
    justify-self: start;
    max-width: 100%;
    padding: 2px 8px 1px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .4);
    color: rgba(255, 255, 255, .78);
    line-height: 1.3;
}

/* Île (tour + ville) : centrée sur l'écran en bureau, en bas au centre sur mobile. */
.island { position: absolute; left: 50%; top: max(14px, env(safe-area-inset-top)); translate: -50% 0; }
/* Tablette : en haut au centre ; identité un peu plus étroite pour lui laisser la place. */
@media (min-width: 641px) and (max-width: 900px) {
    .hud-id { max-width: min(240px, calc(34 * var(--u-vw))); }
}
@media (min-width: 641px) and (max-width: 820px) {
    .island-sep, .island-city { display: none; }
    .hud-id { max-width: min(260px, calc(38 * var(--u-vw))); }
}
@media (max-width: 640px) {
    .toasts { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 116px); }
}

/* Fiche d'un bâtiment existant : le sprite flotte doucement (propriété `translate`,
   indépendante du `transform` de la perspective). Pas d'animation dans le shop. */
[data-tilt] { perspective: 520px; }
.sheet-hero[data-tilt] > img { animation: bld-float 3.6s ease-in-out infinite; }
@keyframes bld-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}
@media (prefers-reduced-motion: reduce) { .sheet-hero[data-tilt] > img { animation: none; } }

/* Infobulle des cases (construire / débloquer) : apparition "pop" avec rebond,
   relancée à chaque case. `scale` seul : le `transform` sert au positionnement. */
.map-tip { transform-origin: 0 100%; }
.map-tip.is-in { animation: tip-pop .34s cubic-bezier(.34, 1.7, .5, 1) both; }
@keyframes tip-pop {
    0% { opacity: 0; scale: .4; }
    60% { opacity: 1; }
    100% { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .map-tip.is-in { animation: none; } }

/* Nom du bâtiment survolé : pop depuis sa base (position portée par `translate` en JS). */
.cell-name { transform-origin: 50% 100%; }
.cell-name.is-in { animation: tip-pop .38s cubic-bezier(.34, 1.7, .5, 1) both; }
@media (prefers-reduced-motion: reduce) { .cell-name.is-in { animation: none; } }

/* Nom du bâtiment : taille fixée en JS selon le zoom ; contour et ombre proportionnels. */
.cell-name { -webkit-text-stroke-width: .28em; text-shadow: 0 .16em 0 var(--edge); }

/* Vue Ville (future carte des adversaires) : pas de QG ni de chantiers. */
.is-world .build-timer { display: none; }

/* Fenêtre ouverte (fiche / shop) : légère perspective pilotée par la souris (JS → `rotate`). */
.sheet-wrap { perspective: 1600px; }
.sheet { transition: rotate .7s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .sheet { rotate: none !important; } }

/* Vue Ville : losange du QG cliquable (ouvre la vue QG). */
.hq-pin.is-link { pointer-events: auto; cursor: pointer; }
.hq-pin.is-link::after { pointer-events: none; }
.hq-pin.is-link::before { transition: scale .2s cubic-bezier(.34, 1.56, .64, 1); }
.hq-pin.is-link:hover::before, .hq-pin.is-link:focus-visible::before { scale: 1.2; }
.hq-pin.is-link:focus-visible { outline: none; }

/* Cadre décoratif (souris) : copie vide de la fenêtre, derrière elle, qui seule
   bascule en 3D ; la vraie fenêtre devient transparente et reste à plat (texte net). */
.sheet-wrap .sheet-frame {
    position: absolute;
    z-index: 0;
    margin: 0;
    padding: 0;
    max-height: none;
    overflow: hidden;
    pointer-events: none;
    transition: rotate .7s cubic-bezier(.22, 1, .36, 1);
}
.sheet-wrap.has-frame > .sheet:not(.sheet-frame) {
    z-index: 1;
    background: none;
    border-color: transparent;
    box-shadow: none;
    rotate: none;
}

/* Mobile : compteur de tour aligné sur la rangée des ressources (à gauche),
   sans le nom de la ville. Les deux partagent la 2e rangée de la grille du HUD. */
@media (max-width: 640px) {
    .hud-goods { grid-row: 2; grid-column: 1 / -1; }
    .island {
        position: static;
        grid-row: 2;
        grid-column: 1 / -1;
        justify-self: start;
        align-self: stretch;
        width: 76px;
        min-height: 0;
        padding: 0 8px;
        translate: none;
        border-radius: 14px; /* comme la barre des ressources */
    }
    .island-idle { gap: 0; }
    .island-sep, .island-city { display: none; }
    .toasts { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 70px); }
}
@media (max-width: 640px) {
    .hud-goods { margin-left: 72px; gap: 6px; padding-left: 12px; }
    .island { width: 66px; padding: 0 6px; }
    .island-turn { gap: 4px; }
    .res-buy { flex: none; }
}
@media (max-width: 400px) {
    .res { padding-left: 16px; padding-right: 2px; }
    .res b { font-size: .78rem; }
    .res-ico { font-size: 1.2rem; left: -8px; }
}

/* ==========================================================================
   RESSOURCES — disposition des anciennes versions : pastilles en 3 × 2
   (alcool, herbe, poudre / argent, gemmes), sprite qui déborde à gauche,
   valeur calée à droite, jauge de stock inclinée (stock / capacité).
   La case libre (2e rangée, 1re colonne) accueille le compteur de tour
   jusqu'à 1240 px (sinon il chevaucherait les ressources) ; au-delà il est centré en haut.
   ========================================================================== */
.hud-res { display: block; padding: 0; }
.hud-stock {
    display: grid;
    grid-template-columns: repeat(3, 140px);
    gap: 10px 24px;
    padding-left: 18px;
}
.stock--alcohol { grid-area: 1 / 1; --c: 255, 138, 42; }
.stock--weed    { grid-area: 1 / 2; --c: 168, 211, 79; }
.stock--powder  { grid-area: 1 / 3; --c: 243, 236, 253; }
.stock--cash    { grid-area: 2 / 2; --c: 255, 197, 49; }
.stock--gems    { grid-area: 2 / 3; }
.stock {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 34px;
    padding: 0 10px 0 30px;
    border: var(--edge-w) solid var(--edge);
    border-radius: 10px;
    background: linear-gradient(180deg, #2c1a40, #170d24);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 3px 0 var(--edge), 0 8px 18px rgba(0, 0, 0, .35);
}
.stock-gauge { position: absolute; inset: 0; border-radius: 7px; overflow: hidden; pointer-events: none; }
.stock-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -14px;
    background: rgba(var(--c), .26);
    border-bottom: 3px solid rgba(var(--c), .85);
    transform: skewX(-20deg);
    transform-origin: 0 100%;
}
.stock-fill.f0 { display: none; }
.stock-ico {
    position: absolute;
    left: -18px;
    top: 50%;
    z-index: 2;
    width: 46px;
    height: 46px;
    translate: 0 -50%;
    filter: drop-shadow(0 2px 0 var(--edge));
    pointer-events: none;
}
.stock-val {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
    font-style: italic;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    -webkit-text-stroke: 4px var(--edge);
    paint-order: stroke fill;
}
.stock--gems { padding-right: 34px; }
.stock--gems .res-buy { position: absolute; right: -8px; top: 50%; translate: 0 -50%; margin: 0; z-index: 3; }
.stock--gems .res-buy:hover { transform: scale(1.1); }
.cost-ico { width: 22px; height: 22px; filter: drop-shadow(0 1.5px 0 var(--edge)); }

/* Compteur de tour dans la case libre (mobile + tablette). */
@media (max-width: 1240px) {
    .hud-stock .island {
        position: static;
        grid-area: 2 / 1;
        justify-self: stretch;
        align-self: stretch;
        width: auto;
        min-height: 0;
        height: 34px;
        padding: 0 8px;
        translate: none;
        order: 0;
        border-radius: 10px;
    }
    .island-idle { justify-content: center; gap: 0; }
    .island-sep, .island-city { display: none; }
}
@media (min-width: 641px) and (max-width: 1240px) {
    .hud-stock { grid-template-columns: repeat(3, 124px); gap: 10px 20px; }
}

/* Mobile : identité en 1re rangée, ressources pleine largeur dessous. */
@media (max-width: 640px) {
    .hud { grid-template-columns: minmax(0, 1fr); }
    .hud-id { grid-row: 1; grid-column: 1; justify-self: start; }
    .hud-res { display: block; grid-row: 2; grid-column: 1; }
    .hud-stock { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; padding-left: 12px; }
    .stock { height: 30px; padding: 0 7px 0 22px; border-radius: 9px; }
    .stock-gauge { border-radius: 6px; }
    .stock-ico { width: 38px; height: 38px; left: -14px; }
    .stock-val { font-size: .88rem; -webkit-text-stroke-width: 3px; }
    .stock--gems { padding-right: 26px; }
    .stock--gems .res-buy { width: 24px; height: 24px; right: -6px; }
    .hud-stock .island { height: 30px; border-radius: 9px; }
}
.stock-fill.f1 { width: calc(5% + 14px); }
.stock-fill.f2 { width: calc(10% + 14px); }
.stock-fill.f3 { width: calc(15% + 14px); }
.stock-fill.f4 { width: calc(20% + 14px); }
.stock-fill.f5 { width: calc(25% + 14px); }
.stock-fill.f6 { width: calc(30% + 14px); }
.stock-fill.f7 { width: calc(35% + 14px); }
.stock-fill.f8 { width: calc(40% + 14px); }
.stock-fill.f9 { width: calc(45% + 14px); }
.stock-fill.f10 { width: calc(50% + 14px); }
.stock-fill.f11 { width: calc(55% + 14px); }
.stock-fill.f12 { width: calc(60% + 14px); }
.stock-fill.f13 { width: calc(65% + 14px); }
.stock-fill.f14 { width: calc(70% + 14px); }
.stock-fill.f15 { width: calc(75% + 14px); }
.stock-fill.f16 { width: calc(80% + 14px); }
.stock-fill.f17 { width: calc(85% + 14px); }
.stock-fill.f18 { width: calc(90% + 14px); }
.stock-fill.f19 { width: calc(95% + 14px); }
.stock-fill.f20 { width: calc(100% + 14px); }

/* Identité en bas à gauche à partir de 1000 px (le haut ne garde que les
   ressources et le tour). En dessous, place prise par les onglets : reste en haut. */
@media (min-width: 1000px) {
    .hud-id {
        position: fixed;
        left: clamp(12px, calc(2 * var(--u-vw)), 24px);
        bottom: max(18px, env(safe-area-inset-bottom));
        z-index: 20;
    }
    .hud-res { margin-left: auto; } /* seul dans la barre du haut : reste à droite */
}

/* ==========================================================================
   DOCK DU BAS (toutes tailles) : identité à gauche ; onglets QG / Ville puis
   téléphone à droite, même hauteur. Le haut ne garde que les ressources.
   ========================================================================== */
.world {
    --dock-h: 58px;
    --dock-x: clamp(12px, calc(2 * var(--u-vw)), 24px);
    --dock-b: max(18px, env(safe-area-inset-bottom));
}
.hud-id {
    position: fixed;
    left: var(--dock-x);
    bottom: var(--dock-b);
    z-index: 20;
    max-width: min(300px, calc(calc(100 * var(--u-vw)) - 2 * var(--dock-x) - var(--dock-h) - 330px));
}
.hud-res { margin-left: auto; }
.phone-btn {
    right: var(--dock-x);
    bottom: var(--dock-b);
    width: var(--dock-h);
    height: var(--dock-h);
}
.viewswitch {
    left: auto;
    right: calc(var(--dock-x) + var(--dock-h) + 10px);
    bottom: var(--dock-b);
    translate: none;
    height: var(--dock-h);
    align-items: stretch;
}
.viewswitch button { min-height: 0; height: 100%; }

/* Mobile : onglets en pictos seuls, dock plus compact. */
@media (max-width: 640px) {
    .world { --dock-h: 52px; --dock-x: 10px; }
    .hud-id { max-width: calc(calc(100 * var(--u-vw)) - 2 * var(--dock-x) - var(--dock-h) - 130px); }
    .viewswitch { right: calc(var(--dock-x) + var(--dock-h) + 8px); }
    .viewswitch button { padding: 0 14px; }
    .hud-res { grid-row: 1; }
}
/* Bureau (≥ 1000 px) : onglets QG / Ville centrés ; collés au téléphone en dessous. */
@media (min-width: 1000px) {
    .viewswitch { left: 50%; right: auto; translate: -50% 0; }
    .hud-id { max-width: min(300px, calc(calc(50 * var(--u-vw)) - 190px)); }
}

/* Zoom élastique entre les vues : pastille qui se remplit pendant qu'on insiste. */
.zoom-pull {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    display: grid;
    gap: 6px;
    min-width: 170px;
    padding: 10px 16px 9px;
    translate: -50% -50%;
    scale: calc(.9 + var(--p, 0) * .1);
    opacity: calc(.4 + var(--p, 0) * .6);
    border: var(--edge-w) solid var(--edge);
    border-radius: 14px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-text-stroke: 4px var(--edge);
    paint-order: stroke fill;
    pointer-events: none;
}
.zoom-pull i {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffc531 calc(var(--p, 0) * 100%), rgba(255, 255, 255, .15) 0);
}
.maplibregl-canvas-container { transform-origin: 50% 50%; }

/* CTA principaux : dégradé rouge / orange (celui du téléphone) en radial, dont le
   centre suit légèrement la souris (--mx / --my posés en JS, transition douce
   grâce à @property). */
@property --mx { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --my { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
.game .btn-hot,
.game .btn-hot:hover {
    background: radial-gradient(130% 160% at var(--mx) var(--my), #ffc04d 0%, #ff8a2a 28%, #ff5a5f 60%, #ff2e6e 100%);
    transition: --mx .45s cubic-bezier(.22, 1, .36, 1), --my .45s cubic-bezier(.22, 1, .36, 1), transform .2s, filter .2s;
}
.game .btn-hot:hover { filter: brightness(1.06) saturate(1.05); }
/* Zoom élastique : barre seule (sans texte). */
.zoom-pull { min-width: 0; width: 150px; padding: 8px; border-radius: 999px; }
.zoom-pull i { height: 8px; }

/* Palette unique rouge / orange (celle du téléphone) pour tous les CTA et les
   étiquettes : titres de fenêtre, nom de Carla, onglet actif, pastille des
   onglets, flèches du carrousel, infobulle « Construire ici ». */
.game {
    --sun-btn: radial-gradient(130% 160% at 50% 35%, #ffc04d 0%, #ff8a2a 28%, #ff5a5f 60%, #ff2e6e 100%);
    --sun-btn-hover: radial-gradient(130% 160% at 50% 35%, #ffcc66 0%, #ff9a3c 28%, #ff6a6a 60%, #ff3f7c 100%);
}
.map-tip[data-kind="free"] { background: var(--sun-btn); }

/* Dégradé du téléphone (linéaire : rouge-rose en haut à gauche → or en bas à
   droite) pour tous les CTA et étiquettes. Sur les CTA principaux, la souris
   décale légèrement le dégradé (background-position via --mx / --my). */
.game {
    --sun-btn: linear-gradient(115deg, #ff2e88 0%, #ff5a5f 34%, #ff8a2a 68%, #ffc531 100%);
    --sun-btn-hover: linear-gradient(115deg, #ff4a98 0%, #ff6a6a 34%, #ff9a3c 68%, #ffd04d 100%);
}
.game .btn-hot,
.game .btn-hot:hover {
    background: var(--sun-btn);
    background-size: 150% 150%;
    background-position: var(--mx) var(--my);
}
.game .btn-hot:hover { filter: brightness(1.05); }

/* Palette commune un peu moins rouge (téléphone, CTA, étiquettes, onglets…). */
.game {
    --cta: linear-gradient(115deg, #ff4f7e 0%, #ff7352 28%, #ff9a2e 62%, #ffc531 100%);
    --sun-btn: var(--cta);
    --sun-btn-hover: linear-gradient(115deg, #ff6290 0%, #ff8462 28%, #ffa940 62%, #ffd04d 100%);
}
/* Éléments en dégradé survolables : le dégradé (taille 150 %) suit la souris. */
.game .btn-hot,
.game .btn-hot:hover,
.phone-btn:hover,
.carousel-nav {
    background-size: 150% 150%;
    background-position: var(--mx) var(--my);
    transition: --mx .45s cubic-bezier(.22, 1, .36, 1), --my .45s cubic-bezier(.22, 1, .36, 1), transform .2s, filter .2s;
}
.phone-btn:hover { background-image: var(--cta); }

/* Fenêtres : marges intérieures confortables autour du contenu. */
.sheet { padding: 30px 28px 26px; }
/* Shop : espace réduit entre l'étiquette et les cartes (les bâtiments débordent
   dans la marge haute du carrousel, d'où la marge négative). */
.carousel { margin-top: -80px; }
@media (max-width: 640px) { .carousel { margin-top: -60px; } }

/* Mobile en paysage interdit : écran plein « tourne ton téléphone ».
   Seulement au doigt et en faible hauteur (un ordinateur n'est jamais bloqué). */
.rotate-lock { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .rotate-lock {
        position: fixed;
        inset: 0;
        z-index: 500;
        display: grid;
        place-content: center;
        justify-items: center;
        gap: 10px;
        padding: 24px;
        background: radial-gradient(circle at 50% 40%, #2c1640, var(--ink, #0b0614) 70%);
        color: #fff;
        text-align: center;
        user-select: none;
    }
    .rotate-lock-ico { font-size: 64px; color: #fff; filter: drop-shadow(0 3px 0 var(--edge)); animation: rotate-hint 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
    .rotate-lock-title { font-size: 1.6rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 5px var(--edge); paint-order: stroke fill; }
    .rotate-lock p { margin: 0; color: var(--muted); font-weight: 700; }
}
@keyframes rotate-hint { 0%, 20% { rotate: -90deg; } 50%, 80% { rotate: 0deg; } 100% { rotate: -90deg; } }
@media (prefers-reduced-motion: reduce) { .rotate-lock-ico { animation: none; } }
@media (max-width: 640px) { .sheet { padding-bottom: max(18px, env(safe-area-inset-bottom)); } }

/* Mobile : dock homogène — identité, onglets et téléphone à la même hauteur,
   alignés sur la même ligne de base, mêmes arrondis. */
@media (max-width: 640px) {
    .world { --dock-h: 56px; }
    .hud-id {
        height: var(--dock-h);
        padding: 0 12px 0 5px;
        align-items: center;
    }
    .hud-avatar-wrap { width: 44px; height: 44px; }
    .hud-avatar-wrap .hud-avatar { width: 34px; height: 34px; }
    .viewswitch, .phone-btn { border-radius: 16px; }
    .viewswitch button { border-radius: 12px; }
    .hud-name { font-size: .92rem; }
}
/* Bloc identité : demi-cercle à gauche (avatar), petit arrondi à droite — toutes tailles.
   Pas de 999px à gauche : quand des rayons dépassent la hauteur, le navigateur
   réduit TOUS les rayons du même facteur et l'arrondi de droite disparaissait. */
.hud-id { border-radius: 40px 14px 14px 40px; }

/* ==========================================================================
   ÉQUIPE : pastilles troupes / filles / narcos au-dessus de l'avatar.
   Un clic ouvre l'embauche ; les troupes affichent leur vie globale.
   ========================================================================== */
.crew {
    position: fixed;
    left: var(--dock-x);
    bottom: calc(var(--dock-b) + 88px);
    z-index: 20;
    display: flex;
    gap: 8px;
}
.crew-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 12px 0 3px;
    border: var(--edge-w) solid var(--edge);
    border-radius: 21px 12px 12px 21px;
    background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 3px 0 var(--edge), 0 8px 18px rgba(0, 0, 0, .35);
    color: #fff;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.crew-pill:hover { transform: translateY(-2px); }
.crew-pill:active { transform: scale(.95); }
.crew-ico { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--edge); background: #1a0d22; }
.crew-n { display: flex; align-items: baseline; gap: 1px; font-variant-numeric: tabular-nums; }
.crew-n b { font-size: 1.05rem; font-weight: 900; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.crew-n small { color: var(--muted); font-size: .75rem; font-weight: 800; }
.crew-pill--troops { padding-bottom: 6px; }
.crew-hp {
    position: absolute;
    left: 40px;
    right: 10px;
    bottom: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    overflow: hidden;
}
.crew-hp i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #8df27c, #3fbf4f); }
.crew-hp.is-mid i { background: linear-gradient(180deg, #ffd06b, #f59b1b); }
.crew-hp.is-low i { background: linear-gradient(180deg, #ff7a7a, #e2283c); }
.crew-hp--wide { position: relative; left: auto; right: auto; bottom: auto; display: inline-block; width: min(220px, calc(40 * var(--u-vw))); height: 9px; }
.unit-hp { gap: 10px; }
.unit-hp b { font-variant-numeric: tabular-nums; }

/* Cartes d'unités : portrait, coût, sélecteur de quantité. */
.unit-img {
    display: grid;
    place-items: end center;
    height: 150px;
    overflow: hidden;
    border-radius: 14px;
    background: radial-gradient(closest-side at 50% 80%, rgba(255, 138, 42, .3), transparent), linear-gradient(180deg, #2a1640, #160b24);
}
.unit-img img { height: 100%; width: auto; max-width: 100%; object-fit: contain; pointer-events: none; }
.unit-cost { margin-top: 4px; }
.unit-cta { display: grid; gap: 8px; }
.qty { display: flex; align-items: center; justify-content: center; gap: 6px; }
.qty input {
    width: 64px;
    height: 36px;
    border: 2px solid var(--edge);
    border-radius: 10px;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
    user-select: text;
}
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn, .qty-max {
    display: grid;
    place-items: center;
    height: 36px;
    border: 2px solid var(--edge);
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
}
.qty-btn { width: 36px; }
.qty-btn .ico { font-size: 18px; }
.qty-max { padding: 0 10px; font: inherit; font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.qty-btn:hover, .qty-max:hover { background: rgba(255, 255, 255, .16); }

/* Mobile : pastilles juste au-dessus du dock. */
@media (max-width: 640px) {
    .crew { bottom: calc(var(--dock-b) + var(--dock-h) + 10px); gap: 6px; }
    .crew-pill { height: 38px; padding-right: 9px; }
    .crew-ico { width: 28px; height: 28px; }
    .crew-hp { left: 36px; }
}
.crew-hp .hp-0 { width: 0%; }
.crew-hp .hp-1 { width: 5%; }
.crew-hp .hp-2 { width: 10%; }
.crew-hp .hp-3 { width: 15%; }
.crew-hp .hp-4 { width: 20%; }
.crew-hp .hp-5 { width: 25%; }
.crew-hp .hp-6 { width: 30%; }
.crew-hp .hp-7 { width: 35%; }
.crew-hp .hp-8 { width: 40%; }
.crew-hp .hp-9 { width: 45%; }
.crew-hp .hp-10 { width: 50%; }
.crew-hp .hp-11 { width: 55%; }
.crew-hp .hp-12 { width: 60%; }
.crew-hp .hp-13 { width: 65%; }
.crew-hp .hp-14 { width: 70%; }
.crew-hp .hp-15 { width: 75%; }
.crew-hp .hp-16 { width: 80%; }
.crew-hp .hp-17 { width: 85%; }
.crew-hp .hp-18 { width: 90%; }
.crew-hp .hp-19 { width: 95%; }
.crew-hp .hp-20 { width: 100%; }

/* Équipe empilée à la verticale (troupes, filles, narcos), même largeur et même
   hauteur ; la barre de vie des troupes se loge sous le chiffre sans décaler. */
.crew { display: grid; grid-auto-rows: 42px; gap: 8px; justify-items: stretch; }
.crew-pill { height: 42px; padding-bottom: 0; }
.crew-pill--troops { padding-bottom: 0; }
.crew-pill--troops .crew-n { translate: 0 -3px; }
.crew-pill--troops:not(:has(.crew-hp)) .crew-n { translate: none; } /* aucune troupe : pas de barre, nombre centré */
@media (max-width: 640px) {
    .crew { grid-auto-rows: 38px; gap: 6px; }
    .crew-pill { height: 38px; }
}

/* ==========================================================================
   MON ÉQUIPE / RECRUTEMENT — avatars, infos lisibles, encart d'embauche
   ========================================================================== */
/* Avatar : disque coloré, portrait détouré dont la tête dépasse du cercle. */
.unit-ava {
    position: relative;
    display: grid;
    place-items: end center;
    width: 120px;
    height: 140px;
    margin: 0 auto;
}
.unit-ava::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    border: 3px solid var(--edge);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #ff9a5a, #c2335f 60%, #4a1840);
    box-shadow: 0 4px 0 var(--edge), 0 10px 22px rgba(0, 0, 0, .45);
}
.unit-ava img { position: relative; width: 120px; height: 140px; object-fit: contain; pointer-events: none; }
.unit-ava.is-group img { width: 114px; height: 114px; margin-bottom: 3px; border-radius: 50%; object-fit: cover; }
.unit-card.is-locked .unit-ava { filter: grayscale(1) brightness(.65); }

.unit-card .build-body h3 { margin-top: 10px; font-size: 1.15rem; }
.unit-qty { margin: -2px 0 8px; min-height: 1.2em; color: var(--sun); font-weight: 900; font-size: 1rem; }

/* Infos en tableau : libellé à gauche, valeur à droite, bien contrastées. */
.unit-stats { display: grid; gap: 4px; margin: 0 0 10px; }
.unit-stats > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .3);
}
.unit-stats dt { display: flex; align-items: center; gap: 7px; color: #d9cbea; font-size: .88rem; font-weight: 700; }
.unit-stats dt .ico { font-size: 1rem; color: #fff; }
.unit-stats dd { margin: 0; color: #fff; font-size: .95rem; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unit-stats .is-bad dd, .unit-stats .is-bad dt .ico { color: #ff6b7a; }
.stat-ico { width: 20px; height: 20px; }

/* Coût : pastilles ressource + montant, grandes et lisibles. */
.unit-cost { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.unit-cost li { display: flex; align-items: center; gap: 4px; padding: 3px 9px 3px 4px; border-radius: 999px; background: rgba(0, 0, 0, .35); }
.unit-cost li b { font-size: .95rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.unit-cost li.is-bad b { color: #ff6b7a; }
.unit-cost .cost-ico { width: 24px; height: 24px; }

/* En-tête des fenêtres d'équipe : titre, places, vie, bouton Recruter. */
.sheet-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 4px; padding-right: 48px; }
.sheet-head .sheet-title, .sheet-head .sheet-slots { margin: 0; }
.crew-recruit { margin-left: auto; }
.sheet-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 6px -6px;
    padding: 4px 10px 4px 4px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--sun);
    font: inherit;
    font-size: .85rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}
.sheet-back:hover { background: rgba(255, 255, 255, .08); }
.sheet-back .ico { font-size: 1.1rem; }

.crew-empty { display: grid; justify-items: center; gap: 10px; padding: 40px 10px; color: var(--muted); font-weight: 700; text-align: center; }
.crew-empty img { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--edge); }

/* Emplacements d'équipement des troupes (mécanique à venir). */
.unit-gear-title { margin: 4px 0 6px; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.unit-gear { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.unit-gear li {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 8px 4px 6px;
    border: 2px dashed rgba(255, 255, 255, .18);
    border-radius: 12px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
}
.unit-gear .ico { font-size: 1.1rem; }

/* Encart d'embauche par-dessus le recrutement. */
.hire-pop { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; }
.hire-pop[hidden] { display: none; }
.hire-pop-backdrop { position: absolute; inset: 0; border-radius: inherit; background: rgba(8, 4, 16, .7); }
.hire-pop-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    width: min(340px, 100%);
    padding: 22px 20px 20px;
    border: var(--edge-w) solid var(--edge);
    border-radius: 22px;
    background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), var(--pop), 0 20px 40px rgba(0, 0, 0, .5);
}
.hire-pop-name { margin: 0; font-size: 1.4rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 5px var(--edge); paint-order: stroke fill; }
.hire-pop-form { display: grid; justify-items: center; gap: 10px; width: 100%; }
.hire-pop-label { margin: 4px 0 0; color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.hire-pop .qty input { width: 80px; height: 44px; font-size: 1.3rem; }
.hire-pop .qty-btn, .hire-pop .qty-max { height: 44px; }
.hire-pop .qty-btn { width: 44px; }

/* Pastilles d'équipe un peu plus grandes. */
.crew { grid-auto-rows: 48px; }
.crew-pill { height: 48px; padding-right: 14px; border-radius: 24px 13px 13px 24px; }
.crew-ico { width: 38px; height: 38px; }
.crew-n b { font-size: 1.2rem; }
.crew-n small { font-size: .82rem; }
.crew-hp { left: 46px; height: 6px; }
.crew { bottom: calc(var(--dock-b) + 90px); }
@media (max-width: 640px) {
    .crew { grid-auto-rows: 42px; bottom: calc(var(--dock-b) + var(--dock-h) + 10px); }
    .crew-pill { height: 42px; }
    .crew-ico { width: 32px; height: 32px; }
    .crew-hp { left: 40px; }
    .sheet-head { padding-right: 44px; }
    .crew-recruit { margin-left: 0; }
}
/* Pastille filles / narcos : petit badge rouge s'il y a des arrêtés. */
.crew-jail {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border: 2px solid var(--edge);
    border-radius: 999px;
    background: #e2283c;
    color: #fff;
    font-size: .75rem;
    font-weight: 900;
}

/* Corrections après parcours joueur. */
/* Jauge de vie large (fenêtres d'équipe) : pas d'héritage du décalage des pastilles. */
.sheet .crew-hp--wide { position: relative; left: auto; right: auto; bottom: auto; width: min(180px, calc(30 * var(--u-vw))); height: 9px; }
/* « Recruter » toujours en haut à droite, à côté de la croix (ne passe plus à la ligne). */
@media (min-width: 641px) {
    [data-view-root="crew"] .sheet-head { padding-right: 230px; }
    [data-view-root="crew"] .crew-recruit { position: absolute; top: 24px; right: 76px; margin: 0; }
}
/* Peu d'unités : cartes centrées plutôt que collées à gauche. */
[data-view-root="crew"] .build-list { justify-content: safe center; }
/* Le carrousel remonte sous l'en-tête (marge négative) : boutons d'en-tête au premier plan. */
.sheet-head, .sheet-back, .crew-recruit { position: relative; z-index: 3; }
@media (min-width: 641px) { [data-view-root="crew"] .crew-recruit { position: absolute; } }
/* Fenêtres larges : jamais de contenu qui déborde sous le cadre. La fenêtre
   grandit avec son contenu et c'est le fond qui défile si l'écran est trop bas. */
@media (min-width: 641px) {
    .sheet-wrap { overflow-y: auto; place-items: safe center; padding: 76px 16px 96px; }
    .sheet--wide { max-height: none; }
}

/* Cartes d'emplacement libre (« Mon équipe ») : pointillés + grand « + ». */
.unit-slot { padding: 0; border-style: dashed; background: rgba(255, 255, 255, .03); box-shadow: none; }
.unit-slot-btn {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: 300px;
    padding: 20px;
    border: 0;
    border-radius: inherit;
    background: none;
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition: background .2s;
}
.unit-slot-btn:hover { background: rgba(255, 255, 255, .06); }
.unit-slot-plus {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border: 3px solid var(--edge);
    border-radius: 50%;
    background: var(--sun-btn);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--edge), 0 10px 22px rgba(0, 0, 0, .4);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.unit-slot-btn:hover .unit-slot-plus { transform: scale(1.08) rotate(90deg); }
.unit-slot-plus .ico { font-size: 34px; }
.unit-slot-btn strong { font-size: 1.15rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; }
.unit-slot-btn small { color: var(--muted); font-size: .85rem; font-weight: 700; }
[data-view-root="crew"] .sheet-head { padding-right: 48px; }

/* Filtre des narcos par production. */
.unit-filter { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.unit-filter button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 12px;
    border: 2px solid var(--edge);
    border-radius: 999px;
    background: rgba(0, 0, 0, .3);
    color: #d9cbea;
    font: inherit;
    font-size: .85rem;
    font-weight: 800;
    cursor: pointer;
}
.unit-filter button.is-on { background: var(--sun-btn); color: #fff; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.unit-filter .cost-ico { width: 22px; height: 22px; }
.unit-card[hidden] { display: none; }
/* Survol d'un emplacement libre : seul le « + » tourne, le cercle grossit à peine. */
.unit-slot-btn:hover .unit-slot-plus { transform: scale(1.06); }
.unit-slot-plus .ico { transition: rotate .35s cubic-bezier(.34, 1.56, .64, 1); }
.unit-slot-btn:hover .unit-slot-plus .ico { rotate: 90deg; }

/* Fenêtres d'équipe : pas de carrousel qui remonte sous l'en-tête (réservé aux
   sprites de bâtiments), vraie marge, et cartes compactes pour tenir à l'écran. */
[data-view-root="units"] .carousel, [data-view-root="crew"] .carousel { margin-top: 14px; }
[data-view-root="units"] .build-list, [data-view-root="crew"] .build-list { padding-top: 18px; }
.unit-card { padding: 12px 12px 14px; }
.unit-ava { width: 96px; height: 112px; }
.unit-ava::before { height: 96px; border-width: 3px; }
.unit-ava img { width: 96px; height: 112px; }
.unit-ava.is-group img { width: 90px; height: 90px; }
.unit-card .build-body h3 { margin: 6px 0 0; font-size: 1.05rem; }
.unit-qty { margin: 0 0 6px; font-size: .9rem; }
.unit-stats { gap: 3px; margin-bottom: 8px; }
.unit-stats > div { padding: 4px 9px; border-radius: 8px; }
.unit-stats dt { font-size: .82rem; }
.unit-stats dd { font-size: .9rem; }
.unit-cost { gap: 4px; }
.unit-cost li { padding: 2px 8px 2px 3px; }
.unit-cost .cost-ico { width: 22px; height: 22px; }
.unit-card .build-cta { margin-top: 10px; }
.unit-gear-title { margin: 2px 0 4px; }
.unit-gear li { padding: 5px 4px 4px; }
.unit-slot-btn { min-height: 230px; }
.unit-slot-plus { width: 64px; height: 64px; }
.unit-slot-plus .ico { font-size: 28px; }
/* Cartes d'unités : pas de hauteurs minimales héritées des cartes de bâtiments. */
.unit-card .build-body p, .unit-card .build-body h3 { min-height: 0; }
.unit-card { min-height: 0; }
.unit-qty:empty, .unit-qty.is-empty { display: none; }
/* Mobile : filtre en pictos seuls (une seule ligne). */
@media (max-width: 640px) {
    .unit-filter button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .unit-filter button { padding: 0 10px; }
}

/* Fenêtres ouvertes : les ressources (et le tour) restent AU-DESSUS du voile pour
   qu'on voie son stock en recrutant / construisant. Le HUD ne crée plus de
   contexte d'empilement ; les pastilles passent au-dessus de #layer (z 40). */
.hud { z-index: auto; }
.hud-stock .stock, .hud-stock .island { z-index: 45; }
.hud-id { z-index: 20; }
@media (min-width: 641px) { .sheet-wrap { padding-top: 112px; } }
/* Maintien du doigt sur ± : pas de menu contextuel ni de sélection. */
.qty-btn { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* « + » d'achat de gemmes : vrai CTA (dégradé des boutons, tranche 3D), plus gros. */
.stock--gems { padding-right: 44px; }
.stock--gems .res-buy {
    right: -10px;
    width: 38px;
    height: 38px;
    border: 3px solid var(--edge);
    border-radius: 12px;
    background: var(--sun-btn);
    background-size: 150% 150%;
    background-position: var(--mx) var(--my);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--edge), 0 6px 14px rgba(0, 0, 0, .4);
    transition: --mx .45s cubic-bezier(.22, 1, .36, 1), --my .45s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.34, 1.56, .64, 1), filter .2s;
}
.stock--gems .res-buy .ico { font-size: 22px; }
.stock--gems .res-buy:hover { transform: scale(1.1); filter: brightness(1.06); }
.stock--gems .res-buy:active { transform: scale(.94); }
@media (max-width: 640px) {
    .stock--gems { padding-right: 34px; }
    .stock--gems .res-buy { width: 32px; height: 32px; right: -8px; border-radius: 10px; }
    .stock--gems .res-buy .ico { font-size: 18px; }
}

/* Stats des unités en 2 colonnes (picto + valeur) ; libellé en bulle au survol,
   au focus clavier ou au toucher (classe .is-tip posée en JS). */
.unit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.unit-stats > div { position: relative; padding: 5px 8px; gap: 6px; cursor: help; outline: none; }
.unit-stats .stat-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.unit-stats dt .ico, .unit-stats dt .stat-ico { font-size: 1.05rem; width: 20px; height: 20px; }
.unit-stats dd { font-size: .92rem; }
.unit-stats > div::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    z-index: 5;
    padding: 4px 9px 3px;
    border: 2px solid var(--edge);
    border-radius: 8px;
    background: #1a0d22;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    translate: -50% 4px;
    transition: opacity .15s, translate .15s;
}
.unit-stats > div:hover::after, .unit-stats > div:focus-visible::after, .unit-stats > div.is-tip::after { opacity: 1; translate: -50% 0; }
/* Petite marge entre le titre et le filtre des narcos. */
.unit-filter { margin-top: 12px; }

/* Carrousels : glisser géré en JS (souris + doigt), vertical laissé au navigateur. */
.carousel, .build-list { touch-action: pan-y; }
.build-list { scroll-snap-type: none; overscroll-behavior-x: contain; }
@media (pointer: fine) { .carousel { cursor: grab; } .build-list.is-dragging, .build-list.is-dragging * { cursor: grabbing; } }
.carousel .btn, .carousel button, .carousel [data-tip] { cursor: pointer; }
/* Élastique / rebond du carrousel : seules les cartes bougent, rognées par la liste. */
.build-list > li { translate: var(--over, 0px) 0; }

/* Carrousels de bord à bord : la liste occupe toute la largeur de la fenêtre,
   seules la première et la dernière carte gardent une marge (padding de la liste). */
.sheet--wide { --sheet-pad: 28px; }
.sheet--wide .carousel { margin-left: calc(var(--sheet-pad) * -1); margin-right: calc(var(--sheet-pad) * -1); }
.sheet--wide .build-list { padding-left: var(--sheet-pad); padding-right: var(--sheet-pad); scroll-padding-inline: var(--sheet-pad); }
.sheet--wide .carousel-nav--prev { left: 10px; }
.sheet--wide .carousel-nav--next { right: 10px; }

/* Cartes de recrutement : le coût est séparé des stats — bandeau « prix » collé
   au bouton, sur une seule ligne, sans pastilles (les stats gardent leurs cases). */
.unit-card .build-body { display: flex; flex-direction: column; flex: 1; }
.unit-card .unit-cost {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    padding: 8px 6px 0;
    border-top: 2px dashed rgba(255, 255, 255, .12);
}
.unit-card .unit-cost li { gap: 3px; padding: 0; background: none; }
.unit-card .unit-cost .cost-ico { width: 20px; height: 20px; }
.unit-card .unit-cost li b { font-size: .9rem; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.unit-card .unit-cost li.is-bad b { color: #ff6b7a; }
.unit-card .build-cta { margin-top: 8px; }
.unit-stats { margin-bottom: 10px; }
/* L'encart garde le coût total en pastilles (lisible en grand). */
.hire-pop-total { flex-wrap: wrap; border: 0; padding: 0; }

/* Nombre possédé : pastille en haut à droite de la carte. */
.unit-card { position: relative; }
.card-owned {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    min-width: 34px;
    padding: 3px 9px 2px;
    border: 2px solid var(--edge);
    border-radius: 999px;
    background: var(--sun-btn);
    color: #fff;
    font-size: .9rem;
    font-weight: 900;
    text-align: center;
    -webkit-text-stroke: 3px var(--edge);
    paint-order: stroke fill;
    box-shadow: 0 2px 0 var(--edge);
}
/* Prix dans le bouton (recrutement + bâtiments). */
.btn-price { gap: 0; }
.btn-cost { display: inline-flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 9px; }
.btn-cost .cost-item { display: inline-flex; align-items: center; gap: 3px; }
.btn-cost .cost-ico { width: 22px; height: 22px; filter: drop-shadow(0 1.5px 0 var(--edge)); }
.btn-cost b { font-size: 1rem; }
.btn-price[disabled] .cost-item.is-bad b { color: #ff8a95; }
.btn-price[disabled] { filter: grayscale(.6) brightness(.8); }
/* Encart d'embauche : total en pastilles. */
.hire-pop-total { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hire-pop-total .cost-item { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 999px; background: rgba(0, 0, 0, .35); }
.hire-pop-total .cost-item b { font-size: 1rem; font-weight: 900; }
.hire-pop-total .cost-item.is-bad b { color: #ff6b7a; }
.hire-pop-total .cost-ico { width: 24px; height: 24px; }
/* Prix dans un bouton désactivé (fonds insuffisants) : pas de gris total, on garde
   les montants lisibles et les manquants bien rouges. */
.game .build-cta .btn.btn-price[disabled] { filter: none; background: linear-gradient(180deg, #5b4a6e, #3b2d4c); font-size: 1rem; }
.game .build-cta .btn.btn-price[disabled]:has(.btn-cost) { color: #e8ddf5; }
.game .btn.btn-price .btn-cost { gap: 12px; }
.game .btn.btn-price .cost-item { gap: 4px; }
.game .btn.btn-price .cost-item.is-bad b { color: #ff5c6c; }
.game .build-cta .btn.btn-price[disabled]:not(:has(.btn-cost)) { filter: grayscale(1) brightness(.75); }
/* 4 ressources (troupes) : tout doit tenir dans le bouton sans se tasser. */
.game .btn.btn-price:has(.cost-item:nth-child(3)) { padding-left: 8px; padding-right: 8px; }
.game .btn.btn-price .btn-cost:has(.cost-item:nth-child(3)) { gap: 8px; }
.game .btn.btn-price .btn-cost:has(.cost-item:nth-child(3)) .cost-item { gap: 2px; }
.game .btn.btn-price .btn-cost:has(.cost-item:nth-child(3)) .cost-ico { width: 18px; height: 18px; }
.game .btn.btn-price .btn-cost:has(.cost-item:nth-child(3)) b { font-size: .88rem; -webkit-text-stroke-width: 3px; }
/* Bouton prix : petit libellé d'action au-dessus du coût. */
.game .btn.btn-price:has(.btn-label) { flex-direction: column; gap: 1px; padding-top: 5px; padding-bottom: 6px; line-height: 1.05; }
.btn-price .btn-label { font-size: .68rem; font-weight: 900; text-transform: uppercase; opacity: .92; -webkit-text-stroke-width: 2.5px; }
/* Champ quantité : focus serré (bordure dorée), pas de contour décalé. */
.qty input:focus, .qty input:focus-visible { outline: none; border-color: #ffc531; box-shadow: inset 0 0 0 1px #ffc531; }
/* Cartes des shops un peu plus larges. */
.build-card { flex-basis: 248px; }
@media (max-width: 640px) { .build-card { flex-basis: 78%; } }
/* Boutons prix sur 2 lignes : un peu plus d'air autour du libellé. */
.game .btn.btn-price:has(.btn-label) { gap: 3px; padding-top: 9px; padding-bottom: 9px; }

/* Boutons désactivés aussi sur 2 lignes (même hauteur que les boutons prix). */
.game .btn.btn-price:has(.btn-reason) { flex-direction: column; gap: 3px; padding-top: 9px; padding-bottom: 9px; line-height: 1.05; }
.btn-reason { display: inline-flex; align-items: center; gap: 5px; font-size: .95rem; }
.btn-reason .ico { font-size: 1rem; }

/* Pas encore débloqué : visuel pixelisé + infos remplacées par un cadenas. */
.is-secret .unit-ava img, .is-secret .build-img { filter: url(#pixelate) grayscale(1) brightness(.55); }
.is-secret .unit-ava::before { filter: grayscale(1) brightness(.5); }
.is-secret .build-img-wrap[data-tilt] > .build-img { animation: none; }
.locked-info {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-height: 84px;
    margin: 4px 0 8px;
    padding: 10px;
    border: 2px dashed rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .25) 0 8px, rgba(0, 0, 0, .12) 8px 16px);
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
}
.locked-info .ico { font-size: 30px; }
/* Bâtiments verrouillés : pixelisé aussi (prime sur le gris des cartes is-locked). */
.build-card.is-secret .build-img-wrap .build-img { filter: url(#pixelate) grayscale(1) brightness(.55); }
/* Shops : 4 cartes (248 px) + gouttières + marges de bord tiennent en entier. */
.sheet--wide { width: min(1120px, 100%); }
/* Bâtiments verrouillés : flou fort (le filtre SVG pixelisé ne gère pas les grands
   sprites mis à l'échelle — le casino disparaissait). */
.build-card.is-secret .build-img-wrap .build-img { filter: grayscale(1) brightness(.5) blur(16px); }
/* Stats : un peu d'air autour, valeurs moins grasses. */
.unit-stats { margin: 8px 4px 12px; gap: 6px; }
.unit-stats > div { padding: 6px 10px; }
.unit-stats dd { font-weight: 700; -webkit-text-stroke: 0; }
/* Boutons 2 lignes : hauteur identique actifs / désactivés, un peu moins d'air en bas. */
.game .build-cta .btn.btn-price { height: 54px; min-height: 54px; padding-top: 8px; padding-bottom: 6px; justify-content: center; font-size: 1rem; }
.game .build-cta .btn.btn-price .btn-cost, .game .build-cta .btn.btn-price .btn-reason { height: 22px; }
/* Pixelisé (JS pixelate()) pour unités ET bâtiments verrouillés, plus de flou / filtre SVG. */
.is-secret .unit-ava img, .build-card.is-secret .build-img-wrap .build-img { filter: grayscale(1) brightness(.55); image-rendering: pixelated; }
/* Bloc « bloqué » : titre + niveau requis, occupe la place du bouton absent. */
.locked-info { min-height: 110px; text-transform: none; }
.locked-info strong { color: #fff; font-size: .95rem; font-weight: 900; text-transform: uppercase; }
.locked-info span { display: grid; gap: 2px; justify-items: center; }
/* Carte bloquée : le bloc cadenas se cale en bas de la carte (à la place du bouton). */
.build-card.is-secret .build-body { display: flex; flex-direction: column; flex: 1; }
.build-card.is-secret .locked-info { margin-top: auto; margin-bottom: 0; }

/* Stats : texte un peu plus petit, pictos en couleur avec contour sombre (style HUD). */
.unit-stats dd { font-size: .84rem; }
.unit-stats dt .ico { font-size: 1.15rem; filter: drop-shadow(0 1.5px 0 var(--edge)) drop-shadow(0 0 1px var(--edge)); }
.unit-stats .st-hp { color: #ff4d6a; }
.unit-stats .st-dmg { color: #ff9a2e; }
.unit-stats .st-crit { color: #ffd23f; }
.unit-stats .st-rip { color: #4fd8ff; }
.unit-stats .st-risk { color: #b9a6ff; }
.unit-stats .st-time { color: #9fe870; }
.unit-stats .is-bad .st-risk { color: #ff6b7a; }
.is-secret .unit-stats .ico { filter: grayscale(1); }

/* Pictos colorés des stats : priment sur le blanc par défaut. */
.unit-stats dt .ico.st-hp, .crew-yield .st-hp { color: #ff4d6a; }
.unit-stats dt .ico.st-dmg { color: #ff9a2e; }
.unit-stats dt .ico.st-crit { color: #ffd23f; }
.unit-stats dt .ico.st-rip { color: #4fd8ff; }
.unit-stats dt .ico.st-risk { color: #b9a6ff; }
.unit-stats dt .ico.st-time { color: #9fe870; }
.unit-stats dt img, .stat-ico { flex: none; }
.unit-stats:not(:has(div)) { display: none; }

/* « Mon équipe » : bloc de rendement (production ou vie cumulée) + répartition. */
.crew-yield {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 4px 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 197, 49, .12), rgba(255, 197, 49, .04));
    box-shadow: inset 0 0 0 1px rgba(255, 197, 49, .2);
    text-align: left;
}
.crew-yield-ico { flex: none; width: 34px; height: 34px; font-size: 30px; filter: drop-shadow(0 2px 0 var(--edge)); }
.crew-yield strong { display: block; font-size: 1.15rem; font-weight: 900; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.crew-yield small { display: block; color: var(--muted); font-size: .75rem; font-weight: 700; }
.crew-split { margin: 2px 4px 4px; }
.crew-split-bar { height: 8px; border-radius: 999px; background: #e2283c; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4); }
.crew-split-bar i { display: block; height: 100%; background: linear-gradient(180deg, #8df27c, #3fbf4f); }
.crew-split-legend { display: flex; justify-content: space-between; gap: 6px; margin-top: 5px; font-size: .74rem; font-weight: 800; color: var(--muted); }
.crew-split-legend span { display: inline-flex; align-items: center; gap: 3px; }
.crew-split-legend .ico { font-size: .85rem; }
.crew-split-legend .is-ok { color: #8df27c; }
.crew-split-legend .is-bad { color: #ff6b7a; }
.crew-more { width: 100%; }
.crew-more .ico { font-size: 1rem; }
.crew-split-bar .w-0 { width: 0%; }
.crew-split-bar .w-1 { width: 5%; }
.crew-split-bar .w-2 { width: 10%; }
.crew-split-bar .w-3 { width: 15%; }
.crew-split-bar .w-4 { width: 20%; }
.crew-split-bar .w-5 { width: 25%; }
.crew-split-bar .w-6 { width: 30%; }
.crew-split-bar .w-7 { width: 35%; }
.crew-split-bar .w-8 { width: 40%; }
.crew-split-bar .w-9 { width: 45%; }
.crew-split-bar .w-10 { width: 50%; }
.crew-split-bar .w-11 { width: 55%; }
.crew-split-bar .w-12 { width: 60%; }
.crew-split-bar .w-13 { width: 65%; }
.crew-split-bar .w-14 { width: 70%; }
.crew-split-bar .w-15 { width: 75%; }
.crew-split-bar .w-16 { width: 80%; }
.crew-split-bar .w-17 { width: 85%; }
.crew-split-bar .w-18 { width: 90%; }
.crew-split-bar .w-19 { width: 95%; }
.crew-split-bar .w-20 { width: 100%; }

/* Recrutement : CTA vert (moins criard que l'orange), même relief et dégradé qui suit la souris. */
.game .btn-recruit,
.game .btn-recruit:hover,
.unit-slot:not(.is-full) .unit-slot-plus {
    background: linear-gradient(115deg, #1fae6a 0%, #34c76f 34%, #7fdc4e 72%, #c8f05a 100%);
    background-size: 150% 150%;
    background-position: var(--mx) var(--my);
}
.game .btn-recruit:not([disabled]) { animation: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--edge), 0 10px 24px rgba(52, 199, 111, .35); }
.unit-slot-plus.is-off { background: #4a3b5c; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15), 0 4px 0 var(--edge); }
.unit-slot.is-full .unit-slot-btn { cursor: default; }
.unit-slot.is-full .unit-slot-btn:hover { background: none; }
.unit-slot.is-full small { color: #ffb36b; }

/* Carte d'unité cliquable en entier. */
[data-view-root="units"] .unit-card:not(.is-locked) { cursor: pointer; }
[data-view-root="units"] .unit-card:not(.is-locked):hover { transform: translateY(-3px); }

/* Encart de recrutement en 2 colonnes : unité (photo + stats détaillées) | quantité. */
.hire-pop-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    width: min(620px, 100%);
    padding: 26px 26px 24px;
}
.hire-pop-card > .sheet-close { position: absolute; top: -14px; right: -14px; }
.hire-pop-info { display: grid; justify-items: center; gap: 8px; padding-right: 22px; border-right: 2px dashed rgba(255, 255, 255, .1); }
.hire-pop-form { align-self: center; }
.unit-stats.is-detailed { grid-template-columns: 1fr; width: 100%; margin: 4px 0 0; gap: 5px; }
.unit-stats.is-detailed > div { cursor: default; }
.unit-stats.is-detailed > div::after { display: none; }
.unit-stats.is-detailed .stat-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: #d9cbea; font-size: .82rem; font-weight: 700; }
.unit-stats.is-detailed dt { gap: 8px; }
@media (max-width: 640px) {
    .hire-pop-card { grid-template-columns: 1fr; gap: 14px; padding: 22px 16px 18px; }
    .hire-pop-info { padding: 0 0 14px; border-right: 0; border-bottom: 2px dashed rgba(255, 255, 255, .1); }
}
.hire-pop-desc { margin: -2px 0 4px; color: #d9cbea; font-size: .86rem; line-height: 1.35; text-align: center; }
.unit-stats dt .ico.st-spd { color: #c08bff; }
/* 5 stats (troupes) : la vitesse d'attaque occupe toute la largeur sur les cartes. */
.unit-stats:not(.is-detailed) > div:nth-child(5):last-child { grid-column: 1 / -1; }
/* Carte d'unité : plus cliquable en entier (seul le bouton ouvre la quantité). */
[data-view-root="units"] .unit-card:not(.is-locked) { cursor: default; }
[data-view-root="units"] .unit-card:not(.is-locked):hover { transform: none; }
/* Mobile : l'encart ne garde que le nom et la quantité (tient dans l'écran). */
@media (max-width: 640px) {
    .hire-pop-info { padding: 0; border: 0; }
    .hire-pop-info .hire-pop-ava, .hire-pop-info .hire-pop-desc, .hire-pop-info [data-hire-stats] { display: none; }
    .hire-pop { align-items: center; }
}
/* Coût total : pastilles plus compactes, toujours sur une seule ligne. */
.hire-pop-total { flex-wrap: nowrap; gap: 4px; }
.hire-pop-total .cost-item { gap: 2px; padding: 2px 7px 2px 3px; }
.hire-pop-total .cost-ico { width: 20px; height: 20px; }
.hire-pop-total .cost-item b { font-size: .86rem; white-space: nowrap; }

/* Trace de clic / toucher (JS) : anneau néon qui s'élargit et s'efface. */
.tap-trace {
    position: fixed;
    z-index: 600;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 3px solid rgba(255, 210, 120, .95);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 180, 80, .35), rgba(255, 180, 80, 0) 70%);
    box-shadow: 0 0 14px rgba(255, 140, 60, .6);
    pointer-events: none;
    animation: tap-trace .45s cubic-bezier(.22, 1, .36, 1) forwards;
}
.tap-trace.is-touch { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
@keyframes tap-trace {
    0% { scale: .25; opacity: 1; }
    100% { scale: 1.35; opacity: 0; }
}
/* Encart de recrutement (bureau) : colonne de droite un peu plus large. */
@media (min-width: 641px) {
    .hire-pop-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); width: min(680px, 100%); }
}

/* ===== Passe DA (retours finition) ===== */
/* Contraste : textes secondaires plus clairs dans le jeu. */
.game { --muted: #d2c4e0; }
.hire-pop-desc { color: #ece4f6; }
.locked-info { color: #d9cbea; }
.locked-info span { color: #c9b8db; }
/* Vitesse : courte sur les cartes, complète dans l'encart détaillé. */
.unit-stats .v-long { display: none; }
.unit-stats.is-detailed .v-short { display: none; }
.unit-stats.is-detailed .v-long { display: inline; }
/* Troupes (5 stats) : vie | dégâts, puis critique | riposte | vitesse en 3 cases. */
.unit-stats:not(.is-detailed):has(> div:nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.unit-stats:not(.is-detailed):has(> div:nth-child(5)) > div { grid-column: span 3; }
.unit-stats:not(.is-detailed):has(> div:nth-child(5)) > div:nth-child(n + 3) { grid-column: span 2; padding-left: 6px; padding-right: 6px; gap: 4px; }
.unit-stats:not(.is-detailed) > div:nth-child(5):last-child { grid-column: span 2; }
/* Cartes plus denses : avatar plus grand, moins de vide. */
.unit-ava { width: 112px; height: 128px; }
.unit-ava::before { height: 112px; }
.unit-ava img { width: 112px; height: 128px; }
.unit-ava.is-group img { width: 106px; height: 106px; }
.unit-card .build-body h3 { margin-top: 8px; }
/* Encart (bureau) : CTA un peu resserré, plus d'air autour. */
@media (min-width: 641px) { .hire-pop-form .btn-block { width: 86%; justify-self: center; } }
/* Bouton « Recruté ! » après succès. */
.game .btn.is-done { pointer-events: none; }
.game .btn.is-done .ico { font-size: 1.1rem; margin-right: 4px; }
/* Croix de fermeture : fond rouge opaque aussi au survol (l'ancienne règle :hover
   remettait un fond blanc translucide, la carte se voyait au travers). */
.sheet-close:hover { background: linear-gradient(180deg, #ff7f7f, #e02a45); }
/* Croix de fermeture : réaction au survol plus vive (grossit + tourne, rebond court). */
.sheet-close { transition: background .12s, transform .22s cubic-bezier(.34, 1.8, .64, 1); }
.sheet-close:hover { transform: scale(1.12); }
.sheet-close:active { transform: scale(.92); transition-duration: .08s; }
/* Seule la croix tourne (pas le bouton : son relief et son ombre restent en place). */
.sheet-close .ico { transition: transform .25s cubic-bezier(.34, 1.8, .64, 1); }
.sheet-close:hover .ico, .sheet-close:active .ico { transform: rotate(90deg); }
/* Arrestation : étoile de shérif (bleu police). */
.unit-stats dt .ico.st-risk { color: #6fa8ff; }
/* Mobile : une carte = largeur du carrousel moins les 2 marges de bord, plafonnée. */
@media (max-width: 640px) {
    .sheet--wide { --sheet-pad: 18px; }
    .sheet--wide .build-card { flex-basis: min(320px, calc(100% - 2 * var(--sheet-pad))); }
    .sheet--wide .build-list { scroll-snap-type: x mandatory; }
    .sheet--wide .build-list.is-dragging { scroll-snap-type: none; }
}
@media (max-width: 640px) {
    /* La liste a déjà les marges de bord en padding : 100 % = largeur moins les 2 marges. */
    .sheet--wide .build-card { flex-basis: min(340px, 100%); }
}

/* Troupes (« Mon équipe ») : jauge de vie par type, valeur dans la barre. */
.pile-hp { display: flex; align-items: center; gap: 8px; margin: 8px 4px 10px; }
.pile-hp > .ico { flex: none; font-size: 22px; filter: drop-shadow(0 1.5px 0 var(--edge)); }
.pile-hp .st-hp { color: #ff4d6a; }
.pile-hp-bar {
    position: relative;
    flex: 1;
    height: 20px;
    border: 2px solid var(--edge);
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    overflow: hidden;
}
.pile-hp-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #8df27c, #3fbf4f); }
.pile-hp.is-mid .pile-hp-bar i { background: linear-gradient(180deg, #ffd06b, #f59b1b); }
.pile-hp.is-low .pile-hp-bar i { background: linear-gradient(180deg, #ff7a7a, #e2283c); }
.pile-hp-bar b {
    position: relative;
    display: block;
    color: #fff;
    font-size: .74rem;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 3px var(--edge);
    paint-order: stroke fill;
}
.pile-hp-bar .w-0 { width: 0%; }
.pile-hp-bar .w-1 { width: 5%; }
.pile-hp-bar .w-2 { width: 10%; }
.pile-hp-bar .w-3 { width: 15%; }
.pile-hp-bar .w-4 { width: 20%; }
.pile-hp-bar .w-5 { width: 25%; }
.pile-hp-bar .w-6 { width: 30%; }
.pile-hp-bar .w-7 { width: 35%; }
.pile-hp-bar .w-8 { width: 40%; }
.pile-hp-bar .w-9 { width: 45%; }
.pile-hp-bar .w-10 { width: 50%; }
.pile-hp-bar .w-11 { width: 55%; }
.pile-hp-bar .w-12 { width: 60%; }
.pile-hp-bar .w-13 { width: 65%; }
.pile-hp-bar .w-14 { width: 70%; }
.pile-hp-bar .w-15 { width: 75%; }
.pile-hp-bar .w-16 { width: 80%; }
.pile-hp-bar .w-17 { width: 85%; }
.pile-hp-bar .w-18 { width: 90%; }
.pile-hp-bar .w-19 { width: 95%; }
.pile-hp-bar .w-20 { width: 100%; }
/* Fenêtres larges : la marge intérieure EST --sheet-pad (bord à bord exact du carrousel). */
.sheet--wide { padding-left: var(--sheet-pad); padding-right: var(--sheet-pad); }

@media (max-width: 640px) {
    /* En-tête des troupes : vie globale sur une ligne, emplacements libres plus bas. */
    .unit-hp { white-space: nowrap; }
    .unit-hp > span:first-child { font-size: .8rem; }
    .sheet .crew-hp--wide { width: min(120px, calc(28 * var(--u-vw))); }
}

/* Corbeille (renvoyer des unités) : en haut à gauche de la carte. */
.card-trash {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--edge);
    border-radius: 10px;
    background: rgba(0, 0, 0, .4);
    color: #d9cbea;
    cursor: pointer;
    transition: background .12s, color .12s, transform .2s cubic-bezier(.34, 1.8, .64, 1);
}
.card-trash .ico { font-size: 17px; }
.card-trash:hover { background: #e2283c; color: #fff; transform: scale(1.1); }
.crew-sheet--troops .card-trash { top: 6px; left: 6px; width: 28px; height: 28px; }
/* Encart de renvoi : bouton rouge. */
.game .btn-danger, .game .btn-danger:hover { background: linear-gradient(180deg, #ff6a6a, #d61f3a); animation: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--edge), 0 10px 22px rgba(214, 31, 58, .35); }
.game .btn-danger .ico { font-size: 1.05rem; margin-right: 6px; }
.dismiss-pop .hire-pop-desc { color: #ffc2c8; }

/* Détail d'unité (mobile) : les éléments masqués sur les cartes compactes réapparaissent en grand. */
.detail-pop .hire-pop-card { grid-template-columns: 1fr; }
.detail-pop .hire-pop-info { padding: 0; border: 0; }
.crew-sheet--troops .detail-pop .hire-pop-ava,
.crew-sheet--troops .detail-pop .hire-pop-desc { display: block; }
.crew-sheet--troops .detail-pop .unit-stats { display: grid; }
.crew-sheet--troops .detail-pop .unit-gear-title { display: block; }
.crew-sheet--troops .detail-pop .unit-gear { display: grid; }
.detail-body { display: grid; gap: 8px; width: 100%; }
.detail-pop .unit-ava { width: 112px; height: 128px; }
.detail-pop .unit-ava::before { height: 112px; }
.detail-pop .unit-ava img { width: 112px; height: 128px; }
.detail-pop .pile-hp-bar { height: 22px; }
.detail-pop .pile-hp-bar b { font-size: .8rem; line-height: 18px; }
.crew-sheet--troops .unit-card[data-unit] { cursor: pointer; }
/* Détail mobile : avatar à sa vraie taille (prime sur la version compacte) et encart défilant. */
.crew-sheet--troops .detail-pop .unit-ava { width: 112px; height: 128px; }
.crew-sheet--troops .detail-pop .unit-ava::before { height: 112px; }
.crew-sheet--troops .detail-pop .unit-ava img { width: 112px; height: 128px; }
.crew-sheet--troops .detail-pop .unit-ava.is-group img { width: 106px; height: 106px; }
.detail-pop .hire-pop-card { max-height: calc(calc(100 * var(--u-svh)) - 120px); overflow-y: auto; overscroll-behavior: contain; }
.detail-pop .hire-pop-card > .sheet-close { position: sticky; top: 0; justify-self: end; margin: -6px -6px -34px 0; }
@media (max-width: 640px) {
    /* Carte = largeur moins 3 marges (2 de bord déjà dans la liste + 1) : la suivante dépasse. */
    .sheet--wide .build-card { flex-basis: min(340px, calc(100% - var(--sheet-pad))); }
}
/* Espace entre les cartes des carrousels un peu réduit. */
.sheet--wide .build-list { gap: 12px; }
@media (max-width: 640px) { .sheet--wide .build-list { gap: 10px; } }
@media (max-width: 640px) {
    .sheet--wide .build-card { flex-basis: min(330px, calc(100% - var(--sheet-pad) - 14px)); }
}
}
@media (max-width: 640px) {
    /* Glisser en mode libre (pas d'aimantation sur les cartes). */
    .sheet--wide .build-list { scroll-snap-type: none; }
    /* Encarts (quantité, renvoi, détail) : plein écran, plus limités à la hauteur de la fenêtre. */
    .hire-pop { position: fixed; z-index: 60; padding: 16px; }
    .hire-pop-card { max-height: calc(calc(100 * var(--u-svh)) - 32px); overflow-y: auto; overscroll-behavior: contain; }
}

/* Bouton en chargement : RIEN ne change (texte, couleurs, contour) ; seul un petit
   spinner apparaît, collé à droite du libellé (::after, le ::before reste le reflet). */
.game .btn.is-loading, button.is-loading { position: relative; pointer-events: none; }
.game .btn.is-loading::after, button.is-loading::after {
    content: '';
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    margin-left: .5em;
    border: .17em solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -.15em;
    animation: btn-spin .7s linear infinite;
    filter: drop-shadow(0 1px 0 var(--edge));
}
@keyframes btn-spin { to { rotate: 360deg; } }
.game .btn[disabled].is-loading { filter: none; }
@media (max-width: 640px) {
    .sheet--wide .build-card { flex-basis: min(300px, calc(100% - var(--sheet-pad) - 14px)); }
}
/* En chargement, le bouton garde sa couleur (pas l'aspect « désactivé »). */
.game .build-cta .btn.btn-recruit.is-loading, .game .btn.btn-recruit.is-loading {
    background: linear-gradient(115deg, #1fae6a 0%, #34c76f 34%, #7fdc4e 72%, #c8f05a 100%);
    filter: none;
}
.game .btn.btn-hot.is-loading:not(.btn-recruit) { background: var(--sun-btn); filter: none; }
/* Recrutement depuis un emplacement libre : types déjà possédés en retrait. */
.unit-card.is-owned { position: relative; }
.unit-card.is-owned > :not(.unit-owned-msg) { opacity: .4; transition: opacity .2s; }
.unit-card.is-owned:hover > :not(.unit-owned-msg) { opacity: .7; }
/* Type déjà placé dans un autre emplacement : message bien visible, centré sur la carte, 2 lignes. */
.unit-owned-msg { position: absolute; top: 50%; left: 50%; z-index: 4; display: flex; align-items: center; gap: 8px; width: min(78%, 210px); margin: 0; padding: 10px 14px; border: 2px solid rgba(214, 196, 255, .55); border-radius: 14px; background: rgba(16, 8, 26, .92); box-shadow: 0 0 0 2px var(--edge), 0 6px 18px rgba(0, 0, 0, .5); color: #fff; font-size: .86rem; font-weight: 900; line-height: 1.2; text-transform: uppercase; text-wrap: balance; translate: -50% -50%; pointer-events: none; }
.unit-owned-msg .ico { width: 22px; height: 22px; flex: none; color: #d6c4ff; }

/* Vie d'un type de troupe : mini barre posée sous l'avatar (tooltip = %). */
.ava-wrap { position: relative; width: max-content; margin: 0 auto; }
.ava-hp {
    position: absolute;
    left: 50%;
    bottom: -4px;
    z-index: 3;
    width: 72%;
    height: 8px;
    translate: -50% 0;
    border: 2px solid var(--edge);
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    overflow: hidden;
    cursor: help;
}
.ava-hp i { display: block; height: 100%; background: linear-gradient(180deg, #8df27c, #3fbf4f); }
.ava-hp.is-mid i { background: linear-gradient(180deg, #ffd06b, #f59b1b); }
.ava-hp.is-low i { background: linear-gradient(180deg, #ff7a7a, #e2283c); }
.crew-sheet--troops .ava-hp { height: 7px; bottom: -3px; }
.ava-hp .w-0 { width: 0%; }
.ava-hp .w-1 { width: 5%; }
.ava-hp .w-2 { width: 10%; }
.ava-hp .w-3 { width: 15%; }
.ava-hp .w-4 { width: 20%; }
.ava-hp .w-5 { width: 25%; }
.ava-hp .w-6 { width: 30%; }
.ava-hp .w-7 { width: 35%; }
.ava-hp .w-8 { width: 40%; }
.ava-hp .w-9 { width: 45%; }
.ava-hp .w-10 { width: 50%; }
.ava-hp .w-11 { width: 55%; }
.ava-hp .w-12 { width: 60%; }
.ava-hp .w-13 { width: 65%; }
.ava-hp .w-14 { width: 70%; }
.ava-hp .w-15 { width: 75%; }
.ava-hp .w-16 { width: 80%; }
.ava-hp .w-17 { width: 85%; }
.ava-hp .w-18 { width: 90%; }
.ava-hp .w-19 { width: 95%; }
.ava-hp .w-20 { width: 100%; }
/* Cartes bloquées (niveau insuffisant) : légère teinte rouge. */
.build-card.is-secret {
    background: linear-gradient(180deg, rgba(150, 32, 58, .2), rgba(90, 18, 40, .14)), linear-gradient(180deg, #2c1a44, #1a0f2a);
    border-color: rgba(214, 60, 90, .35);
}
.unit-slot.is-secret { background: rgba(150, 32, 58, .12); border-color: rgba(214, 60, 90, .35); }
.is-secret .locked-info { border-color: rgba(255, 120, 140, .25); }
/* Description des unités sur les cartes du shop : seulement si la hauteur d'écran le permet. */
.unit-card .unit-desc { display: none; }
@media (min-height: 780px) {
    [data-view-root="units"] .unit-card .unit-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* toujours 2 lignes (16/10/2026) : textes ≤ ~72 caractères, cartes alignées */
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.6em;
        margin: 2px 4px 6px;
        color: #d9cbea;
        font-size: .78rem;
        font-style: italic;
        line-height: 1.3;
        text-align: center;
    }
}
/* Barre de vie sous l'avatar : plus épaisse, info-bulle façon stats. */
.ava-hp { height: auto; border: 0; background: none; overflow: visible; bottom: -6px; outline: none; }
.ava-hp-track { display: block; height: 12px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(0, 0, 0, .6); overflow: hidden; }
.ava-hp-track i { display: block; height: 100%; background: linear-gradient(180deg, #8df27c, #3fbf4f); }
.ava-hp.is-mid .ava-hp-track i { background: linear-gradient(180deg, #ffd06b, #f59b1b); }
.ava-hp.is-low .ava-hp-track i { background: linear-gradient(180deg, #ff7a7a, #e2283c); }
.crew-sheet--troops .ava-hp { height: auto; bottom: -5px; }
.crew-sheet--troops .ava-hp-track { height: 10px; }
.ava-hp::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    z-index: 5;
    padding: 4px 9px 3px;
    border: 2px solid var(--edge);
    border-radius: 8px;
    background: #1a0d22;
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    translate: -50% 4px;
    transition: opacity .15s, translate .15s;
}
.ava-hp:hover::after, .ava-hp:focus-visible::after, .ava-hp.is-tip::after { opacity: 1; translate: -50% 0; }
.ava-hp-track .w-0 { width: 0%; }
.ava-hp-track .w-1 { width: 5%; }
.ava-hp-track .w-2 { width: 10%; }
.ava-hp-track .w-3 { width: 15%; }
.ava-hp-track .w-4 { width: 20%; }
.ava-hp-track .w-5 { width: 25%; }
.ava-hp-track .w-6 { width: 30%; }
.ava-hp-track .w-7 { width: 35%; }
.ava-hp-track .w-8 { width: 40%; }
.ava-hp-track .w-9 { width: 45%; }
.ava-hp-track .w-10 { width: 50%; }
.ava-hp-track .w-11 { width: 55%; }
.ava-hp-track .w-12 { width: 60%; }
.ava-hp-track .w-13 { width: 65%; }
.ava-hp-track .w-14 { width: 70%; }
.ava-hp-track .w-15 { width: 75%; }
.ava-hp-track .w-16 { width: 80%; }
.ava-hp-track .w-17 { width: 85%; }
.ava-hp-track .w-18 { width: 90%; }
.ava-hp-track .w-19 { width: 95%; }
.ava-hp-track .w-20 { width: 100%; }
/* Emplacement / carte bloqué : aucun effet de survol, niveau requis en blanc. */
.unit-slot.is-secret, .unit-slot.is-secret:hover, .build-card.is-secret:hover { transform: none; cursor: default; }
.unit-slot.is-secret .unit-slot-btn:hover { background: none; }
.unit-slot.is-secret:hover { background: rgba(150, 32, 58, .12); }
.unit-slot.is-secret small { color: #fff; }
/* Emplacement bloqué = même bloc cadenas que les cartes bloquées, centré. */
.unit-slot-locked { display: grid; place-items: center; height: 100%; min-height: 230px; padding: 14px; }
.unit-slot-locked .locked-info { width: 100%; margin: 0; }
.crew-sheet--troops .unit-slot-locked { min-height: 0; padding: 8px; }
.crew-sheet--troops .unit-slot-locked .locked-info { min-height: 0; padding: 8px 6px; font-size: .7rem; }
/* Mobile : les encarts défilent (overflow), la croix doit donc être DANS la carte. */
@media (max-width: 640px) {
    .hire-pop-card > .sheet-close { position: absolute; top: 10px; right: 10px; margin: 0; }
    .detail-pop .hire-pop-card > .sheet-close { position: sticky; top: 0; margin: -6px -6px -34px 0; }
    .hire-pop-card { padding-top: 26px; }
    .hire-pop-name { padding: 0 40px; }
}
/* Descriptions (unités, bâtiments, encarts) : un seul style, un peu plus léger. */
[data-view-root="units"] .unit-card .unit-desc,
.build-body p:not(.unit-qty):not(.unit-desc),
.hire-pop-desc {
    color: #d9cbea;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.35;
    -webkit-text-stroke: 0;
}
/* Bureau : cartes un peu plus larges ; la fenêtre suit pour garder 4 cartes entières. */
@media (min-width: 641px) {
    .build-card { flex-basis: 260px; }
    .sheet--wide { width: min(1160px, 100%); }
}
/* Emplacement bloqué : texte centré verticalement, sans cadre supplémentaire. */
.unit-slot-locked { align-self: stretch; }
.unit-slot.is-secret .unit-slot-locked .locked-info {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    min-height: 0;
}
/* Cartes bloquées (unités, bâtiments) : bloc cadenas calé en bas, sans cadre hachuré. */
.build-card.is-secret .locked-info { border: 0; background: none; padding: 10px 6px 4px; min-height: 0; }

/* Unités arrêtées : l'avatar de la pastille clignote rouge / bleu, comme un gyrophare. */
.crew-pill.is-jailed .crew-ico { animation: siren 1s steps(1, end) infinite; }
@keyframes siren {
    0%  { border-color: #ff2e4d; box-shadow: 0 0 0 2px #ff2e4d, 0 0 14px 3px rgba(255, 46, 77, .85); }
    50% { border-color: #2e7bff; box-shadow: 0 0 0 2px #2e7bff, 0 0 14px 3px rgba(46, 123, 255, .85); }
}
@media (prefers-reduced-motion: reduce) {
    .crew-pill.is-jailed .crew-ico { animation: none; border-color: #ff2e4d; box-shadow: 0 0 0 2px #ff2e4d; }
}
/* Gyrophare : l'image elle-même se teinte rouge puis bleu. */
@keyframes siren-tint {
    0%  { filter: sepia(1) saturate(6) hue-rotate(-40deg) brightness(.95); }
    50% { filter: sepia(1) saturate(6) hue-rotate(175deg) brightness(.95); }
}
.crew-pill.is-jailed .crew-ico { animation: siren 1s steps(1, end) infinite, siren-tint 1s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) {
    .crew-pill.is-jailed .crew-ico { animation: none; filter: sepia(1) saturate(6) hue-rotate(-40deg); }
}
/* Gyrophare : halo lumineux plus fort qui déborde autour de l'avatar. */
@keyframes siren-tint {
    0%  { filter: sepia(1) saturate(6) hue-rotate(-40deg) brightness(1.05) drop-shadow(0 0 6px #ff2e4d) drop-shadow(0 0 14px rgba(255, 46, 77, .9)); }
    50% { filter: sepia(1) saturate(6) hue-rotate(175deg) brightness(1.05) drop-shadow(0 0 6px #2e7bff) drop-shadow(0 0 14px rgba(46, 123, 255, .9)); }
}
@keyframes siren {
    0%  { border-color: #ff2e4d; box-shadow: 0 0 0 2px #ff2e4d, 0 0 18px 6px rgba(255, 46, 77, .9), 0 0 36px 10px rgba(255, 46, 77, .45); }
    50% { border-color: #2e7bff; box-shadow: 0 0 0 2px #2e7bff, 0 0 18px 6px rgba(46, 123, 255, .9), 0 0 36px 10px rgba(46, 123, 255, .45); }
}
.crew-pill.is-jailed { overflow: visible; }
/* Gyrophare : plus de gros contour, seulement la teinte et la lueur de l'image. */
.crew-pill.is-jailed .crew-ico { animation: siren-tint 1s steps(1, end) infinite; border-color: var(--edge); box-shadow: none; }
/* Gyrophare : lueur plus discrète. */
@keyframes siren-tint {
    0%  { filter: sepia(1) saturate(5) hue-rotate(-40deg) drop-shadow(0 0 4px rgba(255, 46, 77, .7)); }
    50% { filter: sepia(1) saturate(5) hue-rotate(175deg) drop-shadow(0 0 4px rgba(46, 123, 255, .7)); }
}
/* Cartes bloquées : bloc cadenas un peu remonté, dans un encart léger. */
.build-card.is-secret .locked-info {
    margin: auto 4px 10px;
    padding: 12px 8px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .22);
    box-shadow: inset 0 0 0 1px rgba(255, 120, 140, .14);
}
/* Carte « Complet » : le cadenas ne pivote que légèrement (anti-horaire) au survol. */
.unit-slot.is-full .unit-slot-btn:hover .unit-slot-plus .ico { rotate: -12deg; }
.unit-slot.is-full .unit-slot-btn:hover .unit-slot-plus { transform: none; }
/* Encart « bloqué » : même écart que la carte sur les 3 côtés, plus d'air dedans. */
.build-card.is-secret .locked-info { margin: auto 0 0; padding: 18px 8px 16px; }
/* Corbeille un peu plus grande (même gabarit visuel que la pastille ×N). */
.card-trash { width: 36px; height: 36px; border-radius: 11px; }
.card-trash .ico { font-size: 21px; }
.crew-sheet--troops .card-trash { width: 32px; height: 32px; }
.crew-sheet--troops .card-trash .ico { font-size: 18px; }
/* Troupes : la case Dégâts (intervalle, plus long) prend plus de place que la Vie. */
.unit-stats:not(.is-detailed):has(> div:nth-child(5)) > div:nth-child(1) { grid-column: span 2; }
.unit-stats:not(.is-detailed):has(> div:nth-child(5)) > div:nth-child(2) { grid-column: span 4; }
.unit-stats dt .ico, .unit-stats dt .stat-ico { flex: none; }
/* Encarts (recruter / renvoyer) : bouton à sa taille, au moins la largeur du − … +. */
.hire-pop-form .btn-block,
.hire-pop-form .btn-block:hover { width: auto; min-width: 180px; justify-self: center; padding-left: 24px; padding-right: 24px; }
/* Emplacement bloqué : PAS d'encart (la règle des cartes bloquées ne s'applique pas ici). */
.build-card.unit-slot.is-secret .unit-slot-locked .locked-info {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
/* Quantité à sa borne : petite vibration horizontale du bloc. */
.qty.is-shake { animation: qty-shake .6s cubic-bezier(.36, .07, .19, .97); }
.qty.is-shake input { border-color: #ff6b7a; }
@keyframes qty-shake {
    10%, 90% { translate: -1px 0; }
    20%, 80% { translate: 3px 0; }
    30%, 50%, 70% { translate: -5px 0; }
    40%, 60% { translate: 5px 0; }
}
@media (prefers-reduced-motion: reduce) { .qty.is-shake { animation: none; } }
/* Troupes : Vie et Dégâts de même largeur ; les valeurs rétrécissent pour tenir. */
.unit-stats:not(.is-detailed):has(> div:nth-child(5)) > div:nth-child(1),
.unit-stats:not(.is-detailed):has(> div:nth-child(5)) > div:nth-child(2) { grid-column: span 3; }
.unit-stats:not(.is-detailed):has(> div:nth-child(5)) > div:nth-child(-n + 2) dd { font-size: .8rem; }
.unit-stats:not(.is-detailed) > div { min-width: 0; }
.unit-stats:not(.is-detailed) dd { min-width: 0; overflow: hidden; text-overflow: clip; }
.unit-stats:not(.is-detailed):has(> div:nth-child(5)) > div:nth-child(-n + 2) dd { font-size: .86rem; }
/* Valeurs des ressources : ne débordent jamais (abrégées en JS si besoin). */
.stock-val { min-width: 0; overflow: hidden; }
/* Stats : un peu moins d'espace entre les pastilles. */
.unit-stats { gap: 4px; }
.unit-stats.is-detailed { gap: 4px; }
/* Bureau : shop un peu plus large ; 4 cartes occupent toute la largeur par défaut. */
@media (min-width: 641px) {
    .sheet--wide { width: min(1200px, 100%); }
    .build-card { flex-basis: max(220px, calc((100% - 3 * 12px) / 4)); }
}
@media (min-width: 641px) { .sheet--wide { width: min(1240px, 100%); } }
/* Pastille rouge (arrêtés) : petits rebonds réguliers pour attirer l'œil. */
.crew-jail { animation: badge-bounce 2.4s cubic-bezier(.28, .84, .42, 1) infinite; transform-origin: 50% 100%; }
@keyframes badge-bounce {
    0%, 60%, 100% { translate: 0 0; scale: 1 1; }
    10% { translate: 0 0; scale: 1.15 .85; }
    25% { translate: 0 -7px; scale: .9 1.1; }
    40% { translate: 0 0; scale: 1.1 .9; }
    48% { translate: 0 -2px; scale: 1 1; }
}
@media (prefers-reduced-motion: reduce) { .crew-jail { animation: none; } }
/* … mais seulement de temps en temps : un sautillement, puis ~5 s de repos. */
.crew-jail { animation-duration: 6s; }
@keyframes badge-bounce {
    0%, 14%, 100% { translate: 0 0; scale: 1 1; }
    2%  { translate: 0 0; scale: 1.15 .85; }
    5%  { translate: 0 -7px; scale: .9 1.1; }
    8%  { translate: 0 0; scale: 1.1 .9; }
    10% { translate: 0 -2px; scale: 1 1; }
}
/* Vie blessée (pile pas au maximum) : valeur en rouge clair. */
.unit-stats .is-hurt dd { color: #ff9aa6; }
/* Mesure fiable du débordement (tous navigateurs) : la valeur occupe toute la place
   restante de sa case, alignée à droite ; scrollWidth > clientWidth = vrai débordement. */
.unit-stats dd { flex: 1 1 0; min-width: 0; text-align: right; padding-right: 1px; }
.stock-val { flex: 1 1 0; min-width: 0; text-align: right; padding-right: 2px; }
/* 3e ligne des troupes (critique, riposte, vitesse) : cases étroites, texte un peu réduit. */
.unit-stats:not(.is-detailed):has(> div:nth-child(5)) > div:nth-child(n + 3) { padding-left: 5px; padding-right: 5px; gap: 3px; }
.unit-stats:not(.is-detailed):has(> div:nth-child(5)) > div:nth-child(n + 3) dd { font-size: .76rem; }
.unit-stats:not(.is-detailed):has(> div:nth-child(5)) > div:nth-child(n + 3) dt .ico { font-size: .95rem; width: 16px; height: 16px; }

/* « Mon équipe » filles / narcos : pastilles comme le shop + bandeau d'arrestation. */
.crew-prod { margin-top: 10px; }
.jail-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 8px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(226, 40, 60, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 92, 108, .35);
    color: #ffb3bb;
    font-size: .82rem;
    font-weight: 800;
}
.jail-tag .ico { flex: none; font-size: 15px; color: #ff5c6c; }
.jail-tag span { flex: 1; }
.jail-tag b { color: #fff; font-variant-numeric: tabular-nums; }
/* Avatar des arrêtés : teinte gyrophare discrète. */
.unit-ava.is-jailed img { animation: siren-tint 1s steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) { .unit-ava.is-jailed img { animation: none; filter: sepia(1) saturate(5) hue-rotate(-40deg); } }
.build-body p.jail-tag { font-style: normal; font-size: .82rem; font-weight: 800; color: #ffb3bb; text-align: left; line-height: 1.2; }

/* Arrestation : tampon rouge incliné posé sur le bas de l'avatar. */
.jail-stamp {
    position: absolute;
    left: 50%;
    bottom: -8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 3px 8px;
    translate: -50% 0;
    rotate: -5deg;
    border: 2px solid var(--edge);
    border-radius: 8px;
    background: linear-gradient(180deg, #ff4d5e, #c81e3a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 var(--edge);
    color: #fff;
    font-size: .76rem;
    font-weight: 900;
    font-style: normal;
    white-space: nowrap;
    text-transform: uppercase;
}
.jail-stamp .ico { font-size: 13px; }
.jail-stamp b { -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.jail-stamp i { font-style: normal; font-weight: 800; opacity: .9; text-transform: none; }
.crew-prod { margin-top: 16px; }
/* Tampon : contour sombre sur tout le texte (délai compris) et sur le picto. */
.jail-stamp i { -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; opacity: 1; }
.jail-stamp .ico { filter: drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 0 1px var(--edge)); }
/* Bureau : shops et cartes un peu moins larges (toujours 4 cartes = la largeur). */
@media (min-width: 641px) { .sheet--wide { width: min(1180px, 100%); } }
/* Tampon : largeur selon le texte (le contour épais déborde des lettres). */
.jail-stamp { width: max-content; padding: 4px 12px 3px 9px; }
.jail-stamp b { padding-right: 2px; }
/* Onglets connexion / inscription : l'onglet actif ne réagit pas au survol. */
.auth-tabs button:not(.is-active):hover { color: var(--paper); background: rgba(255, 255, 255, .12); }
.auth-tabs .is-active, .auth-tabs .is-active:hover { background: var(--sun-btn); color: #fff; cursor: default; pointer-events: none; }

/* ==========================================================================
   TUTORIEL GUIDÉ : bulle de Carla (non bloquante) + mise en avant de la cible
   ========================================================================== */
.coach {
    position: fixed;
    left: 50%;
    top: 112px;
    z-index: 35;
    display: flex;
    align-items: flex-end;
    gap: 0;
    width: min(560px, calc(calc(100 * var(--u-vw)) - 24px));
    translate: -50% 0;
    pointer-events: none;
}
.coach-ava {
    flex: none;
    width: 92px;
    height: auto;
    margin-right: -14px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5));
    position: relative;
    z-index: 1;
}
.coach-box {
    flex: 1;
    pointer-events: auto;
    padding: 12px 16px 14px;
    border: var(--edge-w) solid var(--edge);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 4px 0 var(--edge), 0 14px 30px rgba(0, 0, 0, .5);
}
.coach-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.coach-step { color: var(--muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.coach-text { margin: 0; color: #fff; font-size: .95rem; line-height: 1.35; }
.coach-text em { font-style: normal; color: #ffd27a; font-weight: 800; }
.coach form { margin-top: 10px; }
.coach .btn { width: 100%; }
/* La cible du moment pulse (pastille d'équipe à ouvrir). */
body[data-coach="40"] .crew-pill--troops,
body[data-coach="50"] .crew-pill--girls { animation: coach-pulse 1.4s ease-in-out infinite; }
@keyframes coach-pulse {
    0%, 100% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 3px 0 var(--edge), 0 0 0 0 rgba(255, 210, 122, .8); }
    50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 3px 0 var(--edge), 0 0 0 8px rgba(255, 210, 122, 0); }
}
/* Fenêtre ouverte : la bulle passe derrière (ne gêne pas le shop). */
body:has(#layer .sheet-wrap) .coach { opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
@media (max-width: 640px) {
    .coach { top: auto; bottom: calc(var(--dock-b, 18px) + 56px + 160px); }
    .coach-ava { width: 64px; }
    .coach-text { font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) { body[data-coach] .crew-pill { animation: none; } }
/* Bulle de Carla : étiquette du nom et compteur d'étape bien séparés. */
.coach-head { margin: 0 0 8px; }
.coach-head .talk-name { position: static; display: inline-block; margin: 0; transform: rotate(-2deg); }
/* Mobile : Carla (nouveau buste, plus haut) posée AU-DESSUS de la bulle, sans chevaucher le texte. */
@media (max-width: 640px) {
    .talk-portrait { left: 50%; bottom: calc(100% - 4px); width: 104px; translate: -50% 0; }
    .talk-portrait::before { display: none; }
    .talk-box { padding-top: 34px; }
    .talk-name { left: 50%; translate: -50% 0; }
}
/* Tablette (641–900 px) : même placement — Carla posée au-dessus de la bulle, à gauche. */
@media (min-width: 641px) and (max-width: 900px) {
    .talk-portrait { left: 24px; bottom: calc(100% - 4px); width: 130px; translate: none; }
    .talk-portrait::before { display: none; }
    .talk-name { left: 24px; translate: none; }
}
@media (min-width: 641px) and (max-width: 900px) { .talk-box { padding-top: 40px; } }
/* Mobile / tablette : l'étiquette du nom chevauche le bord haut de la bulle (comme sur bureau). */
@media (max-width: 900px) {
    .talk-box .talk-name { top: 0; translate: 0 -50%; }
    .talk-box { padding-top: 30px; }
}
@media (max-width: 640px) {
    .talk-box .talk-name { translate: -50% -50%; }
}
/* La bulle (et son étiquette) passent DEVANT Carla. */
.talk-box { position: relative; z-index: 2; }
.talk-box .talk-name { z-index: 3; }
@media (max-width: 900px) { .talk-portrait { z-index: 1; } }
/* Étiquette du nom de Carla : sombre (pas orange), pour ne pas concurrencer le bouton. */
.talk-name,
.game .talk-name {
    background: linear-gradient(180deg, #3a2156, #1d1030);
    color: #ffd27a;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 3px 0 var(--edge);
}
/* Consigne de placement : plus large (texte sur 1–2 lignes), coins arrondis plutôt que pilule. */
.objective { width: max-content; max-width: min(460px, calc(calc(100 * var(--u-vw)) - 32px)); padding: 12px 26px 10px; border-radius: 22px; text-wrap: balance; }
/* Tutoriel guidé : onglet Ville verrouillé (on reste dans le QG). */
body[data-coach] .viewswitch [data-mode="world"] { opacity: .4; cursor: not-allowed; }

/* Tutoriel : bâtiments « dans le brouillard » + main qui montre où cliquer. */
.build-card.is-fog { filter: blur(3px) grayscale(.8) brightness(.55); opacity: .7; pointer-events: none; user-select: none; }
.build-card.is-guide { position: relative; box-shadow: 0 0 0 3px #ffd27a, 0 0 26px rgba(255, 210, 122, .45); }
.guide-hand {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    font-size: 46px;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35));
    animation: guide-tap 1.1s ease-in-out infinite;
}
.guide-hand .ico { display: block; }
.build-card.is-guide .guide-hand { right: 18px; bottom: 26px; rotate: -20deg; }
.guide-hand--map { position: relative; font-size: 44px; translate: 2px 2px; }
@keyframes guide-tap {
    0%, 100% { transform: translate(0, 0) scale(1); }
    45% { transform: translate(-6px, -8px) scale(1.05); }
    60% { transform: translate(0, 0) scale(.92); }
}
@media (prefers-reduced-motion: reduce) { .guide-hand { animation: none; } }

/* Main du tutoriel : le marqueur / conteneur ne bouge pas (MapLibre le positionne
   avec transform) ; l'animation « clic » est sur l'intérieur. */
.guide-hand, .guide-hand--map { animation: none; filter: none; }
.guide-hand--map { position: absolute; width: 56px; height: 56px; translate: none; font-size: 0; pointer-events: none; }
.build-card.is-guide .guide-hand { right: 14px; bottom: 22px; width: 56px; height: 56px; rotate: 0deg; }
.guide-hand-in {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    rotate: -18deg;
    transform-origin: 50% 8%;
    animation: guide-click 1.3s cubic-bezier(.45, 0, .25, 1) infinite;
    filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .45));
}
.guide-hand-in .ico { display: block; width: 56px; height: 56px; }
/* Onde au bout du doigt à chaque « clic ». */
.guide-ripple {
    position: absolute;
    left: 50%;
    top: 4px;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid #ffd27a;
    border-radius: 50%;
    opacity: 0;
    animation: guide-ripple 1.3s ease-out infinite;
}
@keyframes guide-click {
    0%, 30%, 100% { scale: 1; translate: 0 0; }
    45% { scale: .84; translate: 0 3px; }
    60% { scale: 1.04; translate: 0 0; }
}
@keyframes guide-ripple {
    0%, 42% { opacity: 0; scale: .3; }
    48% { opacity: 1; scale: .5; }
    100% { opacity: 0; scale: 1.6; }
}
@media (prefers-reduced-motion: reduce) { .guide-hand-in, .guide-ripple { animation: none; } }

/* Tutoriel : voile partout sauf la cible (trou créé par une ombre géante). */
.tuto-spot {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 34;
    pointer-events: none;
    box-shadow: 0 0 0 200vmax rgba(8, 4, 16, .62);
    outline: 3px solid rgba(255, 210, 122, .85);
    outline-offset: 0;
    transition: opacity .2s;
}
.tuto-spot.is-front { z-index: 45; }
/* Bulle de Carla et main au-dessus du voile ; HUD dessous. */
.coach { z-index: 36; }
.guide-hand--map { z-index: 35; }
.build-card.is-guide .guide-hand { z-index: 46; }
#layer:has(.is-guide) .guide-hand { position: absolute; }
/* Trou du voile : sans liseré. */
.tuto-spot { outline: 0; }

/* Tutoriel (zone autorisée) : plus aucun survol ni clic ailleurs. Seuls la carte
   (déplacement + la case autorisée, filtrée en JS) et le bouton guidé répondent. */
body.tuto-lock * { pointer-events: none !important; }
body.tuto-lock .maplibregl-canvas,
body.tuto-lock .is-guide .btn-price { pointer-events: auto !important; }
/* Fenêtre ouverte : la carte dessous ne répond plus. */
body.tuto-lock:has(#layer .sheet-wrap) .maplibregl-canvas { pointer-events: none !important; }
/* Main du shop : portée par le voile (au-dessus), bout du doigt centré verticalement
   sur le bouton, côté droit. La main dessinée dans la carte est masquée. */
.build-card.is-guide .guide-hand { display: none; }
.tuto-spot-hand { display: none; position: absolute; right: 2px; top: 50%; width: 56px; height: 56px; margin-top: -4px; }
.tuto-spot.is-front .tuto-spot-hand { display: block; }
.tuto-spot-hand .guide-hand-in { width: 56px; height: 56px; }
/* Tutoriel : l'infobulle et le nom de la case passent au-dessus du voile. */
body.tuto-lock .map-tip, body.tuto-lock .cell-name { z-index: 37; }

/* Voile du tutoriel : la main suit tout élément ciblé (pas seulement le shop). */
.tuto-spot.has-hand .tuto-spot-hand { display: block; }
.tuto-spot:not(.has-hand) .tuto-spot-hand { display: none; }
/* Seul l'élément ciblé (et le formulaire de quantité) répond aux clics. */
body.tuto-lock [data-tuto-target],
body.tuto-lock [data-tuto-target] *,
body.tuto-lock [data-hire-pop]:not([hidden]) .qty,
body.tuto-lock [data-hire-pop]:not([hidden]) .qty * { pointer-events: auto !important; }
/* Bulle de Carla lisible au-dessus du voile (hors fenêtre). */
body.tuto-lock .coach { z-index: 36; }
/* Tutoriel : plus de pulsation sur les pastilles (la main et son onde suffisent). */
body[data-coach] .crew-pill { animation: none; }
/* Mobile : la bulle de Carla reste en haut (sous les ressources). */
@media (max-width: 640px) {
    .coach { top: 104px; bottom: auto; }
}
/* Voile du tutoriel plus sombre. */
.tuto-spot { box-shadow: 0 0 0 200vmax rgba(6, 3, 12, .78); }

/* Bannière « Mission réussie » : texte BLANC plein à gros contour (plus de dégradé
   transparent, qui sortait sombre selon les navigateurs / filtres). */
.mission-title,
.game .mission-title {
    background: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    color: #fff;
    -webkit-text-stroke: .08em var(--edge, #1a0d22);
    paint-order: stroke fill;
    text-shadow: .05em .07em 0 var(--edge, #1a0d22);
    filter: none;
}
.mission { z-index: 120; }
/* « + » des gemmes : vert habituel des actions (comme Recruter / Construire), « + » plus épais. */
.stock--gems .res-buy,
.stock--gems .res-buy:hover {
    background: linear-gradient(115deg, #1fae6a 0%, #34c76f 34%, #7fdc4e 72%, #c8f05a 100%);
    background-size: 150% 150%;
    background-position: var(--mx) var(--my);
}
/* « + » des gemmes : reflet brillant comme les autres boutons 3D. */
.stock--gems .res-buy { position: absolute; overflow: hidden; }
.stock--gems .res-buy::before {
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    top: 2px;
    height: 45%;
    border-radius: 8px 8px 5px 5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .1));
    pointer-events: none;
}
.stock--gems .res-buy .ico { position: relative; z-index: 1; }
/* « + » des gemmes : bordure sombre nette tout autour (le reflet reste à l'intérieur). */
.hud .stock--gems .res-buy {
    border: 3px solid var(--edge);
    border-radius: 12px;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 3px 0 var(--edge), 0 6px 14px rgba(0, 0, 0, .4);
    background-clip: padding-box;
}
.hud .stock--gems .res-buy::before { left: 2px; right: 2px; top: 2px; border-radius: 7px 7px 4px 4px; }

/* « + » des gemmes, version « Clash of Clans » : vert franc vertical, tranche foncée
   en bas, liseré clair en haut, reflet net sur la moitié haute, « + » plein plus grand. */
.hud .stock--gems .res-buy,
.hud .stock--gems .res-buy:hover {
    width: 36px;
    height: 36px;
    border: 2.5px solid var(--edge);
    border-radius: 10px;
    background: linear-gradient(180deg, #8ef05a 0%, #4fcf36 45%, #2fa82a 100%);
    background-size: 100% 150%;
    background-position: 50% var(--my);
    background-clip: padding-box;
    box-shadow: inset 0 -4px 0 #1e7d1f, inset 0 2px 0 rgba(255, 255, 255, .55), 0 3px 0 var(--edge), 0 5px 12px rgba(0, 0, 0, .45);
}
.hud .stock--gems .res-buy::before {
    left: 3px;
    right: 3px;
    top: 3px;
    height: 38%;
    border-radius: 6px 6px 10px 10px / 6px 6px 5px 5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15));
}
.hud .stock--gems .res-buy .ico { font-size: 19px; translate: 0 -1px; filter: none; }
@media (max-width: 640px) {
    .hud .stock--gems .res-buy, .hud .stock--gems .res-buy:hover { width: 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 -3px 0 #1e7d1f, inset 0 2px 0 rgba(255, 255, 255, .55), 0 2px 0 var(--edge), 0 4px 10px rgba(0, 0, 0, .45); }
    .hud .stock--gems .res-buy .ico { font-size: 15px; }
}

/* ==========================================================================
   Forum (un par langue) : catégories, sujets, messages postés avec son personnage.
   ========================================================================== */
.phone-app--forum { --c: #12b8a5; }
.sheet--forum {
    width: min(860px, 100%);
    max-height: calc(calc(100 * var(--u-svh)) - 190px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Mobile : feuille du bas sous les ressources du HUD, défilement interne. */
@media (max-width: 640px) { .sheet--forum { max-height: calc(calc(100 * var(--u-svh)) - 96px); overflow-y: auto; } }
.forum-lang { cursor: help; }

/* Avatar de personnage (même rendu que le HUD) : initiale + blason de niveau. */
.pava {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
}
.pava-in {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: var(--edge-w, 3px) solid var(--edge);
    border-radius: 50%;
    background: var(--sunset-x);
    color: #1a0f22;
    font-weight: 900;
    font-style: italic;
    font-size: 1.4rem;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--edge);
}
.pava-lv {
    position: absolute;
    right: -7px;
    bottom: -6px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 23px;
    padding: 0 3px;
    border: 2px solid var(--edge);
    border-radius: 7px 7px 50% 50%;
    background: linear-gradient(180deg, #ffe27a, #ffb21e 60%, #e08a00);
    color: #fff;
    font-weight: 900;
    font-size: .78rem;
    line-height: 1;
    text-shadow: 0 1px 0 var(--edge), 1px 0 0 var(--edge), -1px 0 0 var(--edge), 0 -1px 0 var(--edge);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 2px 0 var(--edge);
}

/* Lignes cliquables (catégories, sujets) : cartes sombres à tranche. */
.forum-cats, .forum-topics, .forum-posts { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.forum-cat, .forum-topic {
    display: grid;
    align-items: center;
    gap: 6px 16px;
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--edge);
    border-radius: 14px;
    background: linear-gradient(180deg, #2c1a44, #1a0f2a);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 3px 0 var(--edge);
    color: var(--paper);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .2s var(--ease-out), background .2s;
}
.forum-cat:hover, .forum-topic:hover { transform: translateY(-2px); background: linear-gradient(180deg, #3a2258, #221338); }
.forum-cat:active, .forum-topic:active { transform: translateY(1px); }
.forum-cat { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 15rem); }
.forum-cat-ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--edge);
    border-radius: 12px;
    background: var(--sun-btn);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--edge);
}
.forum-cat-ico .ico { filter: drop-shadow(0 2px 0 var(--edge)); }
.forum-cat-main { display: grid; gap: 2px; min-width: 0; }
.forum-cat-main strong, .forum-topic-main strong { font-size: 1.15rem; font-weight: 900; text-transform: uppercase; overflow-wrap: anywhere; }
.forum-cat-desc { color: rgba(255, 255, 255, .7); font-size: .92rem; }
.forum-cat-stats { color: rgba(255, 255, 255, .7); font-size: .85rem; white-space: nowrap; }
.forum-cat-stats b, .forum-topic-count b { color: #fff; font-weight: 900; }
.forum-dot { display: inline-block; width: 4px; height: 4px; margin: 0 6px; border-radius: 50%; background: rgba(255, 255, 255, .4); vertical-align: middle; }
.forum-cat-last { display: grid; gap: 2px; min-width: 0; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .1); }
.forum-last-title { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.forum-meta { color: rgba(255, 255, 255, .55); font-size: .82rem; }

.forum-topic { grid-template-columns: minmax(0, 1fr) auto minmax(0, 9rem); }
.forum-topic-main { display: grid; gap: 3px; min-width: 0; }
.forum-topic-main strong { font-size: 1.05rem; text-transform: none; }
.forum-topic.is-pinned { border-color: #e0a400; }
.forum-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px; background: #ffb21e; color: var(--edge); font-size: .72rem; text-transform: uppercase; vertical-align: 2px; }
.forum-lock { margin-right: 4px; font-size: .9em; color: rgba(255, 255, 255, .6); }
.forum-topic-count { display: grid; justify-items: center; min-width: 4.5rem; font-size: .78rem; color: rgba(255, 255, 255, .6); }
.forum-topic-count b { font-size: 1.2rem; }
.forum-topic-last { text-align: right; }
@media (max-width: 760px) {
    .forum-cat { grid-template-columns: auto minmax(0, 1fr); }
    .forum-cat-stats, .forum-cat-last { grid-column: 2; padding-left: 0; border-left: 0; }
    .forum-topic { grid-template-columns: minmax(0, 1fr) auto; }
    .forum-topic-last { display: none; }
}

/* Nouveau sujet : bouton vert qui déplie le formulaire. */
.forum-new { margin-top: 14px; }
.forum-new > summary { display: inline-flex; gap: 8px; width: auto; list-style: none; cursor: pointer; }
.forum-new > summary::-webkit-details-marker { display: none; }
.forum-new[open] > summary { margin-bottom: 12px; filter: saturate(.7) brightness(.9); }
.forum-form {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 2px solid var(--edge);
    border-radius: 14px;
    background: rgba(0, 0, 0, .28);
}
.forum-reply { margin-top: 16px; }
.forum-as { display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, .75); font-size: .92rem; }
.forum-as .pava { width: 36px; height: 36px; }
.forum-as .pava-in { font-size: 1.1rem; }
.forum-field { display: grid; gap: 6px; }
.forum-field > span { font-weight: 700; font-size: .85rem; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.forum-field input, .forum-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--edge);
    border-radius: 12px;
    background: #120a1e;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    line-height: 1.45;
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, .4);
    resize: vertical;
    user-select: text;
    -webkit-user-select: text;
}
.forum-field textarea { min-height: 7rem; max-height: calc(50 * var(--u-vh)); }
.forum-field input:focus, .forum-field textarea:focus { outline: none; border-color: #7fdc4e; }
.forum-field [aria-invalid="true"] { border-color: var(--danger); }
.forum-submit { justify-self: end; min-width: 10rem; }
.forum-empty { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 4px; color: rgba(255, 255, 255, .7); text-align: center; }

/* Sujet : titre + messages façon cartes, auteur en tête (personnage). */
.forum-topic-title { margin: 6px 0 0; padding-right: 48px; font-size: clamp(1.3rem, calc(3 * var(--u-vw)), 1.8rem); font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; text-shadow: 0 2px 0 var(--edge); }
.forum-post {
    display: grid;
    gap: 10px;
    padding: 14px 16px 16px;
    border: 2px solid var(--edge);
    border-radius: 14px;
    background: linear-gradient(180deg, #24163a, #170d26);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06), 0 3px 0 var(--edge);
}
.forum-post.is-mine { background: linear-gradient(180deg, #1d3326, #13211a); }
.forum-author { display: flex; align-items: center; gap: 14px; }
.forum-author-txt { display: grid; min-width: 0; }
.forum-author-txt strong { overflow: hidden; font-weight: 900; font-size: 1.05rem; white-space: nowrap; text-overflow: ellipsis; }
.forum-when { margin-left: auto; white-space: nowrap; }
.forum-body {
    font-size: 1rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    user-select: text;
    -webkit-user-select: text;
}

/* Pagination */
.forum-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; }
.forum-page {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border: 2px solid var(--edge);
    border-radius: 10px;
    background: linear-gradient(180deg, #2c1a44, #1a0f2a);
    color: #fff;
    font: inherit;
    font-weight: 900;
    box-shadow: 0 3px 0 var(--edge);
    cursor: pointer;
}
.forum-page .ico { font-size: 1rem; }
.forum-page.is-current { background: var(--sun-btn); cursor: default; }
.forum-page:disabled:not(.is-current) { opacity: .35; cursor: default; }
.forum-gap { color: rgba(255, 255, 255, .5); }

/* ==========================================================================
   Chat en jeu (salon = ville + langue) : bouton au-dessus du téléphone,
   panneau non bloquant à droite (feuille du bas en mobile).
   ========================================================================== */
.chat-btn { bottom: calc(var(--dock-b) + var(--dock-h) + 10px); }
.chat-btn .ico { font-size: 26px; }
.chat-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 2px solid var(--edge);
    border-radius: 12px;
    background: linear-gradient(180deg, #ff6a6a, #d61f3a);
    color: #fff;
    font-weight: 900;
    font-size: .8rem;
    line-height: 1;
    box-shadow: 0 2px 0 var(--edge);
}
.chat-badge.is-bump { animation: chat-bump .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes chat-bump { 0% { scale: .4; } 60% { scale: 1.25; } 100% { scale: 1; } }

.chat {
    position: fixed;
    right: 88px;
    bottom: 18px;
    z-index: 38; /* sous les fenêtres (#layer 40), au-dessus de la carte */
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: min(380px, calc(calc(100 * var(--u-vw)) - 110px));
    height: min(520px, calc(calc(100 * var(--u-svh)) - 150px));
    border: var(--edge-w, 3px) solid var(--edge);
    border-radius: 20px;
    background: rgba(16, 10, 26, .92);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    box-shadow: 0 5px 0 var(--edge), 0 20px 50px rgba(5, 2, 12, .6);
    overflow: hidden;
    transform-origin: 100% 100%;
    animation: chat-in .28s cubic-bezier(.34, 1.56, .64, 1);
}
.chat[hidden] { display: none; }
.chat.is-out { animation: chat-out .2s ease-in forwards; }
@keyframes chat-in { from { opacity: 0; scale: .9; translate: 0 14px; } }
@keyframes chat-out { to { opacity: 0; scale: .94; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .chat, .chat.is-out, .chat-badge.is-bump { animation: none; } }

.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 10px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0));
    border-bottom: 2px solid rgba(0, 0, 0, .35);
}
.chat-title { font-size: 1.25rem; font-weight: 900; font-style: italic; text-transform: uppercase; text-shadow: 0 2px 0 var(--edge); }
.chat-chan { overflow: hidden; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .4); color: rgba(255, 255, 255, .8); font-size: .8rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }

.chat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 12px 12px 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-width: thin;
}
.chat-empty { margin: 0; padding: 0 20px; color: rgba(255, 255, 255, .6); text-align: center; align-self: center; }
.chat-empty[hidden] { display: none; }
.chat-msg { display: flex; align-items: flex-start; gap: 10px; }
.chat-ava { width: 34px; height: 34px; margin-top: 2px; }
.chat-ava .pava-in { font-size: 1rem; border-width: 2px; box-shadow: 0 2px 0 var(--edge); }
.chat-ava .pava-lv { right: -6px; bottom: -5px; min-width: 18px; height: 18px; font-size: .66rem; border-width: 1.5px; }
.chat-bubble {
    min-width: 0;
    max-width: calc(100% - 44px);
    padding: 7px 12px 8px;
    border: 2px solid var(--edge);
    border-radius: 4px 14px 14px 14px;
    background: linear-gradient(180deg, #2c1a44, #1f1233);
    box-shadow: 0 2px 0 var(--edge);
}
.chat-msg.is-mine { flex-direction: row-reverse; }
.chat-msg.is-mine .chat-bubble { border-radius: 14px 4px 14px 14px; background: linear-gradient(180deg, #1f6b3c, #15502c); }
.chat-who { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; }
.chat-who strong { overflow: hidden; font-weight: 900; font-size: .88rem; white-space: nowrap; text-overflow: ellipsis; color: #ffc531; }
.chat-msg.is-mine .chat-who strong { color: #c8f05a; }
.chat-who time { flex: none; color: rgba(255, 255, 255, .45); font-size: .72rem; }
.chat-text { margin: 0; font-size: .95rem; line-height: 1.35; overflow-wrap: anywhere; }

.chat-error { margin: 0 12px 6px; padding: 6px 10px; border-radius: 10px; background: rgba(214, 31, 58, .25); color: #ffd0d6; font-size: .85rem; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 2px solid rgba(0, 0, 0, .35); }
.chat-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 2px solid var(--edge);
    border-radius: 12px;
    background: #120a1e;
    color: #fff;
    font: inherit;
    font-size: 1rem;
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, .4);
    user-select: text;
    -webkit-user-select: text;
}
.chat-input:focus { outline: none; border-color: #7fdc4e; }
.chat-send {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 44px;
    border: 2px solid var(--edge);
    border-radius: 12px;
    background: linear-gradient(180deg, #8ef05a 0%, #4fcf36 45%, #2fa82a 100%);
    color: #fff;
    box-shadow: inset 0 -3px 0 #1e7d1f, inset 0 2px 0 rgba(255, 255, 255, .55), 0 2px 0 var(--edge);
    cursor: pointer;
}
.chat-send .ico { font-size: 22px; }
.chat-send:active { translate: 0 1px; }

/* Mobile : feuille du bas pleine largeur, au-dessus du dock. */
@media (max-width: 640px) {
    .chat { left: 10px; right: 10px; bottom: 72px; width: auto; height: min(calc(62 * var(--u-svh)), 520px); transform-origin: 50% 100%; }
}

/* ==========================================================================
   Statuts (badges) et outils de modération (forum, chat).
   ========================================================================== */
.role-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px 1px;
    border: 2px solid var(--edge);
    border-radius: 6px;
    color: #fff;
    font-size: .68rem;
    font-weight: 900;
    font-style: normal;
    line-height: 1.2;
    text-transform: uppercase;
    vertical-align: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 2px 0 var(--edge);
}
.role-admin { background: linear-gradient(180deg, #ff6a6a, #d61f3a); }
.role-moderator { background: linear-gradient(180deg, #5fb8ff, #2a6fdb); }
.forum-as .role-badge { margin-left: 0; }

.mod-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 10px;
    border: 2px dashed rgba(95, 184, 255, .45);
    border-radius: 12px;
    background: rgba(42, 111, 219, .12);
}
.mod-bar form, .mod-post form { display: contents; }
.mod-bar-label { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: #9fd2ff; font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.mod-post { display: inline-flex; align-items: center; gap: 6px; }
.mod-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 2px solid var(--edge);
    border-radius: 9px;
    background: linear-gradient(180deg, #5fb8ff, #2a6fdb);
    color: #fff;
    font: inherit;
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 2px 0 var(--edge);
    cursor: pointer;
    transition: transform .15s, filter .15s;
}
.mod-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.mod-btn--danger { background: linear-gradient(180deg, #ff6a6a, #d61f3a); }
.mod-btn--icon { width: 32px; padding: 0; }
.mod-btn--icon .ico { font-size: 16px; }
/* 1er clic sur une action sensible : « Confirmer ? » qui pulse. */
.mod-btn.is-armed { width: auto; padding: 0 12px; background: #ffb21e; color: var(--edge); animation: mod-armed .6s ease-in-out infinite alternate; }
@keyframes mod-armed { to { filter: brightness(1.2); transform: scale(1.04); } }

/* Chat : corbeille de modération discrète, rouge au survol ; armée = « confirmer ». */
.chat-who .role-badge { margin-left: 0; font-size: .6rem; padding: 1px 5px 0; }
.chat-del {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, .4);
    cursor: pointer;
}
.chat-del .ico { font-size: 14px; }
.chat-del:hover { color: #fff; background: #d61f3a; }
.chat-del.is-armed { color: var(--edge); background: #ffb21e; animation: mod-armed .6s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .mod-btn.is-armed, .chat-del.is-armed { animation: none; } }

/* ==========================================================================
   Classement : portée (ville / toutes), type (points / niveau / superficie).
   ========================================================================== */
.phone-app--trophy { --c: #e2a400; }
.sheet--rank { width: min(780px, 100%); }
.rank-scope {
    display: inline-flex;
    gap: 4px;
    margin-top: 14px;
    padding: 4px;
    border: 2px solid var(--edge);
    border-radius: 14px;
    background: rgba(0, 0, 0, .35);
}
.rank-pill {
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    font: inherit;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}
.rank-pill.is-on { background: var(--sun-btn); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 2px 0 var(--edge); text-shadow: 0 1px 0 var(--edge); }
.rank-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.rank-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border: 2px solid var(--edge);
    border-radius: 12px;
    background: linear-gradient(180deg, #2c1a44, #1a0f2a);
    color: rgba(255, 255, 255, .75);
    font: inherit;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 3px 0 var(--edge);
    cursor: pointer;
    transition: transform .15s;
}
.rank-tab:hover { transform: translateY(-1px); }
.rank-tab .ico { font-size: 18px; }
.rank-tab.is-on { background: linear-gradient(180deg, #8ef05a 0%, #4fcf36 45%, #2fa82a 100%); color: #fff; text-shadow: 0 1px 0 var(--edge); box-shadow: inset 0 -3px 0 #1e7d1f, inset 0 2px 0 rgba(255, 255, 255, .55), 0 3px 0 var(--edge); }
.rank-tab.is-on .ico { filter: drop-shadow(0 1px 0 var(--edge)); }

.rank-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.rank-row {
    display: grid;
    grid-template-columns: 3rem auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 8px 16px 8px 10px;
    border: 2px solid var(--edge);
    border-radius: 14px;
    background: linear-gradient(180deg, #2c1a44, #1a0f2a);
    box-shadow: 0 3px 0 var(--edge);
}
.rank-row .pava { width: 40px; height: 40px; }
.rank-row .pava-in { font-size: 1.2rem; }
.rank-row.is-me { border-color: #7fdc4e; background: linear-gradient(180deg, #1f6b3c, #15502c); }
.rank-n { justify-self: center; font-weight: 900; font-size: 1.15rem; color: rgba(255, 255, 255, .8); }
/* Podium : blasons or / argent / bronze. */
.rank-n--1, .rank-n--2, .rank-n--3 {
    display: grid;
    place-items: center;
    width: 38px;
    height: 40px;
    border: 2px solid var(--edge);
    border-radius: 10px 10px 50% 50%;
    color: #fff;
    text-shadow: 0 1px 0 var(--edge), 1px 0 0 var(--edge), -1px 0 0 var(--edge), 0 -1px 0 var(--edge);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 2px 0 var(--edge);
}
.rank-n--1 { background: linear-gradient(180deg, #ffe27a, #ffb21e 60%, #e08a00); }
.rank-n--2 { background: linear-gradient(180deg, #f2f4fa, #b8bfd1 60%, #8a93a8); }
.rank-n--3 { background: linear-gradient(180deg, #ffc39a, #d27a3c 60%, #9c5222); }
.rank-who { display: grid; min-width: 0; }
.rank-who strong { overflow: hidden; font-weight: 900; font-size: 1.05rem; white-space: nowrap; text-overflow: ellipsis; }
.rank-val { display: grid; justify-items: end; line-height: 1.15; }
.rank-val b { font-weight: 900; font-size: 1.1rem; white-space: nowrap; }
.rank-val span { color: rgba(255, 255, 255, .55); font-size: .78rem; white-space: nowrap; }
.rank-me-label { margin: 14px 0 0; color: #c8f05a; font-weight: 900; font-size: .8rem; text-transform: uppercase; text-align: center; }
.rank-list--me { margin-top: 14px; }
@media (max-width: 640px) {
    .rank-scope { display: flex; }
    .rank-pill { flex: 1; padding: 0 8px; }
    .rank-tab { gap: 6px; font-size: .85rem; }
    .rank-row { grid-template-columns: 2.4rem auto minmax(0, 1fr) auto; gap: 10px; padding-right: 12px; }
}

/* Petits CTA sur fond sombre : le contour sombre seul disparaît. Liseré clair
   teinté de la couleur du bouton + anneau sombre extérieur + tranche foncée. */
.mod-btn {
    border-color: #b9e2ff;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 #1d4fa8, 0 0 0 2px var(--edge), 0 4px 0 var(--edge);
}
.mod-btn--danger {
    border-color: #ffc2c9;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 #9c1028, 0 0 0 2px var(--edge), 0 4px 0 var(--edge);
}
.mod-btn.is-armed {
    border-color: #fff1c2;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 #b86f00, 0 0 0 2px var(--edge), 0 4px 0 var(--edge);
}
.chat-send, .rank-tab.is-on {
    border-color: #d9ffb8;
    box-shadow: inset 0 -3px 0 #1e7d1f, inset 0 2px 0 rgba(255, 255, 255, .55), 0 0 0 2px var(--edge), 0 4px 0 var(--edge);
}
.forum-page, .rank-tab {
    border-color: rgba(214, 190, 255, .45);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 0 0 2px var(--edge), 0 4px 0 var(--edge);
}
.forum-page.is-current, .rank-pill.is-on {
    border: 2px solid #ffe0b8;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 #c2410c, 0 0 0 2px var(--edge), 0 3px 0 var(--edge);
}

/* Pseudos (forum, classement, chat) : texte « Supercell » (blanc, contour sombre,
   ombre dure) ; la ville colle au nom. */
.forum-author-txt strong, .rank-who strong, .chat-who strong {
    -webkit-text-stroke: 4px var(--edge);
    paint-order: stroke fill;
    text-shadow: 0 2px 0 var(--edge);
    line-height: 1.15;
}
.chat-who strong { -webkit-text-stroke-width: 3px; }
.forum-author-txt, .rank-who { gap: 0; }
.forum-author-txt .forum-meta, .rank-who .forum-meta { margin-top: -1px; line-height: 1.1; }
/* Badges de statut : liseré clair + anneau sombre (lisibles sur fond vert / violet). */
.role-badge { -webkit-text-stroke: 2px var(--edge); paint-order: stroke fill; text-shadow: none; }
.role-admin { border-color: #ffc2c9; box-shadow: inset 0 -2px 0 #9c1028, 0 0 0 2px var(--edge), 0 2px 0 var(--edge); }
.role-moderator { border-color: #b9e2ff; box-shadow: inset 0 -2px 0 #1d4fa8, 0 0 0 2px var(--edge), 0 2px 0 var(--edge); }

/* ==========================================================================
   Onglets segmentés (classement…) : piste sombre + pastille active qui glisse
   et rebondit vers l'onglet choisi (comme QG / Ville). JS : syncSegs().
   ========================================================================== */
.seg {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 5px;
    border: 2.5px solid rgba(214, 190, 255, .4);
    border-radius: 16px;
    background: rgba(0, 0, 0, .38);
    box-shadow: 0 0 0 2.5px var(--edge), inset 0 3px 0 rgba(0, 0, 0, .35);
}
.rank-scope.seg { display: inline-grid; margin-top: 16px; }
.rank-types.seg { margin-top: 12px; }
.seg > button, .seg .rank-tab, .seg .rank-pill {
    position: relative;
    z-index: 1;
    height: 40px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    box-shadow: none;
    color: rgba(255, 255, 255, .62);
    transition: color .25s;
}
.seg .rank-tab:hover, .seg .rank-pill:hover { transform: none; color: #fff; }
.seg > .is-on { color: #fff; text-shadow: 0 2px 0 var(--edge); -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.seg > .is-on .ico { filter: drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 -1px 0 var(--edge)); }
.seg-pill {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: var(--w, 0);
    transform: translateX(var(--x, 0));
    border: 2.5px solid #ffe0b8;
    border-radius: 11px;
    background: var(--sun-btn);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -3px 0 #c2410c, 0 0 0 2.5px var(--edge), 0 3px 0 var(--edge);
    transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), width .6s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
}
.seg--green .seg-pill {
    border-color: #d9ffb8;
    background: linear-gradient(180deg, #8ef05a 0%, #4fcf36 45%, #2fa82a 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 #1e7d1f, 0 0 0 2.5px var(--edge), 0 3px 0 var(--edge);
}
.seg-pill.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .seg-pill { transition: none; } }

/* Petits CTA : liseré un peu plus prononcé. */
.mod-btn, .forum-page, .chat-send { border-width: 2.5px; }
.mod-btn, .mod-btn--danger, .mod-btn.is-armed, .chat-send, .forum-page, .forum-page.is-current {
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 var(--slice, rgba(0, 0, 0, .3)), 0 0 0 2.5px var(--edge), 0 4px 0 var(--edge);
}
.mod-btn { --slice: #1d4fa8; }
.mod-btn--danger { --slice: #9c1028; }
.mod-btn.is-armed { --slice: #b86f00; }
.chat-send { --slice: #1e7d1f; }
.forum-page { --slice: rgba(0, 0, 0, .3); border-color: rgba(214, 190, 255, .55); }
.forum-page.is-current { --slice: #c2410c; }

/* Classement compact : plus de lignes visibles. */
.rank-list { gap: 6px; margin-top: 12px; }
.rank-row { gap: 12px; padding: 5px 14px 5px 8px; border-radius: 12px; }
.rank-row .pava { width: 34px; height: 34px; }
.rank-row .pava-in { font-size: 1.05rem; }
.rank-row .pava-lv { min-width: 19px; height: 20px; font-size: .7rem; right: -6px; bottom: -5px; }
.rank-n { font-size: 1.05rem; }
.rank-n--1, .rank-n--2, .rank-n--3 { width: 32px; height: 34px; }
.rank-who strong { font-size: .98rem; }
.rank-val b { font-size: 1rem; }
.rank-val span { font-size: .74rem; }
@media (max-width: 640px) { .rank-row { padding-right: 10px; } }

/* Onglets du classement un peu plus compacts. */
.seg { padding: 4px; border-radius: 14px; }
.seg-pill { top: 4px; bottom: 4px; border-radius: 10px; }
.seg > button, .seg .rank-tab, .seg .rank-pill { height: 34px; border-radius: 10px; font-size: .9rem; }
.seg .rank-tab .ico { font-size: 16px; }
.rank-scope.seg { margin-top: 12px; }
.rank-types.seg { margin-top: 8px; }
@media (max-width: 640px) { .seg > button, .seg .rank-tab, .seg .rank-pill { font-size: .82rem; } }

/* Pagination (forum, classement) : texte légèrement réduit. */
.forum-page { min-width: 34px; height: 34px; font-size: .88rem; }
.forum-page .ico { font-size: .9rem; }

/* Classement : « … » entre le top et l'entourage du joueur (3 points dessinés, pas de glyphe). */
.rank-gap { display: flex; justify-content: center; gap: 6px; margin: 10px 0 0; }
.rank-gap i { width: 7px; height: 7px; border: 2px solid var(--edge); border-radius: 50%; background: rgba(214, 190, 255, .55); }
.rank-list--around { margin-top: 10px; }

/* Filtres du classement : portée + type sur une ligne en desktop (2 colonnes,
   onglets de même largeur : 2 + 3 onglets => 2fr / 3fr), empilés en mobile. */
.rank-filters { display: grid; gap: 8px; margin-top: 12px; }
.rank-filters .seg { margin-top: 0; }
.rank-filters .rank-scope.seg { display: grid; }

/* Type de classement : type affiché (pastille verte) + « Tous les classements » qui déplie un menu
   de tuiles par-dessus la liste (un menu plutôt qu'une rangée d'onglets qui s'allonge). */
.rank-menu { position: relative; min-width: 0; }
.rank-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 5px;
    border: 2.5px solid rgba(214, 190, 255, .4);
    border-radius: 16px;
    background: rgba(0, 0, 0, .38);
    box-shadow: 0 0 0 2.5px var(--edge), inset 0 3px 0 rgba(0, 0, 0, .35);
    list-style: none;
    cursor: pointer;
}
.rank-menu-btn::-webkit-details-marker { display: none; }
.rank-menu-cur {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    min-width: 0;
    padding: 0 14px;
    border: 2.5px solid #d9ffb8;
    border-radius: 11px;
    background: linear-gradient(180deg, #8ef05a 0%, #4fcf36 45%, #2fa82a 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 #1e7d1f, 0 0 0 2.5px var(--edge), 0 3px 0 var(--edge);
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 2px 0 var(--edge);
    -webkit-text-stroke: 3px var(--edge);
    paint-order: stroke fill;
    white-space: nowrap;
}
.rank-menu-cur b { font-weight: 900; }
.rank-menu-cur .ico { flex: none; filter: drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 -1px 0 var(--edge)); }
.rank-menu-all { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding-right: 8px; color: rgba(255, 255, 255, .72); font-size: .85rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; transition: color .2s; }
.rank-menu-btn:hover .rank-menu-all, .rank-menu[open] .rank-menu-all { color: #fff; }
.rank-menu-chev { transition: transform .25s; }
.rank-menu[open] .rank-menu-chev { transform: rotate(90deg); }
.rank-menu-list {
    position: absolute;
    z-index: 6;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 6px;
    padding: 8px;
    border: 2.5px solid rgba(214, 190, 255, .4);
    border-radius: 16px;
    background: #1d1030;
    box-shadow: 0 0 0 2.5px var(--edge), 0 16px 32px rgba(0, 0, 0, .6);
    animation: rank-menu-in .18s ease-out;
}
.rank-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 64px;
    padding: 6px;
    border: 2px solid var(--edge);
    border-radius: 12px;
    background: linear-gradient(180deg, #2c1a44, #1a0f2a);
    box-shadow: 0 3px 0 var(--edge);
    color: rgba(255, 255, 255, .75);
    font: inherit;
    font-size: .8rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.rank-menu-item .ico { font-size: 1.35rem; }
.rank-menu-item:hover { color: #fff; border-color: rgba(214, 190, 255, .55); }
.rank-menu-item.is-on {
    border-color: #d9ffb8;
    background: linear-gradient(180deg, #8ef05a 0%, #4fcf36 45%, #2fa82a 100%);
    color: #fff;
    text-shadow: 0 2px 0 var(--edge);
    -webkit-text-stroke: 3px var(--edge);
    paint-order: stroke fill;
}
.rank-menu-item.is-on .ico { filter: drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 -1px 0 var(--edge)); }
@keyframes rank-menu-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .rank-menu-list { animation: none; } .rank-menu-chev { transition: none; } }
/* Menu ouvert : la fenêtre grandit assez pour le contenir (classement des familles à 1 ligne). */
.sheet--rank:has(.rank-menu[open]) { min-height: 430px; }
@media (min-width: 641px) { .rank-menu-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .rank-menu-btn { height: 44px; padding: 4px; border-radius: 14px; }
    .rank-menu-cur { padding: 0 10px; border-radius: 10px; font-size: .9rem; }
    .rank-menu-all { font-size: .76rem; padding-right: 4px; }
}
@media (min-width: 641px) {
    .rank-filters { grid-template-columns: 1fr 1.4fr; gap: 10px; }
    .rank-filters:not(:has(.rank-scope)) { grid-template-columns: 1fr; } /* familles : pas de portée */
}
.seg > button { white-space: nowrap; padding: 0 12px; }
@media (min-width: 641px) { .rank-filters { grid-template-columns: auto 1fr; } }
/* « … » du classement : points plus serrés, un peu plus d'air autour. */
.rank-gap { gap: 4px; margin: 14px 0 4px; }
.rank-list--around { margin-top: 14px; }
/* Classement : valeur un peu plus petite, lignes un peu moins hautes. */
.rank-val b { font-size: .92rem; }
.rank-val span { font-size: .7rem; }
.rank-row { padding-top: 3px; padding-bottom: 3px; }

/* Classement « toutes les villes » : ville en petit dans sa propre colonne. */
.rank-row { grid-template-areas: "n ava who val"; }
.rank-row > .rank-n { grid-area: n; }
.rank-row > .pava { grid-area: ava; }
.rank-row > .rank-who { grid-area: who; }
.rank-row > .rank-val { grid-area: val; }
.rank-row > .rank-city { grid-area: city; min-width: 0; overflow: hidden; color: rgba(255, 255, 255, .55); font-size: .78rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.rank-row.has-city { grid-template-columns: 3rem auto minmax(0, 1fr) 8rem auto; grid-template-areas: "n ava who city val"; }
@media (max-width: 640px) {
    .rank-row.has-city {
        grid-template-columns: 2.4rem auto minmax(0, 1fr) auto;
        grid-template-areas: "n ava who val" "n ava city val";
        row-gap: 0;
    }
    .rank-row.has-city > .rank-who { align-self: end; }
    .rank-row.has-city > .rank-city { align-self: start; font-size: .72rem; text-transform: none; font-weight: 500; }
}
/* Rangs à 4 chiffres (« 1 293 ») : jamais coupés. */
.rank-n { white-space: nowrap; }
@media (max-width: 640px) {
    .rank-row, .rank-row.has-city { grid-template-columns: 2.9rem auto minmax(0, 1fr) auto; }
    .rank-n { font-size: .92rem; }
}

/* Rang : insécable, plus petit à partir de 100 puis de 1000. */
.rank-n { white-space: nowrap; }
.rank-n.is-l { font-size: .9rem; }
.rank-n.is-xl { font-size: .76rem; }
@media (max-width: 640px) {
    .rank-row, .rank-row.has-city { padding-top: 6px; padding-bottom: 6px; }
    .rank-n { font-size: .95rem; }
    .rank-n.is-l { font-size: .82rem; }
    .rank-n.is-xl { font-size: .7rem; }
}

/* Forum / classement (desktop) : la fenêtre peut descendre par-dessus le dock
   (onglets, téléphone) au lieu de s'arrêter au-dessus. */
@media (min-width: 641px) {
    .sheet-wrap:has(.sheet--forum) { padding-bottom: 16px; }
    .sheet--forum { max-height: calc(calc(100 * var(--u-svh)) - 112px - 16px); }
}

/* Chat : même bouton de fermeture que les fenêtres (.sheet-close), dans le coin. */
.chat .sheet-close { top: 10px; right: 10px; }
.chat-head { padding-right: 62px; min-height: 60px; }

/* Tag « Épinglé » : même rendu que les badges (texte blanc contouré sur or,
   liseré clair + anneau sombre), sans hériter de l'ombre du titre. */
.forum-tag {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px 1px;
    border: 2px solid #fff1c2;
    border-radius: 6px;
    background: linear-gradient(180deg, #ffd56a, #ffa726 55%, #f57c00);
    color: #fff;
    font-size: .68rem;
    font-weight: 900;
    font-style: normal;
    line-height: 1.25;
    text-transform: uppercase;
    vertical-align: .25em;
    text-shadow: none;
    -webkit-text-stroke: 2px var(--edge);
    paint-order: stroke fill;
    box-shadow: inset 0 -2px 0 #b86f00, 0 0 0 2px var(--edge), 0 2px 0 var(--edge);
}
.forum-topic-title .forum-tag { font-size: .62em; }
/* Classement : texte secondaire de la valeur (pts, XP, cases) un peu plus petit. */
.rank-val span { font-size: .64rem; }

/* ==========================================================================
   Boutons de modération v2 : mini-version des boutons 3D du jeu (texte blanc
   contouré, reflet brillant, tranche foncée, liseré clair + anneau sombre).
   Violet secondaire (palette du jeu, plus de bleu), rouge pour supprimer.
   ========================================================================== */
.mod-bar {
    border: 2.5px solid rgba(214, 190, 255, .35);
    border-radius: 14px;
    background: rgba(0, 0, 0, .3);
    box-shadow: 0 0 0 2px var(--edge), inset 0 3px 0 rgba(0, 0, 0, .3);
    padding: 8px 10px;
}
.mod-bar-label { color: var(--sun, #ffc531); -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; text-shadow: 0 2px 0 var(--edge); }
.mod-bar-label .ico { filter: drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 -1px 0 var(--edge)); }
.mod-btn,
.mod-btn--danger,
.mod-btn.is-armed {
    position: relative;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 2.5px solid rgba(226, 210, 255, .7);
    border-radius: 10px;
    background: linear-gradient(180deg, #7d6bb8 0%, #4b3a80 100%);
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
    -webkit-text-stroke: 3px var(--edge);
    paint-order: stroke fill;
    text-shadow: 0 2px 0 var(--edge);
    box-shadow: inset 0 -3px 0 #2b1f52, 0 0 0 2px var(--edge), 0 4px 0 var(--edge), 0 6px 10px rgba(0, 0, 0, .35);
    overflow: hidden;
}
.mod-btn::before { /* reflet brillant en haut, comme les gros boutons */
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    top: 2px;
    height: 42%;
    border-radius: 7px 7px 40% 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
    pointer-events: none;
}
.mod-btn .ico { position: relative; font-size: 15px; filter: drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 -1px 0 var(--edge)) drop-shadow(1px 0 0 var(--edge)) drop-shadow(-1px 0 0 var(--edge)); }
.mod-btn--danger { border-color: #ffc2c9; background: linear-gradient(180deg, #ff6a6a 0%, #d61f3a 100%); box-shadow: inset 0 -3px 0 #8f0f26, 0 0 0 2px var(--edge), 0 4px 0 var(--edge), 0 6px 10px rgba(0, 0, 0, .35); }
.mod-btn.is-armed { border-color: #fff1c2; background: linear-gradient(180deg, #ffd56a 0%, #ffa726 55%, #f57c00 100%); color: #fff; box-shadow: inset 0 -3px 0 #b86f00, 0 0 0 2px var(--edge), 0 4px 0 var(--edge), 0 6px 10px rgba(0, 0, 0, .35); }
.mod-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.mod-btn:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3), 0 0 0 2px var(--edge), 0 1px 0 var(--edge); }
.mod-btn--icon { width: 34px; padding: 0; }
.mod-btn--icon.is-armed { width: auto; padding: 0 12px; }

/* « Nouveau sujet » ouvert : le bouton laisse place au formulaire (avec son titre). */
.forum-new[open] > summary { display: none; }
.forum-new-title { margin: 0; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; color: #fff; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; text-shadow: 0 2px 0 var(--edge); }

/* Bannière mission / niveau : la bande enveloppe le contenu, titre et sous-titre centrés dedans. */
.mission { place-content: center stretch; }
.mission::before { content: none; }
.mission-band {
    display: grid;
    justify-items: center;
    gap: 10px;
    width: 100%;
    padding: 26px 20px 30px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .75) 20%, rgba(0, 0, 0, .75) 80%, transparent);
    text-align: center;
}
.mission-band .mission-title { margin: 0; line-height: 1; }
.mission-band .mission-sub { margin: 0; line-height: 1.1; }

/* ==========================================================================
   Forum : lu / non lu. Non lu = liseré or à gauche, titre blanc plein,
   étiquette « Nouveau » ; lu = atténué. Catégories : pastille de non-lus.
   ========================================================================== */
.forum-topic.is-read { background: linear-gradient(180deg, #221536, #170d24); }
.forum-topic.is-read .forum-topic-main strong { color: rgba(255, 255, 255, .62); font-weight: 700; }
.forum-topic.is-read .forum-topic-count b { color: rgba(255, 255, 255, .6); }
.forum-topic.is-unread,
.forum-cat.is-unread { box-shadow: inset 5px 0 0 #ffc531, inset 0 2px 0 rgba(255, 255, 255, .1), 0 3px 0 var(--edge); }
.forum-topic.is-unread { background: linear-gradient(180deg, #3a2258, #241440); }
.forum-topic.is-unread .forum-topic-main strong { color: #fff; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; text-shadow: 0 2px 0 var(--edge); }
.forum-tag--new {
    border-color: #d9ffb8;
    background: linear-gradient(180deg, #8ef05a 0%, #4fcf36 45%, #2fa82a 100%);
    box-shadow: inset 0 -2px 0 #1e7d1f, 0 0 0 2px var(--edge), 0 2px 0 var(--edge);
}

/* Pastille de sujets non lus sur l'icône de catégorie. */
.forum-cat-ico { position: relative; }
.forum-unread-badge {
    position: absolute;
    top: -9px;
    right: -9px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border: 2px solid #ffc2c9;
    border-radius: 11px;
    background: linear-gradient(180deg, #ff6a6a, #d61f3a);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    font-style: normal;
    line-height: 1;
    -webkit-text-stroke: 2px var(--edge);
    paint-order: stroke fill;
    box-shadow: 0 0 0 2px var(--edge), 0 2px 0 var(--edge);
}

/* Dans un sujet : séparateur « Nouveaux messages » + messages non lus soulignés. */
.forum-new-sep { display: flex; align-items: center; gap: 12px; margin: 4px 0; color: #c8f05a; font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.forum-new-sep::before, .forum-new-sep::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #7fdc4e); }
.forum-new-sep::after { background: linear-gradient(90deg, #7fdc4e, transparent); }
.forum-new-sep span { -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; text-shadow: 0 2px 0 var(--edge); }
.forum-post.is-unread { box-shadow: inset 5px 0 0 #7fdc4e, inset 0 2px 0 rgba(255, 255, 255, .06), 0 3px 0 var(--edge); }
.forum-when .forum-tag--new { margin-right: 8px; vertical-align: 1px; }
/* Forum : sujets déjà lus en retrait (opacité réduite), pleine opacité au survol. */
.forum-topic.is-read { opacity: .58; transition: opacity .2s, transform .2s var(--ease-out), background .2s; }
.forum-topic.is-read:hover, .forum-topic.is-read:focus-visible { opacity: 1; }

/* Chat : messages enchaînés d'un même joueur fusionnés (façon iMessage).
   1er du groupe : nom + heure ; suivants : bulle seule, serrée ; avatar en bas
   du groupe (sur le dernier) ; coins resserrés côté jonction. */
.chat-msg { align-items: flex-end; }
.chat-msg.is-cont { margin-top: -7px; }
.chat-msg.is-cont .chat-who { display: none; }
.chat-msg.has-next .chat-ava { visibility: hidden; }
.chat-msg.has-next .chat-bubble { border-bottom-left-radius: 6px; }
.chat-msg.is-cont .chat-bubble { border-top-left-radius: 6px; }
.chat-msg.is-mine.has-next .chat-bubble { border-bottom-left-radius: 14px; border-bottom-right-radius: 6px; }
.chat-msg.is-mine.is-cont .chat-bubble { border-top-left-radius: 14px; border-top-right-radius: 6px; }
/* Dernière bulle du groupe : petite « queue » côté avatar. */
.chat-msg:not(.has-next) .chat-bubble { border-bottom-left-radius: 4px; }
.chat-msg.is-mine:not(.has-next) .chat-bubble { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.chat-msg .chat-bubble { border-top-left-radius: 14px; }
.chat-msg.is-cont .chat-bubble { border-top-left-radius: 6px; }
.chat-msg.is-mine .chat-bubble { border-top-right-radius: 14px; }
.chat-msg.is-mine.is-cont .chat-bubble { border-top-left-radius: 14px; border-top-right-radius: 6px; }
/* Forum : catégories sans sujet non lu en retrait, comme les sujets lus. */
.forum-cat.is-read { opacity: .58; transition: opacity .2s, transform .2s var(--ease-out), background .2s; }
.forum-cat.is-read:hover, .forum-cat.is-read:focus-visible { opacity: 1; }

/* Outils de modération sur chaque message : discrets (petits, icône seule,
   presque effacés), révélés au survol du message ou au focus clavier. */
.mod-post { gap: 4px; opacity: .35; transition: opacity .2s; }
.forum-post:hover .mod-post, .mod-post:focus-within { opacity: 1; }
.mod-post .mod-btn {
    width: 26px;
    height: 26px;
    padding: 0;
    border-width: 2px;
    border-radius: 8px;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3), 0 0 0 1.5px var(--edge), 0 2px 0 var(--edge);
}
.mod-post .mod-btn::before { content: none; }
.mod-post .mod-btn .ico { font-size: 13px; }
.mod-post .mod-btn.is-armed { width: auto; padding: 0 8px; font-size: .7rem; }
@media (hover: none) { .mod-post { opacity: .7; } }

/* Écriture verrouillée sous le niveau requis (forum, chat). */
.forum-locked-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
    padding: 12px 16px;
    border: 2px dashed rgba(214, 190, 255, .35);
    border-radius: 12px;
    background: rgba(0, 0, 0, .25);
    color: rgba(255, 255, 255, .8);
    font-size: .92rem;
}
.forum-locked-note .ico { flex: none; color: #ffc531; font-size: 18px; }
.chat.is-locked .chat-input { opacity: .55; cursor: not-allowed; }
.chat.is-locked .chat-send, .chat-send:disabled { filter: grayscale(1) brightness(.7); cursor: not-allowed; } /* aussi : personnage du jeu (pas de réponse), joueur bloqué */
.chat-send:disabled:active { translate: none; }

/* Chat vide : la phrase se place au milieu de la zone des messages (plus en bas,
   collée au champ), un peu plus effacée. */
.chat-head { grid-row: 1; }
.chat-list { grid-row: 2; grid-column: 1; }
.chat-empty { grid-row: 2; grid-column: 1; align-self: center; justify-self: center; max-width: 80%; color: #fff; opacity: .42; pointer-events: none; }
.chat-error { grid-row: 3; }
.chat-form { grid-row: 4; }

/* Anneau d'XP du HUD : piste sombre large, barre lumineuse plus fine centrée
   dedans (marge de chaque côté) ; l'avatar touche le bord intérieur de la piste. */
.hud-xp-track { stroke: rgba(10, 4, 18, .78); stroke-width: 5.6; }
.hud-xp-bar { stroke-width: 2.6; }
.hud-avatar-wrap .hud-avatar { width: 47px; height: 47px; font-size: 1.45rem; }
@media (max-width: 640px) { .hud-avatar-wrap .hud-avatar { width: 33px; height: 33px; font-size: 1.05rem; } }

/* Boutons chat / téléphone : pictos à contour net dessiné dans le SVG
   (btn-chat, btn-phone) — plus d'ombre portée en filtre (bord crénelé). */
.phone-btn .ico, .chat-btn .ico { filter: none; color: inherit; font-size: 30px; }
@media (max-width: 640px) { .phone-btn .ico, .chat-btn .ico { font-size: 26px; } }

/* Téléphone : langues + déconnexion calées en bas de l'écran. */
.phone-screen { display: flex; flex-direction: column; }
.phone-langs { margin-top: auto; }
/* Picto déconnexion à contour net (dessiné dans le SVG) : pas de filtre d'ombre. */
.phone-logout-ico, .game .btn .phone-logout-ico { filter: none; font-size: 1.35em; }

/* Onglets QG / Ville : pictos à contour net dessiné dans le SVG (btn-hq, btn-map),
   plus de contour simulé par filtre ; couleur = celle du texte de l'onglet. */
.viewswitch .ico { filter: none; font-size: 1.5rem; }
.viewswitch button[aria-selected="true"] .ico { color: #fff; }
.viewswitch button .ico { color: inherit; }
.viewswitch button[aria-selected="true"] .ico { color: #fff; }

/* Fenêtres qui défilent : la croix de fermeture reste toujours visible dans le
   coin (collante). Flottante à droite, sans prendre de place dans le contenu. */
.sheet > .sheet-close {
    position: sticky;
    top: -16px;   /* = 14 px du bord : la contrainte collante part du bord du contenu (padding 30) */
    right: auto;  /* annule l'ancien right: 14px (décalait la croix collante) */
    float: right;
    z-index: 6;
    margin: -16px -14px -40px 8px;
}

/* Téléphone : croix de fermeture habituelle dans le coin (indispensable en mobile,
   où le téléphone couvre presque tout l'écran) ; plus compact sur mobile. */
.phone { position: absolute; }
.phone > .phone-close { position: absolute; top: -12px; right: -12px; z-index: 5; }
@media (max-width: 640px) {
    .phone { width: min(320px, calc(calc(100 * var(--u-vw)) - 48px)); height: min(560px, calc(calc(100 * var(--u-svh)) - 170px)); }
    .phone > .phone-close { top: -10px; right: -10px; }
}
@media (max-width: 640px) { .sheet > .sheet-close { margin-right: -4px; } }
/* Mobile : le téléphone monte jusque sous les ressources du HUD (≈ 96 px), plafonné à 680 px. */
@media (max-width: 640px) { .phone { height: min(680px, calc(calc(100 * var(--u-svh)) - 104px)); } }

/* Mobile : onglets QG / Ville tout en bas à droite ; téléphone puis chat empilés
   au-dessus (un cran plus haut chacun). */
@media (max-width: 640px) {
    .viewswitch { right: var(--dock-x); }
    .phone-btn[data-view="phone"] { bottom: calc(var(--dock-b) + var(--dock-h) + 10px); }
    .chat-btn { bottom: calc(var(--dock-b) + 2 * (var(--dock-h) + 10px)); }
    .chat { bottom: calc(var(--dock-b) + var(--dock-h) + 10px); }
}
/* Desktop : le téléphone déplié s'arrête sous les ressources du HUD (≈ 96 px) :
   il rétrécit en hauteur plutôt que de passer dessous. */
@media (min-width: 641px) { .phone { height: min(680px, calc(calc(100 * var(--u-svh)) - 116px)); } }

/* Mobile : téléphone un peu plus étroit, applis et bouton Déconnexion un peu plus petits. */
@media (max-width: 640px) {
    .phone { width: min(296px, calc(calc(100 * var(--u-vw)) - 64px)); }
    .phone-icon { width: 54px; height: 54px; border-radius: 15px; }
    .phone-icon .ico { font-size: 25px; }
    .phone-app { font-size: .82rem; }
    .phone-apps { gap: 14px 8px; }
    .phone .btn { min-height: 44px; font-size: .95rem; }
}
/* Mobile : le bloc identité s'étend jusqu'à 8 px des onglets QG / Ville (≈ 124 px de large). */
/* (largeur selon le contenu, plafonnée : jamais une longue barre vide) */
@media (max-width: 640px) { .hud-id { width: auto; max-width: min(240px, calc(calc(100 * var(--u-vw)) - 2 * var(--dock-x) - 132px)); } }
/* Mobile : le téléphone garde des proportions de vrai téléphone (9:19), dans la
   limite de la largeur (296 px max) ET de la hauteur dispo sous les ressources. */
@media (max-width: 640px) {
    .phone {
        aspect-ratio: 9 / 19;
        height: auto;
        width: min(296px, calc(calc(100 * var(--u-vw)) - 64px), calc((calc(100 * var(--u-svh)) - 104px) * 9 / 19));
    }
}
@media (max-width: 640px) {
    .phone-screen { padding: 18px 12px; gap: 18px; }
    .phone-app { font-size: .78rem; }
}

/* ==========================================================================
   Téléphone v2 : vraie interface de smartphone. Bord noir fin, écran plein
   (fond d'écran coucher de soleil), barre d'état avec île, widget heure / date,
   grille d'applis 4 colonnes, app Réglages en page interne.
   ========================================================================== */
.phone {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    padding: 9px;
    border-radius: 44px 44px 0 0;
    background: linear-gradient(160deg, #2b2233, #0b0710 40%, #050308);
    box-shadow: 0 0 0 2px #3a3045, inset 0 0 0 2px rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 0, 0, .7);
}
.phone-screen {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 36px 36px 0 0;
    background:
        radial-gradient(120% 70% at 50% 115%, rgba(255, 197, 49, .6), transparent 60%),
        radial-gradient(80% 50% at 10% 0%, rgba(255, 46, 136, .35), transparent 70%),
        linear-gradient(180deg, #1c0730 0%, #5a1250 45%, #b02a5c 75%, #ff7a1a 115%);
}
@media (max-width: 640px) { .phone-screen { padding: 0; gap: 0; } }

/* Barre d'état : heure | île | réseau, wifi, batterie. */
.phone-status {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 12px 22px 6px;
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
}
.phone-time { justify-self: start; font-variant-numeric: tabular-nums; }
.phone-island { width: 96px; height: 28px; border-radius: 16px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.phone-sys { justify-self: end; display: inline-flex; align-items: center; gap: 5px; }
.phone-sys .ico { font-size: 15px; filter: none; }
.phone-sys .phone-batt { width: 24px; font-size: 20px; }

/* Pages internes : empilées dans la même case de la grille (glissent l'une sur l'autre). */
.phone-page { grid-row: 2; grid-column: 1; min-height: 0; overflow-y: auto; padding: 10px 18px 12px; scrollbar-width: none; }
.phone-page[hidden] { display: none; }
.phone-page::-webkit-scrollbar { display: none; }

/* Widget heure / date / salut (verre fumé). */
.phone-widget {
    margin: 14px 0 22px;
    padding: 16px 18px 14px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    color: #fff;
}
.phone-big-time { margin: 0; font-size: 3.2rem; font-weight: 900; line-height: .95; font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.phone-date { margin: 4px 0 0; font-size: .95rem; font-weight: 700; text-transform: capitalize; opacity: .85; }
.phone-widget .phone-hello { margin: 10px 0 0; font-size: 1.15rem; }

/* Grille d'applis façon iOS : 4 colonnes, icônes « squircle », libellé fin. */
.phone-apps { grid-template-columns: repeat(4, 1fr); gap: 18px 6px; }
.phone-app { gap: 6px; }
.phone-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 80%, #000));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 10px rgba(0, 0, 0, .35);
}
.phone-icon .ico { font-size: 28px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.phone-app-name { color: #fff; font-size: .74rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); white-space: nowrap; }
.phone-app--gear { --c: #6b6f80; }

/* Barre du bas (indicateur d'accueil) : accueil / fermer. */
.phone-home { grid-row: 3; justify-self: center; width: 128px; height: 5px; margin: 6px 0 9px; border: 0; border-radius: 3px; background: #fff; opacity: .85; cursor: pointer; }

/* App Réglages : en-tête de navigation + groupes de lignes façon iOS. */
.phone-page--settings { background: rgba(10, 6, 18, .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.phone-nav { position: relative; display: grid; place-items: center; min-height: 40px; margin-bottom: 12px; color: #fff; }
.phone-nav h3 { margin: 0; font-size: 1.05rem; font-weight: 900; }
.phone-back { position: absolute; left: -6px; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; gap: 2px; padding: 6px 8px; border: 0; background: none; color: #ffb547; font: inherit; font-weight: 700; cursor: pointer; }
.phone-back .ico { font-size: 18px; filter: none; }
.phone-group-title { margin: 6px 6px 6px; color: rgba(255, 255, 255, .55); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.phone-group { display: grid; margin: 0 0 18px; overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, .1); }
.phone-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
}
.phone-row:first-child { border-top: 0; }
.phone-row:hover { background: rgba(255, 255, 255, .08); }
.phone-row-tag { display: grid; place-items: center; width: 30px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .14); font-size: .7rem; font-weight: 900; }
.phone-row[aria-current] { font-weight: 700; }
.phone-row-check { margin-left: auto; color: #7fdc4e; font-size: 18px; filter: none; }
.phone-row--danger { color: #ff8a8a; font-weight: 700; }
.phone-row--danger .ico { font-size: 18px; filter: none; }

@media (max-width: 640px) {
    .phone { border-radius: 38px 38px 0 0; padding: 8px; }
    .phone-screen { border-radius: 31px 31px 0 0; }
    .phone-status { padding: 10px 18px 4px; font-size: .8rem; }
    .phone-island { width: 80px; height: 24px; }
    .phone-page { padding: 8px 14px 10px; }
    .phone-widget { margin: 10px 0 18px; padding: 14px 14px 12px; }
    .phone-big-time { font-size: 2.6rem; }
    .phone-icon { width: 50px; height: 50px; border-radius: 14px; }
    .phone-icon .ico { font-size: 24px; }
    .phone-app-name { font-size: .68rem; }
}
/* Réglages : le fond de la page descend jusqu'en bas, sous la barre d'accueil. */
.phone-page--settings { grid-row: 2 / 4; padding-bottom: 28px; }
.phone-home { position: relative; z-index: 2; }

/* Téléphone : pages en calques superposés pleine taille (zone sous la barre d'état
   jusqu'en bas) — les transitions ne peuvent plus rétrécir une page. */
.phone-page { grid-row: 2 / 4; grid-column: 1; width: 100%; padding-bottom: 28px; }
.phone-page--home { padding-bottom: 28px; }
.phone-screen { grid-template-columns: minmax(0, 1fr); }
.phone-home { grid-row: 3; grid-column: 1; align-self: end; }
/* Chaque fenêtre (téléphone, fiches) est un calque isolé : celle ouverte par-dessus
   recouvre entièrement celle du dessous (croix et barre du téléphone comprises). */
.phone-wrap, #layer > .sheet-wrap { isolation: isolate; }
/* Réglages : le voile sombre remonte sous la barre d'état (plus de séparation),
   la barre d'état reste au-dessus. */
.phone-status { position: relative; z-index: 3; grid-row: 1; grid-column: 1; }
.phone-page--settings { grid-row: 1 / 4; padding-top: 58px; }
@media (max-width: 640px) { .phone-page--settings { padding-top: 50px; } }
/* Téléphone : reflet subtil sur la vitre (diagonale claire + lueur en haut à gauche),
   au-dessus de tout le contenu, sans capter les clics. */
.phone-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .06) 32%, rgba(255, 255, 255, 0) 32.5%),
        radial-gradient(60% 35% at 12% 0%, rgba(255, 255, 255, .11), transparent 70%);
    mix-blend-mode: screen;
}
/* Grande heure du widget : graisse un cran en dessous (Bold). */
.phone-big-time { font-weight: 800; }

/* ==========================================================================
   Icônes d'applis v2 : vrais « squircles » façon iOS — dégradé diagonal propre
   à chaque appli, liseré clair intérieur, reflet vitré en haut, pictogramme
   blanc plus grand avec ombre douce, ombre portée sous l'icône.
   ========================================================================== */
.phone-icon {
    position: relative;
    overflow: hidden;
    border-radius: 28%;
    background: linear-gradient(145deg, var(--c1), var(--c2));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .22),
        inset 0 -6px 12px rgba(0, 0, 0, .18),
        0 6px 14px rgba(0, 0, 0, .4),
        0 1px 0 rgba(0, 0, 0, .5);
}
.phone-icon::after { /* reflet vitré */
    content: '';
    position: absolute;
    inset: 0 0 52% 0;
    border-radius: 28% 28% 50% 50% / 28% 28% 22% 22%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .04));
    pointer-events: none;
}
.phone-icon .ico {
    position: relative;
    z-index: 1;
    font-size: 32px;
    color: #fff;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.phone-app:hover .phone-icon { transform: translateY(-2px) scale(1.05); }
.phone-app:active .phone-icon { transform: scale(.94); }
/* Palette par appli (dégradé haut-gauche → bas-droite). */
.phone-app--messages { --c1: #6ff08c; --c2: #14a84a; }
.phone-app--forum    { --c1: #5ad8ff; --c2: #2a5fe0; }
.phone-app--trophy   { --c1: #ffe27a; --c2: #f08a00; }
.phone-app--gear     { --c1: #b4b9c8; --c2: #4f5466; }
@media (max-width: 640px) { .phone-icon .ico { font-size: 27px; } }

/* Déconnexion : bouton « on / off » rouge (pastille ronde, picto marche / arrêt). */
.phone-power {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff7a7a, #d61f3a);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 2px 6px rgba(214, 31, 58, .45);
    color: #fff;
}
.phone-row--danger .phone-power .ico { font-size: 17px; filter: none; }
.phone-row--danger:hover .phone-power { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 12px rgba(255, 90, 110, .7); }

/* Réglages › Fuseau horaire : ligne avec valeur + chevron, recherche, liste. */
.phone-tz-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(145deg, #5ad8ff, #2a5fe0); }
.phone-tz-ico .ico { font-size: 17px; filter: none; color: #fff; }
.phone-row-value { margin-left: auto; overflow: hidden; max-width: 45%; color: rgba(255, 255, 255, .55); font-size: .8rem; white-space: nowrap; text-overflow: ellipsis; }
.phone-row-chev { flex: none; color: rgba(255, 255, 255, .4); font-size: 14px; filter: none; }
.phone-search {
    position: sticky;
    top: -2px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0 12px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, .6);
}
.phone-search .ico { flex: none; font-size: 17px; filter: none; }
.phone-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: .95rem;
    outline: none;
    user-select: text;
    -webkit-user-select: text;
}
.phone-search input::placeholder { color: rgba(255, 255, 255, .45); }
.phone-tz-list .phone-row { min-height: 50px; }
.phone-tz-list .phone-row[hidden] { display: none; }
.phone-tz-name { display: grid; min-width: 0; line-height: 1.15; }
.phone-tz-name strong { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.phone-tz-name small { overflow: hidden; color: rgba(255, 255, 255, .5); font-size: .72rem; white-space: nowrap; text-overflow: ellipsis; }
.phone-tz-off { margin-left: auto; flex: none; color: rgba(255, 255, 255, .6); font-size: .78rem; font-variant-numeric: tabular-nums; }
.phone-tz-list .phone-row-check { margin-left: 8px; }
.phone-tz-empty { margin: 24px 0; color: rgba(255, 255, 255, .55); text-align: center; }

/* Appli Déconnexion de l'accueil : icône rouge « on / off ». */
.phone-app--power { --c1: #ff8080; --c2: #c2142f; }
.phone-apps form { display: contents; }

/* ==========================================================================
   Icônes d'applis v3 « verre » : plaque de verre dépoli teintée de la couleur
   de l'appli (fond flouté au travers), liseré lumineux, reflet en biais,
   pictogramme blanc lumineux. La teinte = --c1 / --c2 de chaque appli.
   ========================================================================== */
.phone-icon {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--c1) 70%, transparent), color-mix(in srgb, var(--c2) 62%, transparent));
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
            backdrop-filter: blur(14px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 0 0 1px rgba(255, 255, 255, .28),
        inset 0 -8px 16px color-mix(in srgb, var(--c2) 55%, transparent),
        0 8px 20px color-mix(in srgb, var(--c2) 45%, transparent),
        0 2px 4px rgba(0, 0, 0, .3);
}
.phone-icon::after { /* reflet en biais sur le verre */
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(155deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .1) 38%, rgba(255, 255, 255, 0) 39%);
}
.phone-icon .ico { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35)) drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
/* Couleurs (redéclarées ici pour l'emporter sur l'ancienne règle --c). */
.phone-app--messages { --c1: #6ff08c; --c2: #14a84a; }
.phone-app--forum    { --c1: #5ad8ff; --c2: #2a5fe0; }
.phone-app--trophy   { --c1: #ffe27a; --c2: #f08a00; }
.phone-app--gear     { --c1: #c4c8d6; --c2: #5a5f72; }
.phone-app--power    { --c1: #ff8a8a; --c2: #d61f3a; }
/* En-tête des pages du téléphone : 3 colonnes (retour | titre | vide), jamais de chevauchement. */
.phone-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.phone-back { position: static; translate: none; justify-self: start; min-width: 0; overflow: hidden; white-space: nowrap; margin-left: -8px; }
.phone-back span { overflow: hidden; text-overflow: ellipsis; }
.phone-nav h3 { white-space: nowrap; }
/* Grille d'applis : 4 colonnes qui tiennent dans l'écran (icônes adaptées à la place). */
.phone-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 4px; }
.phone-icon { width: min(58px, 100%); height: auto; aspect-ratio: 1; }
.phone-app-name { overflow: hidden; max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 640px) { .phone-icon { width: min(52px, 100%); } }
/* Icônes : taille fixe identique pour toutes (l'aspect-ratio suivait le libellé). */
.phone-app { justify-items: center; min-width: 0; }
.phone-icon { width: 56px; height: 56px; aspect-ratio: auto; }
@media (max-width: 640px) {
    .phone-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 6px; }
    .phone-icon { width: 54px; height: 54px; }
}
/* Pictos des applis : léger contour net (au lieu de l'ombre portée floue). */
.phone-icon .ico {
    filter:
        drop-shadow(.6px 0 0 rgba(26, 13, 34, .55))
        drop-shadow(-.6px 0 0 rgba(26, 13, 34, .55))
        drop-shadow(0 .6px 0 rgba(26, 13, 34, .55))
        drop-shadow(0 -.6px 0 rgba(26, 13, 34, .55));
}
/* Mobile : téléphone = largeur de l'écran − 2rem, 350 px max (proportions 9:19
   gardées, limitées par la hauteur dispo sous les ressources). */
@media (max-width: 640px) {
    .phone { width: min(350px, calc(calc(100 * var(--u-vw)) - 2rem), calc((calc(100 * var(--u-svh)) - 104px) * 9 / 19)); }
}

/* ==========================================================================
   Icônes d'applis v4 : opaques et saturées (le verre translucide ternissait les
   couleurs sur le fond rose), plus grandes, picto plus présent, reflet vitré
   en haut + liseré clair ; dock en verre en bas de l'accueil ; pastilles.
   ========================================================================== */
.phone-page--home { display: flex; flex-direction: column; }
.phone-icon {
    position: relative;
    overflow: visible;
    width: 60px;
    height: 60px;
    border-radius: 17px;
    background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 0 0 1px rgba(255, 255, 255, .16),
        inset 0 -3px 6px rgba(0, 0, 0, .16),
        0 6px 14px rgba(0, 0, 0, .32);
}
.phone-icon::after { /* reflet vitré, net, sur le haut */
    inset: 1px 1px 50% 1px;
    border-radius: 16px 16px 40% 40% / 16px 16px 14% 14%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06));
}
.phone-icon .ico { font-size: 34px; color: #fff; }
.phone-app-name { margin-top: 2px; font-size: .78rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.phone-app:hover .phone-icon { transform: translateY(-2px); filter: brightness(1.06); }
.phone-app:active .phone-icon { transform: scale(.92); filter: brightness(.92); }
/* Couleurs vives, propres à chaque appli. */
.phone-app--messages { --c1: #5cf07a; --c2: #0fa33f; }
.phone-app--forum    { --c1: #52c8ff; --c2: #1f5fe8; }
.phone-app--trophy   { --c1: #ffd34d; --c2: #f07800; }
.phone-app--gear     { --c1: #a9aec0; --c2: #4b5064; }
.phone-app--power    { --c1: #ff6b7d; --c2: #c8102e; }

/* Pastille de notification (sujets non lus). */
.phone-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #ff3b30;
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(20, 8, 30, .35), 0 2px 4px rgba(0, 0, 0, .35);
}

/* Grille de l'accueil : 3 applis, bien réparties. */
.phone-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; margin-top: 6px; }
@media (max-width: 640px) { .phone-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Dock en verre, collé en bas de l'accueil (au-dessus de la barre d'accueil). */
.phone-dock {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: auto 0 0;
    padding: 12px 18px;
    list-style: none;
    border-radius: 28px;
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
            backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.phone-dock form { display: contents; }
.phone-dock .phone-app-name { display: none; } /* dock : icônes seules (libellé en info-bulle) */
.phone-page--home { padding-bottom: 26px; }

@media (max-width: 640px) {
    .phone-icon { width: 56px; height: 56px; border-radius: 16px; }
    .phone-icon .ico { font-size: 31px; }
    .phone-dock { gap: 18px; padding: 10px 16px; border-radius: 24px; }
}
/* Mobile (final) : largeur = écran − 2rem (350 px max), indépendante de la hauteur ;
   hauteur = place sous les ressources, plafonnée à 600 px. */
@media (max-width: 640px) {
    .phone {
        aspect-ratio: auto;
        width: min(350px, calc(calc(100 * var(--u-vw)) - 2rem));
        height: min(600px, calc(calc(100 * var(--u-svh)) - 104px));
    }
}
/* Pictos d'applis au trait : taille unique, ombre douce (plus de faux contour). */
.phone-icon .ico { font-size: 32px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)); }
@media (max-width: 640px) { .phone-icon .ico { font-size: 30px; } }
.phone-icon .ico { font-size: 31px; }
@media (max-width: 640px) { .phone-icon .ico { font-size: 29px; } }
.phone-icon .ico { font-size: 37px; }
@media (max-width: 640px) { .phone-icon .ico { font-size: 34px; } }
/* Pictos des applis : léger contour sombre net (comme avant), plus d'ombre floue. */
.phone-icon .ico {
    filter:
        drop-shadow(.7px 0 0 rgba(26, 13, 34, .5))
        drop-shadow(-.7px 0 0 rgba(26, 13, 34, .5))
        drop-shadow(0 .7px 0 rgba(26, 13, 34, .5))
        drop-shadow(0 -.7px 0 rgba(26, 13, 34, .5));
}
/* En-tête du téléphone : le bouton retour garde toujours la largeur de son texte ;
   le titre reste centré tant qu'il y a la place, sinon il se décale (et s'abrège). */
.phone-nav { grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(0, 1fr); }
.phone-back { overflow: visible; }
.phone-nav h3 { overflow: hidden; text-overflow: ellipsis; }
/* Dock : libellés affichés sous les icônes (comme la grille). */
.phone-dock .phone-app-name { display: block; }
.phone-dock { gap: 26px; padding: 10px 18px 8px; }
.phone-dock .phone-app { gap: 5px; }
@media (max-width: 640px) { .phone-dock { gap: 22px; padding: 9px 16px 7px; } }
/* En-tête du téléphone : retour à gauche, titre de la page aligné à droite. */
.phone-nav { grid-template-columns: max-content minmax(0, 1fr); }
.phone-nav h3 { justify-self: end; text-align: right; }
/* Appli Visio (appels vidéo des quêtes) : vert-turquoise, distinct de Messages. */
.phone-app--missions { --c1: #4be8c0; --c2: #089a78; }
/* Accueil : 4 applis par rangée (Messages, Visio, Forum, Classement). */
.phone-apps, .phone-apps:is(*) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 4px; }
@media (max-width: 640px) { .phone-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .phone-icon { width: 52px; height: 52px; border-radius: 15px; } .phone-icon .ico { font-size: 32px; } .phone-app-name { font-size: .7rem; } }

/* ==========================================================================
   Hauts faits : cartes par famille, palier (I, II…), barre de progression,
   récompense XP + gemmes, bouton Réclamer ; pastilles des paliers.
   ========================================================================== */
.sheet--ach { width: min(760px, 100%); }
.ach-ready { color: #ffd23f; }
.ach-list { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.ach {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 2px solid var(--edge);
    border-radius: 14px;
    background: linear-gradient(180deg, #2c1a44, #1a0f2a);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06), 0 3px 0 var(--edge);
}
.ach.is-ready { border-color: #ffc531; box-shadow: inset 0 0 0 1px rgba(255, 197, 49, .35), 0 0 18px rgba(255, 197, 49, .25), 0 3px 0 var(--edge); }
.ach.is-complete { opacity: .6; }
.ach-ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 2px solid var(--edge);
    border-radius: 14px;
    background: linear-gradient(160deg, #ffe27a, #f08a00);
    color: #fff;
    font-size: 26px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--edge);
}
.ach-ico .ico { filter: drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 -1px 0 var(--edge)) drop-shadow(1px 0 0 var(--edge)) drop-shadow(-1px 0 0 var(--edge)); }
.ach-tier {
    position: absolute;
    right: -8px;
    bottom: -7px;
    min-width: 22px;
    height: 20px;
    padding: 0 4px;
    border: 2px solid var(--edge);
    border-radius: 7px;
    background: #2a1840;
    color: #ffd23f;
    font-size: .7rem;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
}
.ach-main { display: grid; gap: 4px; min-width: 0; }
.ach-name { margin: 0; font-weight: 900; font-size: 1.05rem; text-transform: uppercase; }
.ach-of { margin-left: 4px; color: rgba(255, 255, 255, .5); font-size: .75rem; font-weight: 700; text-transform: none; }
.ach-desc { margin: 0; color: rgba(255, 255, 255, .72); font-size: .88rem; }
.ach-bar {
    position: relative;
    height: 18px;
    margin-top: 2px;
    overflow: hidden;
    border: 2px solid var(--edge);
    border-radius: 9px;
    background: rgba(0, 0, 0, .45);
}
.ach-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 7px; background: linear-gradient(180deg, #8ef05a, #2fa82a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.ach.is-ready .ach-bar i { background: linear-gradient(180deg, #ffe27a, #f0a000); }
.ach-bar span { position: relative; display: block; color: #fff; font-size: .7rem; font-weight: 900; line-height: 14px; text-align: center; text-shadow: 0 1px 0 var(--edge), 1px 0 0 var(--edge), -1px 0 0 var(--edge), 0 -1px 0 var(--edge); }
.ach-bar .w0 { width: 0; } .ach-bar .w5 { width: 5%; } .ach-bar .w10 { width: 10%; } .ach-bar .w15 { width: 15%; } .ach-bar .w20 { width: 20%; }
.ach-bar .w25 { width: 25%; } .ach-bar .w30 { width: 30%; } .ach-bar .w35 { width: 35%; } .ach-bar .w40 { width: 40%; } .ach-bar .w45 { width: 45%; }
.ach-bar .w50 { width: 50%; } .ach-bar .w55 { width: 55%; } .ach-bar .w60 { width: 60%; } .ach-bar .w65 { width: 65%; } .ach-bar .w70 { width: 70%; }
.ach-bar .w75 { width: 75%; } .ach-bar .w80 { width: 80%; } .ach-bar .w85 { width: 85%; } .ach-bar .w90 { width: 90%; } .ach-bar .w95 { width: 95%; } .ach-bar .w100 { width: 100%; }
.ach-steps { display: flex; gap: 4px; margin: 2px 0 0; }
.ach-steps i { width: 14px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .15); }
.ach-steps i.is-on { background: #ffc531; }
.ach-side { display: grid; justify-items: end; gap: 6px; }
.ach-reward { display: flex; gap: 10px; margin: 0; font-size: .8rem; color: rgba(255, 255, 255, .75); white-space: nowrap; }
.ach-reward span { display: inline-flex; align-items: center; gap: 3px; }
.ach-reward b { color: #fff; font-weight: 900; }
.ach-gem { width: 18px; height: 18px; }
.ach-claim { min-height: 36px; padding: 0 16px; font-size: .85rem; }
.ach-check { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #2fa82a; color: #fff; font-size: 18px; }
@media (max-width: 640px) {
    .ach { grid-template-columns: auto minmax(0, 1fr); }
    .ach-side { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
    .ach-side form { justify-self: end; }
}

/* ==========================================================================
   Applis du téléphone : verre FONCÉ pour toutes, seule « Quitter » en verre rouge.
   ========================================================================== */
.phone-icon {
    background: linear-gradient(160deg, rgba(60, 46, 84, .78), rgba(18, 10, 30, .82));
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        0 6px 14px rgba(0, 0, 0, .38);
}
.phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); }
.phone-app--power .phone-icon {
    background: linear-gradient(160deg, rgba(255, 92, 112, .72), rgba(170, 14, 40, .8));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .4),
        inset 0 0 0 1px rgba(255, 160, 170, .3),
        0 6px 16px rgba(200, 16, 46, .4);
}
.phone-app--power .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .02)); }
/* Applis : verre foncé plus transparent, reflet un peu plus marqué. */
.phone-icon { background: linear-gradient(160deg, rgba(60, 46, 84, .55), rgba(18, 10, 30, .6)); }
.phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .02)); }
.phone-app--power .phone-icon { background: linear-gradient(160deg, rgba(255, 92, 112, .6), rgba(170, 14, 40, .68)); }
.phone-app--power .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .03)); }
/* Dock : Quitter en rouge plus foncé ; Réglages en verre bleu pour ressortir. */
.phone-app--power .phone-icon { background: linear-gradient(160deg, rgba(214, 48, 72, .7), rgba(120, 6, 28, .78)); }
.phone-app--gear .phone-icon {
    background: linear-gradient(160deg, rgba(80, 150, 255, .62), rgba(26, 58, 160, .72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(160, 200, 255, .3), 0 6px 16px rgba(30, 80, 200, .38);
}
.phone-app--gear .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .03)); }
/* Applis : reflet encore plus marqué ; Quitter un cran plus foncé. */
.phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .04)); }
.phone-app--gear .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .05)); }
.phone-app--power .phone-icon { background: linear-gradient(160deg, rgba(190, 30, 56, .76), rgba(96, 4, 22, .84)); }
.phone-app--power .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .04)); }
/* Applis : reflet en « bulle » — tache ovale presque uniforme en haut, bord net. */
.phone-icon::after {
    inset: 3px 5px auto 5px;
    height: 44%;
    border-radius: 50% / 60% 60% 40% 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .22));
}
.phone-app--gear .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .28)); }
.phone-app--power .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .26)); }
/* Bulle de reflet : coins du haut = rayon de l'icône moins l'écart (épouse la forme),
   bas arrondi en ovale. */
.phone-icon::after { inset: 3px 3px auto 3px; border-radius: 14px 14px 50% 50% / 14px 14px 45% 45%; }
@media (max-width: 640px) { .phone-icon::after { border-radius: 12px 12px 50% 50% / 12px 12px 45% 45%; } }
/* Bulle de reflet : intensité légèrement réduite. */
.phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .27), rgba(255, 255, 255, .17)); }
.phone-app--gear .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .22)); }
.phone-app--power .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .2)); }
.phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .21), rgba(255, 255, 255, .13)); }
.phone-app--gear .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .27), rgba(255, 255, 255, .17)); }
.phone-app--power .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .15)); }

/* ==========================================================================
   Premium : encart « chantiers occupés » + bouton, fenêtre des 3 recharges.
   ========================================================================== */
.sheet-notice--premium { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.sheet-notice--premium > p { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 260px; }
.premium-cta { min-height: 40px; padding: 0 16px; font-size: .9rem; gap: 8px; }
.premium-cta .ico { font-size: 1rem; }

.sheet--premium { width: min(820px, 100%); }
.premium-title { background: linear-gradient(180deg, #ffe27a, #ffb21e 55%, #e08a00); }
.premium-active { color: #ffd23f; }
.premium-perks { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.premium-perks li { display: flex; align-items: center; gap: 10px; font-size: .98rem; }
.premium-perk-ico { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #2fa82a; color: #fff; font-size: 14px; box-shadow: 0 0 0 2px var(--edge); }
.premium-perk-ico .ico { filter: none; }

.premium-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.premium-plan {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 22px 14px 16px;
    border: 2.5px solid rgba(214, 190, 255, .35);
    border-radius: 18px;
    background: linear-gradient(180deg, #2c1a44, #1a0f2a);
    box-shadow: 0 0 0 2px var(--edge), 0 4px 0 var(--edge);
    text-align: center;
}
.premium-plan.is-popular { border-color: #ffc531; box-shadow: 0 0 0 2px var(--edge), 0 4px 0 var(--edge), 0 0 22px rgba(255, 197, 49, .25); }
.premium-plan.is-best { border-color: #7fdc4e; box-shadow: 0 0 0 2px var(--edge), 0 4px 0 var(--edge), 0 0 22px rgba(127, 220, 78, .25); }
.premium-badge {
    position: absolute;
    top: -13px;
    padding: 3px 10px 2px;
    border: 2px solid var(--edge);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffe27a, #ffb21e 60%, #e08a00);
    color: #fff;
    font-size: .7rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-text-stroke: 2.5px var(--edge);
    paint-order: stroke fill;
    box-shadow: 0 2px 0 var(--edge);
}
.premium-plan.is-best .premium-badge { background: linear-gradient(180deg, #8ef05a, #4fcf36 45%, #2fa82a); }
.premium-months { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.premium-months b { font-size: 2.6rem; font-weight: 900; line-height: 1; -webkit-text-stroke: 5px var(--edge); paint-order: stroke fill; text-shadow: 0 3px 0 var(--edge); }
.premium-months span { font-weight: 900; text-transform: uppercase; }
.premium-price { margin: 4px 0 0; font-size: 1.4rem; font-weight: 900; color: #ffd23f; }
.premium-per { margin: 0; color: rgba(255, 255, 255, .6); font-size: .8rem; }
.premium-save { margin: 0 0 6px; color: #7fdc4e; font-size: .85rem; font-weight: 900; }
.premium-buy { width: 100%; min-height: 42px; }
.premium-note { margin: 16px 0 0; color: rgba(255, 255, 255, .55); font-size: .8rem; text-align: center; }
@media (max-width: 640px) {
    .premium-plans { grid-template-columns: 1fr; gap: 18px; }
    .premium-plan { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; text-align: left; padding: 16px 14px 14px; gap: 2px 12px; }
    .premium-months { grid-row: 1 / 3; }
    .premium-price { grid-column: 2; margin: 0; font-size: 1.15rem; }
    .premium-per, .premium-save { grid-column: 2; }
    .premium-buy { grid-column: 3; grid-row: 1 / 4; width: auto; padding: 0 14px; }
    .premium-badge { left: 14px; }
}
/* L'encart (et son bouton Premium) passe au-dessus du carrousel, qui remonte en marge négative. */
.sheet-notice--premium { position: relative; z-index: 5; }
.premium-price, .premium-per { white-space: nowrap; }
.premium-cta { white-space: nowrap; }
@media (max-width: 640px) { .premium-cta { width: 100%; justify-content: center; } }
@media (max-width: 640px) {
    .premium-plans { min-width: 0; }
    .premium-plan { grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; gap: 2px 10px; padding: 16px 12px 14px; }
    .premium-months b { font-size: 2.1rem; }
    .premium-months span { font-size: .8rem; }
    .premium-buy { min-height: 40px; padding: 0 12px; font-size: .85rem; }
}

/* HUD : famille + statut Premium sur la même ligne, sous le nom. */
.hud-tags { display: flex; align-items: center; gap: 5px; min-width: 0; }
.hud-tags .hud-family { min-width: 0; flex: 0 1 auto; }
.hud-premium {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: none;
    height: 18px;
    padding: 0 7px 0 5px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .4);
    color: rgba(255, 255, 255, .6);
    font: inherit;
    font-size: .66rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    -webkit-text-stroke: 0;
    transition: transform .15s, background .2s;
}
.hud-premium .ico { font-size: 11px; color: rgba(255, 197, 49, .7); filter: none; }
.hud-premium:hover { transform: translateY(-1px); background: rgba(255, 197, 49, .22); color: #fff; }
.hud-premium.is-on { background: linear-gradient(180deg, #ffe27a, #ffb21e 60%, #e08a00); color: #3a2200; box-shadow: 0 0 0 1.5px var(--edge); }
.hud-premium.is-on .ico { color: #3a2200; }
@media (max-width: 640px) { .hud-premium { height: 16px; font-size: .6rem; padding: 0 6px 0 4px; } }

/* Badge Premium seul, en haut à gauche de l'écran. */
.hud-premium--corner {
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    z-index: 25;
    height: 34px;
    padding: 0 14px 0 10px;
    gap: 6px;
    border: 2.5px solid rgba(255, 210, 120, .45);
    background: rgba(16, 10, 26, .72);
    color: rgba(255, 255, 255, .8);
    font-size: .8rem;
    box-shadow: 0 0 0 2px var(--edge), 0 3px 0 var(--edge);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}
.hud-premium--corner .ico { font-size: 15px; color: #ffc531; }
.hud-premium--corner.is-on { border-color: #fff1c2; background: linear-gradient(180deg, #ffe27a, #ffb21e 60%, #e08a00); color: #3a2200; }
.hud-premium--corner.is-on .ico { color: #3a2200; }
@media (max-width: 640px) {
    .hud-premium--corner { top: max(12px, env(safe-area-inset-top)); left: 10px; height: 30px; padding: 0 11px 0 8px; font-size: .72rem; }
}
/* Petits écrans : les ressources prennent toute la largeur → badge sur la 2e ligne,
   dans l'espace libre à gauche du compteur de tour. */
@media (max-width: 420px) {
    .hud-premium--corner { top: calc(max(12px, env(safe-area-inset-top)) + 44px); height: 28px; padding: 0 9px 0 7px; font-size: .68rem; }
}
@media (max-width: 380px) {
    .hud-premium--corner:not(.is-on) span { display: none; }
    .hud-premium--corner { padding: 0 8px; }
}
/* Mobile : badge Premium à droite, sous le « + » des gemmes (aligné sur son bord droit). */
@media (max-width: 640px) {
    .hud-premium--corner { left: auto; right: 10px; top: auto; }
}
@media (max-width: 640px) {
    .hud-premium--corner { top: calc(max(12px, env(safe-area-inset-top)) + 80px); right: 5px; height: 28px; padding: 0 10px 0 8px; font-size: .68rem; }
    .hud-premium--corner:not(.is-on) span { display: inline; }
}
/* Bannière avec bouton : cliquable (le reste de l'écran laisse passer les clics). */
.mission.has-cta .mission-cta { pointer-events: auto; margin-top: 8px; min-height: 46px; padding: 0 26px; }
/* Compte standard : badge argent (Premium = or). */
.hud-premium--corner:not(.is-on) {
    border-color: #f2f4fa;
    background: linear-gradient(180deg, #f2f4fa, #b8bfd1 60%, #8a93a8);
    color: #2a2f3d;
}
.hud-premium--corner:not(.is-on) .ico { color: #2a2f3d; }
.hud-premium--corner:not(.is-on):hover { background: linear-gradient(180deg, #ffffff, #c9cfde 60%, #9aa3b8); color: #1a1e28; }
/* Badge Standard / Premium : pastille discrète (fond sombre translucide) pour les deux ;
   seuls le TEXTE et le PICTO portent la couleur — argent (Standard) ou or (Premium). */
.hud-premium--corner,
.hud-premium--corner.is-on,
.hud-premium--corner:not(.is-on),
.hud-premium--corner:not(.is-on):hover {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(16, 10, 26, .62);
    box-shadow: 0 0 0 2px var(--edge);
}
.hud-premium--corner:hover { background: rgba(30, 20, 46, .78); }
.hud-premium--corner span {
    background: linear-gradient(180deg, #ffffff 0%, #d8dce8 45%, #9aa2b6 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.hud-premium--corner .ico, .hud-premium--corner:not(.is-on) .ico { color: #c9cedb; filter: drop-shadow(0 0 3px rgba(220, 225, 240, .35)); }
.hud-premium--corner.is-on span { background-image: linear-gradient(180deg, #fff3b0 0%, #ffd23f 45%, #e08a00 100%); }
.hud-premium--corner.is-on .ico { color: #ffc531; filter: drop-shadow(0 0 4px rgba(255, 197, 49, .55)); }

/* « Mon équipe » : sur une unité déjà possédée, « Recruter plus » en bouton secondaire
   discret (le vert plein reste réservé à la carte « Recruter » de nouvelles unités). */
.crew-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 38px;
    padding: 0 14px;
    border: 2px solid rgba(214, 190, 255, .3);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .85);
    font: inherit;
    font-size: .85rem;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.crew-more .ico { font-size: 14px; color: #7fdc4e; filter: none; }
.crew-more:hover:not([disabled]) { border-color: rgba(127, 220, 78, .6); background: rgba(127, 220, 78, .12); color: #fff; }
.crew-more[disabled] { opacity: .45; cursor: not-allowed; }
/* « Recruter plus » : « + » plein et épais (picto btn-plus, blanc contouré), pas en vert. */
.crew-more .ico { font-size: 16px; color: inherit; }

/* Pictos de ressources qui s'envolent (gain / dépense) : toujours au-dessus des
   fenêtres et du voile. La copie garde .stock-ico (déclaré après) : on l'écrase ici. */
.res-fly, .stock-ico.res-fly, .res-img.res-fly {
    position: fixed;
    z-index: 130;
    translate: none;
    pointer-events: none;
}

/* ==========================================================================
   Compétences du personnage : 3 colonnes de branches, + par compétence.
   Avatar du HUD = bouton (ouvre les compétences) + pastille des points.
   ========================================================================== */
button.hud-avatar-wrap { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
button.hud-avatar-wrap:hover .hud-avatar { filter: brightness(1.08); }
.skill-notif { top: -4px; right: -4px; }

.sheet--skills { width: min(980px, 100%); }
.skill-avail { color: rgba(255, 255, 255, .7); }
.skill-avail.is-on { color: #ffd23f; }
.skill-hint { margin: 10px 0 0; color: rgba(255, 255, 255, .6); font-size: .85rem; }
.skill-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.skill-branch { padding: 12px; border: 2px solid var(--edge); border-radius: 16px; background: rgba(0, 0, 0, .25); }
.skill-branch h3 { margin: 0 0 10px; font-size: .95rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; text-shadow: 0 2px 0 var(--edge); }
.skill-branch--offense h3 { color: #ff8a8a; }
.skill-branch--defense h3 { color: #8fc8ff; }
.skill-branch--economy h3 { color: #a6f07a; }
.skill-branch ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.skill {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 2px solid var(--edge);
    border-radius: 12px;
    background: linear-gradient(180deg, #2c1a44, #1a0f2a);
    box-shadow: 0 2px 0 var(--edge);
}
.skill.is-max { border-color: #ffc531; }
.skill-ico { display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--edge); border-radius: 10px; color: #fff; font-size: 18px; }
.skill-branch--offense .skill-ico { background: linear-gradient(160deg, #ff7a7a, #c8202e); }
.skill-branch--defense .skill-ico { background: linear-gradient(160deg, #6fb6ff, #2557c8); }
.skill-branch--economy .skill-ico { background: linear-gradient(160deg, #8ee86a, #2c9a2a); }
.skill-ico .ico { filter: drop-shadow(0 1px 0 var(--edge)); }
.skill-main { display: grid; gap: 1px; min-width: 0; }
.skill-name { margin: 0; font-weight: 900; font-size: .9rem; text-transform: uppercase; }
.skill-pts { margin-left: 4px; color: rgba(255, 255, 255, .5); font-size: .72rem; font-weight: 700; }
.skill-desc { margin: 0; color: rgba(255, 255, 255, .6); font-size: .74rem; line-height: 1.25; }
.skill-val { margin: 2px 0 0; font-size: .8rem; }
.skill-val b { color: #fff; font-weight: 900; }
.skill-val span { color: #7fdc4e; font-weight: 700; }
.skill-add {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2.5px solid #d9ffb8;
    border-radius: 10px;
    background: linear-gradient(180deg, #8ef05a 0%, #4fcf36 45%, #2fa82a 100%);
    box-shadow: inset 0 -3px 0 #1e7d1f, 0 0 0 2px var(--edge), 0 3px 0 var(--edge);
    cursor: pointer;
}
.skill-add .ico { font-size: 18px; filter: none; }
.skill-add:active:not([disabled]) { translate: 0 2px; }
.skill-add[disabled] { filter: grayscale(1) brightness(.55); cursor: not-allowed; }
.skill-reset { display: flex; justify-content: center; margin-top: 16px; }
.skill-reset .crew-more { width: auto; padding: 0 18px; }
@media (max-width: 900px) { .skill-branches { grid-template-columns: 1fr; } }
.skill-pts { white-space: nowrap; }
.skill-name { overflow-wrap: anywhere; }
/* Coût de la réinitialisation : picto gemme + montant. */
.skill-reset-cost { display: inline-flex; align-items: center; gap: 3px; margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .18); }
.skill-gem { width: 20px; height: 20px; }
.skill-reset-cost b { font-weight: 900; color: #fff; }

/* Pastille des points de compétence (avatar) : verte (bonne nouvelle, à dépenser)
   et animée — battement léger + halo qui pulse. */
.skill-notif {
    border-color: var(--edge);
    background: linear-gradient(180deg, #8ef05a 0%, #4fcf36 45%, #2fa82a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 0 rgba(127, 220, 78, .7), 0 2px 0 var(--edge);
    -webkit-text-stroke: 2px var(--edge);
    paint-order: stroke fill;
    animation: skill-pulse 1.6s ease-in-out infinite;
}
@keyframes skill-pulse {
    0%   { scale: 1;    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 0 rgba(127, 220, 78, .7), 0 2px 0 var(--edge); }
    25%  { scale: 1.18; }
    50%  { scale: 1;    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 7px rgba(127, 220, 78, 0), 0 2px 0 var(--edge); }
    100% { scale: 1;    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 0 rgba(127, 220, 78, 0), 0 2px 0 var(--edge); }
}
@media (prefers-reduced-motion: reduce) { .skill-notif { animation: none; } }

/* ==========================================================================
   Avatars personnalisés (image ronde) + écran de recadrage + barre d'XP.
   ========================================================================== */
.pava.has-img .pava-in { overflow: hidden; padding: 0; background: #120a1e; }
.pava-in img, .hud-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.hud-avatar.has-img { overflow: hidden; padding: 0; background: #120a1e; }
.phone-row-ava { width: 30px; height: 30px; }
.phone-row-ava .pava-in { font-size: .95rem; border-width: 2px; box-shadow: none; }
.phone-app--avatar .phone-icon { }

.sheet--avatar { width: min(440px, 100%); }
.av-stage { margin-top: 16px; }
.av-current { display: grid; justify-items: center; gap: 14px; }
.av-big { width: 140px; height: 140px; }
.av-big .pava-in { font-size: 3.6rem; border-width: 4px; }
.av-pick { display: inline-flex; gap: 8px; cursor: pointer; }
.av-pick .ico { font-size: 18px; filter: none; }
.av-hint { margin: 0; color: rgba(255, 255, 255, .6); font-size: .85rem; text-align: center; }
.av-remove { width: auto; padding: 0 16px; }
.av-crop { display: grid; justify-items: center; gap: 12px; }
.av-crop[hidden], .av-current[hidden] { display: none; }
.av-frame {
    position: relative;
    width: min(280px, calc(72 * var(--u-vw)));
    aspect-ratio: 1;
    overflow: hidden;
    border: 3px solid var(--edge);
    border-radius: 18px;
    background: #120a1e;
    box-shadow: 0 0 0 2px rgba(214, 190, 255, .3);
    touch-action: none;
}
.av-frame canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.av-frame canvas:active { cursor: grabbing; }
/* Aperçu du rendu final : zone hors du cercle assombrie. */
.av-mask { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(10, 6, 18, .55); pointer-events: none; outline: 2px dashed rgba(255, 255, 255, .5); outline-offset: -2px; }
.av-zoom { display: flex; align-items: center; gap: 10px; width: min(280px, calc(72 * var(--u-vw))); color: rgba(255, 255, 255, .7); }
.av-zoom .ico { flex: none; font-size: 18px; filter: none; }
.av-zoom input { flex: 1; accent-color: #4fcf36; }
.av-actions { display: flex; gap: 10px; width: 100%; justify-content: center; }
.av-actions .crew-more { width: auto; padding: 0 18px; }

/* Compétences : barre d'XP du niveau en cours. */
.skill-xp { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.skill-xp-lv { flex: none; padding: 3px 9px; border: 2px solid var(--edge); border-radius: 8px; background: linear-gradient(180deg, #ffe27a, #ffb21e 60%, #e08a00); color: #fff; font-size: .75rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; }
.skill-xp-lv.is-next { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); -webkit-text-stroke: 0; }
.skill-xp-bar { flex: 1; height: 22px; margin: 0; }
.skill-xp-bar i { background: linear-gradient(180deg, #ffe27a, #f0a000); }
.skill-xp-bar span { line-height: 18px; font-size: .74rem; }

/* Bouton « Accélérer » d'un chantier : éclair + coût en gemmes. */
.speedup-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.speedup-btn .ico { font-size: 1.1rem; }
.speedup-cost { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 10px 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, .28); }
.speedup-cost[hidden] { display: none; }
.speedup-gem { width: 22px; height: 22px; }
.speedup-cost b { font-weight: 900; }
/* Le bouton en chargement est désactivé (anti double-clic) mais ne doit PAS en avoir
   l'air : ni opacité réduite, ni gris. */
.game button.is-loading[disabled], .game .btn.is-loading[disabled] { opacity: 1; filter: none; cursor: progress; }
/* Spinner : élément du flux, à droite du libellé (jamais positionné en absolu). */
.game .btn.is-loading::after, button.is-loading::after { position: static; inset: auto; transform: none; opacity: 1; background: none; }

/* Pictos de CTA (helper btn_icon) : déjà contourés dans le sprite → aucun filtre
   ajouté par le bouton ; taille proportionnelle au libellé, alignés au texte. */
.game .ico.btn-ico, .game .btn .ico.btn-ico, .ico.btn-ico {
    filter: none;
    color: inherit;
    width: 1.15em;
    height: 1.15em;
    font-size: inherit;
    flex: none;
    vertical-align: -.2em;
}
.av-pick .ico.btn-ico, .crew-more .ico.btn-ico { font-size: inherit; }

/* ==========================================================================
   Profil public d'un joueur + liens vers le profil (forum, chat, classement).
   ========================================================================== */
.profile-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.profile-link .pava { transition: transform .15s; }
.profile-link:hover .pava { transform: scale(1.06); }
.profile-name { text-align: left; }
.profile-name:hover, .chat-name:hover { text-decoration: none; filter: brightness(1.15); }
.chat-name { padding: 0; border: 0; background: none; color: #ffc531; font: inherit; font-weight: 900; font-size: .88rem; cursor: pointer; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; text-shadow: 0 2px 0 var(--edge); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-msg.is-mine .chat-name { color: #c8f05a; }
.chat-ava.is-link { cursor: pointer; }
.rank-row[data-view] { cursor: pointer; transition: transform .15s, background .2s; }
.rank-row[data-view]:hover { transform: translateY(-1px); }

.sheet--profile { width: min(480px, 100%); }
.prof-head { display: flex; align-items: center; gap: 18px; padding-right: 40px; }
.prof-ava { width: 92px; height: 92px; }
/* Profil : drapeau de la langue de jeu (bas gauche) et médaille du podium de la ville (bas droite). */
.prof-ava-wrap { position: relative; flex: none; }
.prof-flag { position: absolute; left: -4px; bottom: -2px; display: block; width: 28px; height: 20px; border: 2px solid var(--edge); border-radius: 5px; overflow: hidden; box-shadow: 0 2px 0 var(--edge); }
.prof-flag .ico { width: 24px; height: 16px; display: block; vertical-align: top; }
.prof-medal { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--edge); border-radius: 50%; color: #fff; font-size: 1.15rem; font-weight: 900; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; box-shadow: 0 3px 0 var(--edge); }
.prof-medal.m-1 { background: linear-gradient(135deg, #fff1a8, #ffc531 50%, #b07a0c); }
.prof-medal.m-2 { background: linear-gradient(135deg, #ffffff, #cfd5e2 50%, #7d8597); }
.prof-medal.m-3 { background: linear-gradient(135deg, #ffd2a8, #e0904f 50%, #8a4b1c); }
.prof-podium { margin: 2px 0 4px; font-size: .9rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.prof-podium.m-1 { color: #ffc531; }
.prof-podium.m-2 { color: #dfe3ec; }
.prof-podium.m-3 { color: #e0904f; }
.prof-ava .pava-in { font-size: 2.4rem; border-width: 4px; }
.prof-ava .pava-lv { min-width: 30px; height: 30px; font-size: .95rem; right: -6px; bottom: -6px; }
.prof-id { display: grid; gap: 4px; min-width: 0; }
.prof-name { margin: 0; font-size: 1.6rem; font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; -webkit-text-stroke: 5px var(--edge); paint-order: stroke fill; text-shadow: 0 3px 0 var(--edge); }
.prof-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; color: rgba(255, 255, 255, .7); font-size: .85rem; }
.prof-meta span { display: inline-flex; align-items: center; gap: 4px; }
.prof-meta .ico { font-size: 14px; filter: none; }
.prof-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.prof-stats li { display: grid; gap: 2px; padding: 10px; border: 2px solid var(--edge); border-radius: 12px; background: linear-gradient(180deg, #2c1a44, #1a0f2a); text-align: center; }
.prof-stats b { font-weight: 900; font-size: 1.05rem; white-space: nowrap; }
.prof-stats span { color: rgba(255, 255, 255, .6); font-size: .72rem; line-height: 1.2; }
.prof-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* 8 cases : 4 × 2 */
/* Case liée à un classement (niveau, points, victoires, superficie) : clic = ce classement. */
.prof-stat-link { cursor: pointer; transition: border-color .2s, transform .15s, box-shadow .2s; }
.prof-stat-link:hover, .prof-stat-link:focus-visible { border-color: rgba(214, 190, 255, .7); box-shadow: 0 0 0 2px rgba(214, 190, 255, .18); transform: translateY(-1px); outline: none; }
.prof-stat-link:active { transform: translateY(1px); }
@media (max-width: 520px) { .prof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Mobile : le chat est une feuille calée en bas de l'écran, PAR-DESSUS tout le reste
   (dock, onglets, boutons), avec sa propre croix pour le fermer. */
@media (max-width: 640px) {
    .chat {
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        width: auto;
        height: min(calc(64 * var(--u-svh)), 540px);
        z-index: 60;
        transform-origin: 50% 100%;
    }
}

/* Niveau du personnage en simple texte « NIV. 12 » (les blasons de niveau sont abandonnés). */
.hud-level, .pava-lv { display: none; }
.hud-lv {
    flex: none;
    color: #ffd23f;
    font-size: .74rem;
    font-weight: 900;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 0;
    text-shadow: 0 1px 0 var(--edge);
}
@media (max-width: 640px) { .hud-lv { font-size: .66rem; } }

/* Spinner de chargement HORS du flux : il ne pousse jamais le contenu (taille du
   bouton inchangée). Bouton à libellé : dans la marge droite ; picto seul (.is-solo) :
   au centre, à la place du picto masqué. */
.game .btn.is-loading::after, .game button.is-loading::after {
    position: absolute;
    top: 50%;
    right: .45em;
    width: .8em;
    height: .8em;
    margin: -.4em 0 0;
    border-width: .14em;
}
.game .btn.is-loading.is-solo > *, .game button.is-loading.is-solo > * { visibility: hidden; }
.game .btn.is-loading.is-solo::after, .game button.is-loading.is-solo::after {
    right: auto;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -.5em 0 0 -.5em;
    border-width: .17em;
}

/* Compétences : picto seul, plus gros, teinté par branche (plus de carré coloré). */
.skill-ico { width: 40px; height: 40px; border: 0; border-radius: 0; background: none !important; font-size: 34px; }
.skill-branch--offense .skill-ico { color: #ff6b6b; }
.skill-branch--defense .skill-ico { color: #6fb6ff; }
.skill-branch--economy .skill-ico { color: #8ee86a; }
.skill-ico .ico { filter: drop-shadow(0 2px 0 var(--edge)) drop-shadow(0 0 1px var(--edge)) drop-shadow(0 0 1px var(--edge)); }
/* Picto de compétence calé en haut de sa case (aligné sur le titre). */
.skill-ico { align-self: start; margin-top: 2px; }
/* Compétence sans plafond : « 12 / ∞ » (infini dessiné en SVG, jamais le glyphe). */
.skill-inf { width: 1.35em; height: 1.35em; vertical-align: -.38em; }

/* Stat augmentée par les compétences du joueur : valeur en vert (détail dans la bulle). */
.unit-stats > .is-boost dd { color: #7fdc4e; }
/* Niveau du type de troupe (expérience partagée) : pastille en haut à gauche de la carte du shop. */
.card-lv {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 3px 9px 2px;
    border: 2px solid var(--edge);
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #ffd23f;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 0 var(--edge), inset 0 0 0 1px rgba(255, 210, 63, .35);
}
.unit-stats > .is-hurt dd { color: #ff9aa6; } /* blessée : le rouge prime sur le vert */

/* ==========================================================================
   Menu d'une barre de ressource (clic / toucher) : production du prochain tour
   + stock max, petit panneau sous la barre avec une pointe.
   ========================================================================== */
.stock[data-res-menu] { cursor: pointer; }
.stock[data-res-menu]:focus-visible { outline: 2px solid #ffd23f; outline-offset: 2px; }
.stock[aria-expanded="true"] { border-color: rgba(var(--c), .9); }
.res-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    min-width: 190px;
    padding: 9px 12px 10px;
    border: var(--edge-w, 3px) solid var(--edge);
    border-radius: 12px;
    background: linear-gradient(180deg, #2c1a44, #170d24);
    box-shadow: 0 3px 0 var(--edge), 0 12px 26px rgba(0, 0, 0, .5);
    transform-origin: 85% 0;
    cursor: default;
    -webkit-text-stroke: 0;
}
.res-menu[hidden] { display: none; }
.res-menu::before {
    content: '';
    position: absolute;
    top: -9px;
    right: 22px;
    width: 14px;
    height: 14px;
    border-left: var(--edge-w, 3px) solid var(--edge);
    border-top: var(--edge-w, 3px) solid var(--edge);
    border-radius: 3px 0 0 0;
    background: #2c1a44;
    transform: rotate(45deg);
}
.res-menu-title { margin: 0 0 6px; color: rgb(var(--c)); font-size: .8rem; font-weight: 900; text-transform: uppercase; }
.res-menu-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0; padding: 3px 0; font-size: .82rem; white-space: nowrap; }
.res-menu-row + .res-menu-row { border-top: 1px solid rgba(255, 255, 255, .08); }
.res-menu-row span { color: rgba(255, 255, 255, .7); font-weight: 700; }
.res-menu-row b { color: #fff; font-weight: 900; font-variant-numeric: tabular-nums; }
.res-menu-row b.is-up { color: #7fdc4e; }
.res-menu-row b.is-zero { color: rgba(255, 255, 255, .45); }
@media (max-width: 640px) {
    .res-menu { min-width: 170px; }
    /* 1re colonne (alcool) : le menu part vers la droite pour ne pas sortir de l'écran. */
    .stock--alcohol .res-menu { right: auto; left: -14px; transform-origin: 15% 0; }
    .stock--alcohol .res-menu::before { right: auto; left: 30px; }
}
.stock[aria-expanded="true"] { z-index: 70; } /* son menu passe devant les barres voisines et le compteur de tour */

/* Fiche du QG : stock max actuel → au niveau suivant. */
.sheet-label-sub { margin-left: 6px; color: rgba(255, 255, 255, .45); font-size: .72rem; font-weight: 700; }
.hq-storage li { padding: 7px 12px; }
.hq-storage .stat-ico { width: 24px; height: 24px; flex: none; object-fit: contain; }
.hq-storage li b { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hq-storage li b .up { margin-left: 4px; color: #7fdc4e; font-style: normal; }
.stock--gems { cursor: pointer; } /* clic = bouton « + » d’achat */

/* Fiche d'un bâtiment : boutons d'action collés en bas si la fenêtre défile, SEULEMENT
   s'il y a un gros CTA (.btn-block : Améliorer le QG, Accélérer…), sur un fond qui reprend le bas de la fenêtre (fondu au-dessus). */
[data-view-root="building"] .sheet-actions:has(.btn-block) {
    position: sticky;
    bottom: -26px;
    z-index: 2;
    margin: 16px -28px -26px;
    padding: 22px 28px 26px;
    background: linear-gradient(180deg, rgba(29, 16, 48, 0), rgb(29, 16, 48) 20px);
}
[data-view-root="building"] .sheet-actions:empty { display: none; }
@media (max-width: 640px) {
    [data-view-root="building"] .sheet-actions:has(.btn-block) { bottom: -18px; margin-bottom: -18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}
/* Fiche d’un bâtiment : illustration remontée vers le haut de la fenêtre. */
[data-view-root="building"] .sheet-hero { margin-top: -14px; padding-top: 0; }
/* Hauteur mini de l’illustration, bâtiment posé en bas : les bâtiments bas (tente, sacs
   de sable…) gardent de l’air au-dessus, les socles restent à la même hauteur. */
[data-view-root="building"] .sheet-hero { min-height: 196px; align-items: end; }
@media (max-width: 640px) { [data-view-root="building"] .sheet-hero { min-height: 170px; } }
/* Contenu remonté : le titre et le badge d’état chevauchent un peu le bas de l’illustration. */
[data-view-root="building"] .sheet-hero { margin-bottom: -30px; }
[data-view-root="building"] .sheet-hero ~ * { position: relative; z-index: 1; }
@media (max-width: 640px) { [data-view-root="building"] .sheet-hero { margin-bottom: -22px; } }
/* Badge d’état (Opérationnel / En construction) : il chevauche l’illustration → fond flouté. */
[data-view-root="building"] .sheet-status { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
[data-view-root="building"] .sheet-status.is-ready { background: linear-gradient(rgba(141, 242, 124, .14), rgba(141, 242, 124, .14)), rgba(20, 10, 32, .45); }
[data-view-root="building"] .sheet-status.is-building { background: linear-gradient(rgba(255, 154, 60, .16), rgba(255, 154, 60, .16)), rgba(20, 10, 32, .45); }

/* ==========================================================================
   Bâtiment abîmé (raid) : vie + réparation ; état « Hors service ».
   ========================================================================== */
.sheet-status.is-broken { background: rgba(255, 79, 106, .16); color: #ff9aa6; }
.sheet-status.is-broken .ico { color: #ff9aa6; }
.sheet-notice.is-broken { background: rgba(255, 79, 106, .14); color: #ffb3bd; }
.sheet-notice.is-broken .ico { color: #ff9aa6; }
.bld-hp { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; margin: 0 0 12px; padding: 10px 14px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(255, 255, 255, .05); }
.bld-hp span { color: rgba(255, 255, 255, .7); font-size: .82rem; font-weight: 700; text-transform: uppercase; }
.bld-hp b { justify-self: end; font-variant-numeric: tabular-nums; }
.bld-hp-bar { grid-column: 1 / -1; display: block; height: 9px; border: 2px solid var(--edge); border-radius: 99px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.bld-hp-bar > i { display: block; height: 100%; background: linear-gradient(180deg, #ffb35c, #ff6a3d); }

/* Profil : attaquer ce joueur. */
.prof-attack { margin-top: 16px; }
.prof-attack-note { margin: 2px 0 0; color: rgba(255, 255, 255, .6); font-size: .8rem; line-height: 1.35; text-align: center; }
.prof-skills-free { color: #7dffa8; font-weight: 800; } /* mon profil : points de compétence à dépenser */
/* Attaque impossible : encart orange en pointillés (à la place du bouton) avec la raison. */
.prof-attack-off { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px dashed rgba(255, 154, 46, .8); border-radius: 14px; background: linear-gradient(115deg, rgba(255, 79, 126, .14), rgba(255, 154, 46, .14)); }
.prof-attack-off-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--edge); border-radius: 50%; background: var(--cta); color: #fff; box-shadow: 0 2px 0 var(--edge); }
.prof-attack-off-ico .ico { width: 19px; height: 19px; stroke: var(--edge); stroke-width: 2.5px; stroke-linejoin: round; paint-order: stroke fill; filter: drop-shadow(0 1.5px 0 var(--edge)); } /* cadenas blanc contouré de noir */
.prof-attack-off b { display: block; color: #ffb35c; font-size: .95rem; font-weight: 900; text-transform: uppercase; line-height: 1.1; }
.prof-attack-off p { margin: 3px 0 0; color: rgba(255, 255, 255, .86); font-size: .84rem; line-height: 1.35; }

/* ==========================================================================
   COMBATS (module sss/fight) : marche figée, arène de rejeu, bilan.
   ========================================================================== */
.fight {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    background: radial-gradient(ellipse at 50% 40%, rgba(70, 22, 60, .92), rgba(8, 4, 16, .97) 70%);
    color: #fff;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
/* --- Marche --- */
.fight-march { position: relative; display: grid; justify-items: center; gap: 14px; width: min(560px, 100%); text-align: center; }
.fight-lines {
    position: fixed;
    inset: -20%;
    z-index: -1;
    background: repeating-linear-gradient(100deg, transparent 0 46px, rgba(255, 115, 82, .07) 46px 48px, transparent 48px 120px);
    animation: fight-rush .6s linear infinite;
    pointer-events: none;
}
@keyframes fight-rush { to { transform: translateX(-120px); } }
@media (prefers-reduced-motion: reduce) { .fight-lines { animation: none; } }
.fight-march-title { margin: 0; font-size: clamp(1.7rem, calc(6 * var(--u-vw)), 3rem); line-height: 1.05; }
.fight-count {
    margin: 0;
    font-size: clamp(5rem, calc(22 * var(--u-vw)), 9.5rem);
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    -webkit-text-stroke: 8px var(--edge);
    paint-order: stroke fill;
    filter: drop-shadow(0 6px 0 var(--edge));
}
.fight-count.is-go { color: #ffc531; }
.fight-bar { width: min(420px, 90%); height: 14px; border: 3px solid var(--edge); border-radius: 99px; background: rgba(0, 0, 0, .5); overflow: hidden; box-shadow: 0 3px 0 var(--edge); }
.fight-bar > i { display: block; width: 0; height: 100%; background: var(--sun-btn); transition: width .2s linear; }
.fight-march-sub { margin: 0; color: rgba(255, 255, 255, .7); font-size: .95rem; font-weight: 700; }
/* Marche avec trajet sur la carte : le voile s'éclaircit au centre (départ, arrivée, troupes qui
   avancent : Map::showRoute), le texte passe en bandeau en bas de l'écran. Toujours impossible
   de toucher la carte (le voile garde les clics). */
.fight.is-march.has-route {
    place-items: end center;
    background:
        linear-gradient(to top, rgba(8, 4, 16, .94) 0, rgba(8, 4, 16, .82) 22%, rgba(8, 4, 16, 0) 46%),
        radial-gradient(ellipse 75% 60% at 50% 36%, rgba(8, 4, 16, 0) 0, rgba(8, 4, 16, .2) 55%, rgba(8, 4, 16, .78) 100%);
}
.fight.has-route .fight-lines { display: none; }
.fight.has-route .fight-march { gap: 8px; padding-bottom: 6px; }
.fight.has-route .fight-march-title { font-size: clamp(1.35rem, calc(4.6 * var(--u-vw)), 2.2rem); }
.fight.has-route .fight-count { font-size: clamp(3.6rem, calc(15 * var(--u-vw)), 6.2rem); -webkit-text-stroke: 7px var(--edge); }
/* Épingles du trajet (marqueurs MapLibre) : départ = mon QG (liseré or), arrivée = la cible (rouge). */
.route-pin, .route-squad { pointer-events: none; }
.route-pin { display: grid; justify-items: center; gap: 4px; }
.route-pin-ava { display: grid; place-items: center; width: 54px; height: 54px; overflow: hidden; border: 3px solid var(--edge); border-radius: 50%; background: var(--sun-btn); box-shadow: 0 0 0 3px #ffc531, 0 4px 0 var(--edge), 0 0 22px rgba(255, 197, 49, .55); color: #1a0f22; font-size: 1.4rem; font-weight: 900; font-style: italic; }
.route-pin.is-to .route-pin-ava { background: linear-gradient(180deg, #ff6a7d, #c4143a); color: #fff; box-shadow: 0 0 0 3px #ff4f6a, 0 4px 0 var(--edge), 0 0 26px rgba(255, 59, 92, .7); animation: route-target 1.2s ease-in-out infinite; }
.route-pin-ava img { width: 100%; height: 100%; object-fit: cover; }
.route-pin-name { max-width: 160px; overflow: hidden; color: #fff; font-size: .82rem; font-weight: 900; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; -webkit-text-stroke: 3.5px var(--edge); paint-order: stroke fill; }
@keyframes route-target { 50% { box-shadow: 0 0 0 5px #ff4f6a, 0 4px 0 var(--edge), 0 0 38px rgba(255, 59, 92, .95); } }
/* Groupe de troupes en marche : portraits qui se chevauchent + effectif, petit trot. */
.route-troops { display: flex; align-items: flex-end; pointer-events: none; animation: route-trot .42s ease-in-out infinite alternate; filter: drop-shadow(0 3px 0 var(--edge)); }
/* Formation : 1 seul, 2 côte à côte, 3 en triangle (1 derrière, 2 devant), 4 en carré ; colonnes et rangées
   plus étroites que les portraits = portraits serrés qui se chevauchent. */
.route-pack { display: grid; grid-template-columns: repeat(2, 30px); grid-auto-rows: 26px; padding-bottom: 18px; }
.route-pack.n-1 { grid-template-columns: 44px; grid-auto-rows: 44px; padding-bottom: 0; }
.route-pack.n-2 { grid-auto-rows: 44px; padding-bottom: 0; }
.route-pack.n-3 > :first-child { grid-column: 1 / -1; }
.route-troop { justify-self: center; width: 44px; max-width: none; height: 44px; object-fit: contain; } /* plus large que sa case : chevauchement voulu */
.route-troops-n { align-self: center; margin-left: 4px; padding: 2px 9px; border: 2px solid var(--edge); border-radius: 99px; background: var(--sun-btn); color: #fff; font-size: .92rem; font-weight: 900; -webkit-text-stroke: 3.5px var(--edge); paint-order: stroke fill; text-shadow: 0 2px 0 var(--edge); }
@keyframes route-trot { to { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .route-troops, .route-pin.is-to .route-pin-ava { animation: none; } }

/* --- Arène --- */
.fight.is-battle { place-items: stretch; align-content: center; gap: 14px; }
.fight-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 18px; width: min(1100px, 100%); margin: 0 auto; transition: filter .4s, opacity .4s; }
.fight.has-result .fight-stage { filter: blur(3px); opacity: .35; }
.fight-side { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 3px solid var(--edge); border-radius: 20px; background: linear-gradient(180deg, #2c1a44, #170d24); box-shadow: 0 4px 0 var(--edge), 0 18px 40px rgba(0, 0, 0, .45); }
.fight-side--att { box-shadow: 0 4px 0 var(--edge), inset 0 0 0 2px rgba(255, 115, 82, .35); }
.fight-side--def { box-shadow: 0 4px 0 var(--edge), inset 0 0 0 2px rgba(111, 182, 255, .35); }
.fight-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fight-who-ava { display: grid; place-items: center; width: 40px; height: 40px; flex: none; overflow: hidden; border: 3px solid var(--edge); border-radius: 50%; background: #ff7352; font-weight: 900; font-style: italic; color: #1a0f22; }
.fight-who-ava img { width: 100%; height: 100%; object-fit: cover; }
.fight-who-name { min-width: 0; overflow: hidden; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; }
.fight-fort { flex: none; margin-left: auto; padding: 3px 9px; border: 2px solid var(--edge); border-radius: 99px; background: rgba(111, 182, 255, .2); color: #bfe0ff; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.fight-piles { display: grid; gap: 8px; }
.fight-pile { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(255, 255, 255, .05); transition: filter .3s, opacity .3s; }
.fight-pile.is-down { filter: grayscale(1); opacity: .45; }
.fight-pile-ava { width: 52px; height: 52px; overflow: hidden; border: 3px solid var(--edge); border-radius: 50%; background: #3a2156; }
.fight-pile-ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.fight-pile-info { display: grid; gap: 3px; min-width: 0; }
.fight-pile-name { margin: 0; overflow: hidden; font-size: .9rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.fight-pile-lv { color: #ffd23f; font-size: .72rem; }
.fight-pile-n { margin: 0; font-size: .8rem; font-weight: 800; color: rgba(255, 255, 255, .75); font-variant-numeric: tabular-nums; }
.fight-hp { height: 9px; border: 2px solid var(--edge); border-radius: 99px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.fight-hp > i { display: block; height: 100%; background: linear-gradient(180deg, #8df27c, #3fbf4f); transition: width .25s ease-out; }
.fight-hp > i.is-mid { background: linear-gradient(180deg, #ffd36b, #f2a23a); }
.fight-hp > i.is-low { background: linear-gradient(180deg, #ff8b8b, #e0334b); }
.fight-empty { margin: 8px 0; color: rgba(255, 255, 255, .55); font-weight: 700; text-align: center; }
.fight-pop {
    position: absolute;
    top: -6px;
    right: 10px;
    z-index: 2;
    display: grid;
    justify-items: end;
    color: #ff6b6b;
    font-size: 1.15rem;
    font-weight: 900;
    font-style: italic;
    white-space: nowrap;
    pointer-events: none;
    -webkit-text-stroke: 4px var(--edge);
    paint-order: stroke fill;
}
.fight-pop small { font-size: .62rem; text-transform: uppercase; }
.fight-pop.is-crit { color: #ffd23f; font-size: 1.45rem; }
.fight-pop.is-rip { color: #8fd0ff; font-size: .95rem; }
.fight-vs { display: grid; justify-items: center; gap: 6px; padding-top: 34px; }
.fight-vs .gta { font-size: 2.4rem; }
.fight-clock { margin: 0; color: rgba(255, 255, 255, .7); font-size: .85rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fight-skip { justify-self: center; min-width: 160px; }

/* --- Bilan --- */
.fight-result {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: grid;
    gap: 12px;
    width: min(420px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow-y: auto;
    padding: 22px 22px 20px;
    border: 3px solid var(--edge);
    border-radius: 24px;
    background: linear-gradient(180deg, #3a2156, #1d1030);
    box-shadow: 0 5px 0 var(--edge), 0 24px 60px rgba(0, 0, 0, .6);
    translate: -50% -50%;
    text-align: center;
}
.fight-result-title { margin: 0; font-size: clamp(2.2rem, calc(9 * var(--u-vw)), 3.2rem); line-height: 1; }
.fight-result.is-loss .fight-result-title { filter: grayscale(.6); }
.fight-points { justify-self: center; margin: 0; padding: 4px 14px; border: 2px solid var(--edge); border-radius: 99px; font-weight: 900; font-size: 1rem; }
.fight-points.is-up { background: rgba(127, 220, 78, .18); color: #a9ff98; }
.fight-points.is-down { background: rgba(255, 79, 106, .18); color: #ff9aa6; }
.fight-block { display: grid; gap: 8px; padding: 10px 12px; border: 2px solid var(--edge); border-radius: 16px; background: rgba(0, 0, 0, .25); text-align: left; }
.fight-block-title { margin: 0; color: rgba(255, 255, 255, .6); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.fight-loot { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.fight-loot-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-variant-numeric: tabular-nums; }
.fight-loot-item img { width: 28px; height: 28px; object-fit: contain; }
.fight-loot-item.is-up b { color: #a9ff98; }
.fight-loot-item.is-down b { color: #ff9aa6; }
.fight-none { color: rgba(255, 255, 255, .5); font-weight: 700; }
.fight-raid { display: grid; gap: 8px; }
.fight-raid-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; }
.fight-raid-row img { width: 48px; height: 48px; object-fit: contain; }
.fight-raid-txt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; font-size: .85rem; }
.fight-raid-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fight-raid-txt span { color: #ff9aa6; font-weight: 900; }
.fight-raid-txt .fight-hp { grid-column: 1 / -1; }
.fight-raid-row.is-broken img { filter: grayscale(1) brightness(.7); }
.fight-close { margin-top: 4px; }

/* Mobile : les deux camps l'un au-dessus de l'autre. */
@media (max-width: 760px) {
    .fight.is-battle { align-content: start; overflow-y: auto; }
    .fight-stage { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .fight-vs { grid-auto-flow: column; align-items: center; padding: 0; gap: 12px; }
    .fight-vs .gta { font-size: 1.7rem; }
    .fight-side { padding: 10px; }
    .fight-pile { grid-template-columns: 42px minmax(0, 1fr); padding: 5px 8px 5px 5px; }
    .fight-pile-ava { width: 42px; height: 42px; }
}
.bld-hp-bar .w-0 { width: 0%; }
.bld-hp-bar .w-1 { width: 5%; }
.bld-hp-bar .w-2 { width: 10%; }
.bld-hp-bar .w-3 { width: 15%; }
.bld-hp-bar .w-4 { width: 20%; }
.bld-hp-bar .w-5 { width: 25%; }
.bld-hp-bar .w-6 { width: 30%; }
.bld-hp-bar .w-7 { width: 35%; }
.bld-hp-bar .w-8 { width: 40%; }
.bld-hp-bar .w-9 { width: 45%; }
.bld-hp-bar .w-10 { width: 50%; }
.bld-hp-bar .w-11 { width: 55%; }
.bld-hp-bar .w-12 { width: 60%; }
.bld-hp-bar .w-13 { width: 65%; }
.bld-hp-bar .w-14 { width: 70%; }
.bld-hp-bar .w-15 { width: 75%; }
.bld-hp-bar .w-16 { width: 80%; }
.bld-hp-bar .w-17 { width: 85%; }
.bld-hp-bar .w-18 { width: 90%; }
.bld-hp-bar .w-19 { width: 95%; }
.bld-hp-bar .w-20 { width: 100%; }

/* ==========================================================================
   Préparer une attaque : troupes envoyées par type, trajet / butin en direct.
   ========================================================================== */
.attack-hint { margin: 2px 0 14px; color: rgba(255, 255, 255, .72); font-size: .88rem; line-height: 1.4; }
.attack-list { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.attack-row {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 8px;
    border: 2px solid var(--edge);
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
}
.attack-row .unit-ava { width: 50px; height: 50px; }
.attack-row-info { min-width: 0; }
.attack-row-name { margin: 0; overflow: hidden; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.attack-row-lv { color: #ffd23f; font-size: .74rem; }
.attack-row-meta { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; color: rgba(255, 255, 255, .6); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.attack-row-meta .ico { width: 12px; height: 12px; color: #ff6b7a; }
.attack-qty { width: 128px; }
.attack-all { padding: 6px 10px; border: 2px solid var(--edge); border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: .78rem; font-weight: 900; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 0 var(--edge); }
.attack-all:hover { background: rgba(255, 255, 255, .18); }
.attack-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.attack-sum > div { display: grid; gap: 2px; padding: 8px 12px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, .25); }
.attack-sum dt { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .6); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.attack-sum dt .ico { width: 14px; height: 14px; }
.attack-sum dd { margin: 0; font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .attack-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .attack-row .unit-ava { width: 42px; height: 42px; }
    .attack-qty { grid-column: 1 / 3; width: auto; }
}
.attack-ava { display: block; width: 50px; height: 50px; overflow: hidden; border: 3px solid var(--edge); border-radius: 50%; background: #3a2156; }
.attack-ava img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
@media (max-width: 640px) { .attack-ava { width: 42px; height: 42px; } }
/* Bilan : points de classement + XP du personnage côte à côte. */
.fight-gains { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fight-gains .fight-points { justify-self: auto; }
.fight-xp { margin: 0; padding: 4px 14px; border: 2px solid var(--edge); border-radius: 99px; background: rgba(255, 210, 63, .18); color: #ffd23f; font-weight: 900; font-size: 1rem; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   ARÈNE « jeu de baston » : écran fendu en diagonale (attaquant rouge à gauche,
   défenseur bleu à droite ; en haut / en bas sur mobile), énorme VS sur la
   fracture, bandeaux de noms inclinés, cartes de troupes biseautées.
   ========================================================================== */
.fight.is-battle { background: #07030d; }
.fight-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fight-half { position: absolute; inset: 0; }
.fight-half--att {
    clip-path: polygon(0 0, 57% 0, 43% 100%, 0 100%);
    background:
        repeating-linear-gradient(-62deg, transparent 0 34px, rgba(255, 255, 255, .045) 34px 36px),
        radial-gradient(ellipse 70% 80% at 22% 45%, #ff4a5c 0%, #c2133a 38%, #5c0620 75%, #2a020d 100%);
}
.fight-half--def {
    clip-path: polygon(57% 0, 100% 0, 100% 100%, 43% 100%);
    background:
        repeating-linear-gradient(-62deg, transparent 0 34px, rgba(255, 255, 255, .045) 34px 36px),
        radial-gradient(ellipse 70% 80% at 78% 55%, #3fa2ff 0%, #1653c9 38%, #0a1f63 75%, #03082a 100%);
}
/* Fracture lumineuse entre les deux camps. */
.fight-seam {
    position: absolute;
    inset: 0;
    clip-path: polygon(56.4% 0, 57.6% 0, 43.6% 100%, 42.4% 100%);
    background: linear-gradient(180deg, #fff6c8, #ffd23f 45%, #ff7352);
    filter: drop-shadow(0 0 12px rgba(255, 210, 63, .9));
}
/* Trame de points façon BD + vignette. */
.fight-dots {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(rgba(0, 0, 0, .28) 1.2px, transparent 1.7px) 0 0 / 7px 7px,
        radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0, 0, 0, .65) 100%);
    mix-blend-mode: multiply;
}

.fight.is-battle .fight-stage { position: relative; z-index: 1; width: min(1180px, 100%); gap: 28px; align-items: center; }
.fight.is-battle .fight-skip { position: relative; z-index: 1; }
/* Camps : plus de panneau, les cartes reposent directement sur la couleur du camp. */
.fight.is-battle .fight-side { padding: 0; border: 0; background: none; box-shadow: none; gap: 14px; }
.fight-side--def { justify-items: end; }

/* Bandeau du joueur : grosse étiquette inclinée à la couleur du camp. */
.fight.is-battle .fight-who { position: relative; gap: 12px; padding: 8px 22px 8px 10px; isolation: isolate; }
.fight.is-battle .fight-who::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 3px solid var(--edge);
    border-radius: 10px;
    background: linear-gradient(180deg, #ff6a6a, #c8202e);
    box-shadow: 0 4px 0 var(--edge), 0 10px 26px rgba(0, 0, 0, .45);
    transform: skewX(-14deg);
}
.fight-side--def .fight-who { flex-direction: row-reverse; padding: 8px 10px 8px 22px; }
.fight-side--def .fight-who::before { background: linear-gradient(180deg, #6fb6ff, #2557c8); }
.fight.is-battle .fight-who-ava { width: 54px; height: 54px; font-size: 1.5rem; box-shadow: 0 3px 0 var(--edge); }
.fight.is-battle .fight-who-name { font-size: clamp(1.2rem, calc(2.4 * var(--u-vw)), 1.9rem); font-style: italic; -webkit-text-stroke: 6px var(--edge); filter: drop-shadow(0 3px 0 var(--edge)); }
.fight.is-battle .fight-fort { position: absolute; top: calc(100% + 6px); right: 4px; margin: 0; background: rgba(5, 12, 40, .75); }
.fight-side--def .fight-fort { right: auto; left: 4px; }

/* Cartes de troupes biseautées (sens de la diagonale), contenu droit et net. */
.fight.is-battle .fight-piles { gap: 12px; width: min(400px, 100%); }
.fight.is-battle .fight-pile { grid-template-columns: 66px minmax(0, 1fr); gap: 14px; padding: 9px 18px 9px 10px; border: 0; background: none; isolation: isolate; --flash: 0; }
.fight.is-battle .fight-pile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 3px solid var(--edge);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(20, 8, 30, .82), rgba(8, 3, 14, .9));
    box-shadow: 0 4px 0 var(--edge), inset 0 2px 0 rgba(255, 255, 255, .08);
    transform: skewX(-12deg);
}
.fight.is-battle .fight-pile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 12px;
    background: #fff;
    opacity: var(--flash);
    transform: skewX(-12deg);
    pointer-events: none;
}
.fight-side--att .fight-pile::before { box-shadow: 0 4px 0 var(--edge), inset 4px 0 0 #ff4f6a; }
.fight-side--def .fight-pile::before { box-shadow: 0 4px 0 var(--edge), inset -4px 0 0 #4aa8ff; }
.fight.is-battle .fight-pile-ava { width: 66px; height: 66px; box-shadow: 0 3px 0 var(--edge); }
.fight.is-battle .fight-pile-name { font-size: 1.05rem; font-style: italic; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; }
.fight.is-battle .fight-pile-n { font-size: .95rem; color: #fff; }
.fight.is-battle .fight-hp { height: 13px; border-width: 3px; }
.fight.is-battle .fight-pop { top: -14px; font-size: 1.6rem; -webkit-text-stroke: 6px var(--edge); }
.fight.is-battle .fight-pop.is-crit { font-size: 2.2rem; }
.fight.is-battle .fight-pop.is-crit small { font-size: .8rem; }
.fight.is-battle .fight-empty { padding: 14px 20px; border: 3px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, .45); color: #fff; }

/* VS : énorme, doré, posé sur la fracture. */
.fight.is-battle .fight-vs { padding: 0; gap: 4px; }
.fight-vs-txt {
    display: block;
    color: #ffd23f;
    font-size: clamp(4.5rem, calc(10 * var(--u-vw)), 8.5rem);
    font-weight: 900;
    font-style: italic;
    line-height: .9;
    -webkit-text-stroke: 12px var(--edge);
    paint-order: stroke fill;
    filter: drop-shadow(0 7px 0 var(--edge)) drop-shadow(0 0 26px rgba(255, 210, 63, .55));
}
.fight.is-battle .fight-clock { padding: 3px 12px; border: 2px solid var(--edge); border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; }

/* Mobile : fracture horizontale inclinée (attaquant en haut, défenseur en bas). */
@media (max-width: 760px) {
    .fight-half--att { clip-path: polygon(0 0, 100% 0, 100% 44%, 0 54%); }
    .fight-half--def { clip-path: polygon(0 54%, 100% 44%, 100% 100%, 0 100%); }
    .fight-seam { clip-path: polygon(0 53.4%, 100% 43.4%, 100% 44.6%, 0 54.6%); }
    .fight.is-battle .fight-stage { gap: 10px; }
    .fight.is-battle .fight-vs { grid-auto-flow: row; }
    .fight-vs-txt { font-size: 4.2rem; -webkit-text-stroke: 9px var(--edge); }
    .fight-side--def { justify-items: stretch; }
    .fight.is-battle .fight-piles { width: 100%; gap: 8px; }
    .fight.is-battle .fight-pile { grid-template-columns: 50px minmax(0, 1fr); padding: 6px 14px 6px 8px; }
    .fight.is-battle .fight-pile-ava { width: 50px; height: 50px; }
    .fight.is-battle .fight-who-ava { width: 42px; height: 42px; }
    .fight-side--def .fight-who { justify-self: end; }
}
/* Correctifs arène : couleurs du camp défenseur (priorité), chiffres de dégâts centrés
   sur la carte (ils ne mordent plus sur le bandeau), VS sur la fracture en mobile. */
.fight.is-battle .fight-side--def .fight-who::before { background: linear-gradient(180deg, #6fb6ff, #2557c8); }
.fight.is-battle .fight-side--att .fight-pile::before { box-shadow: 0 4px 0 var(--edge), inset 4px 0 0 #ff4f6a; }
.fight.is-battle .fight-side--def .fight-pile::before { box-shadow: 0 4px 0 var(--edge), inset -4px 0 0 #4aa8ff; }
.fight.is-battle .fight-pop { top: 50%; right: 22px; margin-top: -.75em; }
@media (max-width: 760px) { .fight.is-battle { align-content: center; } }

/* ==========================================================================
   Historique des combats (appli du téléphone) + sorties de combat.
   ========================================================================== */
.fh-tabs { margin-bottom: 12px; }
.fh-tabs .rank-tab { position: relative; }
.fh-badge { position: absolute; top: -7px; right: -6px; }
.fh-empty { margin: 18px 0 6px; color: rgba(255, 255, 255, .6); font-weight: 700; text-align: center; }
.fh-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fh-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 2px solid var(--edge);
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 4px 0 0 rgba(255, 255, 255, .12);
}
.fh-row.is-win { box-shadow: inset 4px 0 0 #7fdc4e; }
.fh-row.is-loss { box-shadow: inset 4px 0 0 #ff4f6a; }
.fh-row.is-unseen { border-color: #ffc531; background: rgba(255, 197, 49, .1); }
.fh-ava { width: 42px; height: 42px; }
.fh-main { display: grid; gap: 3px; min-width: 0; }
.fh-name { margin: 0; overflow: hidden; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.fh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: .78rem; font-weight: 800; }
.fh-result { text-transform: uppercase; }
.fh-row.is-win .fh-result { color: #a9ff98; }
.fh-row.is-loss .fh-result { color: #ff9aa6; }
.fh-result.is-march { color: #ffc531; }
.fh-delta.is-up { color: #a9ff98; }
.fh-delta.is-down { color: #ff9aa6; }
.fh-ago { color: rgba(255, 255, 255, .5); font-weight: 700; }
.fh-loot { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: .78rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.fh-loot span { display: inline-flex; align-items: center; gap: 3px; }
.fh-loot.is-up { color: #a9ff98; }
.fh-loot.is-down { color: #ff9aa6; }
.fh-res { width: 18px; height: 18px; object-fit: contain; }
.fh-replay { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; font-size: .8rem; }
.fh-replay .ico { width: 14px; height: 14px; }
@media (max-width: 420px) {
    .fh-row { grid-template-columns: auto minmax(0, 1fr); }
    .fh-replay { grid-column: 1 / -1; justify-content: center; }
}

/* Bannière d'alerte : « Plus tard » sous le bouton principal. */
.mission-later { display: block; margin: 10px auto 0; min-height: 34px; padding: 0 16px; font-size: .82rem; pointer-events: auto; }

/* Rejeu : on peut le quitter (croix dans le coin). */
.fight-quit { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 5; }
/* Historique des combats : 2 onglets (sélecteur segmenté du classement), pastille de non-vus. */
.fh-tabs.rank-types { grid-template-columns: repeat(2, 1fr); margin: 4px 0 12px; overflow: visible; }
.fh-tabs .rank-tab { position: relative; }
/* Rejeu : vitesse (×1 / ×2 / ×4) + « Passer » (étoile = réservé Premium en direct). */
.fight-controls { position: relative; z-index: 1; display: flex; justify-content: center; gap: 10px; }
.fight-speed { min-width: 74px; font-variant-numeric: tabular-nums; }
.fight-speed.is-on { color: #ffd23f; }
.fight-skip.is-locked, .fight-mini.is-locked { opacity: .8; }
.fight-skip.is-locked .ico, .fight-mini.is-locked .ico { width: 16px; height: 16px; margin-right: 6px; color: #ffd23f; }
/* Messages flash au-dessus de l'écran de combat. */
body.is-fighting .toasts { z-index: 310; }
.fight-speeds.seg { display: inline-grid; grid-auto-columns: 58px; margin: 0; }
.fight-speeds .rank-tab { height: 40px; font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.fight-controls { align-items: center; }
.sheet--fights { width: min(540px, 100%); } /* un peu plus large que les fenêtres standard (440 px) */
/* Arène : noms (joueurs, troupes) jamais rognés — leur zone coupée (points de suspension)
   laisse la place au gros contour et à l'ombre portée. */
.fight.is-battle .fight-who-name { line-height: 1.3; padding: 4px 6px 7px; margin: -4px -6px -7px; }
.fight.is-battle .fight-pile-name { line-height: 1.3; padding: 3px 4px 4px; margin: -3px -4px -4px; }
/* « Recruter plus » (cartes d'équipe) : plus visible, aux couleurs du recrutement,
   mais toujours secondaire (contour + fond vert léger, pas le dégradé plein). */
.unit-card .crew-more {
    min-height: 42px;
    border: 2.5px solid #7fdc4e;
    background: linear-gradient(180deg, rgba(127, 220, 78, .26), rgba(47, 168, 42, .18));
    color: #fff;
    font-size: .92rem;
    font-weight: 900;
    -webkit-text-stroke: 3px var(--edge);
    paint-order: stroke fill;
    box-shadow: 0 0 0 2px var(--edge), inset 0 2px 0 rgba(255, 255, 255, .18), 0 4px 0 var(--edge), 0 0 18px rgba(127, 220, 78, .22);
}
.unit-card .crew-more:hover:not([disabled]) { border-color: #a6f07a; background: linear-gradient(180deg, rgba(127, 220, 78, .4), rgba(47, 168, 42, .3)); }
.unit-card .crew-more:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 0 0 2px var(--edge), inset 0 2px 0 rgba(255, 255, 255, .18), 0 2px 0 var(--edge); }
.sheet--attack { width: min(560px, 100%); } /* plus large : les noms des troupes ne sont plus tronqués */
/* Mobile : une fenêtre ouverte depuis le chat (profil d'un joueur…) passe AU-DESSUS du chat ;
   le chat reste ouvert dessous et réapparaît quand on ferme la fenêtre. */
@media (max-width: 640px) {
    body:has(#layer .sheet-wrap) .chat { z-index: 38; }
}
/* Préparer l'attaque, mobile : une seule ligne par troupe (portrait, nom, − / quantité / +, Tout). */
@media (max-width: 640px) {
    .attack-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 6px; padding: 6px 7px 6px 6px; }
    .attack-ava { width: 36px; height: 36px; border-width: 2px; }
    .attack-row-name { font-size: .88rem; }
    .attack-row-lv { font-size: .66rem; }
    .attack-row-meta { font-size: .66rem; }
    .attack-row-meta .ico { width: 10px; height: 10px; }
    .attack-qty { grid-column: auto; width: auto; gap: 3px; }
    .attack-qty .qty-btn { width: 28px; height: 30px; min-width: 0; padding: 0; }
    .attack-qty .qty-btn .ico { width: 13px; height: 13px; }
    .attack-qty input { width: 38px; height: 30px; padding: 0; font-size: .9rem; }
    .attack-all { padding: 5px 6px; font-size: .64rem; border-radius: 8px; }
}
/* Préparer l'attaque : « Attaquer » collé en bas quand la fenêtre défile (comme les fiches de bâtiment). */
[data-view-root="attack"] .attack-actions {
    position: sticky;
    bottom: -26px;
    z-index: 2;
    display: grid;
    gap: 6px;
    margin: 4px -28px -26px;
    padding: 18px 28px 22px;
    background: linear-gradient(180deg, rgba(29, 16, 48, 0), rgb(29, 16, 48) 18px);
}
@media (max-width: 640px) {
    [data-view-root="attack"] .attack-actions { bottom: -18px; margin-bottom: -18px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}
/* Préparer l'attaque : champ de quantité un peu plus large (centaines / milliers lisibles). */
.attack-qty input { width: 62px; }
@media (max-width: 640px) { .attack-qty input { width: 48px; } }
/* Arène : bandeaux des joueurs — avatar plus gros, niveau + barre de vie globale (toutes ses troupes). */
.fight.is-battle .fight-who-ava { width: 76px; height: 76px; border-width: 4px; font-size: 2rem; margin: -14px 0 -14px -6px; }
.fight-side--def .fight-who-ava { margin: -14px -6px -14px 0; }
.fight-who-txt { display: grid; gap: 4px; min-width: 0; }
.fight-who-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fight-side--def .fight-who-line { flex-direction: row-reverse; }
.fight-who-lv { flex: none; color: #ffd23f; font-size: .85rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.fight.is-battle .fight-who-hp { flex: 1 1 auto; min-width: 90px; height: 14px; border-width: 3px; }
.fight-side--def .fight-who-txt { justify-items: end; }
@media (max-width: 760px) {
    .fight.is-battle .fight-who-ava { width: 56px; height: 56px; border-width: 3px; margin: -10px 0 -10px -4px; }
    .fight-side--def .fight-who-ava { margin: -10px -4px -10px 0; }
    .fight.is-battle .fight-who-hp { height: 11px; }
}
.fight-speeds.seg { grid-auto-columns: 62px; } .fight-speeds .rank-tab { padding: 0 4px; white-space: nowrap; }
@media (max-width: 640px) {
    .fight-controls { gap: 8px; max-width: 100%; }
    .fight-speeds.seg { grid-auto-columns: 48px; }
    .fight-speeds .rank-tab { height: 36px; font-size: .9rem; }
    .fight.is-battle .fight-skip { min-width: 0; padding: 0 14px; font-size: .85rem; }
}
/* Bandeaux des joueurs : MÊME largeur fixe des deux côtés (= cartes de troupes), nom en
   points de suspension s'il est trop long, barre de vie sur toute la largeur restante. */
.fight.is-battle .fight-who { width: min(400px, 100%); box-sizing: border-box; }
.fight.is-battle .fight-who-txt { flex: 1 1 auto; }
.fight.is-battle .fight-who-name { display: block; max-width: 100%; }
.fight-side--def .fight-who-txt { justify-items: stretch; text-align: right; }
.fight.is-battle .fight-who-hp { flex: 1 1 auto; }
@media (max-width: 760px) { .fight.is-battle .fight-who { width: 100%; } }
/* Mobile : les deux joueurs se font face autour du VS — l'attaquant a ses troupes au-dessus et
   son bandeau juste au-dessus du VS ; le défenseur, son bandeau juste sous le VS puis ses troupes. */
@media (max-width: 760px) {
    .fight.is-battle .fight-side--att { display: flex; flex-direction: column-reverse; align-items: stretch; }
    .fight.is-battle .fight-stage { gap: 14px; }
}
/* Cartes de troupes : nom (plus gros) et « ×N » sur la même ligne, carte moins haute.
   Bureau : le camp défenseur est en miroir (portrait à droite, comme son bandeau). */
.fight-pile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.fight.is-battle .fight-pile-name { flex: 1 1 auto; min-width: 0; font-size: 1.2rem; }
.fight.is-battle .fight-pile-n { flex: none; margin: 0; font-size: 1.05rem; font-weight: 900; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; }
.fight.is-battle .fight-pile-info { gap: 7px; }
.fight.is-battle .fight-pile { padding-top: 8px; padding-bottom: 8px; }
@media (min-width: 761px) {
    .fight.is-battle .fight-side--def .fight-pile { grid-template-columns: minmax(0, 1fr) 66px; padding: 8px 10px 8px 18px; }
    .fight.is-battle .fight-side--def .fight-pile-ava { order: 2; }
    .fight.is-battle .fight-side--def .fight-pile-top { flex-direction: row-reverse; }
    .fight.is-battle .fight-side--def .fight-pile-name { text-align: right; }
    .fight.is-battle .fight-side--def .fight-pop { right: auto; left: 22px; justify-items: start; }
}
/* Défenseur en miroir : ses barres de vie se remplissent depuis la droite (bandeau partout,
   cartes de troupes en bureau, là où elles sont inversées). */
.fight.is-battle .fight-side--def .fight-who-hp > i { margin-left: auto; }
@media (min-width: 761px) {
    .fight.is-battle .fight-side--def .fight-pile .fight-hp > i { margin-left: auto; }
}
/* Arène mobile compacte : 2 × 4 piles + bandeaux + VS + commandes tiennent en hauteur. */
@media (max-width: 760px) {
    .fight.is-battle { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); gap: 8px; }
    .fight.is-battle .fight-stage { gap: 8px; }
    .fight.is-battle .fight-side { gap: 6px; }
    .fight.is-battle .fight-piles { gap: 5px; }
    .fight.is-battle .fight-pile { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; padding: 4px 12px 4px 6px; }
    .fight.is-battle .fight-pile-ava { width: 36px; height: 36px; border-width: 2px; box-shadow: none; }
    .fight.is-battle .fight-pile-info { gap: 4px; }
    .fight.is-battle .fight-pile-name { font-size: .95rem; -webkit-text-stroke: 3px var(--edge); }
    .fight.is-battle .fight-pile-n { font-size: .85rem; -webkit-text-stroke: 3px var(--edge); }
    .fight.is-battle .fight-pile .fight-hp { height: 8px; border-width: 2px; }
    .fight.is-battle .fight-pop { font-size: 1.2rem; }
    .fight.is-battle .fight-pop.is-crit { font-size: 1.5rem; }
    .fight.is-battle .fight-who { padding: 5px 16px 5px 8px; gap: 9px; }
    .fight-side--def .fight-who { padding: 5px 8px 5px 16px; }
    .fight.is-battle .fight-who-ava { width: 46px; height: 46px; margin: -8px 0 -8px -2px; font-size: 1.3rem; }
    .fight-side--def .fight-who-ava { margin: -8px -2px -8px 0; }
    .fight.is-battle .fight-who-name { font-size: 1.1rem; }
    .fight-who-lv { font-size: .72rem; }
    .fight.is-battle .fight-who-hp { height: 9px; border-width: 2px; }
    .fight-vs-txt { font-size: 3rem; -webkit-text-stroke: 7px var(--edge); }
    .fight.is-battle .fight-clock { padding: 1px 10px; font-size: .75rem; }
    .fight.is-battle .fight-vs { gap: 6px; }
}
/* Mobile : croix du rejeu en bas à droite, à côté des commandes (en haut elle masquait la 1re carte). */
@media (max-width: 760px) {
    .fight-quit { top: auto; right: 10px; bottom: max(14px, env(safe-area-inset-bottom)); width: 38px; height: 38px; }
}
/* Marche : annuler l'attaque (après 10 s de trajet). */
.fight-cancel { margin-top: 6px; min-width: 200px; }
.fh-result.is-cancel { color: rgba(255, 255, 255, .55); }
/* « NIV. N » du bandeau de combat : place pour le contour épais (il était rogné). */
.fight-who-line { overflow: visible; padding: 2px 0; }
.fight-who-lv { display: inline-block; line-height: 1.35; padding: 2px 4px; margin: -2px -4px; overflow: visible; }
/* Petit bouton « soigner » au bout de la barre de vie du portrait (pile blessée) → encart de soin. */
.ava-wrap { position: relative; }
.ava-heal {
    position: absolute;
    right: 2%;
    bottom: -14px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2.5px solid var(--edge);
    border-radius: 50%;
    background: linear-gradient(180deg, #8ef05a, #2fa82a);
    color: #fff;
    cursor: pointer;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 var(--edge), 0 0 12px rgba(127, 220, 78, .45);
    animation: heal-pulse 1.8s ease-in-out infinite;
}
.ava-heal .ico { width: 15px; height: 15px; filter: drop-shadow(0 1px 0 var(--edge)); }
.ava-heal:hover { filter: brightness(1.12); }
@keyframes heal-pulse { 50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 var(--edge), 0 0 20px rgba(127, 220, 78, .8); } }
@media (prefers-reduced-motion: reduce) { .ava-heal { animation: none; } }
.heal-pop-hp { margin: 0 0 6px; font-size: 1.4rem; font-weight: 900; color: #ffb35c; font-variant-numeric: tabular-nums; }
/* Fiche d'un bâtiment abîmé : petite clé à molette au bout de la barre de vie → encart de réparation. */
.bld-hp { grid-template-columns: auto 1fr auto; }
.bld-hp > b { grid-column: 2; }
.bld-hp-bar { grid-column: 1 / 3; }
.bld-repair-btn {
    grid-column: 3;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2.5px solid var(--edge);
    border-radius: 50%;
    background: linear-gradient(180deg, #8ef05a, #2fa82a);
    color: #fff;
    cursor: pointer;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 var(--edge), 0 0 12px rgba(127, 220, 78, .45);
    animation: heal-pulse 1.8s ease-in-out infinite;
}
.bld-repair-btn .ico { width: 17px; height: 17px; filter: drop-shadow(0 1px 0 var(--edge)); }
.bld-repair-btn:hover { filter: brightness(1.12); }
@media (prefers-reduced-motion: reduce) { .bld-repair-btn { animation: none; } }
.repair-pop { border-radius: inherit; }
.repair-pop-card { width: min(320px, 100%); }

/* Bannières plein écran (Tu as été attaqué, Mission réussie, Haut fait…) : bande en légère
   diagonale ; le texte, un peu moins incliné, reste bien lisible. */
.mission-band { width: 112%; margin-left: -6%; transform: skewY(-5deg); }
.mission-band > * { transform: skewY(2.5deg); }
/* Encart de réparation : plein écran centré (pas coincé dans la fiche qui défile), une colonne. */
.repair-pop { position: fixed; inset: 0; z-index: 60; border-radius: 0; }
.repair-pop .hire-pop-card.repair-pop-card { grid-template-columns: minmax(0, 1fr); width: min(340px, calc(calc(100 * var(--u-vw)) - 32px)); padding: 24px 22px 20px; text-align: center; }
.repair-pop-card .hire-pop-form { border: 0; padding: 0; width: 100%; }
/* Arène : bâtiments exposés du défenseur (sous ses troupes), vie avant / après le raid. */
.fight-blds { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.fight-bld {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 3px;
    width: 70px;
    padding: 5px 5px 6px;
    border: 2px solid var(--edge);
    border-radius: 12px;
    background: rgba(5, 12, 40, .6);
    box-shadow: 0 3px 0 var(--edge);
}
.fight-bld img { width: 56px; height: 44px; object-fit: contain; }
.fight-bld > .ico { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; color: #ff6b7a; filter: drop-shadow(0 1px 0 var(--edge)); }
.fight-bld .fight-bld-hp { width: 100%; height: 7px; border-width: 2px; }
.fight-bld.is-broken img { filter: grayscale(1) brightness(.6); }
.fight.is-battle .fight-pop.is-bld { top: 6px; right: 50%; margin-top: 0; translate: 50% 0; font-size: 1rem; color: #ff9a3c; }
@media (max-width: 760px) {
    .fight-blds { justify-content: center; gap: 5px; margin-top: 0; }
    .fight-bld { width: 56px; padding: 3px 3px 4px; }
    .fight-bld img { width: 44px; height: 30px; }
}
.fight-blds-fort { flex-basis: 100%; text-align: right; color: #bfe0ff; font-size: .78rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
@media (max-width: 760px) { .fight-blds-fort { text-align: center; font-size: .7rem; } }
/* Commandes du rejeu : sélecteur de vitesse et « Passer » à la MÊME hauteur, alignés. */
.fight-controls { align-items: stretch; --ctl-h: 50px; }
.fight-speeds.seg { height: var(--ctl-h); box-sizing: border-box; align-items: stretch; }
.fight-speeds .rank-tab { height: auto; min-height: 0; }
.fight.is-battle .fight-skip { height: var(--ctl-h); min-height: 0; box-sizing: border-box; margin: 0; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { .fight-controls { --ctl-h: 44px; } }
/* Soigner / Réparer : pastille sombre avec pastille verte (picto) + libellé. */
.ava-heal, .bld-repair-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    padding: 3px 11px 3px 3px;
    border: 2px solid var(--edge);
    border-radius: 99px;
    background: rgba(8, 4, 16, .82);
    box-shadow: 0 3px 0 var(--edge), 0 0 0 1px rgba(127, 220, 78, .35) inset;
    animation: none;
}
.ava-heal { right: -6%; bottom: -16px; }
.pill-ico {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 2px solid var(--edge);
    border-radius: 50%;
    background: linear-gradient(180deg, #8ef05a, #2fa82a);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 10px rgba(127, 220, 78, .5);
    animation: heal-pulse 1.8s ease-in-out infinite;
}
.pill-ico .ico { width: 13px; height: 13px; color: #fff; filter: drop-shadow(0 1px 0 var(--edge)); }
.pill-txt { color: #c8f5a8; font-size: .78rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.ava-heal:hover .pill-txt, .bld-repair-btn:hover .pill-txt { color: #fff; }
.bld-repair-btn { align-self: center; justify-self: end; }
@media (prefers-reduced-motion: reduce) { .pill-ico { animation: none; } }
/* Portrait d'une pile blessée : barre de vie à gauche, pastille « Soigner » à sa droite (côte à côte). */
.ava-wrap:has(.ava-heal) .ava-hp { left: 2%; width: 42%; transform: none; translate: 0 0; }
.ava-wrap:has(.ava-heal) .ava-heal { right: -2%; bottom: -15px; }

/* Pile blessée : barre de vie à sa place, pastille « Soigner » centrée juste dessous. */
.ava-wrap:has(.ava-heal) { margin-bottom: 30px; }
.ava-wrap:has(.ava-heal) .ava-hp { left: 50%; width: 72%; translate: -50% 0; }
.ava-wrap:has(.ava-heal) .ava-heal { right: auto; left: 50%; bottom: -40px; translate: -50% 0; }/* « Mon équipe » : niveau du type de troupe en haut à gauche, à côté de la corbeille. */
.card-lv--crew { left: 54px; top: 14px; }
@media (max-width: 640px) { .card-lv--crew { left: 46px; top: 10px; font-size: .74rem; } }
/* « Soigner » : sous le portrait en bureau ; en mobile, plus petit, en bas à gauche de la carte. */
.card-heal { display: none; }
@media (max-width: 640px) {
    .ava-wrap .ava-heal { display: none; }
    .ava-wrap:has(.ava-heal) { margin-bottom: 0; }
    .unit-card .card-heal { display: inline-flex; position: absolute; left: 8px; right: auto; bottom: 8px; top: auto; translate: none; z-index: 4; gap: 4px; padding: 2px 8px 2px 2px; }
    .card-heal .pill-ico { width: 20px; height: 20px; }
    .card-heal .pill-ico .ico { width: 10px; height: 10px; }
    .card-heal .pill-txt { font-size: .64rem; }
}
@media (max-width: 640px) { .unit-card .card-heal { left: 50%; translate: -50% 0; } }
/* Groupe blessé : « Soigner » pleine largeur + petit « + » pour recruter quand même. */
.crew-heal-cta { display: flex; gap: 8px; align-items: stretch; }
.crew-heal-cta .btn-heal { flex: 1 1 auto; min-width: 0; }
.crew-heal-cta .btn-heal .btn-label .ico { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }
.unit-card .crew-more.crew-more--mini { flex: none; width: 48px; min-height: 0; padding: 0; }
.unit-card .crew-more.crew-more--mini .ico { font-size: 18px; }
/* Détail mobile : rangée « Soigner » + « + » pleine largeur. */
.detail-pop .crew-heal-cta { display: flex; width: 100%; margin-top: 6px; }
/* « Assaut ! » en fin de marche : une seule ligne, taille adaptée à la largeur. */
.fight-count.is-go { white-space: nowrap; font-size: clamp(3rem, calc(15 * var(--u-vw)), 7.5rem); }
/* « Soigner » : libellé seul (le coût est dans l'encart), même hauteur que le « + ». */
.crew-heal-cta .btn-heal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; }
.crew-heal-cta .btn-heal .ico { width: 17px; height: 17px; margin: 0; }
.unit-card .crew-heal-cta .crew-more--mini { height: auto; }
/* « Soigner » : même style que « Recruter plus » (bouton secondaire vert contouré). */
.unit-card .crew-heal-cta .crew-more.btn-heal { flex: 1 1 auto; min-height: 42px; }
.unit-card .crew-heal-cta .crew-more.btn-heal .ico { color: #fff; filter: drop-shadow(0 1px 0 var(--edge)); }
.unit-card .crew-heal-cta .crew-more--mini { min-height: 42px; }
/* Annuler l'attaque : toujours affiché ; grisé tant qu'on ne peut pas annuler (10 premières s, fin du trajet). */
.game .fight-cancel[disabled] { opacity: .38; box-shadow: none; transform: none; cursor: not-allowed; filter: grayscale(.4); }
/* Recrutement au-delà du maximum : motif sous le coût (ressources manquantes en rouge). */
.hire-pop-why { margin: 0; color: #ff8f9c; font-size: .82rem; font-weight: 800; text-align: center; }
.hire-pop-why[hidden] { display: none; }
.hire-pop-total.is-shake { animation: qty-shake .45s; }

/* ==========================================================================
   ARMURERIE : raretés, forge, inventaire, emplacements d'équipement.
   Raretés : basique gris, rare bleu, épique violet, légendaire or.
   ========================================================================== */
.r-0 { --rar: #c9c3d6; --rar-bg: rgba(201, 195, 214, .14); }
.r-1 { --rar: #4aa8ff; --rar-bg: rgba(74, 168, 255, .16); }
.r-2 { --rar: #c27bff; --rar-bg: rgba(194, 123, 255, .18); }
.r-3 { --rar: #ffc531; --rar-bg: rgba(255, 197, 49, .2); }

.gear-badge {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border: 3px solid var(--rar, #c9c3d6);
    border-radius: 12px;
    background: radial-gradient(circle at 50% 35%, var(--rar-bg, rgba(255,255,255,.1)), rgba(8, 4, 16, .7) 75%);
    color: var(--rar, #fff);
    box-shadow: 0 0 0 2px var(--edge), 0 3px 0 var(--edge), 0 0 14px var(--rar-bg, transparent);
}
.gear-badge .ico { width: 24px; height: 24px; filter: drop-shadow(0 1px 0 var(--edge)); }
.gear-badge.is-big { width: 96px; height: 96px; border-radius: 22px; }
.gear-badge.is-big .ico { width: 52px; height: 52px; }
.gear-badge.is-mystery { --rar: #ffd23f; animation: heal-pulse 1.8s ease-in-out infinite; }
.gear-badge.r-3 { animation: gear-shine 2.4s ease-in-out infinite; }
@keyframes gear-shine { 50% { box-shadow: 0 0 0 1.5px var(--edge), 0 2px 0 var(--edge), 0 0 26px rgba(255, 197, 49, .75); } }
@media (prefers-reduced-motion: reduce) { .gear-badge.r-3, .gear-badge.is-mystery { animation: none; } }

.gear-rarity { display: inline-block; padding: 1px 8px; border: 2px solid var(--edge); border-radius: 99px; background: var(--rar-bg); color: var(--rar); font-size: .7rem; font-weight: 900; text-transform: uppercase; vertical-align: 2px; white-space: nowrap; }
.gear-stats { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: .8rem; font-weight: 800; }
.gear-stats li { display: flex; align-items: center; gap: 6px; }
.gear-stats .ico { width: 14px; height: 14px; flex: none; color: rgba(255, 255, 255, .7); }

/* Forge : chantier en cours / prêt. */
.sheet--armory .sheet-head { align-items: center; justify-content: space-between; }
.armory-inv { width: auto; padding: 0 16px; }
.armory-inv b { color: rgba(255, 255, 255, .7); }
.forge-status { display: flex; align-items: center; gap: 14px; margin: 10px 0 14px; padding: 12px 14px; border: 2px solid var(--edge); border-radius: 16px; background: rgba(0, 0, 0, .3); }
.forge-status.is-ready { border-color: #7fdc4e; background: rgba(127, 220, 78, .12); }
.forge-status-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.forge-status-kicker { margin: 0; color: rgba(255, 255, 255, .6); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.forge-status-name { margin: 0; font-weight: 900; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-status-time { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 900; color: #ffc078; font-variant-numeric: tabular-nums; }
.forge-status-time .ico { width: 15px; height: 15px; }
.forge-collect { white-space: nowrap; }
.forge-hint { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; color: rgba(255, 255, 255, .72); font-size: .88rem; }
.forge-hint .ico { width: 16px; height: 16px; color: #ffd23f; flex: none; }
.armory-fams { margin-bottom: 14px; }

/* Cartes de forge. */
.gear-card { position: relative; }
.gear-card-ico { display: grid; place-items: center; padding: 26px 0 8px; }
.gear-card .card-lv { top: 12px; left: 12px; }
.gear-range-title { margin: 4px 0 6px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 900; }
.gear-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.gear-range .gear-stats:last-child { color: #ffd23f; }
.gear-time { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; color: rgba(255, 255, 255, .65); font-size: .82rem; font-weight: 800; }
.gear-time .ico { width: 14px; height: 14px; }

/* Inventaire + équipement. */
.sheet--inventory, .sheet--equip { width: min(560px, 100%); }
.inv-hint { margin: 4px 0 12px; color: rgba(255, 255, 255, .65); font-size: .85rem; }
.inv-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.inv-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--edge); border-radius: 14px; background: linear-gradient(90deg, var(--rar-bg), rgba(255, 255, 255, .03) 60%); box-shadow: inset 4px 0 0 var(--rar); }
.inv-row.is-current { margin-bottom: 12px; }
.inv-main { display: grid; gap: 5px; min-width: 0; }
.inv-name { margin: 0; font-weight: 900; }
.inv-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: .76rem; font-weight: 800; color: rgba(255, 255, 255, .6); }
.inv-on { display: inline-flex; align-items: center; gap: 4px; color: #a9ff98; }
.inv-on .ico { width: 13px; height: 13px; }
.unit-card .inv-fuse, .inv-fuse, .inv-forge { width: auto; padding: 0 14px; white-space: nowrap; }
.inv-forge { margin: 6px auto 0; display: flex; }
.inv-equip { min-height: 40px; padding: 0 16px; }
@media (max-width: 520px) {
    .inv-row { grid-template-columns: auto minmax(0, 1fr); }
    .inv-row > form { grid-column: 1 / -1; }
    .inv-row > form button { width: 100%; justify-content: center; }
}

/* Emplacements d'équipement sur les cartes de troupes : cliquables. */
.unit-gear .gear-slot {
    display: grid;
    justify-items: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    padding: 8px 4px;
    border: 0;
    border-radius: inherit;
    background: none;
    color: rgba(255, 255, 255, .6);
    font: inherit;
    font-size: .74rem;
    font-weight: 800;
    cursor: pointer;
    text-align: center;
}
.unit-gear .gear-slot .ico { width: 20px; height: 20px; }
.unit-gear .gear-slot:hover { color: #fff; }
.unit-gear li:has(.gear-slot.is-on) { border-style: solid; border-color: var(--rar); background: var(--rar-bg); }
.unit-gear .gear-slot.is-on { color: #fff; }
.unit-gear .gear-slot.is-on .ico { color: var(--rar); filter: drop-shadow(0 1px 0 var(--edge)); }
.unit-gear .gear-slot span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; }

/* Bannière de forge : titre à la couleur de la rareté. */
.mission.is-gear .mission-title { color: var(--rar); }
.unit-gear li:has(.gear-slot) { padding: 0; }
/* Inventaire : nombre d'exemplaires en pastille sur l'icône de l'objet. */
.inv-ico { position: relative; display: inline-block; }
.inv-count {
    position: absolute;
    top: -9px;
    right: -11px;
    min-width: 28px;
    padding: 1px 6px;
    border: 2px solid var(--edge);
    border-radius: 99px;
    background: var(--sun-btn);
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    text-align: center;
    -webkit-text-stroke: 3px var(--edge);
    paint-order: stroke fill;
    box-shadow: 0 2px 0 var(--edge);
}
.gear-range { display: block; }
.gear-stats--range li { justify-content: center; }
/* Objet bloqué (niveau insuffisant) : tenu secret comme les unités / bâtiments bloqués —
   icône brouillée et grisée, cadre neutre, carte atténuée. */
.gear-card.is-secret .gear-badge { filter: blur(5px) grayscale(1) brightness(.6); border-color: #6d6580; box-shadow: 0 0 0 2px var(--edge); }
.gear-card.is-secret .gear-card-ico { position: relative; }
.gear-card.is-secret h3 { opacity: .7; }
/* Cartes de carrousel : un titre long passe sur 2 lignes au lieu d'élargir la carte. */
.build-card { min-width: 0; }
.build-card .build-body { min-width: 0; }
.build-card .build-body h3 { white-space: normal; overflow-wrap: anywhere; text-wrap: balance; text-align: center; }
/* Raretés (6) : gris < vert < bleu < violet < orange < rouge. Brillance animée dès l'orange. */
.r-0 { --rar: #c9c3d6; --rar-bg: rgba(201, 195, 214, .14); }
.r-1 { --rar: #7fdc4e; --rar-bg: rgba(127, 220, 78, .16); }
.r-2 { --rar: #4aa8ff; --rar-bg: rgba(74, 168, 255, .16); }
.r-3 { --rar: #c27bff; --rar-bg: rgba(194, 123, 255, .18); }
.r-4 { --rar: #ff9a2e; --rar-bg: rgba(255, 154, 46, .2); }
.r-5 { --rar: #ff3b4e; --rar-bg: rgba(255, 59, 78, .22); }
.gear-badge.r-3 { animation: none; }
.gear-badge.r-4 { animation: gear-shine-orange 2.4s ease-in-out infinite; }
.gear-badge.r-5 { animation: gear-shine-red 1.6s ease-in-out infinite; }
@keyframes gear-shine-orange { 50% { box-shadow: 0 0 0 1.5px var(--edge), 0 2px 0 var(--edge), 0 0 26px rgba(255, 154, 46, .8); } }
@keyframes gear-shine-red { 50% { box-shadow: 0 0 0 1.5px var(--edge), 0 2px 0 var(--edge), 0 0 32px rgba(255, 59, 78, .9); } }
@media (prefers-reduced-motion: reduce) { .gear-badge.r-4, .gear-badge.r-5 { animation: none; } }
/* Titres des cartes : interligne serré et hauteur fixe de 2 lignes (un nom court ou long
   ne décale jamais le contenu qui suit), centrés verticalement dans cet espace. */
.build-card .build-body h3 {
    line-height: 1.05;
    min-height: 2.1em;
    max-height: 2.1em;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
}
/* La croix de fermeture « collante » flotte à droite : le carrousel passe dessous (sinon la liste, qui défile, se rétrécissait pour l’éviter et ne touchait plus le bord droit). */
.carousel { clear: both; }
.gear-range .gear-stats li { justify-content: center; }
.gear-card .gear-time { margin-top: 14px; }
/* Inventaire / équipement vide : encart sombre centré. */
.inv-empty { display: grid; justify-items: center; gap: 10px; margin-top: 4px; padding: 18px 16px; border: 2px solid var(--edge); border-radius: 16px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .25); }
.inv-empty .fh-empty { margin: 0; }
.inv-empty .inv-forge { margin: 0; }
.inv-empty .inv-hint { margin: 0; text-align: center; }
/* Raccourcis de bâtiments (forge, casino…) : empilés au-dessus du bouton chat, même format. */
.shortcut-btn.s-1 { bottom: calc(var(--dock-b) + 2 * (var(--dock-h) + 10px)); }
.shortcut-btn.s-2 { bottom: calc(var(--dock-b) + 3 * (var(--dock-h) + 10px)); }
.shortcut-btn.s-3 { bottom: calc(var(--dock-b) + 4 * (var(--dock-h) + 10px)); }
@media (max-width: 640px) {
    .shortcut-btn.s-1 { bottom: calc(var(--dock-b) + 3 * (var(--dock-h) + 10px)); }
    .shortcut-btn.s-2 { bottom: calc(var(--dock-b) + 4 * (var(--dock-h) + 10px)); }
    .shortcut-btn.s-3 { bottom: calc(var(--dock-b) + 5 * (var(--dock-h) + 10px)); }
}
.shortcut-btn .ico { font-size: 26px; }
.shortcut-btn.is-broken { filter: grayscale(1) brightness(.7); }
.shortcut-ready { background: linear-gradient(180deg, #8ef05a, #2fa82a); min-width: 22px; height: 22px; padding: 0; animation: heal-pulse 1.8s ease-in-out infinite; }
.shortcut-ready .ico { width: 12px; height: 12px; color: #fff; }
@media (prefers-reduced-motion: reduce) { .shortcut-ready { animation: none; } }
.shortcut-btn .ico { font-size: 30px; } @media (max-width: 640px) { .shortcut-btn .ico { font-size: 26px; } }

/* ==========================================================================
   Chat : onglets Ville / Privés, liste des conversations, conversation privée.
   ========================================================================== */
.chat-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 12px 8px; padding: 4px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, .35); }
.chat-tab { position: relative; height: 32px; border: 0; border-radius: 9px; background: none; color: rgba(255, 255, 255, .6); font: inherit; font-size: .85rem; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.chat-tab.is-on { background: linear-gradient(180deg, #8ef05a 0%, #4fcf36 45%, #2fa82a 100%); color: #fff; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2px var(--edge); }
.chat-tab-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 5px; border: 2px solid var(--edge); border-radius: 99px; background: linear-gradient(180deg, #ff6a6a, #d61f3a); color: #fff; font-size: .7rem; font-weight: 900; -webkit-text-stroke: 0; vertical-align: 1px; }
.chat-tab-badge[hidden] { display: none; }

.pm-inbox { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0 10px 10px; list-style: none; display: grid; align-content: start; gap: 6px; }
.pm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(255, 255, 255, .05); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.pm-row:hover { background: rgba(255, 255, 255, .1); }
.pm-row.is-unread { border-color: #ffc531; background: rgba(255, 197, 49, .1); }
.pm-row.is-blocked { opacity: .5; }
.pm-row-txt { display: grid; gap: 2px; min-width: 0; }
.pm-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pm-row-top strong { overflow: hidden; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.pm-row-top time { flex: none; color: rgba(255, 255, 255, .5); font-size: .72rem; font-weight: 700; }
.pm-row-last { overflow: hidden; color: rgba(255, 255, 255, .7); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.pm-row.is-unread .pm-row-last { color: #fff; font-weight: 800; }

.pm-head { display: flex; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 6px 8px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, .3); }
.pm-head[hidden] { display: none; }
.pm-lang { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 7px 10px; border: 2px solid var(--edge); border-radius: 10px; background: rgba(255, 197, 49, .16); box-shadow: inset 0 0 0 1px rgba(255, 197, 49, .45); color: #ffe7a6; font-size: .8rem; font-weight: 700; line-height: 1.2; }
.pm-lang[hidden] { display: none; }
.pm-back { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 2px solid var(--edge); border-radius: 9px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.pm-back .ico { width: 16px; height: 16px; }
.pm-who { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.pm-who .chat-ava { flex: none; }
.pm-who-name { overflow: hidden; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.pm-act { flex: none; padding: 5px 9px; border: 2px solid var(--edge); border-radius: 9px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); font: inherit; font-size: .7rem; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.pm-act:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.pm-act.is-armed { background: rgba(255, 79, 106, .3); color: #fff; }
.chat-list.pm-list[hidden], .pm-inbox[hidden] { display: none; }
.chat-form[hidden] { display: none; }

/* Profil : envoyer un message. */
.prof-pm { margin-top: 14px; }
/* Panneau de chat en colonne (en-tête, onglets, zone qui défile, saisie) : les vues
   masquées (salon / conversations / conversation) ne réservent aucune place. */
.chat { display: flex; flex-direction: column; }
.chat > .chat-list, .chat > .pm-inbox { flex: 1 1 auto; min-height: 0; }
.chat > .chat-head, .chat > .chat-tabs, .chat > .pm-head, .chat > .chat-form, .chat > .chat-error { flex: none; }
.chat > .chat-empty { flex: 1 1 auto; }
.chat-chan[hidden] { display: none; } .pm-act { padding: 5px 7px; font-size: .66rem; }
/* Mobile : boutons ronds sur 2 colonnes de 3 — à droite téléphone, chat, 1er raccourci ;
   à gauche les raccourcis 2 et 3 (alignés sur le téléphone et le chat). */
@media (max-width: 640px) {
    .shortcut-btn.s-1 { bottom: calc(var(--dock-b) + 3 * (var(--dock-h) + 10px)); }
    .shortcut-btn.s-2, .shortcut-btn.s-3 { right: calc(var(--dock-x) + var(--dock-h) + 10px); }
    .shortcut-btn.s-2 { bottom: calc(var(--dock-b) + var(--dock-h) + 10px); }
    .shortcut-btn.s-3 { bottom: calc(var(--dock-b) + 2 * (var(--dock-h) + 10px)); }
}
/* Onglets du chat = sélecteur segmenté habituel (pastille verte mobile). */
.chat-tabs.seg { margin: 0 12px 8px; padding: 4px; }
.chat-tabs .rank-tab { height: 34px; font-size: .85rem; }
.chat-tabs .chat-tab.is-on { background: none; box-shadow: none; }
/* Raccourci forge : « prêt » qui pulse (comme les points de compétence) ; forge en cours =
   compte à rebours en surimpression en bas du bouton. */
.shortcut-ready { animation: skill-pulse 1.6s ease-in-out infinite; }
.shortcut-timer {
    position: absolute;
    left: 50%;
    bottom: -7px;
    translate: -50% 0;
    padding: 1px 7px;
    border: 2px solid var(--edge);
    border-radius: 99px;
    background: rgba(8, 4, 16, .88);
    color: #ffc078;
    font-size: .68rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}
/* Raccourci avec pastille « prêt » : au-dessus des boutons voisins (sa pulsation déborde sur eux). */
.shortcut-btn:has(.shortcut-ready) { z-index: 21; } /* juste au-dessus des autres boutons (20), sous les fenêtres (40) */

/* Coche de la pastille « forge terminée » : fin filet sombre autour (lisible sur le vert). */
.shortcut-ready .ico { filter: drop-shadow(.8px 0 0 var(--edge)) drop-shadow(-.8px 0 0 var(--edge)) drop-shadow(0 .8px 0 var(--edge)) drop-shadow(0 -.8px 0 var(--edge)); }
/* Pictos des applis du téléphone : même traitement que les boutons ronds du HUD —
   blanc plein, contour sombre net, ombre portée dure en dessous. */
.phone .phone-icon .ico {
    color: #fff;
    filter: drop-shadow(1.5px 0 0 var(--edge)) drop-shadow(-1.5px 0 0 var(--edge)) drop-shadow(0 1.5px 0 var(--edge)) drop-shadow(0 -1.5px 0 var(--edge)) drop-shadow(0 2.5px 0 var(--edge));
}
/* Forge, mobile : cartes plus compactes, encart de forge sur 2 lignes, onglets en pictos. */
@media (max-width: 640px) {
    .sheet--armory .gear-card { flex-basis: min(220px, calc(100% - 60px)); padding-bottom: 10px; }
    .sheet--armory .gear-card-ico { padding: 14px 0 4px; }
    .sheet--armory .gear-badge.is-big { width: 64px; height: 64px; border-radius: 16px; }
    .sheet--armory .gear-badge.is-big .ico { width: 34px; height: 34px; }
    .sheet--armory .gear-card .build-body h3 { font-size: .95rem; }
    .sheet--armory .gear-range { padding: 6px 8px; }
    .sheet--armory .gear-card .gear-time { margin-top: 8px; }
    .sheet--armory .gear-card .cost-ico { width: 22px; height: 22px; }
    .forge-status { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
    .forge-status-txt { flex: 1 1 0; }
    .forge-status > form { flex: 1 1 100%; }
    .forge-status > form .btn { width: 100%; justify-content: center; }
    .armory-fams .rank-tab span { display: none; }
    .armory-fams .rank-tab .ico { width: 20px; height: 20px; }
}
/* Forge en cours (bureau) : compte à rebours à côté du nom de l'objet, en plus gros. */
@media (min-width: 641px) {
    .forge-status-txt { grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 16px; }
    .forge-status-kicker { grid-column: 1 / -1; }
    .forge-status-time { font-size: 1.5rem; gap: 8px; }
    .forge-status-time .ico { width: 22px; height: 22px; }
}
/* ==========================================================================
   Mobiles peu hauts (iPhone 14 : 390 × 844 ; SE…) : tout le texte du jeu un cran
   plus petit (les tailles sont en rem) et CTA plus compacts, pour gagner de la place.
   ========================================================================== */
@media (max-width: 640px) and (max-height: 900px) {
    html:has(body.game) { font-size: 14.5px; }
    .game .btn { min-height: 42px; }
    .game .btn-block { min-height: 44px; }
    .forge-status > form .btn { min-height: 44px; }
    .sheet { padding-top: 22px; }
    .sheet-title { font-size: 1.6rem; }
}
@media (max-width: 640px) and (max-height: 720px) {
    html:has(body.game) { font-size: 13.5px; }
}
/* CTA dont le libellé passe sur 2 lignes : interligne resserré. */
.game .btn { line-height: 1.05; }
/* Pictos du téléphone : contour un peu plus fin. */
.phone .phone-icon .ico {
    filter: drop-shadow(1.1px 0 0 var(--edge)) drop-shadow(-1.1px 0 0 var(--edge)) drop-shadow(0 1.1px 0 var(--edge)) drop-shadow(0 -1.1px 0 var(--edge)) drop-shadow(0 2px 0 var(--edge));
}
/* Onglets de la forge : pictos plus gros. */
.armory-fams .rank-tab .ico { width: 22px; height: 22px; }
.armory-fams .rank-tab { gap: 8px; }
@media (max-width: 640px) { .armory-fams .rank-tab .ico { width: 24px; height: 24px; } }
/* Pictos des onglets (classement, forge, combats, chat…) : même contour que les pictos des
   CTA de bâtiment (contour sombre net + ombre dure), uniforme partout. Onglet inactif : le
   contour reste, le picto garde sa couleur atténuée. */
.rank-tab .ico, .rank-tab.is-on .ico, .seg .rank-tab .ico {
    filter: drop-shadow(1.5px 0 0 var(--edge)) drop-shadow(-1.5px 0 0 var(--edge)) drop-shadow(0 1.5px 0 var(--edge)) drop-shadow(0 -1.5px 0 var(--edge)) drop-shadow(0 2px 0 var(--edge));
}
/* Petits pictos d'onglets : contour plus fin (proportionné à leur taille). */
.rank-tab .ico, .rank-tab.is-on .ico, .seg .rank-tab .ico {
    filter: drop-shadow(.8px 0 0 var(--edge)) drop-shadow(-.8px 0 0 var(--edge)) drop-shadow(0 .8px 0 var(--edge)) drop-shadow(0 -.8px 0 var(--edge)) drop-shadow(0 1.2px 0 var(--edge));
}
/* Pictos dans les CTA : taille relative au texte (em) — toujours à l'échelle du libellé,
   quel que soit le bouton ou l'écran. */
.game .btn > .ico, .game .btn .btn-label > .ico, .crew-more > .ico { width: 1.35em; height: 1.35em; font-size: inherit; flex: none; vertical-align: -.28em; }
.game .crew-more > .ico.btn-ico, .game .crew-more > .ico { width: 1.35em; height: 1.35em; vertical-align: -.28em; }
/* Pictos des CTA : contour un peu plus fin (ils ont grandi avec le texte). */
.game .btn .ico:not(.btn-ico) {
    filter: drop-shadow(1.1px 0 0 var(--edge)) drop-shadow(-1.1px 0 0 var(--edge)) drop-shadow(0 1.1px 0 var(--edge)) drop-shadow(0 -1.1px 0 var(--edge)) drop-shadow(0 1.6px 0 var(--edge));
}
/* Coûts dans les boutons : un montant ne se coupe JAMAIS (« 2 630 » sur une ligne). */
.cost-item, .cost-item b { white-space: nowrap; }
.btn-cost { flex-wrap: nowrap; }
@media (max-width: 640px) {
    .sheet--armory .gear-card .btn-cost { gap: 8px; }
    .sheet--armory .gear-card .cost-item b { font-size: .95rem; }
    .sheet--armory .gear-card .cost-ico { width: 20px; height: 20px; }
}
/* Pictos des raccourcis dans les CTA de fiche de bâtiment : à l’échelle du texte (ils ont leur propre marge). */
.game .sheet-actions .btn > .ico.btn-ico { width: 1.6em; height: 1.6em; vertical-align: -.4em; }
/* Téléphone, mobile : contour des pictos d'applis plus fin et à 75 % d'opacité. */
@media (max-width: 640px) {
    .phone .phone-icon .ico {
        filter: drop-shadow(.7px 0 0 rgba(26, 13, 34, .75)) drop-shadow(-.7px 0 0 rgba(26, 13, 34, .75)) drop-shadow(0 .7px 0 rgba(26, 13, 34, .75)) drop-shadow(0 -.7px 0 rgba(26, 13, 34, .75)) drop-shadow(0 1.4px 0 rgba(26, 13, 34, .75));
    }
}
/* Téléphone (bureau ET mobile) : pictos d'applis à contour fin, 75 % d'opacité. */
.phone .phone-icon .ico {
    filter: drop-shadow(.7px 0 0 rgba(26, 13, 34, .75)) drop-shadow(-.7px 0 0 rgba(26, 13, 34, .75)) drop-shadow(0 .7px 0 rgba(26, 13, 34, .75)) drop-shadow(0 -.7px 0 rgba(26, 13, 34, .75)) drop-shadow(0 1.4px 0 rgba(26, 13, 34, .75));
}
/* Chrome : la police place ses capitales plus haut que Firefox dans la ligne → libellés
   d'onglets rognés à la hauteur des capitales (centrage optique avec le picto). Firefox
   ignore text-box et reste correct. */
.rank-tab > span, .chat-tab { text-box: trim-both cap alphabetic; }
/* Emplacements d'équipement : objet porté = son picto, en grand ; libellés sur une ligne. */
.unit-gear .gear-slot.is-on .ico { width: 30px; height: 30px; }
.unit-gear .gear-slot span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: unset; font-size: .66rem; }
.unit-gear .gear-slot { min-width: 0; }
.unit-gear li { min-width: 0; }
/* Emplacements d'équipement : même taille de picto vide ou équipé ; vide = placeholder atténué. */
.unit-gear .gear-slot .ico, .unit-gear .gear-slot.is-on .ico { width: 28px; height: 28px; }
.unit-gear .gear-slot:not(.is-on) .ico { opacity: .45; }
.unit-gear .gear-slot span { font-size: .6rem; font-weight: 700; }
.unit-gear .gear-slot:not(.is-on) .ico { opacity: .25; }
.unit-gear .gear-slot:not(.is-on) span { opacity: .45; }
/* Emplacement vide survolé : pointillés éclaircis, picto et libellé plus visibles. */
.unit-gear li:has(.gear-slot:not(.is-on)) { transition: border-color .15s, background .15s; }
.unit-gear li:has(.gear-slot:not(.is-on):hover) { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .04); }
.unit-gear .gear-slot:not(.is-on):hover .ico { opacity: .55; }
.unit-gear .gear-slot:not(.is-on):hover span { opacity: .8; }
.sheet--equip .hire-pop-label { margin-bottom: 8px; }
/* Emplacements d'équipement : grand picto, libellé juste dessous (sans chevauchement). */
.unit-gear .gear-slot { position: relative; gap: 0; padding: 6px 4px 7px; }
.unit-gear .gear-slot .ico, .unit-gear .gear-slot.is-on .ico { width: 40px; height: 40px; }
.unit-gear .gear-slot span { position: relative; z-index: 1; margin-top: 2px; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
/* Libellés des emplacements : contour plus léger, couleur de la rareté quand un objet est porté. */
.unit-gear .gear-slot span { -webkit-text-stroke-color: color-mix(in srgb, var(--edge) 55%, transparent); }
.unit-gear .gear-slot.is-on span { color: var(--rar); }
/* Stats d'objet : un malus (ex. vitesse d'une arme lourde) en rouge. */
.gear-stats li.is-malus, .gear-stats li.is-malus .ico { color: #ff6b6b; }
/* Emplacement occupé = un objet « posé » : tuile en relief (dégradé de la rareté, reflet en haut,
   tranche sombre + ombre portée dessous), picto qui projette son ombre sur la tuile. */
.unit-gear li:has(.gear-slot.is-on) {
    position: relative;
    border-width: 2px;
    background:
        radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rar) 34%, transparent), transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--rar) 22%, #2a1f38), color-mix(in srgb, var(--rar) 8%, #15101d));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -2px 0 rgba(0, 0, 0, .25),
        0 3px 0 color-mix(in srgb, var(--rar) 35%, #0b0812),
        0 7px 12px -3px rgba(0, 0, 0, .65);
    transform: translateY(-2px);
    transition: transform .15s, box-shadow .15s;
}
.unit-gear li:has(.gear-slot.is-on:hover) {
    transform: translateY(-4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .34),
        inset 0 -2px 0 rgba(0, 0, 0, .25),
        0 5px 0 color-mix(in srgb, var(--rar) 35%, #0b0812),
        0 11px 16px -4px rgba(0, 0, 0, .7);
}
.unit-gear li:has(.gear-slot.is-on:active) { transform: translateY(0); }
.unit-gear .gear-slot.is-on .ico { filter: drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 4px 3px rgba(0, 0, 0, .55)); }
@media (prefers-reduced-motion: reduce) { .unit-gear li:has(.gear-slot.is-on) { transition: none; } }
/* Shop de la forge : nom de l'objet plus petit (les noms d'armes sont longs). */
.gear-card .build-body h3 { font-size: .95rem; line-height: 1.05; }
@media (max-width: 640px) { .sheet--armory .gear-card .build-body h3 { font-size: .85rem; } }
/* Objet posé dans un emplacement : reflet « bulle » comme les applis du téléphone. */
.unit-gear li:has(.gear-slot.is-on) { overflow: hidden; }
.unit-gear li:has(.gear-slot.is-on)::after {
    content: "";
    position: absolute;
    inset: 2px 2px auto 2px;
    height: 44%;
    border-radius: 7px 7px 50% 50% / 7px 7px 45% 45%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .1));
    pointer-events: none;
}
/* Pastilles d'objet (inventaire, équipement) : bordure de rareté et anneau sombre plus fins ;
   seule la grande pastille du shop garde le trait épais. */
.gear-badge { border-width: 2px; box-shadow: 0 0 0 1.5px var(--edge), 0 2px 0 var(--edge), 0 0 14px var(--rar-bg, transparent); }
.gear-badge.is-big { border-width: 3px; }
/* Objet posé : reflet « bulle » plus discret. */
.unit-gear li:has(.gear-slot.is-on)::after { height: 38%; background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)); }
/* Inventaire : onglets de familles, stats des objets sur 2 colonnes (lignes moins hautes). */
.inv-fams { margin: 0 0 12px; }
.inv-none { margin: 18px 0; text-align: center; }
.inv-row .gear-stats { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 16px; row-gap: 2px; }
@media (max-width: 380px) { .inv-row .gear-stats { grid-template-columns: minmax(0, 1fr); } }
/* Onglets de l'inventaire : 4 colonnes, pictos comme la forge ; en mobile, pictos seuls (sauf « Tous »). */
.inv-fams { grid-template-columns: repeat(4, 1fr); }
.inv-fams .rank-tab { gap: 8px; }
.inv-fams .rank-tab .ico { width: 22px; height: 22px; }
@media (max-width: 640px) {
    .inv-fams .rank-tab:has(.ico) span { display: none; }
    .inv-fams .rank-tab .ico { width: 24px; height: 24px; }
}
/* Onglets de l'inventaire : texte plus petit (4 onglets dans une fenêtre étroite). */
.inv-fams .rank-tab { font-size: .78rem; }
.inv-fams .rank-tab .ico { width: 18px; height: 18px; }
/* Fiche d'un bâtiment abîmé : chiffres de vie plus discrets. */
.bld-hp > b { font-size: .95rem; }

/* =========================================================================
   ARBRE DE TALENTS — 3 branches côte à côte (une à la fois en mobile, onglets),
   nœuds placés en grille (lane c-0..2 × row r-0..9), liens tracés en SVG (JS).
   Formes : bonus classique = rond, talent rare = losange, capacité spéciale = grand rond
   à double anneau doré. États : verrouillé (grisé), achetable (anneau qui pulse),
   investi (rempli), maximum (anneau or).
   ========================================================================= */
.sheet--skills { width: min(1080px, 100%); }
.tree-tabs { display: none; margin: 12px 0 0; }
.tree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.tree-branch { --br: #ff6b5a; --br-bg: rgba(255, 107, 90, .14); padding: 12px 8px 16px; border: 2px solid var(--edge); border-radius: 18px; background: linear-gradient(180deg, var(--br-bg), rgba(255, 255, 255, .02) 40%); }
.tree-branch--defense { --br: #4aa8ff; --br-bg: rgba(74, 168, 255, .14); }
.tree-branch--economy { --br: #4ade80; --br-bg: rgba(74, 222, 128, .12); }
.tree-branch-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 6px; color: var(--br); font-size: 1rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.tree-branch-title .ico { width: 18px; height: 18px; -webkit-text-stroke: 0; filter: drop-shadow(0 1px 0 var(--edge)); }
.tree-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(10, 96px); justify-items: center; align-items: start; }
.tree-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tree-link { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 3; stroke-linecap: round; }
.tree-link.is-lit { stroke: color-mix(in srgb, var(--br) 55%, transparent); stroke-dasharray: 6 6; }
.tree-link.is-full { stroke: var(--br); stroke-dasharray: none; filter: drop-shadow(0 0 4px var(--br)); }
.tree-node.c-0 { grid-column: 1; } .tree-node.c-1 { grid-column: 2; } .tree-node.c-2 { grid-column: 3; }
.tree-node.r-0 { grid-row: 1; } .tree-node.r-1 { grid-row: 2; } .tree-node.r-2 { grid-row: 3; } .tree-node.r-3 { grid-row: 4; } .tree-node.r-4 { grid-row: 5; }
.tree-node.r-5 { grid-row: 6; } .tree-node.r-6 { grid-row: 7; } .tree-node.r-7 { grid-row: 8; } .tree-node.r-8 { grid-row: 9; } .tree-node.r-9 { grid-row: 10; }
.tree-node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; width: 100%; padding: 4px 2px 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.tree-ico { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border: 3px solid rgba(255, 255, 255, .22); border-radius: 50%; background: #241a33; box-shadow: 0 0 0 2px var(--edge), 0 3px 0 var(--edge); transition: transform .15s, border-color .15s, box-shadow .15s; }
.tree-ico .ico { width: 24px; height: 24px; color: rgba(255, 255, 255, .55); filter: drop-shadow(0 1px 0 var(--edge)); }
.tree-node.t-rare .tree-ico { width: 46px; height: 46px; margin: 2px 0; border-radius: 12px; rotate: 45deg; }
.tree-node.t-rare .tree-ico .ico { rotate: -45deg; }
.tree-node.t-ability .tree-ico { width: 60px; height: 60px; margin-top: -5px; border-color: #ffd23f; box-shadow: 0 0 0 2px var(--edge), 0 0 0 6px rgba(255, 210, 63, .25), 0 3px 0 6px var(--edge); }
.tree-node.t-ability .tree-ico .ico { width: 28px; height: 28px; }
.tree-pts { position: absolute; top: 42px; left: 50%; translate: -50% 0; padding: 0 6px; border: 2px solid var(--edge); border-radius: 999px; background: #1a1325; color: rgba(255, 255, 255, .8); font-size: .62rem; font-weight: 800; line-height: 1.35; white-space: nowrap; }
.tree-node.t-ability .tree-pts { top: 48px; }
.tree-name { margin-top: 10px; max-width: 96px; color: rgba(255, 255, 255, .78); font-size: .66rem; font-weight: 800; line-height: 1.05; text-align: center; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
/* États */
.tree-node.is-locked .tree-ico { opacity: .45; filter: grayscale(1); }
.tree-node.is-locked .tree-name { opacity: .5; }
.tree-node.can-buy .tree-ico { border-color: var(--br); animation: tree-pulse 1.6s ease-in-out infinite; }
.tree-node.is-on .tree-ico { border-color: var(--br); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--br) 70%, #fff 0%), color-mix(in srgb, var(--br) 35%, #120c1c) 75%); }
.tree-node.is-on .tree-ico .ico { color: #fff; }
.tree-node.is-on .tree-pts { border-color: var(--br); color: #fff; }
.tree-node.is-max .tree-ico { border-color: #ffd23f; }
.tree-node.is-max .tree-pts { background: #ffd23f; color: #1a1325; }
.tree-node.is-sel .tree-ico { transform: scale(1.12); box-shadow: 0 0 0 2px var(--edge), 0 0 0 5px #fff, 0 3px 0 5px var(--edge); }
.tree-node:hover .tree-ico { transform: scale(1.08); }
@keyframes tree-pulse { 50% { box-shadow: 0 0 0 2px var(--edge), 0 0 14px 2px var(--br); } }
@media (prefers-reduced-motion: reduce) { .tree-node.can-buy .tree-ico { animation: none; } }
/* Fiche du talent sélectionné : collée en bas de la fenêtre. */
.tree-details { position: sticky; bottom: -1px; z-index: 3; margin: 14px -4px 0; padding: 10px 0 4px; }
.tree-detail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 2px solid var(--edge); border-radius: 16px; background: #241a33; box-shadow: 0 -8px 20px rgba(0, 0, 0, .45); }
.tree-detail[hidden] { display: none; }
.tree-detail--empty { display: flex; justify-content: center; gap: 8px; color: rgba(255, 255, 255, .6); font-size: .85rem; font-weight: 700; }
.tree-detail--empty .ico { width: 18px; height: 18px; }
.tree-detail-ico { display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid #ffd23f; border-radius: 50%; background: #1a1325; }
.tree-detail.t-rare .tree-detail-ico { border-radius: 12px; }
.tree-detail-ico .ico { width: 24px; height: 24px; color: #fff; }
.tree-detail-main { display: grid; gap: 3px; min-width: 0; }
.tree-detail-main h4 { margin: 0; font-size: 1.05rem; font-weight: 900; text-transform: uppercase; }
.tree-detail-type { margin: 0; color: #ffd23f; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.tree-detail-desc { margin: 0; color: rgba(255, 255, 255, .85); font-size: .85rem; line-height: 1.3; }
.tree-detail-note, .tree-req { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: rgba(255, 255, 255, .6); font-size: .75rem; font-weight: 700; }
.tree-req { color: #ff8a8a; }
.tree-detail-note .ico, .tree-req .ico { width: 14px; height: 14px; flex: none; }
.tree-fx { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.tree-fx small { color: rgba(255, 255, 255, .55); font-weight: 700; }
.tree-fx-now { display: block; color: #6ee7a0; font-size: .75rem; font-weight: 800; }
.tree-done { display: flex; align-items: center; gap: 6px; margin: 0; color: #ffd23f; font-weight: 900; text-transform: uppercase; font-size: .8rem; }
.tree-done .ico { width: 16px; height: 16px; }
.tree-buy { white-space: nowrap; }
/* Mobile / tablette : une branche à la fois. */
@media (max-width: 900px) {
    .tree-tabs { display: grid; }
    .tree { grid-template-columns: minmax(0, 1fr); }
    .tree-branch { display: none; }
    .tab-offense .tree-branch--offense, .tab-defense .tree-branch--defense, .tab-economy .tree-branch--economy { display: block; }
    .tree-branch-title { display: none; }
}
@media (max-width: 640px) {
    .tree-tabs .rank-tab span { font-size: .75rem; }
    .tree-grid { grid-template-rows: repeat(10, 90px); }
    .tree-detail { grid-template-columns: auto minmax(0, 1fr); }
    .tree-detail > form, .tree-detail > .tree-done { grid-column: 1 / -1; }
    .tree-detail > form .btn { width: 100%; justify-content: center; }
}

/* Fiche d'un talent : plusieurs points d'un coup (− / quantité / +) + total après investissement. */
.tree-buy-form { display: flex; align-items: center; gap: 10px; }
.tree-qty { flex: none; }
.tree-fx-after { display: block; color: rgba(255, 255, 255, .6); font-size: .75rem; font-weight: 700; }
.tree-fx-after b { color: #ffd23f; }
@media (max-width: 640px) {
    .tree-buy-form { flex-wrap: wrap; }
    .tree-buy-form .tree-buy { flex: 1 1 auto; }
}
/* Talent sélectionné : anneau blanc en contour (indépendant du pulse « achetable », qui anime box-shadow). */
.tree-node.is-sel .tree-ico { box-shadow: 0 0 0 2px var(--edge), 0 3px 0 var(--edge); outline: 3px solid #fff; outline-offset: 3px; }
.tree-node.t-ability.is-sel .tree-ico { box-shadow: 0 0 0 2px var(--edge), 0 0 0 6px rgba(255, 210, 63, .25), 0 3px 0 6px var(--edge); outline-offset: 9px; }
/* Fiche d'un talent : légende « Investir » centrée au-dessus du sélecteur et du bouton OK. */
.tree-buy-form { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 4px 10px; }
.tree-buy-label { grid-column: 1 / -1; margin: 0; color: rgba(255, 255, 255, .7); font-size: .72rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.tree-buy-form:not(:has(.tree-qty)) .tree-buy { grid-column: 1 / -1; }
.tree-buy { min-width: 64px; justify-content: center; }
@media (max-width: 640px) { .tree-buy-form { grid-template-columns: auto 1fr; } }
/* Fiche d'un talent : « Investir » chapeaute le sélecteur et OK (même hauteur que les champs). */
.tree-buy-form { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tree-buy-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tree-buy-form .tree-buy { height: 36px; min-height: 0; min-width: 56px; padding: 0 14px; font-size: .9rem; }
@media (max-width: 640px) { .tree-buy-form { align-items: stretch; } .tree-buy-row .tree-buy { flex: 1 1 auto; } }
/* Bouton OK de la fiche : même arrondi que le sélecteur (10 px), lui aussi en 36 px. */
.tree-buy-form .tree-buy { border-radius: 10px; }
.tree-buy-form .tree-buy::before { left: 5px; right: 5px; top: 3px; border-radius: 7px 7px 40% 40%; }

/* =========================================================================
   COMBAT — capacités spéciales du Héros : bannière inclinée à la couleur du camp
   (attaquant rouge à gauche, défenseur bleu à droite), soins en vert, états des
   cartes pendant la durée de la capacité (gel, rage, frénésie, forteresse…).
   ========================================================================= */
.fight-ability { position: absolute; top: 34%; z-index: 30; display: flex; align-items: center; padding: 12px 34px; border: 3px solid var(--edge); border-radius: 12px; box-shadow: 0 8px 0 var(--edge), 0 16px 40px rgba(0, 0, 0, .55); pointer-events: none; }
.fight-ability.side-0 { left: 6%; background: linear-gradient(115deg, #ff4f7e, #ff7352 60%, #ff9a2e); }
.fight-ability.side-1 { right: 6%; background: linear-gradient(115deg, #2f7bff, #4aa8ff 60%, #7cd3ff); }
.fight-ability-name { color: #fff; font-size: clamp(1.4rem, calc(3.4 * var(--u-vw)), 2.4rem); line-height: 1; white-space: nowrap; }
.fight-pop.is-heal { color: #6ee7a0; }
/* États (posés sur les cartes du camp concerné). */
.fight-pile.is-frozen { filter: saturate(.4) hue-rotate(160deg) brightness(1.1); }
.fight-pile.is-frozen::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(160, 220, 255, .35), rgba(255, 255, 255, .08)); box-shadow: inset 0 0 0 2px rgba(180, 230, 255, .8); pointer-events: none; }
.fight-pile.is-rage { box-shadow: 0 0 0 2px #ff3b4e, 0 0 18px rgba(255, 59, 78, .7); }
.fight-pile.is-fast { box-shadow: 0 0 0 2px #ffd23f, 0 0 16px rgba(255, 210, 63, .6); }
.fight-pile.is-last { box-shadow: 0 0 0 2px #ff7a1a, 0 0 22px rgba(255, 122, 26, .8); }
.fight-pile.is-fort, .fight-pile.is-shield { box-shadow: 0 0 0 2px #8fd0ff, 0 0 16px rgba(143, 208, 255, .6); }
@media (max-width: 640px) {
    .fight-ability { top: 44%; padding: 8px 18px; }
    .fight-ability.side-0 { left: 3%; }
    .fight-ability.side-1 { right: 3%; }
}
/* Fiche d'un talent (bureau) : type + nom à gauche, effets / description à droite (moins haute). */
@media (min-width: 641px) {
    .tree-detail-main { grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); column-gap: 26px; align-items: center; }
    .tree-detail-main > * { grid-column: 1; }
    .tree-detail-main > .tree-fx, .tree-detail-main > .tree-detail-desc, .tree-detail-main > .tree-detail-note { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
    .tree-detail-main > .tree-detail-note { grid-row: 3; }
    .tree-detail-main > .tree-detail-desc { grid-row: 1 / span 2; }
    /* Une ligne par effet : « +1 % dégâts par point · Actuel : +2 % · Après : +88 % ». */
    .tree-fx li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
    .tree-fx-now, .tree-fx-after { display: inline; }
}
/* « Investir » centré sur le bloc − / + ; OK aligné en bas (même ligne que le sélecteur). */
.tree-buy-row { align-items: flex-end; }
.tree-buy-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tree-buy-col:not(:has(.tree-qty)) { display: contents; }
.tree-buy-form:not(:has(.tree-qty)) .tree-buy-row { flex-direction: column; align-items: center; gap: 4px; }
/* « Investir » : plus petit et posé AU-DESSUS du bloc − / + sans le décaler : sélecteur et OK restent
   centrés verticalement dans la fiche. */
.tree-buy-form .tree-buy-row { position: relative; flex-direction: row; align-items: center; }
.tree-buy-col { position: relative; display: block; }
.tree-buy-col:not(:has(.tree-qty)) { display: contents; }
.tree-buy-label { position: absolute; bottom: 100%; left: 50%; translate: -50% -3px; font-size: .6rem; white-space: nowrap; }
.tree-buy-form:not(:has(.tree-qty)) .tree-buy-label { left: 50%; }
/* Effet d'un talent sur 2 lignes : « +1 % dégâts · par point », puis « Actuel · Après ». */
.tree-fx li { display: block; }
.tree-fx-vals { display: flex; flex-wrap: wrap; gap: 0 12px; }
.tree-fx-vals:empty { display: none; }
/* « Investir » : moins gras, un peu plus près du sélecteur (moins collé au bord de la fiche). */
.tree-buy-label { font-weight: 600; translate: -50% 0; }
.tree-detail { padding-top: 14px; }
/* Fiche d'un talent : « Investir » encore plus discret, champ de quantité plus étroit. */
.tree-buy-label { font-size: .54rem; }
.tree-qty input { width: 52px; }
/* Effet simplifié : une ligne « actuel → après » (ou « par point » avant tout investissement). */
.tree-fx-after { display: inline; color: rgba(255, 255, 255, .6); font-size: inherit; }
.tree-fx-after[hidden] { display: none; }
/* Effet d'un bonus classique sur 2 lignes : la valeur, puis « par point investi » dessous. */
.tree-fx li small { display: block; margin-top: 1px; }
/* Fiche d'un talent : en-tête | effet, alignés au centre ; marges régulières. Remplace la grille précédente. */
.tree-detail-main { display: flex; flex-direction: column; gap: 6px; }
.tree-detail-main > * { grid-column: auto; grid-row: auto; }
.tree-detail-head, .tree-detail-body { display: grid; gap: 3px; min-width: 0; }
.tree-detail-body .tree-detail-note { margin-top: 4px; }
@media (min-width: 641px) {
    .tree-detail-main { flex-direction: row; align-items: center; gap: 28px; }
    .tree-detail-head { flex: 0 0 190px; }
    .tree-detail-body { flex: 1 1 auto; }
}
/* Fiche d'un talent en mobile : sélecteur + OK centrés (OK à sa taille), place pour « Investir » au-dessus. */
.tree-fx li small { margin-left: 0; padding: 0; }
@media (max-width: 640px) {
    .tree-detail { gap: 10px 12px; }
    .tree-detail > form.tree-buy-form { margin-top: 12px; align-items: center; }
    .tree-buy-row { justify-content: center; gap: 10px; }
    .tree-detail > form .tree-buy-row .btn.tree-buy { flex: 0 0 auto; width: auto; min-width: 96px; }
}
/* Mobile : achat = pied de fiche (filet au-dessus), sélecteur aligné à gauche, OK à droite. */
@media (max-width: 640px) {
    .tree-detail { align-items: start; }
    .tree-detail-ico { margin-top: 2px; }
    .tree-detail > form.tree-buy-form { margin-top: 2px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); align-items: stretch; }
    .tree-buy-row { justify-content: space-between; }
    .tree-detail > form .tree-buy-row .btn.tree-buy { flex: 0 1 140px; }
    .tree-buy-form:not(:has(.tree-qty)) .tree-buy-row { justify-content: flex-end; }
    .tree-buy-form:not(:has(.tree-qty)) .tree-buy-label { left: auto; right: 0; translate: 0 0; width: 140px; text-align: center; }
}
/* Capacité / talent rare (sans sélecteur) : OK seul, à droite, à sa hauteur normale. */
.tree-buy-form:not(:has(.tree-qty)) .tree-buy-row { flex-direction: row; align-items: center; }
@media (max-width: 640px) { .tree-buy-form:not(:has(.tree-qty)) .tree-buy-row { justify-content: flex-end; } }
/* Mobile : effet / description du talent sur toute la largeur (aligné à gauche, sous l'icône), filet au-dessus. */
@media (max-width: 640px) {
    .tree-detail { align-items: center; }
    .tree-detail-main { display: contents; }
    .tree-detail-head { grid-column: 2; }
    .tree-detail-body { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
    .tree-detail > form.tree-buy-form { grid-column: 1 / -1; }
}
/* Bureau : colonne du nom à la largeur de son contenu, colonne de l'effet en flex 1, écart fixe. */
@media (min-width: 641px) {
    .tree-detail-main { gap: 32px; }
    .tree-detail-head { flex: 0 0 auto; max-width: 260px; }
    .tree-detail-body { flex: 1 1 0; }
}
/* Mobile, bouton « Investir » seul (sans sélecteur) : pleine largeur et plus haut. */
@media (max-width: 640px) {
    .tree-buy-form:not(:has(.tree-qty)) .tree-buy-row { justify-content: stretch; }
    .tree-detail > form.tree-buy-form:not(:has(.tree-qty)) .tree-buy-row .btn.tree-buy { flex: 1 1 auto; width: 100%; height: 44px; font-size: 1rem; }
}
/* Bureau : bouton « Investir » seul plus gros. */
@media (min-width: 641px) {
    .tree-buy-form:not(:has(.tree-qty)) .tree-buy-row .btn.tree-buy { height: 44px; padding: 0 26px; font-size: 1rem; }
}
/* Pied de l'arbre sans talent sélectionné : points à répartir | indication | réinitialiser. */
.tree-detail--empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; color: inherit; font-size: inherit; }
.tree-detail--empty[hidden] { display: none; }
.tree-detail--empty .sheet-slots { margin: 0; }
.tree-pick { display: flex; align-items: center; gap: 8px; margin: 0; color: rgba(255, 255, 255, .6); font-size: .85rem; font-weight: 700; }
.tree-pick .ico { width: 18px; height: 18px; }
.tree-detail--empty .skill-reset { margin: 0; }
@media (max-width: 640px) { .tree-detail--empty { justify-content: center; } .tree-pick { order: 3; flex-basis: 100%; justify-content: center; } }
@media (max-width: 640px) { .tree-pick { order: 0; } }
/* Pied sans sélection : bandeau plus bas (padding et bouton réduits). */
.tree-detail.tree-detail--empty { padding: 7px 10px 7px 14px; }
.tree-detail--empty .skill-reset .crew-more { min-height: 0; padding-top: 6px; padding-bottom: 6px; }
/* « Investir » à cheval sur le haut du champ (façon légende de fieldset) : centré sur son bord supérieur. */
.tree-buy-col .tree-buy-label { top: 0; bottom: auto; translate: -50% -50%; z-index: 2; padding: 0 4px; border-radius: 4px; background: #241a33; line-height: 1.2; }
.tree-buy-label { pointer-events: none; }
/* Messages flash en mobile : texte plus petit, bulle plus large (moins de lignes). */
@media (max-width: 640px) {
    .toasts { max-width: calc(calc(100 * var(--u-vw)) - 12px); }
    .toast, .toast--error { padding: 8px 14px 7px; font-size: .84rem; line-height: 1.25; border-radius: 18px; }
}

/* =========================================================================
   BANQUE — règles en tête, puis une carte par ressource : picto, nom + intérêts,
   jauge du coffre (or quand plein), solde / plafond + stock, montant, Déposer / Retirer.
   ========================================================================= */
.sheet--bank { width: min(620px, 100%); }
.bank-rules { display: grid; gap: 4px; margin: 10px 0 14px; padding: 0; list-style: none; color: rgba(255, 255, 255, .72); font-size: .82rem; font-weight: 700; }
.bank-rules li { display: flex; align-items: center; gap: 8px; }
.bank-rules .ico { width: 16px; height: 16px; flex: none; color: #ffd23f; }
.bank-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bank-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(255, 255, 255, .04); }
.bank-res { width: 40px; height: 40px; }
.bank-main { display: grid; gap: 4px; min-width: 0; }
.bank-name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; font-weight: 900; text-transform: uppercase; font-size: .95rem; }
.bank-gain { color: #6ee7a0; font-size: .75rem; font-weight: 800; text-transform: none; }
.bank-row.is-full .bank-gain { color: #ffd23f; }
.bank-bar { height: 10px; }
.bank-row.is-full .bank-bar i { background: linear-gradient(180deg, #ffe27a, #f0a000); }
.bank-amounts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0; color: rgba(255, 255, 255, .6); font-size: .8rem; font-weight: 700; }
.bank-amounts b { color: #fff; }
.bank-stock { margin-left: auto; }
.bank-form { display: grid; grid-template-columns: auto auto; align-items: center; gap: 8px; }
.bank-amount input { width: 96px; height: 36px; padding: 0 8px; border: 2px solid var(--edge); border-radius: 10px; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-weight: 800; text-align: center; -moz-appearance: textfield; }
.bank-amount input::-webkit-inner-spin-button, .bank-amount input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.bank-amount input:focus { outline: none; border-color: #ffc531; }
.bank-btns { display: grid; grid-template-columns: auto auto; gap: 4px 6px; align-items: center; }
.bank-btn { height: 30px; min-height: 0; padding: 0 12px; border-radius: 9px; font-size: .78rem; }
.bank-max { height: 26px; padding: 0 8px; border: 2px solid var(--edge); border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: .7rem; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.bank-max:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.bank-max:disabled { opacity: .4; cursor: default; }
@media (max-width: 640px) {
    .bank-row { grid-template-columns: auto minmax(0, 1fr); }
    .bank-form { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; }
    .bank-amount input { width: 100%; }
}
/* Inventaire : textes plus petits (le picto garde sa taille). */
.sheet--inventory .inv-name { font-size: .95rem; }
.sheet--inventory .inv-name .gear-rarity, .sheet--inventory .inv-name [class*="rar-tag"] { font-size: .6rem; }
.sheet--inventory .gear-stats { font-size: .72rem; }
.sheet--inventory .gear-stats .ico { width: 12px; height: 12px; }
.sheet--inventory .inv-on { font-size: .7rem; }
/* Banque : boutons compacts (le style général .game .btn est plus fort). */
.game .btn.bank-btn { height: 30px; min-height: 0; padding: 0 12px; border-radius: 9px; font-size: .74rem; }
.game .btn.bank-btn::before { left: 5px; right: 5px; top: 3px; border-radius: 7px 7px 40% 40%; }
.bank-amount input { height: 30px; }
/* Encart de réparation : plein écran par-dessus la fiche (et non dans la carte, qui le rognait). */
.repair-pop { position: fixed; inset: 0; z-index: 60; }
.repair-pop .hire-pop-backdrop { border-radius: 0; }
.bank-why { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: #ff8a8a; font-size: .72rem; font-weight: 700; }
.bank-why.is-full { color: #ffd23f; }
.bank-why .ico { width: 12px; height: 12px; flex: none; }
/* Banque : titre + bouton Améliorer (coût, durée et plafonds du niveau suivant) / travaux en cours. */
.bank-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.bank-up { display: grid; justify-items: end; gap: 4px; margin: 0; }
.game .btn.bank-up-btn { min-height: 0; height: 40px; padding: 0 14px; font-size: .82rem; }
.bank-up-next, .bank-up-info { display: flex; align-items: center; gap: 6px; margin: 0; color: rgba(255, 255, 255, .65); font-size: .72rem; font-weight: 700; }
.bank-up-next .ico, .bank-up-info .ico { width: 14px; height: 14px; flex: none; }
.bank-up-info b { color: #ffd23f; }
.bank-up.is-max { display: flex; align-items: center; gap: 6px; color: #ffd23f; font-weight: 900; text-transform: uppercase; font-size: .8rem; }
.bank-up.is-max .ico { width: 18px; height: 18px; }
@media (max-width: 640px) { .bank-up { justify-items: stretch; width: 100%; } .bank-up-next, .bank-up-info { justify-content: center; } }
/* Banque : motif de retrait bloqué sur toute la largeur de la ligne. */
.bank-row > .bank-why { grid-column: 1 / -1; margin: 0; }
/* Petit bouton « Améliorer » (ouvre la fenêtre de détail). */
.bank-up-open { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border: 2px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #3ddc84, #1f9d55); color: #fff; font: inherit; font-size: .78rem; font-weight: 900; text-transform: uppercase; box-shadow: 0 3px 0 var(--edge); cursor: pointer; }
.bank-up-open .ico, .bank-up-open svg { width: 18px; height: 18px; }
.bank-up-open:hover { filter: brightness(1.08); }
.bank-pop-card { gap: 10px; }
.bank-pop-lv { display: flex; align-items: center; gap: 6px; margin: 0; color: rgba(255, 255, 255, .7); font-weight: 800; text-transform: uppercase; font-size: .8rem; }
.bank-pop-lv b { color: #ffd23f; }
.bank-pop-lv .ico, .bank-pop-caps .ico { width: 14px; height: 14px; color: rgba(255, 255, 255, .5); }
.bank-pop-caps { display: grid; gap: 6px; width: 100%; margin: 0; padding: 0; list-style: none; }
.bank-pop-caps li { display: grid; grid-template-columns: 28px 1fr auto 1fr; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-weight: 800; font-size: .85rem; }
.bank-pop-caps li span { color: rgba(255, 255, 255, .6); text-align: right; }
.bank-pop-caps li b { color: #6ee7a0; }
.bank-pop-res { width: 26px; height: 26px; }
.bank-pop-time { display: flex; align-items: center; gap: 6px; margin: 0; color: rgba(255, 255, 255, .7); font-weight: 800; font-size: .85rem; }
.bank-pop-time .ico { width: 16px; height: 16px; }
.bank-pop { position: fixed; inset: 0; z-index: 60; }
.bank-pop .hire-pop-backdrop { border-radius: 0; }
/* Fenêtre d'amélioration : une seule colonne (la fenêtre de recrutement passe en 2 colonnes sur bureau). */
.hire-pop .hire-pop-card.bank-pop-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; width: min(380px, 100%); }
.hire-pop .hire-pop-card.bank-pop-card > * { grid-column: 1; grid-row: auto; }
.bank-pop-card .hire-pop-form { width: 100%; }
/* Lignes d'objets (inventaire ET « Équiper » depuis une troupe : même rendu) : textes réduits,
   écart avant le badge de rareté, marges serrées, stats sur une ligne quand elles tiennent. */
.inv-row .inv-main { gap: 3px; }
.inv-row .inv-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .95rem; line-height: 1.1; }
.inv-row .inv-name .gear-rarity { font-size: .6rem; }
.inv-row .gear-stats { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .72rem; }
.inv-row .gear-stats li { white-space: nowrap; }
.inv-row .gear-stats .ico { width: 12px; height: 12px; }
.inv-row .inv-meta { margin: 0; }
.inv-row .inv-on { font-size: .7rem; }
@media (max-width: 380px) { .inv-row .gear-stats { display: flex; } }
/* Bouton « Améliorer » : texte contouré comme les autres boutons, calé à droite du titre. */
.bank-up-open { margin-left: auto; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.bank-up-open svg { -webkit-text-stroke: 0; }
.bank-head { width: 100%; }
.bank-head > .bank-up { margin-left: auto; }
.sheet-head.bank-head { padding-right: 0; }
/* « Améliorer » collé au titre « Banque » (écart à gauche), plus calé à droite. */
.sheet-head.bank-head { justify-content: flex-start; gap: 10px 14px; }
.bank-head > .bank-up-open, .bank-head > .bank-up { margin-left: 0; }
/* Mobile : boutons de bâtiments plus petits (42 px), centrés sur leur emplacement, colonne de gauche
   resserrée contre le téléphone et le chat → plus de carte visible. */
@media (max-width: 640px) {
    .shortcut-btn { --sc: 42px; width: var(--sc); height: var(--sc); border-radius: 14px; }
    .shortcut-btn .ico { font-size: 21px; }
    .shortcut-btn.s-1 { right: calc(var(--dock-x) + (var(--dock-h) - var(--sc)) / 2); bottom: calc(var(--dock-b) + 3 * (var(--dock-h) + 10px) + (var(--dock-h) - var(--sc)) / 2); }
    .shortcut-btn.s-2, .shortcut-btn.s-3 { right: calc(var(--dock-x) + var(--dock-h) + 8px); }
    .shortcut-btn.s-2 { bottom: calc(var(--dock-b) + var(--dock-h) + 10px + (var(--dock-h) - var(--sc)) / 2); }
    .shortcut-btn.s-3 { bottom: calc(var(--dock-b) + 2 * (var(--dock-h) + 10px) + (var(--dock-h) - var(--sc)) / 2); }
    .shortcut-timer { font-size: .55rem; }
}
/* Mobile : dock plus compact (téléphone, chat, onglets, identité à 48 px) → plus de carte visible ;
   boutons de bâtiments proportionnés (38 px). */
@media (max-width: 640px) {
    .world { --dock-h: 48px; }
    .phone-btn, .chat-btn { width: var(--dock-h); height: var(--dock-h); border-radius: 15px; }
    .phone-btn .ico, .chat-btn .ico { font-size: 22px; }
    .shortcut-btn { --sc: 38px; border-radius: 13px; }
    .shortcut-btn .ico { font-size: 19px; }
}
/* Banque, mobile : même disposition qu'en bureau (picto | jauge | montant + boutons), en plus
   compact ; la mention « Stock » est retirée (le stock est déjà affiché dans le HUD). */
@media (max-width: 640px) {
    .bank-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
    .bank-res { width: 30px; height: 30px; }
    .bank-name { font-size: .82rem; }
    .bank-gain { font-size: .66rem; }
    .bank-amounts { font-size: .7rem; }
    .bank-stock { display: none; }
    .bank-form { grid-column: auto; grid-template-columns: auto auto; gap: 5px; }
    .bank-amount input { width: 56px; padding: 0 4px; font-size: .8rem; }
    .bank-btns { grid-template-columns: auto auto; gap: 4px; }
    .game .btn.bank-btn { width: auto; padding: 0 7px; font-size: .64rem; height: 28px; }
    .bank-max { height: 24px; padding: 0 5px; font-size: .6rem; }
}
/* Mobile : téléphone, chat et raccourcis de bâtiments sur la MÊME grille que les pastilles d'équipe
   (rangées de 42 px, écart de 6 px, même base) → écarts constants, rangées alignées des deux côtés.
   Colonne de droite : téléphone, chat, raccourci 1 ; colonne de gauche : raccourcis 2 et 3. */
@media (max-width: 640px) {
    .world { --rb: 42px; --rg: 6px; --r0: calc(var(--dock-b) + var(--dock-h) + 10px); }
    .crew { grid-auto-rows: var(--rb); gap: var(--rg); bottom: var(--r0); }
    .crew-pill { height: var(--rb); }
    .phone-btn[data-view="phone"], .chat-btn, .shortcut-btn { width: var(--rb); height: var(--rb); border-radius: 13px; }
    .phone-btn[data-view="phone"] { right: var(--dock-x); bottom: var(--r0); }
    .chat-btn { right: var(--dock-x); bottom: calc(var(--r0) + var(--rb) + var(--rg)); }
    .shortcut-btn.s-1 { right: var(--dock-x); bottom: calc(var(--r0) + 2 * (var(--rb) + var(--rg))); }
    .shortcut-btn.s-2, .shortcut-btn.s-3 { right: calc(var(--dock-x) + var(--rb) + var(--rg)); }
    .shortcut-btn.s-2 { bottom: var(--r0); }
    .shortcut-btn.s-3 { bottom: calc(var(--r0) + var(--rb) + var(--rg)); }
    .phone-btn .ico, .chat-btn .ico { font-size: 21px; }
    .shortcut-btn .ico { font-size: 20px; }
}
/* Banque : le champ du montant prend toute la hauteur des deux boutons Déposer / Retirer. */
.bank-form { align-items: stretch; }
.bank-amount { display: flex; }
.bank-amount input { height: auto; min-height: 30px; }
/* 4e raccourci (forge, banque, casino, commissariat) : bureau = un cran au-dessus du 3e ;
   mobile = colonne de gauche, à hauteur du 1er (grille 2 × 3 complète). */
.shortcut-btn.s-4 { bottom: calc(var(--dock-b) + 5 * (var(--dock-h) + 10px)); }
@media (max-width: 640px) {
    .shortcut-btn.s-4 { right: calc(var(--dock-x) + var(--rb) + var(--rg)); bottom: calc(var(--r0) + 2 * (var(--rb) + var(--rg))); }
}
/* Banque en travaux : « Niveau N en travaux » + compte à rebours dans une pastille sombre,
   de la largeur du bouton Terminer maintenant (libellé à gauche, compteur à droite). */
.bank-up.is-busy { justify-items: stretch; gap: 6px; }
.bank-up.is-busy .bank-up-info { justify-content: space-between; gap: 8px; height: 28px; padding: 0 10px; border: 2px solid var(--edge); border-radius: 10px; background: rgba(0, 0, 0, .4); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .3); color: rgba(255, 255, 255, .85); font-size: .74rem; font-weight: 800; }
.bank-up.is-busy .bank-up-info span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-up.is-busy .bank-up-info b { font-size: .82rem; font-variant-numeric: tabular-nums; }
.bank-up.is-busy form, .game .bank-up.is-busy .btn.bank-up-btn { width: 100%; }
/* Bureau : chat et téléphone côte à côte sur la 1re rangée (téléphone dans le coin), raccourcis
   de bâtiments au-dessus sur 2 colonnes (1 et 2 sur la 2e rangée, 3 et 4 sur la 3e). Entre 641 et
   999 px, les onglets QG / Ville se décalent d'un cran pour laisser la place au chat. */
@media (min-width: 641px) {
    .world { --sc-step: calc(var(--dock-h) + 10px); }
    .chat-btn { right: calc(var(--dock-x) + var(--sc-step)); bottom: var(--dock-b); }
    .shortcut-btn.s-1, .shortcut-btn.s-3 { right: var(--dock-x); }
    .shortcut-btn.s-2, .shortcut-btn.s-4 { right: calc(var(--dock-x) + var(--sc-step)); }
    .shortcut-btn.s-1, .shortcut-btn.s-2 { bottom: calc(var(--dock-b) + var(--sc-step)); }
    .shortcut-btn.s-3, .shortcut-btn.s-4 { bottom: calc(var(--dock-b) + 2 * var(--sc-step)); }
}
@media (min-width: 641px) and (max-width: 999px) {
    .viewswitch { right: calc(var(--dock-x) + 2 * (var(--dock-h) + 10px)); }
    .hud-id { max-width: min(300px, calc(calc(100 * var(--u-vw)) - 2 * var(--dock-x) - 2 * var(--dock-h) - 340px)); }
}
/* Bureau : panneau du chat collé au bord droit, posé au-dessus de la 1re rangée (chat + téléphone)
   pour laisser voir son bouton, déplié depuis le coin bas-droit. Le panneau est hors de `.world`
   (enfant de body) : il redéclare les mesures du dock. */
@media (min-width: 641px) {
    .chat {
        --dock-h: 58px; --dock-x: clamp(12px, calc(2 * var(--u-vw)), 24px); --dock-b: max(18px, env(safe-area-inset-bottom));
        right: var(--dock-x); bottom: calc(var(--dock-b) + var(--dock-h) + 10px);
        height: min(520px, calc(calc(100 * var(--u-svh)) - 150px - var(--dock-h))); transform-origin: 100% 100%;
    }
}
/* Grand écran : chat ouvert = colonne fixe sur toute la hauteur à droite, et l'interface (carte, HUD,
   fenêtres) se décale à sa gauche → on continue à jouer en discutant. `contain: layout` fait des
   éléments fixes du HUD des enfants de la zone réduite ; la carte suit (ResizeObserver de MapLibre). */
@media (min-width: 1360px) {
    body.game { --chat-w: 380px; }
    body.game:has(> .chat:not([hidden]):not(.is-out)) #stage,
    body.game:has(> .chat:not([hidden]):not(.is-out)) #layer { right: var(--chat-w); contain: layout; }
    .chat {
        top: 0; right: 0; bottom: 0; width: var(--chat-w); height: auto;
        border-radius: 0; border-width: 0 0 0 3px; box-shadow: -10px 0 40px rgba(5, 2, 12, .5);
        animation: chat-dock-in .26s cubic-bezier(.22, 1, .36, 1);
    }
    .chat.is-out { animation: chat-dock-out .2s ease-in forwards; }
}
@keyframes chat-dock-in { from { translate: 100% 0; } }
@keyframes chat-dock-out { to { translate: 100% 0; } }
/* Bouton du chat en mode actif tant que le panneau est ouvert (même dégradé que le survol). */
.chat-btn[aria-expanded="true"] { background: var(--cta); }
/* Chat : mes messages plus discrets — même violet que les autres, un ton plus clair, liseré fin ;
   ils se distinguent surtout par leur alignement à droite (plus de vert). */
.chat-msg.is-mine .chat-bubble { background: linear-gradient(180deg, #4a2c78, #352058); box-shadow: inset 0 0 0 1px rgba(200, 170, 255, .22), 0 2px 0 var(--edge); }
.chat-msg.is-mine .chat-who strong, .chat-msg.is-mine .chat-name { color: #ffc531; }
/* Salon de ville = LIGNES COMPACTES (lisible avec beaucoup de messages et d'auteurs) : petit avatar,
   pseudo coloré par joueur (--nc) puis le texte, tout aligné à gauche, sans bulle. Mes messages :
   simple fond de ligne violet. Messages enchaînés : pseudo et avatar sur le 1er seulement.
   Les messages privés gardent les bulles (conversation à deux). */
.chat-list:not(.pm-list) { gap: 2px; padding: 8px 8px 6px; }
.chat-list:not(.pm-list) .chat-msg,
.chat-list:not(.pm-list) .chat-msg.is-mine { flex-direction: row; align-items: flex-start; gap: 8px; margin: 0; padding: 4px 6px; border-radius: 8px; }
.chat-list:not(.pm-list) .chat-msg.is-cont { margin-top: -2px; padding-top: 0; }
.chat-list:not(.pm-list) .chat-msg.is-mine { background: rgba(150, 105, 230, .16); }
.chat-list:not(.pm-list) .chat-msg.is-mine.has-next { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.chat-list:not(.pm-list) .chat-msg.is-mine.is-cont { margin-top: -2px; border-top-left-radius: 0; border-top-right-radius: 0; }
.chat-list:not(.pm-list) .chat-ava { flex: none; width: 24px; height: 24px; margin-top: 0; font-size: .7rem; }
.chat-list:not(.pm-list) .chat-msg.has-next .chat-ava { visibility: visible; }
.chat-list:not(.pm-list) .chat-msg.is-cont .chat-ava { visibility: hidden; height: 0; }
.chat-list:not(.pm-list) .chat-bubble,
.chat-list:not(.pm-list) .chat-msg.is-mine .chat-bubble { flex: 1; max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; line-height: 1.35; }
.chat-list:not(.pm-list) .chat-who { display: inline-flex; align-items: baseline; gap: 6px; margin: 0 6px 0 0; vertical-align: baseline; }
.chat-list:not(.pm-list) .chat-msg.is-cont .chat-who { display: none; }
.chat-list:not(.pm-list) .chat-name,
.chat-list:not(.pm-list) .chat-who strong,
.chat-list:not(.pm-list) .chat-msg.is-mine .chat-name { color: var(--nc, #ffc531); font-size: .86rem; }
.chat-list:not(.pm-list) .chat-who time { font-size: .66rem; }
.chat-list:not(.pm-list) .chat-who .role-badge { font-size: .56rem; }
.chat-list:not(.pm-list) .chat-text { display: inline; font-size: .9rem; color: rgba(255, 255, 255, .92); }
/* Pseudos du chat : `overflow: hidden` (points de suspension) rognait le contour épais du texte →
   marge intérieure compensée par une marge négative (le texte ne bouge pas). */
.chat-name, .chat-who strong { padding: 2px 4px 3px; margin: -2px -4px -3px; }
/* Banque : le gain d'intérêts (« +100 / h ») ne se coupe jamais. */
.bank-gain { flex: none; white-space: nowrap; }
/* Privés : même correctif pour les pseudos (liste des conversations, en-tête de conversation). */
.pm-row-top strong, .pm-who-name { padding: 2px 4px 3px; margin: -2px -4px -3px; }
/* Chat (ville et privés) : statut = couleur du pseudo, sans badge — admin rouge, modo bleu
   (mêmes teintes que les badges du profil / forum). */
.chat .chat-list .chat-msg.is-admin .chat-name, .chat .chat-list .chat-msg.is-admin .chat-who strong { color: #ff4d64; }
.chat .chat-list .chat-msg.is-mod .chat-name, .chat .chat-list .chat-msg.is-mod .chat-who strong { color: #4fb3ff; }
/* Chat : pseudos moins gras (graisse et contour allégés). */
.chat .chat-name, .chat .chat-who strong { font-weight: 700; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; text-shadow: 0 1px 0 var(--edge); }
/* Onglets du chat : pas de rognage typographique sur le bouton lui-même (Chrome coupait le haut du
   contour du libellé) ; centrage vertical classique. */
.seg > .chat-tab { text-box: normal; line-height: 1; overflow: visible; }
/* Privés, liste des conversations : pseudo et dernier message moins gras (comme dans le chat). */
.pm-row-top strong, .pm-who-name { font-weight: 700; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; text-shadow: 0 1px 0 var(--edge); }
.pm-row.is-unread .pm-row-last { font-weight: 600; }
/* Chat plus haut : bureau (fenêtre posée) jusqu'à 680 px, mobile 80 % de l'écran (700 px max). */
@media (min-width: 641px) and (max-width: 1359px) { .chat { height: min(680px, calc(calc(100 * var(--u-svh)) - 130px - var(--dock-h))); } }
@media (max-width: 640px) { .chat { height: min(calc(80 * var(--u-svh)), 700px); } }
/* Pastilles du bouton chat (privés non lus) et du bouton téléphone : même sautillement que la
   pastille des arrestations (un saut, ~5 s de repos). Le « bump » d'un nouveau message garde la main. */
.phone-notif, .chat-btn .chat-badge { animation: badge-bounce 6s cubic-bezier(.28, .84, .42, 1) infinite; transform-origin: 50% 100%; }
.chat-btn .chat-badge.is-bump { animation: chat-bump .5s cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) { .phone-notif, .chat-btn .chat-badge { animation: none; } }
/* Téléphone : pastilles « discrètes » pour les applis qui n'allument pas le bouton téléphone
   (forum, messages privés) → violet sombre du jeu au lieu du rouge d'alerte. */
.phone-app--forum .phone-badge, .phone-app--messages .phone-badge {
    background: linear-gradient(180deg, #4a2c78, #2c1a46);
    color: rgba(255, 255, 255, .9);
    box-shadow: inset 0 0 0 1px rgba(200, 170, 255, .3), 0 0 0 2px rgba(20, 8, 30, .45), 0 2px 4px rgba(0, 0, 0, .35);
}
/* Onglet « Privés » : pastille posée en absolu au bord droit de l’onglet → le libellé reste centré. */
.chat-tab { position: relative; }
.chat-tab-badge { position: absolute; top: 50%; right: 10px; margin: 0; translate: 0 -50%; vertical-align: baseline; }
/* Liste des conversations : nombre de non lus en mention grisée (plus de pastille). */
.pm-row-unread { align-self: center; color: rgba(255, 255, 255, .5); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.pm-row-side { display: grid; justify-items: end; align-content: center; gap: 4px; }
.pm-row-side time { color: rgba(255, 255, 255, .5); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.pm-row-unread { align-self: auto; }
/* Avatars : JAMAIS déformés. Le contenu (initiale, hauteur de ligne) pouvait étirer le rond
   (taille minimale automatique d'un élément de grille) → rond verrouillé en carré, contenu borné. */
.pava-in { min-width: 0; min-height: 0; aspect-ratio: 1; line-height: 1; overflow: hidden; }
.chat-list:not(.pm-list) .chat-ava .pava-in { font-size: .72rem; border-width: 2px; box-shadow: 0 1px 0 var(--edge); }
/* Grand écran, chat en colonne : mieux détaché du jeu — fond un peu plus clair, liseré violet
   lumineux sur le bord gauche et ombre portée sur la carte. */
@media (min-width: 1360px) {
    .chat {
        background: linear-gradient(180deg, rgba(34, 20, 54, .97), rgba(22, 13, 36, .97));
        border-left: 3px solid var(--edge);
        box-shadow: inset 2px 0 0 rgba(190, 150, 255, .28), -14px 0 40px rgba(5, 2, 12, .65);
    }
}
/* Encart de réparation (confirmation, sans visuel) : vie
   avant → après avec la part rendue hachurée en vert, coût sur une ligne. */
.repair-pop .hire-pop-card.repair-pop-card { gap: 10px; padding-top: 18px; }
.repair-hp { display: grid; gap: 6px; width: 100%; padding: 10px 12px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(0, 0, 0, .3); }
.repair-hp-top { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 900; }
.repair-hp-top span { margin-right: auto; color: var(--muted); font-size: .78rem; text-transform: uppercase; }
.repair-hp-top b { font-size: 1.05rem; color: #ffb35c; }
.repair-hp-top b.is-bad { color: #ff6b7a; }
.repair-hp-top b.is-ok { color: #8ef05a; }
.repair-hp-top .ico { width: 14px; height: 14px; color: rgba(255, 255, 255, .5); }
.repair-bar { height: 12px; background: repeating-linear-gradient(-45deg, rgba(142, 240, 90, .45) 0 5px, rgba(142, 240, 90, .15) 5px 10px); }
.repair-hp small { color: rgba(255, 255, 255, .55); font-size: .72rem; font-weight: 700; text-align: right; }
.repair-cost { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 6px 4px 4px; }
.repair-cost > span { color: var(--muted); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.repair-cost .hire-pop-total { justify-content: flex-end; }

/* ==========================================================================
   CASINO : accueil (Croupière, cagnotte de la ville, jeux) et machine à sous.
   ========================================================================== */
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* pas display:none (dégradés) */
.sheet--casino { width: min(640px, 100%); }
.sheet--slots { width: min(480px, 100%); }

/* La Croupière */
.casino-host { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: end; gap: 12px; margin: 6px 0 14px; }
.casino-host-img { width: 92px; height: 116px; object-fit: cover; object-position: 50% 0; border: 3px solid var(--edge); border-radius: 16px; background: linear-gradient(180deg, #4a2c78, #1c1030); box-shadow: 0 4px 0 var(--edge); }
.casino-host-talk { position: relative; padding: 10px 14px 12px; border: 2px solid var(--edge); border-radius: 16px 16px 16px 4px; background: linear-gradient(180deg, #3d2660, #2c1a46); box-shadow: inset 0 0 0 1px rgba(200, 170, 255, .2), 0 3px 0 var(--edge); }
.casino-host-name { margin: 0 0 3px; color: #ff7eb6; font-size: .8rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; }
.casino-host-line { margin: 0; color: #f1e8ff; font-size: .88rem; font-style: italic; line-height: 1.35; }

/* Cagnotte de la ville */
.casino-pot { display: grid; justify-items: center; gap: 6px; margin: 0 0 16px; padding: 14px 14px 12px; border: 3px solid var(--edge); border-radius: 18px; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 197, 49, .18), transparent 60%), linear-gradient(180deg, #2a1842, #1a0f2a); box-shadow: inset 0 0 0 2px rgba(255, 210, 63, .25), 0 4px 0 var(--edge); text-align: center; }
.casino-pot-label { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.casino-pot-val { display: flex; align-items: center; gap: 8px; margin: 0; }
.casino-pot-val b { color: #ffd23f; font-size: 2rem; font-weight: 900; line-height: 1; -webkit-text-stroke: 6px var(--edge); paint-order: stroke fill; text-shadow: 0 3px 0 var(--edge); }
.casino-pot-ico { width: 40px; height: 40px; }
.casino-pot-next { display: flex; align-items: center; gap: 6px; margin: 0; color: rgba(255, 255, 255, .7); font-size: .8rem; font-weight: 700; }
.casino-pot-next .ico { width: 14px; height: 14px; }
.casino-pot-next b { color: #fff; font-variant-numeric: tabular-nums; }
.casino-shares { display: flex; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.casino-shares li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(0, 0, 0, .3); font-weight: 900; font-size: .85rem; }
.casino-shares li.is-me { border-color: #8ef05a; box-shadow: 0 0 0 2px rgba(142, 240, 90, .35); }
.casino-rank { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--edge); border-radius: 50%; color: #1a0f22; font-size: .72rem; }
.casino-rank.r1 { background: linear-gradient(180deg, #ffe07a, #e09a00); }
.casino-rank.r2 { background: linear-gradient(180deg, #f1f1f5, #a9a9b8); }
.casino-rank.r3 { background: linear-gradient(180deg, #ffbf8a, #c4692a); }
.casino-me { margin: 2px 0 0; color: rgba(255, 255, 255, .65); font-size: .78rem; font-weight: 700; }
.casino-me.is-in { color: #8ef05a; }

/* Jeux */
.casino-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.casino-game { display: grid; justify-items: center; gap: 4px; width: 100%; height: 100%; padding: 12px 10px 10px; border: 3px solid var(--edge); border-radius: 16px; background: linear-gradient(180deg, #3a2356, #24153a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), 0 4px 0 var(--edge); color: #fff; font: inherit; text-align: center; cursor: pointer; transition: transform .15s, filter .15s; }
.casino-game:hover { transform: translateY(-2px); filter: brightness(1.08); }
.casino-game-ico { width: 54px; height: 54px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.casino-game-name { font-size: 1rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; }
.casino-game-desc { color: rgba(255, 255, 255, .65); font-size: .74rem; line-height: 1.3; }
.casino-game-cta { margin-top: 4px; padding: 4px 14px; border: 2px solid var(--edge); border-radius: 999px; background: var(--cta); font-size: .74rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.casino-game.is-soon { filter: saturate(.35) brightness(.75); }
.casino-game.is-soon:hover { transform: none; filter: saturate(.45) brightness(.8); }
.casino-game.is-soon .casino-game-cta { background: rgba(255, 255, 255, .12); }

/* Machine à sous */
.slot-machine { --cell: 78px; position: relative; display: grid; justify-items: center; gap: 10px; margin: 6px 0 14px; padding: 16px 14px 12px; border: 3px solid var(--edge); border-radius: 22px; background: linear-gradient(180deg, #ff4f7e, #b8235a 55%, #7a1340); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(0, 0, 0, .3), 0 5px 0 var(--edge), 0 0 40px rgba(255, 79, 126, .25); }
.slot-lights { position: absolute; inset: 6px 10px auto; height: 8px; border-radius: 99px; background: radial-gradient(circle, #ffe07a 0 2.5px, transparent 3px) 0 50% / 16px 8px repeat-x; animation: slot-lights 1.2s steps(2) infinite; opacity: .9; }
@keyframes slot-lights { 50% { background-position: 8px 50%; } }
.slot-window { position: relative; display: grid; grid-template-columns: repeat(3, var(--cell)); gap: 6px; padding: 8px; border: 3px solid var(--edge); border-radius: 14px; background: #1a0f22; box-shadow: inset 0 4px 10px rgba(0, 0, 0, .6); }
.slot-reel { position: relative; height: calc(var(--cell) * 3); overflow: hidden; border-radius: 9px; background: linear-gradient(180deg, #d9d2e6, #fff 30%, #fff 70%, #d9d2e6); }
.slot-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 15, 34, .55), transparent 28%, transparent 72%, rgba(26, 15, 34, .55)); pointer-events: none; }
.slot-strip { will-change: transform; }
.slot-cell { display: grid; place-items: center; height: var(--cell); }
.slot-sym { width: calc(var(--cell) * .74); height: calc(var(--cell) * .74); }
.slot-payline { position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 99px; background: rgba(255, 79, 126, .7); box-shadow: 0 0 8px rgba(255, 79, 126, .8); pointer-events: none; }
.is-spinning .slot-strip { filter: blur(.6px); }
.is-win .slot-payline { background: #8ef05a; box-shadow: 0 0 12px #8ef05a; animation: slot-pay .5s ease-in-out 3; }
.is-big .slot-payline { background: #ffd23f; box-shadow: 0 0 16px #ffd23f; }
.is-jackpot .slot-machine { animation: slot-jackpot .35s ease-in-out 6; }
@keyframes slot-pay { 50% { opacity: .3; } }
@keyframes slot-jackpot { 50% { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 5px 0 var(--edge), 0 0 60px #ffd23f; } }
.slot-result { min-height: 1.6em; margin: 0; color: #fff; font-size: 1.25rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 5px var(--edge); paint-order: stroke fill; text-shadow: 0 3px 0 var(--edge); }
.is-win .slot-result { color: #8ef05a; }
.is-big .slot-result { color: #ffd23f; }

/* Mise */
.slot-bet { display: grid; gap: 6px; margin: 0 0 10px; }
.slot-bet-label { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 900; text-transform: uppercase; text-align: center; }
.slot-bet-label small { color: rgba(255, 255, 255, .5); font-weight: 700; text-transform: none; }
.slot-bet-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.slot-bet-input { width: 120px; height: 44px; padding: 0 8px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, .35); color: #ffd23f; font: inherit; font-size: 1.15rem; font-weight: 900; text-align: center; -moz-appearance: textfield; }
.slot-bet-input::-webkit-inner-spin-button, .slot-bet-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.slot-bet-input:focus { outline: none; border-color: #ffc531; }
.slot-chip { height: 34px; padding: 0 10px; border: 2px solid var(--edge); border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: .74rem; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.slot-chip:hover { background: rgba(255, 255, 255, .16); }
.slot-bet .qty-btn { width: 44px; height: 44px; }
.slot-spin .slot-spin-ico { width: 26px; height: 26px; margin-right: 6px; filter: drop-shadow(0 2px 0 var(--edge)); }
.slot-spin:disabled { filter: grayscale(.4) brightness(.85); }
.slot-warn { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; color: #ffb35c; font-size: .74rem; font-weight: 700; text-align: center; }
.slot-warn .ico { width: 12px; height: 12px; flex: none; }
.slot-pot { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: rgba(255, 255, 255, .7); font-size: .8rem; font-weight: 700; }
.slot-pot b { color: #ffd23f; }
.slot-pot-ico { width: 22px; height: 22px; }

/* Table des gains */
.slot-pays { margin: 12px 0 0; border: 2px solid var(--edge); border-radius: 14px; background: rgba(0, 0, 0, .25); }
.slot-pays summary { padding: 8px 12px; color: #fff; font-size: .8rem; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.slot-pays ul { display: grid; gap: 4px; margin: 0; padding: 0 12px 10px; list-style: none; }
.slot-pays li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.slot-pays-syms { display: flex; gap: 2px; }
.slot-pays .slot-sym { width: 26px; height: 26px; }
.slot-pays b { color: #ffd23f; font-weight: 900; }

/* Messages de la Croupière : somme jointe à récupérer */
.npc-gift { display: block; margin-top: 8px; padding: 6px 14px; border: 2px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #8ef05a, #2fa82a); color: #fff; font: inherit; font-size: .82rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 2px 0 var(--edge); cursor: pointer; }
.npc-gift:hover:not(:disabled) { filter: brightness(1.08); }
.npc-gift.is-done { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); -webkit-text-stroke: 0; box-shadow: none; cursor: default; }

@media (max-width: 640px) {
    .slot-machine { --cell: 64px; padding: 14px 10px 10px; }
    .casino-games { gap: 8px; }
    .casino-game-desc { display: none; }
    .casino-pot-val b { font-size: 1.7rem; }
    .slot-bet-input { width: 96px; }
}
@media (prefers-reduced-motion: reduce) { .slot-lights, .is-win .slot-payline, .is-jackpot .slot-machine { animation: none; } }
/* Ligne de gain : deux flèches sur les côtés + bande derrière la rangée du milieu (elle ne
   traverse plus les symboles) ; verte au gain, dorée au gros gain. */
.slot-payline { left: -2px; right: -2px; height: 0; margin: 0; background: none; box-shadow: none; animation: none; }
.slot-payline::before, .slot-payline::after { content: ""; position: absolute; top: -9px; border: 9px solid transparent; }
.slot-payline::before { left: -8px; border-left-color: #ffd23f; filter: drop-shadow(1px 0 0 var(--edge)); }
.slot-payline::after { right: -8px; border-right-color: #ffd23f; filter: drop-shadow(-1px 0 0 var(--edge)); }
.slot-strip { position: relative; z-index: 1; }
.slot-reel::before { content: ""; position: absolute; left: 0; right: 0; top: var(--cell); height: var(--cell); background: rgba(255, 79, 126, .14); }
.is-win .slot-reel::before { background: rgba(142, 240, 90, .35); animation: slot-pay .5s ease-in-out 3; }
.is-big .slot-reel::before { background: rgba(255, 210, 63, .45); }
.is-win .slot-payline, .is-big .slot-payline { background: none; box-shadow: none; animation: none; }
.slot-reel::after { z-index: 2; }
.chat-error.is-ok { color: #c9ffb0; background: rgba(47, 168, 42, .25); border-color: rgba(142, 240, 90, .45); }
/* Table des gains : une pastille par ligne, « Mise » en clair puis le multiplicateur, moins gras. */
.slot-pays ul { gap: 5px; }
.slot-pays li { padding: 4px 12px 4px 8px; border-radius: 10px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.slot-pays b { font-weight: 700; font-size: .9rem; }
.slot-pays b span { margin-right: 2px; color: rgba(255, 255, 255, .55); font-weight: 600; font-size: .8rem; }

/* Machine à sous, version « jeu » : fronton néon, guirlandes d'ampoules qui clignotent en
   chenille, cadre chromé, rouleaux bombés, écran LED pour le résultat, symboles gagnants
   qui sautent. */
.slot-machine { padding: 30px 14px 14px; margin-top: 22px; }
.slot-marquee { position: absolute; top: -18px; left: 50%; translate: -50% 0; z-index: 3; display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px 14px; border: 3px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #2a1842, #160c24); box-shadow: 0 0 0 2px #ffd23f, 0 0 18px rgba(255, 210, 63, .55), 0 3px 0 var(--edge); white-space: nowrap; }
.slot-marquee span { color: #ff7eb6; font-size: .9rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; text-shadow: 0 0 10px rgba(255, 126, 182, .8); }
.slot-marquee b { color: #ffd23f; font-size: 1rem; font-weight: 900; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; text-shadow: 0 0 10px rgba(255, 210, 63, .8); }
.slot-marquee-ico { width: 18px; height: 18px; }
.slot-lights { inset: 14px 22px auto; }
.slot-lights.is-bottom { inset: auto 22px 8px; animation-delay: .6s; }
.slot-lights, .slot-lights.is-bottom { background: radial-gradient(circle, #fff6c4 0 2px, #ffd23f 2.5px, transparent 3.5px) 0 50% / 16px 8px repeat-x; filter: drop-shadow(0 0 3px rgba(255, 210, 63, .9)); }
.slot-window { padding: 7px; border: 3px solid var(--edge); background: linear-gradient(180deg, #e9e6f0, #9a93a8 50%, #d8d4e0); box-shadow: inset 0 0 0 3px #1a0f22, inset 0 6px 12px rgba(0, 0, 0, .5), 0 3px 0 rgba(0, 0, 0, .35); }
.slot-reel { background: linear-gradient(180deg, #bdb5cc, #fff 26%, #fff 74%, #bdb5cc); box-shadow: inset 0 0 0 2px #1a0f22; }
.slot-reel::after { background: linear-gradient(180deg, rgba(26, 15, 34, .7), rgba(26, 15, 34, .08) 30%, transparent 45%, transparent 55%, rgba(26, 15, 34, .08) 70%, rgba(26, 15, 34, .7)), linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 18%, transparent 82%, rgba(0, 0, 0, .18)); }

/* Écran LED du résultat */
.slot-screen { display: grid; place-items: center; min-width: 70%; min-height: 42px; padding: 4px 16px; border: 3px solid var(--edge); border-radius: 12px; background: radial-gradient(80% 120% at 50% 50%, #241338, #0d0716); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), 0 2px 0 rgba(255, 255, 255, .15); }
.slot-screen .slot-result { min-height: 0; font-size: 1.1rem; }
.slot-screen .slot-result:empty::before { content: "• • •"; color: rgba(255, 126, 182, .35); -webkit-text-stroke: 0; text-shadow: none; }
.is-win .slot-screen { box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), 0 0 16px rgba(142, 240, 90, .45); }
.is-big .slot-screen { box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), 0 0 20px rgba(255, 210, 63, .6); }

/* Symboles gagnants (rangée du milieu) qui sautent */
.is-win .slot-cell:nth-child(2) .slot-sym { animation: slot-sym-pop .45s cubic-bezier(.34, 1.56, .64, 1) 3; }
@keyframes slot-sym-pop { 50% { transform: scale(1.18) translateY(-3px); } }

@media (max-width: 640px) {
    .slot-machine { padding: 28px 10px 12px; }
    .slot-lights { inset: 13px 18px auto; }
    .slot-lights.is-bottom { inset: auto 18px 7px; }
}
@media (prefers-reduced-motion: reduce) { .is-win .slot-cell:nth-child(2) .slot-sym { animation: none; } }
/* Bouton « Lancer » : sans picto, centré, pas sur toute la largeur. */
.slot-spin-row { display: flex; justify-content: center; }
.game .btn.slot-spin { min-width: 220px; padding: 0 40px; }
/* Croupière de l'accueil du casino : cadrage un peu plus serré (moins de buste). */
.casino-host-img { height: 100px; object-position: 50% 4%; }
/* Machine à sous : place réservée sous l'écran de résultat pour la guirlande du bas (elle ne
   passe plus par-dessus). */
.slot-machine { padding-bottom: 26px; }
@media (max-width: 640px) { .slot-machine { padding-bottom: 24px; } }
/* Confirmation d'un paiement qui puise dans le coffre de la banque (au-dessus de tout). */
.bank-confirm { position: fixed; inset: 0; z-index: 75; }
.bank-confirm .hire-pop-backdrop { border-radius: 0; }
.hire-pop .hire-pop-card.bank-pop-card.bank-confirm-card, .bank-confirm .hire-pop-card { gap: 10px; text-align: center; }
.bank-confirm-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0; padding: 0; list-style: none; }
.bank-confirm-list li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(0, 0, 0, .35); }
.bank-confirm-list .stock-ico { width: 26px; height: 26px; }
.bank-confirm-list b { color: #ffd23f; font-size: 1.05rem; font-weight: 900; }
.bank-confirm-btns { display: flex; justify-content: center; gap: 10px; width: 100%; margin-top: 4px; }
.bank-confirm-btns .btn { flex: 1 1 0; max-width: 160px; }
.bank-confirm-list .stock-ico { position: static; inset: auto; margin: 0; transform: none; translate: none; rotate: none; flex: none; }

/* ==========================================================================
   ROULETTE : cylindre (bois, cases, cône doré), bille, tapis vert à jeton.
   ========================================================================== */
.sheet--roulette { width: min(640px, 100%); }
.roul-top { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 16px; margin: 6px 0 14px; }
.roul-wheel-wrap { position: relative; width: 250px; aspect-ratio: 1; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); }
.roul-wheel { display: block; width: 100%; height: 100%; overflow: visible; }
.roul-rim { fill: #3b1d0e; stroke: #1a0f22; stroke-width: 3; }
.roul-spin, .roul-orbit { transform-box: view-box; transform-origin: 50% 50%; }
.roul-pocket { stroke: #e6c46a; stroke-width: .8; }
.roul-pocket.is-red { fill: #c8102e; }
.roul-pocket.is-black { fill: #1d1626; }
.roul-pocket.is-green { fill: #0f8a4a; }
.roul-slot { stroke: #b48a3a; stroke-width: .6; }
.roul-slot.is-red { fill: #8e0b20; }
.roul-slot.is-black { fill: #120d18; }
.roul-slot.is-green { fill: #0a5f33; }
.roul-num { fill: #fff; font-size: 9px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.roul-cone { fill: #5a3418; stroke: #e6c46a; stroke-width: 1.5; }
.roul-hub { fill: #e0a92e; stroke: #1a0f22; stroke-width: 2; }
.roul-cross { stroke: #e0a92e; stroke-width: 4; stroke-linecap: round; }
.roul-knob { fill: #ffe07a; stroke: #1a0f22; stroke-width: 2; }
.roul-ball { fill: #fff; stroke: #1a0f22; stroke-width: 1.2; }
.roul-pointer { fill: #ffd23f; stroke: #1a0f22; stroke-width: 2; stroke-linejoin: round; }
.roul-side { display: grid; gap: 8px; min-width: 0; }
.roul-screen { min-width: 0; }
.roul-screen .slot-result { font-size: 1rem; text-align: center; }
.roul-last-label { margin: 4px 0 0; color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.roul-last { display: flex; flex-wrap: wrap; gap: 5px; min-height: 28px; margin: 0; padding: 0; list-style: none; }
.roul-last li { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--edge); border-radius: 50%; color: #fff; font-size: .78rem; font-weight: 900; }
.roul-last li.is-red { background: #c8102e; }
.roul-last li.is-black { background: #1d1626; }
.roul-last li.is-green { background: #0f8a4a; }
.roul-last li:first-child { box-shadow: 0 0 0 2px #ffd23f; }
.is-win .roul-screen { box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), 0 0 16px rgba(142, 240, 90, .45); }
.is-big .roul-screen { box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), 0 0 20px rgba(255, 210, 63, .6); }

/* Tapis : 0 à gauche, grille 3 × 12, douzaines, chances simples. */
.roul-board { display: grid; grid-template-columns: 1.2fr repeat(12, minmax(0, 1fr)); grid-auto-rows: 34px; gap: 3px; padding: 8px; border: 3px solid var(--edge); border-radius: 14px; background: radial-gradient(120% 120% at 50% 0%, #138a4c, #0a5a31); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 4px 0 var(--edge); }
.roul-zero { grid-column: 1; grid-row: 1 / 4; }
.roul-board [data-type="dozen1"] { grid-column: 2 / span 4; }
.roul-board [data-type="dozen2"], .roul-board [data-type="dozen3"] { grid-column: span 4; }
.roul-board [data-type="low"] { grid-column: 2 / span 2; }
.roul-board .roul-even { grid-column-end: span 2; }
.roul-cell { position: relative; display: grid; place-items: center; min-width: 0; padding: 0; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 6px; background: rgba(0, 0, 0, .12); color: #fff; font: inherit; font-size: .82rem; font-weight: 900; cursor: pointer; transition: filter .15s, transform .15s; }
.roul-cell.is-red { background: #c8102e; }
.roul-cell.is-black { background: #1d1626; }
.roul-cell.is-green { background: #0f8a4a; }
.roul-out { font-size: .74rem; text-transform: uppercase; }
.roul-out.is-red, .roul-out.is-black { background: rgba(0, 0, 0, .12); }
.roul-diamond { display: block; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 3px; rotate: 45deg; }
.roul-out.is-red .roul-diamond { background: #c8102e; }
.roul-out.is-black .roul-diamond { background: #1d1626; }
.roul-cell:hover { filter: brightness(1.2); }
/* Jeton posé sur la mise choisie */
.roul-cell.is-picked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px dashed #fff; border-radius: 50%; background: radial-gradient(circle, #ffd23f 0 45%, #e09a00 46%); box-shadow: 0 0 0 2px var(--edge), 0 3px 0 var(--edge); pointer-events: none; animation: roul-chip .25s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes roul-chip { from { transform: scale(.3) translateY(-8px); opacity: 0; } }
/* Numéro sorti */
.roul-cell.is-hit { z-index: 1; box-shadow: 0 0 0 2px #fff, 0 0 14px #fff; animation: roul-hit .5s ease-in-out 4; }
@keyframes roul-hit { 50% { filter: brightness(1.6); } }
.roul-pays { margin: 8px 0 0; color: rgba(255, 255, 255, .55); font-size: .72rem; font-weight: 700; text-align: center; }
.roul-pick { margin: 6px 0 10px; color: #ffd23f; font-size: .85rem; font-weight: 800; text-align: center; }
.sheet--roulette .slot-spin:disabled { filter: grayscale(.6) brightness(.8); }

@media (max-width: 640px) {
    .roul-top { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; }
    .roul-wheel-wrap { width: 210px; }
    .roul-side { width: 100%; }
    .roul-last { justify-content: center; }
    .roul-last-label { text-align: center; }
    .roul-board { grid-auto-rows: 30px; gap: 2px; padding: 5px; }
    .roul-cell { font-size: .66rem; border-radius: 4px; }
    .roul-out { font-size: .58rem; }
    .roul-diamond { width: 13px; height: 13px; }
    .roul-cell.is-picked::after { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) { .roul-cell.is-hit, .roul-cell.is-picked::after { animation: none; } }
/* Cylindre et bille : rotation autour du centre du repère SVG (0,0 = centre, viewBox -100 -100 200 200). */
.roul-spin, .roul-orbit { transform-box: view-box; transform-origin: 0 0; }

/* Roulette compacte (0 à 24) : cylindre à gauche, tapis à droite ; mise + lancer sur une ligne. */
.sheet--roulette { width: min(720px, 100%); }
.roul-game { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; gap: 16px; margin: 4px 0 12px; }
.roul-wheel-wrap { width: 230px; }
.roul-num { font-size: 10.5px; }
.roul-right { display: grid; gap: 8px; min-width: 0; }
.roul-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.roul-screen { min-height: 40px; }
.roul-last { flex-wrap: nowrap; justify-content: flex-end; min-height: 0; max-width: 128px; overflow: hidden; }
.roul-last li { flex: none; width: 24px; height: 24px; font-size: .7rem; }
.roul-board { grid-template-columns: 1.15fr repeat(24, minmax(0, 1fr)); grid-auto-rows: 32px; gap: 3px; padding: 7px; }
.roul-board .roul-n { grid-column-end: span 3; }
.roul-board [data-type="third1"] { grid-column: 2 / span 8; }
.roul-board [data-type="third2"], .roul-board [data-type="third3"] { grid-column: span 8; }
.roul-board [data-type="low"] { grid-column: 2 / span 4; }
.roul-board .roul-simple { grid-column-end: span 4; }
.roul-board .roul-cell { font-size: .8rem; }
.roul-board .roul-out { font-size: .66rem; }
.roul-pick { margin: 0; font-size: .8rem; }
.roul-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.roul-controls .slot-bet-row { flex-wrap: nowrap; }
.roul-controls .slot-spin { min-width: 200px; }
.sheet--roulette .roul-pays { margin: 8px 0 0; font-size: .7rem; }
.sheet--roulette .slot-pot { margin-top: 6px; }

@media (max-width: 760px) {
    .roul-game { grid-template-columns: 170px minmax(0, 1fr); gap: 10px; }
    .roul-wheel-wrap { width: 170px; }
    .roul-status { grid-template-columns: minmax(0, 1fr); }
    .roul-last { justify-content: flex-start; max-width: none; }
}
@media (max-width: 640px) {
    .roul-game { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .roul-wheel-wrap { width: 190px; }
    .roul-right { width: 100%; }
    .roul-status { grid-template-columns: minmax(0, 1fr) auto; }
    .roul-last { max-width: 110px; justify-content: flex-end; }
    .roul-board { grid-auto-rows: 30px; gap: 2px; padding: 5px; }
    .roul-board .roul-cell { font-size: .72rem; }
    .roul-board .roul-out { font-size: .6rem; }
    .roul-controls .slot-spin { width: 100%; }
}
/* Roulette : case 0 de largeur fixe (elle était écrasée par les 24 sous-colonnes) ; survol des
   cases du tapis bien visible (liseré doré, cellule soulevée et éclaircie). */
.roul-board { grid-template-columns: 34px repeat(24, minmax(0, 1fr)); }
.roul-cell { transition: filter .12s, transform .12s, box-shadow .12s; }
.roul-cell:hover { z-index: 2; filter: brightness(1.3); transform: translateY(-2px); box-shadow: 0 0 0 2px #ffd23f, 0 4px 10px rgba(0, 0, 0, .5); }
.roul-cell:active { transform: translateY(0); }
@media (max-width: 640px) { .roul-board { grid-template-columns: 26px repeat(24, minmax(0, 1fr)); } }
.roul-game { align-items: center; } /* cylindre centré verticalement sur le tapis */
/* Fenêtres empilées : celle du dessous s'efface un peu (assombrie, légèrement reculée) pour
   que la fenêtre du haut ressorte ; elle reprend son éclat dès qu'on referme celle du haut. */
#layer > .sheet-wrap > .sheet, #layer > .phone-wrap > .phone { transition: filter .25s, scale .25s; }
#layer > .sheet-wrap:has(~ .sheet-wrap) > .sheet,
#layer > .phone-wrap:has(~ .sheet-wrap) > .phone { filter: brightness(.45) saturate(.6); scale: .97; }

/* ==========================================================================
   TICKET À GRATTER : ticket doré (3 × 3 cases sous une couche argentée) + lots.
   ========================================================================== */
.sheet--scratch { width: min(680px, 100%); }
.scr-game { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 18px; margin: 4px 0 12px; }
.scr-ticket { display: grid; gap: 8px; padding: 12px; border: 3px solid var(--edge); border-radius: 18px; background: linear-gradient(160deg, #ffe58a, #f0b31c 45%, #d98a00); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 5px 0 var(--edge), 0 0 30px rgba(255, 197, 49, .25); rotate: -1.5deg; }
.scr-ticket-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; }
.scr-ticket-head span { color: #fff; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 5px var(--edge); paint-order: stroke fill; text-shadow: 0 3px 0 var(--edge); }
.scr-head-ico { width: 22px; height: 22px; }
.scr-area { position: relative; aspect-ratio: 1; border: 3px solid var(--edge); border-radius: 12px; overflow: hidden; background: #fff8e1; touch-action: none; }
.scr-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); height: 100%; }
.scr-cell { display: grid; place-items: center; border: 1px dashed rgba(122, 80, 0, .35); }
.scr-cell .slot-sym { width: 70%; height: 70%; }
.scr-cell.is-win { background: radial-gradient(circle, rgba(142, 240, 90, .55), rgba(142, 240, 90, .1) 70%); }
.scr-cell.is-win .slot-sym { animation: slot-sym-pop .45s cubic-bezier(.34, 1.56, .64, 1) 3; }
.scr-cover { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; transition: opacity .5s; }
.scr-cover.is-off { opacity: 0 !important; pointer-events: none; }
.scr-cover-hint { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; color: #2a1842; font-size: 1rem; font-weight: 900; text-align: center; text-transform: uppercase; pointer-events: none; }
.scr-cover-hint[hidden] { display: none; }
.scr-ticket-foot { margin: 0; color: #5a3300; font-size: .74rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.scr-side { display: grid; gap: 10px; min-width: 0; }
.scr-pays { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.scr-pays li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 12px 4px 8px; border-radius: 10px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); transition: background .2s, box-shadow .2s; }
.scr-pays .slot-sym { width: 24px; height: 24px; }
.scr-pays b { color: #ffd23f; font-weight: 700; font-size: .9rem; }
.scr-pays b span { margin-right: 2px; color: rgba(255, 255, 255, .55); font-weight: 600; font-size: .8rem; }
.scr-pays li.is-win { background: rgba(142, 240, 90, .2); box-shadow: inset 0 0 0 2px #8ef05a; }
.scr-controls .scr-all { min-width: 160px; }
.sheet--scratch .slot-spin:disabled { filter: grayscale(.6) brightness(.8); }

@media (max-width: 640px) {
    .scr-game { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .scr-ticket { width: min(290px, 100%); }
    .scr-side { width: 100%; }
    .scr-controls .slot-spin, .scr-controls .scr-all { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .scr-cell.is-win .slot-sym { animation: none; } }
.scr-controls .scr-all { min-width: 200px; } .scr-controls [hidden] { display: none; }
/* Ticket : 3 rangées égales (les symboles ne gonflent plus les cases). */
.scr-grid { grid-template-rows: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scr-cell { min-height: 0; min-width: 0; overflow: hidden; }
.scr-cell .slot-sym { width: 62%; height: auto; aspect-ratio: 1; }
/* Ticket à gratter, mobile : lots sur 2 colonnes compactes (le bouton Acheter reste visible). */
@media (max-width: 640px) {
    .scr-game { gap: 10px; margin-bottom: 8px; }
    .scr-ticket { width: min(250px, 100%); padding: 9px; gap: 6px; }
    .scr-ticket-head span { font-size: 1rem; }
    .scr-pays { grid-template-columns: 1fr 1fr; gap: 4px; }
    .scr-pays li { padding: 3px 8px 3px 5px; }
    .scr-pays .slot-sym { width: 17px; height: 17px; }
    .scr-pays b { font-size: .78rem; }
    .scr-pays b span { display: none; }
    .scr-side { gap: 6px; }
}
/* Ordinateur : léger flou en plus (un flou permanent coûte trop sur mobile). */
@media (min-width: 641px) and (pointer: fine) {
    #layer > .sheet-wrap:has(~ .sheet-wrap) > .sheet,
    #layer > .phone-wrap:has(~ .sheet-wrap) > .phone { filter: brightness(.45) saturate(.6) blur(2px); }
}

/* ==========================================================================
   VIDÉO POKER : table des gains, tapis vert, 5 cartes (dos néon, gardée, gagnante).
   ========================================================================== */
.sheet--poker { width: min(640px, 100%); }
.pk-pays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 4px 0 12px; padding: 0; list-style: none; }
.pk-pays li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 9px; border-radius: 9px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); font-size: .72rem; font-weight: 700; color: rgba(255, 255, 255, .75); transition: background .2s, box-shadow .2s; }
.pk-pays li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-pays li b { flex: none; color: #ffd23f; font-weight: 800; }
.pk-pays li.is-win { background: rgba(255, 210, 63, .2); box-shadow: inset 0 0 0 2px #ffd23f; color: #fff; }
.pk-felt { display: grid; gap: 12px; margin: 0 0 12px; padding: 16px 12px 12px; border: 3px solid var(--edge); border-radius: 18px; background: radial-gradient(120% 120% at 50% 0%, #138a4c, #0a5a31); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12), 0 4px 0 var(--edge); }
.pk-hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; perspective: 600px; }
.pk-card { position: relative; display: grid; place-items: center; aspect-ratio: 5 / 7; padding: 0; border: 3px solid var(--edge); border-radius: 10px; background: #fff; color: #1d1626; font: inherit; box-shadow: 0 4px 0 var(--edge), 0 6px 14px rgba(0, 0, 0, .35); transition: transform .18s, box-shadow .18s; cursor: pointer; }
.pk-card:disabled { cursor: default; }
.pk-card.is-red { color: #d8143a; }
.pk-card.is-back { background: repeating-linear-gradient(45deg, #ff4f7e 0 6px, #c8235a 6px 12px); box-shadow: inset 0 0 0 4px #fff, 0 4px 0 var(--edge), 0 6px 14px rgba(0, 0, 0, .35); }
.pk-corner { position: absolute; top: 5px; left: 6px; display: grid; justify-items: center; line-height: 1; }
.pk-corner b { font-size: 1.15rem; font-weight: 900; }
.pk-suit-sm { width: 14px; height: 14px; }
.pk-suit { width: 52%; height: auto; aspect-ratio: 1; margin-top: 10%; }
.pk-held { position: absolute; left: 50%; bottom: -12px; translate: -50% 0; padding: 2px 9px; border: 2px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #8ef05a, #2fa82a); color: #fff; font-size: .62rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; opacity: 0; scale: .6; transition: opacity .15s, scale .15s; pointer-events: none; }
.pk-card.is-held { transform: translateY(-10px); box-shadow: 0 0 0 3px #8ef05a, 0 4px 0 var(--edge), 0 10px 18px rgba(0, 0, 0, .4); }
.pk-card.is-held .pk-held { opacity: 1; scale: 1; }
.pk-card:not(:disabled):not(.is-held):hover { transform: translateY(-4px); }
.pk-card.is-win { box-shadow: 0 0 0 3px #ffd23f, 0 0 18px rgba(255, 210, 63, .7), 0 4px 0 var(--edge); animation: pk-win .45s ease-in-out 3; }
@keyframes pk-win { 50% { transform: translateY(-6px); } }
.pk-screen { justify-self: center; min-width: 70%; }
.pk-screen .slot-result { font-size: 1rem; text-align: center; }
.pk-controls .slot-bet-row.is-locked { opacity: .45; pointer-events: none; }
.pk-controls [hidden] { display: none; }
.sheet--poker .slot-spin:disabled { filter: grayscale(.6) brightness(.8); }

@media (max-width: 640px) {
    .pk-pays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pk-pays li { font-size: .66rem; padding: 3px 7px; }
    .pk-felt { padding: 12px 8px 14px; }
    .pk-hand { gap: 5px; }
    .pk-card { border-width: 2px; border-radius: 7px; }
    .pk-corner { top: 3px; left: 4px; }
    .pk-corner b { font-size: .85rem; }
    .pk-suit-sm { width: 10px; height: 10px; }
    .pk-held { font-size: .5rem; padding: 1px 5px; bottom: -10px; }
    .pk-controls .slot-spin { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pk-card.is-win { animation: none; } }
/* Vidéo poker, rendu affiné : cartes plus fines (papier ivoire, reflet, ombre douce, coin
   répété à l'envers), tapis à liseré doré, table des gains plus discrète. */
.pk-felt { border-width: 2px; box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .12), inset 0 0 0 6px rgba(230, 196, 106, .55), inset 0 10px 30px rgba(0, 0, 0, .25), 0 4px 0 var(--edge); padding: 18px 16px 14px; }
.pk-card { border-width: 2px; border-radius: 9px; background: linear-gradient(160deg, #ffffff, #f4efe4); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), 0 2px 0 var(--edge), 0 8px 16px rgba(0, 0, 0, .3); }
.pk-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, .7), transparent 35%); pointer-events: none; }
.pk-card.is-back { background: repeating-linear-gradient(45deg, #ff4f7e 0 5px, #c8235a 5px 10px); box-shadow: inset 0 0 0 3px #f4efe4, inset 0 0 0 4px #e6c46a, 0 2px 0 var(--edge), 0 8px 16px rgba(0, 0, 0, .3); }
.pk-corner b { font-size: 1rem; }
.pk-corner.is-flip { top: auto; left: auto; bottom: 5px; right: 6px; rotate: 180deg; }
.pk-suit { width: 42%; margin-top: 0; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .18)); }
.pk-card.is-held { box-shadow: 0 0 0 2px #8ef05a, 0 2px 0 var(--edge), 0 12px 20px rgba(0, 0, 0, .35); }
.pk-card.is-win { box-shadow: 0 0 0 2px #ffd23f, 0 0 16px rgba(255, 210, 63, .6), 0 2px 0 var(--edge); }
.pk-pays li { padding: 3px 9px; background: rgba(255, 255, 255, .035); font-weight: 600; color: rgba(255, 255, 255, .62); }
.pk-pays li b { font-weight: 700; }
@media (max-width: 640px) {
    .pk-felt { padding: 14px 8px 14px; }
    .pk-corner b { font-size: .78rem; }
    .pk-corner.is-flip { bottom: 3px; right: 4px; }
}
.pk-felt { box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .14), inset 0 0 0 5px rgba(230, 196, 106, .45), inset 0 10px 30px rgba(0, 0, 0, .25), 0 4px 0 var(--edge); }
.slot-screen .slot-result { max-width: 100%; overflow: hidden; white-space: nowrap; }

/* ==========================================================================
   CASINO, 8 jeux : grille de l'accueil (4 colonnes en bureau), blackjack, dés de rue,
   courses de rue, roue de la fortune.
   ========================================================================== */
.sheet--casino { width: min(760px, 100%); }
.casino-games { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.casino-game { padding: 10px 8px 9px; }
.casino-game-ico { width: 48px; height: 48px; color: #ff4f7e; }
.casino-game-name { font-size: .9rem; }
.casino-game-desc { font-size: .68rem; }
@media (max-width: 760px) { .casino-games { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Blackjack */
.sheet--blackjack { width: min(600px, 100%); }
.bj-felt { gap: 8px; }
.bj-row { display: grid; justify-items: center; gap: 6px; }
.bj-label { margin: 0; color: rgba(255, 255, 255, .8); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.bj-label b { display: inline-grid; place-items: center; min-width: 26px; height: 22px; margin-left: 4px; padding: 0 6px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(0, 0, 0, .35); color: #ffd23f; font-size: .8rem; }
.bj-label b:empty { display: none; }
.bj-cards { display: flex; justify-content: center; min-height: 104px; }
.bj-cards .bj-card { width: 74px; flex: none; margin: 0 -10px; }
.bj-rule { margin: 0; color: rgba(255, 255, 255, .55); font-size: .7rem; font-weight: 700; text-align: center; }
.bj-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bj-acts[hidden] { display: none; }
.bj-acts .btn { min-width: 110px; }
.bj-acts .btn:disabled { filter: grayscale(.7) brightness(.75); }
.slot-bet-row.is-locked { opacity: .45; pointer-events: none; }

/* Dés de rue : ruelle (mur de briques, néon), dés à points */
.sheet--dice { width: min(560px, 100%); }
.dice-alley { position: relative; display: grid; justify-items: center; gap: 12px; margin: 4px 0 12px; padding: 18px 14px 14px; border: 3px solid var(--edge); border-radius: 18px; background: linear-gradient(180deg, transparent 62%, #1b1026 62%), repeating-linear-gradient(0deg, #4a2433 0 18px, #2a1220 18px 20px), #3a1a28; box-shadow: inset 0 0 40px rgba(0, 0, 0, .6), 0 4px 0 var(--edge); overflow: hidden; }
.dice-alley::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(0, 0, 0, .35) 38px 40px); background-size: 40px 40px; mask: linear-gradient(180deg, #000 62%, transparent 62%); pointer-events: none; }
.dice-pair { position: relative; display: flex; gap: 22px; padding: 10px 0 4px; }
.die { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; width: 64px; height: 64px; padding: 9px; border: 3px solid var(--edge); border-radius: 14px; background: linear-gradient(145deg, #ffffff, #e4dfee); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), 0 6px 0 var(--edge), 0 12px 16px rgba(0, 0, 0, .5); }
.die i { border-radius: 50%; background: #c8102e; opacity: 0; scale: .9; }
.die[data-die="1"] i:nth-child(5),
.die[data-die="2"] i:nth-child(3), .die[data-die="2"] i:nth-child(7),
.die[data-die="3"] i:nth-child(3), .die[data-die="3"] i:nth-child(5), .die[data-die="3"] i:nth-child(7),
.die[data-die="4"] i:is(:nth-child(1), :nth-child(3), :nth-child(7), :nth-child(9)),
.die[data-die="5"] i:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(7), :nth-child(9)),
.die[data-die="6"] i:is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7), :nth-child(9)) { opacity: 1; }
.die.is-rolling { animation: die-roll .18s linear infinite; }
.die.is-rolling:nth-child(2) { animation-direction: reverse; }
@keyframes die-roll { 0% { transform: translate(-6px, -8px) rotate(-20deg); } 50% { transform: translate(6px, 2px) rotate(15deg); } 100% { transform: translate(-6px, -8px) rotate(-20deg); } }
.dice-screen { position: relative; width: 100%; }
.is-win .dice-screen, .is-win .race-screen, .is-win .fw-screen, .is-win.sheet--blackjack .pk-screen { box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7), 0 0 16px rgba(142, 240, 90, .45); }
.dice-bets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.dice-bet { display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border: 2px solid var(--edge); border-radius: 12px; background: linear-gradient(180deg, #3a2356, #24153a); color: #fff; font: inherit; cursor: pointer; transition: transform .12s, box-shadow .12s, filter .12s; }
.dice-bet b { font-size: .9rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.dice-bet small { color: rgba(255, 255, 255, .6); font-size: .64rem; font-weight: 700; }
.dice-bet span { color: #ffd23f; font-weight: 900; font-size: .9rem; }
.dice-bet:hover { transform: translateY(-2px); filter: brightness(1.12); }
.dice-bet.is-picked { box-shadow: 0 0 0 2px #ffd23f, 0 0 14px rgba(255, 210, 63, .45); background: linear-gradient(180deg, #4a2c78, #2c1a46); }

/* Courses de rue : asphalte, voies, ligne d'arrivée à damier */
.sheet--race { width: min(640px, 100%); }
.race-track { position: relative; display: grid; gap: 4px; margin: 4px 0 10px; padding: 8px; border: 3px solid var(--edge); border-radius: 16px; background: #2b2633; box-shadow: inset 0 0 30px rgba(0, 0, 0, .5), 0 4px 0 var(--edge); overflow: hidden; }
.race-lane { position: relative; display: block; height: 52px; padding: 0; border: 0; border-bottom: 2px dashed rgba(255, 255, 255, .25); border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .05), transparent); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background .15s, box-shadow .15s; }
.race-lane:last-of-type { border-bottom: 0; }
.race-lane:hover { background: linear-gradient(90deg, rgba(255, 210, 63, .14), transparent); }
.race-lane.is-picked { box-shadow: inset 0 0 0 2px #ffd23f; background: linear-gradient(90deg, rgba(255, 210, 63, .2), transparent); }
.race-name { position: absolute; right: 30px; top: 50%; translate: 0 -50%; z-index: 1; color: rgba(255, 255, 255, .85); font-size: .74rem; font-weight: 900; text-transform: uppercase; pointer-events: none; }
.race-name b { color: #ffd23f; }
.race-car { position: absolute; left: 6px; top: 50%; translate: 0 -50%; z-index: 2; display: block; width: 78px; height: 39px; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .55)); }
.race-car-ico { width: 100%; height: 100%; }
.race-car.c1 { color: #ff4f7e; } .race-car.c2 { color: #ffd23f; } .race-car.c3 { color: #5fd4ff; } .race-car.c4 { color: #8ef05a; } .race-car.c5 { color: #c3a6ff; }
.race-place { position: absolute; right: 4px; top: 50%; translate: 0 -50%; z-index: 3; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--edge); border-radius: 50%; background: #fff; color: #1a0f22; font-size: .72rem; font-weight: 900; }
.race-place:empty { display: none; }
.race-lane.is-first .race-place { background: linear-gradient(180deg, #ffe07a, #e09a00); }
.race-finish { position: absolute; top: 0; bottom: 0; right: 0; width: 10px; background: repeating-conic-gradient(#fff 0 25%, #1a0f22 0 50%) 0 0 / 10px 10px; opacity: .85; pointer-events: none; }
.race-screen { margin: 0 0 10px; }

/* Roue de la fortune */
.sheet--wheel { width: min(520px, 100%); }
.fw-wrap { display: grid; justify-items: center; margin: 0 0 10px; }
.fw-wheel { width: min(320px, calc(82 * var(--u-vw))); height: auto; overflow: visible; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55)); }
.fw-rim { fill: #2a1842; stroke: #1a0f22; stroke-width: 4; }
.fw-spin { transform-box: view-box; transform-origin: 0 0; }
.fw-seg { stroke: #1a0f22; stroke-width: 1.2; }
.fw-seg.s-0 { fill: #3a2356; } .fw-seg.s-1 { fill: #5fd4ff; } .fw-seg.s-15 { fill: #8ef05a; } .fw-seg.s-2 { fill: #ffd23f; } .fw-seg.s-3 { fill: #ff9a2e; } .fw-seg.s-top { fill: #ff4f7e; }
.fw-txt { fill: #fff; font-size: 10px; font-weight: 900; text-anchor: middle; dominant-baseline: central; stroke: #1a0f22; stroke-width: 2.4px; paint-order: stroke fill; }
.fw-txt.s-0 { fill: rgba(255, 255, 255, .5); stroke-width: 0; }
.fw-hub { fill: #ffd23f; stroke: #1a0f22; stroke-width: 3; }
.fw-knob { fill: #fff6c4; stroke: #1a0f22; stroke-width: 2; }
.fw-bulb { fill: #fff6c4; animation: fw-bulb 1s steps(2) infinite; }
.fw-bulb:nth-of-type(even) { animation-delay: .5s; }
@keyframes fw-bulb { 50% { fill: #ffb35c; } }
.fw-pointer { fill: #ff4f7e; stroke: #1a0f22; stroke-width: 3; stroke-linejoin: round; }
.fw-screen { margin: 0 0 10px; }

@media (max-width: 640px) {
    .bj-cards { min-height: 84px; }
    .bj-cards .bj-card { width: 58px; margin: 0 -8px; }
    .bj-acts .btn { flex: 1 1 0; min-width: 0; }
    .dice-bets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .die { width: 54px; height: 54px; padding: 7px; }
    .race-lane { height: 44px; }
    .race-car { width: 62px; height: 31px; }
    .race-name { font-size: .64rem; }
}
@media (prefers-reduced-motion: reduce) { .die.is-rolling, .fw-bulb { animation: none; } }
/* Blackjack : pas de transition CSS sur les cartes (l'animation d'entrée GSAP la combattait :
   cartes restées penchées / décalées) ; cartes non cliquables. */
.bj-card { transition: none; pointer-events: none; }
.bj-row { position: relative; z-index: 1; }
.bj-label { position: relative; z-index: 2; }
/* Courses : nom + cote dans une colonne fixe à gauche, la voiture part après (jamais masqués). */
.race-name { right: auto; left: 10px; width: 92px; display: grid; gap: 1px; line-height: 1.1; }
.race-car { left: 104px; }
@media (max-width: 640px) { .race-name { width: 66px; left: 6px; } .race-car { left: 74px; } }
/* Dés de rue en 3D : cubes CSS (preserve-3d), 6 faces à points, vue de biais, ombre au sol. */
.dice-pair { gap: 34px; padding: 16px 0 8px; perspective: 700px; }
.die3d { --s: 62px; position: relative; display: block; width: var(--s); height: var(--s); }
.die3d-shadow { position: absolute; left: 4px; right: 4px; bottom: -14px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); opacity: .6; }
.die3d-cube { position: absolute; inset: 0; transform-style: preserve-3d; }
.die3d-face { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; padding: 9px; border: 2px solid #c9c2d6; border-radius: 12px; background: radial-gradient(120% 120% at 30% 25%, #ffffff, #ece7f4 60%, #d7d0e3); box-shadow: inset 0 0 8px rgba(0, 0, 0, .12); backface-visibility: hidden; }
.die3d-face i { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff4d64, #b3082a 70%); opacity: 0; }
.die3d-face.f1 { transform: translateZ(calc(var(--s) / 2)); }
.die3d-face.f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.die3d-face.f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.die3d-face.f5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.die3d-face.f3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.die3d-face.f4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.die3d-face.f1 i:nth-child(5),
.die3d-face.f2 i:is(:nth-child(3), :nth-child(7)),
.die3d-face.f3 i:is(:nth-child(3), :nth-child(5), :nth-child(7)),
.die3d-face.f4 i:is(:nth-child(1), :nth-child(3), :nth-child(7), :nth-child(9)),
.die3d-face.f5 i:is(:nth-child(1), :nth-child(3), :nth-child(5), :nth-child(7), :nth-child(9)),
.die3d-face.f6 i:is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(6), :nth-child(7), :nth-child(9)) { opacity: 1; }
@media (max-width: 640px) { .die3d { --s: 54px; } .die3d-face { padding: 8px; } }
/* Courses : voitures plus grandes, ombre au sol ; pendant la course, traînées de vitesse et
   caisse qui vibre (arrêtées à l'arrivée de chaque voiture). */
.race-car { width: 92px; height: 37px; filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .6)); }
.race-car::after { content: ""; position: absolute; top: 30%; right: 100%; width: 0; height: 40%; border-radius: 99px; background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, .55) 3px 5px); opacity: 0; transition: width .3s, opacity .3s; mask: linear-gradient(90deg, transparent, #000); }
.race-track.is-racing .race-lane:not(.is-arrived) .race-car::after { width: 46px; opacity: .8; }
.race-track.is-racing .race-lane:not(.is-arrived) .race-car-ico { animation: race-rumble .12s linear infinite; }
@keyframes race-rumble { 50% { transform: translateY(-1.5px) rotate(-.6deg); } }
@media (max-width: 640px) { .race-car { width: 72px; height: 29px; } }
@media (prefers-reduced-motion: reduce) { .race-track.is-racing .race-lane .race-car-ico { animation: none; } }
/* Dés 3D : noyau plein (3 plans croisés) qui comble les arêtes ; arrondi plus doux, pas de
   liseré clair (il dessinait des coutures) ; points noirs. */
.die3d-core { position: absolute; inset: 3px; background: #ddd7e8; }
.die3d-core.k2 { transform: rotateY(90deg); }
.die3d-core.k3 { transform: rotateX(90deg); }
.die3d-face { border: 0; border-radius: 9px; box-shadow: inset 0 0 6px rgba(80, 60, 110, .25); }
.die3d-face i { background: radial-gradient(circle at 35% 35%, #4a4255, #0d0a12 70%); }
/* Roue de la fortune : picots dorés entre les secteurs, languette articulée en haut (pivot). */
.fw-peg { fill: #ffe07a; stroke: #1a0f22; stroke-width: 1.2; }
.fw-flap { transform-box: view-box; transform-origin: 0 -106px; }
.fw-pivot { fill: #ffd23f; stroke: #1a0f22; stroke-width: 2; }
/* QG : fenêtre d'amélioration (stockage, places, durée, coût) et travaux en cours. */
.hq-pop-label { margin: 2px 0 -4px; color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.hq-pop-house { display: grid; gap: 4px; width: 100%; margin: 0; padding: 0; list-style: none; }
.hq-pop-house li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-weight: 800; font-size: .85rem; }
.hq-pop-house li span { color: rgba(255, 255, 255, .7); }
.hq-pop-house li b { display: inline-flex; align-items: center; gap: 4px; color: #6ee7a0; }
.hq-pop-house .ico { width: 12px; height: 12px; color: rgba(255, 255, 255, .5); }
.hq-pop .btn-price .cost-items { flex-wrap: wrap; justify-content: center; }
.sheet-actions .hq-up { width: 100%; justify-items: stretch; }
.sheet-actions .bank-up.is-max { justify-content: center; width: 100%; }
.hq-pop-house li span { display: inline-block; } .hq-pop-house li span::first-letter { text-transform: uppercase; }
/* Commissariat : commissaire, protection, corruption en gemmes, cellules. */
.sheet--police { width: min(560px, 100%); }
.police-host .casino-host-name { color: #5fb8ff; }
.police-shield { display: grid; gap: 6px; margin: 0 0 14px; padding: 10px 12px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(42, 111, 219, .15); box-shadow: inset 0 0 0 1px rgba(95, 184, 255, .25); }
.police-shield.is-immune { background: rgba(255, 210, 63, .12); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .35); }
.police-shield-row { display: flex; align-items: center; gap: 8px; margin: 0; color: #cfe6ff; font-size: .82rem; font-weight: 800; }
.police-shield-row .ico { width: 15px; height: 15px; flex: none; color: #6ee7a0; }
.police-shield-row.is-gold { color: #ffe9a8; }
.police-shield-row.is-gold .ico { color: #ffd23f; }
.police-shield-row b { margin-left: auto; color: #ffd23f; font-variant-numeric: tabular-nums; }
.police-hint { margin: -4px 0 8px; color: rgba(255, 255, 255, .6); font-size: .74rem; line-height: 1.35; }
.police-bribes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.police-bribe { display: grid; justify-items: center; gap: 6px; padding: 10px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(255, 255, 255, .04); }
.police-bribe-h { margin: 0; color: #fff; font-size: .9rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.police-bribe .btn { width: 100%; }
.police-empty { margin: 0; color: rgba(255, 255, 255, .55); font-size: .82rem; font-style: italic; }
.police-jail { display: grid; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.police-jail li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--edge); border-radius: 14px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 10px, transparent 10px 22px), rgba(0, 0, 0, .25); }
.police-ava { width: 42px; height: 42px; }
.police-jail-txt { display: grid; gap: 2px; min-width: 0; }
.police-jail-txt b { overflow: hidden; color: #fff; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.police-jail-txt small { color: rgba(255, 255, 255, .6); font-size: .72rem; font-weight: 700; }
.police-bail { min-width: 110px; }
/* Commissariat : petit portrait (tête qui dépasse du rond, comme ailleurs). */
.police-jail .unit-ava.police-ava { width: 46px; height: 54px; margin: 0; }
.police-jail .unit-ava.police-ava::before { height: 46px; border-width: 2px; box-shadow: 0 2px 0 var(--edge); }
.police-jail .unit-ava.police-ava img { width: 46px; height: 54px; }
.police-jail .unit-ava.police-ava.is-group img { width: 42px; height: 42px; margin-bottom: 2px; }
/* Dés 3D, style du jeu : arêtes soulignées d'un filet sombre (il masque aussi le crénelage des
   faces vues de biais), lissage forcé, un dé à points noirs et l'autre à points rouges. */
.die3d-face { border: 2.5px solid var(--edge); border-radius: 10px; outline: 1px solid transparent; will-change: transform; }
.die3d-core { inset: 4px; background: #c9c2d6; }
.die3d-cube { will-change: transform; }
.die3d.is-red .die3d-face i { background: radial-gradient(circle at 35% 35%, #ff5c72, #b3082a 70%); }
/* Dés 3D : le noyau prend la couleur du filet → aux coins arrondis, on voit un angle sombre
   continu (et non plus un creux clair entre deux faces). */
.die3d-core { inset: 2px; background: var(--edge); border-radius: 6px; }
/* 5e raccourci (marché noir) : bureau = 4e rangée à droite ; mobile = colonne de droite, au-dessus du 1er. */
.shortcut-btn.s-5 { right: var(--dock-x); bottom: calc(var(--dock-b) + 3 * (var(--dock-h) + 10px)); }
@media (max-width: 640px) { .shortcut-btn.s-5 { right: var(--dock-x); bottom: calc(var(--r0) + 3 * (var(--rb) + var(--rg))); } }
/* 6e raccourci (ambassade → famille) : bureau = 4e rangée à gauche du 5e ; mobile = colonne de gauche, au-dessus du 4e. */
.shortcut-btn.s-6 { right: calc(var(--dock-x) + var(--dock-h) + 10px); bottom: calc(var(--dock-b) + 3 * (var(--dock-h) + 10px)); }
@media (max-width: 640px) { .shortcut-btn.s-6 { right: calc(var(--dock-x) + var(--rb) + var(--rg)); bottom: calc(var(--r0) + 3 * (var(--rb) + var(--rg))); } }

/* Marché noir */
.sheet--market { width: min(860px, 100%); }
.market-host .casino-host-name { color: #8ef05a; }


.market-tabs.seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 4px 0 10px; }
.market-list { display: grid; gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.market-row { display: grid; grid-template-columns: 130px minmax(190px, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(255, 255, 255, .04); }
.market-good { display: flex; align-items: center; gap: 10px; }
.market-res { width: 42px; height: 42px; flex: none; }
.market-name { margin: 0; color: #fff; font-weight: 900; text-transform: uppercase; }
.market-trend { display: flex; align-items: center; gap: 2px; margin: 2px 0 0; color: rgba(255, 255, 255, .6); font-size: .78rem; font-weight: 800; }
.market-trend .ico { width: 12px; height: 12px; }
.market-trend.is-up { color: #6ee7a0; } .market-trend.is-down { color: #ff8a8a; }
.market-info { display: grid; gap: 2px; min-width: 0; }
.market-price { display: flex; justify-content: space-between; gap: 8px; margin: 0; white-space: nowrap; font-size: .8rem; font-weight: 700; color: rgba(255, 255, 255, .65); }
.market-price b { color: #ffd23f; font-weight: 900; white-space: nowrap; }
.market-can { margin: 0; color: #8ef05a; font-size: .8rem; font-weight: 800; }
.market-can.is-zero { color: #ff8a8a; }
.market-info small { color: rgba(255, 255, 255, .5); font-size: .7rem; }
.market-trade { display: grid; grid-template-columns: auto 104px; align-items: center; gap: 4px 8px; }
.game .btn.market-btn { height: var(--qty-h, 38px); min-height: 0; padding: 0 8px; font-size: .82rem; }
.market-total { grid-column: 1 / -1; margin: 0; min-height: 1.2em; color: rgba(255, 255, 255, .7); font-size: .74rem; font-weight: 800; text-align: right; }
@media (max-width: 860px) {
    .market-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
    .market-trade { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); }
}
@media (max-width: 520px) {
    /* Mobile : le sélecteur de quantité garde sa taille, le bouton passe dessous sur toute la largeur. */
    .market-trade { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
    .market-trade .qty-box { justify-self: center; }
    .game .btn.market-btn { width: 100%; }
    .market-total { text-align: center; }
}
/* Parrainage */
.sheet--referral { width: min(560px, 100%); }
.ref-link { display: flex; gap: 8px; margin: 0 0 14px; }
.ref-link-input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, .35); color: #ffd23f; font: inherit; font-size: .85rem; font-weight: 800; user-select: all; }
.ref-link .btn { flex: none; min-width: 110px; }
.ref-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.ref-stats li { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(255, 255, 255, .04); text-align: center; }
.ref-stats b { display: inline-flex; align-items: center; gap: 4px; color: #fff; font-size: 1.1rem; font-weight: 900; }
.ref-stats span { color: rgba(255, 255, 255, .6); font-size: .66rem; font-weight: 700; line-height: 1.2; }
.ref-ico { width: 20px; height: 20px; }
.ref-list { display: grid; gap: 5px; margin: 0 0 10px; padding: 0; list-style: none; }
.ref-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: .85rem; }
.ref-name { overflow: hidden; color: #fff; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ref-lv { color: #ffd23f; font-weight: 800; font-size: .76rem; }
.ref-state { color: rgba(255, 255, 255, .55); font-size: .74rem; font-weight: 700; }
.ref-list li.is-ok .ref-state { color: #6ee7a0; }
@media (max-width: 640px) { .ref-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Dock : Parrainage en verre DORÉ (gains, gemmes), entre Réglages (bleu) et Quitter (rouge). */
.phone-app--referral .phone-icon {
    background: linear-gradient(160deg, rgba(255, 210, 63, .78), rgba(196, 120, 0, .82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 230, 150, .4), 0 6px 16px rgba(224, 154, 0, .4);
}
.phone-app--referral .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .03)); }
/* Missions de recrutement */
.sheet--missions { width: min(640px, 100%); }
.mis-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mis-card { display: grid; gap: 10px; padding: 12px; border: 2px solid var(--edge); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); }
.mis-giver { display: flex; align-items: center; gap: 12px; }
.mis-giver .unit-ava.mis-ava { width: 60px; height: 70px; margin: 0; flex: none; }
.mis-giver .unit-ava.mis-ava::before { height: 60px; }
.mis-giver .unit-ava.mis-ava img { width: 60px; height: 70px; }
.mis-giver .unit-ava.mis-ava.is-group img { width: 56px; height: 56px; }
.mis-name { margin: 0; color: #fff; font-size: 1.05rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.mis-pitch { margin: 2px 0 0; color: #f1e8ff; font-size: .84rem; font-style: italic; line-height: 1.35; }
.mis-label { margin: 0 0 4px; color: var(--muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.mis-label b { margin-left: 4px; color: #ff8a8a; }
.mis-troops { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mis-troops li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(214, 31, 58, .18); font-size: .8rem; font-weight: 800; }
.mis-troops .unit-ava.mis-foe-ava { width: 28px; height: 32px; margin: 0; }
.mis-troops .unit-ava.mis-foe-ava::before { height: 28px; border-width: 2px; box-shadow: none; }
.mis-troops .unit-ava.mis-foe-ava img { width: 28px; height: 32px; }
.mis-troops .unit-ava.mis-foe-ava.is-group img { width: 26px; height: 26px; margin-bottom: 1px; }
.mis-troops b { color: #ffd23f; }
.mis-gains { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: .82rem; font-weight: 800; color: #fff; }
.mis-gains span { display: inline-flex; align-items: center; gap: 4px; }
.mis-gains .ico { width: 15px; height: 15px; }
.mis-unlock { color: #8ef05a; }
.mis-ico { width: 20px; height: 20px; }
.mis-gear { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.mis-retry { display: flex; align-items: center; gap: 6px; margin: 0; color: rgba(255, 255, 255, .7); font-size: .82rem; font-weight: 700; }
.mis-retry .ico { width: 14px; height: 14px; }
.mis-retry b { color: #ffd23f; }
/* Campagne : progression, portrait du donneur, compétences de la bande, prochaine recrue. */
.mis-prog { display: block; width: 100%; height: 10px; margin: 2px 0 14px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; appearance: none; }
.mis-prog::-webkit-progress-bar { background: transparent; }
.mis-prog::-webkit-progress-value { border-radius: 999px; background: var(--cta); }
.mis-prog::-moz-progress-bar { border-radius: 999px; background: var(--cta); }
.mis-face { flex: none; width: 64px; height: 64px; border: 3px solid var(--edge); border-radius: 50%; background: #2a1438; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 210, 63, .45); }
.mis-card.is-recruit { border-color: rgba(142, 240, 90, .55); }
.mis-label--skills { margin-top: 10px; }
.mis-skills { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.mis-skills li { display: inline-flex; align-items: center; padding: 3px 9px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(255, 255, 255, .07); color: #ffb3b3; font-size: .74rem; font-weight: 800; }
.mis-skills li:has(> .is-ability) { padding: 0; border: 0; background: none; }
.mis-skills .is-ability { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 6px; border: 2px solid rgba(255, 79, 126, .7); border-radius: 999px; background: rgba(214, 31, 58, .28); color: #fff; font: inherit; font-size: .74rem; font-weight: 900; cursor: pointer; }
.mis-skills .is-ability .ico { width: 14px; height: 14px; color: #ffd23f; }
.mis-skills .is-ability.is-on { border-color: #ffd23f; background: rgba(255, 210, 63, .2); }
.mis-skill-desc { margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); color: #f1e8ff; font-size: .78rem; line-height: 1.35; }
/* Prochaine recrue : bandeau compact (avatar, libellé + nom, n° de mission). */
.mis-next { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 8px 12px 8px 8px; border: 2px solid var(--edge); border-left: 4px solid #8ef05a; border-radius: 14px; background: rgba(0, 0, 0, .28); }
.mis-next .unit-ava.mis-next-ava { width: 44px; height: 50px; margin: 0; flex: none; }
.mis-next .unit-ava.mis-next-ava::before { height: 44px; border-width: 2px; box-shadow: none; }
.mis-next .unit-ava.mis-next-ava img { width: 44px; height: 50px; }
.mis-next .unit-ava.mis-next-ava.is-group img { width: 40px; height: 40px; margin-bottom: 2px; }
.mis-next-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mis-next-label { color: var(--muted); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.mis-next-name { overflow: hidden; color: #fff; font-size: .98rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.mis-next-step { flex: none; padding: 4px 10px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(255, 210, 63, .14); color: #ffd23f; font-size: .76rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
/* Achat de terrain (vue land) : avancement de l'anneau, prix suivant, bouton d'achat. */
.sheet--land { width: min(420px, 100%); }
.land-ring { margin: 0 0 12px; padding: 12px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(0, 0, 0, .25); }
.land-ring-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; color: rgba(255, 255, 255, .78); font-size: .82rem; font-weight: 800; }
.land-ring-row b { color: #ffd23f; font-size: 1rem; font-weight: 900; }
.land-prog { margin: 0 0 8px; }
.land-note { margin: 0; color: rgba(255, 255, 255, .6); font-size: .74rem; line-height: 1.35; }
/* Bilan d'une mission : recrue débloquée */
.fight-recruit { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 10px; }
.fight-recruit img { flex: none; width: 68px; height: 68px; border: 3px solid var(--edge); border-radius: 50%; background: #2a1438; object-fit: cover; object-position: center top; box-shadow: 0 0 0 2px rgba(142, 240, 90, .55), 0 4px 0 var(--edge); }
.fight-recruit p { margin: 0; color: #8ef05a; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; }
.fight-recruit-fail { margin: 4px 0 10px; color: rgba(255, 255, 255, .75); font-weight: 800; text-align: center; }
.fight-gear { margin: 0 0 10px; font-weight: 900; text-align: center; }

/* « Voir les troupes / filles / narcos » (en-tête de Mon équipe) : petit CTA secondaire,
   liseré clair teinté + anneau sombre (lisible sur le fond sombre). */
.crew-catalog { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border: 2px solid rgba(214, 196, 255, .55); border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 2px var(--edge), 0 3px 0 var(--edge); color: #fff; font: inherit; font-size: .8rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; cursor: pointer; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.crew-catalog .ico { width: 16px; height: 16px; flex: none; }
.crew-catalog:hover { border-color: rgba(214, 196, 255, .85); background: rgba(255, 255, 255, .14); }
@media (min-width: 641px) { [data-view-root="crew"] .crew-catalog { top: 50%; right: 48px; translate: 0 calc(-50% - 36px); } } /* au niveau de la croix (36 px au-dessus du centre du titre) */

/* Débordement du stock (gains actifs au-delà du stockage, Resources::OVERFLOW) : jauge pleine
   en rouge qui pulse, ligne dédiée dans le menu de la ressource. */
.stock.is-over .stock-fill { background: rgba(255, 70, 90, .32); border-bottom-color: #ff4f6a; animation: stock-over 1.6s ease-in-out infinite; }
.stock.is-over .stock-val { color: #ffb3bd; }
@keyframes stock-over { 50% { background: rgba(255, 70, 90, .5); } }
.res-menu-row.is-over b { color: #ff6b7f; }
.res-menu-note { margin: 4px 0 0; color: rgba(255, 255, 255, .62); font-size: .7rem; font-weight: 700; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .stock.is-over .stock-fill { animation: none; } }
.res-menu-row.is-stopped b { color: #ff6b7f; }

/* Boutique de gemmes : carrousel des packs (cartes des shops) + renonciation au droit de rétractation. */
.gem-card { position: relative; text-align: center; }
.gem-card.is-popular { border-color: #ffc531; }
.gem-card.is-best { border-color: #7fdc4e; }
.gem-img-wrap { display: grid; place-items: center; height: 150px; }
.gem-img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); pointer-events: none; }
.gem-card .build-body h3 { justify-content: center; }
.gem-amount { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; }
.gem-amount-ico { width: 30px; height: 30px; object-fit: contain; }
.gem-amount b { font-size: 1.9rem; font-weight: 900; line-height: 1; -webkit-text-stroke: 5px var(--edge); paint-order: stroke fill; text-shadow: 0 3px 0 var(--edge); }
.gem-line { margin: 4px 0 0; color: #7fdc4e; font-size: .85rem; font-weight: 900; }
.gem-line--first { color: #ffd23f; }
.gem-line s { color: rgba(255, 255, 255, .5); font-weight: 700; }
.gem-price { font-size: 1.05rem; font-weight: 900; }
/* Premier achat d'un pack : macaron « ×2 » en haut à droite. */
.gem-x2 { position: absolute; top: -10px; right: -8px; z-index: 3; display: grid; place-items: center; width: 64px; height: 64px; border: 3px solid var(--edge); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe27a, #ffb21e 55%, #e08a00); box-shadow: 0 3px 0 var(--edge), 0 0 18px rgba(255, 197, 49, .45); rotate: 12deg; text-align: center; line-height: 1; }
.gem-x2 b { font-size: 1.35rem; font-weight: 900; color: #fff; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; }
.gem-x2 small { margin-top: -6px; font-size: .55rem; font-weight: 900; text-transform: uppercase; color: #fff; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; }
.gem-badge { top: -12px; left: 50%; translate: -50% 0; }
.shop-waiver { display: flex; align-items: flex-start; gap: 10px; max-width: 640px; margin: 18px auto 0; padding: 10px 14px; border: 2px solid rgba(214, 196, 255, .35); border-radius: 12px; background: rgba(0, 0, 0, .25); color: rgba(255, 255, 255, .85); font-size: .82rem; line-height: 1.35; cursor: pointer; user-select: none; }
.shop-waiver input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #3ddc84; cursor: pointer; }
.shop-waiver.is-shake { animation: shop-shake .4s; border-color: #ff6b7f; }
@keyframes shop-shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.gem-card .build-body .gem-amount { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 0; -webkit-line-clamp: unset; overflow: visible; }
.gem-card .gem-img { width: 172px; height: 172px; }
.gem-card .gem-img-wrap { height: 160px; overflow: visible; }
/* Macaron « ×2 1er achat » : lignes resserrées. */
.gem-x2 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.gem-x2 b { line-height: .9; }
.gem-x2 small { margin-top: 1px; line-height: 1; }

/* Carte des adversaires (vue Ville) : légende des liserés + badge « Vengeance » (compte à rebours). */
.revenge-tag { display: grid; justify-items: center; gap: 0; padding: 3px 9px 4px; border: 2px solid var(--edge); border-radius: 10px; background: linear-gradient(180deg, #ff4f6a, #c4143a); box-shadow: 0 3px 0 var(--edge), 0 0 16px rgba(255, 59, 92, .55); color: #fff; font: inherit; line-height: 1.05; cursor: pointer; animation: revenge-pulse 1.4s ease-in-out infinite; }
.revenge-tag b { font-size: .64rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; }
.revenge-tag span { font-size: .9rem; font-weight: 900; font-variant-numeric: tabular-nums; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
@keyframes revenge-pulse { 50% { box-shadow: 0 3px 0 var(--edge), 0 0 26px rgba(255, 59, 92, .9); } }
@media (prefers-reduced-motion: reduce) { .revenge-tag { animation: none; } }


/* ===== Familles (vue family) ===== */
.sheet--family { width: min(640px, 100%); }
/* Blason : tag de la famille dans un écusson biseauté (or sur nuit). */
.fam-crest { flex: none; display: grid; place-items: center; min-width: 46px; height: 40px; padding: 0 8px; border: 3px solid var(--edge); border-radius: 10px 10px 18px 18px; background: linear-gradient(180deg, #ffd96a, #e09a1c 60%, #a35f0c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--edge); }
.fam-crest b { color: #fff; font-size: .95rem; font-weight: 900; line-height: 1; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.fam-crest.is-big { min-width: 76px; height: 66px; border-radius: 14px 14px 30px 30px; }
.fam-crest.is-big b { font-size: 1.5rem; -webkit-text-stroke-width: 4px; }
.fam-head { display: flex; align-items: center; gap: 16px; padding-right: 40px; margin-bottom: 10px; }
.fam-id { min-width: 0; flex: 1; display: grid; gap: 4px; }
.fam-name { justify-self: start; max-width: 100%; margin: 0; overflow-wrap: anywhere; } /* le bandeau colle au nom (pas de pleine largeur) */
.fam-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: .82rem; font-weight: 700; color: rgba(255, 255, 255, .85); }
.fam-meta .ico { font-size: 14px; margin-right: 4px; }
.fam-lv { color: #ffc531; font-weight: 900; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.fam-chip { display: inline-block; padding: 1px 8px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: .7rem; font-weight: 900; text-transform: uppercase; line-height: 1.5; }
.fam-chip.is-ok { background: linear-gradient(180deg, #c3a6ff, #7b4fe0); }
.fam-xp { height: 10px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.fam-xp i { display: block; height: 100%; background: linear-gradient(90deg, #ffc531, #ff9a2e); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); }
.fam-xp i.f0 { width: 0%; }
.fam-xp i.f1 { width: 5%; }
.fam-xp i.f2 { width: 10%; }
.fam-xp i.f3 { width: 15%; }
.fam-xp i.f4 { width: 20%; }
.fam-xp i.f5 { width: 25%; }
.fam-xp i.f6 { width: 30%; }
.fam-xp i.f7 { width: 35%; }
.fam-xp i.f8 { width: 40%; }
.fam-xp i.f9 { width: 45%; }
.fam-xp i.f10 { width: 50%; }
.fam-xp i.f11 { width: 55%; }
.fam-xp i.f12 { width: 60%; }
.fam-xp i.f13 { width: 65%; }
.fam-xp i.f14 { width: 70%; }
.fam-xp i.f15 { width: 75%; }
.fam-xp i.f16 { width: 80%; }
.fam-xp i.f17 { width: 85%; }
.fam-xp i.f18 { width: 90%; }
.fam-xp i.f19 { width: 95%; }
.fam-xp i.f20 { width: 100%; }
.fam-xp-txt { margin: 0; font-size: .74rem; font-weight: 700; color: rgba(255, 255, 255, .7); }
.fam-xp-txt small { margin-left: 6px; color: #8ef05a; }
.fam-desc { margin: 0 0 12px; padding: 10px 12px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, .25); font-size: .88rem; line-height: 1.35; overflow-wrap: anywhere; }
.fam-intro, .fam-share { margin: 0 0 12px; font-size: .86rem; line-height: 1.35; color: rgba(255, 255, 255, .8); }
.fam-share { margin-top: 10px; font-size: .78rem; color: rgba(255, 255, 255, .6); }
.fam-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: .84rem; font-weight: 700; }
.fam-hint.is-lock { background: rgba(255, 79, 126, .14); box-shadow: inset 0 0 0 1px rgba(255, 79, 126, .45); }
.fam-hint.is-ok { background: rgba(142, 240, 90, .14); box-shadow: inset 0 0 0 1px rgba(142, 240, 90, .45); }
.fam-hint .ico { flex: none; font-size: 18px; }
.fam-apply { margin-bottom: 12px; }
.fam-apply .forum-form { margin: 0; }
.fam-tabs { margin: 4px 0 12px; }
.fam-tabs .rank-tab { position: relative; }
.fam-badge { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--edge); border-radius: 999px; background: #ff3b5c; color: #fff; font-size: .7rem; line-height: 16px; }
.fam-members, .fam-apps, .fam-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fam-member, .fam-app { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 10px; padding: 6px 10px 6px 6px; border: 2px solid var(--edge); border-radius: 14px; background: linear-gradient(180deg, #2c1a44, #1a0f2a); box-shadow: 0 3px 0 var(--edge); }
.fam-member.is-me { border-color: #7fdc4e; background: linear-gradient(180deg, #1f6b3c, #15502c); }
.fam-app { grid-template-columns: minmax(0, 1fr) auto; }
.fam-who { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fam-who .pava { width: 36px; height: 36px; flex: none; }
.fam-who .pava-in { font-size: 1.05rem; }
.fam-who-txt { display: grid; min-width: 0; }
.fam-who-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.fam-who-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: rgba(255, 255, 255, .65); }
.fam-role { padding: 2px 8px; border: 2px solid var(--edge); border-radius: 8px; font-size: .7rem; font-weight: 900; text-transform: uppercase; background: rgba(255, 255, 255, .12); }
.fam-role.r-boss { background: linear-gradient(180deg, #ffd96a, #e09a1c); color: #2a1600; }
.fam-role.r-underboss { background: linear-gradient(180deg, #c3a6ff, #7b4fe0); }
.fam-given { display: grid; justify-items: end; line-height: 1.05; }
.fam-given b { font-size: .86rem; }
.fam-given small { font-size: .64rem; color: rgba(255, 255, 255, .6); }
.fam-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.fam-app .fam-acts { grid-column: auto; }
.fam-acts form { margin: 0; }
/* Petits boutons d'action : liseré clair teinté + anneau sombre (lisibles sur fond sombre). */
.fam-act { padding: 4px 10px; border: 2px solid var(--edge); border-radius: 9px; background: linear-gradient(180deg, #4a3a6e, #2e2148); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 2px 0 var(--edge); color: #fff; font: inherit; font-size: .74rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; cursor: pointer; }
.fam-act:hover { filter: brightness(1.15); }
.fam-act.is-up { background: linear-gradient(180deg, #5fcf3e, #2a8a24); box-shadow: inset 0 0 0 1px rgba(200, 255, 180, .45), 0 2px 0 var(--edge); }
.fam-act.is-bad { background: linear-gradient(180deg, #ff5c72, #b3082a); box-shadow: inset 0 0 0 1px rgba(255, 190, 200, .45), 0 2px 0 var(--edge); }
.fam-act.is-gold { background: linear-gradient(180deg, #ffc531, #c97a0c); box-shadow: inset 0 0 0 1px rgba(255, 240, 190, .5), 0 2px 0 var(--edge); }
.fam-app-msg { grid-column: 1 / -1; margin: 0; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); font-size: .82rem; font-style: italic; overflow-wrap: anywhere; }
.fam-empty { margin: 12px 0; text-align: center; color: rgba(255, 255, 255, .6); font-size: .88rem; }
.fam-leave { display: flex; justify-content: center; margin-top: 16px; }
.fam-new { margin-bottom: 14px; }
.fam-new-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; }
.fam-tag-field input { text-transform: uppercase; }
.fam-check { display: flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 700; cursor: pointer; }
.fam-check input { width: 18px; height: 18px; accent-color: #7fdc4e; }
.fam-search { display: flex; gap: 8px; margin: 4px 0 10px; }
.fam-search input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 2px solid var(--edge); border-radius: 10px; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; }
.fam-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 12px 7px 8px; border: 2px solid var(--edge); border-radius: 14px; background: linear-gradient(180deg, #2c1a44, #1a0f2a); box-shadow: 0 3px 0 var(--edge); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fam-row:hover { filter: brightness(1.12); }
.fam-row-txt { flex: 1; display: grid; min-width: 0; }
.fam-row-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-row-txt small { font-size: .74rem; color: rgba(255, 255, 255, .65); }
/* HUD : tag de la famille (cliquable → vue famille). */
.hud-family.has-family { cursor: pointer; }
.hud-family .fam-tag { color: #ffc531; margin-right: 4px; }
@media (max-width: 520px) {
    .fam-head { gap: 10px; }
    .fam-crest.is-big { min-width: 60px; height: 54px; }
    .fam-crest.is-big b { font-size: 1.2rem; }
    .fam-member { grid-template-columns: minmax(0, 1fr) auto; }
    .fam-given { display: none; }
    .fam-new-row { grid-template-columns: minmax(0, 1fr) 90px; }
}
/* Profil : famille du joueur (cliquable → sa fiche de famille). */
.prof-fam { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.prof-fam b { color: #ffc531; }
.prof-fam:hover { text-decoration: none; filter: brightness(1.2); }
/* Pastille sur un bâtiment de la carte (Ambassade : candidatures à traiter) : position sur
   la case portée par le marqueur MapLibre ; masquée en vue Ville comme les comptes à rebours. */
.bld-badge { pointer-events: none; }
.bld-badge .chat-badge { position: static; animation: badge-bounce 6s cubic-bezier(.28, .84, .42, 1) infinite; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .bld-badge .chat-badge { animation: none; } }
body[data-mode="world"] .bld-badge { display: none; }
/* Pastilles de notification (nombres) : TOUJOURS un contour de texte léger. */
.chat-badge, .chat-tab-badge, .phone-notif, .phone-badge, .skill-notif, .forum-unread-badge, .fam-badge { -webkit-text-stroke: 2px var(--edge); paint-order: stroke fill; }
/* Raccourci de l'Ambassade : la pastille des candidatures rebondit comme celle du chat. */
.shortcut-btn > .chat-badge:not(.shortcut-ready) { animation: badge-bounce 6s cubic-bezier(.28, .84, .42, 1) infinite; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .shortcut-btn > .chat-badge:not(.shortcut-ready) { animation: none; } }
/* Familles : entraide (coffre commun, versements, journal, renforts). */
.fam-vault { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.fam-vault li { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 2px solid var(--edge); border-radius: 12px; background: linear-gradient(180deg, #2c1a44, #1a0f2a); box-shadow: 0 3px 0 var(--edge); }
.fam-vault .res-img { width: 34px; height: 34px; }
.fam-vault b { max-width: 100%; overflow: hidden; font-size: .95rem; white-space: nowrap; }
.fam-vault small { font-size: .66rem; color: rgba(255, 255, 255, .6); }
.fam-move { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 4px; }
.fam-move select, .fam-move input { height: 34px; min-width: 0; padding: 0 10px; border: 2px solid var(--edge); border-radius: 10px; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: .85rem; }
.fam-move select { flex: 0 1 auto; }
.fam-move input { flex: 1 1 110px; }
.fam-move .fam-act { height: 34px; }
.fam-move .form-error { flex-basis: 100%; margin: 0; }
.fam-log { display: grid; gap: 3px; margin: 8px 0 14px; padding: 0; list-style: none; font-size: .78rem; color: rgba(255, 255, 255, .75); }
.fam-log li { display: flex; align-items: center; gap: 6px; }
.fam-log .res-img { width: 18px; height: 18px; }
.fam-reinfs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fam-reinf { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--edge); border-radius: 14px; background: linear-gradient(180deg, #1d2c4a, #121b30); box-shadow: 0 3px 0 var(--edge); }
.fam-reinf.is-mine { background: linear-gradient(180deg, #2c1a44, #1a0f2a); }
.fam-reinf-txt { flex: 1; display: grid; min-width: 0; }
.fam-reinf-txt small { font-size: .74rem; color: rgba(255, 255, 255, .7); overflow-wrap: anywhere; }
.fam-reinf-time b { color: #8ef05a; font-variant-numeric: tabular-nums; }
.fam-act.is-reinf { background: linear-gradient(180deg, #3d9bff, #1f5fc4); box-shadow: inset 0 0 0 1px rgba(190, 220, 255, .5), 0 2px 0 var(--edge); }
@media (max-width: 520px) { .fam-vault { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Onglets de la famille (jusqu'à 5 pour le Parrain) : en mobile, largeur selon le libellé,
   texte réduit, et défilement horizontal en dernier recours (jamais d'onglet coupé ou caché). */
/* Libellés un peu plus petits ; en mobile, picto AU-DESSUS du libellé (onglet sur 2 lignes) :
   les 5 onglets tiennent sans rien couper ni cacher. */
.fam-tabs.seg .rank-tab { font-size: .8rem; }
@media (max-width: 520px) {
    /* Mobile : une seule ligne, libellés seuls (sans picto), texte réduit ; largeur selon le libellé. */
    .fam-tabs.seg { grid-auto-columns: auto; gap: 2px; }
    .fam-tabs.seg .rank-tab { padding: 0 6px; font-size: .64rem; white-space: nowrap; }
    .fam-tabs.seg .rank-tab .ico { display: none; }
}
@media (min-width: 521px) { .fam-tabs .rank-tab .ico { display: none; } } /* libellés seuls partout */
@media (max-width: 380px) { .fam-tabs.seg .rank-tab { padding: 0 4px; font-size: .58rem; } }
/* Pastille jaune : troupes parties en renfort (raccourci de l'Ambassade, onglet « Renforts »). */
.chat-badge.is-yellow, .fam-badge.is-yellow { background: linear-gradient(180deg, #ffe066, #f0a500); color: #fff; }
.chat-badge.is-left { left: -8px; right: auto; }
/* Pastille des troupes : renforts de la famille présents chez lui (« +N », bleu famille). */
.crew-reinf { position: absolute; top: -7px; left: -6px; display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border: 2px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #6db8ff, #1f5fc4); color: #fff; font-size: .66rem; font-weight: 900; line-height: 1; -webkit-text-stroke: 2px var(--edge); paint-order: stroke fill; box-shadow: 0 2px 0 var(--edge); }
/* Mon équipe (troupes) : renforts reçus de la famille. */
.crew-reinfs { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.crew-reinfs li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 10px; border: 2px solid var(--edge); border-radius: 12px; background: linear-gradient(180deg, #1d2c4a, #121b30); font-size: .8rem; font-weight: 700; }
.crew-reinfs .ico { color: #6db8ff; font-size: 16px; }
.crew-reinfs small { margin-left: auto; color: rgba(255, 255, 255, .7); }
.crew-reinfs b { color: #8ef05a; font-variant-numeric: tabular-nums; }
/* Familles : guerre (bandeau, propositions, historique, déclaration). */
.fam-war { display: grid; justify-items: center; gap: 4px; margin: 0 0 12px; padding: 10px 12px; border: 3px solid var(--edge); border-radius: 14px; background: linear-gradient(180deg, #5a1626, #2a0b16); box-shadow: inset 0 0 0 1px rgba(255, 120, 140, .45), 0 3px 0 var(--edge); text-align: center; }
.fam-war.is-proposal { background: linear-gradient(180deg, #4a2a10, #24130a); box-shadow: inset 0 0 0 1px rgba(255, 190, 120, .45), 0 3px 0 var(--edge); }
.fam-war-title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .9rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.fam-war-title .ico { flex: none; font-size: 18px; color: #ff9a2e; }
.fam-war-score { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 2rem; font-weight: 900; line-height: 1; -webkit-text-stroke: 5px var(--edge); paint-order: stroke fill; }
.fam-war-score .is-me { color: #8ef05a; }
.fam-war-score i { font-style: normal; font-size: 1.2rem; color: rgba(255, 255, 255, .6); }
.fam-war-meta { margin: 0; font-size: .76rem; color: rgba(255, 255, 255, .8); }
.fam-war-meta b { color: #ffc531; font-variant-numeric: tabular-nums; }
.fam-war .fam-acts { justify-content: center; }
.fam-hint.is-war { background: rgba(255, 154, 46, .16); box-shadow: inset 0 0 0 1px rgba(255, 154, 46, .5); }
.fam-war-form .fam-act { display: inline-flex; align-items: center; gap: 5px; }
.fam-war-res.is-won .ico { color: #8ef05a; }
.fam-war-res.is-lost .ico { color: #ff5c72; }
.fam-label { margin-top: 14px; }
/* Pastille des troupes : unités parties en renfort (jaune, en bas à gauche). */
.crew-out { position: absolute; bottom: -6px; left: -6px; display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border: 2px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #ffe066, #f0a500); color: #fff; font-size: .66rem; font-weight: 900; line-height: 1; -webkit-text-stroke: 2px var(--edge); paint-order: stroke fill; box-shadow: 0 2px 0 var(--edge); }
.crew-reinfs li.is-out { background: linear-gradient(180deg, #4a3a10, #2a2008); }
.crew-reinfs li.is-out .ico { color: #ffd23f; }
.crew-reinfs form { margin: 0; }
.fam-war-meta.is-bad { color: #ff8a9a; font-weight: 800; }
/* Liens vers les documents légaux (inscription, boutique, réglages du téléphone). */
.check-link, .shop-legal { color: rgba(255, 255, 255, .7); text-decoration: underline; text-underline-offset: 2px; }
.phone-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 14px 8px 4px; font-size: .74rem; }
.phone-legal a { color: rgba(255, 255, 255, .55); text-decoration: none; }
.phone-legal a:hover { color: #fff; }
/* ===== Capacités du Héros : effets visuels dans l'arène (fight.js → abilityFx) ===== */
.fight-side { position: relative; }
.fight-ability-ico { display: grid; place-items: center; width: 46px; height: 46px; margin-right: 14px; color: #fff; font-size: 36px; filter: drop-shadow(0 3px 0 var(--edge)) drop-shadow(1.5px 0 0 var(--edge)) drop-shadow(-1.5px 0 0 var(--edge)); }
.fight-ability-ico .ico { width: 1em; height: 1em; }
@media (max-width: 640px) { .fight-ability-ico { width: 32px; height: 32px; margin-right: 8px; font-size: 26px; } }
.fight-fx { position: absolute; inset: -6px; z-index: 6; border-radius: 22px; overflow: hidden; pointer-events: none; animation: fx-in .25s ease-out both; transition: opacity .35s; }
.fight-fx.is-out { opacity: 0; }
@keyframes fx-in { from { opacity: 0; } to { opacity: 1; } }
/* Embuscade : trois coups de lame. */
.fx-ambush i { position: absolute; left: -10%; width: 120%; height: 7px; border-radius: 4px; background: linear-gradient(90deg, transparent, #fff 25%, #ff3b4e 65%, transparent); box-shadow: 0 0 16px #ff3b4e; transform: rotate(-22deg) scaleX(0); transform-origin: left center; animation: fx-slash .32s ease-out forwards; }
.fx-ambush i:nth-child(1) { top: 22%; }
.fx-ambush i:nth-child(2) { top: 48%; animation-delay: .12s; }
.fx-ambush i:nth-child(3) { top: 74%; animation-delay: .24s; }
@keyframes fx-slash { to { transform: rotate(-22deg) scaleX(1); } }
/* Onde de choc : anneau doré qui balaie le camp + éclair. */
.fx-shock { background: radial-gradient(circle at 50% 50%, rgba(255, 220, 120, .35), transparent 60%); }
.fx-shock::before { content: ''; position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border: 7px solid #ffd23f; border-radius: 50%; box-shadow: 0 0 30px #ffb020, inset 0 0 20px #ffb020; animation: fx-ring .7s ease-out forwards; }
@keyframes fx-ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(7); opacity: 0; } }
/* Gel du temps : givre sur le camp figé. */
.fx-freeze { background: linear-gradient(135deg, rgba(170, 225, 255, .38), rgba(255, 255, 255, .08) 45%, rgba(170, 225, 255, .3)), radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .6) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .5) 0 2px, transparent 3px), radial-gradient(circle at 45% 85%, rgba(255, 255, 255, .5) 0 2px, transparent 3px); box-shadow: inset 0 0 0 3px rgba(190, 235, 255, .9), inset 0 0 40px rgba(160, 220, 255, .6); animation: fx-in .25s ease-out both, fx-frost 1.6s ease-in-out infinite alternate; }
@keyframes fx-frost { to { filter: brightness(1.25); } }
/* Frénésie : lignes de vitesse. */
.fx-frenzy { background: repeating-linear-gradient(100deg, transparent 0 26px, rgba(255, 210, 63, .32) 26px 30px); background-size: 200% 100%; box-shadow: inset 0 0 0 3px rgba(255, 210, 63, .8); animation: fx-in .25s ease-out both, fx-speed .45s linear infinite; }
@keyframes fx-speed { from { background-position: 0 0; } to { background-position: -112px 0; } }
/* Rage : voile rouge qui pulse. */
.fx-rage { background: radial-gradient(ellipse at center, transparent 35%, rgba(255, 40, 60, .5)); box-shadow: inset 0 0 0 3px rgba(255, 59, 78, .9); animation: fx-in .25s ease-out both, fx-pulse .5s ease-in-out infinite alternate; }
@keyframes fx-pulse { from { opacity: .55; } to { opacity: 1; } }
/* Forteresse : rempart bleu. */
.fx-fortress { background: repeating-linear-gradient(90deg, rgba(143, 208, 255, .16) 0 18px, transparent 18px 36px); box-shadow: inset 0 0 0 5px #8fd0ff, inset 0 0 30px rgba(143, 208, 255, .55); }
/* Bouclier : bulle bleue (jusqu'à la fin). */
.fx-shield { inset: -14px -10px; border-radius: 50% / 38%; background: radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(120, 190, 255, .28) 78%, rgba(190, 225, 255, .55)); box-shadow: 0 0 24px rgba(120, 190, 255, .5); animation: fx-in .3s ease-out both, fx-bubble 2.4s ease-in-out infinite alternate; }
@keyframes fx-bubble { to { transform: scale(1.02); filter: brightness(1.2); } }
/* Dernier carré : vignette orange qui pulse (jusqu'à la fin). */
.fx-last { background: radial-gradient(ellipse at center, transparent 40%, rgba(255, 122, 26, .5)); box-shadow: inset 0 0 0 3px #ff7a1a; animation: fx-in .25s ease-out both, fx-pulse .35s ease-in-out infinite alternate; }
/* Second souffle : particules vertes qui montent. */
.fx-wind { background: linear-gradient(0deg, rgba(110, 231, 160, .3), transparent 60%); }
.fx-wind i { position: absolute; bottom: -10px; left: var(--x); width: 9px; height: 9px; border-radius: 50%; background: #8ef05a; box-shadow: 0 0 10px #8ef05a; animation: fx-rise 1.2s ease-out var(--d) forwards; }
@keyframes fx-rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-260px); opacity: 0; } }
/* Coup de grâce : tampon « K.O. » sur la pile achevée. */
.fight-pile { position: relative; }
.fight-ko { position: absolute; left: 50%; top: 50%; z-index: 7; color: #ff3b4e; font-size: 2.4rem; text-shadow: 0 0 18px rgba(255, 59, 78, .8); line-height: 1; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; transform: translate(-50%, -50%) rotate(-14deg); animation: fx-stamp .3s cubic-bezier(.2, 1.6, .4, 1) both; pointer-events: none; }
@keyframes fx-stamp { from { transform: translate(-50%, -50%) rotate(-14deg) scale(3); opacity: 0; } to { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fight-fx, .fight-fx *, .fight-fx::before, .fight-ko { animation: none !important; } }
/* Portraits au nouveau gabarit (tools/build-troop-avatars.php : image carrée 420, cercle de découpe
   de 364 calé en bas) : l'image fait 420/364 de la largeur du disque, centrée et calée en bas, pour
   que son cercle coïncide avec le disque de la carte ; la tête et les accessoires dépassent. */
.unit-ava.is-wide img,
.crew-sheet--troops .unit-ava.is-wide img,
.detail-pop .unit-ava.is-wide img,
.crew-sheet--troops .detail-pop .unit-ava.is-wide img { width: 115.4%; height: auto; max-width: none; aspect-ratio: 1; margin: 0 -7.7%; object-fit: contain; }

/* --------------------------------------------------------------------------
   Récompense quotidienne (vue `daily`) : 7 cartes, jour 7 en grand (or).
   -------------------------------------------------------------------------- */
.sheet--daily { width: min(860px, 100%); }
/* Bonus du jour : 7 cartes dans une bande qui défile (centrée sur le jour à l'ouverture), scroll-snap. */
.daily-track { display: flex; gap: 12px; margin: 16px -4px 0; padding: 14px 6px 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; list-style: none; }
.daily-card { position: relative; flex: 0 0 104px; display: grid; grid-template-rows: auto auto 1fr; justify-items: center; gap: 6px; min-height: 140px; padding: 14px 8px 12px; border: 3px solid var(--edge); border-radius: 18px; background: linear-gradient(180deg, #34204f, #1c1030); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 4px 0 var(--edge); scroll-snap-align: center; text-align: center; }
.daily-card-day { margin: 0; color: #fff; font-size: .86rem; font-weight: 900; font-style: italic; text-transform: uppercase; -webkit-text-stroke: 3.5px var(--edge); paint-order: stroke fill; }
.daily-card-tag { position: absolute; top: -12px; left: 50%; translate: -50% 0; padding: 2px 10px; border: 2px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #8ef05a, #2fa82a); color: #fff; font-size: .66rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.daily-card-tag.is-gold { background: linear-gradient(180deg, #ffd96a, #e09a1c); }
.daily-card-gifts { display: grid; align-content: center; gap: 3px; width: 100%; margin: 0; padding: 0; list-style: none; }
.daily-card-gifts li { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; }
.daily-card-gifts b { min-width: 0; overflow: hidden; color: #fff; font-size: .8rem; font-weight: 900; white-space: nowrap; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.daily-ico { width: 19px; height: 19px; flex: none; filter: drop-shadow(0 2px 0 var(--edge)); }
.daily-card.is-today { flex-basis: 132px; border-color: #3ddc84; background: linear-gradient(180deg, #1f6b3c, #13401f); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), 0 4px 0 var(--edge), 0 0 26px rgba(61, 220, 132, .55); animation: daily-pulse 1.6s ease-in-out infinite; }
.daily-card.is-big { flex-basis: 140px; border-color: #e09a1c; background: radial-gradient(120% 80% at 50% 0%, rgba(255, 197, 49, .35), transparent 60%), linear-gradient(180deg, #4a2a1a, #26140c); }
.daily-card.is-big.is-today { background: radial-gradient(120% 80% at 50% 0%, rgba(255, 197, 49, .4), transparent 60%), linear-gradient(180deg, #1f6b3c, #13401f); }
.daily-card.is-done > :not(.daily-card-stamp) { filter: saturate(.35) brightness(.7); }
.daily-card-stamp { position: absolute; top: -10px; right: -8px; display: grid; place-items: center; pointer-events: none; }
.daily-card-stamp .ico { width: 32px; height: 32px; padding: 6px; border: 3px solid var(--edge); border-radius: 50%; background: #2fa82a; color: #fff; box-shadow: 0 3px 0 var(--edge); }
.daily-card-lock { position: absolute; right: 8px; bottom: 8px; color: rgba(255, 255, 255, .45); }
.daily-card-lock .ico { width: 16px; height: 16px; }
.daily-card.is-just { animation: daily-just .7s cubic-bezier(.3, 1.6, .5, 1); }
.daily-cta { margin-top: 14px; }
.daily-wait { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; color: rgba(255, 255, 255, .8); font-weight: 700; }
.daily-wait b { color: #ffc531; font-size: 1.15rem; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.daily-hint { margin: 10px 0 0; color: rgba(255, 255, 255, .6); font-size: .86rem; text-align: center; }
/* Grand écran : les 7 jours tiennent sans défiler (jamais de justify-content: center sur une bande qui déborde : le début devenait inaccessible). */
@media (min-width: 900px) { .daily-card, .daily-card.is-today, .daily-card.is-big { flex: 1 1 0; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .daily-card.is-today, .daily-card.is-just { animation: none; } }


/* --------------------------------------------------------------------------
   Objectifs guidés de Carla : pastille au-dessus de l'équipe + vue `guide`.
   -------------------------------------------------------------------------- */
.guide-chip {
    /* Hors de la grille (posée au-dessus des pastilles) : sa largeur n'élargit pas la colonne de l'équipe. */
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 260px;
    height: 48px;
    padding: 0 14px 0 2px;
    border: var(--edge-w) solid var(--edge);
    border-radius: 999px;
    background: linear-gradient(115deg, rgba(255, 79, 126, .9), rgba(255, 115, 82, .9) 45%, rgba(255, 154, 46, .9));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 3px 0 var(--edge), 0 8px 18px rgba(0, 0, 0, .35);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.guide-chip:hover { transform: translateY(-2px); }
.guide-face { flex: none; width: auto; height: calc(100% - 4px); aspect-ratio: 1; border: 2px solid var(--edge); border-radius: 50%; object-fit: cover; }
.guide-txt { display: grid; min-width: 0; line-height: 1.05; }
.guide-txt small { color: rgba(255, 255, 255, .85); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.guide-txt b { overflow: hidden; font-size: .88rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.guide-badge {
    position: absolute;
    top: -6px;
    left: 26px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--edge);
    border-radius: 50%;
    background: #2fa82a;
    color: #fff;
    font-size: 12px;
}
.guide-chip.is-done { background: linear-gradient(115deg, #22b35e, #3ddc84 55%, #a6e85a); animation: guide-pulse 1.4s ease-in-out infinite; }
@keyframes guide-pulse { 50% { transform: scale(1.06); } }
/* Écran étroit : visage seul (le titre est dans la fenêtre). */
@media (max-width: 640px) {
    .guide-chip { height: var(--rb, 42px); bottom: calc(100% + var(--rg, 6px)); }
}
@media (max-width: 999px) {
    .guide-chip { width: auto; aspect-ratio: 1; padding: 0; border-radius: 50%; justify-content: center; }
    .guide-face { height: calc(100% - 6px); border: 0; }
    .guide-txt { display: none; }
    .guide-badge { left: auto; right: -6px; }
}
@media (prefers-reduced-motion: reduce) { .guide-chip.is-done { animation: none; } }

.sheet--guide { width: min(560px, 100%); }
.guide-bar { margin: 14px 0 0; }
.guide-reward { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.guide-reward li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 4px;
    border: 2px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
}
.guide-reward b { color: #fff; font-weight: 900; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.guide-ico { width: 28px; height: 28px; }
.guide-lock { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: #ffc531; font-weight: 700; }
.guide-cta { margin-top: 16px; }

/* --------------------------------------------------------------------------
   Hôpital (vue `hospital`) : effets, troupes blessées, « Tout soigner ».
   -------------------------------------------------------------------------- */
.sheet--hospital { width: min(620px, 100%); }
.hosp-perks { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.hosp-perks li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
    color: rgba(255, 255, 255, .6);
    font-size: .88rem;
    font-weight: 800;
}
.hosp-perks li.is-on { border-color: rgba(61, 220, 132, .55); background: rgba(61, 220, 132, .14); color: #fff; }
.hosp-perks li.is-on .ico { color: #3ddc84; }
.hosp-empty { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 0 6px; color: #8df27c; font-weight: 800; }
.hosp-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.hosp-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 6px 10px 6px 6px;
    border: 2px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: rgba(0, 0, 0, .22);
}
.unit-ava.hosp-ava { width: 56px; height: 66px; margin: 0; }
.unit-ava.hosp-ava::before { height: 56px; border-width: 2px; }
.hosp-main { position: relative; display: grid; gap: 4px; min-width: 0; }
.hosp-name { overflow: hidden; margin: 0; color: #fff; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.hosp-name small { color: rgba(255, 255, 255, .7); font-size: .8em; }
.ava-hp.hosp-hp { position: relative; left: auto; bottom: auto; width: 100%; height: 10px; translate: none; cursor: default; }
.hosp-pct { margin: 0; color: rgba(255, 255, 255, .7); font-size: .78rem; font-weight: 700; }
.hosp-btn { display: grid; justify-items: center; gap: 2px; min-width: 250px; padding: 6px 12px; }
.hosp-btn small { font-size: .7rem; text-transform: uppercase; }
.hosp-cost .btn-cost { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
.hosp-all { margin-top: 14px; }
.hosp-all .btn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; }
@media (max-width: 480px) {
    .hosp-row { grid-template-columns: auto minmax(0, 1fr); }
    .hosp-act { grid-column: 1 / -1; }
    .hosp-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Radar (vue `radar`) : joueurs des autres villes dans la fourchette de points.
   -------------------------------------------------------------------------- */
.sheet--radar { width: min(600px, 100%); }
.radar-hint { margin: 10px 0 0; color: rgba(255, 255, 255, .72); font-size: .9rem; line-height: 1.35; }
.radar-city { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; color: #fff; font-weight: 900; text-transform: uppercase; }
.radar-list { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.radar-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border: 2px solid rgba(61, 220, 132, .3);
    border-radius: 14px;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}
.radar-row:hover, .radar-row:focus-visible { border-color: #3ddc84; transform: translateX(3px); }
.radar-row.is-revenge { border-color: rgba(255, 59, 92, .7); background: rgba(255, 59, 92, .12); }
.radar-row.is-done { opacity: .5; }
.radar-ava { width: 40px; height: 40px; flex: none; }
.radar-who { display: grid; min-width: 0; }
.radar-who strong { overflow: hidden; color: #fff; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.radar-who strong small { color: #8fc2ff; }
.radar-who > small { color: rgba(255, 255, 255, .65); font-size: .8rem; font-weight: 700; }
.radar-rev { color: #ff7a8e; }
.radar-pts { display: grid; justify-items: end; color: #fff; font-weight: 900; line-height: 1.05; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.radar-pts small { color: rgba(255, 255, 255, .6); font-size: .7rem; text-transform: uppercase; -webkit-text-stroke: 0; }
/* Ambassade : accès « Autres villes » (radar) en haut de la vue famille. */
.sheet--family { position: relative; }
.fam-cities { position: absolute; top: 22px; right: 76px; z-index: 2; width: auto; margin: 0; padding-inline: 14px; }
@media (max-width: 640px) { .fam-cities { position: static; width: 100%; margin: 8px 0 0; } }

/* --------------------------------------------------------------------------
   Profil : signaler un joueur + bloc de modération (équipe).
   -------------------------------------------------------------------------- */
.prof-report { margin-top: 14px; }
.prof-report summary { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .6); font-size: .84rem; font-weight: 800; text-transform: uppercase; cursor: pointer; list-style: none; }
.prof-report summary::-webkit-details-marker { display: none; }
.prof-report summary:hover { color: #ff9aa8; }
.prof-report-form, .prof-mod-ban { display: flex; gap: 8px; margin-top: 8px; }
.prof-report-form input, .prof-mod-ban input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 2px solid var(--edge); border-radius: 10px; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; user-select: text; }
.prof-mod { margin-top: 16px; padding: 12px; border: 2px dashed rgba(61, 155, 255, .55); border-radius: 14px; background: rgba(61, 155, 255, .08); }
.prof-mod-title { display: flex; align-items: center; gap: 6px; margin: 0; color: #8fc2ff; font-weight: 900; text-transform: uppercase; }
.prof-mod-n { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #e2283c; color: #fff; font-size: .74rem; -webkit-text-stroke: 2px var(--edge); paint-order: stroke fill; }
.prof-mod-state { margin: 8px 0 0; color: rgba(255, 255, 255, .8); font-weight: 700; }
.prof-mod-state .is-bad { color: #ff7a8e; }
.prof-mod-state .is-warn { color: #ffc531; }
.prof-mod-note { margin: 6px 0 0; color: rgba(255, 255, 255, .6); font-size: .86rem; }
.prof-mod-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.prof-mod-ban { margin-top: 10px; }
/* File de modération (vue `modqueue`). */
.sheet--modq { width: min(640px, 100%); }
.modq-list { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.modq-item { padding: 10px; border: 2px solid rgba(255, 59, 92, .35); border-radius: 14px; background: rgba(0, 0, 0, .25); }
.modq-reports { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; font-size: .86rem; }
.modq-reports li { color: rgba(255, 255, 255, .85); }
.modq-reports small { color: rgba(255, 255, 255, .55); }
.modq-reports span { display: block; color: #ffd9a8; font-style: italic; }
.modq-ctx { margin-top: 8px; font-size: .84rem; }
.modq-ctx summary { color: #8fc2ff; font-weight: 800; cursor: pointer; }
.modq-ctx-title { margin: 6px 0 2px; color: rgba(255, 255, 255, .6); font-weight: 800; text-transform: uppercase; font-size: .72rem; }
.modq-ctx ul { display: grid; gap: 3px; margin: 0; padding: 0 0 0 10px; list-style: none; border-left: 2px solid rgba(255, 255, 255, .15); overflow-wrap: anywhere; }
.modq-ctx small { color: rgba(255, 255, 255, .5); }

/* --------------------------------------------------------------------------
   Autres villes : flèche de l'onglet Ville (radar de l'ambassade) + menu des villes.
   -------------------------------------------------------------------------- */
.viewswitch-chev {
    display: inline-grid;
    place-items: center;
    align-self: stretch;
    margin: 3px -6px 3px 8px; /* toute la hauteur de la pastille, sans mordre sur son contour sombre */
    padding: 0 2px 0 9px;
    /* Séparateur sur toute la hauteur : double filet (foncé puis clair), opacité réduite. */
    border-left: 1px solid rgba(26, 13, 34, .32);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .38);
    cursor: pointer;
}
.viewswitch .viewswitch-chev .ico { font-size: 1.45rem; rotate: -90deg; translate: 0 -1px; scale: .9; filter: drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 -1px 0 var(--edge)) drop-shadow(1px 0 0 var(--edge)) drop-shadow(-1px 0 0 var(--edge)); transition: rotate .2s; }
.viewswitch-chev:hover .ico { scale: 1; } /* taille réelle au survol, réduite au repos : jamais agrandi au-delà de 1 (net) */
.viewswitch-chev[aria-expanded="true"] .ico { rotate: 90deg; }
.city-menu {
    position: fixed;
    left: var(--x, 16px);
    bottom: var(--y, 90px);
    z-index: 60;
    display: grid;
    gap: 4px;
    width: var(--w, 240px);
    padding: 8px;
    border: var(--edge-w) solid var(--edge);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 4px 0 var(--edge), 0 14px 30px rgba(0, 0, 0, .5);
    transform-origin: 100% 100%;
}
.city-menu-title { margin: 2px 6px 4px; color: rgba(255, 255, 255, .6); font-size: .74rem; font-weight: 800; text-transform: uppercase; }
.city-menu-item {
    display: grid;
    gap: 1px;
    padding: 8px 12px;
    border: 2px solid transparent;
    border-radius: 11px;
    background: rgba(0, 0, 0, .22);
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.city-menu-item b { font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.city-menu-item small { color: rgba(255, 255, 255, .6); font-size: .76rem; font-weight: 700; }
.city-menu-item:hover { border-color: rgba(255, 255, 255, .3); }
.city-menu-item.is-on { border-color: #ff9a2e; background: rgba(255, 154, 46, .16); }

/* Arène : cartes de troupes plus basses (avatar réduit, marges resserrées). */
.fight.is-battle .fight-piles { gap: 9px; }
.fight.is-battle .fight-pile { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding-top: 5px; padding-bottom: 5px; }
.fight.is-battle .fight-pile-ava { width: 54px; height: 54px; }
.fight.is-battle .fight-pile-info { gap: 5px; }
@media (min-width: 761px) {
    .fight.is-battle .fight-side--def .fight-pile { grid-template-columns: minmax(0, 1fr) 54px; padding-top: 5px; padding-bottom: 5px; }
}
@media (max-width: 760px) {
    .fight.is-battle .fight-piles { gap: 4px; }
    .fight.is-battle .fight-pile { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding-top: 3px; padding-bottom: 3px; }
    .fight.is-battle .fight-pile-ava { width: 32px; height: 32px; }
    .fight.is-battle .fight-pile-info { gap: 3px; }
}

/* Équipement libre à mettre : pastille jaune sur la pastille des troupes (bas droite) et point
   jaune sur la case d'équipement vide de « Mon équipe » qu'un objet de l'inventaire peut remplir. */
.crew-gear { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border: 2px solid var(--edge); border-radius: 50%; background: linear-gradient(180deg, #ffe066, #f0a500); box-shadow: 0 0 10px rgba(255, 210, 63, .7); animation: badge-bounce 2.4s cubic-bezier(.28, .84, .42, 1) infinite; transform-origin: 50% 100%; }
.unit-gear .gear-slot.has-free { border-color: rgba(255, 210, 63, .75); color: #ffe7a1; }
.gear-free-dot { position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border: 2px solid var(--edge); border-radius: 50%; background: linear-gradient(180deg, #ffe066, #f0a500); box-shadow: 0 0 10px rgba(255, 210, 63, .7); animation: badge-bounce 2.4s cubic-bezier(.28, .84, .42, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .crew-gear, .gear-free-dot { animation: none; } }

/* --------------------------------------------------------------------------
   Grands écrans : TOUTE l'interface (cadres + textes ensemble, jamais la carte) est agrandie
   par `zoom` — agrandir seulement les polices faisait déborder les cadres en pixels.
   1080p inchangé ; ≥ 1900 × 1000 : × 1,1 ; 1440p (≥ 2400 × 1200) : × 1,15 (choix du 12/10/2026, plafond 1,2).
   JS : coordonnées écran → diviser par uiZoom(el) pour positionner un élément zoomé.
   -------------------------------------------------------------------------- */
body.game { --ui: 1; }
/* Unités d'écran : sous `zoom`, Chrome multiplie aussi vw / vh (100vh zoomé > l'écran : fenêtres trop
   hautes, défilement et boutons collés en bas hors de l'écran). Toute la feuille utilise donc
   var(--u-vw) / var(--u-svh)… qui valent 1 vw / 1 svh, divisés par le zoom dans les éléments agrandis. */
:root { --u-vw: 1vw; --u-vh: 1vh; --u-svh: 1svh; --u-dvh: 1dvh; }
@media (min-width: 1900px) and (min-height: 1000px) { body.game { --ui: 1.1; } }
@media (min-width: 2400px) and (min-height: 1200px) { body.game { --ui: 1.15; } }
.world > :not(#map):not(.map-vignette),
#layer > *,
body.game > .chat,
body.game > .coach,
body.game > .toast,
body.game > .mission,
body.game > .city-menu,
body.game > .fight,
body.game > .march-pill,
body.game > .stat-float,
body.game > .spy-bar,
body.game > .move-bar,
body.game > .vac-bar,
body.game > .net-lost > .net-lost-card {
    zoom: var(--ui);
    --u-vw: calc(1vw / var(--ui)); --u-vh: calc(1vh / var(--ui));
    --u-svh: calc(1svh / var(--ui)); --u-dvh: calc(1dvh / var(--ui));
}
/* Chat ancré à droite : la carte et les fenêtres se décalent de sa largeur AGRANDIE. */
@media (min-width: 1360px) {
    body.game:has(> .chat:not([hidden]):not(.is-out)) #stage,
    body.game:has(> .chat:not([hidden]):not(.is-out)) #layer { right: calc(var(--chat-w) * var(--ui)); }
}

/* Compteur d'AMÉLIORATION sur la case (QG, banque) : bleu-violet + double chevron, pour ne pas le
   confondre avec le compteur de CONSTRUCTION (orange). */
.build-timer.is-upgrade { background: linear-gradient(115deg, #4aa8ff, #7a5cff 60%, #b05cff); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--edge), 0 0 16px rgba(122, 92, 255, .55); }
.build-timer-ico { flex: none; width: 1.05em; height: 1.05em; }

/* Inventaire : objet arrivé depuis la dernière visite (même point jaune que l'équipement à mettre). */
.inv-ico { position: relative; }
/* Objet arrivé depuis la dernière visite : en tête de liste, ligne surlignée en jaune + badge « Nouveau ». */
.inv-row.is-new { border-color: rgba(255, 210, 63, .85); box-shadow: inset 4px 0 0 var(--rar), 0 0 0 2px var(--edge), 0 0 16px rgba(255, 210, 63, .35); }
.inv-new-tag { display: inline-block; margin-right: 8px; padding: 1px 8px; border: 2px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #ffe066, #f0a500); color: #1a0f22; font-size: .66rem; font-weight: 900; line-height: 1.35; text-transform: uppercase; vertical-align: 2px; animation: badge-bounce 2.4s cubic-bezier(.28, .84, .42, 1) infinite; }
@media (prefers-reduced-motion: reduce) { .inv-new-tag { animation: none; } }

/* « Mon équipe » : vignettes sous le carrousel (seulement s'il déborde) → toucher = aller à la carte. */
.crew-thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 0; }
.crew-thumbs[hidden] { display: none; }
.crew-thumb {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: border-color .15s, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.crew-thumb.is-on { border-color: #ffc531; box-shadow: 0 0 0 2px var(--edge), 0 0 14px rgba(255, 197, 49, .45); transform: translateY(-2px); }
.unit-ava.crew-thumb-ava { width: 40px; height: 46px; margin: 0; }
.unit-ava.crew-thumb-ava::before { height: 40px; border-width: 2px; }
.crew-thumb b { position: absolute; right: -6px; bottom: -6px; padding: 1px 5px; border: 2px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #ff9a2e, #ff4f7e); color: #fff; font-size: .62rem; font-weight: 900; line-height: 1.2; -webkit-text-stroke: 2px var(--edge); paint-order: stroke fill; }
.crew-thumb-slot { display: grid; place-items: center; width: 34px; height: 34px; border: 2px dashed rgba(255, 255, 255, .3); border-radius: 50%; color: rgba(255, 255, 255, .6); }
.crew-thumb-slot .ico { font-size: 16px; }
/* Vignettes : portraits à la taille de la vignette (ancien gabarit des filles / narcos, illustration
   de groupe, et nouveau gabarit des troupes qui garde sa propre mise à l'échelle). */

.crew-thumb .unit-ava img { width: 40px; height: 46px; }
.crew-thumb .unit-ava.is-group img { width: 37px; height: 37px; margin-bottom: 1px; }
.crew-thumb .unit-ava.is-wide img { width: 115.4%; height: auto; margin: 0 -7.7%; }

/* Carrousels au doigt : défilement horizontal NATIF (fluide, libre, inertie et rebond du système) ;
   le glisser en JS de mountCarousel() ne sert plus qu'à la souris. */
@media (pointer: coarse) {
    .carousel, .build-list { touch-action: pan-x pan-y; }
    .build-list, .sheet--wide .build-list { -webkit-overflow-scrolling: touch; scroll-snap-type: none; }
    /* La PISTE doit recevoir le doigt : avec « pointer-events: none » (posé pour laisser passer les
       clics vers l'en-tête qu'elle chevauche), un glisser commencé entre / sous les cartes ne faisait
       rien, et Safari (iOS) ne fait pas défiler du tout un conteneur qui ignore les touchers. */
    .build-list { pointer-events: auto; }
    /* … donc les blocs cliquables de l'en-tête chevauché passent AU-DESSUS de la piste
       (construction : « Passer Premium » ; forge : état, aide, onglets des familles, inventaire). */
    .sheet-notice, .sheet-head, .forge-status, .forge-hint, .armory-fams { position: relative; z-index: 2; }
}

/* ---------- Boss de la ville (PvE coopératif) ---------- */
.sheet--boss { width: min(640px, 100%); }
.boss-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.boss-face { position: relative; flex: none; width: 104px; height: 104px; }
.boss-face img { width: 100%; height: 100%; border: 4px solid var(--edge); border-radius: 50%; background: #2a1438; object-fit: cover; box-shadow: 0 0 0 3px #ff3b5c, 0 0 28px rgba(255, 59, 92, .55); }
.boss-lvl { position: absolute; bottom: -6px; left: 50%; padding: 2px 9px; border: 2px solid var(--edge); border-radius: 999px; background: #d61f3a; color: #fff; font-size: .74rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); -webkit-text-stroke: 2px var(--edge); paint-order: stroke fill; }
.boss-head-txt { display: grid; flex: 1; gap: 6px; min-width: 0; }
.boss-flee, .boss-next { display: flex; align-items: center; gap: 6px; margin: 0; color: rgba(255, 255, 255, .75); font-size: .82rem; font-weight: 700; }
.boss-flee .ico, .boss-next .ico { width: 14px; height: 14px; }
.boss-flee b, .boss-next b { color: #ffd23f; }
.boss-bar { position: relative; height: 24px; border: 3px solid var(--edge); border-radius: 999px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.boss-bar-fill { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 999px; background: linear-gradient(180deg, #ff6b7f, #d61f3a 60%, #9e0f26); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); transition: width .6s ease; }
.boss-bar span { position: relative; display: block; color: #fff; font-size: .8rem; font-weight: 900; line-height: 18px; text-align: center; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.boss-pct { margin: 0; color: #ff9aa8; font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.boss-troops { margin-bottom: 8px; }
.boss-troops li.is-down { opacity: .4; }
.boss-skills { margin-bottom: 4px; }
.boss-rules { margin: 10px 0; color: #f1e8ff; font-size: .8rem; line-height: 1.4; }
.boss-mine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 10px; }
.boss-mine div { display: grid; gap: 2px; padding: 8px 6px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, .28); text-align: center; }
.boss-mine span { color: var(--muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.boss-mine b { color: #fff; font-size: 1.05rem; font-weight: 900; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.boss-reward { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 8px 10px; border: 2px solid rgba(255, 210, 63, .45); border-radius: 12px; background: rgba(255, 210, 63, .1); color: #fff2c4; font-size: .8rem; font-weight: 700; line-height: 1.35; }
.boss-reward .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #ffd23f; }
.boss-top-title { margin-top: 14px; }
.boss-top { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.boss-top li { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 6px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.boss-top li.is-me { border-color: rgba(142, 240, 90, .6); background: rgba(142, 240, 90, .1); }
.boss-top-n { flex: none; width: 22px; color: #ffd23f; font-weight: 900; text-align: center; }
.boss-top-who { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; text-align: left; }
.boss-top-who > span:last-child { overflow: hidden; color: #fff; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.boss-top-who em { color: #9fc4ff; font-style: normal; }
.boss-top .pava { width: 30px; height: 30px; }
.boss-top .pava-in { font-size: .95rem; }
.boss-top b { flex: none; color: #ff9aa8; font-weight: 900; }
.boss-none { display: grid; justify-items: center; gap: 8px; padding: 10px 0; text-align: center; }
.boss-none p { margin: 0; color: #f1e8ff; font-weight: 700; }
.boss-none-face { width: 96px; height: 96px; border: 4px solid var(--edge); border-radius: 50%; object-fit: cover; filter: grayscale(.85); opacity: .7; }
.boss-none .boss-next { justify-content: center; }
@media (max-width: 480px) {
    .boss-face { width: 80px; height: 80px; }
    .boss-mine b { font-size: .92rem; }
}
/* Marqueur du boss sur la carte (vue Ville) : gros portrait cerclé de rouge qui pulse, nom, vie. */
.boss-pin { z-index: 4; display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; }
.boss-pin-face { position: relative; display: block; width: 74px; height: 74px; border: 4px solid var(--edge); border-radius: 50%; background: #2a1438; box-shadow: 0 0 0 3px #ff3b5c, 0 6px 18px rgba(0, 0, 0, .6); transition: transform .18s; }
.boss-pin-face::after { content: ''; position: absolute; inset: -10px; border: 3px solid rgba(255, 59, 92, .8); border-radius: 50%; animation: boss-ring 1.8s ease-out infinite; pointer-events: none; }
.boss-pin-face img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.boss-pin:hover .boss-pin-face { transform: scale(1.08); }
.boss-pin-name { padding: 1px 9px; border: 2px solid var(--edge); border-radius: 999px; background: #d61f3a; color: #fff; font-size: .82rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.boss-pin-bar { position: relative; display: block; width: 78px; height: 9px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(0, 0, 0, .55); overflow: hidden; }
.boss-pin-bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(180deg, #ff6b7f, #d61f3a); }
@keyframes boss-ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .boss-pin-face::after { animation: none; opacity: .6; } }
.fight-boss { display: grid; justify-items: center; gap: 6px; margin: 4px 0 10px; }
.fight-boss-dmg { margin: 0; color: #fff; font-size: 1.1rem; font-weight: 900; text-align: center; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.fight-boss-bar { position: relative; display: block; width: min(280px, 100%); height: 14px; border: 3px solid var(--edge); border-radius: 999px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.fight-boss-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #ff6b7f, #d61f3a); }
.fight-boss-note { margin: 0; color: #f1e8ff; font-size: .82rem; font-weight: 700; text-align: center; }
.mis-boss { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 12px; padding: 6px 12px 6px 6px; border: 2px solid rgba(255, 59, 92, .75); border-radius: 14px; background: linear-gradient(90deg, rgba(214, 31, 58, .35), rgba(214, 31, 58, .12)); color: #fff; font: inherit; font-weight: 900; text-align: left; text-transform: uppercase; cursor: pointer; }
.mis-boss img { flex: none; width: 40px; height: 40px; border: 3px solid var(--edge); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #ff3b5c; }
.mis-boss span { flex: 1; min-width: 0; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.mis-boss .ico { flex: none; width: 18px; height: 18px; }
.mis-boss:hover { border-color: #ffd23f; }
.boss-pin-clock { position: absolute; bottom: -9px; left: 50%; padding: 1px 7px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(12, 6, 20, .88); color: #ffd23f; font-size: .72rem; font-weight: 900; line-height: 1.25; white-space: nowrap; transform: translateX(-50%); font-variant-numeric: tabular-nums; -webkit-text-stroke: 2px var(--edge); paint-order: stroke fill; z-index: 1; }
.boss-pin-face::after { z-index: 0; }
.boss-pin { gap: 7px; }

/* ---------- Mon compte : suppression (RGPD) ---------- */
.sheet--account { width: min(520px, 100%); }
.acc-warn { margin: 4px 0 14px; padding: 12px 14px; border: 2px solid rgba(255, 90, 106, .55); border-radius: 14px; background: rgba(214, 31, 58, .12); }
.acc-lead { margin: 0 0 8px; color: #fff; font-weight: 800; line-height: 1.4; }
.acc-list { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: #f1e8ff; font-size: .86rem; line-height: 1.4; }
.game .acc-export { margin: 0 0 16px; }
.game .acc-export .ico { width: 18px; height: 18px; margin-right: 8px; }
.acc-form { display: grid; gap: 12px; }
/* Réglages › Mon compte : lien d'export sans soulignement, corbeille sur pastille rouge. */
a.phone-row, a.phone-row:hover { color: inherit; text-decoration: none; }
.phone-row--danger .phone-tz-ico { background: linear-gradient(145deg, #ff7a8a, #d61f3a); }
a.phone-app, a.phone-app:hover { color: inherit; text-decoration: none; }

/* Pas de zoom au double-tap sur la page du jeu (le pincement est géré à part : viewport + app.js).
   « manipulation » garde le défilement ; la carte et les zones de dessin ont leur propre touch-action. */
html:has(body.game), body.game { touch-action: manipulation; }

/* Fenêtre d'évolution d'un bâtiment (tente → caserne…) : visuel du niveau visé en tête. */
.evo-pop-img { display: block; width: 150px; height: auto; margin: -8px auto 2px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
/* Nom du personnage (HUD) : ouvre son profil public. */
.hud-name[data-view] { cursor: pointer; transition: color .15s; }
.hud-name[data-view]:hover, .hud-name[data-view]:focus-visible { color: #ffd23f; outline: none; }

/* Shop des troupes : interrupteur « Stats de base » (valeurs du catalogue au niveau 1, sans
   compétences ni équipement). État porté par <html class="show-base-stats"> : il s'applique aussi
   à l'encart de recrutement (copie des stats) et reste d'une ouverture à l'autre (localStorage). */
.unit-stats .v-base { display: none; }
.show-base-stats .unit-stats .v-eff { display: none; }
.show-base-stats .unit-stats .v-base { display: inline; }
.show-base-stats .unit-stats > .is-boost dd { color: inherit; } /* valeurs de base : jamais en vert */
.stat-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px 0 6px;
    border: 2px solid rgba(214, 190, 255, .3);
    border-radius: 99px;
    background: rgba(0, 0, 0, .35);
    box-shadow: 0 0 0 2px var(--edge);
    color: rgba(255, 255, 255, .8);
    font: inherit;
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    -webkit-text-stroke: 2.5px var(--edge);
    paint-order: stroke fill;
}
.stat-switch:hover { color: #fff; }
.stat-switch-track { position: relative; flex: none; width: 38px; height: 22px; border: 2px solid var(--edge); border-radius: 99px; background: #3a2850; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35); transition: background .2s; }
.stat-switch-track > i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border: 2px solid var(--edge); border-radius: 50%; background: #cfc2e4; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background .2s; }
.show-base-stats .stat-switch { color: #fff; border-color: #d9ffb8; }
.show-base-stats .stat-switch-track { background: linear-gradient(180deg, #8ef05a, #2fa82a); }
.show-base-stats .stat-switch-track > i { transform: translateX(16px); background: #fff; }
@media (prefers-reduced-motion: reduce) { .stat-switch-track, .stat-switch-track > i { transition: none; } }
/* Petit « i » à droite de l'interrupteur : bulle d'explication (survol en bureau, clic / toucher partout). */
.stat-switch-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.info-tip { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(214, 190, 255, .85); cursor: pointer; filter: drop-shadow(0 1.5px 0 var(--edge)); transition: color .2s, transform .15s; }
.info-tip .ico { width: 22px; height: 22px; stroke: var(--edge); stroke-width: 1.5px; paint-order: stroke fill; }
.info-tip:hover, .info-tip[aria-expanded="true"] { color: #fff; transform: scale(1.1); }
.info-bubble {
    position: absolute;
    z-index: 8;
    top: calc(100% + 10px);
    right: 0;
    width: min(280px, calc(80 * var(--u-vw)));
    padding: 10px 12px;
    border: 2px solid rgba(214, 190, 255, .45);
    border-radius: 12px;
    background: #1d1030;
    box-shadow: 0 0 0 2px var(--edge), 0 12px 26px rgba(0, 0, 0, .55);
    color: rgba(255, 255, 255, .9);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility 0s .15s;
    pointer-events: none;
}
.info-bubble::before { content: ''; position: absolute; top: -7px; right: 8px; width: 12px; height: 12px; border-top: 2px solid rgba(214, 190, 255, .45); border-left: 2px solid rgba(214, 190, 255, .45); background: #1d1030; transform: rotate(45deg); }
.info-tip[aria-expanded="true"] + .info-bubble { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
@media (hover: hover) and (pointer: fine) {
    .info-tip:hover + .info-bubble { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
}

/* Cartes de troupes du shop : « i » en haut à gauche, juste avant le niveau (qui se décale) et
   VERSO (stats d'une unité en toutes lettres + coût d'une recrue) qui recouvre toute la carte. */
.card-flip-btn { position: absolute; top: 10px; left: 8px; z-index: 4; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(214, 190, 255, .85); cursor: pointer; filter: drop-shadow(0 1.5px 0 var(--edge)); transition: color .2s, transform .15s; }
.card-flip-btn .ico { width: 19px; height: 19px; stroke: var(--edge); stroke-width: 1.5px; paint-order: stroke fill; }
.card-flip-btn:hover, .card-flip-btn[aria-pressed="true"] { color: #fff; transform: scale(1.1); }
.unit-card:has(.card-flip-btn) .card-lv { left: 34px; } /* le « i » est à gauche du niveau */
.unit-back {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 38px 14px 14px; /* place du « i » en haut à gauche */
    border-radius: inherit;
    background: linear-gradient(180deg, #2c1a44, #1a0f2a);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}
.unit-card.is-flipped .unit-back { display: flex; }
.unit-card.is-flipped .card-owned, .unit-card.is-flipped .card-lv { visibility: hidden; }
.unit-back-kicker { margin: 4px 0 0; color: var(--sun); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.unit-back-stats { display: grid; grid-template-columns: 1fr; gap: 5px; margin: 0; }
.unit-back-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; border: 2px solid var(--edge); border-radius: 10px; background: rgba(0, 0, 0, .25); }
.unit-back-stats dt { display: flex; align-items: center; gap: 7px; min-width: 0; color: rgba(255, 255, 255, .8); font-size: .8rem; font-weight: 700; line-height: 1.15; }
.unit-back-stats dt .ico { flex: none; font-size: 1rem; }
.unit-back-stats dd { margin: 0; font-weight: 800; font-size: .85rem; white-space: nowrap; text-align: right; }
.unit-back .btn-cost { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.unit-back .cost-item { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; }
.unit-back .cost-item b { font-weight: 800; }
.unit-back .cost-item .cost-ico { width: 22px; height: 22px; }
.unit-back .cost-item.is-bad b { color: #ff8a8a; }
.unit-stats .st-lv { color: #ffc531; }
/* « ? » DANS la pastille « Stats de base » : la pastille est portée par l'enveloppe, qui contient
   l'interrupteur (bouton transparent) puis le « ? » (bouton à part : pas de bouton dans un bouton). */
.stat-switch-wrap { gap: 2px; min-height: 34px; padding-right: 5px; border: 2px solid rgba(214, 190, 255, .3); border-radius: 99px; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 2px var(--edge); }
.stat-switch-wrap .stat-switch { min-height: 30px; padding: 0 4px 0 4px; border: 0; background: none; box-shadow: none; }
.show-base-stats .stat-switch-wrap { border-color: #d9ffb8; }
.stat-switch-wrap .info-tip { width: 24px; height: 24px; }
.stat-switch-wrap .info-tip .ico { width: 20px; height: 20px; }

/* Bulles des stats des cartes d'unités : nom en gras + ce que fait la stat. Le contenu est rendu
   dans chaque case (.stat-tip, caché) et affiché dans UNE bulle flottante .stat-float posée dans
   <body> (showStatTip() dans app.js) : jamais rognée par le carrousel ni grisée avec sa carte. */
.unit-stats > div:has(> .stat-tip)::after { content: none; }
.stat-tip { display: none; }
.stat-float {
    position: fixed;
    z-index: 260;
    left: 0;
    top: 0;
    width: max-content;
    max-width: 230px;
    padding: 7px 10px;
    border: 2px solid var(--edge);
    border-radius: 10px;
    background: #1a0d22;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .5);
    color: rgba(255, 255, 255, .86);
    font-size: .74rem;
    font-weight: 400; /* description plus maigre que le nom (Regular) */
    line-height: 1.35;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
}
.stat-float.is-on { opacity: 1; }
.stat-float b { display: block; margin-bottom: 2px; color: #fff; font-size: .82rem; font-weight: 900; text-transform: uppercase; }
/* Pastille « Stats de base » : « ? » un peu plus petit, libellé recalé au centre vertical (les capitales
   condensées tombent trop haut avec la hauteur de ligne héritée). */
.stat-switch-wrap .info-tip { width: 21px; height: 21px; }
.stat-switch-wrap .info-tip .ico { width: 18px; height: 18px; }
.stat-switch-label { display: block; line-height: 1; padding-top: 2px; }
/* Verso des cartes : les coûts tiennent sur UNE ligne (un peu plus petits). */
.unit-back .btn-cost { flex-wrap: nowrap; gap: 0 8px; }
.unit-back .cost-item { gap: 3px; font-size: .84rem; white-space: nowrap; }
.unit-back .cost-item .cost-ico { width: 18px; height: 18px; }
/* Mobile : les fenêtres montent jusque sous les ressources (elles recouvrent le badge Premium et ce
   qui est dessous) : plus de place pour les cartes, moins de défilement. */
@media (max-width: 640px) {
    .sheet, .sheet--wide { max-height: calc(calc(100 * var(--u-svh)) - 98px - env(safe-area-inset-top)); }
}

/* ==========================================================================
   Espionnage : fenêtre de choix (indic / pro), pastille « Espion → X 1:23 »,
   barre du mode lecture seule (territoire adverse affiché sur la carte).
   ========================================================================== */
.sheet--spy { width: min(560px, calc(100 * var(--u-vw) - 24px)); }
.spy-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
@media (max-width: 520px) { .spy-choices { grid-template-columns: 1fr; } }
.spy-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 14px 14px; border: 2px solid var(--edge); border-radius: 18px; background: linear-gradient(180deg, #2c1a44, #1a0f2a); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 3px 0 var(--edge); text-align: center; }
.spy-card--pro { border-color: #ffc531; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 3px 0 var(--edge), 0 0 18px rgba(255, 197, 49, .25); }
.spy-card h3 { margin: 0; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; }
.spy-card .unit-ava { margin-bottom: 8px; } /* la tête dépasse : un peu d’air avant le titre */
.spy-ico { display: grid; place-items: center; width: 64px; height: 64px; border: 3px solid var(--edge); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a2d6e, #1f1230); color: #d8c8ff; box-shadow: 0 3px 0 var(--edge); }
.spy-card--pro .spy-ico { color: #ffc531; }
.spy-ico .ico { width: 32px; height: 32px; }
.spy-desc { margin: 0; color: rgba(255, 255, 255, .72); font-size: .82rem; line-height: 1.35; }
.spy-stats { display: grid; gap: 5px; width: 100%; margin: 4px 0; }
.spy-stats > div { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border: 2px solid var(--edge); border-radius: 10px; background: rgba(0, 0, 0, .25); }
.spy-stats dt { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .8); font-size: .8rem; font-weight: 700; }
.spy-stats dt .ico { width: 16px; height: 16px; }
.spy-stats dd { margin: 0; font-weight: 900; }
.spy-card .btn { margin-top: auto; }
.spy-last { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding: 9px 12px; border: 2px dashed rgba(125, 255, 168, .6); border-radius: 12px; background: rgba(125, 255, 168, .08); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; text-align: left; }
.spy-last .ico { width: 18px; height: 18px; color: #7dffa8; }
.spy-last span { flex: 1; }
.spy-last b { color: #7dffa8; font-weight: 900; text-transform: uppercase; }
.prof-spy { margin-top: 10px; }

/* Trajet de l'espion : écran « compte à rebours » (.fight.is-march + .spy-overlay, créé par syncSpy). */

/* Mode lecture seule : HUD masqué, barre en bas (nom, heure de la photo, retour). */
body.is-spying .world > :not(#map):not(.map-vignette) { visibility: hidden; }
.spy-bar { position: fixed; z-index: 47; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); translate: -50% 0; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100 * var(--u-vw) - 24px); padding: 10px 10px 10px 18px; border: 2px solid rgba(255, 79, 106, .6); border-radius: 18px; background: rgba(20, 10, 32, .92); box-shadow: 0 0 0 2px var(--edge), 0 10px 26px rgba(0, 0, 0, .5); }
.spy-bar-txt { min-width: 0; }
.spy-bar-title { margin: 0; font-size: 1rem; font-weight: 900; text-transform: uppercase; color: #fff; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spy-bar-sub { margin: 2px 0 0; color: #ff8a9a; font-size: .78rem; font-weight: 700; }
.spy-exit { flex: none; }
/* Rapport d'espion : flèche au bord de l'écran vers d'où arriverait l'attaque (Map::setSpyMarks). */
.spy-arrow { position: absolute; z-index: 5; display: grid; justify-items: center; gap: 4px; translate: -50% -50%; pointer-events: none; }
.spy-arrow { filter: drop-shadow(0 0 1.5px var(--edge)) drop-shadow(0 0 1.5px var(--edge)) drop-shadow(0 0 10px rgba(255, 61, 90, .7)); }
/* Grosse flèche qui pointe VERS l'intérieur (sens d'arrivée de l'attaque) : forme pointant à gauche, tournée de l'angle centre → attaquant. */
.spy-arrow-head { width: 46px; height: 36px; background: linear-gradient(180deg, #ff6a7d, #e01f3d); clip-path: polygon(0 50%, 50% 0, 50% 28%, 100% 28%, 100% 72%, 50% 72%, 50% 100%); rotate: var(--a, 0rad); animation: spy-arrow 1s ease-in-out infinite; }
.spy-arrow-label { padding: 4px 11px; border: 2px solid var(--edge); border-radius: 99px; background: #ff3d5a; color: #fff; font-family: var(--font); font-size: .82rem; font-style: italic; font-weight: 900; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 3.5px var(--edge); paint-order: stroke fill; }
@keyframes spy-arrow { 50% { scale: 1.15; } }
@media (prefers-reduced-motion: reduce) { .spy-arrow-head { animation: none; } }
/* Profil : quota d'attaques atteint → compte à rebours jusqu'à la prochaine attaque possible. */
.prof-attack-next { display: flex; align-items: center; justify-content: center; gap: 6px; color: #ffb35c; font-weight: 800; }
.prof-attack-next .ico { width: 15px; height: 15px; }
.prof-attack-next b { color: #fff; font-weight: 900; font-variant-numeric: tabular-nums; }
/* Fiche d'un bâtiment : corbeille (démolir) en haut à gauche + fenêtre de confirmation. */
.sheet > .bld-trash { position: absolute; top: 14px; left: 14px; z-index: 6; }
.sheet > .bld-move { position: absolute; top: 14px; left: 58px; z-index: 6; }
.card-trash.bld-move:hover { background: #2f8fe0; color: #fff; }
.demolish-evict { display: grid; gap: 6px; margin: 4px 0 10px; padding: 0 4px 0 0; list-style: none; min-width: 80%; margin-inline: auto; max-height: min(232px, calc(34 * var(--u-svh))); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.demolish-evict li { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, .25); }
.demolish-evict .unit-ava { width: 34px; height: 39px; margin: 0; }
.demolish-evict .unit-ava::before { height: 34px; border-width: 2px; }
.demolish-evict .unit-ava img { width: 34px; height: 39px; }
.demolish-evict span { flex: 1; font-weight: 800; font-size: .88rem; }
.demolish-evict b { font-weight: 900; font-size: .88rem; color: #ff8a8a; }
.demolish-warn { color: #ffb35c; justify-content: center; text-align: center; }

/* Déplacement d'un bâtiment : barre bleue en bas, infobulle « Échanger » sur les bâtiments. */
.move-bar { border-color: rgba(58, 168, 255, .7); }
.move-bar .spy-bar-sub { color: #9fd3ff; }
.map-tip[data-kind="built"] { background: linear-gradient(180deg, #6cc0ff, #2f7fe0); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--edge), 0 10px 20px rgba(0, 0, 0, .45); }

/* Combat : vitesse (×1 / ×2 / ×5) + Passer calés en bas de l'écran, centrés (la place est réservée
   sous l'arène). En absolu dans .fight (plein écran) : un `fixed` serait faussé par la translation
   GSAP posée sur l'écran de combat. */
.fight.is-battle { padding-bottom: calc(var(--ctl-h, 50px) + 34px + env(safe-area-inset-bottom)); }
.fight.is-battle > .fight-controls { position: absolute; z-index: 5; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); translate: -50% 0; width: max-content; max-width: calc(100% - 24px); }
@media (max-width: 640px) { .fight.is-battle { padding-bottom: calc(44px + 26px + env(safe-area-inset-bottom)); } .fight.is-battle > .fight-controls { bottom: max(10px, env(safe-area-inset-bottom)); } }

/* Bouton téléphone : point DISCRET en bas à droite (sans chiffre, violet du jeu comme les pastilles
   du Forum / des Messages) quand il y a des sujets du forum ou des messages privés non lus ; la
   pastille rouge chiffrée (en haut) reste réservée aux alertes. */
.phone-dot { position: absolute; right: 3px; bottom: 3px; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, #a77cff, #6a3fd0); box-shadow: 0 0 0 2px var(--edge), 0 0 8px rgba(167, 124, 255, .55); pointer-events: none; }

/* Cagnotte du casino, version COMPACTE (14/10/2026) : montant à gauche, échéance + parts du podium à
   droite, ma place en petit dessous ; cadre fin, sans halo doré. Empilé et centré sous 560 px. */
.casino-pot { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; gap: 4px 18px; margin: 16px 0 0; padding: 10px 16px; border-width: 2px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 197, 49, .07), rgba(255, 197, 49, 0) 70%), rgba(20, 10, 34, .55); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .18); text-align: left; }
.casino-pot-main { grid-row: span 2; display: grid; gap: 2px; }
.casino-pot-label { font-size: .7rem; }
.casino-pot-val { gap: 6px; }
.casino-pot-val b { font-size: 1.35rem; -webkit-text-stroke: 4px var(--edge); text-shadow: 0 2px 0 var(--edge); }
.casino-pot-ico { width: 26px; height: 26px; }
.casino-pot-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; }
.casino-pot-next { font-size: .76rem; }
.casino-shares { gap: 5px; margin: 0; }
.casino-shares li { gap: 4px; padding: 2px 8px 2px 3px; border-width: 1.5px; font-size: .74rem; }
.casino-rank { width: 18px; height: 18px; border-width: 1.5px; font-size: .62rem; }
.casino-me { grid-column: 2; margin: 0; font-size: .72rem; text-align: right; }
@media (max-width: 560px) {
    .casino-pot { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 10px 12px; }
    .casino-pot-main { grid-row: auto; justify-items: center; }
    .casino-pot-side { justify-content: center; }
    .casino-me { grid-column: auto; text-align: center; }
    .casino-pot-val b { font-size: 1.3rem; }
}

/* Pièce jointe d'un personnage : « Récupérer » puis une pastille par ressource (picto + montant). */
.npc-gift.has-items { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 8px 10px 9px; border-radius: 16px; }
.npc-gift-label { line-height: 1; }
.npc-gift-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.npc-gift-item { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 3px; border-radius: 999px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); white-space: nowrap; }
.npc-gift-item img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .5)); }
.npc-gift-item b { font-size: .82rem; font-weight: 900; text-transform: none; }

/* Arène : équipement porté par chaque type de troupe (picto dans une pastille à la couleur de la rareté). */
.fight-pile-gear { display: inline-flex; flex: none; align-self: center; gap: 3px; }
.fight-eq { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--edge); border-radius: 6px; background: var(--rar-bg, rgba(255, 255, 255, .1)); box-shadow: inset 0 0 0 1.5px var(--rar, #c9c3d6); color: var(--rar, #fff); }
.fight-eq .ico { width: 12px; height: 12px; filter: drop-shadow(0 1px 0 var(--edge)); }
@media (max-width: 640px) { .fight-eq { width: 16px; height: 16px; border-radius: 5px; } .fight-eq .ico { width: 10px; height: 10px; } }

/* Trajet de marche : couronne de laurier du podium autour de l'épingle (même dessin que sur la
   carte), et le boss masqué pendant la marche (seuls les deux QG du trajet et les troupes restent). */
.route-pin-face { position: relative; display: grid; place-items: center; }
.route-pin-face > .route-pin-ava { position: relative; z-index: 1; }
.route-pin-laurel { position: absolute; z-index: 2; left: 50%; top: 50%; width: 112px; height: 112px; translate: -50% -50%; pointer-events: none; }
body.is-fighting .boss-pin { visibility: hidden; }

/* Arène : bandeau du défenseur, marge à gauche (côté biseauté) — la règle générale de l'arène
   écrasait le padding propre au camp défenseur et collait le nom au bord. */
.fight.is-battle .fight-side--def .fight-who { padding: 8px 10px 8px 32px; }
@media (max-width: 640px) { .fight.is-battle .fight-side--def .fight-who { padding: 5px 8px 5px 24px; } }
/* Trajet de marche : noms des joueurs sur les épingles, plus gras. */
.route-pin-name { font-size: .92rem; -webkit-text-stroke: 4.5px var(--edge); filter: drop-shadow(0 2px 0 var(--edge)); }

/* Couronne de laurier du podium (symbole `laurel`, dessin de la carte, plus ouvert en haut) autour de
   MON avatar du HUD et de l'avatar du profil ; or / argent / bronze selon le rang, DEVANT l'avatar
   (médaille, drapeau et pastilles restent au-dessus). */
.laurel-1 { color: #ffc531; }
.laurel-2 { color: #dfe3ec; }
.laurel-3 { color: #e0904f; }
.hud-laurel, .prof-laurel { position: absolute; z-index: 2; max-width: none; max-height: none; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.hud-laurel { width: 152%; height: 152%; }
.hud-avatar-wrap > .hud-avatar { z-index: 1; } /* couronne DEVANT l'avatar… */
.hud-avatar-wrap > .hud-xp { z-index: 3; } /* …et l'anneau d'XP devant la couronne */
.hud-avatar-wrap > .hud-avatar { position: relative; }
.prof-laurel { width: 158%; height: 158%; }
.prof-ava-wrap:has(> .prof-laurel) { margin: 0 12px 0 8px; }
.prof-ava-wrap > .prof-ava { position: relative; z-index: 1; }
.prof-ava-wrap > :not(.prof-laurel):not(.prof-ava) { z-index: 3; }
.hud-avatar-wrap > .skill-notif { z-index: 4; }
.sheet--skills .skill-profile { margin-left: auto; }
@media (max-width: 640px) { .sheet--skills .sheet-head { padding-right: 0; } .sheet--skills .sheet-head .sheet-title { margin-right: 48px; } .sheet--skills .skill-profile { padding: 0 11px 0 8px; } }

/* ===== Rubans de profil (App\Game\Ribbon) : bande en diagonale dans le coin haut gauche de la fenêtre
   de profil, à la teinte du ruban (--rb1 clair, --rb2 foncé). Sur MON profil : bouton (changer de ruban) ;
   sans ruban, bande en pointillés avec « + ». ===== */
.sheet--profile { position: relative; }
.prof-ribbon-corner { position: absolute; z-index: 4; top: 0; left: 0; width: 150px; height: 150px; overflow: hidden; border-top-left-radius: inherit; pointer-events: none; }
.prof-ribbon { position: absolute; top: 32px; left: -58px; width: 220px; height: 34px; rotate: -45deg; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 52px; box-sizing: border-box; border: 0; border-block: 2px solid var(--edge); background: linear-gradient(180deg, var(--rb1, #d29bff), var(--rb2, #8233c9)); box-shadow: 0 4px 0 rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .35); color: #fff; font: inherit; font-size: .9rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; pointer-events: auto; }
.prof-ribbon .ico { width: 16px; height: 16px; flex: none; filter: drop-shadow(0 1px 0 var(--edge)); }
.prof-ribbon > span { overflow: hidden; text-overflow: ellipsis; }
button.prof-ribbon { cursor: pointer; transition: filter .15s; }
button.prof-ribbon:hover { filter: brightness(1.12); }
.prof-ribbon.is-empty { background: rgba(255, 255, 255, .04); border-block: 2px dashed rgba(214, 196, 255, .7); box-shadow: none; color: rgba(255, 255, 255, .85); -webkit-text-stroke: 2px var(--edge); }
.prof-ribbon.is-empty:hover { background: rgba(255, 255, 255, .1); border-color: rgba(214, 196, 255, 1); }
/* L'avatar s'écarte du coin pour laisser passer le ruban. */
.sheet--profile:has(.prof-ribbon-corner) .prof-head { margin-top: 8px; padding-left: 8px; } /* l'avatar peut passer un peu sous le ruban */

.rb-beta { --rb1: #d29bff; --rb2: #ff3d9a; }
.rb-magnate { --rb1: #ffe08a; --rb2: #d98a00; }
.rb-tycoon { --rb1: #8ff0cf; --rb2: #14946c; }
.rb-architect { --rb1: #a8dcff; --rb2: #2b72d6; }
.rb-recruiter { --rb1: #ffc08a; --rb2: #d9561f; }
.rb-caid { --rb1: #ff9a9a; --rb2: #c4143a; }
.rb-warlord { --rb1: #ff6b7d; --rb2: #6e0a20; }
.rb-unstoppable { --rb1: #fff28a; --rb2: #f08a1a; }
.rb-henchman { --rb1: #d9d3e6; --rb2: #5e5672; }
.rb-legend { --rb1: #fff0bf; --rb2: #a8730a; }
.rb-loudmouth { --rb1: #e8b4ff; --rb2: #8233c9; }

/* Choix du ruban : petites bandes (débloquées cliquables, verrouillées grisées + comment les obtenir). */
.hire-pop.ribbon-pop .hire-pop-card.bank-pop-card { width: min(600px, 100%); }
.ribbon-list { width: 100%; }
.ribbon-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 12px; padding: 0; list-style: none; }
.ribbon-list li { display: grid; justify-items: stretch; min-width: 0; gap: 4px; padding: 6px; border: 2px solid transparent; border-radius: 12px; text-align: center; }
.ribbon-list form { margin: 0; width: 100%; }
.ribbon-pick { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 30px; padding: 0 10px; box-sizing: border-box; border: 2px solid var(--edge); border-radius: 6px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%); background: linear-gradient(180deg, var(--rb1), var(--rb2)); color: #fff; font: inherit; font-size: .74rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; overflow: hidden; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.ribbon-pick > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ribbon-pick .ico { width: 14px; height: 14px; flex: none; }
button.ribbon-pick { cursor: pointer; transition: filter .15s, transform .15s; }
button.ribbon-pick:hover { filter: brightness(1.12); transform: translateY(-1px); }
.ribbon-list li:has(.is-on) { border-color: #8ef05a; background: rgba(142, 240, 90, .08); }
.ribbon-list li:has(.is-on) .ribbon-how { color: #8ef05a; }
.ribbon-pick.is-locked { filter: grayscale(1) brightness(.55); opacity: .75; }
.ribbon-how { color: rgba(255, 255, 255, .65); font-size: .7rem; font-weight: 700; line-height: 1.25; }
.ribbon-none { display: flex; justify-content: center; margin: 0; }
@media (max-width: 560px) { .ribbon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Petits rubans du choix, redessinés : contour qui suit la forme (calque sombre découpé + bande
   intérieure découpée 2 px plus petite : le contour n'est plus coupé aux pointes), dégradé en trois
   tons + reflet en haut, bulle « comment l'obtenir » sur les rubans verrouillés. */
.ribbon-pick { position: relative; isolation: isolate; height: 34px; padding: 0 16px; border: 0; border-radius: 0; background: var(--edge); clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%, 11px 50%); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
.ribbon-pick::before { content: ''; position: absolute; z-index: -1; inset: 2px 3px; clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, 0) 52%),
        linear-gradient(180deg, var(--rb1) 0%, color-mix(in srgb, var(--rb1) 45%, var(--rb2)) 55%, var(--rb2) 100%); }
.ribbon-pick::after { content: ''; position: absolute; z-index: -1; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, .18); }
.ribbon-pick.is-locked { filter: grayscale(1) brightness(.6) drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); opacity: .85; cursor: help; }
button.ribbon-pick:hover { filter: brightness(1.1) drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
button.ribbon-pick.is-locked:hover { filter: grayscale(1) brightness(.75) drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); transform: none; }
.ribbon-list li { position: relative; }
.ribbon-bubble { top: 42px; right: auto; left: 50%; width: 220px; margin-left: -110px; text-align: center; }
.ribbon-bubble::before { right: auto; left: calc(50% - 6px); }
.ribbon-pick[aria-expanded="true"] + .ribbon-bubble { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; }
@media (hover: hover) and (pointer: fine) { .ribbon-pick.is-locked:hover + .ribbon-bubble { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s; } }
/* Ruban du coin du profil : même dégradé en trois tons + reflet. */
.prof-ribbon:not(.is-empty) { background:
    linear-gradient(180deg, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, var(--rb1) 0%, color-mix(in srgb, var(--rb1) 45%, var(--rb2)) 55%, var(--rb2) 100%); }
.rb-bot { --rb1: #c9d3e6; --rb2: #4a5568; }

/* Rubans : dégradé SUBTIL en diagonale, d'une seule teinte (pas de blanc ni de reflet) :
   du ton clair mêlé au foncé (70 %) vers le foncé mêlé au clair (35 %). */
.ribbon-pick::before,
.prof-ribbon:not(.is-empty) { background: linear-gradient(115deg, color-mix(in srgb, var(--rb1) 72%, var(--rb2)) 0%, color-mix(in srgb, var(--rb1) 38%, var(--rb2)) 100%); }
.prof-ribbon:not(.is-empty) { box-shadow: 0 4px 0 rgba(0, 0, 0, .35); }

/* Rubans : le texte garde son contour épais (marge intérieure compensée : `overflow: hidden` des
   points de suspension rognait le haut et le bas des lettres) ; pictos contourés comme le texte. */
.prof-ribbon > span, .ribbon-pick > span { padding: 4px 5px; margin: -4px -5px; }
.ribbon-pick { overflow: visible; }
.prof-ribbon .ico, .ribbon-pick .ico { color: #fff; filter: drop-shadow(1.5px 0 0 var(--edge)) drop-shadow(-1.5px 0 0 var(--edge)) drop-shadow(0 1.5px 0 var(--edge)) drop-shadow(0 -1.5px 0 var(--edge)); }
/* Dégradé un peu plus marqué (toujours une seule teinte, en diagonale). */
.ribbon-pick::before,
.prof-ribbon:not(.is-empty) { background: linear-gradient(115deg, color-mix(in srgb, var(--rb1) 94%, var(--rb2)) 0%, color-mix(in srgb, var(--rb1) 55%, var(--rb2)) 50%, color-mix(in srgb, var(--rb1) 14%, var(--rb2)) 100%); }
/* Ruban verrouillé : SON dégradé (pas du noir et blanc), simplement atténué ; le cadenas suffit. */
.ribbon-pick.is-locked { filter: saturate(.55) brightness(.62) drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); opacity: .9; }
button.ribbon-pick.is-locked:hover { filter: saturate(.7) brightness(.75) drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
/* Ruban verrouillé : MÊME dégradé gris pour tous (teintes fixes : le filtre noir et blanc dépendait de
   la couleur d'origine et donnait des gris différents), texte un peu atténué, cadenas. */
.ribbon-pick.is-locked { --rb1: #a49db6; --rb2: #4b4559; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); opacity: 1; color: rgba(255, 255, 255, .78); }
button.ribbon-pick.is-locked:hover { filter: brightness(1.08) drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); }
/* Ruban du coin : texte un peu plus petit (les noms courts tiennent toujours en entier). */
.prof-ribbon { font-size: .8rem; -webkit-text-stroke: 3.5px var(--edge); }
.prof-ribbon .ico { width: 15px; height: 15px; }
/* Rubans sans picto : noms un peu plus grands. */
.prof-ribbon { font-size: .92rem; -webkit-text-stroke: 4px var(--edge); }
.ribbon-pick { font-size: .84rem; }
/* Bouton « Aucun ruban » : fond noir translucide + flou de l'arrière-plan. */
.ribbon-none .crew-catalog { background: rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ribbon-none .crew-catalog:hover { background: rgba(0, 0, 0, .55); }


/* Fiche d'un bâtiment de famille. */
.obj-bonus { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 12px; color: #ffd23f; font-weight: 800; text-align: center; }
.obj-bonus .ico { flex: none; width: 16px; height: 16px; }
.obj-owner { display: grid; justify-items: center; gap: 4px; margin: 0 0 12px; padding: 10px 12px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(0, 0, 0, .25); text-align: center; }
.obj-owner.is-mine { border-color: #6fb6ff; }
.obj-owner-title { margin: 0; color: var(--muted); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.obj-fam { padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 1.1rem; font-weight: 900; cursor: pointer; }
.obj-fam b { color: #6fb6ff; }
.obj-gang { margin: 0; color: #ffb3b3; font-weight: 800; }
.obj-shield { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; color: #9fd3ff; font-size: .82rem; font-weight: 800; }
.obj-shield .ico { width: 15px; height: 15px; }
.obj-empty { margin: 0 0 12px; color: rgba(255, 255, 255, .7); font-size: .84rem; text-align: center; }
/* Garnison : total d'abord (bandeau doré), puis une ligne compacte par membre. */
.obj-g-total { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 7px 10px; border: 2px solid rgba(255, 200, 80, .55); border-radius: 12px; background: rgba(0, 0, 0, .45); font-size: .84rem; font-weight: 900; }
.obj-g-total b { color: #ffd45a; }
.obj-g-total.is-alone { justify-content: space-between; margin-bottom: 12px; }
.obj-g-total.is-alone b { font-size: 1.05rem; }
.obj-garrison { display: grid; gap: 4px; max-height: 190px; margin: 0 0 12px; padding: 0; overflow-y: auto; list-style: none; }
.obj-garrison li { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 4px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.obj-ava { width: 26px; height: 26px; flex: none; }
.obj-g-name { min-width: 0; overflow: hidden; font-size: .82rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.obj-g-troops { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 7px; margin-left: auto; }
.obj-g-troop { display: inline-flex; align-items: center; gap: 2px; font-weight: 900; font-size: .74rem; }
.obj-g-troop img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #3a2156; }
.obj-g-total .obj-g-troop { font-size: .8rem; }
.obj-g-total .obj-g-troop img { width: 24px; height: 24px; }
.obj-actions { display: grid; gap: 8px; justify-items: center; }
.obj-actions > .btn-block { width: 100%; }
.obj-row-form { margin: 0; }
.fight-obj { margin: 4px 0 8px; color: #fff; font-size: 1rem; font-weight: 900; text-align: center; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; } .fight-obj.is-win { color: #8ef05a; }

/* ===== Bâtiments de famille sur la carte (marqueurs DOM, vue Ville) =====
   `.obj-anchor` = l'élément placé par MapLibre (taille nulle, centré sur le SOCLE du bâtiment) : on ne
   touche JAMAIS à sa position ni à son `transform`. Le visuel est mis à l'échelle du zoom (`--obj-k`,
   posée sur le conteneur de la carte) AUTOUR du socle ; les étiquettes pendent sous le socle. */
.obj-anchor { width: 0; height: 0; }
.obj-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.obj-pin-art { position: absolute; left: -36px; bottom: -36px; width: 72px; height: auto; max-width: none; transform: scale(var(--obj-k, 1)); transform-origin: 50% calc(100% - 36px); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); transition: filter .15s; }
.obj-pin:hover .obj-pin-art { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)) brightness(1.2); }
.obj-pin-name, .obj-pin-bar, .obj-pin-clock { position: absolute; left: 0; translate: -50% 0; pointer-events: auto; }
.obj-pin-name { top: 6px; padding: 2px 10px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(20, 10, 34, .82); color: #fff; font-size: .74rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.obj-pin.is-gang .obj-pin-name { color: #ffb3b3; }
.obj-pin.is-mine .obj-pin-name { border-color: #6fb6ff; box-shadow: 0 0 0 2px rgba(111, 182, 255, .35); }
.obj-pin-bar { top: 30px; width: 78px; height: 8px; overflow: hidden; border: 2px solid var(--edge); border-radius: 99px; background: rgba(0, 0, 0, .55); }
.obj-pin-bar > i { display: block; height: 100%; background: linear-gradient(180deg, #8df27c, #3fbf4f); }
.obj-pin.is-gang .obj-pin-bar > i { background: linear-gradient(180deg, #ff8a8a, #d6233d); }
.obj-pin-clock { top: 42px; display: inline-flex; padding: 1px 8px; border: 2px solid var(--edge); border-radius: 999px; background: #2b72d6; color: #fff; font-size: .72rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.obj-pin-clock[hidden] { display: none; }
body.is-fighting .obj-anchor { visibility: hidden; }
/* Étiquettes des bâtiments de famille : réduites de loin (`--obj-lk`) et descendues avec le socle
   quand le bâtiment grossit (`--obj-k` > 1 au zoom max). */
.obj-pin-name, .obj-pin-bar, .obj-pin-clock { scale: var(--obj-lk, 1); transform-origin: 50% 0; }
.obj-pin-name { top: calc(6px + 22px * (var(--obj-k, 1) - 1)); }
.obj-pin-bar { top: calc(6px + 22px * (var(--obj-k, 1) - 1) + 24px * var(--obj-lk, 1)); }
.obj-pin-clock { top: calc(6px + 22px * (var(--obj-k, 1) - 1) + 36px * var(--obj-lk, 1)); }

/* Fiche d'un bâtiment de famille : encart du bonus = fond noir 50 %, étoile séparée du texte par un
   filet, texte aligné à gauche. */
.obj-bonus { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 4px 0 12px; padding: 10px 14px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(0, 0, 0, .5); color: #ffd23f; font-weight: 800; text-align: left; line-height: 1.3; }
.obj-bonus .ico { flex: none; width: 20px; height: 20px; padding-right: 12px; border-right: 1px solid rgba(255, 210, 63, .35); box-sizing: content-box; }

/* Fiche d'un bâtiment de famille : actions collées en bas quand la fenêtre défile (comme les fiches de
   bâtiment), sur un fondu de la couleur du bas de la fenêtre ; encart de la garnison vide = cadre
   en pointillés sur fond noir 50 %, texte à gauche avec un picto. */
[data-view-root="objective"] .obj-actions:has(.btn-block) {
    position: sticky;
    bottom: -26px;
    z-index: 2;
    margin: 12px -28px -26px;
    padding: 20px 28px 24px;
    background: linear-gradient(180deg, rgba(29, 16, 48, 0), rgb(29, 16, 48) 20px);
}
@media (max-width: 640px) {
    [data-view-root="objective"] .obj-actions:has(.btn-block) { bottom: -18px; margin-bottom: -18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}
.obj-empty { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding: 12px 14px; border: 2px dashed rgba(214, 196, 255, .35); border-radius: 14px; background: rgba(0, 0, 0, .5); color: rgba(255, 255, 255, .82); font-size: .86rem; font-weight: 700; line-height: 1.35; text-align: left; }
.obj-empty .ico { flex: none; width: 20px; height: 20px; padding-right: 12px; border-right: 1px solid rgba(214, 196, 255, .3); box-sizing: content-box; color: #9fd3ff; }
.obj-empty.is-warn { border-color: rgba(255, 179, 92, .55); }
.obj-empty.is-warn .ico { color: #ffb35c; }

/* « Mon équipe » : où sont les troupes (chez moi / en renfort chez un allié / en garnison d'un bâtiment de famille),
   petites pastilles empilées en haut à droite, sous le nombre de troupes ; bulle commune des stats au survol / toucher. */
.unit-where { position: absolute; top: 42px; right: 10px; z-index: 2; display: grid; justify-items: end; gap: 3px; margin: 0; }
.unit-where > span { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(0, 0, 0, .6); font-size: .72rem; font-weight: 900; font-variant-numeric: tabular-nums; cursor: help; }
.unit-where .ico { width: 12px; height: 12px; color: #fff; }
.unit-where .is-ally { background: rgba(120, 90, 0, .75); }
.unit-where .is-ally .ico { color: #ffd23f; }
.unit-where .is-garr { background: rgba(30, 70, 140, .8); }
.unit-where .is-garr .ico { color: #9cc8ff; }
@media (max-width: 640px) { .unit-where { top: 36px; right: 8px; } }
/* Bonus des bâtiments de famille tenus par ma famille (« buffs ») : petites vignettes rondes qui brillent,
   TOUJOURS calées sur le bord gauche de l'écran et empilées les unes sous les autres (jusqu'à 4).
   Bureau : sous le badge Premium. Mobile : tout en haut à gauche ; ≤ 450 px (ressources sur toute la
   largeur) : sous les ressources. Bulle commune des stats au survol / toucher. */
.hud-buffs { position: absolute; top: calc(max(16px, env(safe-area-inset-top)) + 44px); left: max(16px, env(safe-area-inset-left)); z-index: 25; display: flex; flex-direction: column; gap: 8px; }
/* Couleur selon l'effet : --bf = liseré, --bg1 / --bg2 = halo (or par défaut). */
.hud-buff { --bf: #ffd45a; --bg1: 255, 197, 49; --bg2: 255, 150, 40; --bin: #5a3a86; position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 2.5px solid var(--bf); border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--bin), #1a0f2b 72%); box-shadow: 0 0 0 2px var(--edge), 0 3px 0 var(--edge), 0 0 10px 2px rgba(var(--bg1), .55), 0 0 22px 4px rgba(var(--bg2), .25); cursor: help; animation: buff-glow 2.4s ease-in-out infinite; }
.hud-buff.is-airport { --bf: #6fd8ff; --bg1: 80, 200, 255; --bg2: 40, 120, 255; --bin: #23537a; } /* vitesse des marches : bleu ciel */
.hud-buff.is-port { --bf: #7cf08a; --bg1: 90, 230, 110; --bg2: 30, 170, 90; --bin: #24603a; } /* production de marchandises : vert */
.hud-buff.is-stock { --bf: #ffd45a; --bg1: 255, 197, 49; --bg2: 255, 150, 40; --bin: #6a5220; } /* dollars : or */
.hud-buff.is-radio { --bf: #d49bff; --bg1: 190, 120, 255; --bg2: 140, 70, 255; --bin: #4e2a80; } /* espionnage : violet */
.hud-buff img { width: 34px; height: auto; margin-top: -4px; pointer-events: none; filter: drop-shadow(0 1px 0 var(--edge)); }
.hud-buff:hover, .hud-buff:focus-visible, .hud-buff.is-tip { border-color: #fff; }
@keyframes buff-glow {
    50% { box-shadow: 0 0 0 2px var(--edge), 0 3px 0 var(--edge), 0 0 15px 4px rgba(var(--bg1), .7), 0 0 32px 7px rgba(var(--bg2), .35); }
}
@media (prefers-reduced-motion: reduce) { .hud-buff { animation: none; } }
@media (max-width: 640px) {
    .hud-buffs { top: max(12px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); gap: 6px; }
    .hud-buff { width: 30px; height: 30px; border-width: 2px; }
    .hud-buff img { width: 28px; }
}
@media (max-width: 450px) {
    .hud-buffs { top: calc(max(12px, env(safe-area-inset-top)) + 84px); }
}

/* Fiche d'un bâtiment de famille : « Déposer » seul en pleine largeur ; avec des troupes déjà déposées,
   moitié de largeur + « Rappeler » (orange) à côté. Encart du rappel : liste des types qui défile. */
.obj-duo { display: grid; gap: 10px; width: 100%; }
.obj-duo.is-split { grid-template-columns: 1fr 1fr; }
.obj-duo .btn-block { width: 100%; min-width: 0; }
.hire-pop .hire-pop-card.bank-pop-card.obj-recall-card { width: min(600px, 100%); }
.obj-recall-list .attack-row-name { overflow: visible; white-space: nowrap; text-overflow: clip; }
.obj-recall-list { max-height: calc(48 * var(--u-svh)); margin: 0 0 12px; overflow-y: auto; }

/* Sélecteur de quantité commun (qty_box() : Min · − · champ · + · Max) : TOUS les éléments à la même hauteur
   (--qty-h), jamais rétrécis quand le nombre grandit ; − / + carrés. */
.qty.qty-box { --qty-h: 38px; flex-wrap: nowrap; gap: 5px; width: auto; }
.qty.qty-box > * { flex: none; box-sizing: border-box; height: var(--qty-h); min-width: 0; margin: 0; }
.qty.qty-box > .qty-btn { width: var(--qty-h); padding: 0; }
.qty.qty-box > .qty-btn .ico { width: 15px; height: 15px; }
.qty.qty-box > .qty-max { padding: 0 9px; font-size: .72rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.qty.qty-box > input { width: 64px; height: var(--qty-h); padding: 0 4px; font-size: 1rem; }
.hire-pop .qty.qty-box { --qty-h: 44px; }
.hire-pop .qty.qty-box > input { width: 80px; font-size: 1.25rem; }
.attack-row:has(> .qty-box) { grid-template-columns: 50px minmax(0, 1fr) auto; }
@media (max-width: 640px) {
    .attack-row:has(> .qty-box) { grid-template-columns: 36px minmax(0, 1fr) auto; }
    .qty.qty-box.attack-qty { --qty-h: 30px; gap: 3px; }
    .qty.qty-box.attack-qty > .qty-btn .ico { width: 12px; height: 12px; }
    .qty.qty-box.attack-qty > .qty-max { padding: 0 5px; font-size: .6rem; border-radius: 8px; }
    .qty.qty-box.attack-qty > input { width: 44px; font-size: .9rem; }
}

/* Préparer l'attaque / renforts / dépôt : les cases du bilan (envoyées, trajet, butin, reste) toujours sur UNE ligne. */
.attack-sum { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 640px) {
    .attack-sum { gap: 6px; }
    .attack-sum > div { padding: 7px 8px; }
    .attack-sum dt { gap: 4px; font-size: .62rem; }
    .attack-sum dd { font-size: 1rem; }
}
/* Cases du bilan : tout centré, libellés plus petits sur une ligne (points de suspension). */
.attack-sum > div { justify-items: center; min-width: 0; text-align: center; }
.attack-sum dt { justify-content: center; max-width: 100%; min-width: 0; font-size: .64rem; font-weight: 700; }
.attack-sum dt > span { min-width: 0; overflow: hidden; padding: 1px .25em 1px .1em; text-overflow: ellipsis; white-space: nowrap; } /* marge intérieure : l’italique contouré n’est plus rogné */
.attack-sum dt .ico { flex: none; width: 12px; height: 12px; }
@media (max-width: 640px) { .attack-sum dt { font-size: .56rem; } .attack-sum dt .ico { width: 10px; height: 10px; } }

/* Boss de ville : marqueur un peu plus petit (il écrasait les QG voisins). */
.boss-pin-face { width: 60px; height: 60px; border-width: 3px; }
.boss-pin-face::after { inset: -8px; }
.boss-pin-name { padding: 1px 8px; font-size: .72rem; }
.boss-pin-bar { width: 64px; height: 8px; }
.boss-pin-clock { font-size: .66rem; }

/* Compteur de tour : clic / toucher = petit menu (même mécanique que les ressources), centré sous le compteur. */
.island-turn { position: relative; cursor: pointer; }
.island-turn[aria-expanded="true"] { z-index: 70; }
.island-turn .res-menu { top: calc(100% + 14px); right: auto; left: 50%; display: grid; min-width: 230px; translate: -50% 0; transform-origin: 50% 0; text-align: left; white-space: normal; --c: 255, 181, 71; }
.island-turn .res-menu[hidden] { display: none; }
.island-turn .res-menu::before { right: auto; left: calc(50% - 7px); }
.island-turn .res-menu b { font-size: .82rem; font-weight: 900; -webkit-text-stroke: 0; }
.island-turn .res-menu .res-menu-row > span { display: inline-flex; align-items: center; gap: 6px; }
.turn-menu-ico { width: 18px; height: 18px; }
.turn-menu-note { margin: 0 0 6px; color: rgba(255, 255, 255, .85); font-size: .78rem; font-weight: 700; line-height: 1.35; }
.turn-menu-note.is-small { margin: 7px 0 0; color: rgba(255, 255, 255, .55); font-size: .7rem; }
.res-menu-sub { margin: 2px 0 2px; color: rgba(255, 255, 255, .5); font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.island:has(.island-turn[aria-expanded="true"]) { overflow: visible; z-index: 70; } /* l'île rogne son contenu (messages qui glissent) : pas pendant le menu */
.island-turn .res-menu .res-menu-row { align-items: center; }

/* Compteurs de chantier (vue QG) : centrés sur la case du bâtiment, taille qui suit le zoom (bornée).
   Enveloppe de taille nulle placée par MapLibre (jamais de position / transform dessus). */
.build-timer-anchor { width: 0; height: 0; pointer-events: none; }
.build-timer-anchor > .build-timer { position: absolute; left: 0; top: 0; box-sizing: border-box; width: max-content; padding-right: 15px; white-space: nowrap; translate: -50% -50%; scale: var(--bt-k, 1); transform-origin: 50% 50%; }
body[data-mode="world"] .build-timer-anchor, .is-world .build-timer-anchor { display: none; }
.build-timer-anchor > .build-timer > span { padding-right: 1px; } /* l’italique contouré ne dépasse pas du bord droit */

/* Boutons « libellé + prix » sur UNE ligne (caution…) : moins hauts que la version empilée. */
.game .btn.btn-price.is-inline:has(.btn-label) { flex-direction: row; align-items: center; gap: 10px; padding-top: 6px; padding-bottom: 6px; }
.game .btn.btn-price.is-inline .btn-label { font-size: .74rem; }
.hire-pop-room { margin: -2px 0 2px; color: rgba(255, 255, 255, .65); font-size: .78rem; font-weight: 800; text-align: center; }
.game .unit-card .btn.btn-price.is-inline { min-height: 42px; height: 42px; padding-top: 0; padding-bottom: 0; } /* même hauteur que « Recruter plus » */
.fh-obj .pava-in { background: radial-gradient(circle at 50% 40%, #4a2f72, #1a0f2b 72%); } .fh-obj img { object-fit: contain; padding: 3px; }

/* « Mon équipe » (troupes) : pastille jaune « N troupes hors du QG » à côté des places → encart du détail. */
.sheet-slots.crew-away { border: 0; margin: 0; background: rgba(255, 196, 0, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 210, 63, .6); color: #ffd23f; font-family: inherit; cursor: pointer; }
.sheet-slots.crew-away .ico { color: #ffd23f; }
.sheet-slots.crew-away:hover { background: rgba(255, 196, 0, .32); }
.hire-pop .hire-pop-card.bank-pop-card.away-card { width: min(720px, 100%); }
.away-list { display: grid; gap: 6px; width: 100%; max-height: calc(50 * var(--u-svh)); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.away-list li { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 12px; background: rgba(0, 0, 0, .35); }
.away-list li .obj-g-troops { margin-left: auto; }
.away-list li .away-recall { flex: none; }
.away-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; object-fit: contain; }
.away-ico.is-ally { border-radius: 50%; background: rgba(255, 196, 0, .2); color: #ffd23f; }
.away-ico.is-ally .ico { width: 20px; height: 20px; }
.away-where { display: grid; min-width: 0; }
.away-where b { overflow: hidden; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.away-where small { color: rgba(255, 255, 255, .6); font-size: .72rem; font-weight: 700; }
.away-form { flex: none; margin: 0 0 0 auto; }
.away-list li .obj-g-troops { margin-left: auto; }
.away-list li:has(.away-form) .obj-g-troops { margin-left: auto; margin-right: 4px; }
.away-recall { padding: 7px 14px; border: 2px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font-family: inherit; font-size: .74rem; font-weight: 900; text-transform: uppercase; cursor: pointer; -webkit-text-stroke: 2px var(--edge); paint-order: stroke fill; box-shadow: 0 0 0 2px var(--edge); }
.away-recall:hover { background: rgba(255, 255, 255, .18); }

/* Fiche d'un bâtiment de famille protégé : texte à gauche (plus petit), compte à rebours en grand à droite. */
.prof-attack-off.obj-shield-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; text-align: left; }
.obj-shield-box > span { font-size: .78rem; line-height: 1.3; }
.obj-shield-box > b { padding-left: 12px; border-left: 1px solid rgba(255, 210, 63, .35); color: #ffd23f; font-size: 1.45rem; font-weight: 900; font-variant-numeric: tabular-nums; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }

/* Encart « Troupes hors du QG » : rappel avec quantités (une ligne par type), bouton à droite. */
.away-form { display: grid; grid-column: 1 / -1; gap: 6px; margin: 4px 0 0; }
.away-row { display: flex; align-items: center; gap: 8px; }
.away-unit { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #3a2156; }
.away-unit-name { flex: 1; min-width: 0; overflow: hidden; font-size: .82rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.away-unit-name b { color: rgba(255, 255, 255, .6); font-size: .74rem; }
.away-form .away-recall { justify-self: end; }
/* « Mon équipe » mobile : la place de la croix n'est réservée qu'à la 1re ligne (titre + places) ;
   « N troupes hors du QG » et « Voir les troupes » tiennent ensemble sur la 2e ligne. */
@media (max-width: 640px) {
    [data-view-root="crew"] .sheet-head { padding-right: 44px; gap: 8px; }
    [data-view-root="crew"] .sheet-head > .sheet-slots:not(.crew-away) { margin-right: 0; }
    [data-view-root="crew"] .sheet-head .crew-away { padding-right: 10px; font-size: .78rem; }
    [data-view-root="crew"] .sheet-head .crew-away + .crew-catalog { height: 30px; margin-left: auto; padding: 0 11px 0 8px; font-size: .72rem; }
}

/* Famille › Renforts : état vide encadré, règle dans un encart d'information, « Quitter » séparé. */
.fam-empty.is-box { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 14px 16px; border: 2px dashed rgba(214, 196, 255, .3); border-radius: 14px; background: rgba(0, 0, 0, .3); text-align: left; }
.fam-empty.is-box > .ico { flex: none; width: 26px; height: 26px; padding-right: 12px; border-right: 1px solid rgba(255, 255, 255, .15); color: #ffd23f; box-sizing: content-box; }
.fam-empty.is-box span { display: grid; gap: 2px; font-size: .8rem; line-height: 1.35; }
.fam-empty.is-box b { color: #fff; font-size: .9rem; font-weight: 900; }
.fam-share.is-info { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); text-align: left; }
.fam-share.is-info > .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #b9a2ff; }
.fam-leave { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }

/* Famille › Renforts : « Envoyer des renforts » → encart du choix du membre → vue reinforce (les troupes). */
.fam-send-reinf { margin: 6px 0 4px; }
.hire-pop .hire-pop-card.bank-pop-card.reinf-to-card { width: min(480px, 100%); }
.reinf-to-list { display: grid; gap: 6px; width: 100%; max-height: calc(55 * var(--u-svh)); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.reinf-to { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 12px 6px 6px; border: 2px solid transparent; border-radius: 12px; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.reinf-to:hover:not([disabled]) { border-color: rgba(127, 220, 78, .6); background: rgba(127, 220, 78, .12); }
.reinf-to .pava { flex: none; width: 38px; height: 38px; }
.reinf-to-txt { display: grid; flex: 1; min-width: 0; }
.reinf-to-txt b { overflow: hidden; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.reinf-to-txt small { color: rgba(255, 255, 255, .6); font-size: .74rem; font-weight: 700; }
.reinf-to-state { flex: none; color: rgba(255, 255, 255, .7); font-size: .72rem; font-weight: 800; }
.reinf-to-state .ico { width: 18px; height: 18px; }
.reinf-to.is-busy { opacity: .5; cursor: default; }
.reinf-to.is-busy .reinf-to-state { color: #ffd23f; }

/* Renforts REÇUS : pastille « +N » verte (HUD + cartes), carte à part pour un type que je n'ai pas. */
.crew-reinf { background: linear-gradient(180deg, #8ef05a, #2fa82a); }
.unit-where .is-help { background: rgba(47, 168, 42, .75); }
.unit-where .is-help .ico { color: #c8ffb0; }
.card-owned.is-help { background: linear-gradient(180deg, #8ef05a, #2fa82a); }
.card-lv.is-help { background: rgba(47, 168, 42, .35); border-color: rgba(142, 240, 90, .7); color: #c8ffb0; }
.unit-card.is-help-card { border-color: rgba(142, 240, 90, .45); background: linear-gradient(180deg, rgba(47, 168, 42, .14), rgba(0, 0, 0, .2)); }
.help-card-txt { margin: 6px 0 10px; color: rgba(255, 255, 255, .7); font-size: .78rem; line-height: 1.35; text-align: center; }
.help-card-from { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.help-card-from li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .35); }
.help-card-who { display: grid; flex: 1; min-width: 0; font-size: .8rem; font-weight: 800; }
.help-card-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-card-who small { color: #8ef05a; font-size: .72rem; font-variant-numeric: tabular-nums; }
.help-card-from form { flex: none; margin: 0; }
.crew-thumb.is-help b { background: linear-gradient(180deg, #8ef05a, #2fa82a); }
.help-card-who { text-align: left; justify-items: start; }
/* Pastilles « où sont les troupes » : plus bas (jamais sur le « ×N »), toutes du même fond sombre (pas de code couleur). */
.unit-where { top: 48px; gap: 4px; }
.unit-where > span, .unit-where .is-ally, .unit-where .is-garr, .unit-where .is-help { background: rgba(0, 0, 0, .6); }
.unit-where .ico, .unit-where .is-ally .ico, .unit-where .is-garr .ico, .unit-where .is-help .ico { color: #fff; }
@media (max-width: 640px) { .unit-where { top: 42px; } }
/* « Mon équipe » : « N troupes hors du QG » toujours collée à gauche (juste après les places) ; en mobile, « Voir les troupes » aussi à gauche, à la suite. */
[data-view-root="crew"] .sheet-head .crew-away { margin-left: 0; margin-right: 0; }
@media (max-width: 1240px) { [data-view-root="crew"] .sheet-head { justify-content: flex-start; } }
@media (max-width: 640px) { [data-view-root="crew"] .sheet-head .crew-away + .crew-catalog { margin-left: 0; } }
/* Pastille « +N » des renforts reçus : petite croix (renvoyer, encart de confirmation) ; bulle = qui + temps restant. */
.unit-where .is-help { padding-right: 3px; }
.help-x { display: grid; place-items: center; width: 16px; height: 16px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer; }
.help-x .ico { width: 10px; height: 10px; }
.help-x:hover { background: #d61f3a; }
.help-tip-row { display: block; font-variant-numeric: tabular-nums; }
.hire-pop .hire-pop-card.bank-pop-card.sendback-card { width: min(440px, 100%); }
.sendback-card .help-card-from { width: 100%; }
.help-who-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Vignettes sous le carrousel : TOUJOURS sur une ligne ; elles rétrécissent quand il y en a beaucoup. */
.crew-thumbs { flex-wrap: nowrap; gap: min(8px, 1.4%); }
.crew-thumb { flex: 0 1 52px; width: auto; min-width: 0; height: auto; aspect-ratio: 1; }
.unit-ava.crew-thumb-ava { width: 77%; height: auto; aspect-ratio: 40 / 46; }
.unit-ava.crew-thumb-ava::before { height: auto; aspect-ratio: 1; }
.crew-thumb-slot { width: 65%; height: auto; aspect-ratio: 1; }

/* Famille › membres : [qui] [XP sur une ligne] [grade] [menu de gestion des chefs]. */
.fam-member { grid-template-columns: minmax(0, 1fr) auto auto 30px; }
.fam-member .fam-given { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fam-member .fam-given b { font-size: .78rem; }
.fam-member .fam-given small { font-size: .6rem; }
.fam-admin-gap { width: 30px; }
.fam-admin { position: relative; }
.fam-admin-btn { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--edge); border-radius: 9px; background: linear-gradient(180deg, #ff6b7f, #c41f3a); color: #fff; cursor: pointer; list-style: none; box-shadow: 0 2px 0 var(--edge); }
.fam-admin-btn::-webkit-details-marker { display: none; }
.fam-admin-btn .ico { width: 15px; height: 15px; }
.fam-admin[open] .fam-admin-btn { filter: brightness(1.15); }
.fam-admin-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: grid; gap: 6px; min-width: 170px; padding: 8px; border: 2px solid var(--edge); border-radius: 12px; background: linear-gradient(180deg, #2c1a44, #170d24); box-shadow: 0 3px 0 var(--edge), 0 12px 26px rgba(0, 0, 0, .5); }
.fam-admin-menu form { margin: 0; }
.fam-admin-menu .fam-act { width: 100%; }
/* Mobile : 4 colonnes aussi (qui · XP apportée · grade · roue) — avec 3, le grade tombait dans la colonne de 30 px de la roue et la roue passait à la ligne. */
@media (max-width: 520px) { .fam-member { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px 7px; } .fam-member .fam-given b { font-size: .72rem; } }
.fam-role { white-space: nowrap; }

/* Historique des combats : « Log » (journal texte) à gauche de « Revoir », plus petit. */
.fh-btns { display: inline-flex; align-items: center; gap: 6px; }
.fh-replay { min-height: 32px; padding: 0 10px; font-size: .74rem; }
.fh-replay .ico { width: 12px; height: 12px; }
.fh-log { min-height: 32px; padding: 0 10px; border: 2px solid rgba(214, 196, 255, .45); border-radius: 10px; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: .74rem; font-weight: 900; text-transform: uppercase; cursor: pointer; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; box-shadow: 0 2px 0 var(--edge); }
.fh-log:hover { border-color: rgba(214, 196, 255, .85); background: rgba(255, 255, 255, .1); }
@media (max-width: 520px) { .fh-btns { grid-column: 1 / -1; justify-content: center; } .fh-btns .fh-replay { grid-column: auto; } }

/* Journal du combat (vue fightlog). */
.sheet--fightlog { width: min(760px, 100%); }
.fl-title i { color: #ffd23f; font-style: normal; }
.fl-result { margin: 4px 0 14px; font-size: .9rem; font-weight: 900; text-transform: uppercase; }
.fl-result.is-win { color: #8ef05a; }
.fl-result.is-loss { color: #ff6b7f; }
.fl-forces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.fl-side { padding: 10px 12px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, .3); }
.fl-side.is-att { box-shadow: inset 3px 0 0 #ff4f6d; }
.fl-side.is-def { box-shadow: inset 3px 0 0 #4aa8ff; }
.fl-side-title { margin: 0 0 6px; color: rgba(255, 255, 255, .7); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.fl-side-title b { color: #fff; }
.fl-side ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fl-side li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: .8rem; }
.fl-side li small { color: rgba(255, 255, 255, .55); }
.fl-hp { color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.fl-lines { display: grid; gap: 2px; max-height: calc(46 * var(--u-svh)); margin: 0 0 14px; padding: 6px; overflow-y: auto; border: 2px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, .35); list-style: none; font-size: .8rem; line-height: 1.4; }
.fl-lines li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; padding: 3px 6px; border-radius: 6px; }
.fl-lines li.is-att { box-shadow: inset 2px 0 0 rgba(255, 79, 109, .7); }
.fl-lines li.is-def { box-shadow: inset 2px 0 0 rgba(74, 168, 255, .7); }
.fl-lines li:nth-child(even) { background: rgba(255, 255, 255, .03); }
.fl-lines time { color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
.fl-lines em { color: #ffd23f; font-style: normal; font-weight: 900; }
.fl-crit, .fl-rip { margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: .7rem; font-weight: 900; }
.fl-crit { background: rgba(255, 197, 49, .2); color: #ffd23f; }
.fl-rip { background: rgba(185, 162, 255, .18); color: #cdbbff; }
.fl-ab span { display: inline-flex; align-items: center; gap: 6px; color: #ffb547; font-weight: 900; }
.fl-ab .ico { width: 13px; height: 13px; }
.fl-end span { color: #fff; font-weight: 900; }
.fl-outcome { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: .84rem; }
.fl-outcome li { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.fl-res { width: 20px; height: 20px; }
@media (max-width: 560px) { .fl-forces { grid-template-columns: 1fr; } .fl-lines li { grid-template-columns: 46px minmax(0, 1fr); } }

/* Bouton d'action d'un message de personnage (« Déposer mes troupes ») : orange, distinct de « Récupérer ». */
.npc-gift.npc-action { background: var(--cta); }

/* Grade et roue de gestion d'un membre : texte / picto blancs toujours contourés de noir. */
.fam-role:not(.r-boss) { color: #fff; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.fam-admin-btn .ico { filter: drop-shadow(1px 0 0 var(--edge)) drop-shadow(-1px 0 0 var(--edge)) drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 -1px 0 var(--edge)); }

/* ---------------- Blason des familles (App\Game\Crest, helper family_crest) ---------------- */
.crest { flex: none; display: block; width: 40px; height: 44px; overflow: visible; filter: drop-shadow(0 2px 0 var(--edge)); }
.crest.is-big { width: 76px; height: 84px; filter: drop-shadow(0 4px 0 var(--edge)) drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.crest.is-row { width: 34px; height: 38px; }
.crest.is-xs { width: 17px; height: 19px; margin-right: 4px; vertical-align: -4px; filter: none; }
.hud-family .crest.is-xs { display: inline-block; }
.prof-fam .crest.is-xs { width: 20px; height: 22px; }
.obj-pin-name .obj-crest { display: inline-block; width: 1.15em; height: 1.27em; margin-right: .3em; vertical-align: -.28em; filter: none; }
.fam-tag-chip { color: #ffd23f; font-weight: 900; }
@media (max-width: 640px) { .crest.is-big { width: 60px; height: 66px; } }
/* Éditeur (Réglages du Parrain) : aperçu + choix de la forme, du picto et des 2 couleurs. */
.fam-crest-edit { display: grid; gap: 12px; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.crest-edit { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.crest-preview { display: grid; place-items: center; width: 120px; height: 130px; border: 2px solid var(--edge); border-radius: 16px; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .12), rgba(0, 0, 0, .35)); }
.crest-preview .crest.is-big { width: 86px; height: 95px; }
.crest-picks { display: grid; gap: 10px; min-width: 0; }
.crest-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.crest-row legend { width: 100%; margin-bottom: 5px; padding: 0; color: rgba(255, 255, 255, .7); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.crest-opt { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid rgba(255, 255, 255, .14); border-radius: 10px; background: rgba(0, 0, 0, .3); color: #fff; cursor: pointer; transition: border-color .15s, transform .15s; }
.crest-opt input { position: absolute; opacity: 0; pointer-events: none; }
.crest-opt:hover { border-color: rgba(255, 255, 255, .4); }
.crest-opt:has(input:checked) { border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255, 210, 63, .35); transform: translateY(-1px); }
.crest-opt:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.crest-opt.is-shape svg { width: 22px; height: 24px; fill: rgba(255, 255, 255, .85); }
.crest-opt.is-icon .ico { width: 20px; height: 20px; }
.crest-opt.is-color i { width: 22px; height: 22px; border: 2px solid var(--edge); border-radius: 50%; }
@media (max-width: 560px) { .crest-edit { grid-template-columns: 1fr; justify-items: center; } .crest-picks { justify-items: stretch; width: 100%; } .crest-opt { width: 34px; height: 34px; } }
.crest-opt.cc-pink i { background: #ff4f7e; }
.crest-opt.cc-orange i { background: #ff8a2e; }
.crest-opt.cc-gold i { background: #ffc531; }
.crest-opt.cc-green i { background: #34c76f; }
.crest-opt.cc-teal i { background: #22b8a8; }
.crest-opt.cc-blue i { background: #3f8cff; }
.crest-opt.cc-violet i { background: #7b4fe0; }
.crest-opt.cc-red i { background: #c41f3a; }
.crest-opt.cc-plum i { background: #4a1760; }
.crest-opt.cc-bronze i { background: #9a5b26; }
.crest-opt.cc-black i { background: #1c1426; }
.crest-opt.cc-silver i { background: #b9b4c8; }

/* Recherche (téléphone) : joueurs / familles. */
.sheet--search { width: min(560px, 100%); }
.search-tabs { margin-bottom: 12px; }
.search-form { display: flex; gap: 8px; margin-bottom: 14px; }
.search-form input { flex: 1; min-width: 0; }
.search-form .fam-act { display: inline-flex; align-items: center; gap: 6px; }
.search-form .fam-act .ico { width: 14px; height: 14px; }
.search-hint { display: flex; align-items: center; justify-content: center; gap: 8px; }
.search-hint .ico { width: 18px; height: 18px; opacity: .7; }
.search-list .rank-who { display: grid; min-width: 0; }
.search-list .rank-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-list .rank-who small { color: rgba(255, 255, 255, .62); font-size: .74rem; }
.sheet--search .search-list .rank-row { grid-template-areas: "ava who val"; grid-template-columns: auto minmax(0, 1fr) auto; }
.search-list .fam-row > .ico { flex: none; width: 14px; height: 14px; opacity: .6; }
/* Dock du téléphone à 4 applis (Réglages, Avatar, Parrainage, Quitter) : réparties sur toute la largeur. */
.phone-dock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: 4px; padding: 10px 8px 8px; }
.phone-dock .phone-app { min-width: 0; max-width: 100%; }
.phone-dock .phone-app-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .phone-dock { gap: 2px; padding: 9px 6px 7px; } }

/* Dock : même verre que les applis, un cran plus foncé (Réglages, Avatar, Parrainage) ; seule « Quitter » reste rouge. */
.phone-dock .phone-app:not(.phone-app--power) .phone-icon {
    background: linear-gradient(160deg, rgba(38, 28, 56, .8), rgba(8, 4, 16, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 14px rgba(0, 0, 0, .42);
}
.phone-dock .phone-app:not(.phone-app--power) .phone-icon::after { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .16)); }

/* Réglages de la famille : sous-onglets Blason / Description. */
.fam-subtabs { margin-bottom: 14px; }
.fam-crest-edit { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* Interrupteur on / off (recrutement de la famille) : piste + pastille qui glisse, vert quand ouvert. */
.fam-toggle-form { margin: 0 0 14px; }
.fam-toggle { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(0, 0, 0, .28); cursor: pointer; }
.fam-toggle-form .fam-toggle { margin: 0; }
.fam-toggle.is-readonly { cursor: default; }
.fam-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { position: relative; flex: none; width: 50px; height: 28px; border: 2px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #4a3a5e, #2a1c3c); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45); transition: background .2s; }
.toggle-track i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border: 2px solid var(--edge); border-radius: 50%; background: linear-gradient(180deg, #fff, #cfc8dc); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); transition: transform .22s cubic-bezier(.3, 1.5, .5, 1); }
.fam-toggle.is-on .toggle-track { background: linear-gradient(180deg, #8ef05a, #2fa82a); }
.fam-toggle.is-on .toggle-track i { transform: translateX(22px); }
.fam-toggle input:focus-visible + .toggle-track { outline: 2px solid #fff; outline-offset: 2px; }
.fam-toggle-txt { display: grid; min-width: 0; }
.fam-toggle-txt b { color: #fff; font-weight: 900; text-transform: uppercase; font-size: .86rem; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.fam-toggle-txt small { color: rgba(255, 255, 255, .65); font-size: .78rem; }
.fam-settings + .fam-toggle-form { margin-top: 14px; }.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* Réglages › Quitter : dissolution de la famille (Parrain seul). */
.fam-danger { display: grid; gap: 14px; padding: 16px; border: 2px dashed rgba(255, 90, 110, .55); border-radius: 14px; background: rgba(120, 10, 30, .18); }
.fam-danger p { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.fam-danger p .ico { flex: none; width: 20px; height: 20px; color: #ff6b7f; }
.fam-danger p span { display: grid; gap: 4px; color: rgba(255, 255, 255, .78); font-size: .88rem; }
.fam-danger p b { color: #fff; font-weight: 900; text-transform: uppercase; }.fam-tabs.seg .rank-tab, .fam-subtabs.seg .rank-tab { font-weight: 800; } /* en 900 petit, le « G » se refermait (« RÉOLAGES ») */
.crest-opt.cc-lime i { background: #9be23c; }
.crest-opt.cc-sky i { background: #5ccfff; }
.crest-opt.cc-magenta i { background: #e23ce0; }
.crest-opt.cc-navy i { background: #22357e; }
.crest-opt.cc-emerald i { background: #0e7d55; }

.crest-opt.cc-white i { background: #ffffff; }
.crest-opt.cc-mint i { background: #7fe8c4; }
.crest-opt.cc-chocolate i { background: #5b3420; }

/* Éditeur du blason : l'aperçu reste visible pendant qu'on fait défiler les options (collé en haut de la fenêtre). */
.crest-edit { align-items: start; }
.crest-preview { position: sticky; top: 8px; z-index: 3; }
@media (max-width: 560px) {
    /* Mobile : aperçu plus compact, en bandeau collé en haut, sur un fond pour masquer les options qui passent dessous. */
    .crest-edit { justify-items: stretch; }
    .crest-preview { top: 0; width: 100%; height: 96px; border-radius: 0 0 16px 16px; background: linear-gradient(180deg, #2e1b47, #24153a); box-shadow: 0 8px 14px rgba(0, 0, 0, .35); }
    .crest-preview .crest.is-big { width: 66px; height: 73px; }
}

/* Historique des combats : « Revoir » plus petit, « Log » avec picto (graisse 800 : en 900 petit, le « G » se refermait en « O »). */
.game .fh-btns .btn.fh-replay { height: 30px; min-height: 30px; padding: 0 11px; gap: 5px; font-size: .72rem; }
.game .fh-btns .btn.fh-replay .ico { width: 11px; height: 11px; }
.fh-log { display: inline-flex; align-items: center; gap: 5px; height: 30px; min-height: 30px; font-weight: 800; }
.fh-log .ico { width: 13px; height: 13px; filter: drop-shadow(1px 0 0 var(--edge)) drop-shadow(-1px 0 0 var(--edge)) drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 -1px 0 var(--edge)); }
.game .fh-btns .btn.fh-replay { border-radius: 9px; } /* même arrondi que « Log » (10 px) */

/* Journal du combat : KO (unités mises hors de combat) et soins des capacités. */
.fl-ko, .fl-heal { margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: .7rem; font-weight: 900; white-space: nowrap; }
.fl-ko { background: rgba(255, 79, 109, .22); color: #ff8a9b; }
.fl-heal { background: rgba(142, 240, 90, .18); color: #a8f07a; }
.fl-side-title .fl-ko { margin-left: 8px; }
.fl-ab > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.fl-ab > span > span:not(.fl-ko):not(.fl-crit):not(.fl-heal) { color: #ffb547; font-weight: 900; }
.fl-ab .fl-crit, .fl-ab .fl-ko, .fl-ab .fl-heal { margin-left: 0; }
/* Journal du combat : la fenêtre ne défile pas, seul le déroulé défile (en-tête, forces et bilan restent visibles). */
.sheet.sheet--fightlog { display: flex; flex-direction: column; overflow: hidden; }
.sheet--fightlog > * { flex: none; }
.sheet--fightlog .fl-lines { flex: 1 1 auto; min-height: 140px; max-height: none; overflow-y: auto; overscroll-behavior: contain; }

/* Bulle du niveau d'un type de troupe : XP du niveau, barre de progression. */
.card-lv.has-tip { cursor: help; }
.stat-float .lv-bar { display: block; position: relative; height: 8px; margin: 6px 0 4px; overflow: hidden; border: 2px solid var(--edge); border-radius: 6px; background: rgba(0, 0, 0, .45); }
.stat-float .lv-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(180deg, #ffe27a, #f0a000); }
.stat-float small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .6); }
.stat-float .lv-bar > i.p0 { width: 0%; }
.stat-float .lv-bar > i.p5 { width: 5%; }
.stat-float .lv-bar > i.p10 { width: 10%; }
.stat-float .lv-bar > i.p15 { width: 15%; }
.stat-float .lv-bar > i.p20 { width: 20%; }
.stat-float .lv-bar > i.p25 { width: 25%; }
.stat-float .lv-bar > i.p30 { width: 30%; }
.stat-float .lv-bar > i.p35 { width: 35%; }
.stat-float .lv-bar > i.p40 { width: 40%; }
.stat-float .lv-bar > i.p45 { width: 45%; }
.stat-float .lv-bar > i.p50 { width: 50%; }
.stat-float .lv-bar > i.p55 { width: 55%; }
.stat-float .lv-bar > i.p60 { width: 60%; }
.stat-float .lv-bar > i.p65 { width: 65%; }
.stat-float .lv-bar > i.p70 { width: 70%; }
.stat-float .lv-bar > i.p75 { width: 75%; }
.stat-float .lv-bar > i.p80 { width: 80%; }
.stat-float .lv-bar > i.p85 { width: 85%; }
.stat-float .lv-bar > i.p90 { width: 90%; }
.stat-float .lv-bar > i.p95 { width: 95%; }
.stat-float .lv-bar > i.p100 { width: 100%; }

/* Journal du combat (révisé) : c'est la FENÊTRE qui défile ; le déroulé s'affiche en entier, sans défilement propre. */
.sheet.sheet--fightlog { display: block; overflow-y: auto; }
.sheet--fightlog .fl-lines { max-height: none; overflow: visible; }

/* Coffre de famille : bouton « Déposer » sur chaque ressource → encart avec le sélecteur de quantité. */
.fam-vault li { position: relative; }
.fam-give-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; padding: 4px 10px; border: 2px solid var(--edge); border-radius: 9px; background: linear-gradient(180deg, #8ef05a, #2fa82a); color: #fff; font: inherit; font-size: .72rem; font-weight: 800; text-transform: uppercase; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 var(--edge); cursor: pointer; }
.fam-give-btn .ico { width: 11px; height: 11px; }
.fam-give-btn:hover:not(:disabled) { filter: brightness(1.08); }
.fam-give-btn:disabled { opacity: .4; cursor: default; filter: grayscale(.6); }
.fam-give-card .hire-pop-name { display: flex; align-items: center; gap: 8px; }
.fam-give-res { width: 30px; height: 30px; }
.fam-give-card .qty-box { margin: 6px 0 12px; }
/* Boutiques pendant la bêta (is_beta) : tout sera remis à zéro au lancement */
.shop-beta { display: flex; align-items: flex-start; gap: 10px; max-width: 640px; margin: 18px auto 0; padding: 10px 14px; border: 2px dashed rgba(255, 168, 46, .75); border-radius: 12px; background: rgba(0, 0, 0, .45); text-align: left; }
.shop-beta > .ico { flex: none; width: 22px; height: 22px; color: #ffb02e; filter: drop-shadow(0 1px 0 var(--edge)); }
.shop-beta p { display: grid; gap: 2px; margin: 0; line-height: 1.35; }
.shop-beta b { color: #ffb02e; font-weight: 900; text-transform: uppercase; font-size: .86rem; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.shop-beta span { color: rgba(255, 255, 255, .88); font-size: .82rem; }
/* Contexte WebGL perdu (Android) : toile cachée, fond sombre au lieu du blanc (GameMap::watchContext) */
.is-gl-lost .maplibregl-canvas { visibility: hidden; }

/* Chargement d'une fenêtre qui traîne (réseau lent) : petit indicateur en haut, clics suivants ignorés (showView) */
.net-busy { position: fixed; top: 50%; left: 50%; z-index: 120; display: grid; place-items: center; width: 52px; height: 52px; translate: -50% -50%; border: 3px solid var(--edge); border-radius: 50%; background: linear-gradient(180deg, #2c1a44, #170d24); box-shadow: 0 3px 0 var(--edge), 0 8px 20px rgba(0, 0, 0, .5); pointer-events: none; }
.net-busy[hidden] { display: none; }
.net-busy span { width: 26px; height: 26px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #ffc531; border-radius: 50%; animation: net-spin .7s linear infinite; }
@keyframes net-spin { to { rotate: 1turn; } }
body.is-net-busy [data-view] { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .net-busy span { animation-duration: 2s; } }
/* Rôle d'une troupe (Units::ROLES, troop_role_tag) : petite étiquette colorée sous le nom, bulle = contres */
.unit-role { display: inline-flex; align-items: center; gap: 3px; margin: 2px auto 4px; padding: 1px 7px 1px 5px; border: 1px solid var(--edge); border-radius: 999px; font-size: .6rem; font-weight: 900; text-transform: uppercase; color: #fff; -webkit-text-stroke: 2px var(--edge); paint-order: stroke fill; cursor: help; }
.unit-role .ico { width: 11px; height: 11px; filter: drop-shadow(1px 0 0 var(--edge)) drop-shadow(-1px 0 0 var(--edge)) drop-shadow(0 1px 0 var(--edge)) drop-shadow(0 -1px 0 var(--edge)); }
.unit-role.r-fast { background: linear-gradient(180deg, #4fd2ff, #1a7fd0); }
.unit-role.r-heavy { background: linear-gradient(180deg, #ff8a5c, #d43a1f); }
.unit-role.r-guard { background: linear-gradient(180deg, #8ef05a, #2fa82a); }
.unit-role.r-elite { background: linear-gradient(180deg, #ffd96a, #e09a1c); }
.unit-role .stat-tip { display: none; }
/* Marche : membres de ma famille en route vers la même cible (Map::setRouteAllies) — bleu, un peu plus petits */
.route-pin.is-ally .route-pin-ava { width: 42px; height: 42px; background: linear-gradient(180deg, #7cc6ff, #2a6fd0); color: #fff; font-size: 1.1rem; box-shadow: 0 0 0 3px #5ab8ff, 0 4px 0 var(--edge), 0 0 18px rgba(90, 184, 255, .55); }
.route-pin.is-ally .route-pin-name { font-size: .74rem; }
.route-squad.is-ally .route-troops { scale: .8; transform-origin: 50% 100%; } /* pas sur l’enveloppe : MapLibre la place par transform, un scale la décalerait */
.route-squad.is-ally .route-troops-n { background: linear-gradient(180deg, #7cc6ff, #2a6fd0); }
/* Marche réduite (fight.js minimize) : pastille flottante en haut, sous les ressources ; clic = rouvrir */
.fight-march-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.march-pill { position: fixed; top: calc(76px + env(safe-area-inset-top)); left: 50%; z-index: 46; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 5px 14px 5px 5px; translate: -50% 0; border: 3px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #ff7352, #c4143a); box-shadow: 0 4px 0 var(--edge), 0 0 22px rgba(255, 79, 106, .55); color: #fff; font: inherit; cursor: pointer; animation: march-pill 1.4s ease-in-out infinite; }
.march-pill-ava { flex: none; width: 38px; height: 38px; border: 2px solid var(--edge); border-radius: 50%; background: #1a0f22; object-fit: cover; object-position: 50% 15%; }
.march-pill-txt { display: grid; min-width: 0; line-height: 1.05; text-align: left; }
.march-pill-txt small { overflow: hidden; font-size: .68rem; font-weight: 800; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.march-pill-n { font-size: 1.25rem; font-weight: 900; font-variant-numeric: tabular-nums; -webkit-text-stroke: 4px var(--edge); paint-order: stroke fill; }
@keyframes march-pill { 50% { box-shadow: 0 4px 0 var(--edge), 0 0 34px rgba(255, 79, 106, .9); } }
@media (max-width: 640px) { .march-pill { top: calc(104px + env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) { .march-pill { animation: none; } }
.fight[hidden] { display: none; } /* marche réduite en pastille */
.fight-mini { margin-top: 6px; min-width: 160px; }

/* Fonction réservée au Premium dans un combat / une marche (fight.js lockedPop) : encart + « Passer Premium » */
.fight-lock-pop { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(6, 3, 10, .55); }
.fight-lock-card { display: grid; justify-items: center; gap: 12px; width: min(340px, 100%); padding: 20px 18px 16px; border: 3px solid var(--edge); border-radius: 20px; background: linear-gradient(180deg, #2c1a44, #170d24); box-shadow: 0 6px 0 var(--edge), 0 18px 40px rgba(0, 0, 0, .6); text-align: center; }
.fight-lock-star { width: 40px; height: 40px; color: #ffd23f; filter: drop-shadow(0 2px 0 var(--edge)) drop-shadow(0 0 12px rgba(255, 210, 63, .6)); }
.fight-lock-txt { margin: 0; color: #fff; font-weight: 800; line-height: 1.35; }
.fight-lock-actions { display: grid; gap: 8px; width: 100%; }
.fight-lock-actions .btn { width: 100%; }@keyframes daily-pulse { 50% { transform: translateY(-3px) scale(1.03); } }
@keyframes daily-just { from { transform: scale(.4); opacity: 0; } }

/* Cartes d’unités : le nom remonte sur le bas de l’avatar (plus compact ; boutique, « Mon équipe »…) */
.unit-card .build-body h3 { position: relative; z-index: 2; margin-top: -16px; }
.daily-card-gifts b { overflow: visible; padding: 0 3px; } /* le contour des chiffres débordait de la boîte : rogné à droite */
.daily-card.is-today, .daily-card.is-big { padding-top: 18px; } /* place pour l’étiquette « Aujourd’hui » / « Gros lot » */

/* Présence (Services/Presence) : pastille verte « en ligne » en haut à droite de l'avatar du profil, devant la couronne */
.prof-online { position: absolute; top: 8px; right: 8px; z-index: 4; width: 13px; height: 13px; border: 2px solid var(--edge); border-radius: 50%; background: #3ddc84; box-shadow: 0 0 6px rgba(61, 220, 132, .55); cursor: help; }
.prof-online .stat-tip { display: none; }
.prof-seen { margin: 2px 0 0; color: rgba(255, 255, 255, .62); font-size: .8rem; font-weight: 700; }
.prof-seen.is-on { color: #7ff0a8; }
.fam-ava { position: relative; flex: none; display: inline-grid; }
.fam-online { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border: 2px solid var(--edge); border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px rgba(61, 220, 132, .8); }
/* « Mon équipe » : la barre de vie remonte sur le bas de l’avatar, le nom (remonté) peut la chevaucher dessous */
.unit-card .ava-wrap > .ava-hp { bottom: 14px; }

/* Étiquette de rôle (16/10/2026) : pastille noire, picto + libellé à la couleur du rôle, sans bordure ni contour */
.unit-role { margin: -3px auto 4px; padding: 2px 8px 2px 6px; border: 0; background: rgba(8, 4, 14, .72); color: var(--role); -webkit-text-stroke: 0; }
.unit-role .ico { color: var(--role); filter: none; }
.unit-role.r-fast { --role: #8ec8de; background: rgba(8, 4, 14, .72); }
.unit-role.r-heavy { --role: #dea084; background: rgba(8, 4, 14, .72); }
.unit-role.r-guard { --role: #a7d38c; background: rgba(8, 4, 14, .72); }
.unit-role.r-elite { --role: #e2c98c; background: rgba(8, 4, 14, .72); }
.unit-role { font-weight: 800; } /* en 900 et petit, le « G » de la police se referme (« Cooneur ») */
.rb-veteran { --rb1: #e6c7a1; --rb2: #8a5a2b; }
.rb-faithful { --rb1: #ffb3c7; --rb2: #c2185b; }

/* Connexion perdue (app.js, netShow) : voile plein écran au-dessus de tout, qui bloque le jeu pendant que le pouls réessaie */
.net-lost { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 16px; background: rgba(8, 5, 14, .72); backdrop-filter: blur(3px); animation: net-lost-in .25s ease-out; }
.net-lost[hidden] { display: none; }
.net-lost-card { display: grid; justify-items: center; gap: 8px; width: min(340px, 100%); padding: 24px 22px 20px; border: 3px solid var(--edge); border-radius: 22px; background: linear-gradient(180deg, #2c1a44, #170d24); box-shadow: 0 4px 0 var(--edge), 0 18px 40px rgba(0, 0, 0, .6); text-align: center; }
.net-lost-spin { width: 44px; height: 44px; margin-bottom: 4px; border: 4px solid rgba(255, 255, 255, .2); border-top-color: #ffc531; border-radius: 50%; animation: net-spin .8s linear infinite; }
.net-lost-title { margin: 0; font-size: 1.6rem; }
.net-lost-text { margin: 0; color: rgba(255, 255, 255, .85); font-weight: 700; line-height: 1.3; }
.net-lost-next { margin: 0; min-height: 1.3em; color: #ffc531; font-size: .9rem; font-weight: 800; }
.net-lost-retry { margin-top: 6px; min-width: 160px; }
@keyframes net-lost-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .net-lost, .net-lost-spin { animation: none; } }

/* Connexion lente (app.js, netEval) : picto « réseau » orange qui pulse à la place de l'horloge du tour + ligne dans son menu */
.island-turn .turn-net, .turn-menu-net { display: none; }
body.is-net-slow .island-turn .turn-clock { display: none; }
body.is-net-slow .island-turn .turn-net { display: inline-block; color: #ff8a3d; animation: net-slow 1.4s ease-in-out infinite; }
body.is-net-slow .turn-menu-net { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 138, 61, .16); color: #ffb27a; font-size: .78rem; font-weight: 800; line-height: 1.25; }
.turn-menu-net .ico { flex: none; color: #ff8a3d; }
@keyframes net-slow { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { body.is-net-slow .island-turn .turn-net { animation: none; } }

/* Menus des ressources / du tour recadrés dans l'écran (app.js, fitResMenu) : la pointe reste sous son compteur */
.res-menu::before { translate: var(--adx, 0px) 0; }

/* Soigner la garnison (fiche d'un bâtiment de famille) : jusqu'à 4 ressources, elles passent à la ligne plutôt que de déborder */
.game .btn.obj-heal { height: auto; min-height: 54px; white-space: normal; }
.game .btn.obj-heal .btn-cost { flex-wrap: wrap; row-gap: 2px; max-width: 100%; }

/* Chat : raccourci vers le forum, à côté de la pastille du salon */
.chat-chan { min-width: 0; }
.chat-forum { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border: 1px solid rgba(216, 200, 255, .35); border-radius: 999px; background: rgba(0, 0, 0, .4); color: #fff; font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.chat-forum .ico { width: 15px; height: 15px; color: #d8c8ff; }
.chat-forum:hover { border-color: rgba(216, 200, 255, .7); background: rgba(124, 92, 255, .25); }

/* Appli Espions : « Voir » au même gabarit réduit que « Revoir » de l'historique des combats */
.game .btn.fh-replay[data-spy-report] { height: 30px; min-height: 30px; padding: 0 11px; gap: 5px; border-radius: 9px; font-size: .72rem; }
.game .btn.fh-replay[data-spy-report] .ico { width: 11px; height: 11px; }

/* Le document du jeu ne défile jamais (sinon, après une rotation, Safari gardait la page décalée et les touchers tombaient à côté) */
html:has(body.game) { height: 100%; overflow: hidden; overscroll-behavior: none; }

/* Missions : récompense en cases (recrue = avatar, objet = picto de rareté, ressources, XP) */
.mis-rw { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.mis-rw-item { display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; padding: 9px 6px 8px; border: 2px solid rgba(214, 196, 255, .16); border-radius: 12px; background: rgba(0, 0, 0, .32); text-align: center; }
.mis-rw-item > b { max-width: 100%; padding: 0 2px; color: #fff; font-size: .78rem; font-weight: 900; line-height: 1.1; text-wrap: balance; overflow-wrap: break-word; -webkit-text-stroke: 2px var(--edge); paint-order: stroke fill; } /* jamais coupé : 2 lignes plutôt que « … » */
.mis-rw-item > small { color: rgba(255, 255, 255, .6); font-size: .6rem; font-weight: 800; line-height: 1.15; text-transform: uppercase; text-wrap: balance; }
.mis-rw-item.is-unit { border-color: rgba(142, 240, 90, .45); background: rgba(80, 160, 40, .16); }
.mis-rw-item.is-unit > small { color: #8ef05a; }
.mis-rw-item.is-gear { border-color: var(--rar); background: var(--rar-bg); }
.mis-rw-item.is-gear > small { color: var(--rar); }
.mis-rw-item.is-xp > b { color: #ffd23f; }
.mis-rw-res { width: 38px; height: 38px; margin-bottom: 2px; filter: drop-shadow(0 2px 0 var(--edge)); }
.mis-rw .unit-ava.mis-rw-ava { width: 46px; height: 52px; margin: 0 0 2px; }
.mis-rw .unit-ava.mis-rw-ava::before { height: 46px; }
.mis-rw .unit-ava.mis-rw-ava img { width: 46px; height: 52px; }
.mis-rw .unit-ava.mis-rw-ava.is-group img { width: 42px; height: 42px; }
.mis-rw .gear-badge.mis-rw-gear { width: 40px; height: 40px; margin-bottom: 4px; }
.mis-rw .gear-badge.mis-rw-gear .ico { width: 22px; height: 22px; }
.mis-rw-xp { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 2px; border: 2px solid var(--edge); border-radius: 50%; background: linear-gradient(180deg, #ffe26b, #f0a020); color: #2a1600; font-size: .78rem; font-weight: 900; box-shadow: 0 2px 0 var(--edge); }

/* Missions : attente avant la prochaine (ou la nouvelle tentative) — encart, compte à rebours en grand */
.mis-wait { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px dashed rgba(255, 210, 63, .45); border-radius: 14px; background: rgba(0, 0, 0, .5); }
.mis-wait-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 210, 63, .14); color: #ffd23f; }
.mis-wait-ico .ico { width: 24px; height: 24px; }
.mis-wait-txt { display: grid; gap: 2px; min-width: 0; }
.mis-wait-txt > span { color: rgba(255, 255, 255, .85); font-size: .84rem; font-weight: 800; line-height: 1.25; }
.mis-wait-txt > b { color: #ffd23f; font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.mis-wait-txt > small { color: rgba(255, 255, 255, .55); font-size: .74rem; font-weight: 700; font-style: italic; }
.mis-wait:not(.is-callback) { border-color: rgba(255, 120, 120, .45); }
.mis-wait:not(.is-callback) .mis-wait-ico { background: rgba(255, 90, 90, .14); color: #ff8a8a; }
.mis-rw:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } /* 4 gains (marchandises + XP) : une seule ligne */
.mis-rw:has(> :nth-child(4)) .mis-rw-item { padding-left: 3px; padding-right: 3px; }

/* Messages privés : « Voir les messages précédents » en tête de la conversation (20 de plus par clic, AJAX) */
.pm-older { display: flex; justify-content: center; padding: 4px 0 8px; list-style: none; }
.pm-older button { padding: 5px 14px; border: 1px solid rgba(216, 200, 255, .35); border-radius: 999px; background: rgba(0, 0, 0, .4); color: #d8c8ff; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.pm-older button:hover { border-color: rgba(216, 200, 255, .7); color: #fff; }
.pm-older button:disabled { opacity: .5; cursor: progress; }

/* Journal de combat : effectif de chaque pile au moment du coup (« Diablesse ×12 frappe Lascar ×30 ») */
.fl-n { color: #ffd23f; font-size: .8em; font-weight: 900; font-variant-numeric: tabular-nums; }
/* Cases de récompense : même hauteur de zone pour le visuel (avatar, ressource, objet, XP), calé en bas,
   pour que les montants et libellés de toutes les cases soient alignés ; 3 gains toujours sur une ligne. */
.mis-rw-item { grid-template-rows: 56px auto auto; }
.mis-rw-item > :first-child { align-self: end; margin-bottom: 4px; }
.mis-rw:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Missions : carte « Prochaine recrue » plus explicite (catégorie, production, comment la débloquer, missions restantes) */
.mis-next { align-items: center; padding: 10px 12px 10px 10px; }
.mis-next .unit-ava.mis-next-ava { width: 52px; height: 58px; }
.mis-next .unit-ava.mis-next-ava::before { height: 52px; }
.mis-next .unit-ava.mis-next-ava img { width: 52px; height: 58px; }
.mis-next .unit-ava.mis-next-ava.is-group img { width: 48px; height: 48px; }
.mis-next-txt { gap: 2px; }
.mis-next-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; overflow: visible; white-space: normal; }
.mis-next-how { color: #e8ddf5; font-size: .8rem; font-weight: 800; line-height: 1.25; }
.mis-next-step { display: grid; justify-items: center; gap: 1px; padding: 6px 12px; border-radius: 14px; text-align: center; }
.mis-next-step b { font-weight: 900; }
.mis-next-step small { color: rgba(255, 255, 255, .65); font-size: .62rem; font-weight: 800; text-transform: none; }
.mis-next-label { white-space: nowrap; }
@media (max-width: 520px) {
    .mis-next { flex-wrap: wrap; }
    .mis-next-step { display: flex; flex-basis: 100%; justify-content: center; align-items: baseline; gap: 8px; padding: 5px 10px; }
}

/* Effets des capacités sur un camp (gel, bouclier, rage…) : cadre plus large que les cartes, qui sont inclinées
   (leurs pointes et le bandeau du nom touchaient le bord du givre : halo qui paraissait rogné). */
.fight-fx { inset: -10px -16px; border-radius: 26px; }
@media (max-width: 640px) { .fight-fx { inset: -8px -9px; border-radius: 22px; } }

/* Journal de combat : pile blessée avant le combat (« dont N en état de combattre ») + note d'explication */
.fl-fit { color: #ff9a8a; font-weight: 800; }
.fl-note { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid #ff9a8a; border-radius: 8px; background: rgba(255, 120, 100, .1); color: rgba(255, 255, 255, .8); font-size: .8rem; font-weight: 700; line-height: 1.35; }
.fl-hp-head { margin: -2px 0 4px; color: rgba(255, 255, 255, .5); font-size: .6rem; font-weight: 700; text-align: right; text-transform: uppercase; }
.fl-hp .fl-arrow { width: 11px; height: 11px; margin: 0 2px; vertical-align: -1px; opacity: .6; }
.fl-hp b { color: #fff; }

/* Impersonation par un admin (back-office) : bandeau rouge en haut, au-dessus de tout, avec retour au compte */
.imp-bar { position: fixed; top: calc(env(safe-area-inset-top) + 6px); left: 50%; z-index: 960; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 16px); padding: 6px 8px 6px 14px; border: 2px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #d81e3c, #9c0f28); box-shadow: 0 3px 0 var(--edge), 0 8px 22px rgba(0, 0, 0, .5); color: #fff; font-size: .78rem; font-weight: 800; translate: -50% 0; white-space: nowrap; }
.imp-bar-txt { overflow: hidden; text-overflow: ellipsis; }
.imp-bar-left { font-variant-numeric: tabular-nums; }
.imp-bar-exit { flex: none; padding: 4px 12px; border: 2px solid var(--edge); border-radius: 999px; background: #fff; color: #9c0f28; font: inherit; font-weight: 900; cursor: pointer; }
.imp-bar-exit:disabled { opacity: .6; cursor: progress; }
body.is-impersonating [data-chat-toggle], body.is-impersonating .phone-dot { display: none !important; } /* chat et privés coupés pendant l'impersonation */
.imp-bar { top: auto; bottom: calc(env(safe-area-inset-bottom) + var(--dock-h, 52px) + 30px); } /* en bas, au-dessus des onglets : ne cache ni le tour ni les ressources */

/* --------------------------------------------------------------------------
   Tour radar (16/10/2026) : petit radar au-dessus des pastilles d'équipe (vert = rien en vue, rouge =
   attaque en approche, un point par attaquant qui avance vers le centre), grand radar dans la fenêtre.
   -------------------------------------------------------------------------- */
.radar-hud { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 2; display: block; width: 64px; height: 64px; padding: 0; border: 3px solid var(--edge); border-radius: 50%; background: none; box-shadow: 0 3px 0 var(--edge), 0 8px 18px rgba(0, 0, 0, .4); cursor: pointer; transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); }
.radar-hud:hover { transform: scale(1.06); }
.crew:has(.guide-chip) .radar-hud { bottom: calc(100% + 64px); }
@media (max-width: 999px) {
    .radar-hud { width: 52px; height: 52px; bottom: calc(100% + var(--rg, 6px)); }
    .crew:has(.guide-chip) .radar-hud { bottom: calc(100% + var(--rb, 42px) + 2 * var(--rg, 6px)); }
}
.radar-scope {
    --rc: 61, 220, 132; /* vert ; rouge en alerte */
    position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%;
    background:
        linear-gradient(rgba(var(--rc), .25), rgba(var(--rc), .25)) 50% 0 / 1px 100% no-repeat,
        linear-gradient(rgba(var(--rc), .25), rgba(var(--rc), .25)) 0 50% / 100% 1px no-repeat,
        repeating-radial-gradient(circle, transparent 0 calc(25% - 1px), rgba(var(--rc), .35) calc(25% - 1px) 25%),
        radial-gradient(circle, rgba(var(--rc), .22), rgba(6, 22, 14, .96) 70%);
    box-shadow: inset 0 0 0 2px rgba(var(--rc), .7), inset 0 0 16px rgba(var(--rc), .35);
}
.radar-scope.is-alert { --rc: 255, 59, 92; background-color: #2a0610; }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(var(--rc), .55), rgba(var(--rc), 0) 22%, transparent 100%); animation: radar-spin 2.6s linear infinite; }
.radar-scope.is-alert .radar-sweep { animation-duration: 1.4s; }
.radar-scope::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(var(--rc), .9); animation: radar-pulse 2s ease-out infinite; }
.radar-hq { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--rc)); box-shadow: 0 0 6px rgb(var(--rc)); translate: -50% -50%; }
.radar-dots { position: absolute; inset: 0; }
.radar-dot { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 8px; height: 8px; border: 1.5px solid #fff; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c, 0 0 0 0 rgba(255, 59, 92, .7); translate: -50% -50%; transition: left .2s linear, top .2s linear; animation: radar-blip 1s ease-in-out infinite; }
.radar-n { position: absolute; left: 50%; top: 6px; color: rgba(var(--rc), .9); font-size: .7rem; font-style: normal; font-weight: 900; translate: -50% 0; }
.radar-count { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border: 2px solid var(--edge); border-radius: 999px; background: #ff3b5c; color: #fff; font-size: .75rem; font-weight: 900; -webkit-text-stroke: 2px var(--edge); paint-order: stroke fill; }
.radar-count[hidden] { display: none; }
.radar-hud.is-alert { box-shadow: 0 3px 0 var(--edge), 0 0 18px rgba(255, 59, 92, .8); animation: radar-alert 1s ease-in-out infinite; }
@keyframes radar-spin { to { rotate: 1turn; } }
@keyframes radar-pulse { 0% { opacity: .9; scale: .3; } 100% { opacity: 0; scale: 1; } }
@keyframes radar-blip { 50% { box-shadow: 0 0 12px #ff3b5c, 0 0 0 5px rgba(255, 59, 92, 0); } }
@keyframes radar-alert { 50% { transform: scale(1.06); } }
/* Fenêtre Radar */
.sheet--watch { width: min(460px, 100%); }
.watch-range { margin: 0 0 10px; color: rgba(255, 255, 255, .7); font-size: .85rem; font-weight: 700; text-align: center; }
.watch-scope-wrap { display: grid; place-items: center; margin: 4px 0 14px; }
.radar-scope.is-big { width: min(300px, calc(70 * var(--u-vw))); height: auto; aspect-ratio: 1; border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px rgba(var(--rc), .7), inset 0 0 30px rgba(var(--rc), .35), 0 10px 30px rgba(0, 0, 0, .5); }
.radar-scope.is-big .radar-dot { width: 13px; height: 13px; border-width: 2px; }
.radar-scope.is-big .radar-hq { width: 10px; height: 10px; }
.watch-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.watch-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 2px solid rgba(255, 59, 92, .45); border-radius: 14px; background: rgba(255, 59, 92, .12); }
.watch-who { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.watch-who b { overflow: hidden; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; }
.watch-ava { display: grid; flex: none; place-items: center; width: 34px; height: 34px; overflow: hidden; border: 2px solid var(--edge); border-radius: 50%; background: #5b2a6e; font-weight: 900; }
.watch-ava img { width: 100%; height: 100%; object-fit: cover; }
.watch-dir { flex: none; color: rgba(255, 255, 255, .7); font-size: .78rem; font-weight: 800; }
.watch-time { flex: none; min-width: 52px; color: #ff8a9a; font-size: 1.05rem; font-variant-numeric: tabular-nums; text-align: right; -webkit-text-stroke: 2.5px var(--edge); paint-order: stroke fill; }
.watch-empty { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0; color: #7fdc4e; font-weight: 800; }
.watch-empty[hidden] { display: none; }
.watch-empty .ico { width: 16px; height: 16px; }
.watch-hint { margin: 12px 0 0; color: rgba(255, 255, 255, .55); font-size: .78rem; font-weight: 700; text-align: center; }
.watch-off { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 2px dashed rgba(255, 255, 255, .25); border-radius: 14px; background: rgba(0, 0, 0, .4); color: rgba(255, 255, 255, .8); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .radar-sweep, .radar-scope::after, .radar-dot, .radar-hud.is-alert { animation: none; } }

/* Fiche d'un entrepôt : stockage ajouté par ressource */
.sheet-stats .stat-res { width: 22px; height: 22px; flex: none; }

/* Maximum atteint mais relevé par un QG plus haut : bandeau sobre juste au-dessus du bouton, dans le flux (ne recouvre rien). */
.build-next-hq {
    display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 6px; padding: 4px 10px;
    font-size: .78rem; font-weight: 700; line-height: 1.15; color: #ffd76a; text-align: center;
    background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 210, 100, .35); border-radius: 10px;
}
.build-next-hq .ico { font-size: .95rem; flex: none; }
/* La carte reste atténuée, mais pas le bandeau (l’opacité de la carte le ternissait). */
.build-card.is-locked:has(.build-next-hq) { opacity: 1; }
.build-card.is-locked:has(.build-next-hq) > :not(.build-cta):not(.build-back),
.build-card.is-locked .build-cta:has(.build-next-hq) .btn { opacity: .72; }
/* Cartes du menu de construction : « i » en haut à gauche (même bouton que les troupes du shop) = la carte se
   retourne ; verso = fiche détaillée (vie, travaux, nombre max, effet, prochaine évolution, coût). */
.build-card { position: relative; }
.build-card.is-flipped .build-back { display: flex; }
.build-card.is-guide .card-flip-btn, .build-card.is-fog .card-flip-btn { display: none; }
.build-back { gap: 6px; padding-top: 36px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.build-back .unit-back-kicker { margin: 0; }
.build-back .unit-back-stats { gap: 4px; }
.build-back .unit-back-stats > div { padding: 4px 8px; }
.build-back .unit-back-stats dt { font-size: .76rem; }
.build-back .unit-back-stats dd { font-size: .78rem; text-align: right; white-space: normal; }
.build-back .unit-back-stats dd small { display: block; color: #ffd76a; font-size: .7rem; font-weight: 700; }
.build-back .is-tiers dt { color: #fff; }
.build-back .is-tiers dd { color: #ffd76a; }
/* Verso des cartes (bâtiments, unités) : coût dans un encart comme les lignes de stats. */
.unit-back .back-cost { display: flex; align-items: center; padding: 4px 9px; border: 2px solid var(--edge); border-radius: 10px; background: rgba(0, 0, 0, .25); }
.build-back .back-cost { padding: 4px 8px; }
.unit-back:not(.build-back) { gap: 6px; }
.unit-back:not(.build-back) .unit-back-stats > div { padding-top: 4px; padding-bottom: 4px; }
/* Cagnotte du marché noir : marchandises sous les dollars (commission des ventes). */
.casino-pot-goods { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; }
.casino-pot-goods span { display: inline-flex; align-items: center; gap: 4px; }
.casino-pot-gico { width: 20px; height: 20px; }
.casino-pot-goods b { color: #fff; font-size: .95rem; font-weight: 900; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
/* Évolution d'un entrepôt : stockage ajouté ressource par ressource. */
.hq-pop-house .evo-store-head { display: block; padding: 2px 4px 0; border: 0; background: none; color: var(--sun); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.hq-pop-house .evo-store span { display: inline-flex; align-items: center; gap: 6px; }
.evo-res { width: 20px; height: 20px; flex: none; }

/* Mode vacances : pastille au-dessus du dock (clic = fenêtre), fenêtre des règles. */
.vac-bar { position: fixed; left: 50%; bottom: calc(var(--dock-h, 56px) + env(safe-area-inset-bottom) + 22px); z-index: 44; display: flex; align-items: center; gap: 7px; max-width: calc(100% - 24px); padding: 6px 14px 6px 10px; border: 2px solid var(--edge); border-radius: 999px; background: linear-gradient(180deg, #2fa3c9, #176f93); box-shadow: 0 3px 0 var(--edge), 0 8px 22px rgba(0, 0, 0, .45); color: #fff; font: inherit; font-size: .8rem; font-weight: 800; translate: -50% 0; white-space: nowrap; cursor: pointer; }
.vac-bar .ico { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 1.5px 0 var(--edge)); }
.vac-bar-txt { overflow: hidden; text-overflow: ellipsis; -webkit-text-stroke: 3px var(--edge); paint-order: stroke fill; }
.vac-bar-left { font-variant-numeric: tabular-nums; color: #d6f6ff; }
.sheet--vacation { width: min(520px, 100%); }
.vac-intro { margin: 0 0 10px; color: rgba(255, 255, 255, .8); font-size: .88rem; line-height: 1.4; }
.vac-status { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px; border: 2px solid var(--edge); border-radius: 14px; background: linear-gradient(180deg, rgba(47, 163, 201, .3), rgba(23, 111, 147, .2)); }
.vac-status p { margin: 0; color: rgba(255, 255, 255, .8); font-size: .82rem; }
.vac-status .vac-status-title { color: #fff; font-size: 1rem; font-weight: 900; text-transform: uppercase; }
.vac-badge { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 2px solid var(--edge); border-radius: 50%; background: #2fa3c9; color: #fff; }
.vac-badge .ico { width: 24px; height: 24px; }
.vac-rules { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.vac-rules li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); color: rgba(255, 255, 255, .85); font-size: .82rem; line-height: 1.35; }
.vac-rules .ico { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #7fd4f0; }
.vac-rules b { color: #fff; }
.vac-blocked { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 2px dashed rgba(255, 154, 46, .6); border-radius: 12px; background: rgba(255, 154, 46, .08); color: #ffc98a; font-size: .84rem; font-weight: 700; }
.vac-blocked .ico { width: 18px; height: 18px; flex: none; }
.vac-action { margin: 0; }
.vac-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; color: rgba(255, 255, 255, .7); font-size: .8rem; }
.vac-hint .ico { width: 15px; height: 15px; }
.prof-vac { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 3px 10px; border: 2px solid var(--edge); border-radius: 999px; background: #176f93; color: #fff; font-size: .78rem; font-weight: 800; }
.prof-vac .ico { width: 15px; height: 15px; }
.vac-bar { z-index: 39; } /* sous les fenêtres (#layer 40) */
.vac-rules em, .vac-rules strong { font-style: normal; color: #fff; font-weight: 900; }
@media (max-width: 640px) {
    /* Mobile : valise + compte à rebours seulement (le texte revient quand le retour est possible). */
    .vac-bar:has(.vac-bar-left:not([hidden])) .vac-bar-txt { display: none; }
    .vac-bar { padding: 6px 12px 6px 10px; }
}
/* Onglets segmentés à 2 onglets (recherche, combats, espions, marché…) : toute la largeur, moitié chacun
   (.rank-types prévoit 3 colonnes : avec 2 onglets, la 3e restait vide). */
.rank-types.seg:has(> .rank-tab:nth-of-type(2):last-of-type) { grid-template-columns: repeat(2, 1fr); }

/* Marché noir : historique des cours (mini-courbe 24 h dans chaque ligne, graphique 24 h / 7 j). */
/* Évolution du cours = bouton vers l'historique (picto courbe + flèche diagonale + %, bulle commune). */
.market-trend.mkt-hist-btn { display: inline-flex; align-items: center; gap: 3px; margin: 4px 0 0; padding: 2px 9px 2px 6px; border: 2px solid var(--edge); border-radius: 999px; background: rgba(0, 0, 0, .35); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.mkt-hist-btn:hover { background: rgba(0, 0, 0, .55); }
.mkt-hist-btn .ico { width: 13px; height: 13px; flex: none; }
.mkt-hist-btn .mkt-hist-ico { width: 15px; height: 15px; margin-right: 2px; color: rgba(255, 255, 255, .85); }
.market-trend.is-flat { color: rgba(255, 255, 255, .6); }
.mkt-chart { display: block; width: 100%; height: 100%; overflow: visible; }
.mkt-chart .mkt-line { stroke-width: 2; }
.mkt-chart .mkt-ref { stroke: rgba(255, 255, 255, .35); stroke-width: 1; stroke-dasharray: 4 4; }
.sheet--mktchart { width: min(680px, 100%); }
.mkt-goods.seg { margin: 4px 0 8px; }
.mkt-span.seg { margin: 0 0 12px; }
.mkt-tab-res { width: 20px; height: 20px; }
.mkt-now { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.mkt-now li { display: grid; gap: 2px; padding: 8px 10px; border: 2px solid var(--edge); border-radius: 12px; background: rgba(0, 0, 0, .25); text-align: center; }
.mkt-now span { color: rgba(255, 255, 255, .6); font-size: .72rem; font-weight: 700; }
.mkt-now b { color: #ffd23f; font-size: 1.05rem; font-weight: 900; }
.mkt-now b.is-up { color: #6ee7a0; } .mkt-now b.is-down { color: #ff8a8a; }
.mkt-big { position: relative; padding: 30px 10px 26px; border: 2px solid var(--edge); border-radius: 14px; background: rgba(0, 0, 0, .3); color: #6ee7a0; }
.mkt-big.is-down { color: #ff8a8a; }
.mkt-big .mkt-chart { height: 220px; }
.mkt-big .mkt-chart .mkt-line { stroke-width: 2.5; }
.mkt-big-y { position: absolute; top: 6px; left: 10px; right: 10px; display: flex; justify-content: space-between; color: rgba(255, 255, 255, .6); font-size: .72rem; font-weight: 700; }
.mkt-big-y b { color: #fff; }
.mkt-big-x { position: absolute; bottom: 5px; left: 10px; right: 10px; display: flex; justify-content: space-between; color: rgba(255, 255, 255, .5); font-size: .7rem; font-weight: 700; }
.mkt-legend { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: rgba(255, 255, 255, .6); font-size: .74rem; font-weight: 700; }
.mkt-legend-ref { width: 22px; border-top: 2px dashed rgba(255, 255, 255, .45); }
.mkt-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 18px; border: 2px dashed rgba(255, 255, 255, .2); border-radius: 14px; color: rgba(255, 255, 255, .65); font-size: .84rem; font-weight: 700; }
.mkt-empty .ico { width: 18px; height: 18px; flex: none; }
@media (max-width: 520px) {
    .mkt-big .mkt-chart { height: 170px; }
    .mkt-now b { font-size: .92rem; }
}
/* Modération (profil, file des signalements) : boutons hors de la ligne de texte + place pour leur ombre portée. */
.prof-mod-row { padding-bottom: 3px; align-items: flex-start; }
.prof-mod-row form { display: flex; margin: 0; }
/* Équipement des cartes de troupes (« Mon équipe ») : cases plus compactes (picto 40 → 30 px, 16/10/2026). */
.unit-gear .gear-slot { padding: 4px 4px 5px; }
.unit-gear .gear-slot .ico, .unit-gear .gear-slot.is-on .ico { width: 30px; height: 30px; }

/* Adresse email (confirmation différée) : « À confirmer » en orange dans les Réglages, correction repliée. */
.phone-row-value.is-todo { color: #ffb347; font-weight: 800; }
.email-change { margin-top: 14px; }
.email-change > summary { cursor: pointer; color: var(--muted); font-size: .85rem; font-weight: 700; text-decoration: underline; list-style: none; }
.email-change > summary::-webkit-details-marker { display: none; }
.email-change[open] > summary { margin-bottom: 10px; }
[data-view-root="confirmemail"] .acc-form + form { margin-top: 10px; }