/* =====================================================================================================================
   War Thunder (01/10/2026) — page Jouer, « En direct » (carte en temps réel sur toile), profil (statistiques), classement,
   carte de l'accueil. S'appuie sur les classes d'Overwatch (ow-*) pour la page Jouer et le classement. Identité Volt (jetons
   --id*), bulles mates, aucun trait pleine largeur, jamais de :has(), aucun défilement horizontal.
   ===================================================================================================================== */
.wt-ic{display:inline-grid;place-items:center;flex:none;width:16px;height:16px;color:var(--cyan,#00e5ff)}
.wt-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wt-ic svg .plein{fill:currentColor;stroke:none}
.btn-primary .wt-ic,.bt .wt-ic,.pl-join .wt-ic{color:inherit;width:14px;height:14px}
.wt-mention{margin:4px 2px 0}
.wt-tete-img{object-fit:cover;border-radius:12px}
.wt-semaine{display:block;margin-top:4px}

/* mes réglages */
.wt-regl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-width:0}
.wt-ligne{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-width:0;flex-wrap:wrap}
.wt-switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--txt);cursor:pointer}
.wt-switch input{accent-color:var(--id);width:16px;height:16px}
.wt-champ{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);min-width:0}
.wt-champ select,.wt-champ input{height:30px;max-width:220px;min-width:0;padding:0 10px;border-radius:10px;border:0;background:var(--glass-2,rgba(255,255,255,.075));color:var(--txt);font:inherit;font-size:13px}

