/* Les onglets ajoutés en v2 : page « Plus », quêtes, boutique, échanges,
   combats, profil, réglages. Pensé pour le pouce d'abord ; l'adaptation
   ordinateur est tout en bas du fichier. */

/* ============ Titres de page ============ */
/* Les h2 sont en petites capitales espacées ; un sous-titre glissé dedans doit
   redevenir une phrase, sinon il crie. */
h2 .small{text-transform:none;letter-spacing:0;font-weight:600}

.pagehead{margin:2px 0 14px}
.pagehead h1{margin:0 0 2px}
.pagehead p{margin:0;max-width:52ch}

.notice{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);padding:11px 14px;font-size:13.5px;line-height:1.45;margin:0 0 14px;color:var(--subtle)}
.notice.ok{border-left-color:#55e6a6}
.notice b{color:var(--text)}
.notice .linkbtn{display:block;padding:6px 0 0;color:var(--accent-soft)}

.empty .ec{font-family:var(--display);font-stretch:110%;font-style:italic;font-size:19px;
  text-transform:none;letter-spacing:-.01em;color:var(--text);margin:0 0 6px}
.empty .btn{max-width:280px;margin:18px auto 0}

/* Le second groupe du rail n'apparaît que sur grand écran : sur mobile,
   ces destinations sont dans le tiroir. */
#nav .second,#nav .navsep{display:none}

/* ============ Tiroir du compte ============ */
/* Il part du bord droit, celui de l'avatar : le panneau vient de là où le doigt
   a appuyé. Sur mobile il couvre presque tout, sur ordinateur il reste étroit. */
#tiroir{position:fixed;inset:0;z-index:45}
#tiroir[hidden]{display:none}
.tiroir-bg{position:absolute;inset:0;background:rgba(6,4,8,.66);backdrop-filter:blur(5px);
  opacity:0;transition:opacity .24s ease}
#tiroir.on .tiroir-bg{opacity:1}

.tiroir-panneau{position:absolute;top:0;right:0;bottom:0;width:min(330px,86vw);
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,var(--surface-2),var(--bg-2) 46%);
  border-left:1px solid var(--line-2);box-shadow:-18px 0 44px rgba(0,0,0,.55);
  padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(18px + env(safe-area-inset-bottom,0px));
  transform:translateX(100%);transition:transform .26s cubic-bezier(.2,1,.35,1)}
#tiroir.on .tiroir-panneau{transform:translateX(0)}

.tiroir-id{display:flex;align-items:center;gap:12px;padding:4px 0 16px}
.tiroir-id>div{flex:1;min-width:0}
.tiroir-id b{display:block;font-family:var(--display);font-stretch:108%;font-weight:900;font-style:italic;
  font-size:19px;line-height:1.15;word-break:break-word}
.tiroir-id p{margin:1px 0 0}
.tiroir-x{align-self:flex-start;background:none;border:0;color:var(--muted);font-size:17px;
  line-height:1;padding:6px;border-radius:8px}
.tiroir-x:hover{color:var(--text)}

/* Les ressources, à portée de regard dès l'ouverture. */
.tiroir-sacs{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sac{display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px 6px 9px;font-size:12px;color:var(--muted);font-weight:600}
.sac b{font-family:var(--display);font-weight:900;font-size:14px;color:var(--text)}
.sac img{width:16px;height:auto}
.sac svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.sac .shard{stroke:none;fill:currentColor;color:var(--brand-light)}

.tiroir-liste{list-style:none;margin:12px 0 0;padding:0;flex:1}
.tiroir-liste button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;
  background:none;border-radius:12px;padding:11px 10px;color:var(--subtle);
  transition:background .14s,color .14s}
.tiroir-liste button:hover{background:rgba(255,255,255,.04);color:var(--text)}
.tiroir-liste button.on{background:linear-gradient(90deg,rgba(137,54,255,.22),rgba(137,54,255,.05));color:var(--text)}
.tiroir-ico{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:11px;
  background:linear-gradient(180deg,rgba(137,54,255,.26),rgba(137,54,255,.07));color:var(--accent-soft)}
.tiroir-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tiroir-ico svg.ico-star{width:22px;height:16px;stroke:none;fill:currentColor}
.tiroir-txt{min-width:0}
.tiroir-txt b{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:800;color:var(--text)}
.tiroir-txt small{display:block;font-size:12px;line-height:1.3;margin-top:1px}

