/* ÉCHO — app front (carte + panneau + badges + mur).
   Variables de thème définies par ECHOTHEME (clair/sombre via html[data-theme]),
   avec fallback var(--x, défaut) — jamais de :root{} redéfini ici (convention CSS maison). */

#echo-app {
    position: relative;
    /* header 56 + nav basse 60 + safe-area ; dvh = hauteur réelle mobile */
    height: calc(100vh - 56px - 60px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - 56px - 60px - env(safe-area-inset-bottom, 0px));
    min-height: 380px;
}
#echo-map {
    height: 100%;
    width: 100%;
    background: var(--bg, #0b0e1a);
}

/* ---- pings ---- */
.echo-pin {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.echo-pin.epin {
    font-size: 18px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65));
}
/* Compte à rebours de rotation des jeux (24 h) */
#echo-countdown {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    background: var(--panel, #141a2e);
    border: 1px solid var(--accent, #d946ef);
    color: var(--ink, #e8ecf8);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4), 0 0 12px color-mix(in srgb, var(--accent, #d946ef) 40%, transparent);
}
#echo-countdown b { color: var(--accent, #d946ef); font-weight: 800; }
/* Écho spécial (cause/événement) : anneau arc-en-ciel animé */
.echo-pin.special {
    border: 3px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 0 0 3px transparent, 0 2px 8px rgba(0, 0, 0, .5);
    position: relative;
}
.echo-pin.special::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(#E40303, #FF8C00, #FFED00, #008026, #24408E, #732982, #E40303);
    z-index: -1;
    animation: echo-spin 3s linear infinite;
}
@keyframes echo-spin { to { transform: rotate(360deg); } }

/* ---- pins « arc » (style fluo + arcs concentriques, v0.19) ---- */
.echo-arc { position: relative; display: block; }
.echo-arc .arc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.echo-arc .arc-rot { transform-origin: 50px 50px; animation: echo-spin 7s linear infinite; }
.echo-arc .arc {
    fill: none;
    stroke: var(--ac, #d946ef);
    stroke-width: 6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px var(--ac, #d946ef));
}
.echo-arc .a1 { stroke-dasharray: 78 220; opacity: .95; }
.echo-arc .a2 { stroke-dasharray: 44 176; stroke-width: 5; opacity: .65; animation-direction: reverse; }
.echo-arc .arc-core {
    position: absolute; inset: 22%;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ac, #d946ef) 70%, #fff 30%), var(--ac, #d946ef));
    color: #fff; font-weight: 800; font-size: 13px; line-height: 1;
    box-shadow: 0 0 10px var(--ac, #d946ef), inset 0 0 4px rgba(255,255,255,.5);
    border: 1.5px solid rgba(255,255,255,.65);
}
/* grappe (compteur de ville) : noyau un peu plus gros + halo */
.echo-arc.grp .arc-core { inset: 18%; font-size: 14px; }
.echo-arc.grp .arc-rot { animation-duration: 10s; }
/* Écho spécial : arcs arc-en-ciel */
.echo-arc.special .arc { stroke: #fff; filter: drop-shadow(0 0 5px #ec4899) drop-shadow(0 0 8px #38bdf8); }
.echo-arc.special .arc-core {
    background: conic-gradient(#E40303, #FF8C00, #FFED00, #008026, #24408E, #732982, #E40303);
    animation: echo-spin 4s linear infinite;
}
/* ÉCHO TOWER : hub central, pulsation des ondes */
.echo-arc.tw .arc-rot { animation: tw-pulse 2.4s ease-in-out infinite; }
.echo-arc.tw .arc { stroke-width: 5; stroke-dasharray: 120 80; }
.echo-arc.tw .arc-core {
    inset: 12%;
    background: radial-gradient(circle at 35% 30%, #fb7fd0, #ec4899 60%, #b01e6f);
    box-shadow: 0 0 14px #ec4899, inset 0 0 5px rgba(255,255,255,.6);
}
.echo-arc.tw .tw-core .echo-tw-svg { display: block; filter: drop-shadow(0 0 2px rgba(0,0,0,.4)); }
@keyframes tw-pulse {
    0%, 100% { transform: scale(.86); opacity: .55; }
    50%      { transform: scale(1.06); opacity: 1; }
}
/* Tour EN APPEL (Appel VS ouvert) : halo doré qui pulse + arcs accélérés */
.echo-arc.tw.calling .arc { stroke: #fbbf24; stroke-width: 6; filter: drop-shadow(0 0 6px #fbbf24); }
.echo-arc.tw.calling .arc-rot { animation-duration: 1s; }
.echo-arc.tw.calling .arc-core { box-shadow: 0 0 0 0 rgba(251,191,36,.7); animation: tw-call 1.3s ease-out infinite; }
@keyframes tw-call {
    0%   { box-shadow: 0 0 0 0 rgba(251,191,36,.7); }
    100% { box-shadow: 0 0 0 16px rgba(251,191,36,0); }
}

/* ECHO HEART — Le Jardin du Monde : cœur (vert) + écho qui pulse autour */
.echo-arc.heart .arc-rot { animation-duration: 8s; }
.echo-arc.heart .arc { stroke-width: 4; }
.echo-arc.heart .arc-core {
    inset: 20%;
    background: radial-gradient(circle at 35% 30%, #ffffff, #eafff3);
    box-shadow: 0 0 12px var(--ac, #3fdf8e), inset 0 0 4px rgba(255,255,255,.7);
    border-color: rgba(255,255,255,.85);
    animation: heart-beat 2.6s ease-in-out infinite;
}
.echo-arc.heart .arc-core svg { display: block; filter: drop-shadow(0 0 1.5px rgba(0,0,0,.25)); }
.echo-arc.heart.big .arc-core { inset: 16%; }
.echo-arc.heart.big .arc-rot { animation-duration: 9s; }
.echo-arc.heart.big .arc { stroke-width: 5; }
@keyframes heart-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }

/* popup d'un Cœur (aperçu des 5 indicateurs) */
.heart-popup .leaflet-popup-content-wrapper { background: rgba(16,20,30,.93); color: #e7edf6; border-radius: 14px; box-shadow: 0 12px 44px rgba(0,0,0,.5); }
.heart-popup .leaflet-popup-tip { background: rgba(16,20,30,.93); }
.heart-popup .leaflet-popup-content { margin: 12px 14px; }
.heart-pop > b { font-size: 14px; letter-spacing: .02em; }
.heart-pop .hp-sub { font-size: 10px; letter-spacing: .22em; opacity: .5; text-transform: uppercase; margin: 2px 0 10px; }
.heart-pop .hp-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; }
.heart-pop .hp-row span { width: 78px; flex: none; opacity: .85; }
.heart-pop .hp-row i { flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; display: block; }
.heart-pop .hp-row i b { display: block; height: 100%; border-radius: 4px; }
.heart-pop .hp-row em { width: 24px; text-align: right; font-style: normal; font-variant-numeric: tabular-nums; opacity: .8; }
.heart-pop .hp-foot { margin-top: 9px; font-size: 10px; letter-spacing: .12em; opacity: .55; text-align: center; }

/* overlay plein écran : le Jardin du Monde (iframe Babylon) */
#echo-heart-overlay { position: fixed; inset: 0; z-index: 100000; background: #0b0e16; opacity: 0; pointer-events: none; transition: opacity .35s; }
#echo-heart-overlay.open { opacity: 1; pointer-events: auto; }
#echo-heart-overlay iframe { width: 100%; height: 100%; border: 0; display: block; }
body.echo-heart-open { overflow: hidden; }

/* ---- panneau ÉCHO TOWER ---- */
.echo-tower { padding: 2px 2px 8px; }
.echo-tower .tw-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.echo-tower .tw-head .echo-tw-svg { stroke: var(--accent, #d946ef); flex: 0 0 auto;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent, #d946ef) 60%, transparent)); }
.echo-tower h2 { margin: 0; font-size: 18px; letter-spacing: .04em; color: var(--accent, #d946ef); }
.echo-tower .tw-head p { margin: 2px 0 0; font-weight: 700; }
.tw-week {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    padding: 8px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 700;
    background: var(--panel2, #1c2540); border: 1px solid var(--line, #26304f);
}
.tw-week .tw-cd { margin-left: auto; color: var(--accent, #d946ef); }
.tw-modes { display: grid; gap: 8px; margin: 12px 0; }
.tw-mode {
    text-align: left; padding: 11px 13px; border-radius: 13px; cursor: pointer;
    border: 1px solid var(--line, #26304f); background: var(--panel, #141a2e); color: var(--ink, #e8ecf8);
    display: flex; flex-direction: column; gap: 3px; transition: transform .08s, border-color .15s;
}
.tw-mode b { font-size: 14px; }
.tw-mode small { font-weight: 600; opacity: .72; font-size: 11.5px; }
.tw-mode:not([disabled]):hover { transform: translateY(-1px); border-color: var(--accent, #d946ef); }
.tw-mode.m-solo { border-color: color-mix(in srgb, #f59e0b 55%, var(--line, #26304f)); }
.tw-mode[disabled] { opacity: .5; cursor: not-allowed; }
.tw-games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 4px 0 10px; }
.tw-game {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 8px 10px; border-radius: 11px; cursor: pointer; color: var(--ink, #e8ecf8);
    border: 1px solid var(--ac, #26304f); background: color-mix(in srgb, var(--ac, #141a2e) 14%, var(--panel, #141a2e));
}
.tw-game .tw-g-ico { font-size: 16px; color: var(--ac, #fff); }
.tw-game small { opacity: .7; font-weight: 600; font-size: 11px; }
.tw-defis h3, .tw-rank h3 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.tw-links { display: grid; gap: 7px; }
.echo-tower .meta.dim { font-size: 12px; opacity: .7; margin: 4px 0; }
.tw-weeklabel { font-size: 11.5px; font-weight: 700; opacity: .7; margin: 0 0 6px; }
ol.tw-board { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 5px; }
ol.tw-board li {
    display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 10px;
    background: var(--panel2, #1c2540); border: 1px solid var(--line, #26304f);
}
ol.tw-board .tw-bm { font-size: 14px; font-weight: 800; text-align: center; }
ol.tw-board .tw-bn { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol.tw-board .tw-bd { grid-column: 2; font-size: 10.5px; opacity: .65; }
ol.tw-board .tw-bp { grid-row: 1 / span 2; align-self: center; font-size: 16px; color: var(--accent, #d946ef); }
.tw-me { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; }
.tw-me b { color: var(--accent, #d946ef); }
.tw-palh { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.tw-badge { width: 190px; max-width: 70%; margin: 4px auto 10px; filter: drop-shadow(0 8px 22px rgba(0,0,0,.5)); }
.tw-badge svg { display: block; }
ul.tw-palm { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
ul.tw-palm li {
    padding: 7px 10px; border-radius: 10px; font-size: 12.5px;
    background: var(--panel2, #1c2540); border: 1px solid var(--line, #26304f);
    display: flex; flex-direction: column; gap: 1px; cursor: pointer;
}
ul.tw-palm li:hover { border-color: var(--accent, #d946ef); }
ul.tw-palm small { opacity: .6; font-size: 10.5px; }
.tw-rec {
    display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
    padding: 1px 6px; border-radius: 6px; vertical-align: middle;
    background: linear-gradient(90deg, #f59e0b, #ec4899); color: #fff;
}
.tw-mode.m-vs { border-color: color-mix(in srgb, #ef4444 50%, var(--line, #26304f)); }
.tw-mode.m-team { border-color: color-mix(in srgb, #10b981 50%, var(--line, #26304f)); }
.tw-mode.m-wager { border-color: color-mix(in srgb, #f59e0b 55%, var(--line, #26304f)); margin-top: 6px; }
/* panneau Appels VS / Team / Mise / Match */
.tw-vs, .tw-team, .tw-wager, .tw-match { margin: 4px 0 10px; padding: 10px; border-radius: 12px;
    background: var(--panel2, #1c2540); border: 1px solid var(--line, #26304f); }
.mt-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.mt-team { display: grid; gap: 4px; }
.mt-team > b { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.mt-slot { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; font-size: 12px;
    background: var(--panel, #141a2e); border: 1px solid var(--line, #26304f); }
.mt-slot span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-slot.human { border-color: color-mix(in srgb, var(--accent, #d946ef) 45%, var(--line, #26304f)); }
.mt-slot.ia { opacity: .7; }
.mt-slot.open span { color: var(--muted, #8b95b5); font-style: italic; }
.mt-head { font-size: 13px; margin-bottom: 4px; }
.mt-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tw-wcfg { display: grid; gap: 4px; margin: 8px 0; }
.tw-wcfg select {
    width: 100%; font: inherit; padding: 7px; border-radius: 9px;
    background: var(--panel, #141a2e); color: var(--ink, #e8ecf8); border: 1px solid var(--line, #26304f);
}
.tw-wcfg .echo-btn.small { margin-top: 6px; width: 100%; }
.tw-vsh { font-size: 11.5px; font-weight: 700; opacity: .8; margin: 4px 0 6px; }
.tw-callgames { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-bottom: 8px; }
ul.tw-calllist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
ul.tw-calllist li {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px;
    background: var(--panel, #141a2e); border: 1px solid var(--line, #26304f);
}
ul.tw-calllist li.here { border-color: var(--accent, #d946ef); }
.tw-calllist .tc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; }
.tw-calllist .tc-info small { opacity: .6; font-size: 10.5px; }
.echo-btn.small { min-height: 34px; padding: 6px 12px; font-size: 12px; width: auto; flex: 0 0 auto; }

/* ---- parcours : barre de filtres ---- */
.echo-pfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; align-items: center; }
.echo-pfilter select {
    font: inherit; padding: 7px 9px; border-radius: 9px;
    background: var(--panel2, #1c2540); color: var(--ink, #e8ecf8); border: 1px solid var(--line, #26304f);
}

/* ---- parcours : mode + classement de course (1v1/team) ---- */
.echo-pmode label { margin-right: 12px; font-weight: 700; }
ul.echo-race { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
ul.echo-race li {
    display: flex; align-items: center; gap: 8px; font-size: 11.5px;
    padding: 3px 8px; border-radius: 8px; background: var(--panel2, #1c2540);
}
ul.echo-race li > span { width: 18px; text-align: center; font-weight: 800; }
ul.echo-race li i { color: var(--muted, #8b95b5); font-style: normal; font-size: 10.5px; }
ul.echo-race li b { margin-left: auto; color: var(--accent, #d946ef); }

/* ---- échange de badges (panneau joueur) ---- */
.echo-trade { display: grid; gap: 6px; margin-top: 8px; }
.echo-trade:empty { margin: 0; }
.echo-trade .tr-l { font-size: 11px; font-weight: 700; color: var(--muted, #8b95b5); margin-top: 4px; }
.echo-trade select {
    width: 100%; font: inherit; padding: 8px; border-radius: 9px;
    background: var(--panel2, #1c2540); color: var(--ink, #e8ecf8); border: 1px solid var(--line, #26304f);
}
.echo-trade .tr-msg { margin: 4px 0 0; }

/* ---- onglet Échanges (Mon mur) ---- */
ul.echo-trades { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
ul.echo-trades li {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 12px;
    background: var(--card, #0f1424); border: 1px solid var(--line, #26304f);
}
ul.echo-trades li > div:first-child { flex: 1; min-width: 160px; font-size: 13px; }
ul.echo-trades small { display: block; margin-top: 3px; }
.tr-act { display: flex; gap: 6px; }
.echo-btn.small, .echo-btn2.small { width: auto; min-height: 36px; padding: 6px 12px; font-size: 12.5px; }

/* ---- onglet Actu (Mon mur) : fil complet ---- */
ul.echo-actu { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
ul.echo-actu li {
    border-radius: 11px; border: 1px solid var(--line, #26304f);
    background: var(--panel2, #1c2540); overflow: hidden;
}
ul.echo-actu li a, ul.echo-actu li > b {
    display: block; padding: 10px 12px; color: var(--ink, #e8ecf8); text-decoration: none; font-weight: 700; font-size: 13px;
}
ul.echo-actu li a:hover { background: color-mix(in srgb, var(--accent, #d946ef) 12%, transparent); }
ul.echo-actu small { display: block; margin-top: 3px; font-weight: 600; font-size: 10.5px; }
ul.echo-actu li.actu-champion { border-color: color-mix(in srgb, #fbbf24 50%, var(--line, #26304f)); }
ul.echo-actu li.actu-lead { border-color: color-mix(in srgb, #22c55e 45%, var(--line, #26304f)); }

/* ---- barre FIL D'ACTU (ticker en haut, sous le header) ---- */
#echo-feed {
    position: absolute; top: 0; left: 0; right: 0; z-index: 640;
    height: 30px; display: flex; align-items: center; padding: 0 12px;
    background: linear-gradient(90deg, rgba(20, 26, 46, .96), rgba(28, 37, 64, .96));
    border-bottom: 1px solid var(--line, #26304f);
    overflow: hidden; backdrop-filter: blur(4px);
}
.ef-txt {
    background: none; border: 0; padding: 0; color: #eef2ff; /* fixe : la barre a un fond foncé dans les 2 thèmes */
    font-size: 12.5px; font-weight: 700; cursor: pointer; text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ef-txt.ef-static { cursor: default; }
.ef-live { color: #4ade80; animation: ef-blink 1.4s infinite; }
.ef-ago { color: rgba(238, 242, 255, .6); font-weight: 600; font-size: 11px; }
@keyframes ef-blink { 50% { opacity: .25; } }

/* ---- cloche de notifications (haut-droit de la carte) ---- */
#echo-bell { position: absolute; top: 40px; right: 12px; z-index: 650; }
.echo-bell-btn {
    position: relative; width: 40px; height: 40px; border-radius: 50%;
    background: var(--panel, #141a2e); border: 1px solid var(--line, #26304f);
    color: var(--ink, #e8ecf8); font-size: 18px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.echo-bell-n {
    position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; line-height: 18px;
    padding: 0 4px; border-radius: 9px; font-size: 11px; font-weight: 800;
    background: #ef4444; color: #fff;
}
.echo-bell-pop {
    position: absolute; top: 46px; right: 0; width: 250px; max-height: 50vh; overflow: auto;
    background: var(--panel, #141a2e); border: 1px solid var(--line, #26304f);
    border-radius: 12px; padding: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.bell-item {
    padding: 8px 9px; border-radius: 9px; font-size: 12.5px; margin-bottom: 5px;
    background: var(--panel2, #1c2540); border: 1px solid var(--line, #26304f);
    display: flex; flex-direction: column; gap: 2px;
}
.bell-item.unread { border-color: var(--accent, #d946ef); }
.bell-item small { color: var(--muted, #8b95b5); font-size: 10.5px; }

/* ---- coin bas-gauche : pile connectés + météo/bonus ---- */
#echo-corner {
    position: absolute; left: 12px; bottom: 12px; z-index: 600;
    display: flex; flex-direction: column-reverse; gap: 8px; align-items: flex-start;
}

/* ---- joueurs connectés (présence) ---- */
#echo-online {
    width: 156px; padding: 9px 11px; border-radius: 14px;
    background: color-mix(in srgb, var(--panel, #141a2e) 92%, transparent);
    border: 1px solid var(--line, #26304f); box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    backdrop-filter: blur(4px);
}
#echo-online .ol-head { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--muted, #8b95b5); margin-bottom: 7px; }
#echo-online .ol-head b { color: var(--ink, #e8ecf8); }
#echo-online .ol-dot { color: #22c55e; }
#echo-online .ol-avs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
#echo-online .ol-av { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; border-radius: 50%; }
#echo-online .ol-av .echo-avatar { width: 30px; height: 30px; border: 2px solid var(--accent, #d946ef); }
#echo-online .ol-av:hover .echo-avatar { filter: brightness(1.15); }
#echo-online .ol-av.me .echo-avatar { border-color: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, .6); }
#echo-online .ol-more {
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    background: var(--panel2, #1c2540); border: 1px solid var(--line, #26304f);
    color: var(--ink, #e8ecf8); font-size: 11px; font-weight: 800;
}
#echo-online .ol-all {
    width: 100%; padding: 6px; border-radius: 9px; cursor: pointer; font-size: 11px; font-weight: 700;
    background: none; border: 1px solid var(--accent, #d946ef); color: var(--accent, #d946ef);
}
.ol-list { display: grid; gap: 6px; }
.ol-row {
    display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 10px; cursor: pointer;
    background: var(--panel2, #1c2540); border: 1px solid var(--line, #26304f); color: var(--ink, #e8ecf8); text-align: left;
}
.ol-row:hover { border-color: var(--accent, #d946ef); }
.ol-row .echo-avatar { width: 30px; height: 30px; }

/* ---- cadre météo/bonus permanent (dans le coin) ---- */
#echo-conditions {
    width: 156px;
    padding: 9px 11px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel, #141a2e) 92%, transparent);
    border: 1px solid var(--line, #26304f);
    color: var(--ink, #e8ecf8);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    display: grid;
    gap: 7px;
    backdrop-filter: blur(4px);
}
#echo-conditions .ec-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
#echo-conditions .ec-ic { font-size: 17px; width: 20px; text-align: center; }
#echo-conditions .ec-v { margin-left: auto; color: var(--muted, #8b95b5); font-weight: 700; }
#echo-conditions .ec-bonus { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--line, #26304f); }
#echo-conditions .ec-bonus small { color: var(--muted, #8b95b5); font-size: 10.5px; }
#echo-conditions .ec-bonus.dim small { font-style: italic; }
#echo-conditions .ec-chip {
    font-weight: 800; font-size: 11.5px; padding: 3px 9px; border-radius: 16px; text-align: center;
    background: linear-gradient(90deg, #a855f7, #ec4899); color: #fff;
    box-shadow: 0 0 9px color-mix(in srgb, #a855f7 50%, transparent);
}

/* ---- widget conditions + bonus de combinaison ---- */
.echo-cond {
    margin: 8px 0; padding: 8px 12px; border-radius: 12px;
    background: var(--panel2, #1c2540); border: 1px solid var(--line, #26304f);
    display: grid; gap: 6px;
}
.echo-cond .ec-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.echo-cond .ec-ic { font-size: 18px; width: 22px; text-align: center; }
.echo-cond .ec-row b { font-weight: 700; }
.echo-cond .ec-v { margin-left: auto; color: var(--muted, #8b95b5); font-weight: 700; }
.echo-cond .ec-bonus { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--line, #26304f); }
.echo-cond .ec-bonus small { color: var(--muted, #8b95b5); }
.echo-cond .ec-bonus.dim small { font-style: italic; }
.echo-cond .ec-chip {
    margin-left: auto; font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 20px;
    background: linear-gradient(90deg, #a855f7, #ec4899); color: #fff;
    box-shadow: 0 0 10px color-mix(in srgb, #a855f7 50%, transparent);
}
.echo-bonuswin {
    margin: 6px 0; padding: 6px 12px; border-radius: 10px; font-size: 13px; text-align: center;
    background: linear-gradient(90deg, color-mix(in srgb, #a855f7 22%, transparent), color-mix(in srgb, #ec4899 22%, transparent));
    border: 1px solid color-mix(in srgb, #a855f7 45%, transparent);
}

/* ---- panneau : bloc pré-jeu (jeu de la semaine + badge à gagner) ---- */
.echo-causetag {
    margin: 6px 0;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    border: 1px dashed var(--accent, #d946ef);
    border-radius: 10px;
    color: var(--accent, #d946ef);
}
.echo-pregame {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
    padding: 8px 10px;
    background: var(--panel2, #1c2540);
    border: 1px solid var(--line, #26304f);
    border-radius: 12px;
}
.echo-pregame .pg-left { flex: 1; min-width: 0; }
.echo-pregame .pg-left small { display: block; font-size: 10.5px; color: var(--muted, #8b95b5); text-transform: uppercase; letter-spacing: .08em; }
.echo-pregame .pg-left b { font-size: 15px; }
.echo-pregame .pg-left .deja { text-transform: none; letter-spacing: 0; margin-top: 5px; font-size: 11.5px; }
.echo-pregame .pg-badge svg { display: block; }

/* chips de difficulté */
.echo-diffs { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; }
.echo-diffs .dchip {
    min-height: 38px;
    padding: 0 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted, #8b95b5);
    background: var(--panel, #141a2e);
    border: 1px solid var(--line, #26304f);
    border-radius: 19px;
    cursor: pointer;
    text-transform: capitalize;
}
.echo-diffs .dchip.on { color: #fff; background: var(--accent, #d946ef); border-color: transparent; }

/* ---- panneau Écho ---- */
#echo-panel {
    position: absolute;
    z-index: 1000;
    right: 12px;
    top: 12px;
    width: 380px; /* assez large pour les plateaux (échecs, démineur) sans déborder */
    max-width: calc(100vw - 24px);
    max-height: calc(100% - 24px);
    overflow: auto;
    background: var(--panel, #141a2e);
    color: var(--ink, #e8ecf8);
    border: 1px solid var(--line, #26304f);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
#echo-panel.closed { display: none; }
/* desktop : panneau élargi quand on joue (plateaux tactiques à l'aise) */
#echo-panel.gaming { width: 460px; }
#echo-panel h3 { margin: 10px 0 4px; font-size: 17px; }
#echo-panel .meta { margin: 4px 0; font-size: 12.5px; color: var(--muted, #8b95b5); }
#echo-panel .meta.dim { font-size: 11.5px; }
.echo-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: 0;
    color: var(--muted, #8b95b5);
    font-size: 15px;
    cursor: pointer;
}
.echo-decor {
    height: 96px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line, #26304f);
}
.echo-decor .dicon { font-size: 36px; }
.echo-decor { position: relative; overflow: hidden; }
.echo-decor.has-banner { height: 120px; align-items: flex-end; justify-content: flex-start; }
.echo-decor-city {
    position: absolute; left: 10px; bottom: 8px;
    font-weight: 800; font-size: 15px; color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.echo-decor:not(.has-banner) .echo-decor-city { display: none; }
.echo-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background: var(--accent, #d946ef);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.echo-btn:disabled { opacity: .6; cursor: wait; }

/* ---- zone de jeu dans le panneau ---- */
.echo-game { margin-top: 10px; }
.echo-rules {
    margin: 6px 0;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink, #e8ecf8);
    background: var(--panel2, #1c2540);
    border: 1px solid var(--line, #26304f);
    border-radius: 10px;
}
.echo-hintbtn {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: 2px 0 6px;
    padding: 6px 12px;
    font: inherit;
    font-size: 12.5px;
    color: var(--ink, #e8ecf8);
    background: var(--panel, #141a2e);
    border: 1px dashed var(--accent, #d946ef);
    border-radius: 10px;
    cursor: pointer;
}
.echo-hint {
    margin: 2px 0 6px;
    padding: 8px 10px;
    font-size: 12.5px;
    color: var(--accent, #d946ef);
    border: 1px dashed var(--accent, #d946ef);
    border-radius: 10px;
}
.echo-gamehost {
    margin-top: 6px;
    padding: 10px;
    border: 1px solid var(--line, #26304f);
    border-radius: 12px;
    background: var(--card, #0f1424);
    overflow: hidden; /* le contenu est mis à l'échelle (scale-to-fit), pas scrollé */
}
/* Écran d'intro UNIFORME : JOUER → 3·2·1·GO (tous les jeux) */
.gs-intro {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 30px 16px; min-height: 220px; text-align: center;
}
.gs-intro .gi-name { font-size: 22px; font-weight: 900; color: var(--ink, #e8ecf8); letter-spacing: .02em; }
.gs-intro .gi-diff { font-size: 13px; font-weight: 700; color: var(--muted, #8b95b5); text-transform: uppercase; letter-spacing: .08em; }
.gs-intro .gi-play {
    margin-top: 6px; padding: 16px 48px; border: 0; border-radius: 16px; cursor: pointer;
    font-size: 22px; font-weight: 900; letter-spacing: .04em; color: #fff;
    background: linear-gradient(135deg, var(--echo-p1, #d946ef), #7c3aed);
    box-shadow: 0 8px 26px color-mix(in srgb, var(--echo-p1, #d946ef) 55%, transparent), 0 0 0 3px #ffffff14;
    transition: transform .1s;
}
.gs-intro .gi-play:hover { transform: scale(1.05); }
.gs-intro .gi-play:active { transform: scale(.97); }
.gs-intro .gi-tip { font-size: 11.5px; color: var(--muted, #8b95b5); }

/* ============================================================
   ÉCRAN DE JEU PLEIN ÉCRAN (overlay sous le header, barre STOP/✕)
   ============================================================ */
#echo-gamescreen {
    position: fixed;
    top: 56px;            /* juste sous le header statique */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;        /* au-dessus de la nav basse (1200) ; le header (1100) reste visible */
    background: var(--bg, #0b0e1a);
    display: flex;
    flex-direction: column;
}
#echo-gamescreen.closed { display: none; }
.gs-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line, #26304f);
    background: var(--panel, #141a2e);
    flex: 0 0 auto;
}
.gs-bar .gs-title {
    flex: 1;
    min-width: 0;
    font-weight: 800;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* identité du joueur dans chaque jeu (avatar + nom + team + badges) */
.gs-bar .gs-player {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}
.gs-bar .gs-player .echo-avatar {
    box-shadow: 0 0 0 2px var(--echo-p1, #d946ef), 0 0 8px color-mix(in srgb, var(--echo-p1, #d946ef) 60%, transparent);
    flex: 0 0 auto;
}
.gs-bar .gp-txt { min-width: 0; line-height: 1.15; }
.gs-bar .gp-txt b {
    display: block;
    font-size: 13.5px;
    color: var(--ink, #e8ecf8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gs-bar .gp-txt small { font-size: 11px; color: #c2cce4; font-weight: 600; }
.gs-game {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .04em;
    color: var(--echo-p1, #d946ef);
    margin: 2px 0 6px;
}
.gs-bar button {
    min-height: 40px;
    padding: 0 14px;
    font: inherit;
    font-weight: 800;
    border-radius: 11px;
    cursor: pointer;
    border: 1px solid var(--line, #26304f);
    background: var(--panel2, #1c2540);
    color: var(--ink, #e8ecf8);
}
.gs-bar .gs-stop { color: #ff5470; border-color: #ff5470; }
.gs-bar .gs-close { min-width: 42px; padding: 0; font-size: 17px; }
.gs-scroll {
    flex: 1;
    overflow: auto;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.gs-scroll .gs-rules,
.gs-host,
.gs-result { width: 100%; max-width: 480px; }
.gs-host { display: flex; justify-content: center; }
.gs-actions { margin-top: 12px; text-align: center; }
body.echo-noscroll { overflow: hidden; }

/* Bouton GO ! (lancement) */
.echo-btn.echo-go {
    font-size: 18px;
    letter-spacing: .14em;
    min-height: 52px;
}

/* Chrono 3·2·1·GO ! */
.echo-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    font-size: 52px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--accent, #d946ef);
    text-shadow: 0 0 18px var(--accent, #d946ef);
}
.echo-count.pop { animation: echo-pop .5s ease-out; }
@keyframes echo-pop {
    0% { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Bouton d'abandon */
.echo-abandon {
    display: block;
    margin: 8px auto 0;
    min-height: 40px;
    padding: 0 14px;
    font: inherit;
    font-size: 12px;
    color: var(--muted, #8b95b5);
    background: none;
    border: 1px dashed var(--line, #26304f);
    border-radius: 10px;
    cursor: pointer;
}
.echo-abandon:hover { color: #ff5470; border-color: #ff5470; }

/* Responsive des jeux : jamais hors écran (règle mobile-first §1.1) */
.echo-gamehost canvas,
.echo-gamehost img,
.echo-gamehost svg {
    max-width: 100%;
    height: auto;
}
.echo-gamefit {
    transform-origin: top left; /* le JS pose un scale() si le jeu déborde */
}

/* ---- carte badge (médaillon + étiquette) ---- */
.echo-badgecard {
    margin-top: 12px;
    background: var(--card, #0f1424);
    border: 1px solid var(--line, #26304f);
    border-radius: 14px;
    overflow: hidden;
}
.echo-badgecard .medal { display: flex; justify-content: center; padding: 10px; }
.echo-badgecard .label { padding: 10px 14px 14px; border-top: 1px solid var(--line, #26304f); }
.echo-badgecard .ttl { font-size: 17px; font-weight: 800; letter-spacing: .04em; }
.echo-badgecard .ttl.lose { color: #ff5470; }
.echo-badgecard .rare {
    display: inline-block;
    margin-top: 5px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    padding: 4px 11px;
    border-radius: 20px;
    color: var(--tier, #9ca3af);
    border: 1px solid var(--tier, #9ca3af);
}
.echo-badgecard .mentions { margin-top: 6px; font-size: 12.5px; color: var(--muted, #8b95b5); }
.echo-badgecard .lrow {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--line, #26304f);
    font-size: 13.5px;
}
.echo-badgecard .lrow .k { color: var(--muted, #8b95b5); }
.echo-badgecard .lrow .v { font-weight: 600; text-align: right; }
.echo-badgecard .bid {
    margin-top: 9px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    color: var(--muted, #8b95b5);
    word-break: break-all;
}

/* ---- Onglets (Mur / Défis) ---- */
.echo-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.echo-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--muted, #8b95b5);
    background: var(--panel, #141a2e);
    border: 1px solid var(--line, #26304f);
    border-radius: 21px;
}
.echo-tabs a.on { color: #fff; background: var(--accent, #d946ef); border-color: transparent; }

/* ---- Échos joueurs (pin + panneau) ---- */
.echo-pin.ppin {
    border: 2.5px solid var(--accent, #d946ef);
    box-shadow: 0 0 10px var(--accent, #d946ef), 0 2px 8px rgba(0, 0, 0, .5);
    font-size: 12px;
}
.echo-player { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.echo-player h3 { margin: 0 !important; }
.echo-stats.small { grid-template-columns: repeat(4, 1fr); margin-top: 6px; }
.echo-stats.small .st b { font-size: 16px; }

/* ---- Amis / Team (Mur) ---- */
.echo-frow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 5px 0;
    background: var(--card, #0f1424);
    border: 1px solid var(--line, #26304f);
    border-radius: 12px;
}
.echo-frow .grow { flex: 1; }
.echo-frow b { font-size: 13.5px; }
.echo-btn2.ok { border-color: #22c55e; color: #22c55e; }
.echo-search { display: flex; gap: 8px; margin-bottom: 8px; }
.echo-search input[type="text"] {
    flex: 1;
    font: inherit;
    color: var(--ink, #e8ecf8);
    background: var(--panel, #141a2e);
    border: 1px solid var(--line, #26304f);
    border-radius: 10px;
    padding: 10px 12px;
}
.echo-team { border: 1px solid var(--tcol, #d946ef); border-radius: 14px; padding: 12px; box-shadow: 0 0 14px color-mix(in srgb, var(--tcol, #d946ef) 35%, transparent); }
.echo-team h3 { margin: 0 0 8px; color: var(--tcol, #d946ef); }
.echo-teamcreate input[type="text"] {
    width: 100%;
    font: inherit;
    color: var(--ink, #e8ecf8);
    background: var(--panel, #141a2e);
    border: 1px solid var(--line, #26304f);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}
.echo-teamcreate .echo-btn { margin-top: 10px; }
.echo-check { display: block; margin-top: 8px; font-size: 13px; }

/* ---- Stats : barres ---- */
.echo-bars .brow { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.echo-bars .brow span { width: 110px; color: var(--muted, #8b95b5); }
.echo-bars .brow i { display: block; height: 10px; border-radius: 5px; background: var(--accent, #d946ef); min-width: 4px; }

/* ---- Défi après victoire ---- */
.echo-challenge { display: flex; gap: 8px; margin: 8px 0; }
.echo-challenge select {
    flex: 1;
    font: inherit;
    color: var(--ink, #e8ecf8);
    background: var(--panel, #141a2e);
    border: 1px solid var(--line, #26304f);
    border-radius: 10px;
    padding: 8px;
}

/* ---- MON MUR : stats, toolbar de tri, feed ---- */
.echo-h2 { margin: 26px 0 10px; font-size: 16px; letter-spacing: .08em; }
.echo-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.echo-stats .st {
    background: var(--card, #0f1424);
    border: 1px solid var(--line, #26304f);
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
}
.echo-stats .st b { display: block; font-size: 20px; }
.echo-stats .st span { font-size: 10.5px; color: var(--muted, #8b95b5); letter-spacing: .08em; text-transform: uppercase; }
.echo-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}
.echo-toolbar a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted, #8b95b5);
    background: var(--panel, #141a2e);
    border: 1px solid var(--line, #26304f);
    border-radius: 19px;
}
.echo-toolbar a.on { color: #fff; background: var(--accent, #d946ef); border-color: transparent; }
.echo-toolbar .sep { width: 1px; height: 22px; background: var(--line, #26304f); margin: 0 4px; }
.echo-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}
.echo-feeditem {
    background: var(--card, #0f1424);
    border: 1px solid var(--line, #26304f);
    border-radius: 14px;
    padding: 10px;
}
.echo-feeditem .fmeta { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.echo-feeditem .fmeta b { font-size: 13px; display: block; }
.echo-feeditem .fmeta small { color: var(--muted, #8b95b5); font-size: 11px; }
.echo-feeditem .fbadge { display: flex; justify-content: center; }

/* ---- DÉFIS (placeholder) ---- */
.echo-defis-intro p { font-size: 14px; line-height: 1.55; }
.echo-defis-intro .dim, .dim { color: var(--muted, #8b95b5); }
.echo-ghosts { display: grid; gap: 8px; }
.echo-ghost {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card, #0f1424);
    border: 1px solid var(--line, #26304f);
    border-radius: 12px;
    padding: 9px 12px;
}
.echo-ghost b { font-size: 13px; display: block; }
.echo-ghost small { color: var(--muted, #8b95b5); font-size: 11.5px; }
.echo-ghost .ghosttag {
    margin-left: auto;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--accent, #d946ef);
    border: 1px dashed var(--accent, #d946ef);
    border-radius: 12px;
    padding: 4px 9px;
    white-space: nowrap;
}

/* ---- PARAMÈTRES ---- */
.echo-params { max-width: 480px; }
.echo-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.echo-colors .cw { position: relative; cursor: pointer; }
.echo-colors .cw input { position: absolute; opacity: 0; }
.echo-colors .cw span {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: 0 0 0 2px var(--line, #26304f);
}
.echo-colors .cw input:checked + span {
    box-shadow: 0 0 0 3px var(--ink, #e8ecf8), 0 0 14px currentColor;
    transform: scale(1.08);
}
.echo-params .prow { margin: 16px 0; }
.echo-params label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted, #8b95b5); margin-bottom: 6px; }
.echo-params input[type="text"] {
    width: 100%;
    font: inherit;
    color: var(--ink, #e8ecf8);
    background: var(--panel, #141a2e);
    border: 1px solid var(--line, #26304f);
    border-radius: 10px;
    padding: 11px 12px;
}
.echo-params .pav { display: flex; align-items: center; gap: 14px; }
.echo-params input[type="file"] { font-size: 12.5px; color: var(--muted, #8b95b5); }
.echo-params small { display: block; margin-top: 5px; font-size: 11.5px; }
.echo-btn2 {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    font: inherit;
    font-size: 13px;
    color: var(--ink, #e8ecf8);
    background: var(--panel, #141a2e);
    border: 1px solid var(--line, #26304f);
    border-radius: 10px;
    cursor: pointer;
}
.echo-btn2:hover { border-color: var(--accent, #d946ef); }
.echo-ok { color: #22c55e; font-weight: 700; }
.echo-err { color: #ff5470; font-weight: 700; }

/* ---- mur de badges ---- */
.echo-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.echo-wallcell {
    display: block;
    background: var(--card, #0f1424);
    border: 1px solid var(--line, #26304f);
    border-radius: 14px;
    padding: 10px;
    text-align: center;
    transition: transform .12s, border-color .12s;
}
a.echo-wallcell { position: relative; }
a.echo-wallcell:hover { transform: translateY(-3px); }
/* multiplicateur de badges en double (×N) */
.echo-mult {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    background: var(--accent, #d946ef);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.echo-feeditem a.fbadge { display: flex; justify-content: center; border-radius: 10px; }
.echo-feeditem a.fbadge:hover { background: var(--panel2, #1c2540); }

/* ---- page d'un badge ---- */
.echo-badgepage { max-width: 560px; }
.echo-badgepage .bp-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
}
.echo-badgepage .bp-head b { font-size: 16px; display: block; }
.echo-badgepage .bp-head small { font-size: 12.5px; }
.echo-badgepage .bp-rare {
    margin-left: auto;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    padding: 6px 14px;
    border-radius: 18px;
    color: var(--tier, #9ca3af);
    border: 1.5px solid var(--tier, #9ca3af);
    box-shadow: 0 0 12px color-mix(in srgb, var(--tier, #9ca3af) 50%, transparent);
    white-space: nowrap;
}
.echo-badgepage .echo-badgecard .medal svg { width: min(300px, 80vw); height: auto; }
.echo-wallcell:hover { border-color: var(--accent, #d946ef); }
.echo-wallcell .wn { font-size: 10.5px; color: var(--muted, #8b95b5); margin-top: 6px; line-height: 1.3; }
.echo-empty { color: var(--muted, #8b95b5); padding: 24px; text-align: center; }

/* ---- Mobile : app-like (nav basse du thème = 60px + safe-area) ---- */
@media (max-width: 768px) {
    /* Panneau Écho/joueur : remonte SOUS le header (même position que la Tour) */
    #echo-panel {
        position: fixed;
        right: 0;
        left: 0;
        top: 58px;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-height: none;
        border-radius: 16px 16px 14px 14px;
        padding-top: 14px;
    }
    /* MODE JEU : une partie est lancée → le panneau remonte juste SOUS le header
       et descend jusqu'à la nav basse — fini le jeu entassé en bas (retour Mica) */
    #echo-panel.gaming {
        top: 58px;          /* header 56px : le jeu démarre juste dessous */
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        max-height: none;
        border-radius: 0 0 14px 14px;
        padding-top: 10px;
    }
    /* MENU TOUR : gros contenu → remonte haut (sous le header), scroll, pas le mini bottom-sheet */
    #echo-panel.tower {
        top: 58px;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        max-height: none;
        border-radius: 16px 16px 14px 14px;
        padding-top: 14px;
    }
    .echo-close { top: 12px; min-width: 44px; min-height: 36px; }
    .echo-btn { min-height: 48px; }

    /* contrôles Leaflet au-dessus du pouce, jamais sous la nav */
    .leaflet-bottom { bottom: 10px; }
    /* coin bas-gauche (connectés + météo/bonus) : au plus près de la nav basse */
    #echo-corner { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
    #echo-conditions, #echo-online { width: 138px; padding: 8px 10px; }
    .leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; }
}

/* ============ HUB ECHOS (News / Hearts / Défis) — thème clair/sombre via vars ============ */
.echo-echos { max-width: 720px; margin: 0 auto; padding: 14px 12px 90px; color: var(--ink); }
.echo-echos .ee-head h1 { font-size: 26px; letter-spacing: .18em; font-weight: 700; }
.echo-echos .ee-head p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.echo-echos .ee-tabs { margin: 14px 0 12px; }
.echo-echos .ee-panel { display: none; }
.echo-echos .ee-panel.on { display: block; }
.ee-note { background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.ee-note b { color: var(--accent); }
.ee-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0; }
.ee-toolbar label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ee-country { background: var(--card); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 14px; }
.ee-progress { flex: 1; min-width: 180px; }
.ee-pg-label { font-size: 12px; color: var(--muted); }
.ee-bar { height: 7px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; margin-top: 4px; }
.ee-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent), #7af0ff); transition: width .5s; }
.ee-sec { font-size: 12px; letter-spacing: .14em; color: var(--muted); margin: 16px 4px 8px; text-transform: uppercase; }
.ee-news { background: var(--card); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.ee-n-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.ee-topic { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.ee-ago { font-size: 11px; color: var(--muted); }
.ee-title { display: block; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.ee-title:hover { color: var(--accent); }
.ee-src { font-size: 11px; color: var(--muted); margin-top: 5px; }
.ee-vote { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.ee-vlabel { font-size: 11px; color: var(--muted); }
.ee-pills { display: flex; gap: 8px; }
.ee-pill { width: 26px; height: 26px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: .15s; }
.ee-pill i { width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--c) 40%, transparent); transition: .15s; }
.ee-pill { border-color: color-mix(in srgb, var(--c) 30%, transparent); }
.ee-pill:hover i { background: var(--c); }
.ee-pill:hover { border-color: var(--c); transform: translateY(-1px); }
.ee-pill.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.ee-pill.on i { background: var(--c); box-shadow: 0 0 8px var(--c); }
.ee-loading, .ee-empty { color: var(--muted); text-align: center; padding: 28px 10px; font-size: 14px; }
.ee-hearts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.ee-heart { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 14px; padding: 16px 10px; text-align: center; color: var(--ink); }
.ee-heart:hover { border-color: var(--accent); box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 22%, transparent); }
.ee-heart .ee-h-ic { font-size: 26px; }
.ee-heart b { font-size: 13px; }
.ee-heart .ee-h-go { font-size: 11px; color: var(--accent); }
.ee-heart.big { grid-column: 1 / -1; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--card)), var(--card)); }
.ee-big-link { display: inline-block; margin-top: 10px; padding: 12px 20px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; }
.ee-toast { position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%) translateY(16px); z-index: 9000; background: #111827; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.45); opacity: 0; transition: .35s; pointer-events: none; }
.ee-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 520px) {
    .ee-hearts { grid-template-columns: 1fr 1fr; }
    .echo-echos .ee-head h1 { font-size: 22px; }
    .ee-vote { gap: 7px; }
}

/* Nœud ECHO NEWS sur la carte (1 par pays, zoom pays/monde) */
.news-pin { display: flex; align-items: center; gap: 3px; padding: 2px 7px 2px 5px; border-radius: 14px;
    background: linear-gradient(135deg, #2b3350, #141a2e);
    border: 1px solid color-mix(in srgb, var(--accent, #d946ef) 55%, #fff 5%); color: #fff; font: 700 11px system-ui, sans-serif;
    box-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 10px color-mix(in srgb, var(--accent, #d946ef) 40%, transparent); white-space: nowrap; }
.news-pin .np-ic { font-size: 13px; line-height: 1; }
.news-pin b { letter-spacing: .04em; }

/* Déroulé de NOTE (clic sur une pastille → système de note 1→5) */
.ee-note-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 9px; padding: 10px 12px;
    border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
    animation: ee-unfold .22s ease; }
@keyframes ee-unfold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ee-np-name { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.ee-grad { display: flex; align-items: center; gap: 7px; }
.ee-gd { display: flex; align-items: center; justify-content: center; cursor: pointer; height: 24px; }
.ee-gd i { display: block; border-radius: 50%; background: color-mix(in srgb, var(--ink) 24%, transparent); transition: .15s; }
.ee-gd:hover i { background: var(--c); }
.ee-gd.on i { background: var(--c); box-shadow: 0 0 8px var(--c); }
.ee-np-hint { font-size: 10px; color: var(--muted); margin-left: auto; }

/* Intitulé section LOCAL = drapeau + nom du pays */
.ee-sec .ee-flag { display: inline-block; vertical-align: -3px; margin-right: 8px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.ee-sec .ee-cn { text-transform: none; font-weight: 700; letter-spacing: .02em; color: var(--ink); }