/* ArenaLive CM — composants V65 et durcissement responsive.
 *
 * Ce fichier n'écrase aucun style existant : il ajoute les classes des
 * nouveautés (période d'essai, accueil vivant, progression, boutique,
 * Le Cercle, panneau d'après-partie) et resserre le responsive sur les
 * tailles réellement rencontrées : 320 px, téléphones courants, phablettes,
 * tablettes, paysage bas, encoches et grands écrans.
 *
 * Les variables utilisées (--gold, --bg2, --border…) sont celles déjà
 * définies par index.html ; un repli est fourni pour chacune afin que le
 * fichier reste utilisable seul.
 */

:root{
  --al-gold:var(--gold,#F5A623);
  --al-bronze:#C87A2F;
  --al-bg:var(--bg,#0D0F14);
  --al-bg2:var(--bg2,#13161E);
  --al-bg3:var(--bg3,#1A1E2A);
  --al-card:var(--card,rgba(255,255,255,.04));
  --al-border:var(--border,rgba(255,255,255,.08));
  --al-text:var(--text,#E8E6E1);
  --al-text2:var(--text2,#9CA3AF);
  --al-text3:var(--text3,#6B7280);
  --al-green:var(--green,#10B981);
  --al-red:var(--red,#EF4444);
  --al-blue:var(--blue,#3B82F6);
  --al-cyan:var(--cyan,#06B6D4);
  --al-r:14px;
  --al-tap:44px; /* cible tactile minimale, norme iOS/Material */
}

/* ── Icônes de marque ─────────────────────────────────────────────── */
.ai{display:inline-block;vertical-align:-.18em;flex-shrink:0}
.ai-inline{margin-right:.35em}
.al-icon-chip{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:11px;background:var(--al-card);
  border:1px solid var(--al-border);color:var(--al-gold);flex-shrink:0}
.al-icon-chip.gold{background:rgba(245,166,35,.12);border-color:rgba(245,166,35,.3)}
.al-icon-chip.green{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.3);color:var(--al-green)}
.al-icon-chip.blue{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.3);color:var(--al-blue)}

/* ── Blocs communs ────────────────────────────────────────────────── */
.al-card{background:var(--al-bg2);border:1px solid var(--al-border);
  border-radius:var(--al-r);padding:1rem;min-width:0}
.al-card+.al-card{margin-top:.75rem}
.al-row{display:flex;align-items:center;gap:.7rem;min-width:0;flex-wrap:wrap}
.al-grow{flex:1;min-width:0}
.al-title{font-family:'Syne',sans-serif;font-weight:800;font-size:.95rem;line-height:1.3}
.al-sub{font-size:.78rem;color:var(--al-text2);line-height:1.5}
.al-muted{font-size:.72rem;color:var(--al-text3)}
.al-truncate{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}

.al-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:var(--al-tap);padding:10px 16px;border-radius:11px;border:1px solid var(--al-border);
  background:var(--al-bg3);color:var(--al-text);font-family:'Inter',sans-serif;
  font-size:.85rem;font-weight:600;cursor:pointer;transition:border-color .18s,background .18s;
  text-align:center;line-height:1.25}
.al-btn:hover{border-color:rgba(245,166,35,.45)}
.al-btn:active{transform:translateY(1px)}
.al-btn:focus-visible{outline:2px solid var(--al-gold);outline-offset:2px}
.al-btn.primary{background:var(--al-gold);border-color:var(--al-gold);color:#12100a;font-weight:700}
.al-btn.primary:hover{background:#ffb63b}
.al-btn.ghost{background:transparent}
.al-btn.block{width:100%}
.al-btn[disabled]{opacity:.45;cursor:not-allowed}
.al-btn-lg{min-height:56px;font-size:1rem;padding:14px 22px;border-radius:14px}

.al-chip{display:inline-flex;align-items:center;gap:.35rem;padding:5px 11px;border-radius:999px;
  background:var(--al-card);border:1px solid var(--al-border);font-size:.74rem;font-weight:600;
  color:var(--al-text2);white-space:nowrap}
.al-chip.gold{background:rgba(245,166,35,.1);border-color:rgba(245,166,35,.28);color:var(--al-gold)}
.al-chip.green{background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.28);color:var(--al-green)}
.al-chip.red{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.28);color:var(--al-red)}

/* ── Priorité 1 — bandeau des parties gratuites ───────────────────── */
.al-freeplays{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border-radius:var(--al-r);
  background:linear-gradient(120deg,rgba(245,166,35,.14),rgba(200,122,47,.08));
  border:1px solid rgba(245,166,35,.3);margin:0 0 1rem}
.al-freeplays .al-freeplays-count{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:800;
  color:var(--al-gold);line-height:1;min-width:1.4em;text-align:center}
.al-freeplays-copy{flex:1;min-width:0}
.al-freeplays-copy strong{display:block;font-size:.9rem;font-weight:700}
.al-freeplays-copy span{display:block;font-size:.76rem;color:var(--al-text2);line-height:1.45}
.al-freeplays-dots{display:flex;gap:5px;flex-wrap:wrap}
.al-freeplays-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);display:block}
.al-freeplays-dots i.on{background:var(--al-gold)}
.al-freeplays.ended{background:var(--al-card);border-color:var(--al-border)}
.al-freeplays.ended .al-freeplays-count{color:var(--al-text2)}

/* ── Priorité 4 — première partie, interface volontairement minimale ─ */
.al-firstrun{position:fixed;inset:0;z-index:1200;background:var(--al-bg);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:max(1.25rem,env(safe-area-inset-top)) 1.25rem max(1.25rem,env(safe-area-inset-bottom));
  text-align:center;overflow-y:auto}
.al-firstrun.open{display:flex}
.al-firstrun-inner{width:100%;max-width:420px;margin:auto}
.al-firstrun h2{font-family:'Syne',sans-serif;font-size:clamp(1.5rem,6vw,2.1rem);font-weight:800;
  line-height:1.15;margin-bottom:.6rem}
.al-firstrun p{color:var(--al-text2);font-size:.92rem;line-height:1.6;margin-bottom:1.5rem}
.al-firstrun .al-firstrun-mark{width:74px;height:74px;border-radius:24px;margin:0 auto 1.1rem;
  display:flex;align-items:center;justify-content:center;color:var(--al-gold);
  background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3)}
.al-firstrun-actions{display:flex;flex-direction:column;gap:.7rem}
.al-firstrun-note{margin-top:1.2rem;font-size:.72rem;color:var(--al-text3);line-height:1.55}

/* ── Priorité 8 — progression : niveau et série ───────────────────── */
.al-progress{display:grid;grid-template-columns:1fr;gap:.75rem}
.al-level{display:flex;align-items:center;gap:.85rem}
.al-level-badge{width:52px;height:52px;border-radius:16px;flex-shrink:0;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--al-gold),var(--al-bronze));color:#12100a}
.al-level-badge b{font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:800;line-height:1}
.al-level-badge small{font-size:.53rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.al-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:.4rem}
.al-bar>span{display:block;height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--al-gold),#ffd27a);transition:width .5s ease}
.al-streak{display:flex;align-items:center;gap:.8rem}
.al-streak-flame{color:var(--al-gold);flex-shrink:0}
.al-streak-days{display:flex;gap:5px;flex-wrap:wrap;margin-top:.45rem}
.al-streak-days i{width:20px;height:20px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;font-size:.6rem;font-style:normal;font-weight:700;
  background:rgba(255,255,255,.06);color:var(--al-text3)}
.al-streak-days i.on{background:rgba(245,166,35,.2);color:var(--al-gold)}
.al-streak-days i.today{background:var(--al-gold);color:#12100a}

/* ── Priorité 2 — accueil vivant, jamais de bloc vide ─────────────── */
.al-live-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:.75rem}
.al-live-item>.al-grow{min-width:0;overflow:hidden}
.al-live-item{display:flex;align-items:center;gap:.7rem;padding:.75rem .85rem;border-radius:12px;
  background:var(--al-card);border:1px solid var(--al-border);min-width:0;cursor:pointer;
  transition:border-color .18s}
.al-live-item:hover{border-color:rgba(245,166,35,.4)}
.al-live-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:#12100a;
  background:linear-gradient(140deg,var(--al-gold),var(--al-bronze))}
.al-live-dot{width:8px;height:8px;border-radius:50%;background:var(--al-green);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(16,185,129,.16)}
.al-fallback{display:flex;flex-direction:column;gap:.85rem;padding:1.15rem;border-radius:var(--al-r);
  background:var(--al-bg2);border:1px dashed var(--al-border)}
.al-fallback-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.al-fallback-actions .al-btn{flex:1 1 170px}

/* ── Panneau d'après-partie ───────────────────────────────────────── */
.al-postgame{position:fixed;left:0;right:0;bottom:0;z-index:1150;background:var(--al-bg2);
  border-top:1px solid var(--al-border);border-radius:20px 20px 0 0;
  padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .3s ease;box-shadow:0 -18px 44px rgba(0,0,0,.5)}
.al-postgame.open{transform:none}
.al-postgame-inner{max-width:640px;margin:0 auto}
.al-postgame-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.85rem}
.al-postgame-actions .al-btn{width:100%}
.al-reactions{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.75rem}
.al-reaction{min-width:var(--al-tap);min-height:var(--al-tap);border-radius:12px;border:1px solid var(--al-border);
  background:var(--al-card);font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.al-reaction:active{border-color:var(--al-gold)}
@media(prefers-reduced-motion:reduce){.al-postgame{transition:none}.al-bar>span{transition:none}}

/* ── Priorité 9 — boutique ────────────────────────────────────────── */
.al-shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem}
.al-shop-item{display:flex;flex-direction:column;gap:.55rem;padding:.9rem;border-radius:14px;
  background:var(--al-bg2);border:1px solid var(--al-border);min-width:0}
.al-shop-preview{height:74px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  gap:6px;background:var(--al-bg3);border:1px solid var(--al-border)}
.al-shop-pawn{width:20px;height:26px;border-radius:10px 10px 5px 5px}
.al-shop-card{width:30px;height:42px;border-radius:5px;border:2px solid rgba(255,255,255,.22)}
.al-shop-frame{width:44px;height:44px;border-radius:50%;border:3px solid var(--al-gold)}
.al-shop-felt{width:64px;height:40px;border-radius:9px}
.al-shop-item.owned{border-color:rgba(16,185,129,.45)}
.al-season{display:flex;flex-direction:column;gap:.7rem}
.al-season-track{display:flex;gap:5px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.al-season-tier{min-width:44px;height:44px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:.72rem;font-weight:700;flex-shrink:0;
  background:var(--al-card);border:1px solid var(--al-border);color:var(--al-text3)}
.al-season-tier.done{background:rgba(245,166,35,.16);border-color:rgba(245,166,35,.35);color:var(--al-gold)}
.al-season-tier.current{background:var(--al-gold);color:#12100a;border-color:var(--al-gold)}

/* Conteneur générique utilisé dans le cadre de jeu (games/arena-mini). */
.panel{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.panel h2{font-family:'Syne',sans-serif;font-size:1.15rem;font-weight:800;line-height:1.25}
.panel input,.panel select,.al-card input,.al-card select{
  background:var(--al-bg3);border:1px solid var(--al-border);color:var(--al-text);
  border-radius:10px;padding:11px 12px;font-family:inherit;font-size:16px;min-height:var(--al-tap);
  width:100%;max-width:100%}
.panel input:focus,.panel select:focus{outline:2px solid var(--al-gold);outline-offset:1px}

/* ── Priorité 10 — Le Cercle ──────────────────────────────────────── */
.al-cercle{display:flex;flex-direction:column;gap:1rem;min-width:0}
.al-cercle-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.al-cercle-timer{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:800;color:var(--al-gold);
  min-width:2.4em;text-align:center;font-variant-numeric:tabular-nums}
.al-cercle-timer.urgent{color:var(--al-red)}
.al-cercle-ring{position:relative;width:min(84vw,340px);aspect-ratio:1;margin:0 auto;
  border-radius:50%;border:1px dashed var(--al-border);display:grid;place-items:center}
.al-cercle-center{text-align:center;padding:1rem;max-width:62%}
.al-cercle-totem{position:absolute;width:64px;display:flex;flex-direction:column;align-items:center;gap:3px;
  transform:translate(-50%,-50%);cursor:pointer;user-select:none}
.al-cercle-totem .al-cercle-orb{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:1rem;color:#12100a;
  border:2px solid transparent;transition:transform .2s,border-color .2s}
.al-cercle-totem.selected .al-cercle-orb{border-color:#fff;transform:scale(1.1)}
.al-cercle-totem b{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--al-text2)}
.al-cercle-totem.blocked .al-cercle-orb{box-shadow:0 0 0 3px rgba(239,68,68,.45)}
.al-cercle-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.al-cercle-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}
.al-cercle-player{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;border-radius:10px;
  background:var(--al-card);border:1px solid var(--al-border);font-size:.76rem;min-width:0}
.al-cercle-player.moi{border-color:rgba(245,166,35,.45)}
.al-cercle-player .al-live-dot{width:7px;height:7px}
.al-cercle-secret{padding:.85rem 1rem;border-radius:12px;border:1px solid rgba(124,58,237,.35);
  background:rgba(124,58,237,.1);font-size:.85rem;line-height:1.5}
.al-cercle-log{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:.4rem}
.al-cercle-log div{font-size:.74rem;color:var(--al-text2);padding:.4rem .6rem;border-radius:8px;
  background:var(--al-card)}

/* ── Signalements et états de chargement (priorité 6) ─────────────── */
.al-skeleton{border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.1),rgba(255,255,255,.05));
  background-size:200% 100%;animation:al-shimmer 1.4s linear infinite;min-height:64px}
@keyframes al-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.al-skeleton{animation:none}}
.al-visitor-only{display:none}
body[data-arena-state="visitor"] .al-visitor-only{display:block}
body[data-arena-state="visitor"] .al-member-only{display:none!important}
body[data-arena-state="playing"] .al-hide-in-game{display:none!important}

/* ═══════════════════════════════════════════════════════════════════
   DURCISSEMENT RESPONSIVE — du plus petit au plus grand
   ═══════════════════════════════════════════════════════════════════ */

/* Aucun débordement horizontal possible, quelle que soit la page. */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas,iframe{max-width:100%}
table{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}
.al-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Cibles tactiles : tout ce qui se clique atteint 44×44 sur écran tactile. */
@media(pointer:coarse){
  .al-btn,.al-reaction,.al-cercle-totem,button,[role="button"]{min-height:var(--al-tap)}
  .al-cercle-totem .al-cercle-orb{width:52px;height:52px}
  /* Exception — les pions du Ludo. Ce sont des pièces de plateau, pas des
     boutons de formulaire : leur taille est celle de leur case, environ
     23 px sur un téléphone. Leur imposer 44 px de haut les étirait en
     ovales qui débordaient de la case et déformaient tout le plateau.
     La cible tactile de 44 px est rétablie autrement, par un halo
     invisible centré sur le pion (.ludo-pawn.selectable::after dans
     games/arena-mini/arena-games.css).
     Même chose pour les cases : celle où l'on peut poser un pion reçoit
     role="button" pour rester accessible au clavier, ce qui la faisait
     grandir à 44 px et étirait toute la ligne de la grille. */
  .ludo-pawn,.ludo-sq,.ludo-center{min-height:0}
}

/* La pastille « N parties offertes » de la barre du haut n'a de place que
   sur grand écran : sur téléphone, le même compteur est déjà affiché en
   grand juste en dessous, dans le bandeau d'accueil. */
@media(max-width:860px){
  [data-free-plays-chip]{display:none!important}
}

/* Très petits écrans — 320 px (Galaxy Fold fermé, vieux Android). */
@media(max-width:360px){
  .al-card{padding:.85rem}
  .al-freeplays{padding:.75rem .8rem;gap:.6rem}
  .al-freeplays .al-freeplays-count{font-size:1.35rem}
  .al-freeplays-copy strong{font-size:.84rem}
  .al-freeplays-copy span{font-size:.72rem}
  .al-live-grid,.al-shop-grid,.al-cercle-players{grid-template-columns:1fr}
  .al-postgame-actions{grid-template-columns:1fr}
  .al-cercle-choices{grid-template-columns:1fr}
  .al-cercle-ring{width:92vw}
  .al-cercle-totem{width:54px}
  .al-cercle-totem .al-cercle-orb{width:42px;height:42px;font-size:.9rem}
  .al-level-badge{width:46px;height:46px}
  .al-btn{padding:10px 12px;font-size:.82rem}
  .al-btn-lg{min-height:52px;font-size:.94rem}
}

/* Téléphones courants. */
@media(max-width:480px){
  .al-shop-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .al-live-grid{grid-template-columns:1fr}
  .al-firstrun h2{font-size:1.55rem}
}

/* Phablettes et petites tablettes. */
@media(min-width:481px) and (max-width:900px){
  .al-progress{grid-template-columns:1fr 1fr}
  .al-cercle-ring{width:min(60vw,360px)}
}

/* Tablettes et ordinateurs. */
@media(min-width:901px){
  .al-progress{grid-template-columns:1fr 1fr}
  .al-postgame{left:auto;right:1.25rem;bottom:1.25rem;width:400px;border-radius:20px;
    border:1px solid var(--al-border)}
  .al-postgame.open{transform:none}
  .al-cercle{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.25rem;align-items:start}
  .al-cercle-side{display:flex;flex-direction:column;gap:1rem;min-width:0}
}

/* Paysage bas (téléphone couché) : on récupère de la hauteur. */
@media(orientation:landscape) and (max-height:520px){
  .al-firstrun{padding:.75rem 1rem;justify-content:flex-start}
  .al-firstrun .al-firstrun-mark{width:52px;height:52px;border-radius:16px;margin-bottom:.6rem}
  .al-firstrun h2{font-size:1.3rem;margin-bottom:.35rem}
  .al-firstrun p{font-size:.82rem;margin-bottom:.9rem}
  .al-firstrun-actions{flex-direction:row;flex-wrap:wrap}
  .al-firstrun-actions .al-btn{flex:1 1 180px}
  .al-cercle-ring{width:min(46vh,260px)}
  .al-postgame{max-height:82vh;overflow-y:auto}
  .al-cercle-log{max-height:110px}
}

/* Encoches et barres système (iPhone, Android gestuel). */
@supports(padding:max(0px)){
  .al-postgame{padding-left:max(1rem,env(safe-area-inset-left));
    padding-right:max(1rem,env(safe-area-inset-right))}
}

/* Écrans très larges : on borne la lecture. */
@media(min-width:1500px){
  .al-live-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}

/* Impression : on garde l'essentiel lisible. */
@media print{
  .al-postgame,.al-firstrun,.al-freeplays{display:none!important}
}

/* ── Avatars prédéfinis (V65.1) ───────────────────────────────────────────
   Quand le joueur a choisi un emblème, le disque coloré du SVG remplace la
   pastille dorée à initiale. Sans choix, rien ne change : l'initiale reste.
   Aucune photo personnelle n'entre dans ce système. */
.user-av.has-emblem,.profile-big-av.has-emblem,.joueur-av-sm.has-emblem,
.al-live-avatar.has-emblem{background:none;padding:0;border:0}
.user-av svg,.profile-big-av svg,.joueur-av-sm svg,.al-live-avatar svg{
  width:100%;height:100%;display:block;border-radius:50%}
.profile-big-av.has-emblem{box-shadow:0 0 0 3px rgba(245,166,35,.3)}
/* L'emblème du classement s'efface sur les très petits écrans : la place y
   va au pseudo, qui reste l'information utile. */
.lb-av{width:30px;height:30px}
@media(max-width:400px){.lb-av{display:none}}

/* Galerie de choix — bande horizontale à l'inscription, grille au profil. */
.al-avatar-strip{display:flex;gap:.45rem;overflow-x:auto;padding:.25rem 0 .5rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.al-avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.6rem}
.al-avatar-pick{position:relative;flex:0 0 auto;width:52px;height:52px;padding:0;border-radius:50%;
  border:2px solid transparent;background:none;cursor:pointer;transition:transform .15s,border-color .15s}
.al-avatar-grid .al-avatar-pick{width:100%;height:auto;aspect-ratio:1}
.al-avatar-pick svg{width:100%;height:100%;display:block;border-radius:50%}
.al-avatar-pick:hover{transform:translateY(-2px)}
.al-avatar-pick[aria-pressed="true"]{border-color:var(--gold,#f5a623)}
.al-avatar-pick[disabled]{cursor:not-allowed;opacity:.4}
.al-avatar-lock{position:absolute;inset:auto 0 -2px 0;font-size:.58rem;text-align:center;
  color:var(--text2,#9aa0aa);line-height:1}
.al-avatar-name{font-size:.62rem;text-align:center;color:var(--text2,#9aa0aa);margin-top:.2rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(prefers-reduced-motion:reduce){.al-avatar-pick{transition:none}
  .al-avatar-pick:hover{transform:none}}

/* ── V112 — Son et ambiances : le bouton (à côté de la cloche) et son
   panneau. Un seul panneau, monté une fois par ArenaAudio.mountControl ;
   le menu mobile et la page Aide ouvrent ce même panneau. ─────────── */
.audio-btn{color:var(--al-text)}
.audio-btn.is-off{color:var(--al-text3);border-style:dashed}
.audio-btn:focus-visible{outline:2px solid var(--al-gold);outline-offset:2px}
.audio-panel{position:fixed;top:70px;right:1.25rem;width:320px;max-width:calc(100vw - 1rem);
  background:var(--al-bg2);border:1px solid var(--al-border);border-radius:20px;z-index:300;
  display:none;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:audioIn .2s ease;font-family:'Inter',sans-serif}
.audio-panel.open{display:flex}
@keyframes audioIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.audio-head{padding:.85rem 1.1rem;border-bottom:1px solid var(--al-border);display:flex;justify-content:space-between;align-items:center}
.audio-head h4{font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:.45rem;margin:0}
.audio-close{background:none;border:none;color:var(--al-text2);cursor:pointer;font-size:1rem;min-width:var(--al-tap);min-height:var(--al-tap);border-radius:10px}
.audio-close:hover{color:var(--al-text);background:var(--al-card)}
.audio-mute{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.1rem;font-size:.82rem;font-weight:600;cursor:pointer;border-bottom:1px solid var(--al-border);min-height:var(--al-tap)}
.audio-mute input{width:18px;height:18px;accent-color:var(--al-gold);cursor:pointer}
.audio-rows{padding:.5rem 1.1rem .3rem;display:flex;flex-direction:column;gap:.15rem;transition:opacity .2s}
.audio-rows.is-off{opacity:.4;pointer-events:none}
.audio-row{display:grid;grid-template-columns:5.6rem 1fr 3rem;align-items:center;gap:.6rem;min-height:38px}
.audio-lbl{font-size:.76rem;color:var(--al-text2)}
.audio-row:first-child .audio-lbl{color:var(--al-text);font-weight:600}
.audio-val{font-size:.72rem;text-align:right;color:var(--al-gold);font-variant-numeric:tabular-nums}
.audio-row input[type=range]{width:100%;height:28px;margin:0;accent-color:var(--al-gold);cursor:pointer;background:transparent}
.audio-row input[type=range]:focus-visible{outline:2px solid var(--al-gold);outline-offset:2px;border-radius:6px}
.audio-scene{padding:.6rem 1.1rem .9rem;font-size:.72rem;color:var(--al-text2);border-top:1px solid var(--al-border)}
.audio-scene b{color:var(--al-text)}
.audio-scene small{display:block;margin-top:.3rem;color:var(--al-text3);line-height:1.45}
@media(max-width:640px){.audio-panel{right:.5rem;left:.5rem;width:auto}}
@media(max-height:520px){.audio-panel{max-height:calc(100dvh - 80px);overflow-y:auto}}

/* ── V114 — Copier-coller : protégé par défaut, copiable là où c'est utile.
   body.al-protect : l'interface ne se sélectionne pas (ni appui long, ni
   Ctrl+A). Exceptions, dans l'ordre de la cascade : champs de saisie, liens
   (menu natif conservé), zones .al-copyable (pseudos, codes, messages…). ── */
.al-protect,.al-protect *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.al-protect a[href]{-webkit-touch-callout:default}
.al-protect :is(input,textarea,select,[contenteditable="true"],[contenteditable=""]),
.al-protect :is(input,textarea,select,[contenteditable="true"],[contenteditable=""]) *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.al-protect .al-copyable,.al-protect .al-copyable *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.al-copyable{cursor:text}
.al-copy-tap{cursor:copy}
.al-copy-tap:hover{filter:brightness(1.08)}
.al-copied{position:fixed;z-index:100000;transform:translate(-50%,calc(-100% - 8px)) scale(.92);opacity:0;pointer-events:none;
  background:var(--al-bg2);color:var(--al-gold);border:1px solid rgba(245,166,35,.45);border-radius:999px;padding:4px 11px;
  font:600 .74rem/1.2 'Inter',system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.45);white-space:nowrap;
  transition:opacity .16s ease,transform .16s ease}
.al-copied.below{transform:translate(-50%,8px) scale(.92)}
.al-copied.show{opacity:1;transform:translate(-50%,calc(-100% - 8px)) scale(1)}
.al-copied.below.show{transform:translate(-50%,8px) scale(1)}
@media(prefers-reduced-motion:reduce){.al-copied{transition:opacity .12s ease;transform:translate(-50%,calc(-100% - 8px))}.al-copied.show{transform:translate(-50%,calc(-100% - 8px))}}