:root{
  /* Priorité 22 — Présentation du module MilSim : identité visuelle propre
     (vert tactique en accent principal, au lieu de l'ambre "tableau de
     scores" d'OPS BOARD) pour que le module se ressente comme une
     expérience distincte, tout en gardant la même structure/typographie
     que le reste du site pour l'intégration. L'ambre d'OPS BOARD (--ob-amber)
     reste utilisé ponctuellement (badge "officiel" du chat association) pour
     rappeler visuellement le lien avec le site principal. */
  --bg:#12140f; --bg-grid: rgba(122,140,63,0.045);
  --panel:#1a1d15; --panel2:#20241a; --panel3:#262b1e;
  --line:#39402c; --line-soft:#2a2f21;
  --text:#eae6d6; --muted:#9aa38a; --muted2:#6f775f;
  --accent:#8fa563; --accent-dim:#3c451f;
  --olive:#7a8c3f; --olive-dim:#3c451f;
  --danger:#c1382c; --danger-dim:#4a1c17;
  --info:#5b8a72;
  --ob-amber:#e8a33d;
  --radius:2px; --shadow:0 4px 18px rgba(0,0,0,0.45);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    linear-gradient(var(--bg-grid) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px) 0 0/34px 100%,
    var(--bg);
  color:var(--text); font-family:'Oswald', sans-serif; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Bebas Neue', sans-serif; letter-spacing:.06em; font-weight:400; color:var(--text); margin:0;}
.mono{font-family:'JetBrains Mono', monospace;}
a{color:var(--accent); text-decoration:none;}
button,.btn{
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.04em;
  font-size:13px; font-weight:600; background:var(--panel3); color:var(--text);
  border:1px solid var(--line); padding:9px 16px; border-radius:var(--radius); cursor:pointer; transition:all .15s ease;
}
button:hover{border-color:var(--accent); color:var(--accent);}
button:active{transform:translateY(1px);}
button.primary{background:var(--accent); color:#141608; border-color:var(--accent);}
button.primary:hover{background:#f3b24f; color:#141608;}
button.danger{background:var(--danger-dim); border-color:var(--danger); color:#f2c9c3;}
button.danger:hover{background:var(--danger); color:#1a0a08;}
button.ghost{background:transparent;}
#pushBellBtn.active{color:var(--ob-amber, #e0a72e); border-color:var(--ob-amber, #e0a72e);}
button.small{padding:5px 10px; font-size:11px;}
/* Radio (phase 9) : boîtier façon vrai talkie-walkie — antenne, écran LCD digital, LEDs TX/RX,
   molette de volume, et gros bouton "Appuyer pour parler" (PTT) difficile à manquer au doigt sur
   le terrain, avec un état "speaking" bien visible pendant l'appui. */
.radio-device{
  position:relative; background:linear-gradient(180deg,#23271b,#181b12);
  border:1px solid var(--line); border-radius:6px; padding:18px 16px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -2px 6px rgba(0,0,0,0.5);
}
.radio-antenna{
  position:absolute; top:-22px; right:22px; width:5px; height:26px; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#4a5138,#2a2f21); box-shadow:0 0 0 1px var(--line);
}
.radio-antenna::after{content:''; position:absolute; top:-6px; left:-2px; width:9px; height:9px; border-radius:50%; background:#3c451f; box-shadow:0 0 0 1px var(--line);}
.radio-lcd{
  font-family:'JetBrains Mono',monospace; background:#0c1408; border:1px solid #1c2412;
  border-radius:3px; padding:10px 12px; box-shadow:inset 0 2px 6px rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.radio-lcd .freq{color:#8fe07a; font-size:15px; font-weight:700; letter-spacing:.03em; text-shadow:0 0 6px rgba(143,224,122,0.35);}
.radio-lcd .status{color:#8fe07a; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; opacity:.85;}
.radio-lcd .status.busy{color:#e0a67a; text-shadow:0 0 6px rgba(224,166,122,0.35);}
.radio-lcd .status.tx{color:#e07a7a; text-shadow:0 0 6px rgba(224,122,122,0.4);}
.radio-leds{display:flex; align-items:center; gap:10px; margin:10px 2px 2px;}
.radio-led{display:inline-flex; align-items:center; gap:5px; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted2);}
.radio-led .dot{width:8px; height:8px; border-radius:50%; background:#2a2f21; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.4);}
.radio-led .dot.on-tx{background:#e0574a; box-shadow:0 0 6px 1px rgba(224,87,74,0.7);}
.radio-led .dot.on-rx{background:#8fe07a; box-shadow:0 0 6px 1px rgba(143,224,122,0.7);}
.radio-volume{display:flex; align-items:center; gap:8px; margin-top:12px;}
.radio-volume label{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted2); white-space:nowrap;}
.radio-volume input[type=range]{flex:1; accent-color:var(--olive);}
button.radio-ptt{
  width:100%; max-width:280px; padding:22px 16px; font-size:15px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; border-radius:999px; border-width:2px;
  background:var(--panel3); user-select:none; -webkit-user-select:none; touch-action:none;
}
button.radio-ptt.speaking{background:var(--danger); border-color:var(--danger); color:#1a0a08; transform:scale(0.97);}
button.radio-ptt.busy{background:var(--panel2); border-color:var(--line); color:var(--muted2); cursor:not-allowed;}
.radio-signal-bars{display:inline-flex; align-items:flex-end; gap:1px; height:10px; vertical-align:middle;}
.radio-signal-bars i{display:block; width:3px; background:var(--muted2); border-radius:1px;}
.radio-signal-bars i:nth-child(1){height:3px;} .radio-signal-bars i:nth-child(2){height:5px;}
.radio-signal-bars i:nth-child(3){height:7px;} .radio-signal-bars i:nth-child(4){height:10px;}
.radio-signal-bars.q3 i{background:var(--accent);}
.radio-signal-bars.q2 i:nth-child(-n+3){background:var(--accent);}
.radio-signal-bars.q1 i:nth-child(-n+2){background:#e0a67a;}
.radio-signal-bars.q0 i:nth-child(1){background:var(--danger);}

button:disabled{opacity:.35; cursor:not-allowed;}
/* Stepper +/- : contrôle tactile pour l'inventaire terrain (une main) */
.stepper{display:inline-flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#0f110b;}
.stepper .step-btn{width:34px; height:34px; padding:0; font-size:17px; font-weight:700; line-height:1; border:0; border-radius:0; background:var(--panel3); flex-shrink:0;}
.stepper .step-btn:active{background:var(--accent); color:#141608;}
.stepper .step-val{min-width:30px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700; color:var(--text); padding:0 4px; user-select:none;}
/* Barre de navigation basse MilSim : accès rapide en partie, une main */
.ms-bottom-nav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:55;
  background:var(--panel); border-top:2px solid var(--line);
  padding:4px 2px calc(4px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 14px rgba(0,0,0,.35);
}
.ms-bottom-nav button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:transparent; border:0; border-radius:4px; padding:7px 2px 6px;
  font-size:9px; letter-spacing:.02em; color:var(--muted); min-height:52px;
}
.ms-bottom-nav button .bn-ico{font-size:19px; line-height:1;}
.ms-bottom-nav button.active{color:var(--accent);}
input,select,textarea{
  font-family:'JetBrains Mono', monospace; background:#0f110b; border:1px solid var(--line);
  color:var(--text); padding:8px 10px; border-radius:var(--radius); font-size:13px; width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:block; margin-bottom:5px;}
.field{margin-bottom:14px;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px;}
.card+.card{margin-top:14px;}
.row{display:flex; gap:12px; flex-wrap:wrap;}
.row>*{flex:1; min-width:160px;}
.muted{color:var(--muted);}
.small{font-size:12px;}
.pill{display:inline-flex; align-items:center; gap:6px; background:var(--panel3); border:1px solid var(--line); border-radius:20px; padding:3px 12px; font-size:11px; text-transform:uppercase; letter-spacing:.04em;}
.pill.accent{border-color:var(--accent); color:var(--accent);}
.pill.olive{border-color:var(--olive); color:var(--olive);}
.pill.danger{border-color:var(--danger); color:#f2c9c3;}
.pill.warning{border-color:#e8a33d; color:#e8a33d;}
.hairline{border:none; border-top:1px solid var(--line-soft); margin:16px 0;}
.empty{color:var(--muted); text-align:center; padding:30px 10px; font-size:14px;}
.mission-card.status-terminee{border-color:var(--olive);}
.mission-card.status-echouee{border-color:var(--danger);}
.card.pinned{border-color:var(--accent);}
.ms-marker{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; font-size:14px; color:#141608; border:2px solid #141608; box-shadow:0 2px 6px rgba(0,0,0,0.5);}
.ms-marker.me{background:var(--accent); border-width:3px; border-color:var(--accent); box-shadow:0 0 0 2px #141608, 0 2px 6px rgba(0,0,0,0.5);}
.ms-marker.mate{background:var(--olive);}
.ms-marker.team{background:#8fa563; border-style:dashed;}
.ms-marker.other{background:var(--muted2); color:var(--text);}
.ms-marker.offline{opacity:.4;}
.ms-marker.hidden-layer{display:none;}
@keyframes ms-decoy-pulse{0%,100%{opacity:.55;} 50%{opacity:1;}}
.ms-zone-icon{width:28px; height:28px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; border:2px solid #141608; box-shadow:0 2px 6px rgba(0,0,0,0.5);}
.ms-zone-icon span{transform:rotate(45deg); font-size:14px;}
.ms-zone-icon.objectif{background:var(--accent);}
.ms-zone-icon.ennemi{background:var(--danger);}
.ms-zone-icon.danger{background:var(--danger);}
.ms-zone-icon.ralliement{background:var(--info);}
.ms-zone-icon.ravitaillement{background:var(--olive);}
.ms-zone-icon.respawn{background:var(--success, #4caf7d);}
.ms-zone-icon.vehicule{background:var(--warn, #c9922f);}
.ms-zone-icon.autre{background:var(--muted2);}
#milsimMap.ms-placing{cursor:crosshair;}
.ms-map-jammed-overlay{position:absolute; inset:0; z-index:500; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:20px; background:repeating-linear-gradient(135deg, #141608, #141608 10px, #1c1f10 10px, #1c1f10 20px); color:var(--danger);}
.ms-map-jammed-overlay .icon{font-size:34px; animation:ms-decoy-pulse 1.6s ease-in-out infinite;}
.ms-map-jammed-overlay .title{font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:1px;}
.ms-map-jammed-overlay .sub{color:var(--muted); font-size:13px; max-width:320px;}
.leaflet-popup-content-wrapper{background:var(--panel2); color:var(--text); border-radius:var(--radius); box-shadow:var(--shadow);}
.leaflet-popup-tip{background:var(--panel2);}
.leaflet-popup-content{margin:10px 12px; font-family:'Oswald',sans-serif;}
.leaflet-popup-content b{color:var(--accent);}
.ms-zone-popup .small{margin-top:4px;}
.ms-zone-popup button{margin-top:8px;}
.marker-legend{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.marker-legend .leg-item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text); cursor:pointer; user-select:none; padding:5px 10px 5px 6px; border-radius:14px; border:1px solid var(--line-soft); background:var(--panel2); transition:background .15s, border-color .15s, opacity .15s;}
.marker-legend .leg-item:hover{border-color:var(--accent); background:var(--panel3, var(--panel2));}
.marker-legend .leg-item:active{transform:scale(.97);}
.marker-legend .leg-item.on{border-color:var(--accent); background:rgba(232,163,61,0.12);}
.marker-legend .leg-item.off{opacity:.45; color:var(--muted);}
.marker-legend .leg-item.off .leg-dot{filter:grayscale(1);}
.marker-legend .leg-check{width:15px; height:15px; flex:0 0 15px; border-radius:4px; border:1.5px solid var(--muted); display:inline-flex; align-items:center; justify-content:center; font-size:10px; line-height:1; color:#141608; background:transparent; transition:background .15s, border-color .15s;}
.marker-legend .leg-item.on .leg-check{background:var(--accent); border-color:var(--accent);}
.marker-legend .leg-dot{width:10px; height:10px; border-radius:50%; display:inline-block; border:1px solid #141608;}
.marker-legend .leg-dot.me{background:var(--accent);}
.marker-legend .leg-dot.mate{background:var(--olive);}
.marker-legend .leg-dot.team{background:#8fa563;}
.marker-legend .leg-dot.other{background:var(--muted2);}
.shop-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px;}
.shop-item{display:flex; flex-direction:column; gap:8px;}
.shop-item .price{font-family:'JetBrains Mono',monospace; color:var(--accent); font-size:15px;}
.effect-chip{display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--line-soft); border-radius:var(--radius); padding:8px 12px; margin-bottom:8px; font-size:12px;}
.effect-chip .cat{font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
.effect-chip .countdown{margin-left:auto; font-family:'JetBrains Mono',monospace; color:var(--accent);}
.wallet-tx{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:13px;}
.wallet-tx .amt.pos{color:var(--olive);}
.wallet-tx .amt.neg{color:var(--danger);}
.inv-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line-soft); border-radius:var(--radius);}
.inv-row+.inv-row{margin-top:6px;}
.inv-row .qty{font-family:'JetBrains Mono',monospace; color:var(--accent); width:60px;}
/* isolation:isolate crée un nouveau contexte d'empilement propre à la carte : les éléments
   internes de Leaflet (contrôles de zoom, popups...) ont des z-index natifs élevés (jusqu'à
   1000) qui, sans ça, se comparaient directement au reste de la page (topbar, bottom-nav...)
   au lieu de rester confinés à l'intérieur de la carte — d'où la carte qui passait par-dessus
   la navbar sur mobile. */
#milsimMap{background:#0f110b; isolation:isolate;}
.leaflet-tooltip{background:var(--panel3); color:var(--text); border:1px solid var(--line); font-family:'Oswald',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.03em;}
.leaflet-tooltip:before{border-top-color:var(--line);}
.leaflet-control-zoom a{background:var(--panel3); color:var(--accent); border-color:var(--line);}
.leaflet-control-zoom a:hover{background:var(--panel2); color:var(--accent);}
.leaflet-control-attribution{background:rgba(20,22,15,0.75); color:var(--muted2); font-size:9px;}
.leaflet-control-attribution a{color:var(--muted);}
.topbar{
  position:sticky; top:0; z-index:56; /* > .ms-bottom-nav (55) pour que les panneaux ouverts depuis le topbar (notifs, menu "plus") ne passent jamais dessous sur mobile */ background:linear-gradient(180deg,#171a11 0%,#14160f 100%);
  border-bottom:2px solid var(--line); display:flex; align-items:center; gap:18px; padding:0 22px; box-shadow:var(--shadow);
  min-height:64px; flex-wrap:wrap;
}
.tag{display:flex; align-items:center; gap:10px; padding:12px 0;}
/* Patch hexagonal (au lieu du badge rond d'OPS BOARD) pour une identité
   visuelle distincte au premier coup d'oeil, tout en gardant les mêmes
   police/couleurs de structure que le reste du site. */
.tag-plate{width:38px; height:38px; clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background:radial-gradient(circle at 35% 30%,#3d451f,#1c2114 70%); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; font-family:'Bebas Neue',sans-serif; color:var(--accent);}
.tag .sub{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;}
.topbar .back{margin-left:auto;}
.burger-btn{display:none; background:transparent; border:1px solid var(--line); padding:8px 10px; margin-left:10px; font-size:16px; line-height:1;}
.nav-scrim{display:none; position:fixed; inset:0; background:rgba(8,9,5,.6); z-index:59;}
.nav-scrim.show{display:block;}
main{max-width:920px; margin:0 auto; padding:24px 18px 80px;}
.section-title{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:26px 0 12px;}
.section-title h2{font-size:22px;}
.game-list{display:grid; gap:12px;}
.game-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:border-color .15s;}
.game-card:hover{border-color:var(--accent);}
.game-card .name{font-family:'Bebas Neue',sans-serif; font-size:20px; letter-spacing:.03em;}
.game-card .meta{margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:4px; align-items:flex-end;}
.status-dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px;}
.status-draft .status-dot{background:var(--muted2);}
.status-active .status-dot{background:var(--olive);}
.status-paused .status-dot{background:var(--accent);}
.status-ended .status-dot{background:var(--danger);}
.workspace{display:flex; gap:20px; align-items:flex-start;}
.sidenav{width:190px; flex:none; display:flex; flex-direction:column; gap:4px; position:sticky; top:80px;}
.sidenav button{text-align:left; background:transparent; border:1px solid transparent; padding:10px 12px;}
.sidenav button.active{background:var(--panel2); border-color:var(--line); color:var(--accent);}
.sidenav button .lock{float:right; opacity:.5; font-size:10px;}
.content{flex:1; min-width:0;}
.roster-group{margin-bottom:18px;}
.roster-group h3{font-size:15px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.swatch{width:10px; height:10px; border-radius:50%; display:inline-block;}
.player-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius); border:1px solid var(--line-soft); flex-wrap:wrap;}
.player-row+.player-row{margin-top:6px;}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--panel3); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--muted); flex:none;}
.player-row .name{font-weight:600;}
.player-row .role-tag{margin-left:auto; font-size:10px;}
.join-code-box{display:flex; align-items:center; gap:10px; background:#0f110b; border:1px dashed var(--accent-dim); padding:10px 14px; border-radius:var(--radius);}
.join-code-box .code{font-family:'JetBrains Mono',monospace; font-size:22px; letter-spacing:.14em; color:var(--accent);}
.placeholder-tab{text-align:center; padding:60px 20px; color:var(--muted);}
.placeholder-tab .big{font-size:34px; font-family:'Bebas Neue',sans-serif; color:var(--text); letter-spacing:.04em; margin-bottom:8px;}
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--panel3); border:1px solid var(--accent); color:var(--text); padding:10px 18px; border-radius:var(--radius); font-size:13px; z-index:200; box-shadow:var(--shadow);}
.toast.err{border-color:var(--danger); color:#f2c9c3;}
.inline-form{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.inline-form input{flex:1; min-width:120px;}
.team-block{border:1px solid var(--line); border-radius:var(--radius); padding:14px; margin-bottom:12px;}
.team-block-head{display:flex; align-items:center; gap:10px;}
.squad-tag{display:inline-flex; align-items:center; gap:6px; background:var(--panel2); border:1px solid var(--line-soft); border-radius:20px; padding:4px 10px; font-size:11px; margin:4px 6px 0 0;}
.squad-tag button{padding:0 4px; font-size:11px; border:none; background:none;}
.loading{text-align:center; padding:60px; color:var(--muted);}
select.assign{width:auto; min-width:110px;}

/* ===== Chat : remise en forme (panneau unifié, bulles arrondies, saisie ancrée) ===== */
.chat-wrap{
  display:flex; gap:0; height:65vh; min-height:380px;
  border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--panel2);
  box-shadow:var(--shadow);
}
.chat-list{width:230px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; border:0; border-right:1px solid var(--line); border-radius:0; background:var(--panel2);}
.chat-list-title{padding:12px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted2); border-bottom:1px solid var(--line-soft); background:var(--panel); flex-shrink:0;}
.chat-list-items{flex:1; overflow-y:auto;}
.chat-convo-item{display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left; padding:12px 14px; border:0; border-left:3px solid transparent; border-bottom:1px solid var(--line-soft); background:transparent; color:var(--muted); border-radius:0; font-size:13px;}
.chat-convo-item:hover{color:var(--text); border-color:transparent; border-left-color:var(--line);}
.chat-convo-item b{color:var(--text); font-weight:600;}
.chat-convo-item.active{background:var(--panel3); color:var(--accent); border-left-color:var(--accent);}
.chat-convo-item .helptext{font-size:11px; color:var(--muted2); margin-top:3px;}
.chat-thread{flex:1; display:flex; flex-direction:column; min-width:0; border:0; border-radius:0; background:var(--panel); overflow:hidden;}
.chat-thread-header{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); flex-shrink:0; background:var(--panel2);}
.chat-back-btn{display:none; background:transparent; border:1px solid var(--line); padding:6px 10px; font-size:12px;}
.chat-push-toggle{margin-left:auto; background:transparent; border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:15px; line-height:1; cursor:pointer;}
.chat-push-toggle.active{border-color:var(--accent, #8fa563);}
.chat-messages{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;}
.chat-bubble-row{display:flex;}
.chat-bubble-row.mine{justify-content:flex-end;}
.chat-bubble{max-width:78%; background:var(--panel3); border:1px solid var(--line-soft); border-radius:14px 14px 14px 3px; padding:9px 13px; font-size:13px; line-height:1.5; word-break:break-word; box-shadow:0 2px 6px rgba(0,0,0,.25);}
.chat-bubble-row.mine .chat-bubble{background:var(--accent-dim); border-color:var(--accent); border-radius:14px 14px 3px 14px;}
.chat-bubble-author{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent); margin-bottom:2px;}
.chat-bubble-author.mine{color:var(--accent); text-align:right;}
.chat-org-badge{display:inline-block; margin-left:6px; font-size:9px; text-transform:none; letter-spacing:0; color:var(--ob-amber); border:1px solid var(--ob-amber); border-radius:6px; padding:1px 5px; vertical-align:middle;}
.chat-bubble.chat-bubble-org{border-color:var(--ob-amber);}
.chat-bubble-time{font-size:10px; color:var(--muted2); margin-top:4px; text-align:right;}
.chat-reactions{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:6px; position:relative;}
.chat-reaction-pill{display:inline-flex; align-items:center; gap:3px; font-size:12px; line-height:1; padding:3px 7px; border-radius:12px; border:1px solid var(--line-soft); background:var(--panel2); color:var(--text); cursor:pointer;}
.chat-reaction-pill.mine{border-color:var(--accent); background:var(--accent-dim);}
.chat-reaction-add{font-size:12px; line-height:1; padding:3px 6px; border-radius:12px; border:1px dashed var(--line-soft); background:transparent; color:var(--muted2); cursor:pointer;}
.chat-reaction-add:hover{color:var(--text); border-color:var(--accent);}
.chat-reaction-picker{position:absolute; bottom:100%; left:0; margin-bottom:4px; display:flex; flex-wrap:wrap; gap:4px; max-width:min(220px, 80vw); background:var(--panel3); border:1px solid var(--line-soft); border-radius:10px; padding:5px 6px; box-shadow:0 4px 12px rgba(0,0,0,.35); z-index:5;}
.chat-bubble-row.mine .chat-reaction-picker{left:auto; right:0;}
.chat-reaction-picker button{font-size:16px; line-height:1; background:none; border:none; cursor:pointer; padding:2px 3px; border-radius:6px;}
.chat-reaction-picker button:hover{background:var(--panel2);}
.chat-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); flex-shrink:0; background:var(--panel2);}
.chat-input-row textarea{flex:1; resize:none; min-height:40px; max-height:120px; border-radius:20px; padding:10px 16px;}
.chat-input-row button{border-radius:20px;}

@media (max-width:760px){
  main{padding:18px 14px 76px;}
  .ms-bottom-nav{display:flex;}
  body{padding-bottom:60px;}
  .stepper .step-btn{width:40px; height:40px; font-size:19px;}
  .stepper .step-val{min-width:34px; font-size:16px;}
  .burger-btn{display:block;}
  .sidenav{
    display:flex; flex-direction:column; gap:0;
    position:fixed; top:0; right:0; height:100vh; height:100dvh; width:min(78vw,300px);
    background:var(--panel); border-left:1px solid var(--line); border-radius:0;
    transform:translateX(100%); transition:transform .2s ease;
    z-index:60; padding:70px 6px 20px; overflow-y:auto; overflow-x:hidden; margin-left:0;
  }
  .sidenav.open{transform:translateX(0);}
  .sidenav button{
    text-align:left; border-bottom:1px solid var(--line-soft); padding:14px 12px; width:100%; white-space:normal; flex:none;
  }
  .sidenav button.active{background:var(--panel3); border-color:var(--line-soft);}
  .topbar{padding:0 14px; gap:10px; min-height:58px;}
  .tag{gap:8px; padding:10px 0;}
  .tag-plate{width:32px; height:32px; font-size:13px;}
  .tag h1{font-size:17px !important;}
  .tag .sub{font-size:10px;}
  .topbar .back{font-size:11px; padding:8px 12px; white-space:nowrap;}
  .card{padding:14px;}
  .workspace{flex-direction:column; gap:14px; align-items:stretch;}
  .section-title h2{font-size:19px;}
  .game-card{flex-wrap:wrap; padding:14px;}
  .game-card .meta{margin-left:0; align-items:flex-start; text-align:left;}
  .join-code-box{flex-wrap:wrap;}
  .join-code-box .code{font-size:18px;}
  .shop-grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr));}
  /* Cible tactile confortable + évite le zoom auto d'iOS sur les champs <16px */
  button,.btn{min-height:44px;}
  button.small{min-height:36px;}
  input,select,textarea{font-size:16px;}
  .chat-wrap{height:calc(100vh - 295px); height:calc(100dvh - 295px); min-height:300px; border-radius:4px;}
  .chat-list{width:100%;}
  .chat-back-btn{display:inline-block;}
  .chat-wrap[data-active="list"] .chat-thread{display:none;}
  .chat-wrap[data-active="thread"] .chat-list{display:none;}
  .chat-list, .chat-thread{width:100%;}
}
@media (max-width:480px){
  main{padding:14px 10px 72px;}
  .topbar{padding:0 10px;}
  .tag .sub{display:none;}
  .row{gap:8px;}
  .row>*{min-width:0; flex-basis:100%;}
  .card{padding:12px;}
  .game-card .name{font-size:18px;}
  .join-code-box{padding:9px 10px;}
  .join-code-box .code{font-size:16px; letter-spacing:.08em;}
  .marker-legend{gap:6px 10px;}
  .marker-legend .leg-item{font-size:11px;}
}