/* joueurs */
.wt-liste{display:grid;gap:8px}
.wt-j{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 12px;border-radius:16px;background:var(--glass,rgba(255,255,255,.045))}
.wt-j.moi{background:rgba(var(--id-rgb,198,245,0),.08)}
.wt-j-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.wt-j-t>a{font-weight:700;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wt-j-t>i{font-style:normal;font-size:12px;color:var(--muted);margin-left:6px}
.wt-j-d{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px;color:var(--muted);min-width:0}
.wt-j-d span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wt-bat,.wt-hang{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--txt)}
.wt-bat i{width:7px;height:7px;border-radius:50%;background:#ff5f6d;box-shadow:0 0 0 3px rgba(255,95,109,.2);animation:svPouls 2s infinite}
.wt-hang{color:var(--muted);font-weight:600}
.wt-reg{display:inline-flex;align-items:center;gap:6px;flex:none}
.wt-reg em{font-style:normal;font-size:11px;opacity:.8}

/* En direct : liste à gauche, carte à droite */
.wt-direct{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:14px;min-width:0}
.wt-d-liste{display:flex;flex-direction:column;min-height:0;min-width:0}
.wt-dl{display:block;border-radius:16px;color:inherit;text-decoration:none}
.wt-dl .wt-j{background:none;padding:8px 10px}
.wt-dl{background:var(--glass,rgba(255,255,255,.045))}
.wt-dl:hover{background:var(--glass-2,rgba(255,255,255,.075))}
.wt-dl.on{background:rgba(var(--id-rgb,198,245,0),.12)}
.wt-dl-s{display:flex;align-items:center;gap:10px;padding:0 12px 9px 62px;font-size:11.5px;color:var(--muted)}
.wt-dl-s em{display:inline-flex;align-items:center;gap:4px;font-style:normal}
.wt-retard{font-style:normal;color:#ffb347}.wt-retard.zero{color:var(--id)}
.wt-d-vue{display:flex;flex-direction:column;gap:10px;padding:14px;min-width:0;min-height:0}
.wt-v-tete{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.wt-v-qui{flex:1;min-width:0}.wt-v-qui .wt-j{background:none;padding:0}
.wt-v-etat{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted)}
.wt-pt{width:8px;height:8px;border-radius:50%;background:var(--dim,#6d736d)}
.wt-pt.on{background:#ff5f6d;box-shadow:0 0 0 3px rgba(255,95,109,.22);animation:svPouls 2s infinite}
.wt-pt.att{background:#ffb347}
.wt-toile-z{position:relative;flex:1;min-height:0;display:grid;place-items:center;border-radius:18px;overflow:hidden;background:var(--panel2,#1f2022);aspect-ratio:1/1;max-height:calc(100vh - 260px);width:100%;margin:0 auto}
.wt-toile-z canvas{display:block;max-width:100%;max-height:100%}
.wt-toile-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:80%;padding:12px 18px;border-radius:16px;background:rgba(12,13,14,.82);color:var(--txt);font-size:13px;text-align:center}
.wt-legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted)}
.wt-lg{display:inline-flex;align-items:center;gap:6px}.wt-lg i{width:10px;height:10px;border-radius:3px}
.wt-lg.moi i{background:#c6f500}.wt-lg.allie i{background:#4aa8ff}.wt-lg.ennemi i{background:#ff5f6d}.wt-lg.zone i{background:#e7ebe7;border-radius:50%}

/* profil */
.wt-page{display:grid;gap:14px;min-width:0}
.wt-p-tete{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wt-p-id{flex:1;min-width:0;display:grid;gap:6px}
.wt-p-id h2{margin:0;font:700 22px/1.2 'Space Grotesk',Inter,sans-serif}
.wt-p-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--muted)}
.wt-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.wt-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
.wt-graph{min-height:220px;min-width:0}
.wt-modes{display:grid;gap:6px;margin-top:8px}
.wt-mode{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}.wt-mode span{color:var(--muted)}
.wt-vehs,.wt-crts,.wt-bts{display:grid;gap:8px;min-width:0}
.wt-veh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:center;padding:9px 12px;border-radius:14px;background:var(--glass,rgba(255,255,255,.045))}
.wt-veh .wt-ic{grid-row:span 2}
.wt-veh-n{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wt-veh-c{font-size:12px;color:var(--muted)}
.wt-crt{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:14px;background:var(--glass,rgba(255,255,255,.045));min-width:0}
.wt-crt img,.wt-crt-v{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none}
.wt-crt-v{display:grid;place-items:center;background:var(--glass-2,rgba(255,255,255,.075));color:var(--muted)}.wt-crt-v svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
.wt-crt-t{display:grid;gap:2px;min-width:0}.wt-crt-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wt-crt-t span{font-size:12px;color:var(--muted)}
.wt-bt{border-radius:14px;background:var(--glass,rgba(255,255,255,.045))}
.wt-bt summary{display:grid;grid-template-columns:90px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none;font-size:13px}
.wt-bt summary::-webkit-details-marker{display:none}
.wt-res{font-weight:700;font-size:12px;text-align:center;padding:3px 8px;border-radius:99px;background:var(--glass-2,rgba(255,255,255,.075))}
.wt-res.victoire{color:var(--id-ink,#0b0d00);background:var(--id)}.wt-res.defaite{color:#fff;background:#c43b49}
.wt-bt-q{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.wt-bt-c{white-space:nowrap}.wt-bt-d{white-space:nowrap;font-size:12px;color:var(--muted)}
.wt-bt-x{padding:0 14px 12px;font-size:12.5px;color:var(--muted)}.wt-bt-x p{margin:6px 0}.wt-bt-x b{color:var(--txt)}
.wt-bt-v{display:flex;align-items:center;gap:8px}.wt-bt-v span:last-child{margin-left:auto}

/* classement */
.wt-page .ow-cl.wt-cl{grid-template-columns:34px auto minmax(0,1fr) auto auto auto;grid-template-areas:none}
.wt-page .ow-cl.wt-cl > *{grid-area:auto}
.wt-cl-v{display:grid;justify-items:end;min-width:56px}.wt-cl-v b{font-size:14px}.wt-cl-v i{font-style:normal;font-size:11px;color:var(--muted)}

/* accueil */
.wt-acc{display:grid;gap:6px;margin-bottom:12px;text-decoration:none;color:inherit}
.wt-acc:hover{background:var(--glass-2,rgba(255,255,255,.075))}
.wt-acc-t{display:flex;align-items:center;gap:8px}.wt-acc-t em{font-style:normal;margin-left:auto;padding:1px 9px;border-radius:99px;background:#ff5f6d;color:#fff;font-size:12px;font-weight:700}
.wt-acc-l{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;min-width:0}.wt-acc-l span{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wt-acc-l i{font-style:normal;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-wt{text-decoration:none}

@media (max-width:900px){
  .wt-direct{grid-template-columns:minmax(0,1fr)}
  .wt-g2{grid-template-columns:minmax(0,1fr)}
  .wt-toile-z{max-height:none}
  .wt-bt summary{grid-template-columns:76px minmax(0,1fr) auto}
  .wt-bt-d{grid-column:2/-1}
  .wt-page .ow-cl.wt-cl{grid-template-columns:28px auto minmax(0,1fr) auto;gap:4px 10px}
  .wt-cl .wt-cl-v:nth-last-child(-n+2){display:none}
  .wt-dl-s{padding-left:12px}
}

/* PC (≥ 1100 px) : la page ne défile pas — liste à gauche (elle défile), carte à droite dans la hauteur restante */
@media (min-width:1100px){
  #app .wt-direct.cadre-plein{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:14px;align-items:stretch}
  #app .wt-direct.cadre-plein > *{min-height:0}
  #app .wt-d-liste > .cadre-defile{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden}
  #app .wt-d-vue{overflow:hidden}
  #app .wt-toile-z{flex:1 1 0;aspect-ratio:auto;max-height:none;width:100%}
}