.tiroir-pied{padding-top:16px;margin-top:10px;border-top:1px solid var(--line)}
.tiroir-pied p{margin:0 0 10px}
.tiroir-ver{margin:14px 0 0;text-align:center;font-size:11.5px;opacity:.6}

/* Un point sur l'avatar quand quelque chose attend derrière le tiroir. */
.hdrbtn.alerte{position:relative}
.hdrbtn.alerte::after{content:'';position:absolute;top:0;right:0;width:10px;height:10px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 2px var(--bg)}

/* ============ Pastille de compte ============ */
.pastille{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--brand);color:#fff;font-size:11px;font-weight:900;font-style:normal;line-height:1}
.pastille.nav{position:absolute;top:2px;right:calc(50% - 22px);box-shadow:0 0 0 2px var(--bg)}

/* ============ Quêtes ============ */
.qsec{margin:0 0 6px}
.qsechead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:22px 0 10px}
.qsechead h2{margin:0}
.qallgood{margin:-4px 0 10px}

.quest{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;margin-bottom:9px}
.quest.ready{border-color:rgba(85,230,166,.45);box-shadow:0 0 0 1px rgba(85,230,166,.18),0 6px 18px rgba(85,230,166,.08)}
.quest.done{opacity:.52}
.qhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.qhead b{font-size:15px;font-weight:800}
.qhead p{margin:2px 0 0;line-height:1.35}
.qreward{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-family:var(--display);font-weight:900;
  font-size:14px;color:var(--brand-light)}
