*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}
:root{--green:#1a9e3a;--blue:#1a5fb4;--neutral:#d9d9d9;--bg:#0f1419;--card:#1c2228;--border:#2a333c;--text:#e6edf3;--ui-size:340px}
html,body{height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
#topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:12px;padding:8px 12px;background:rgba(15,20,25,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
#brand{font-weight:900;letter-spacing:.08em;font-size:14px;white-space:nowrap}
#scorebar{flex:1;display:flex;align-items:center;gap:14px;font-size:13px}
.score{display:flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.g{background:var(--green)} .dot.b{background:var(--blue)}
.pill{font-size:11px;padding:3px 8px;border-radius:999px;background:#223;border:1px solid var(--border)}
#reset{width:32px;height:32px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:8px;cursor:pointer}
#map{position:fixed;inset:44px 0 0 0}

/* ---- Interface ville : PC à droite, mobile en bas ---- */
.city-ui{position:fixed;z-index:20;display:flex;flex-direction:column;background:rgba(24,30,36,.97);border:1px solid var(--border);box-shadow:0 20px 60px rgba(0,0,0,.55)}
.city-ui.hidden{display:none}
@media(min-width:701px){
  .city-ui{top:56px;right:0;bottom:0;width:var(--ui-size);border-left:1px solid var(--border)}
  #resizeHandle{position:absolute;left:-5px;top:0;bottom:0;width:12px;cursor:ew-resize;z-index:5}
}
@media(max-width:700px){
  .city-ui{left:0;right:0;bottom:0;height:var(--ui-size)}
  #resizeHandle{position:absolute;top:-5px;left:0;right:0;height:12px;cursor:ns-resize;z-index:5}
}
#resizeHandle::after{content:"";position:absolute;inset:0;margin:auto;width:4px;height:32px;border-radius:4px;background:var(--border)}
@media(max-width:700px){#resizeHandle::after{width:32px;height:4px}}
#resizeHandle:hover::after{background:#4a5a6a}

.city-ui-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:10px 12px 6px}
.city-title{display:flex;flex-direction:column;min-width:0}
#cityName{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cityMeta{font-size:11px;opacity:.65}
.close{width:28px;height:28px;border:0;background:transparent;color:var(--text);font-size:22px;cursor:pointer;flex-shrink:0}
.tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}
.tab{flex:1;padding:10px 4px;background:transparent;color:var(--text);border:0;border-bottom:2px solid transparent;font-size:12px;font-weight:700;cursor:pointer;opacity:.6}
.tab:hover{opacity:.9}
.tab.active{opacity:1;border-bottom-color:var(--green)}
.tab-panel{flex:1;display:none;flex-direction:column;min-height:0}
.tab-panel.active{display:flex}
.panel-scroll{flex:1;overflow-y:auto;padding:10px 12px;min-height:0}
.subtitle{font-size:11px;letter-spacing:.08em;opacity:.6;text-transform:uppercase;margin-bottom:8px}

/* ---- Onglet Déplacement ---- */
.unit-row{display:flex;align-items:center;gap:8px;padding:8px;margin-bottom:8px;background:#0f1419;border:1px solid var(--border);border-radius:10px}
.unit-row.readonly{opacity:.75}
.u-logo{font-size:20px;width:28px;text-align:center;flex-shrink:0}
.u-info{display:flex;flex-direction:column;min-width:70px}
.u-name{font-size:12px;font-weight:700}
.u-count{font-size:10px;opacity:.7}
.u-slider{flex:1;min-width:60px;accent-color:var(--green)}
.u-max{flex-shrink:0;padding:6px 10px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:8px;font-size:11px;font-weight:700;cursor:pointer}
.u-max:hover{background:#2a333c}
.empty{font-size:12px;opacity:.6;padding:16px 4px;text-align:center}
.move-hint{flex-shrink:0;font-size:10px;opacity:.55;text-align:center;padding:8px 12px 10px;border-top:1px solid var(--border)}

/* ---- Bulle de sélection (au-dessus du marqueur) ---- */
.sel-bubble{position:fixed;z-index:26;display:flex;flex-direction:column;align-items:center;gap:2px;transform:translate(-50%,-100%);padding:6px 10px;border-radius:14px;background:rgba(30,36,43,.97);border:1px solid #4a5a6a;color:var(--text);font-size:12px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none;pointer-events:auto;white-space:nowrap;min-width:56px}
.sel-bubble::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #4a5a6a}
.sel-bubble .sel-total{font-size:13px}
.sel-bubble .sel-compo{font-size:10px;opacity:.85;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.sel-bubble.dragging{opacity:.6;cursor:grabbing}
.bubble-ghost{position:fixed;z-index:60;display:flex;align-items:center;gap:6px;transform:translate(-50%,-50%);padding:8px 12px;border-radius:14px;background:rgba(30,36,43,.96);border:1px solid #4a5a6a;color:var(--text);font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none;white-space:nowrap}

/* ---- Compteurs de construction (badge en haut à gauche) ---- */
.card-count{position:absolute;top:6px;left:6px;min-width:18px;padding:1px 6px;border-radius:999px;background:#0a0e12;border:1px solid var(--border);font-size:10px;font-weight:800;color:#ffd76a;line-height:1.5;text-align:center}

/* ---- Sections des cartes (coût / input / output) ---- */
.card-section{margin-top:6px;padding-top:6px;border-top:1px solid rgba(42,51,60,.6);text-align:left}
.section-label{font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin-bottom:2px}
.section-content{font-size:10px;font-weight:700;line-height:1.4;color:var(--text)}
.section-content:empty{display:none}

/* ---- Chips d'information (villes non possédées) ---- */
.res-chip{display:inline-block;margin:2px 4px 2px 0;padding:4px 9px;border:1px solid var(--border);border-radius:10px;background:#0f1419;font-size:11px;font-weight:700}

/* ---- Bulle de survol (PC + mobile) ---- */
.hover-bubble{position:fixed;z-index:55;transform:translate(-50%,-100%);padding:6px 10px;border-radius:12px;background:rgba(15,20,25,.95);border:1px solid var(--border);color:var(--text);font-size:11px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none;white-space:nowrap;display:none;flex-direction:column;align-items:center;gap:2px;text-align:center}
.hb-name{font-size:12px;font-weight:800}
.hb-stats{font-size:12px;font-weight:800}
.hb-detail{font-size:10px;font-weight:600;opacity:.85}

/* ---- Marqueur de combat en cours ---- */
.battle-marker{position:relative;display:flex;flex-direction:column;align-items:center;transform:translateY(-150%);z-index:5}
.bm-compact{display:flex;flex-direction:column;align-items:center;padding:4px 10px;border-radius:12px;background:rgba(122,32,32,.95);border:1px solid #ff6b6b;color:#fff;font-size:11px;font-weight:800;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.5);pointer-events:auto;cursor:help}
.bm-top{display:flex;align-items:center;gap:6px}
.bm-side{font-weight:800}
.bm-vs{opacity:.5;font-weight:600}
.bm-status{margin-top:1px}
.bm-detail{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);width:250px;padding:8px 10px;border-radius:12px;background:rgba(15,20,25,.98);border:1px solid #4a5a6a;color:var(--text);font-size:10px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.6);text-align:center;white-space:normal;z-index:80}
.battle-marker:hover .bm-detail{display:block}
.bm-side-label{font-weight:800;margin-top:6px;opacity:.9}
.bm-side-label:first-child{margin-top:0}
.bm-chips{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:3px}
.bm-chip{background:rgba(255,255,255,.08);border-radius:6px;padding:1px 6px;white-space:nowrap}
.bm-mult{margin-top:6px;opacity:.7}

/* ---- Suffixe de magnitude (k / m / b / t) : mis en évidence pour éviter
   toute confusion avec une valeur inférieure à 1000. ---- */
.num-sfx{font-size:.78em;font-weight:900;letter-spacing:.03em;color:#7ee0ff;margin-left:1px;vertical-align:.12em;text-transform:uppercase}

/* ---- Bulle de prédiction de combat (drag) ---- */
.predict-bubble{position:fixed;z-index:70;min-width:170px;padding:8px 10px;border-radius:12px;background:rgba(15,20,25,.97);border:1px solid #4a5a6a;color:var(--text);font-size:11px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.6);pointer-events:none;white-space:nowrap;display:none;text-align:center}
.pb-title{font-size:12px;font-weight:800;margin-bottom:4px}
.pb-row{display:flex;justify-content:space-between;gap:14px}
.pb-atk{color:#ff7a7a}
.pb-def{color:#7ab8ff}
.pb-sub{font-size:10px;opacity:.75}
.pb-time{font-size:10px;opacity:.8;margin-top:4px}
.pb-note{font-size:9px;opacity:.65;margin-top:2px;color:#ffd76a}

/* ---- Onglets construction ---- */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.card{position:relative;border:1px solid var(--border);background:#0f1419;border-radius:12px;padding:10px;text-align:center;cursor:pointer;transition:transform .1s,border-color .1s}
.card:hover:not(.disabled){transform:translateY(-2px);border-color:var(--border)}
.card .logo{font-size:22px}
.card .name{font-size:12px;font-weight:700;margin:6px 0 2px}
.card .meta{font-size:10px;opacity:.7;line-height:1.4}
.card .price{font-size:11px;font-weight:800;margin-top:6px;color:#ffd76a}
.card.disabled{opacity:.4;cursor:not-allowed}
.card.disabled .price{color:#ff6b6b}

.hint{font-size:11px;opacity:.6;margin:8px 0}
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.modal.hidden{display:none}
.modal-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;width:min(420px,92vw);text-align:center}
.modal-card h2{margin-bottom:6px}
.modal-card p{opacity:.7;font-size:13px;margin-bottom:14px}
.faction-row{display:flex;gap:12px}
.faction{flex:1;padding:18px 10px;border-radius:12px;border:2px solid var(--border);background:#0f1419;color:var(--text);font-weight:800;font-size:16px;cursor:pointer}
.faction.green{border-color:var(--green)} .faction.blue{border-color:var(--blue)}
#toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:rgba(15,20,25,.92);border:1px solid var(--border);padding:8px 12px;border-radius:10px;font-size:12px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
#deployBar{position:fixed;left:12px;bottom:12px;z-index:15;display:flex;flex-direction:column;gap:6px;max-width:360px}
.deploy{background:rgba(28,34,40,.95);border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:11px;display:flex;align-items:center;gap:8px}
.deploy .bar{flex:1;height:6px;background:#0f1419;border-radius:999px;overflow:hidden}
.deploy .fill{height:100%;background:linear-gradient(90deg,var(--green),var(--blue));transition:width .25s linear}

@media(max-width:700px){#brand{font-size:11px}}
.maplibregl-popup-content{background:rgba(15,20,25,.96);color:var(--text);border:1px solid var(--border);border-radius:10px;font-size:12px}