/* ==================================================================
   Refonte UI/UX « copie double » (ADR 0008) — Petit Bac classique.
   Chargée APRÈS style.css par web/index.html seulement (Eskis garde son style).
   Jetons : ceux de style.css (--paper, --ink, --red, --yellow, --mint…) + :
   --bd (bord « encre » des cartes/boutons) et --hard (ombre pleine sous les cartes).
   Règles : mobile d'abord, 44 px mini pour toucher, thèmes clair/sombre par jetons,
   mouvement coupé si prefers-reduced-motion.
   ================================================================== */
:root{
  --bd:#1b2a4a; --hard:#1b2a4a; --card:#ffffff; --muted2:#9aa4c2;
  --rar-commun:#7d89ad; --rar-rare:#3b82f6; --rar-epique:#8b5cf6; --rar-legendaire:#ff5da2;
  --holo:linear-gradient(135deg,#ffb347,#ff5da2,#a78bfa,#5dafff,#33c08e);
  --rainbow:conic-gradient(#ff5d5d,#ffb347,#ffe14d,#33c08e,#5dafff,#a78bfa,#ff5d5d);
  --tabbar-h:72px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bd:#46527a; --hard:#05080f; --card:#1e2431; --muted2:#6f7a99; }
}
:root[data-theme="dark"]{ --bd:#46527a; --hard:#05080f; --card:#1e2431; --muted2:#6f7a99; }

/* ---------- boutons : bord encre + ombre pleine ---------- */
button{border-radius:14px}
.btn-primary{background:var(--ink);color:var(--paper);border:2px solid var(--bd);box-shadow:0 4px 0 var(--hard)}
.btn-primary:active{box-shadow:0 1px 0 var(--hard)}
.btn-yellow{background:var(--yellow);color:var(--ink-on-yellow);border:2px solid #1b2a4a;box-shadow:0 4px 0 var(--hard)}
.btn-yellow:active{box-shadow:0 1px 0 var(--hard)}
.btn-yellow:disabled,.btn-primary:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.btn-ghost{background:var(--card);border:2px solid var(--bd);color:var(--ink)}
.stopbtn{border:2px solid #1b2a4a;box-shadow:0 4px 0 var(--hard)}
.big-cta{font-size:19px;padding:15px 28px;min-height:56px}
.backbtn{background:var(--card);border:1.5px solid var(--line);color:var(--ink);border-radius:999px;
  font-size:15px;padding:10px 16px;min-height:44px}
.backbtn:hover{border-color:var(--bd)}
.notelink{min-height:40px}
:focus-visible{outline:3px solid var(--rar-rare);outline-offset:2px}

/* ---------- barre du haut ---------- */
.topbar{margin-bottom:12px;min-height:52px}
.brand{font-size:26px}
.topbar .sndbtn{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);background:var(--card);font-size:18px}
.topbar .pill{min-height:36px;display:inline-flex;align-items:center}

/* ---------- barre d'onglets (téléphone : en bas ; ordinateur : dans la barre du haut) ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--card);border-top:1.5px solid var(--line);padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 18px -12px var(--shadow)}
.tabbar.hidden{display:none}
.tabbar .tab{background:transparent;border:0;box-shadow:none;padding:0;min-height:56px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:600;color:var(--ink-soft);border-radius:12px}
.tabbar .tab .ti{width:54px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center}
.tabbar .tab svg{width:21px;height:21px}
.tabbar .tab.on{color:var(--ink)}
.tabbar .tab.on .ti{background:var(--yellow);color:#1b2a4a}
.tabbar .tab .tbadge{position:absolute;margin:-18px 0 0 26px;min-width:16px;height:16px;border-radius:8px;background:var(--red);
  color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px}
.tabbar .tab .tbadge.on{display:flex}
body.has-tabbar #app{padding-bottom:calc(var(--tabbar-h) + 34px + env(safe-area-inset-bottom,0px))}
body.has-tabbar .toast{bottom:calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom,0px))}
@media (min-width:1024px){
  .tabbar{position:static;display:flex;gap:4px;background:transparent;border:0;box-shadow:none;padding:0;margin:0 auto 0 18px}
  .tabbar .tab{flex-direction:row;min-height:42px;padding:0 16px;font-size:16px;border-radius:21px;color:var(--ink-soft)}
  .tabbar .tab .ti{display:none}
  .tabbar .tab.on{background:var(--yellow);color:#1b2a4a}
  .tabbar .tab .tbadge{position:static;margin:0 0 0 6px}
  body.has-tabbar #app{padding-bottom:60px}
  body.has-tabbar .toast{bottom:28px}
  .topbar{justify-content:flex-start}
  .topbar > .row{margin-left:auto}
}

/* ---------- la copie : page + marge rouge ---------- */
@media (max-width:640px){
  #app{padding:10px 10px 40px}
  .page{padding:18px 14px 20px 30px;border-radius:16px}
  .page::before{left:16px}
}

/* ---------- briques communes ---------- */
.kick{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.card2{background:var(--card);border:2px solid var(--bd);border-radius:18px;box-shadow:0 5px 0 var(--hard);padding:14px 16px}
.chip2{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;background:var(--card);
  border:1.5px solid var(--bd);border-radius:999px;padding:4px 11px}
.tape{position:absolute;width:86px;height:24px;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,225,77,.85) 0 8px,rgba(255,240,170,.85) 8px 16px);
  box-shadow:0 1px 2px rgba(27,42,74,.2)}
.inkstamp{display:inline-block;border:3px solid var(--red);border-radius:8px;padding:2px 10px;color:var(--red);
  font-family:var(--mono);font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--card)}
.inkstamp.green{border-color:#1f8a63;color:#1f8a63}
.bp-ico{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em}
.scallop{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none}
.scallop svg{position:absolute;inset:0}
.scallop-in{position:relative;font-weight:700;line-height:1;color:#1b2a4a}
.shield{position:relative;display:inline-block;flex:none;filter:drop-shadow(0 4px 0 var(--hard))}
.shield-bd,.shield-in{position:absolute;clip-path:polygon(50% 0,100% 16%,100% 58%,50% 100%,0 58%,0 16%)}
.shield-bd{inset:0;background:#1b2a4a}
.shield-in{inset:4px}
.shield-tx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-bottom:10%;color:#1b2a4a;line-height:1}
.pbar{height:12px;border-radius:6px;background:var(--grid);border:1.5px solid var(--bd);overflow:hidden}
.pbar > span{display:block;height:100%;background:var(--mint);border-radius:0}
.rarity-chip{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;border-radius:999px;padding:3px 9px;color:#fff}
.rar-commun{background:var(--rar-commun)} .rar-rare{background:var(--rar-rare)}
.rar-épique,.rar-epique{background:var(--rar-epique)} .rar-légendaire,.rar-legendaire{background:var(--holo)}

/* ---------- feuille du bas (réutilise core/sheet.js) ---------- */
.sheet{border:2.5px solid var(--bd);border-bottom:0;box-shadow:0 -6px 20px rgba(0,0,0,.25);border-radius:22px 22px 0 0}
.sheet::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:var(--line);margin:10px auto 0}

/* ---------- moments (plein écran) ---------- */
.moment{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:24px 18px;
  background:radial-gradient(circle at 50% 42%,#3a4f86,#1b2a4a 65%);color:#fff;opacity:0;transition:opacity .18s ease;overflow:auto}
.moment.in{opacity:1}
.moment.out{opacity:0}
.moment-rays{position:fixed;left:50%;top:40%;width:1300px;height:1300px;margin:-650px 0 0 -650px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,225,77,.13) 0deg 9deg,transparent 9deg 18deg);
  animation:fxspin 26s linear infinite;pointer-events:none}
.moment-body{position:relative;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.moment-kick{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--yellow);text-transform:uppercase}
.moment-hero{filter:drop-shadow(0 8px 0 #0c1426)}
.moment-title{font-size:36px;line-height:1.05;margin:4px 0 0;color:#fff}
.moment-sub{margin:0;font-size:16px;color:#c9d0e6}
.moment-reward{width:100%;background:#fff;color:#1b2a4a;border:2.5px solid #1b2a4a;border-radius:20px;box-shadow:0 6px 0 #0c1426;
  padding:14px 16px;display:flex;align-items:center;gap:14px;text-align:left;position:relative;margin-top:8px}
.moment-actions{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:14px}
.moment-primary{width:100%;min-height:58px;font-size:20px;box-shadow:0 4px 0 #0c1426}
.moment-secondary{width:100%;min-height:48px;background:transparent;border:2px solid rgba(255,255,255,.6);color:#fff;font-size:17px}
.moment.in .moment-hero{animation:fxdrop .7s cubic-bezier(.2,.8,.3,1.2) both}
.moment.in .moment-title{animation:fxrise .5s .25s ease-out both}
.moment.in .moment-reward{animation:fxstick .6s .45s cubic-bezier(.3,.7,.4,1) both}
.moment.skip *{animation-duration:.01s !important;animation-delay:0s !important}
body.moment-open{overflow:hidden}
.fx-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999}

/* ---------- animations (fx.js ajoute .fx-<nom>) ---------- */
@keyframes fxspin{to{transform:rotate(360deg)}}
@keyframes fxdrop{0%{transform:translateY(-120px) scale(.6) rotate(-20deg);opacity:0}70%{transform:translateY(0) scale(1.06) rotate(-6deg);opacity:1}100%{transform:scale(1) rotate(-6deg)}}
@keyframes fxrise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes fxstick{0%{transform:translate(40px,-60px) rotate(18deg) scale(1.15);opacity:0}60%{transform:rotate(-3deg) scale(.97);opacity:1}100%{transform:none}}
@keyframes fxstamp{0%{transform:scale(2.6) rotate(-24deg);opacity:0}55%{transform:scale(.9) rotate(-8deg);opacity:1}75%{transform:scale(1.06) rotate(-8deg)}100%{transform:scale(1) rotate(-8deg)}}
@keyframes fxpop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.25) rotate(-6deg);opacity:1}100%{transform:scale(1) rotate(-3deg)}}
@keyframes fxbump{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}}
@keyframes fxhl{from{background-size:0% 100%}to{background-size:100% 100%}}
@keyframes fxshake{10%,90%{transform:translateX(-1px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-4px)}}
@keyframes fxflicker{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.97,1.04) skewX(2deg)}50%{transform:scale(1.02,.97) skewX(-1deg)}75%{transform:scale(.98,1.03) skewX(-2deg)}}
@keyframes fxsheen{from{background-position:130% 0}to{background-position:-60% 0}}
@keyframes fxin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fx-stamp{animation:fxstamp .55s cubic-bezier(.2,.8,.3,1.2) both}
.fx-stick{animation:fxstick .6s cubic-bezier(.3,.7,.4,1) both}
.fx-pop{animation:fxpop .45s cubic-bezier(.2,.8,.3,1.2) both}
.fx-bump{animation:fxbump .35s ease}
.fx-shake{animation:fxshake .4s ease}
.fx-in{animation:fxin .35s ease-out both}
.fx-drop{animation:fxdrop .7s cubic-bezier(.2,.8,.3,1.2) both}
.flame{transform-origin:50% 90%;animation:fxflicker 1.6s ease-in-out infinite}
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);
  background-size:300% 100%;animation:fxsheen 2.6s ease-in-out infinite;pointer-events:none}
/* lettre tirée au sort : rouleau de machine à sous + cercle au feutre (fx.slotLetter) */
.stamp{position:relative}
.stamp.slot{overflow:hidden;display:block}
.slotreel{position:absolute;left:0;top:0;width:100%;display:flex;flex-direction:column}
.slotreel > span{height:var(--slot-h,70px);display:flex;align-items:center;justify-content:center;line-height:1}
.slotring{position:absolute;inset:-12px;border:3.5px solid var(--red);border-radius:50% 46% 52% 48%;pointer-events:none;
  animation:fxring 1.6s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes fxring{0%{opacity:0;transform:scale(1.6) rotate(20deg)}30%{opacity:1;transform:scale(.95) rotate(-8deg)}
  45%,75%{opacity:1;transform:scale(1) rotate(-6deg)}100%{opacity:0;transform:scale(1) rotate(-6deg)}}
.slotring.keep{animation:fxringkeep .7s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes fxringkeep{0%{opacity:0;transform:scale(1.6) rotate(20deg)}70%{opacity:1;transform:scale(.95) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}
/* page « tirage de la lettre » (fx.letterIntro) : entre le lancement de la manche et la grille */
.rintro{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:24px 18px;
  background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px;opacity:0;transition:opacity .2s ease}
.rintro.in{opacity:1}
.rintro.out{opacity:0}
.rintro-in{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;max-width:420px}
.rintro-kick{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.rintro-stamp{width:170px;height:170px;font-size:118px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border-width:5px;box-shadow:0 5px 0 var(--hard)}
.rintro-stamp .slotring{inset:-18px;border-width:5px}
.rintro-cap{margin:0;font-size:24px;font-weight:600;color:var(--ink);min-height:1.3em}
.rintro-cap b{color:var(--red)}
.rintro-sub{margin:-8px 0 0;font-size:16px;color:var(--ink-soft)}
@media (max-height:560px){ .rintro-stamp{width:120px;height:120px;font-size:84px} .rintro-in{gap:14px} }
/* tampon plein écran : STOP ! / Temps écoulé ! (fx.slam) */
.fxslam{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;pointer-events:none;
  animation:fxslamout 1.1s ease-in both}
.fxslam .inkstamp{font-size:clamp(44px,14vw,84px);font-weight:700;letter-spacing:.06em;border-width:6px;border-radius:16px;
  padding:4px 22px;background:var(--card);animation:fxstamp .5s cubic-bezier(.2,.8,.3,1.2) both}
.fxslam.soft .inkstamp{font-size:clamp(30px,9vw,52px);color:var(--ink);border-color:var(--ink)}
@keyframes fxslamout{0%,70%{opacity:1}100%{opacity:0}}
/* chrono : le cœur s'emballe dans les 10 dernières secondes */
@keyframes fxbeat{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}}
.rtime.warn .tnum{display:inline-block;animation:fxbeat 1s ease-in-out infinite}
/* copie corrigée : coup de surligneur sur les bons mots, rature sur les refusés */
.cclist .ccw{align-self:flex-start}
.cc.s-unique .ccw,.cc.s-duplicate .ccw{padding:0 3px;border-radius:3px;color:var(--ink-on-yellow,#1b2a4a);
  background:linear-gradient(transparent 16%,var(--yellow) 16%,var(--yellow) 88%,transparent 88%) no-repeat;background-size:100% 100%}
.cc.s-duplicate .ccw{background-image:linear-gradient(transparent 16%,#fff1a6 16%,#fff1a6 88%,transparent 88%)}
.fx-hl{animation:fxhl .45s ease-out both}
.cc.s-invalid .ccw{position:relative;text-decoration:none}
.cc.s-invalid .ccw::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:2.5px;border-radius:2px;
  background:var(--red);transform:rotate(-2deg);transform-origin:left center}
@keyframes fxstrike{from{transform:rotate(-2deg) scaleX(0)}to{transform:rotate(-2deg) scaleX(1)}}
.fx-strike::after{animation:fxstrike .35s ease-out both}
/* validation : les mots arrivent l'un après l'autre */
.fx-in.late{animation-duration:.4s}
/* carte / pochette qui se retourne au déballage (canevas v12 « AN-Carte ») */
.moment-hero{perspective:900px}
@keyframes fxflip{0%{transform:rotate(-4deg) rotateY(180deg) scale(.9)}55%{transform:rotate(-4deg) rotateY(-12deg) scale(1.05)}
  100%{transform:rotate(-4deg) rotateY(0) scale(1)}}
.moment.in .unbox,.moment.in .pouch.big{animation:fxflip .9s .15s cubic-bezier(.3,.7,.3,1) both}
.moment.in .unboxin,.moment.in .pouch.big .pouchin{backface-visibility:hidden}
/* niveau : la barre se remplit, déborde, la gommette change (canevas v12 « AN-Niveau ») */
.lvup{display:flex;flex-direction:column;align-items:center;gap:18px}
.lvbadges{position:relative;display:inline-block}
.lvbadges .lvold{position:absolute;inset:0;animation:fxlvold 1.9s both}
.lvbadges .lvnew{display:inline-block;animation:fxlvnew 1.9s cubic-bezier(.2,.8,.3,1.2) both}
.lvbar{width:230px;height:18px;border-radius:9px;border:2.5px solid #1b2a4a;background:#e0e5f4;overflow:hidden}
.lvbar > span{display:block;height:100%;background:#33c08e;animation:fxlvbar 1.9s cubic-bezier(.4,0,.2,1) both}
@keyframes fxlvold{0%,50%{opacity:1;transform:scale(1)}58%,100%{opacity:0;transform:scale(.6)}}
@keyframes fxlvnew{0%,50%{opacity:0;transform:scale(1.8) rotate(-30deg)}62%{opacity:1;transform:scale(.92) rotate(-6deg)}70%,100%{opacity:1;transform:scale(1) rotate(-6deg)}}
@keyframes fxlvbar{0%,12%{width:55%}48%{width:100%}54%{width:100%;background:#ffe14d}55%{width:0}85%,100%{width:18%;background:#33c08e}}
@media (prefers-reduced-motion: reduce){
  .slotring,.fxslam,.rtime.warn .tnum,.lvbar > span{animation:none}
  .lvbadges .lvold{display:none}
  .lvbadges .lvnew{animation:none;transform:rotate(-6deg)}
  .lvbar > span{width:18%}
  .moment.in .unbox,.moment.in .pouch.big{animation:none}
}
@media (prefers-reduced-motion: reduce){
  .moment-rays,.flame,.sheen::after{animation:none}
  .moment.in .moment-hero,.moment.in .moment-title,.moment.in .moment-reward{animation:none}
  [class*="fx-"]{animation:none !important}
}

/* ==================================================================
   Accueil (A1 « copie double »)
   ================================================================== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.home2{display:flex;flex-direction:column;gap:14px;text-align:left}
.hmmeta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hmmeta b{color:var(--ink)}
.hmtitle{font-size:34px;line-height:1.08;margin:2px 0 0}
.hmnote{display:block;background:var(--hi);border-radius:12px;padding:10px 12px;font-size:15px;line-height:1.4}
.hmquick{width:100%;min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;
  background:var(--yellow);color:#1b2a4a;border:2px solid #1b2a4a;border-radius:18px;box-shadow:0 5px 0 var(--hard);padding:12px 18px}
.hmquick > span{display:flex;flex-direction:column;gap:2px}
.hmquick b{font-size:24px}
.hmquick span span{font-size:15px;font-weight:500}
.hmquick:active{transform:translateY(3px);box-shadow:0 2px 0 var(--hard)}
.hmsub{margin-top:4px}
.hmmodes{display:flex;flex-direction:column}
.hmmode{display:flex;align-items:center;gap:12px;min-height:62px;width:100%;background:transparent;border:0;border-bottom:1.5px dashed var(--line);
  border-radius:0;padding:8px 2px;text-align:left;color:var(--ink);box-shadow:none}
.hmmode:last-child{border-bottom:0}
.hmmode:hover{background:var(--soft)}
.hmico{width:26px;height:26px;flex:none;color:var(--ink)}
.hmmode > .hmico:last-child{width:18px;height:18px;color:var(--ink-soft)}
.hmtxt{flex-grow:1;display:flex;flex-direction:column;min-width:0}
.hmtxt b{font-size:18px;font-weight:600}
.hmtxt span{font-size:13px;color:var(--ink-soft);font-weight:400}
.hmbadge{font-size:12px;font-weight:700;background:var(--mint);color:#1b2a4a;border-radius:999px;padding:3px 9px}
.hmbadge:empty{display:none}
.hmroom{flex-wrap:wrap}
.hmroom:hover{background:transparent}
.hmroomact{display:flex;gap:6px;align-items:center;margin-left:auto}
.hmroomact .codein{width:84px;min-height:42px;text-align:center;letter-spacing:.12em;text-transform:uppercase;padding:8px}
.hmgo{min-height:42px;padding:0 12px;font-size:15px;box-shadow:none}
.hmroomact .btn-yellow.hmgo{box-shadow:0 3px 0 var(--hard)}
@media (max-width:420px){ .hmroomact{width:100%;margin-left:38px} .hmroomact .codein{flex:1} }
.home2 .homefoot{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:10px}
.home2 .footlinks{display:flex;flex-wrap:wrap;gap:0 4px;justify-content:center}
.home2 .footlinks .notelink{font-size:14px;padding:6px 8px}
.home2 .discordjoin{background:var(--card);color:var(--ink);border:2px solid var(--bd);border-radius:14px;min-height:44px;font-weight:700}
.home2 #resumeslot .sharebox{margin:0 !important}
/* bandeau « en travaux » : discret */
.worksite{font-size:12px;padding:5px 8px 5px 12px;border-radius:10px;margin:0 6px 10px;border:1.5px solid #1b2a4a;text-align:left;line-height:1.3}
.worksite .wsx{padding:0;width:28px;height:28px;line-height:28px;flex:none}
.hmbadge{white-space:nowrap}
/* Accueil : téléphone = une seule colonne dans l'ordre de lecture (les deux conteneurs
   s'effacent) ; ordinateur = colonne principale + colonne latérale, pied sur toute la largeur. */
.hmmain,.hmside{display:contents}
.home2 .hmmeta{order:1}.home2 .hmann{order:2}.home2 .hmpoll{order:3}.home2 .hmtitle{order:4}
.home2 #resumeslot{order:5}.home2 .hmquick{order:6}.home2 #laboslot{order:6}.home2 .hmsub{order:7}.home2 .hmmodes{order:8}
.home2 .homefoot{order:10}
.home2 #alphaslot{order:4}
.hmann:empty,.hmpoll:empty,#resumeslot:empty,#alphaslot:empty{display:none}
@media (min-width:1024px){
  .home2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
  .hmmain,.hmside{display:flex;flex-direction:column;gap:14px;min-width:0}
  .home2 .homefoot{grid-column:1 / -1;margin-top:0}
  .hmside .pollcard{flex-wrap:wrap;padding-right:34px}
  .hmside .pollcard-tx span{white-space:normal}
  .hmside .pollcard-go{width:100%}
  .hmmodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hmmode{border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--card)}
  .hmmode:last-child{border-bottom:1.5px solid var(--line)}
  .hmroom{grid-column:1/-1}
}

/* ==================================================================
   Tampon de lettre (partout) + manche (V2 « bulle »)
   ================================================================== */
.stamp{width:104px;height:104px;background:var(--card);color:var(--red);border:3.5px solid var(--red);
  border-radius:50% 46% 52% 48%;box-shadow:none;font-size:62px;transform:rotate(-6deg)}
.roundhead2{display:flex;align-items:center;gap:16px;margin:0 0 6px}
.roundhead2 .stamp{width:76px;height:76px;font-size:48px;flex:none}
.rtime{flex-grow:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.rtimetop{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rtime .tnum{font-size:28px}
.rbar{height:9px;border-radius:5px;background:var(--grid);overflow:hidden}
.rbar span{display:block;height:100%;width:100%;background:var(--ink);transition:width .25s linear}
.rtime.warn .tnum{color:var(--red)}
.rtime.warn .rbar span{background:var(--red)}
.rhint{margin:4px 0 10px;font-size:14px}
/* anti-triche « sortie de l'écran » (@core/awayguard.js) */
.awaybar{margin:-4px 0 10px;font-size:13px;line-height:1.35}
.awaybar:empty{display:none}
.awaytip{color:var(--ink-soft)}
.awayko{display:inline-block;color:var(--red);font-weight:700;border:2px solid var(--red);border-radius:10px;padding:6px 10px}
.awaytag{flex:none;font-size:12px;font-weight:700;color:var(--red);border:1.5px solid var(--red);border-radius:8px;padding:1px 6px}
@media (max-width:700px){
  .roundhead2{position:sticky;top:0;z-index:20;background:var(--white);margin:-6px -6px 6px;padding:6px 6px 8px;
    border-bottom:1.5px solid var(--line)}
}
/* la copie : une ligne par catégorie */
#grid.grid,#dfgrid.grid{gap:0;margin-top:4px}
.grid .cell{display:grid;grid-template-columns:132px minmax(0,1fr);gap:8px;align-items:center;min-height:52px;
  border-bottom:1.5px solid var(--line);position:relative;padding:4px 0}
.grid .cell:last-child{border-bottom:0}
.grid .cell label{display:flex;align-items:center;gap:2px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink-soft);font-weight:700;margin:0}
.grid .cell input.ansinput{border:0;border-radius:8px;background:transparent;font-family:var(--display);font-size:20px;
  font-weight:500;padding:8px 6px;min-height:44px;color:var(--ink)}
.grid .cell input.ansinput:focus{background:linear-gradient(transparent 16%,var(--yellow) 16%,var(--yellow) 86%,transparent 86%);
  color:#1b2a4a;caret-color:var(--red)}
.grid .cell:focus-within label{color:var(--ink)}
@media (max-width:560px){ .grid .cell{grid-template-columns:104px minmax(0,1fr)} .grid .cell label{margin:0} }
.catq{width:28px;height:28px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;display:inline-flex;
  align-items:center;justify-content:center;border-radius:14px;flex:none}
.catq::before{content:"?";width:18px;height:18px;border-radius:9px;border:1.5px solid var(--muted2);color:var(--ink-soft);
  font-family:var(--display);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;text-transform:none}
.catq[aria-expanded=true]::before{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.catq{font-size:0}
.qbubble{grid-column:1/-1;position:relative;margin:6px 0 8px;background:var(--card);border:2px solid var(--bd);border-radius:12px;
  box-shadow:0 6px 16px -6px var(--shadow);padding:10px 12px;display:flex;flex-direction:column;gap:5px;font-size:14px;line-height:1.35;
  animation:fxin .2s ease-out both}
.qbubble::before{content:"";position:absolute;top:-9px;left:30px;width:14px;height:14px;background:var(--card);
  border-left:2px solid var(--bd);border-top:2px solid var(--bd);transform:rotate(45deg)}
.qbubble b{font-size:15px}
.qbubble .qko{font-size:13px;color:var(--ink-soft)}
/* STOP collé en bas de la copie */
.stopbar{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:15;display:flex;align-items:center;gap:12px;
  margin:14px -4px 0;padding:10px 12px;background:var(--card);border:2px solid var(--bd);border-radius:16px;box-shadow:0 6px 18px -8px var(--shadow)}
.stophint{flex-grow:1;font-size:15px;color:var(--ink-soft)}
.stophint b{color:var(--ink)}
.stopbar .stopbtn{min-height:52px;padding:0 26px;font-size:21px;font-weight:700;letter-spacing:.04em;border-radius:14px}
.rnote{text-align:center}
.kbdonly{display:none}
@media (hover:hover) and (pointer:fine){ .kbdonly{display:block} }
.botprog{margin:2px 0 8px}
@media (min-width:1024px){
  #grid.grid,#dfgrid.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .grid .cell:nth-last-child(2):nth-child(odd){border-bottom:0}
}
/* sticky (en-tête de manche, barre STOP) : la page ne doit pas être un conteneur de défilement */
.page{overflow:hidden;overflow:clip}
.grid .cell label{line-height:1.2}
@media (max-width:560px){ .grid .cell{grid-template-columns:118px minmax(0,1fr)} .grid .cell label{font-size:10.5px} }

/* ---------- en-tête compact en partie ---------- */
body.ingame #acctbtn, body.ingame #themebtn, body.ingame #notifbtn{display:none}
.topbar .pill.gpill{gap:6px;font-size:14px;padding:6px 12px}
.gsep{color:var(--ink-soft)}
.gcode{font-family:var(--mono);font-weight:700;letter-spacing:.06em}
.pill.gme{gap:7px;padding-left:5px}
@media (max-width:640px){
  /* en partie sur téléphone : le logo cède sa place au bouton 🐞 (une seule ligne d'en-tête) */
  body.ingame .brand{display:none}
  body.ingame .topbar > .row{margin-left:auto}
  body.ingame .topbar .pill.gme{display:none}
  body.ingame .topbar{margin-bottom:8px}
  #topinfo{flex-wrap:nowrap;gap:6px}
  /* panneau des joueurs : bande compacte au-dessus de la copie */
  .playerspanel{padding:8px 10px !important;margin-bottom:10px}
}

/* ==================================================================
   Vote de validation (P3)
   ================================================================== */
.cat-head{flex-direction:column;align-items:flex-start;gap:2px;margin:6px 0 8px}
.cat-head .idx{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.cat-head h2{font-size:26px}
.valdef{margin:0 0 8px;font-size:14px;line-height:1.35;background:var(--hi);border-radius:10px;padding:8px 10px}
.valrule{margin:0 0 12px;font-size:13px;color:var(--ink-soft)}
.stopbanner{border:2px solid #1b2a4a;border-radius:999px;padding:6px 14px;margin-bottom:6px}
.bubbles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){ .bubbles{grid-template-columns:repeat(3,minmax(0,1fr))} }
.bubble{min-width:0;border-radius:14px;box-shadow:0 3px 0 var(--hard);border-color:var(--bd);background:var(--card)}
.bubble .word{font-family:var(--display);font-size:21px;font-weight:600;overflow-wrap:anywhere}
.bubble.mine{border-color:#1b2a4a;background:var(--hi)}
.bubble.invalid .word{text-decoration-thickness:2.5px}
#catdone,#catundo{width:100%;max-width:420px;display:block;margin:14px auto 0}

/* ==================================================================
   Copie corrigée (résultat de manche) + contestation
   ================================================================== */
.copy2{display:flex;flex-direction:column;gap:8px;text-align:left}
.cchead{display:flex;align-items:center;gap:16px;margin:4px 0 2px}
.ccstamp{transform:rotate(-5deg);display:inline-flex}
.ccstamp .scallop-in{display:flex;flex-direction:column;align-items:center;color:var(--red)}
.ccgain{font-size:28px;font-weight:700;line-height:1}
.ccgl{font-size:12px;font-weight:600}
.cchtxt{display:flex;flex-direction:column;gap:2px}
.ccplace{font-size:26px}
.ccplace sup{font-size:14px}
.ccpraise{color:var(--red);font-weight:600;font-size:15px}
.cclist{list-style:none;margin:6px 0 0;padding:0}
.cc{display:flex;align-items:center;gap:8px;min-height:50px;border-bottom:1.5px solid var(--line);padding:4px 0}
.cc:last-child{border-bottom:0}
.cclab{width:104px;flex:none;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--ink-soft)}
.ccword{flex-grow:1;min-width:0;display:flex;flex-direction:column;font-size:19px;font-weight:500;overflow-wrap:anywhere}
.ccword small{font-size:12px;font-weight:600;color:var(--red)}
.cc.s-invalid .ccw{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.cc.s-invalid .ccword small{text-decoration:none;display:block}
.cc.s-empty .ccword{color:var(--muted2)}
.ccpts{font-size:14px;font-weight:700;color:var(--red);white-space:nowrap}
.cc.s-invalid .ccpts,.cc.s-empty .ccpts{color:var(--muted2);font-weight:600}
.ctflag,.ctsent{width:40px;height:40px;min-height:0;padding:0;flex:none;border-radius:20px;display:inline-flex;align-items:center;justify-content:center}
.ctflag{background:var(--card);border:1.5px solid var(--bd);color:var(--ink);box-shadow:none}
.ctsent{background:#d7f3e8;border:1.5px solid #1f8a63;color:#1f8a63}
.ccrank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ccrank li{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 8px;border-radius:10px;font-size:16px}
.ccrank li.me{background:var(--hi);font-weight:700}
.ccrank .ccn{width:18px;font-family:var(--mono);font-weight:700}
.ccrank .ccname{flex-grow:1;min-width:0;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.ccrank .ccround{color:var(--ink-soft);font-size:14px}
.ccrank .cctot{min-width:34px;text-align:right}
.ccall{margin-top:8px;border:1.5px solid var(--line);border-radius:12px;padding:8px 12px}
.ccall summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
.contest{display:flex;flex-direction:column;gap:10px;padding:6px 4px 10px;text-align:left}
.contest h2{font-size:24px}
.ctword{font-size:20px}
.ctreasons{display:flex;flex-direction:column;gap:6px}
.ctreasons label{display:flex;align-items:center;gap:10px;min-height:44px;border:1.5px solid var(--line);border-radius:12px;padding:6px 12px;font-size:15px}
.ctreasons label:has(input:checked){border:2px solid var(--bd);background:var(--hi)}
.ctreasons input{width:20px;height:20px;accent-color:#1b2a4a}
.contest textarea{width:100%;border:1.5px solid var(--bd);border-radius:12px;padding:10px;font-family:var(--display);font-size:15px;
  color:var(--ink);background:var(--card);resize:vertical}
.contest .btn-yellow{width:100%}
/* panneau des joueurs sur téléphone : une bande horizontale défilable, pas une liste */
@media (max-width:900px){
  .playerspanel{border-radius:14px;box-shadow:none;margin-bottom:10px;flex-direction:row;align-items:center;max-height:none}
  .playerspanel .ch{border:0;background:transparent;padding:6px 4px 6px 10px;font-size:0;gap:0}
  .playerspanel .ch .sub{font-size:12px;font-weight:700;margin:0;background:var(--soft);border-radius:999px;padding:2px 8px}
  .plist{flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none;padding:6px;gap:6px;scrollbar-width:none}
  .plist::-webkit-scrollbar{display:none}
  .prow{flex:none;padding:4px 10px 4px 4px;border:1.5px solid var(--line);border-radius:999px;font-size:13px;gap:6px}
  .prow .pn{max-width:110px}
  .prow .ptitle{display:none}
}
.playerspanel{border:1.5px solid var(--line)}

/* ==================================================================
   Fin de partie : victoire / bien joué + gains + moments
   ================================================================== */
.final2{display:flex;flex-direction:column;gap:14px;text-align:center;align-items:stretch}
.fhead{display:flex;flex-direction:column;align-items:center;gap:8px}
.fwin{position:relative;display:inline-block;margin-top:6px}
.fwin h1{font-size:46px;line-height:1;transform:rotate(-3deg)}
.fstamp{position:absolute;right:-54px;bottom:-30px;transform:rotate(-8deg);font-size:13px}
.flose{display:flex;align-items:center;gap:14px;text-align:left;position:relative;flex-wrap:wrap;justify-content:center}
.flose h1{font-size:32px}
.flose .scallop-in sup{font-size:.45em}
.fprog{position:absolute;right:-6px;top:-12px;transform:rotate(10deg);font-size:11px}
@media (max-width:420px){ .fstamp{right:-22px;bottom:-32px} }
.frank{display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}
.frank > div{display:flex;flex-direction:column;gap:4px}
.frank b{font-size:26px}.frank b.up{color:#1f8a63}.frank b.down{color:var(--red)}
.final2 .podium{gap:8px;margin:6px auto 0;align-items:flex-end;width:100%;max-width:420px}
.final2 .pod{flex:1;min-width:0;background:transparent;color:var(--ink);padding:0;border-radius:0;display:flex;flex-direction:column;
  align-items:center;gap:4px;box-shadow:none}
.final2 .pod .ps{margin:0;font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.final2 .pod .pt{font-family:var(--display);font-size:13px;font-weight:500;color:var(--ink-soft)}
.final2 .podstep{width:100%;border:2.5px solid var(--bd);border-bottom:0;border-radius:12px 12px 0 0;background:var(--card);
  display:flex;justify-content:center;padding-top:6px;font-size:30px;font-weight:700}
.final2 .pod.p1 .podstep{height:120px;background:var(--yellow);color:#1b2a4a;border-color:#1b2a4a}
.final2 .pod.p2 .podstep{height:86px}
.final2 .pod.p3 .podstep{height:60px}
.final2 .frest{max-width:420px;margin:0 auto;width:100%;text-align:left}
.fgains{position:relative;text-align:left;display:flex;flex-direction:column;gap:10px;max-width:460px;margin:6px auto 0;width:100%}
.fgwait{padding:6px 0}
.fg{display:flex;align-items:center;gap:12px}
.fgtxt{display:flex;flex-direction:column;gap:4px;flex-grow:1;min-width:0}
.fgtxt b{font-size:20px}
.fgtxt .pbar{height:10px}
.fgrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fgico{width:40px;height:40px;flex:none;border-radius:12px;border:2px solid #1b2a4a;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:700;color:#1b2a4a}
.fgico.xp{background:var(--mint)}.fgico.bp{background:var(--red);color:#fff}.fgico.ss{background:#1b2a4a;color:var(--yellow);font-family:var(--display);font-size:15px}
.fgmiss{font-size:14px;color:#1f8a63;font-weight:600}
.factions{display:flex;flex-direction:column;gap:10px;max-width:460px;margin:4px auto 0;width:100%}
.factions .btn-yellow{min-height:58px;font-size:21px}
.factions .btn-ghost{min-height:48px}
/* moments : contenus */
.mrgift{font-size:34px;flex:none}
.mrrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.mrpill{border:2px solid #1b2a4a;border-radius:12px;padding:6px 12px;font-size:17px;font-weight:700;transform:rotate(-2deg)}
.mrpill + .mrpill{transform:rotate(2deg)}
.moment-achievement .moment-reward,.moment-level .moment-reward{justify-content:flex-start}
.promo{position:relative;display:inline-flex;flex-direction:column;align-items:center}
.promoribbon{margin-top:-26px;position:relative;background:var(--red);color:#fff;border:2.5px solid #1b2a4a;padding:7px 26px;font-size:21px;
  font-weight:700;letter-spacing:.06em;transform:rotate(-3deg);box-shadow:0 4px 0 #0c1426}
.moment.in .promoribbon{animation:fxribbon .6s .5s cubic-bezier(.3,.7,.3,1) both}
@keyframes fxribbon{from{transform:translateX(-260px) rotate(-3deg)}to{transform:rotate(-3deg)}}
.packfan{position:relative;display:block;width:260px;height:190px}
.packfan .pf{position:absolute;top:10px;width:110px;height:160px;border:2.5px solid #1b2a4a;border-radius:6px 6px 14px 14px;display:flex;
  align-items:center;justify-content:center;font-size:46px;box-shadow:0 5px 0 #0c1426}
.packfan .pf1{left:0;background:#c9b8ff;transform:rotate(-14deg)}
.packfan .pf3{right:0;background:#b6f0d8;transform:rotate(14deg)}
.packfan .pf2{left:75px;top:0;background:#ffb38a;z-index:2}
@media (prefers-reduced-motion: reduce){ .moment.in .promoribbon{animation:none} }

/* ==================================================================
   Onglet Classé : écusson en héros
   ================================================================== */
.ranked2{display:flex;flex-direction:column;gap:14px;text-align:center}
.rkhead{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left}
.rkhead h1{font-size:30px}
.rkseason{font-family:var(--mono);font-size:12px;font-weight:700;background:#1b2a4a;color:var(--yellow);border-radius:8px;padding:4px 8px}
.rkseason:empty{display:none}
.rkhero{position:relative;border:2.5px solid #1b2a4a;border-radius:22px;box-shadow:0 6px 0 var(--hard);color:#fff;padding:16px 16px 14px;
  display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden;
  background:repeating-conic-gradient(from 0deg at 50% 38%,rgba(255,225,77,.13) 0deg 9deg,transparent 9deg 18deg),radial-gradient(circle at 50% 38%,#3a4f86,#1b2a4a 65%)}
.rkdetect{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#c9d0e6}
.rkshield .shield{filter:drop-shadow(0 4px 0 #0c1426) drop-shadow(0 0 30px rgba(255,210,77,.45))}
.rkbarwrap{width:100%;display:flex;flex-direction:column;gap:6px;text-align:left}
.rkbartop{display:flex;justify-content:space-between;font-size:14px;color:#c9d0e6}
.rkbartop b{color:#fff}
.rkbar{border-color:#fff;background:rgba(255,255,255,.15);height:14px}
.rkbar span{background:var(--yellow)}
.rkhint{font-size:13px;color:#c9d0e6;text-align:center}
.rkother{font-size:13px;color:#9ba7c9}
.rkother .rankbadge{color:#fff}
.rkladder{display:flex;justify-content:space-between;align-items:flex-end;background:var(--card);border:2px solid var(--bd);border-radius:16px;padding:10px 8px 8px}
.rkstep{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:600;flex:1;min-width:0}
.rkstep.next{opacity:.45;filter:grayscale(.6)}
.rkstep.cur{font-weight:800}
.rkstep .shield{filter:drop-shadow(0 2px 0 var(--hard))}
.rkgo{min-height:64px;font-size:22px;width:100%}
.rkgohint{font-size:13px;color:var(--ink-soft);margin-top:-6px}
.rkmodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:left}
@media (max-width:420px){ .rkmodes{grid-template-columns:1fr} }
.rkcard{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.rkcard b{font-size:17px}
.rkcard .muted{font-size:13px}
.rkcard button{width:100%;min-height:44px;margin-top:auto}
.ranked2 .seasonbox,.ranked2 .shieldbox{text-align:center}
.rkfoot{display:flex;justify-content:center}

/* ==================================================================
   Onglet Défi : ticket du jour + série
   ================================================================== */
.df2{max-width:640px;text-align:left}
.dfhead2{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.dfhead2 h1{font-size:30px}
.dfstreak{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:600}
.dfstreak b{font-size:18px}
.dfticket{position:relative;background:var(--yellow);color:#1b2a4a;border:2.5px solid #1b2a4a;border-radius:20px;padding:14px 16px;
  display:flex;flex-direction:column;gap:12px;filter:drop-shadow(0 5px 0 var(--hard));
  -webkit-mask:radial-gradient(circle 12px at 0 66%,transparent 11px,#000 12px),radial-gradient(circle 12px at 100% 66%,transparent 11px,#000 12px);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.dfticket .kick{color:#1b2a4a;font-weight:700}
.dftop{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600}
.dfletters{display:flex;gap:10px;align-items:center}
.dfl{width:54px;height:54px;flex:none;border-radius:50% 46% 52% 48%;border:3px solid var(--red);background:#fff;display:flex;
  align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--red)}
.dfltxt{display:flex;flex-direction:column;font-size:14px;line-height:1.3}
.dfcut{border-top:2.5px dashed #1b2a4a;margin:2px -16px 0}
.dfbot{display:flex;justify-content:space-between;align-items:center;font-size:15px;gap:10px}
.dfweek{display:flex;justify-content:space-between;gap:4px;margin:16px 2px 6px}
.dfday{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.dfdl{font-size:11px;font-weight:700;color:var(--ink-soft)}
.dfdm{width:34px;height:34px;border-radius:17px;border:2px dashed var(--muted2)}
.dfday.done .dfdm{border:3px solid var(--red);transform:rotate(-12deg);position:relative}
.dfday.done .dfdm::after{content:"";position:absolute;left:10px;top:5px;width:8px;height:14px;border:solid var(--red);border-width:0 3.4px 3.4px 0;transform:rotate(45deg)}
.dfday.today .dfdm{border:2.5px solid #1b2a4a;background:var(--yellow)}
.df2 .dfcats{justify-content:flex-start;margin:10px 0}
.df2 .dfround{border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:10px;background:var(--card)}
.df2 .dfplay{width:100%;min-height:60px;margin-top:8px;background:var(--red);color:#fff;border:2px solid #1b2a4a;box-shadow:0 4px 0 var(--hard)}

/* ==================================================================
   Profil : carte d'identité
   ================================================================== */
.prof2{display:flex;flex-direction:column;gap:16px;max-width:560px;margin:0 auto;text-align:left}
.pcard{position:relative;padding:0;overflow:hidden}
.pcban{position:relative;height:104px;background:linear-gradient(135deg,#f0a,#5865F2)}
.pcava{position:absolute;left:16px;top:50px;width:108px;height:108px;border-radius:50%;padding:8px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;border:3px solid #1b2a4a}
.pcava .ava{border:3px solid #1b2a4a}
.pccomp{position:absolute;left:104px;top:124px;width:42px;height:42px;border-radius:21px;background:#d8c3a5;border:2.5px solid #1b2a4a;
  display:flex;align-items:center;justify-content:center;font-size:22px}
.pcid{padding:10px 16px 0 144px;min-height:66px}
.pcid h1{font-size:24px;line-height:1.1;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pctitle{font-size:15px;font-weight:700}
.pcmail{font-size:12px;color:var(--ink-soft);margin-top:4px;overflow-wrap:anywhere}
.pcard #pseudobox{padding:0 16px}
.pcbadges{display:flex;justify-content:space-around;align-items:flex-end;padding:14px 10px 16px;margin-top:14px;border-top:2px dashed var(--line)}
.pcb{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;text-align:center}
.lvlcard2{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.lvltop{display:flex;justify-content:space-between;gap:10px}
.lvltop span{color:var(--ink-soft)}
.pfiches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:420px){ .pfiches{grid-template-columns:repeat(2,minmax(0,1fr))} }
.pfiche{background:var(--card);border:2px solid var(--bd);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column}
.pfiche b{font-size:22px}
.pfiche span{font-size:12px;color:var(--ink-soft)}
.pmgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pmtile{min-height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--card);
  border:2px solid var(--bd);border-radius:16px;box-shadow:0 3px 0 var(--hard);font-size:14px;font-weight:600;color:var(--ink);padding:8px}
.pmtile .pmi{font-size:24px;line-height:1}
.pmtile.hot{background:var(--yellow);color:#1b2a4a;border-color:#1b2a4a}
.pmtile:active{transform:translateY(2px);box-shadow:0 1px 0 var(--hard)}
.datazone2{border:1.5px solid var(--line);border-radius:14px;padding:10px 14px}
.datazone2 summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
.plogout{align-self:center;min-height:44px}

/* ==================================================================
   Boutique : vitrine, cartes par rareté, essayage, déballage
   ================================================================== */
.shop2{display:flex;flex-direction:column;gap:14px;text-align:left}
.shhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.shhead h1{font-size:30px}
.shbal{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:20px;background:var(--card);
  border:2px solid var(--bd);box-shadow:0 3px 0 var(--hard);font-size:16px}
.shhero{position:relative;height:262px;border-radius:22px;border:2.5px solid #1b2a4a;box-shadow:0 6px 0 var(--hard);overflow:hidden;color:#fff;
  background:repeating-conic-gradient(from 0deg at 50% 44%,rgba(255,225,77,.16) 0deg 9deg,transparent 9deg 18deg),radial-gradient(circle at 50% 44%,#33477a,#1b2a4a 70%)}
.shnew{position:absolute;right:14px;top:16px;transform:rotate(8deg);font-size:12px;z-index:2}
.shhtop{position:absolute;left:0;right:0;top:16px;display:flex;flex-direction:column;align-items:center;gap:2px}
.shhk{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--yellow)}
.shhtime{font-size:13px;color:#c9d0e6}
.shhprev{position:absolute;left:50%;top:62px;transform:translateX(-50%);width:130px;height:130px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.08)}
.shhbot{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.shhname{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.shhname b{font-size:22px;line-height:1.05}
.shhbuy{min-height:50px;font-size:20px;display:inline-flex;align-items:center;gap:6px;box-shadow:0 4px 0 #0c1426}
.shtabs{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 8px;scrollbar-width:none}
.shtabs::-webkit-scrollbar{display:none}
.shtab{flex:none;min-height:40px;padding:0 14px;border-radius:20px;border:2px solid var(--bd);background:var(--card);color:var(--ink);font-size:15px;box-shadow:none}
.shtab.on{background:var(--ink);color:var(--paper)}
.shgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:700px){ .shgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){ .shgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.shcard{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;background:var(--card);color:var(--ink);
  border:2px solid var(--bd);border-radius:16px;box-shadow:0 4px 0 var(--hard);overflow:hidden;text-align:left;font-weight:500}
.shcard:active{transform:translateY(2px);box-shadow:0 2px 0 var(--hard)}
.shband{height:6px;background:var(--rar-commun)}
.r-rare .shband{background:var(--rar-rare)} .r-epique .shband{background:var(--rar-epique)} .r-legendaire .shband{background:var(--holo)}
.shprev{position:relative;height:96px;display:flex;align-items:center;justify-content:center;background:#eef1f8}
.r-rare .shprev{background:#e3eeff} .r-epique .shprev{background:#efe8ff} .r-legendaire .shprev{background:#fff0f6}
.shprev .rarity-chip{position:absolute;left:8px;top:8px;font-size:10px;padding:2px 7px}
.shname{padding:8px 10px 0;font-size:15px;font-weight:700;line-height:1.15}
.shprice,.shown,.shlock{margin:8px 10px 10px;min-height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:16px;font-weight:700}
.shprice{border:2px solid var(--bd)}
.shown{background:#d7f3e8;color:#155d43;font-size:14px}
.shlock{background:var(--soft);color:var(--ink-soft);font-size:13px}
.shfoot{text-align:center}
.tryon{display:flex;flex-direction:column;gap:12px;padding:4px 2px 10px}
.tryhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tryhead h2{font-size:24px}
.tryseg{align-self:center;display:flex;gap:2px;padding:3px;border:2px solid var(--bd);border-radius:12px;background:var(--card)}
.tryseg button{min-height:36px;padding:0 18px;border:0;border-radius:9px;background:transparent;color:var(--ink);font-size:15px;box-shadow:none}
.tryseg button[aria-checked=true]{background:var(--ink);color:var(--paper);font-weight:700}
.trycard{position:relative;border:2.5px solid var(--bd);border-radius:18px;background:var(--card);box-shadow:0 5px 0 var(--hard);overflow:hidden;min-height:160px}
.trybn{height:74px;background:linear-gradient(135deg,#8bd0ff,#c9b8ff)}
.tryava{position:absolute;left:16px;top:34px;width:82px;height:82px;border-radius:50%;border:3px solid #1b2a4a;display:flex;align-items:center;justify-content:center}
.trycomp{position:absolute;left:84px;top:96px;width:34px;height:34px;border-radius:17px;background:#d8c3a5;border:2px solid #1b2a4a;display:flex;align-items:center;justify-content:center}
.tryid{padding:10px 14px 16px 118px;display:flex;flex-direction:column;gap:2px;font-weight:700}
.tryid b{font-size:19px}
.trybal{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;border:2px solid var(--bd);border-radius:14px;padding:10px;font-size:15px}
.trybal .neg{color:var(--red)}
.trybuy{width:100%;min-height:60px;font-size:21px}
.unbox{position:relative;display:inline-block;width:250px;padding:5px;border-radius:22px;background:var(--holo);transform:rotate(-4deg);
  box-shadow:0 0 60px 14px rgba(167,139,250,.5)}
.unbox.r-commun{background:#9aa4c2}.unbox.r-rare{background:#5dafff}.unbox.r-epique{background:#a78bfa}
.unboxin{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 14px;border-radius:18px;background:#fff;color:#1b2a4a}
.unboxin b{font-size:22px}
.unboxnew{position:absolute;right:-16px;top:16px;transform:rotate(14deg);font-size:14px}
.shprev .cos-title,.shhprev .cos-title,.unboxin .cos-title{background:#1b2a4a;padding:6px 10px;border-radius:8px;font-weight:700;transform:rotate(-3deg)}

/* ==================================================================
   Inventaire « la trousse »
   ================================================================== */
.inv2{display:flex;flex-direction:column;gap:14px;text-align:left}
.invcount{font-weight:700;font-size:15px;color:var(--ink-soft)}
.invload{display:flex;align-items:center;gap:14px}
.invlt{display:flex;flex-direction:column;gap:3px;flex-grow:1;min-width:0}
.invlt b{font-size:18px}
.tcount{opacity:.7;font-size:12px}
.invgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (min-width:700px){ .invgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.invcard{position:relative;display:flex;flex-direction:column;gap:0;padding:0;min-height:138px;background:var(--card);color:var(--ink);
  border:2px solid var(--bd);border-radius:16px;overflow:hidden;box-shadow:none;font-weight:600}
.invcard.on{border-width:3px;box-shadow:0 4px 0 var(--hard)}
.invprev{flex-grow:1;display:flex;align-items:center;justify-content:center;background:#eef1f8;padding:8px 0}
.r-rare .invprev{background:#e3eeff} .r-epique .invprev{background:#efe8ff} .r-legendaire .invprev{background:#fff0f6}
.invprev .cos-title{background:#1b2a4a;padding:4px 8px;border-radius:8px;font-size:12px}
.invname{padding:6px 6px 8px;font-size:13px;text-align:center;line-height:1.15}
.invon{position:absolute;right:4px;top:10px;transform:rotate(10deg);font-size:10px;padding:1px 6px}
.invghost{min-height:138px;border:2px dashed var(--muted2);border-radius:16px;background:var(--soft);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:8px;text-align:center;font-size:12px;color:var(--ink-soft)}
.invq{width:50px;height:50px;border-radius:25px;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--muted2)}
.sheet .sheetclose{z-index:2}
.tryhead,.contest h2{padding-right:48px}

/* ==================================================================
   Album de succès (gommettes) + gommette de déblocage
   ================================================================== */
.album2{display:flex;flex-direction:column;gap:14px;text-align:left}
.albsum{position:relative;display:flex;align-items:center;gap:14px}
.albtxt{flex-grow:1;display:flex;flex-direction:column;gap:6px}
.albtxt b{font-size:28px}
.albpage{position:relative;background:var(--card);border-radius:16px;border:1.5px solid var(--line);padding:18px 10px 14px 34px}
.albpage::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:2px;background:var(--red);opacity:.7}
.albgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 6px}
@media (min-width:700px){ .albgrid{grid-template-columns:repeat(5,minmax(0,1fr))} }
.achst{display:flex;flex-direction:column;align-items:center;gap:5px;background:transparent;border:0;box-shadow:none;padding:0;color:var(--ink);
  text-align:center;min-height:0}
.achst.got .achsc{filter:drop-shadow(0 3px 0 var(--hard))}
.achst.locked .achsc{opacity:.6}
.achdim{opacity:.35;filter:grayscale(1)}
.achnm{font-size:12.5px;font-weight:700;line-height:1.15}
.achst.locked .achnm{color:var(--ink-soft);font-weight:600}
.achpb{width:64px;height:6px;border-radius:3px;background:var(--grid);overflow:hidden}
.achpb span{display:block;height:100%;background:var(--mint)}
.achpn{font-size:11px;color:var(--ink-soft)}
.achdet{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:6px 0 14px}
.achdet h2{font-size:24px}
.achdet p{margin:0}
/* gommette de déblocage (succès courant, en jeu) */
#achpops .achpop{border:2px solid #1b2a4a;border-radius:18px;box-shadow:0 5px 0 var(--hard)}
#achpops .achpop-icon{width:52px;height:52px;border-radius:50%;background:var(--yellow);border:2px solid #1b2a4a;display:flex;align-items:center;justify-content:center;font-size:26px}

/* ==================================================================
   Parcours de saison « jeu de l'oie »
   ================================================================== */
.track2{display:flex;flex-direction:column;gap:14px;text-align:left}
.trsum{display:flex;flex-direction:column;gap:8px}
.goboard{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 10px;padding-top:14px}
.gocase{position:relative;height:58px;min-height:0;padding:0;border-radius:14px;border:2px solid var(--bd);background:var(--card);
  box-shadow:0 3px 0 var(--hard);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.gocase.sp{border-width:3px;background:var(--hi)}
.gocase.got{background:#d7f3e8;border-color:#1b2a4a}
.gocase.cur{background:var(--yellow);border:3px solid #1b2a4a}
.gonum{position:absolute;left:5px;top:2px;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--ink-soft)}
.gocase.got .gonum,.gocase.cur .gonum{color:#1b2a4a}
.goban{display:inline-block;width:30px;height:20px;border-radius:4px;border:2px solid #1b2a4a;background:linear-gradient(135deg,#f0a,#5865F2)}
.goban.sm{width:22px;height:14px;vertical-align:-2px}
.gopawn{position:absolute;top:-22px;left:50%;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 3px 0 var(--hard));
  animation:fxdrop .7s cubic-bezier(.2,.8,.3,1.2) both}
.gopawn .ava{border:2.5px solid #1b2a4a}
.trlegend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink-soft)}
.trlegend > span{display:inline-flex;align-items:center;gap:4px}
.trlegend svg{width:18px;height:18px}
@media (prefers-reduced-motion: reduce){ .gopawn{animation:none} }

/* ==================================================================
   Packs en pochettes
   ================================================================== */
.packs2{display:flex;flex-direction:column;gap:12px;text-align:left}
.packgift{display:flex;align-items:center;gap:10px;background:#d7f3e8;color:#155d43;border-radius:12px;padding:10px 12px;font-size:15px}
.packsub{font-size:22px;margin-top:10px}
.pouchgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
@media (min-width:700px){ .pouchgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.pouchwrap{display:flex;flex-direction:column;gap:8px}
.pouchwrap:nth-child(odd) .pouch{transform:rotate(-1.5deg)} .pouchwrap:nth-child(even) .pouch{transform:rotate(1.5deg)}
.pouch{position:relative;filter:drop-shadow(0 5px 0 var(--hard))}
.pouchin{position:relative;min-height:190px;background:var(--pc);border:2.5px solid #1b2a4a;border-radius:6px 6px 16px 16px;color:#1b2a4a;
  clip-path:polygon(0 8px,6% 0,12% 8px,18% 0,24% 8px,30% 0,36% 8px,42% 0,48% 8px,54% 0,60% 8px,66% 0,72% 8px,78% 0,84% 8px,90% 0,96% 8px,100% 0,100% 100%,0 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;padding:20px 8px 12px;overflow:hidden;text-align:center}
.pouchin::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 48%,transparent 60%);pointer-events:none}
.pouchk{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pouche{width:70px;height:70px;border-radius:35px;background:#fff;border:2.5px solid #1b2a4a;display:flex;align-items:center;justify-content:center;font-size:36px}
.pouchin b{font-size:19px}
.pouchbtn{position:relative;z-index:1;min-height:40px;padding:0 12px;font-size:15px}
.pouch .btn-ghost.pouchbtn{background:#fff;color:#1b2a4a;border-color:#1b2a4a}
.pouchst{position:absolute;left:8px;top:40px;transform:rotate(-14deg);font-size:11px;z-index:2}
.pouch.owned .pouchin{filter:saturate(.8)}
.pouchcats{font-size:12.5px;color:var(--ink-soft);line-height:1.35}
.pouch.big{display:inline-block;width:170px}
.pouch.big .pouchin{min-height:220px;justify-content:center}

/* ==================================================================
   Écrans secondaires : briques communes harmonisées
   ================================================================== */
.authbox h2{font-size:28px;line-height:1.1;margin-bottom:6px}
.authtabs{border-bottom:0;gap:8px;padding:4px 2px 8px;margin:12px 0 12px}
.authtab{flex:none;min-height:40px;padding:0 14px;border:2px solid var(--bd);border-radius:20px;background:var(--card);color:var(--ink);font-size:15px}
.authtab.on{background:var(--ink);color:var(--paper);border-bottom-color:var(--bd)}
.authtab .tabcount{background:var(--yellow);color:#1b2a4a}
.statcell,.rankcard,.missioncard,.collcard,.release,.notifrow,.frow,.nbrow,.analysebox,.dfround{border-radius:14px}
.notifrow{border:1.5px solid var(--line);background:var(--card);min-height:56px}
.notifrow.unread{border:2px solid var(--bd);background:var(--hi)}
.release{border:1.5px solid var(--line);background:var(--card);padding:12px 14px;margin-top:10px}
.relhead b{font-family:var(--mono)}
.chip{border-color:var(--line)}
.rrcat{border-radius:20px;min-height:40px}
.rrcat.on{background:var(--yellow);color:#1b2a4a;border:2px solid #1b2a4a;font-weight:700}
.verifybanner{border:2px solid #1b2a4a;border-radius:14px;background:var(--hi);color:var(--ink)}
.sharebox{border:2px solid var(--bd);border-radius:16px;background:var(--card)}
.waiting .spin{border-color:var(--line);border-top-color:var(--red)}
/* salle d'attente / file / salon : tampon + bouton prêt */
.stamp-wrap{margin:4px 0 14px}
#readybtn{min-height:58px;font-size:20px;min-width:240px}
/* analyse de partie / revisionnage */
.analysebox{border:2px solid #1b2a4a;background:var(--hi);padding:10px 12px}
.missedbox{background:var(--soft);border-radius:10px;padding:8px 10px;margin-top:6px}
.histctl{display:flex;align-items:center;gap:10px;padding:8px 0}
.histctl input[type=range]{flex-grow:1;accent-color:var(--red)}
/* sondage */
.pollopt{border-radius:14px}
/* toasts & alertes : cartes à bord encre */
.toast{border:2px solid #1b2a4a;border-radius:14px;box-shadow:0 5px 0 var(--hard)}
.alertpop{border:2px solid #1b2a4a;border-radius:14px;box-shadow:0 5px 0 var(--hard)}
@media (min-width:1024px){ #app:has(.home2),#app:has(.shop2),#app:has(.inv2),#app:has(.album2){max-width:1180px} }

.cccol1,.cccol2{display:flex;flex-direction:column;gap:8px;min-width:0}
@media (min-width:1024px){
  .copy2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:start}
  .cccol2{background:var(--card);border:2px solid var(--bd);border-radius:18px;box-shadow:0 5px 0 var(--hard);padding:4px 14px 14px}
  #app:has(.copy2),#app:has(.final2){max-width:1180px}
  .final2{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:28px;align-items:start}
  .final2 > *{grid-column:1}
  .final2 > .fgains,.final2 > .factions{grid-column:2}
  .final2 > .fgains{grid-row:1 / span 2}
  .final2 > .factions{grid-row:3 / span 2}
}
.ctreasons input{flex:none}
.sheet .sheetclose{width:40px;height:40px;min-height:0;padding:0;border-radius:20px;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:16px;box-shadow:none}

/* drapeau « contester » dans les listes compactes (défis, historique, équipes, vote) */
.dfcell{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;min-height:40px}
.dfcell .ctflag,.dfcell .ctsent,.histtab .ctflag,.histtab .ctsent,.rc .ctflag,.rc .ctsent,.bubflag .ctflag,.bubflag .ctsent{width:34px;height:34px;vertical-align:middle;margin-left:4px}
.bubflag{position:absolute;top:-12px;left:-10px}

/* ==================================================================
   Solo contre l'IA : échelle de niveaux (mode fermé)
   ================================================================== */
.solo2{display:flex;flex-direction:column;gap:12px;text-align:left;max-width:640px;margin:0 auto}
.solotop{font-family:var(--mono);font-weight:700;background:#1b2a4a;color:var(--yellow);border-radius:8px;padding:4px 8px}
.sololadder{display:flex;flex-direction:column-reverse;gap:6px}
.sololvl{display:flex;align-items:center;gap:12px;min-height:50px;padding:6px 12px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink);text-align:left;box-shadow:none;font-weight:600}
.sololvl .sln{width:34px;height:34px;flex:none;border-radius:17px;border:2px solid var(--bd);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700}
.sololvl .slname{flex-grow:1;font-size:16px}
.sololvl .slst{font-size:13px;color:var(--ink-soft);font-weight:600}
.sololvl.beaten .sln{background:var(--mint);border-color:#1b2a4a;color:#1b2a4a}
.sololvl.beaten .slst{color:#1f8a63}
.sololvl.locked{opacity:.5;border-style:dashed;cursor:not-allowed}
.sololvl.on{border:2.5px solid #1b2a4a;background:var(--yellow);color:#1b2a4a;box-shadow:0 4px 0 var(--hard)}
.sololvl.on .sln{background:#fff;border-color:#1b2a4a;color:#1b2a4a}
.sololvl.on .slst{color:#1b2a4a}
.solopick{display:flex;flex-direction:column;gap:4px}
.sologo{width:100%}
@media (min-width:1024px){ .sololadder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));direction:ltr} .sololvl{flex-direction:column;text-align:center;min-height:110px;justify-content:center} }
.lobbycats{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:4px 0 12px}
.prefstar{font-size:12px;margin-right:2px}

/* ---------- accueil : bas de page (tuiles + Discord + mentions) ---------- */
.home2 .homefoot{display:grid;grid-template-columns:1fr;gap:12px;align-items:stretch}
.hmtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hmtile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:70px;padding:8px 4px;
  border-radius:14px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:13px;font-weight:600;box-shadow:none;text-align:center}
.hmtile .hmico{width:22px;height:22px;color:var(--ink)}
.hmtile:hover{border-color:var(--bd);background:var(--soft)}
.hmtile.installapp{display:none;color:var(--ink)}
body.can-install .hmtile.installapp{display:flex}
.home2 .discordjoin{display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:10px 16px;border-radius:16px;
  border:2px solid #1b2a4a;background:#5865F2;color:#fff;box-shadow:0 4px 0 var(--hard);text-align:left}
.home2 .discordjoin span{display:flex;flex-direction:column;line-height:1.2}
.home2 .discordjoin b{font-size:16px}
.home2 .discordjoin small{font-size:12px;opacity:.85;font-weight:500}
.hmlegal{justify-self:center;background:none;border:0;box-shadow:none;padding:4px 8px;min-height:32px;font-size:12px;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:3px;font-weight:500}
@media (min-width:1024px){
  .home2 .homefoot{grid-template-columns:minmax(0,1fr) 320px;column-gap:28px;row-gap:6px;border-top:1.5px dashed var(--line);padding-top:16px}
  .hmtiles{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  .home2 .discordjoin{align-self:stretch}
  .hmlegal{grid-column:1 / -1}
}

/* ---------- Profil v2 : identité + stats à gauche, accès rangés à droite (bureau) ---------- */
.prof2{max-width:980px}
.pcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.pclvl{display:flex;flex-direction:column;gap:6px;padding:0 16px 16px}
.pstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--card);border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.pstat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 6px;text-align:center;
  border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.pstat:nth-child(3n){border-right:0}
.pstat:nth-last-child(-n+3){border-bottom:0}
.pstat b{font-size:22px}
.pstat span{font-size:12px;color:var(--ink-soft)}
.pgroup{display:flex;flex-direction:column;background:var(--card);border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.pgroup h2{padding:12px 16px 6px;margin:0}
.prow2{display:flex;align-items:center;gap:14px;min-height:62px;padding:8px 16px;background:transparent;border:0;border-top:1.5px solid var(--line);
  border-radius:0;box-shadow:none;color:var(--ink);text-align:left;font-weight:500}
.pgroup h2 + .prow2{border-top:0}
.prow2:hover{background:var(--soft)}
.prow2 .pri{width:40px;height:40px;flex:none;border-radius:12px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:21px}
.prow2.hot .pri{background:var(--yellow);border:2px solid #1b2a4a}
.prow2 .prt{flex-grow:1;display:flex;flex-direction:column;min-width:0}
.prow2 .prt b{font-size:16px}
.prow2 .prt span{font-size:13px;color:var(--ink-soft)}
.prow2 .prchev{color:var(--ink-soft);flex:none}
.prow2.admin .pri{background:#1b2a4a}
.pfoot{display:flex;flex-direction:column;gap:10px;align-items:center}
.pfoot .datazone2{width:100%}
.pfoot .plogout{background:none;border:0;box-shadow:none;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;font-size:14px;min-height:40px}
@media (min-width:1024px){
  #app:has(.prof2){max-width:1180px}
  .prof2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;max-width:none}
  .pcol1{position:sticky;top:14px}
  .pfoot{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:flex-start;border-top:1.5px dashed var(--line);padding-top:14px}
  .pfoot .datazone2{width:auto;flex:1;max-width:640px}
}

/* ---------- Alpha test : bandeau d'accueil + page « Ce qu'on teste » ---------- */
.alphabanner{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;margin:0;padding:12px 44px 12px 14px;
  border-radius:16px;border:2px dashed #8b7bff;background:color-mix(in srgb,#8b7bff 10%,var(--card))}
.alphatag{font-family:var(--mono);font-weight:800;font-size:12px;letter-spacing:.12em;color:#fff;background:#6a55e0;border-radius:8px;padding:4px 8px}
.alphatxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.alphatxt span{font-size:13px;color:var(--ink-soft)}
.alphaact{grid-column:1 / -1;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.alphaact .btn-yellow,.alphaact .btn-ghost{min-height:40px;padding:6px 12px;font-size:14px;white-space:nowrap;flex:1 1 0}
@media (min-width:1024px){ .alphaact .btn-yellow,.alphaact .btn-ghost{flex:0 0 auto} }
.alphax{position:absolute;top:4px;right:4px;background:none;border:0;box-shadow:none;color:var(--ink-soft);min-width:40px;min-height:40px;padding:0;font-size:16px}
.alphapage{max-width:760px;margin:0 auto}
.alphalist{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
.alphaitem{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);cursor:pointer}
.alphaitem input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:#8b7bff}
.alphaitem span{display:flex;flex-direction:column;gap:2px;min-width:0}
.alphaitem small{color:var(--ink-soft);font-size:13px}
.alphaitem.done{border-color:#8b7bff}
.alphaitem.done b{text-decoration:line-through;text-decoration-color:#8b7bff}
@media (min-width:1024px){ .alphalist{grid-template-columns:1fr 1fr} .alphaact{grid-column:auto} .alphabanner{grid-template-columns:auto minmax(0,1fr) auto} }

/* Petits téléphones (≤ 400 px, Android 360 px) : 4 boutons ronds + logo tiennent sur UNE ligne
   (le 🐞 de l'alpha en a ajouté un). */
@media (max-width:400px){
  .topbar > .row{gap:6px}
  .topbar .sndbtn{width:40px;height:40px;font-size:16px}
  .brand{font-size:22px}
}

/* ---------- accueil : liens vers les pages « idées de mots » (SEO + aide aux joueurs) ---------- */
.hmideas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;font-size:14px}
.hmideas a{color:var(--ink-soft);font-weight:600}
.hmideas-l{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.hmideas-l a{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:34px;border-radius:8px;text-decoration:none;font-family:var(--mono);font-size:13px}
.hmideas-l a:hover{background:var(--soft);color:var(--ink)}
@media (min-width:1024px){ .hmideas{grid-column:1 / -1} }

/* série quotidienne : jour sauvé par l'oubli pardonné de la semaine */
.dfday.saved .dfdm{border:2.5px dashed var(--red);opacity:.7;position:relative}
.dfday.saved .dfdm::after{content:"🛟";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px}

/* ---------- Événements (apps/classique/client/screens/event.js) ---------- */
.evbanner{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center;margin:0 0 10px;
  padding:12px 14px;border-radius:16px;border:2px solid var(--evc,#ff7a1a);background:color-mix(in srgb,var(--evc,#ff7a1a) 12%,var(--card))}
.evemoji{font-size:34px;line-height:1}
.evtxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.evtxt > span{font-size:13px;color:var(--ink-soft)}
.evlab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#fff;background:#8b7bff;border-radius:6px;padding:2px 6px;vertical-align:middle}
.evprog{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink) !important}
.evprog.done{color:var(--mint) !important;font-weight:700}
.evbar{display:inline-block;width:90px;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.evbar i{display:block;height:100%;background:var(--evc,#ff7a1a)}
.evtheme{grid-column:1 / -1;justify-self:start;min-height:40px;padding:6px 12px;font-size:14px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--card);color:var(--ink);box-shadow:none}
@media (min-width:1024px){ .evbanner{grid-template-columns:auto minmax(0,1fr) auto} .evtheme{grid-column:auto;justify-self:end} }

/* Ambiance Halloween : palette sombre, accents citrouille (posée sur <html data-event="halloween">,
   prioritaire sur le thème clair/sombre ; coupable depuis le bandeau). */
:root[data-event="halloween"]{
  color-scheme:dark;
  --paper:#171220; --grid:#2a2034; --ink:#f4ecff; --ink-soft:#bba9cc; --line:#3b2d49; --white:#221a2d;
  --shadow:rgba(0,0,0,.6); --soft:#2a2036; --hi:#40290f; --accent:#4a2b63; --yellow:#ff8a1f;
  --ink-on-yellow:#1a0d03; --card:#221a2d; --bd:#6a4888; --hard:#07040b; --muted2:#8a78a0; --evc:#ff8a1f;
}
:root[data-event="halloween"] body{background-color:var(--paper)}

/* ---------- Relais (Labo, vague 5) : une case ouverte à la fois ---------- */
.relaybar{margin:4px 0 10px;padding:10px 14px;border-radius:12px;border:2px solid var(--yellow);
  background:color-mix(in srgb,var(--yellow) 14%,var(--card));font-size:15px;text-align:center}
.cell.relaynext,.cell.relaydone{display:none}
.cell.relaycur{grid-column:1 / -1}
.cell.relaycur input{font-size:20px;min-height:52px}

/* ---------- « Le perdant choisit » (Labo, vague 5) ---------- */
.lpick{margin:8px 0;padding:10px 14px;border-radius:12px;border:2px dashed var(--yellow);
  background:color-mix(in srgb,var(--yellow) 12%,var(--card));display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lpickbtns{display:flex;gap:8px;flex-wrap:wrap}
.lpickbtns .btn-yellow{min-width:52px;min-height:48px;font-size:22px;font-weight:800;padding:4px 12px}

/* ---------- Buzzer (Labo, vague 5) ---------- */
#grid.grid.buzzgrid{grid-template-columns:1fr}
.buzzrow{display:flex;gap:6px;align-items:center}
.buzzrow input{flex:1;min-width:0}
.cell .buzzbtn{min-width:44px;min-height:44px;border-radius:10px;border:2px solid var(--line);
  background:var(--yellow);color:var(--ink-on-yellow);font-size:18px;padding:0 8px;box-shadow:none;flex:none}
.cell .buzzbtn:disabled{opacity:.45}
.cell .buzztag{display:block;margin-top:4px;font-size:13px;font-weight:700}
.cell.buzzmine{border-color:var(--mint)}
.cell.buzzmine .buzztag{color:var(--mint)}
.cell.buzzother{opacity:.75}
.cell.buzzblock .buzztag{color:var(--red)}
/* ---------- Enchères (Labo, vague 5) ---------- */
.bidbar{margin:12px auto;max-width:560px;padding:10px 12px;border-radius:14px;border:2px solid var(--yellow);
  background:color-mix(in srgb,var(--yellow) 12%,var(--card));text-align:left}
.bidq{font-size:15px}
.bidsel{font-weight:700;margin-left:4px}
.bidks{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bidk{min-width:44px;min-height:44px;border-radius:10px;border:2px solid var(--line);background:var(--card);color:var(--ink);
  font-size:18px;font-weight:800;box-shadow:none;padding:0 8px}
.bidk.on{background:var(--yellow);color:var(--ink-on-yellow);border-color:#1b2a4a}
.bidres{font-size:12px;font-weight:700;border-radius:8px;padding:2px 6px;margin-right:6px;white-space:nowrap}
.bidres.ok{background:color-mix(in srgb,var(--mint) 22%,transparent);color:var(--ink)}
.bidres.ko{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--ink)}
.bidline{margin:8px 0;padding:8px 12px;border-radius:12px;font-size:14px;border:1.5px solid var(--line)}
.bidline.ok{border-color:var(--mint)}
.bidline.ko{border-color:var(--red)}

/* ---------- Tous contre l'IA (Labo, vague 5) ---------- */
.coopbox{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center;margin:10px 0;padding:10px 14px;
  border-radius:14px;border:2px solid var(--line);background:var(--card);font-size:16px}
.coopbox.ok{border-color:var(--mint)}
.coopbox.ko{border-color:var(--red)}
.coopbox b{font-size:22px}
.coopvs{color:var(--ink-soft);font-size:13px}
.coopv{flex-basis:100%;text-align:center;font-weight:700}

/* ---------- Top 5 (Labo, vague 5) ---------- */
.t5form{display:grid;gap:8px;margin:10px 0}
.t5in{min-height:46px;font-size:18px;padding:8px 12px;border-radius:10px;border:2px solid var(--line);background:var(--white);color:var(--ink)}
.t5top{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.t5top li{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:8px 10px;
  border-radius:10px;border:1.5px solid var(--line);background:var(--card)}
.t5top li.me{border-color:var(--mint);background:color-mix(in srgb,var(--mint) 14%,var(--card))}
.t5r{font-weight:800;font-size:18px;text-align:center}
.t5p{font-weight:800}

/* ---------- Plateau équipé foncé : texte clair et lisible dans la grille ---------- */
#grid.darkboard .cell{border-bottom-color:rgba(255,255,255,.22)}
#grid.darkboard .cell label{color:#dfe6f5}
#grid.darkboard .cell:focus-within label{color:#ffffff}
#grid.darkboard .cell input.ansinput{color:#ffffff}
#grid.darkboard .cell input.ansinput::placeholder{color:rgba(255,255,255,.5)}
#grid.darkboard .cell input.ansinput:focus{color:#1b2a4a}
#grid.darkboard .cell input.ansinput:focus::placeholder{color:rgba(27,42,74,.55)}
#grid.darkboard .catq{color:#dfe6f5;border-color:rgba(255,255,255,.55)}
#grid.darkboard .lettertip{color:#ffd6d9}

/* ---------- Accueil : missions du jour en icône + feuille (proposition B, 11/10) ---------- */
.hmtitle-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.home2 .hmtitle-row{order:4}
.home2 .hmtitle-row .hmtitle{order:0;margin:2px 0 0;min-width:0}
.hmmissbtn{position:relative;flex:none;width:48px;height:48px;min-height:48px;padding:0;display:grid;place-items:center;
  border-radius:14px;border:2px solid var(--bd);background:var(--card);color:var(--ink);box-shadow:0 3px 0 var(--hard)}
.hmmissbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--hard)}
.hmmissbtn.alldone{border-color:var(--mint);color:var(--mint);box-shadow:none}
.hmmissbd{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--red);
  color:#fff;font-size:12px;font-weight:800;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--card)}
.msheet{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center}
.msheet-veil{position:absolute;inset:0;background:rgba(27,42,74,.42)}
.msheet-box{position:relative;width:100%;max-width:560px;max-height:85vh;overflow:auto;background:var(--card);color:var(--ink);
  border-radius:22px 22px 0 0;border-top:2px solid var(--bd);padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:4px;text-align:left;animation:msheetUp .22s ease-out}
.msheet-box:focus{outline:none}
.msheet-grab{width:40px;height:5px;border-radius:3px;background:var(--line);align-self:center;margin-bottom:4px}
.msheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.msheet-head h2{margin:0;font-size:22px}
.msheet-x{width:44px;height:44px;min-height:44px;padding:0;border-radius:12px;background:transparent;border:0;box-shadow:none;color:var(--ink);font-size:18px}
.msheet-sub{margin:0 0 4px;font-size:13px;color:var(--ink-soft)}
.msheet-tx{margin:4px 0 10px;font-size:15px;line-height:1.45}
.msheet .mrow{grid-template-columns:1fr auto auto;padding:9px 0;border-bottom:1.5px dashed var(--line);font-size:15px}
.msheet .mrow.done .mtitle{text-decoration:line-through}
.msheet .mgo{min-height:36px;padding:0 12px;font-size:14px;box-shadow:none}
.msheet .mweek{border-top:0;margin-top:6px}
@keyframes msheetUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:720px){
  .msheet{align-items:center}
  .msheet-box{border-radius:20px;border:2px solid var(--bd);box-shadow:0 8px 0 var(--hard);padding:16px 22px 20px}
  .msheet-grab{display:none}
}
@media (prefers-reduced-motion:reduce){ .msheet-box{animation:none} }

/* Missions du jour : carte dans la colonne latérale sur ordinateur (12/10), icône ailleurs */
.hmmiss{display:none}
.hmmiss .missioncard{max-width:none;margin:0;background:var(--card);border:1.5px solid var(--line);border-radius:14px;
  padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:2px}
.hmmiss .mhead{margin:0 0 2px;font-size:17px}
.hmmiss .mrow{grid-template-columns:1fr auto auto;padding:8px 0;border-bottom:1.5px dashed var(--line);font-size:14px}
.hmmiss .mrow.done .mtitle{text-decoration:line-through}
.hmmiss .mgo{min-height:34px;padding:0 10px;font-size:13px;box-shadow:none}
.hmmiss .mweek{border-top:0;margin-top:6px}
.hmmiss .msheet-tx{margin:2px 0 8px;font-size:14px;line-height:1.45}
@media (min-width:1024px){
  .hmmiss{display:block}
  .hmmissbtn{display:none}
}