.qbar{height:6px;border-radius:99px;background:var(--bg-2);overflow:hidden;margin:11px 0 8px;box-shadow:inset 0 0 0 1px var(--line)}
.qbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  transition:width .5s cubic-bezier(.2,1,.4,1)}
.quest.ready .qbar i{background:linear-gradient(90deg,#3fbf8c,#55e6a6)}
.qfoot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.qtag{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.qtag.ok{color:#55e6a6}

.shard{width:15px;height:15px;color:var(--brand-light);flex:0 0 auto}

/* Petit bouton plein, pour les actions posées dans une ligne. */
.btn.tiny{width:auto;flex:0 0 auto;padding:9px 16px;font-size:12.5px;border-radius:999px;gap:5px;
  box-shadow:0 4px 0 var(--accent-deep),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.tiny:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--accent-deep)}
.btn.tiny.ghost{box-shadow:0 3px 0 #100c15,inset 0 0 0 1px var(--line-2)}
.btn.tiny .shard{width:14px;height:14px;color:currentColor}

/* Bandeau de quêtes, posé au-dessus du paquet. */
.qstrip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;border-radius:999px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:0 3px 0 #100c15,inset 0 0 0 1px var(--line);
  padding:8px 8px 8px 9px;margin:0 0 8px;color:var(--subtle)}
.qstrip b{flex:1;font-size:13px;font-weight:800;color:var(--text)}
.qstrip.ready{box-shadow:0 3px 0 #0c2a20,inset 0 0 0 1px rgba(85,230,166,.45)}
.qstrip.ready b{color:#9ef2cd}
.qstripico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(137,54,255,.2);color:var(--accent-soft)}
.qstrip.ready .qstripico{background:rgba(85,230,166,.16);color:#55e6a6}
.qstripico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qstripgo{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding-right:8px}

/* ============ Boutique ============ */
.walletrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.wallet{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;color:var(--subtle)}
.wallet b{font-family:var(--display);font-weight:900;font-size:15px;color:var(--text)}
.wallet.ghost svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

.offres{display:flex;flex-direction:column;gap:9px}
.offre{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 13px}
.offre.owned{opacity:.6}
.ofcorps{flex:1;min-width:0}
.ofcorps b{display:block;font-size:14.5px;font-weight:800}
.ofcorps p{margin:2px 0 0;line-height:1.35}
.ofico{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border-radius:12px;
  background:linear-gradient(180deg,rgba(137,54,255,.3),rgba(137,54,255,.08));color:var(--brand-light)}
.ofico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ofico svg.ico-star{width:24px;height:17px;stroke:none;fill:currentColor}

/* ============ Avatars et cadres ============ */
/* Deux cadrages : les photos et les cartes remplissent le cercle, les symboles
   restent entiers au centre sur un fond de leur couleur. */
.ava{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:50%;
  overflow:hidden;background:var(--surface-2);box-shadow:0 0 0 2px var(--f1,#3f3450)}
.ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center}
.ava.carte img{object-position:center 24%}
/* Un voile sombre par-dessus la couleur : les symboles d'essence sont peints de
   leur propre couleur et disparaîtraient sur un fond identique. Le voile garde
   la teinte tout en rendant le symbole lisible. */
.ava.ico{background:linear-gradient(rgba(10,7,14,.62),rgba(10,7,14,.62)),var(--ab,var(--surface-2))}
.ava.ico img{width:58%;height:58%;object-fit:contain;
  filter:drop-shadow(0 0 5px rgba(0,0,0,.6)) drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.ava.sm{width:34px;height:34px}
.ava.md{width:56px;height:56px}
.ava.lg{width:48px;height:48px}
.ava.xl{width:76px;height:76px;box-shadow:0 0 0 3px var(--f1,#3f3450),0 0 24px rgba(137,54,255,.25)}
.ava.prisme{animation:prisme 4s linear infinite}
@keyframes prisme{0%{box-shadow:0 0 0 3px #ee0073}25%{box-shadow:0 0 0 3px #ffc73b}50%{box-shadow:0 0 0 3px #55e6a6}75%{box-shadow:0 0 0 3px #39b8ff}100%{box-shadow:0 0 0 3px #ee0073}}
.avaplus{font-size:26px;font-weight:300;color:var(--muted);line-height:1}

/* Une grille régulière : les avatars s'alignent quel que soit leur nombre. */
.avagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;padding:4px 0 2px}
.avapick{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;
  padding:8px 4px;border-radius:14px;transition:background .14s}
.avapick:hover{background:rgba(255,255,255,.04)}
.avapick>span{font-size:10.5px;font-weight:700;color:var(--muted);line-height:1.2;text-align:center;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.avapick.on{background:rgba(137,54,255,.2);box-shadow:inset 0 0 0 1px var(--accent-soft)}
.avapick.on>span{color:var(--text)}

/* ============ Vitrine ============ */
/* Quatre emplacements côte à côte, cerclés de la couleur du cadre choisi :
   c'est ce que les cadres de la boutique encadrent vraiment. */
.vitpanel h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.vitrine{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 10px}
.vit{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.vit.vide{justify-content:center;aspect-ratio:5/7;border:0;border-radius:10px;background:var(--bg-2);
  box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);gap:2px}
.vit.vide.muette{opacity:.4}
.vitplus{font-size:22px;font-weight:300;line-height:1;color:var(--accent-soft)}
.vit.vide.muette .vitplus{color:var(--muted)}
.vitcarte{display:block;width:100%;background:none;border:0;padding:0;border-radius:9px;
  box-shadow:0 0 0 2px var(--f1,#3f3450),0 4px 14px rgba(0,0,0,.45)}
.vitrine.prisme .vitcarte{animation:prisme 4s linear infinite}
.vitnom{font-size:10px;font-weight:700;line-height:1.2;text-align:center;color:var(--subtle);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vitx{position:absolute;top:-5px;right:-5px;width:22px;height:22px;border:0;border-radius:50%;
  background:var(--surface-2);color:var(--muted);font-size:11px;line-height:1;
  box-shadow:0 0 0 1px var(--line-2),0 2px 6px rgba(0,0,0,.5)}
.vitx:hover{color:var(--text);background:var(--line-2)}
.sheet .vitrine{margin-bottom:16px}

/* ============ Profil ============ */
.idcard{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;background:linear-gradient(135deg,rgba(137,54,255,.16),var(--surface) 62%);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 15px;margin-bottom:10px}
.idnom{flex:1;min-width:0}
.idnom b{font-family:var(--display);font-stretch:108%;font-weight:900;font-style:italic;font-size:21px;
  display:inline-block;vertical-align:middle;margin-right:7px;word-break:break-word}
.idnom p{margin:2px 0 0}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 13px}
.stat b{display:block;font-family:var(--display);font-stretch:106%;font-weight:900;font-size:20px;line-height:1.1}
.stat span{font-size:12px;color:var(--muted);font-weight:600}

.found{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:var(--radius-sm);
  padding:10px 12px;margin:10px 0 0;font-size:14px}
.found b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.findrow{display:flex;gap:8px;align-items:center;margin-top:8px}
.findrow input{flex:1;min-width:0}

/* ============ Réglages ============ */
.toggle small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:1px}
.slider{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;
  background:var(--surface-2);border-radius:var(--radius-sm);padding:11px 14px 13px;margin-bottom:8px}
.slider.off{opacity:.45}
.slider label{font-size:13px;font-weight:600;color:var(--subtle)}
/* Le curseur vient avant sa valeur dans le HTML (bindReglages() lit nextElementSibling) :
   on remet la valeur sur la première ligne, à droite du libellé. */
.slider output{grid-row:1;grid-column:2;font-family:var(--display);font-weight:900;font-size:13px;
  color:var(--text);min-width:2.4em;text-align:right}
.slider input[type=range]{grid-row:2;grid-column:1/-1;width:100%;accent-color:var(--accent);height:22px;margin:0}
.about code{background:var(--bg-2);border-radius:5px;padding:1px 5px;font-size:12px}

/* ============ Social ============ */
/* Un second niveau de puces, plus discret que le premier : on est déjà dans
   une section, ce n'est plus un changement d'onglet. */
.souschips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none}
.souschips::-webkit-scrollbar{display:none}
.souschips button{flex:0 0 auto;border:0;background:var(--bg-2);color:var(--muted);padding:7px 14px;
  font-size:12px;font-weight:800;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);
  display:inline-flex;align-items:center;gap:6px;transition:color .14s,background .14s}
.souschips button:hover{color:var(--subtle)}
.souschips button.on{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.rappelrar{margin:0 0 12px}

.amiligne{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:9px 11px;margin-bottom:8px}
.amiid{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;
  padding:0;text-align:left}
.aminom{min-width:0}
.aminom b{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:800}
.aminom .qtag{font-size:9.5px;padding:1px 5px;border-radius:4px;background:rgba(85,230,166,.16)}
.aminom small{display:block;line-height:1.3}
.amiacts{display:flex;gap:6px;flex:0 0 auto}
.amiacts .btn.tiny{padding:8px 13px;font-size:11.5px}

/* Fiche d'un joueur, dans la feuille modale */
.fiche{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.fichemeta{flex:1;min-width:0}
.fichemeta p{margin:4px 0 0}
.sheet .stats{grid-template-columns:repeat(2,1fr);margin-bottom:16px}

/* ============ Recharge d'échange ============ */
.cooldown{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 12px;margin:0 0 12px}
.cooldown.pret{border-color:rgba(85,230,166,.4)}
.cdico{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;
  background:rgba(137,54,255,.18);color:var(--accent-soft)}
.cooldown.pret .cdico{background:rgba(85,230,166,.16);color:#55e6a6}
.cdico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cdtxt{flex:1;min-width:0}
.cdtxt b{display:block;font-size:13.5px;font-weight:800}
.cdtxt small{display:block;font-size:12px}
.cdbar{display:block;height:4px;border-radius:99px;background:var(--bg-2);overflow:hidden;margin-top:6px;
  box-shadow:inset 0 0 0 1px var(--line)}
.cdbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  transition:width 1s linear}
.cdjetons{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;border:0;background:var(--surface-2);
  border-radius:999px;padding:7px 12px;color:var(--subtle);box-shadow:inset 0 0 0 1px var(--line)}
.cdjetons b{font-family:var(--display);font-weight:900;font-size:14px;color:var(--text)}
.cdjetons svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.cdjetons.vide{opacity:.6}
.cdjetons.vide b{color:var(--muted)}

/* ============ Échanges ============ */
.trade{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 13px 14px;margin-bottom:10px}
.trade.passe{opacity:.55}
.trhead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.trhead>div{flex:1;min-width:0}
.trhead b{font-size:14.5px;font-weight:800}
.trhead p{margin:1px 0 0;line-height:1.3}

.trswap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.trside{min-width:0;text-align:center}
.trlab{display:block;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.trarrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-2);
  color:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--line)}
.trarrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trarrow.big{width:38px;height:38px}
.trarrow.big svg{width:22px;height:22px}

.mini{display:block;width:100%;background:none;border:0;padding:0;text-align:center}
.mini .cwrap{max-width:118px;margin:0 auto}
.mini.vide{display:grid;place-items:center;aspect-ratio:5/7;max-width:118px;margin:0 auto;border-radius:10px;
  background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:26px}
.mininom{display:block;font-size:12px;font-weight:700;margin-top:6px;line-height:1.25}
.minimeta{display:block;font-size:10.5px;font-weight:700;color:var(--muted);margin-top:1px}
.trnote{background:var(--bg-2);border-radius:var(--radius-sm);padding:9px 12px;margin:12px 0 0;
  font-size:13px;font-style:italic;color:var(--subtle);line-height:1.4}
.tracts{margin-top:13px}
.tracts .btn{flex:1}
.trade .muted.small{margin-top:6px;text-align:center}

/* Composer une demande */
.compose h2{margin-top:20px}
.compose h2:first-child{margin-top:12px}
.slots{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:4px 0 2px}
.slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:186px;
  padding:12px 8px;border:0;border-radius:var(--radius);background:var(--bg-2);color:var(--subtle);
  box-shadow:inset 0 0 0 1px var(--line);text-align:center}
.slot.rempli{background:none;box-shadow:none;padding:0;min-height:0}
.slot .cwrap{max-width:128px}
.slotplus{font-size:30px;font-weight:300;line-height:1;color:var(--accent-soft)}
.slotlab{font-size:13px;font-weight:800;color:var(--text)}
.slotnom{display:block;font-size:12.5px;font-weight:700;margin-top:7px;line-height:1.25}
.slotmeta{display:block;font-size:10.5px;font-weight:700;color:var(--muted)}

/* Choisir une carte, dans la feuille modale */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px;margin-top:12px;
  max-height:52vh;overflow-y:auto;padding:2px 2px 6px;scrollbar-width:thin}
.pick{background:none;border:0;padding:0;text-align:center}
.picknom{display:block;font-size:11px;font-weight:700;margin-top:5px;line-height:1.2;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pickmeta{display:block;font-size:10px;font-weight:700;color:var(--muted)}

/* ============ Combats ============ */
.soon{text-align:center;padding:14px 8px 40px}
.soonart{position:relative;height:210px;margin:6px auto 22px;max-width:320px;pointer-events:none}
.soondeck{position:absolute;top:0;left:50%;width:132px;margin-left:-66px;opacity:.9;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.5))}
.soondeck.d0{transform:translateX(-74px) rotate(-14deg)}
.soondeck.d1{transform:translateY(-10px) scale(1.06);z-index:2}
.soondeck.d2{transform:translateX(74px) rotate(14deg)}
.soontag{display:inline-block;background:rgba(137,54,255,.2);color:var(--accent-soft);border-radius:999px;
  padding:5px 14px;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(137,54,255,.4)}
.soontitle{font-family:var(--display);font-stretch:114%;font-weight:900;font-style:italic;font-size:34px;
  letter-spacing:-.03em;text-transform:none;color:var(--text);margin:12px 0 8px}
.soon p{max-width:38ch;margin-inline:auto}

/* ============ Bulle d'installation (iPhone) ============ */
.iossteps{list-style:none;margin:16px 0 4px;padding:0;display:flex;flex-direction:column;gap:12px;text-align:left}
.iossteps li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.35;color:var(--subtle)}
.iossteps b{color:var(--text)}
.iosico,.iosnum{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--line)}
.iosico{padding:6px}
.iosnum{font-weight:900;color:#55e6a6}
/* La flèche pointe vers le bouton Partager, en bas de Safari. */
.iosarrow{text-align:center;font-size:26px;color:var(--accent-soft);margin:14px 0 -6px;animation:bob 1.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(7px);opacity:.55}}
body.installsheet .sheet{border-bottom:2px solid var(--accent)}

/* ============ Attente serveur ============ */
body.busy{cursor:progress}
body.busy main{opacity:.62;pointer-events:none;transition:opacity .15s}

/* ============ En-tête ============ */
.hdr{display:flex;align-items:center;gap:7px}
.pill.ec{padding:6px 13px 6px 10px;gap:5px}
.pill.ec .shard{width:15px;height:15px}
.hdrbtn{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--subtle)}
.hdrbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hdrbtn.ava-btn{background:none;box-shadow:none;width:auto;height:auto}

/* =====================================================================
   Ordinateur : la barre du bas devient un rail à gauche, et le contenu
   respire au lieu de s'étirer. Tout le reste est déjà bon tel quel.
   ===================================================================== */
@media (min-width:900px){
  /* Une grille, pas un flex qui passe à la ligne : avec `flex-wrap`, le
     navigateur répartit la hauteur restante entre les lignes, et l'en-tête
     s'allongeait dès que le contenu de la page était court.
     Ici chaque zone a sa place, et seule celle du contenu s'étire. */
  body{display:grid;grid-template-columns:minmax(0,1fr) 216px;grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"top top" "main nav";height:100%}
  .top{grid-area:top;padding:12px 26px}
  #nav{grid-area:nav}
  main{grid-area:main}

  /* Écrans pleine page — attente et connexion : ni en-tête ni rail, donc une
     seule zone. Sans ça, la colonne du rail reste réservée et le contenu se
     retrouve décentré. */
  body.inauth,body.inlock{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
    grid-template-areas:"main"}
  /* Les pages du jeu sont calées à gauche sous le rail ; ces deux écrans-là
     n'ont rien autour et doivent rester au milieu. */
  body.inauth main>*,body.inlock main>*{max-width:none;margin-inline:auto}
  #brand img{height:44px}

  /* Le rail passe à droite : sous la main qui tient la souris, et à l'opposé
     du logo, pour que l'en-tête ne soit pas déséquilibré d'un seul côté. */
  #nav{grid-template-columns:none;grid-auto-rows:max-content;align-content:start;gap:4px;
    padding:16px 12px;border-top:0;border-left:1px solid var(--line);background:rgba(12,9,16,.6);
    overflow-y:auto}
  #nav button{flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 14px;font-size:13.5px;
    letter-spacing:.01em;border-radius:12px}
  #nav button svg{width:20px;height:20px}
  #nav button svg.ico-star{width:22px;height:16px}
  #nav button.on::after{top:50%;left:auto;right:0;bottom:auto;width:3px;height:22px;margin-top:-11px;
    border-radius:3px 0 0 3px}
  .pastille.nav{position:static;margin-left:auto;box-shadow:none}

  main{min-width:0;min-height:0;padding:22px 32px 40px}
  main>*{max-width:820px;margin-inline:0}
  main.tab-boosters>*,main.tab-collection>*{max-width:1180px}

  /* Plus de barre en bas : la notification n'a plus à l'enjamber, et elle se
     recentre sur la zone de contenu plutôt que sur la fenêtre entière. */
  #toast{bottom:26px;left:calc(50% - 108px)}

  .stats{grid-template-columns:repeat(4,1fr)}
  .offres{display:grid;grid-template-columns:repeat(2,1fr)}
  .quest:hover{border-color:var(--line-2)}

  /* Le rail a la place d'afficher les deux groupes : plus besoin de tiroir,
     et l'avatar de l'en-tête mène directement au profil. */
  #nav .second{display:flex}
  #nav .navsep{display:block;height:1px;margin:10px 12px;background:var(--line);border:0}
  #nav .second span{font-weight:700;color:inherit}
  #nav button.second{padding:10px 14px;font-size:13px}

  .soonart{height:250px;max-width:380px}
  .soondeck{width:156px;margin-left:-78px}
  .soondeck.d0{transform:translateX(-92px) rotate(-14deg)}
  .soondeck.d2{transform:translateX(92px) rotate(14deg)}

  /* Les feuilles modales se centrent plutôt que de monter du bas. */
  .sheet-wrap{align-items:center}
  .sheet{border-radius:var(--radius);border-bottom:1px solid var(--line);max-height:82vh;padding-bottom:20px}
  .pickgrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));max-height:46vh}
}

/* Très petits écrans : cinq onglets tiennent encore, en serrant le texte. */
@media (max-width:359px){
  #nav button{font-size:9.5px;gap:3px}
  #nav svg{width:20px;height:20px}
}

/* Animations réduites, forcées depuis les Réglages. */
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important}