/* =================================================================
   FLUXXYCORP — CASINO
   Meme langage visuel que le site : fond sombre, accent ambre unique,
   IBM Plex, bordures fines. Surfaces plates, aucune lueur : la couleur
   sert a dire la rarete, pas a decorer.
   ================================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0a0b;
  --bg-2:#0e0e10;
  --surface:#141416;
  --surface-2:#1a1a1d;
  --accent:#ff5a1f;
  --accent-2:#ff7a45;
  --accent-soft:rgba(255,90,31,.12);
  --discord:#5865F2;
  --text:#f2f1ee;
  --muted:#9c9ba1;
  --muted-2:#68676c;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --win:#39b877;
  --lose:#d0414e;
  --radius:8px;
  --radius-lg:12px;
  --maxw:1180px;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Consolas,monospace;

  /* Raretes */
  /* Hauteur de la barre du haut. Le menu deroulant et son voile s'y
     accrochent : une seule valeur, trois endroits qui la lisent. */
  --h-top:62px;
  --r-standard:#78828f;  --r-avance:#3d7fd1;   --r-notable:#2f9e8f;
  --r-elite:#7d5ad2;     --r-prototype:#c247b6; --r-classifie:#d0414e;
  --r-relique:#e0a32e;   --r-mythique:#e6ecff;
}

/* Rien ne doit depasser en largeur. Sur telephone, un seul element trop
   large rendait toute la page glissante de droite a gauche ; et comme la
   barre basse est en position:fixed, elle restait collee au bord de la
   FENETRE pendant que le contenu glissait dessous — on la voyait « bouger »
   alors qu'elle ne bougeait pas.

   `clip` et non `hidden` : `hidden` cree un conteneur de defilement, ce qui
   casse le position:sticky de la barre du haut. `clip` coupe sans en creer.
   Les navigateurs qui ne connaissent pas `clip` gardent le comportement
   d'avant plutot qu'une barre du haut cassee. */
html,body{max-width:100%}
@supports (overflow-x:clip){
  html,body{overflow-x:clip}
}
/* Un filet de securite : aucun media ne depasse son cadre. */
img,svg,video,canvas,table{max-width:100%}

html{
  /* Sans fond ici, le rebond de defilement en bas de page laissait voir
     celui du navigateur : une bande noire sous la barre du bas. */
  background:var(--bg);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;      /* pas de gonflement du texte en paysage */
  text-size-adjust:100%;
}
/* Pas de delai de 300 ms ni de zoom au double-tap sur les elements cliquables. */
button,a,.cell,.ball,.num,.item-pick{touch-action:manipulation}
body{
  font-family:var(--sans);
  background:var(--bg);color:var(--text);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* 100dvh et non 100vh : sur telephone, 100vh compte la zone cachee par
     la barre d'adresse, donc la page etait plus haute que l'ecran et on
     voyait une bande sous le contenu en arrivant en bas. */
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
svg{display:block}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.01em;font-weight:600}

/* grille ambiante, identique au site */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;background:var(--bg);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%,#000,transparent 70%);
  mask-image:radial-gradient(circle at 50% 0%,#000,transparent 70%);
  opacity:.45;
}

[hidden]{display:none !important}
.cas-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-lg{width:22px;height:22px}
.obj{width:48px;height:48px;flex:none}

/* =============== BARRE DU HAUT =============== */
.cas-top{position:sticky;top:0;z-index:60;background:rgba(10,10,11,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.cas-top-in{max-width:var(--maxw);margin:0 auto;padding:0 20px;height:var(--h-top);
  display:flex;align-items:center;gap:18px}
.cas-brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:15px;flex:none}
.cas-logo{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;
  background:var(--accent);color:var(--bg);font-family:var(--mono);font-weight:700;font-size:15px}
.cas-brand b{font-weight:700}
.cas-brand span{color:var(--muted-2);font-weight:500}


.cas-wallet{display:flex;align-items:center;gap:8px;flex:none}
.chip-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--line-2);
  border-radius:99px;font-family:var(--mono);font-weight:600;font-size:14px;background:var(--surface)}
.chip-pill .ic{color:var(--accent);width:16px;height:16px}
.cas-who{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line);
  border-radius:99px;font-size:13.5px;color:var(--muted);max-width:160px}
.cas-who b{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =============== STRUCTURE =============== */
.cas-main{flex:1;max-width:var(--maxw);width:100%;margin:0 auto;padding:30px 20px 60px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:24px}
.page-head h1{font-size:clamp(24px,3.4vw,32px)}
.page-head p{color:var(--muted);font-size:14.5px;max-width:62ch;margin-top:6px}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px}
.panel-t{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-t h2,.panel-t h3{font-size:15px;font-weight:600}
.panel-note{color:var(--muted);font-size:13.5px;line-height:1.6}

.grid-2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}

/* =============== BOUTONS =============== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;
  border:1px solid var(--line-2);border-radius:var(--radius);background:var(--surface-2);
  font-size:14.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s}
.btn:hover:not(:disabled){background:#232327;border-color:var(--line-2)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#120800}
.btn-primary:hover:not(:disabled){background:var(--accent-2);border-color:var(--accent-2)}
.btn-win{background:var(--win);border-color:var(--win);color:#04170d}
.btn-win:hover:not(:disabled){filter:brightness(1.08)}
.btn-ghost{background:transparent}
.btn-ghost.on{background:rgba(255,255,255,.07);border-color:var(--line-2)}
.btn-ghost.on .ic{color:var(--accent)}
.btn-sm{padding:7px 12px;font-size:13px}
.btn-block{width:100%}
.btn-lg{padding:14px 22px;font-size:15.5px}

/* Il se replie : c'est ce qui manquait. Un groupe de cinq boutons ne
   tient pas sur 360 px, et sans repli il poussait toute la page. */
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-2)}
.seg button{padding:8px 14px;background:none;border:none;cursor:pointer;font-size:13.5px;
  color:var(--muted);transition:background .15s,color .15s}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--text)}
.seg button.on{background:rgba(255,255,255,.08);color:var(--text)}

/* =============== CHAMPS =============== */
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
.input{width:100%;padding:11px 13px;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--radius);font-family:var(--mono);font-size:14.5px;transition:border-color .15s}
.input:focus{outline:none;border-color:var(--accent)}
.bet-row{display:flex;gap:8px}
.bet-row .input{flex:1;min-width:0}
.chips-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chips-quick button{padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2);
  font-family:var(--mono);font-size:12.5px;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s}
.chips-quick button:hover{border-color:var(--line-2);color:var(--text)}

/* =============== STATS =============== */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--surface);padding:14px 16px}
.stat i{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);font-style:normal;margin-bottom:5px}
.stat b{font-family:var(--mono);font-size:19px;font-weight:600}
.stat small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}

/* =============== RARETES =============== */
.rar-standard {--r:var(--r-standard); --rt:rgba(120,130,143,.24); --rt2:rgba(120,130,143,.05)}
.rar-avance   {--r:var(--r-avance);   --rt:rgba(61,127,209,.26);  --rt2:rgba(61,127,209,.05)}
.rar-notable  {--r:var(--r-notable);  --rt:rgba(47,158,143,.26);  --rt2:rgba(47,158,143,.05)}
.rar-elite    {--r:var(--r-elite);    --rt:rgba(125,90,210,.26);  --rt2:rgba(125,90,210,.05)}
.rar-prototype{--r:var(--r-prototype);--rt:rgba(194,71,182,.26);  --rt2:rgba(194,71,182,.05)}
.rar-classifie{--r:var(--r-classifie);--rt:rgba(208,65,78,.26);   --rt2:rgba(208,65,78,.05)}
.rar-relique  {--r:var(--r-relique);  --rt:rgba(224,163,46,.28);  --rt2:rgba(224,163,46,.05)}
/* Mythique : la seule rarete qui ne vit que dans les toutes dernieres
   caisses. Presque blanche, pour qu'elle ne se confonde avec rien. */
.rar-mythique {--r:var(--r-mythique); --rt:rgba(230,236,255,.34); --rt2:rgba(230,236,255,.07)}
.rar-mythique .item-obj{text-shadow:0 0 12px rgba(230,236,255,.45)}

.rar-dot{width:8px;height:8px;border-radius:2px;background:var(--r);flex:none}
.rar-name{color:var(--r)}

/* =============== FINITIONS (couleurs des objets) =============== */
.sk-brut     {--s1:#6d7480;--s2:#565c66;--s3:#99a1ad}
.sk-graphite {--s1:#4a4d54;--s2:#34373c;--s3:#797e88}
.sk-sable    {--s1:#9a8a6d;--s2:#7a6d55;--s3:#c4b391}
.sk-olive    {--s1:#6b7355;--s2:#525a41;--s3:#97a179}
.sk-carbone  {--s1:#3f4248;--s2:#2b2d31;--s3:#646972}
.sk-ardoise  {--s1:#55606d;--s2:#3e4752;--s3:#8592a0}
.sk-rouille  {--s1:#8a5a3c;--s2:#6b452d;--s3:#b78458}
.sk-ivoire   {--s1:#a89d88;--s2:#857c6a;--s3:#ded3ba}
.sk-azur     {--s1:#2f6fb8;--s2:#23558c;--s3:#64a6e8}
.sk-glacier  {--s1:#4d8fa8;--s2:#386b80;--s3:#8fd0e4}
.sk-menthe   {--s1:#3d9a7a;--s2:#2c7159;--s3:#75d4b2}
.sk-indigo   {--s1:#4a5bb5;--s2:#36438a;--s3:#8a96e8}
.sk-turquoise{--s1:#2e9aa0;--s2:#217277;--s3:#68d6dc}
.sk-cobalt   {--s1:#2b57a8;--s2:#1f4080;--s3:#6a93e0}
.sk-jade     {--s1:#2f8a68;--s2:#226650;--s3:#6cc9a5}
.sk-lagon    {--s1:#1f8f9e;--s2:#166a76;--s3:#5fd0de}
.sk-cedre    {--s1:#4a8f6a;--s2:#356a4e;--s3:#86cfa4}
.sk-nebuleuse{--s1:#6f4fb0;--s2:#523a85;--s3:#a98ae0}
.sk-amethyste{--s1:#8455bd;--s2:#633f90;--s3:#bd95ee}
.sk-violine  {--s1:#7a4a9e;--s2:#5b3676;--s3:#b083d4}
.sk-prisme   {--s1:#5b62c4;--s2:#434898;--s3:#9fa6f0}
.sk-lavande  {--s1:#8d7ac8;--s2:#6a5a9c;--s3:#c3b4ef}
.sk-neon     {--s1:#b83f9e;--s2:#8c2f78;--s3:#f078d4}
.sk-fuchsia  {--s1:#c2418e;--s2:#94316c;--s3:#f47ac0}
.sk-orchidee {--s1:#a84fb8;--s2:#7f3b8c;--s3:#dd8aec}
.sk-magenta  {--s1:#c0359b;--s2:#922875;--s3:#f56fd0}
.sk-braise   {--s1:#c2502c;--s2:#963c20;--s3:#f38a5c}
.sk-cramoisi {--s1:#b8323f;--s2:#8c2530;--s3:#ee6b78}
.sk-sangneuf {--s1:#a82a35;--s2:#7d1f27;--s3:#e05a66}
.sk-ecarlate {--s1:#c93b2b;--s2:#992c1f;--s3:#f5786a}
.sk-omega    {--s1:#c8952a;--s2:#9a711f;--s3:#f5cd6a}
.sk-orfondu  {--s1:#d9a838;--s2:#a87f28;--s3:#ffdf8c}
.sk-aurore   {--s1:#c9b04a;--s2:#9a8534;--s3:#fff0a8}
.sk-antimatiere{--s1:#b9c2de;--s2:#8b93ad;--s3:#ffffff}
.sk-eclipse  {--s1:#8f93b8;--s2:#5c6080;--s3:#eef1ff}

/* =============== TUILE D'OBJET =============== */
.item{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--rt),var(--rt2)) ,#0f1012;
  border:1px solid var(--line);border-bottom:3px solid var(--r);overflow:hidden;
  transition:border-color .15s,transform .15s}
.item-art{flex:1;display:grid;place-items:center;padding:18px 14px 6px}
.item-art svg{width:62px;height:62px}
.item-meta{display:block;padding:0 12px 12px;text-align:center;min-width:0}
.item-name{display:none}
.item-obj{display:block;font-size:13px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pull-by{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:6px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-wear{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:4px;padding:2px 6px}
.item-val{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:11px;font-weight:600;
  background:rgba(0,0,0,.45);border:1px solid var(--line);border-radius:4px;padding:2px 6px}

/* inventaire : selection */
.item-pick{cursor:pointer;text-align:left;width:100%;font:inherit}
.item-pick:hover{border-color:var(--line-2)}
.item-pick.sel{border-color:var(--accent)}
.item-pick.sel::after{content:"";position:absolute;inset:0;background:var(--accent-soft);pointer-events:none}

.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
/* Une case de grille ne doit jamais s'elargir pour son texte (pseudo sous
   un objet du lobby) : sinon la colonne deborde sur petit telephone. */
.inv-grid>*{min-width:0}

/* =============== OUVERTURE DE CAISSE =============== */
.roll-wrap{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:#0b0b0d;overflow:hidden}
.roll-wrap::before,.roll-wrap::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:3;pointer-events:none}
.roll-wrap::before{left:0;background:linear-gradient(90deg,#0b0b0d,transparent)}
.roll-wrap::after{right:0;background:linear-gradient(270deg,#0b0b0d,transparent)}
.roll{height:196px;overflow:hidden;position:relative}
.roll-track{display:flex;gap:10px;padding:10px 0;height:100%;will-change:transform}
.roll-track .item{flex:0 0 160px}
.roll-track .item-art svg{width:56px;height:56px}

.roll-tick{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--accent);
  transform:translateX(-1px);z-index:4;pointer-events:none}
.roll-tick::before,.roll-tick::after{content:"";position:absolute;left:50%;
  border-left:6px solid transparent;border-right:6px solid transparent;transform:translateX(-50%)}
.roll-tick::before{top:0;border-top:8px solid var(--accent)}
.roll-tick::after{bottom:0;border-bottom:8px solid var(--accent)}

.roll-idle{display:grid;place-items:center;height:196px;color:var(--muted);font-size:14px;gap:10px;text-align:center}
.roll-idle svg{width:54px;height:54px;color:var(--muted-2)}

/* carte de resultat */
.reveal{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center;
  border:1px solid var(--line);border-left:3px solid var(--r);border-radius:var(--radius);
  background:linear-gradient(90deg,var(--rt),transparent 55%),var(--surface);padding:16px 18px}
.reveal-art{display:grid;place-items:center;height:100px}
.reveal-art svg{width:78px;height:78px}
.reveal h3{font-size:19px}
.reveal .sub{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:2px}
.reveal-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:13px}
.reveal-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}

/* =============== BOUTIQUE =============== */
.case-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;transition:border-color .15s}
.case-card:hover{border-color:var(--line-2)}
/* Les trois chiffres qui comptent sur une vignette de caisse : ce qu'elle
   rend en moyenne, ce que vaut son pire tirage, et son plafond. Le pire
   tirage est la ligne la plus utile — c'est la promesse de la caisse. */
.case-facts{display:grid;gap:6px;margin:10px 0 12px;padding:10px 11px;
  border:1px solid var(--line);border-radius:8px;background:var(--bg-2)}
.case-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.case-facts dt{font-size:12px;color:var(--muted-2)}
.case-facts dd{font-size:12.5px;color:var(--text);text-align:right}
.case-facts .muted{font-size:11.5px}

.case-art{display:grid;place-items:center;padding:26px 0 18px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.case-art .obj{width:86px;height:86px}
.case-art .ic{width:40px;height:40px;stroke-width:1.35;color:var(--muted);transition:color .15s}
.case-card:hover .case-art .ic{color:var(--accent)}
.case-body{padding:16px 17px 17px;display:flex;flex-direction:column;flex:1}
.case-body h3{font-size:16px}
.case-body p{color:var(--muted);font-size:13.5px;margin:7px 0 13px;flex:1}
.odds{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.odd{display:flex;align-items:center;gap:8px;font-size:12.5px}
/* `.bar` est aussi la barre de commandes des jeux (plus bas) : ses marges,
   son cadre et son rembourrage transformaient cette jauge en carre gris. */
.odd .bar{display:block;flex:1;height:4px;margin:0;padding:0;border:0;
  border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.odd .bar i{display:block;height:100%;background:var(--r);min-width:2px}
.odd .pc{font-family:var(--mono);font-size:11.5px;color:var(--muted);width:52px;text-align:right}
.case-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:13px;border-top:1px solid var(--line)}
.price{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:600;font-size:15px}
.price .ic{color:var(--accent);width:15px;height:15px}

/* =============== MINES =============== */
.mines-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;max-width:460px;margin:0 auto}
.cell{position:relative;aspect-ratio:1;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--surface-2);cursor:pointer;display:grid;place-items:center;
  transition:background .12s,border-color .12s,transform .1s}
.cell:hover:not(:disabled){background:#26262b;border-color:var(--line-2);transform:translateY(-1px)}
.cell:disabled{cursor:default}
.cell svg{width:28px;height:28px;opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s}
.cell.safe{background:rgba(57,184,119,.13);border-color:rgba(57,184,119,.45)}
.cell.safe svg{opacity:1;transform:none;color:var(--win)}
.cell.boom{background:rgba(208,65,78,.16);border-color:rgba(208,65,78,.55)}
.cell.boom svg{opacity:1;transform:none;color:var(--lose)}
.cell.shown{opacity:.5}
.cell.shown svg{opacity:1;transform:none;color:var(--muted)}

.ladder{max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius)}
.ladder table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px}
.ladder td{padding:6px 12px;border-bottom:1px solid var(--line)}
.ladder tr:last-child td{border-bottom:none}
.ladder td:last-child{text-align:right;color:var(--muted)}
.ladder tr.now td{background:var(--accent-soft);color:var(--text)}

/* =============== MACHINE A SOUS =============== */
.reels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:10px}
.reel{display:flex;flex-direction:column;gap:8px;overflow:hidden}
.sym{aspect-ratio:1;display:grid;place-items:center;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);transition:border-color .2s,background .2s}
.sym svg{width:46px;height:46px}
.sym.hit{border-color:var(--accent);background:var(--accent-soft)}
.sym.dim{opacity:.34}
.reel.spin{animation:reelBlur .36s linear infinite}
@keyframes reelBlur{0%{transform:translateY(0)}100%{transform:translateY(-6px)}}

.sy-wild{color:var(--accent)}
.sy-scatter{color:#e0a32e}
.sy-ogive{color:#d0414e}
.sy-satellite{color:#7d5ad2}
.sy-drone{color:#3d7fd1}
.sy-gpu{color:#39b877}
.sy-hex{color:#8a8f99}
.sy-losange{color:#7e8590}
.sy-triangle{color:#747a85}
.sy-cercle{color:#6b7078}

.paytable{width:100%;border-collapse:collapse;font-size:13px}
.paytable th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);font-weight:500;padding:0 8px 8px}
.paytable td{padding:6px 8px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px}
.paytable td:first-child{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-size:13px}
.paytable td:not(:first-child){text-align:right;color:var(--muted)}
.paytable svg{width:22px;height:22px}

/* =============== CRASH =============== */
.crash-box{position:relative;height:300px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--bg-2);overflow:hidden}
.crash-canvas{position:absolute;inset:0;width:100%;height:100%}
.crash-mult{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.crash-mult b{font-family:var(--mono);font-size:clamp(38px,7vw,62px);font-weight:600;letter-spacing:-.02em}
.crash-mult small{display:block;text-align:center;font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:4px}
.crash-mult.boom b{color:var(--lose)}
.crash-mult.cashed b{color:var(--win)}

.hist{display:flex;gap:6px;flex-wrap:wrap}
.hist span{font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:5px;
  border:1px solid var(--line);color:var(--muted);background:var(--bg-2)}
.hist span.hi{color:var(--win);border-color:rgba(57,184,119,.4)}
.hist span.lo{color:var(--lose);border-color:rgba(208,65,78,.35)}

/* =============== ROULETTE =============== */
.wheel-box{display:grid;place-items:center;padding:14px 0 20px}
.wheel{position:relative;width:min(300px,78vw);aspect-ratio:1}
.wheel svg{width:100%;height:100%}
.wheel-spin{transition:transform 5.6s cubic-bezier(.16,.84,.26,1)}
.wheel-ptr{position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  border-left:9px solid transparent;border-right:9px solid transparent;border-top:15px solid var(--accent)}
.wheel-out{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38%;aspect-ratio:1;border-radius:50%;background:var(--bg-2);border:1px solid var(--line-2);
  display:grid;place-items:center;font-family:var(--mono);font-size:30px;font-weight:600}

.table-felt{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);padding:12px}
.num{position:relative;border:1px solid var(--line);border-radius:5px;background:var(--surface-2);
  font-family:var(--mono);font-size:12.5px;padding:9px 0;cursor:pointer;text-align:center;
  transition:border-color .12s,transform .1s}
.num:hover{border-color:var(--line-2);transform:translateY(-1px)}
.num.red{background:rgba(208,65,78,.22)}
.num.black{background:rgba(255,255,255,.05)}
.num.green{background:rgba(57,184,119,.2);grid-row:span 3}
.num.col{grid-column:14}
.num.won{border-color:var(--accent)}
.num b{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;border-radius:99px;
  background:var(--accent);color:#120800;font-size:10.5px;line-height:19px;font-weight:700;padding:0 4px}
.outs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:4px}
.outs2{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:4px}
.outs .num,.outs2 .num{padding:10px 0;font-size:12px}

/* =============== LOTO =============== */
.jackpot{text-align:center;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(224,163,46,.1),transparent),var(--surface);padding:26px 20px}
.jackpot i{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--r-relique);font-style:normal;margin-bottom:8px}
.jackpot b{display:block;font-family:var(--mono);font-size:clamp(32px,6vw,52px);font-weight:600;letter-spacing:-.02em}
.jackpot small{display:block;color:var(--muted);font-size:13.5px;margin-top:8px}

.balls{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px}
.ball{aspect-ratio:1;border-radius:50%;border:1px solid var(--line-2);background:var(--surface-2);
  font-family:var(--mono);font-size:14px;cursor:pointer;display:grid;place-items:center;
  transition:background .12s,border-color .12s,color .12s}
.ball:hover:not(:disabled){border-color:var(--line-2);background:#26262b}
.ball.on{background:var(--accent);border-color:var(--accent);color:#120800;font-weight:700}
.ball.sm{width:32px;height:32px;aspect-ratio:auto;font-size:12.5px;border-radius:50%;cursor:default}
.ball.out{background:var(--win);border-color:var(--win);color:#04170d;font-weight:700}
.ball-row{display:flex;gap:6px;flex-wrap:wrap}

.grid-line{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.grid-line:last-child{border-bottom:none}

/* volets depliants (verification d'un tirage, details d'un objet) */
details{border-top:1px solid var(--line)}
details summary{cursor:pointer;padding:9px 0;font-family:var(--mono);font-size:12.5px;
  color:var(--muted);list-style:none;display:flex;align-items:center;gap:8px}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+";font-weight:600;color:var(--accent)}
/* Echappement CSS (signe moins) plutot que le caractere lui-meme : un script
   l'avait mal recopie en caractere de controle, et le volet ouvert affichait « 2 ». */
details[open] summary::before{content:"\2212"}
details summary:hover{color:var(--text)}
details>*:not(summary){padding-bottom:12px}

.wheel-out.win{color:var(--win)}
.wheel-out.lose{color:var(--lose)}

/* =============== CLASSEMENT =============== */
.board{width:100%;border-collapse:collapse}
.board th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);font-weight:500;padding:0 14px 10px}
.board td{padding:11px 14px;border-top:1px solid var(--line);font-size:14px}
.board td:last-child{text-align:right;font-family:var(--mono);font-weight:600}
.board .rk{font-family:var(--mono);color:var(--muted);width:52px}
.board tr.me td{background:var(--accent-soft)}
.board-name{border-bottom:1px solid var(--line-2)}
.board-name:hover{color:var(--accent);border-bottom-color:var(--accent)}
.board tr.me .rk{color:var(--accent)}
/* Le TOP 10, pas le top 3. Les trois premiers gardent leurs couleurs de
   podium ; du quatrieme au dixieme, un rang net et un fond a peine marque,
   pour qu'on voie d'un coup d'oeil ou s'arrete le haut du tableau. */
.board tr.rang .rk{color:var(--text);font-weight:600}
.board tr.rang td{background:rgba(255,255,255,.022)}
.board .top1 .rk{color:#e0a32e}
.board .top2 .rk{color:#c9ccd4}
.board .top3 .rk{color:#c58a55}
.board .top1 .rk,.board .top2 .rk,.board .top3 .rk{font-size:15px}
/* Le dixieme ferme le groupe : un trait dit ou finit le top 10. */
.board tr.dernier-rang td{border-bottom:2px solid var(--line-2)}

/* =============== TABLEAU D'EQUITE =============== */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 18px;font-size:13.5px}
.kv dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);padding-top:2px}
.kv dd{font-family:var(--mono);font-size:12.5px;word-break:break-all;color:var(--muted)}
.kv dd b{color:var(--text);font-weight:600}

/* =============== GATE (choix du pseudo) =============== */
.gate{position:fixed;inset:0;z-index:90;overflow-y:auto;background:rgba(6,6,7,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}
.gate-card{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--radius-lg);padding:28px}
.gate-card h2{font-size:20px;margin-bottom:8px}
.gate-card p{color:var(--muted);font-size:14px;margin-bottom:18px}
.gate-legal{font-size:12.5px;color:var(--muted-2);margin-top:14px;line-height:1.6}
.gate-legal a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.gate-legal a:hover{color:var(--text)}
.gate-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-bottom:16px}
.gate-tabs button{padding:10px 12px;text-align:center}
.gate-card p{color:var(--muted);font-size:14px;margin-bottom:16px}

/* Le code de liaison : gros, espace, en capitales — il se recopie a la main. */
.code-input{text-align:center;font-size:21px;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;padding:13px 10px 13px 22px}
.code-input::placeholder{letter-spacing:.32em;color:var(--muted-2);font-weight:400}

/* =============== MESSAGES =============== */
.toast-zone{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;gap:9px;
  max-width:min(360px,calc(100vw - 36px))}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line-2);font-size:13.5px;
  animation:toastIn .22s ease-out}
.toast.err{border-color:rgba(208,65,78,.5)}
.toast.err .ic{color:var(--lose)}
.toast.win{border-color:rgba(57,184,119,.45)}
.toast.win .ic{color:var(--win)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.notice{display:flex;gap:11px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-2);color:var(--muted);font-size:13.5px;line-height:1.6}
.notice .ic{color:var(--accent);margin-top:2px}
.notice b{color:var(--text)}

/* =============== PIED DE PAGE =============== */
.cas-foot{border-top:1px solid var(--line);background:var(--bg-2);margin-top:auto}
.cas-foot-in{max-width:var(--maxw);margin:0 auto;padding:26px 20px;display:flex;gap:20px;
  flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted-2)}
.cas-foot a{color:var(--muted)}
.cas-foot a:hover{color:var(--text)}
.cas-foot .legal{max-width:62ch;line-height:1.65}
.cas-foot .legal b{color:var(--muted)}
.age{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line-2);font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);flex:none}

/* =============== DIVERS =============== */
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.win{color:var(--win)}
.lose{color:var(--lose)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:14px}
.sep{height:1px;background:var(--line);margin:16px 0}
.empty{text-align:center;padding:44px 20px;color:var(--muted);font-size:14px}
.empty svg{width:40px;height:40px;margin:0 auto 12px;color:var(--muted-2)}

/* =============== BARRE BASSE (mobile) =============== */
/* Rendue en permanence dans le HTML, affichee seulement sur petit ecran. */
.cas-bottom{display:none}

/* =============== BARRE D'ACTION =============== */
/* Sur mobile, l'action principale reste sous le pouce au lieu de partir
   en bas d'une longue colonne. Sur grand ecran, c'est un bloc normal. */
.act{margin-top:4px}

/* =============== TAPIS DEFILANT =============== */

/* =============== CODE DE LIAISON DISCORD =============== */
.link-code{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:.22em;
  color:var(--accent);user-select:all}

/* =============== COULEUR PROPRE A CHAQUE JEU =============== */
/* Une page se reconnait a sa couleur avant meme qu'on lise son titre.
   Tout ce qui est accentue dans la page suit --game ; ailleurs, --game
   vaut l'ambre du site. */
body                      {--game:var(--accent); --game-soft:var(--accent-soft)}
body[data-page="mines"]   {--game:#d0414e; --game-soft:rgba(208,65,78,.15)}
body[data-page="slots"]   {--game:#e0a32e; --game-soft:rgba(224,163,46,.15)}
body[data-page="crash"]   {--game:#7d5ad2; --game-soft:rgba(125,90,210,.16)}
body[data-page="roulette"]{--game:#39b877; --game-soft:rgba(57,184,119,.14)}
body[data-page="loto"]    {--game:#3d7fd1; --game-soft:rgba(61,127,209,.15)}

.btn-primary{background:var(--game);border-color:var(--game)}
.btn-primary:hover:not(:disabled){filter:brightness(1.1)}
.eyebrow{color:var(--game)}

/* =============== BANDEAU DE JEU =============== */
.hero{position:relative;overflow:hidden;margin-bottom:22px;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--game-soft),transparent 62%),var(--surface)}
.hero-art{position:absolute;inset:0;color:var(--game);pointer-events:none}
.hero-art .scene{width:100%;height:100%;display:block}
/* Voile en degrade : la scene reste visible a droite, le texte lisible a gauche. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--surface) 0%,rgba(20,20,22,.86) 40%,transparent 76%)}
.hero-in{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;
  gap:22px;flex-wrap:wrap;padding:20px 24px 18px}
.hero h1{font-size:clamp(26px,4vw,38px);letter-spacing:-.022em}
.hero p{color:var(--muted);font-size:14.5px;max-width:52ch;margin-top:8px}
.hero-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* =============== PRIMITIVES DE MISE EN PAGE =============== */
/* Chaque jeu a desormais sa disposition ; ces briques evitent de
   reinventer une grille a chaque page. */
.play{max-width:560px;margin:0 auto}
.play-lg{max-width:920px;margin:0 auto}

/* Barre de commandes horizontale, sous l'aire de jeu. */
.bar{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:15px 17px}
.bar .field{margin:0}
.bar-act{margin-left:auto;display:flex;gap:10px;align-items:center}
.bar-sep{width:1px;align-self:stretch;background:var(--line)}

/* Bande horizontale defilante (paliers, historique). */
/* Glissable au doigt ou a la molette, mais sans barre visible. */
.strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip>*{flex:0 0 auto}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

.step{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2);
  padding:7px 12px;font-family:var(--mono);font-size:12.5px;color:var(--muted);text-align:center}
.step b{display:block;color:var(--text);font-size:13.5px}
.step.now{border-color:var(--game);background:var(--game-soft);color:var(--text)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.split-lg{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}

/* =============== BANDEAU DE CONFIRMATION D'ADRESSE =============== */
/* Bandeau d'invitation a un echange : meme forme que le bandeau de
   confirmation d'adresse, mais en accent vert pour dire « quelqu'un
   t'attend » plutot que « il te reste quelque chose a faire ». */
.invite-bar{position:fixed;top:calc(var(--h-top) + 10px);left:50%;transform:translateX(-50%);
  z-index:66;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  width:min(640px,calc(100% - 24px));padding:11px 15px;
  border:1px solid var(--win);border-radius:var(--radius);
  background:var(--surface-2);font-size:14px;box-shadow:0 14px 34px rgba(0,0,0,.55);
  animation:toastIn .22s ease-out}
.invite-bar .ic{color:var(--win);flex:none}
.invite-bar b{color:var(--text)}
.invite-act{display:flex;gap:8px;margin-left:auto}

/* Presence : un point, un mot. Le point seul suffirait, mais un daltonien
   ne le lirait pas — le mot est la pour ca. */
.presence{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11.5px;color:var(--muted-2)}
.presence::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--line-2);flex:none}
.presence.on{color:var(--win)}
.presence.on::before{background:var(--win);box-shadow:0 0 0 3px rgba(57,184,119,.18)}
.col-etat{white-space:nowrap}
.col-etat .btn{margin-left:8px;padding:4px 8px}

.verify-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  max-width:var(--maxw);margin:16px auto -6px;padding:12px 16px;
  background:var(--accent-soft);border:1px solid rgba(255,90,31,.32);border-radius:var(--radius);
  font-size:13.5px;color:var(--muted)}
.verify-bar .ic{color:var(--accent);flex:none}
.verify-bar b{color:var(--text)}
.verify-bar .btn{margin-left:auto}

/* =============== ATTENTE D'UNE REPONSE DISCORD =============== */
.wait-box{text-align:center;padding:18px 14px;border:1px solid var(--line-2);
  border-radius:var(--radius);background:var(--bg-2)}
.wait-box p{color:var(--muted);font-size:13.5px;margin-bottom:10px}
.wait-spin{display:block;width:26px;height:26px;margin:0 auto 12px;border-radius:50%;
  border:2px solid var(--line-2);border-top-color:var(--accent);animation:waitTurn .9s linear infinite}
@keyframes waitTurn{to{transform:rotate(360deg)}}
.gate-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted-2);
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--line)}
.gate-tabs{grid-template-columns:repeat(3,1fr)}

/* =============== PIECES DES NOUVELLES MISES EN PAGE =============== */
.board-head{margin-bottom:12px}
.board-foot{margin-top:12px}
.chip-pill.big{font-size:18px;padding:8px 16px;border-color:var(--game);background:var(--game-soft)}

.bar .field>span{margin-bottom:6px}
.bar .chips-quick{margin-top:6px}
.bar .input{min-width:130px}
.input-sm{max-width:110px}
.bar-hint{margin-top:8px;font-size:12px;text-align:right}
.row-tight{gap:7px;margin-top:10px}
.row-tight .btn{flex:1}

.step span{display:block;font-size:11px;color:var(--muted-2);margin-top:1px}
.step b{font-family:var(--mono)}

.crash-box.tall{height:360px}
.wheel-panel .wheel-box{padding:4px 0 10px}

/* Les volets depliants des panneaux n'ont pas de trait du haut : le titre
   du panneau joue deja ce role. */
.panel>details{border-top:none}
.panel>details>summary{padding-top:0;font-size:13.5px;color:var(--text)}

/* =============== MENU DEROULANT =============== */
/* Sur telephone comme sur ordinateur. La barre horizontale des jeux tenait
   a cinq entrees ; a six, le Loto sortait du cadre sans que rien ne le dise
   — elle defilait, mais rien ne l'indiquait, donc un jeu entier avait
   disparu. C'est le defaut de fond de ce motif : il casse en silence des
   qu'on ajoute quelque chose. Un menu n'a pas cette limite, et il laisse la
   place d'ecrire les noms en entier. */
.cas-burger{display:inline-flex;align-items:center;gap:8px;flex:none;
  height:38px;padding:0 13px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface-2);color:var(--text);
  font:inherit;font-size:13.5px;font-weight:600}
.cas-burger .ic{width:18px;height:18px;color:var(--muted);flex:none}
.cas-burger:hover{border-color:var(--line-2)}
.cas-burger[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-soft)}
.cas-burger[aria-expanded="true"] .ic{color:var(--accent)}

/* position:fixed, pas absolute : accroche a la barre, le menu ne s'ouvrait
   en entier qu'en haut de page — ailleurs il naissait sous le pli et il
   fallait remonter pour le voir. Accroche a la FENETRE, il s'ouvre au meme
   endroit quel que soit le defilement. La hauteur est bornee par ce qui
   reste sous la barre, pour qu'il tienne toujours a l'ecran. */
.cas-menu{position:fixed;left:0;right:0;top:var(--h-top);z-index:80;
  background:var(--surface);border-bottom:1px solid var(--line-2);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  max-height:calc(100dvh - var(--h-top));overflow-y:auto;
  overscroll-behavior:contain}
.cas-menu[hidden]{display:none}
.cas-menu-in{max-width:var(--maxw);margin:0 auto;
  padding:18px 20px calc(20px + env(safe-area-inset-bottom))}

.cas-menu-me{display:flex;align-items:center;gap:11px;padding:11px 12px;
  margin-bottom:16px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2)}
.cas-menu-me .ic{width:20px;height:20px;color:var(--accent);flex:none}
.cas-menu-me span{display:flex;flex-direction:column;min-width:0}
.cas-menu-me b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cas-menu-me small{font-family:var(--mono);font-size:12px;color:var(--muted-2)}

.cas-menu-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin:0 0 9px 2px}

.cas-menu-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:18px}
.cas-menu-grid a{display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:15px 6px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);color:var(--muted);font-size:12.5px;text-align:center;
  transition:border-color .15s,color .15s,transform .12s}
.cas-menu-grid a .ic{width:21px;height:21px}
.cas-menu-grid a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cas-menu-grid a:hover{color:var(--text);border-color:var(--line-2);transform:translateY(-2px)}
.cas-menu-grid a.on{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}
.cas-menu-grid a.on .ic{color:var(--accent)}

.cas-menu-out{display:block;padding:11px;text-align:center;font-size:13px;
  color:var(--muted);border:1px solid var(--line);border-radius:var(--radius)}
.cas-menu-out:hover{color:var(--text);border-color:var(--line-2)}

.cas-menu-voile{position:fixed;inset:var(--h-top) 0 0;z-index:55;background:rgba(6,6,7,.6)}
.cas-menu-voile[hidden]{display:none}


@media (max-width:680px){
  /* Le bouton se reduit a son icone, et la grille a trois colonnes. */
  .cas-burger{padding:0;width:38px;justify-content:center}
  .cas-burger span{display:none}
  .cas-menu-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .cas-menu-grid a{padding:13px 4px;font-size:12px}

  /* La barre basse est en z-index 70 : sans ca elle passerait par-dessus le
     bas du menu. Le menu lui laisse aussi sa hauteur libre. */
  .cas-top{z-index:75}
  .cas-menu-in{padding:14px 12px calc(74px + env(safe-area-inset-bottom))}

  /* Le classement : sur telephone il ne reste que la pastille de presence,
     le bouton d'echange passerait a 30 px de large. */
  .col-etat .btn{display:none}
}

/* =============== CARTES DU LOBBY =============== */
/* Chaque jeu se reconnait a sa scene et a sa couleur, pas a une icone de
   trait de plus. C'est ce qui enleve l'impression de « tout pareil ». */
.game-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
  transition:border-color .18s,transform .18s}
.game-card:hover{border-color:var(--g);transform:translateY(-2px)}

.g-mines   {--g:#d0414e; --gs:rgba(208,65,78,.14)}
.g-slots   {--g:#e0a32e; --gs:rgba(224,163,46,.14)}
.g-crash   {--g:#7d5ad2; --gs:rgba(125,90,210,.15)}
.g-roulette{--g:#39b877; --gs:rgba(57,184,119,.13)}
.g-loto    {--g:#3d7fd1; --gs:rgba(61,127,209,.14)}
.g-plinko  {--g:#2f9e8f; --gs:rgba(47,158,143,.14)}
.g-boutique{--g:var(--accent); --gs:var(--accent-soft)}

.game-art{position:relative;display:block;height:118px;overflow:hidden;color:var(--g);
  background:linear-gradient(150deg,var(--gs),transparent 70%),var(--bg-2);
  border-bottom:1px solid var(--line)}
.game-art .scene{width:100%;height:100%;display:block}
.game-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,var(--surface))}

/* Vitrine de la boutique : quelques objets, chacun dans sa finition. */
.game-art-items{display:flex;align-items:center;justify-content:center;gap:14px}
.float-item{display:block}
.float-item .obj{width:46px;height:46px}
.fi-0{transform:translateY(6px) rotate(-8deg)}
.fi-1{transform:translateY(-8px) rotate(5deg)}
.fi-2{transform:translateY(4px) rotate(9deg)}
.fi-3{transform:translateY(-5px) rotate(-6deg)}

.game-body{display:flex;flex-direction:column;flex:1;padding:16px 17px 15px}
.game-body h3{font-size:16.5px}
.game-body p{color:var(--muted);font-size:13.5px;margin:7px 0 14px;flex:1}
.game-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:12px;border-top:1px solid var(--line)}
.game-foot .mono{font-size:12px;color:var(--g)}
.game-go{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--muted);transition:background .18s,color .18s,border-color .18s}
.game-go .ic{transform:rotate(180deg);width:15px;height:15px}
.game-card:hover .game-go{background:var(--g);border-color:var(--g);color:#0a0a0b}

/* =============== OUVERTURE : ROULEAUX ET ACHAT =============== */
/* Un rouleau par caisse, empiles. Ils partent ensemble et se posent l'un
   apres l'autre : ouvrir cinq caisses a la file prendrait une demi-minute,
   en parallele ca tient en sept secondes. */
/* `.open-reels` et non `.reels` : la machine a sous utilise deja
   `.reels` pour ses cinq colonnes, et cette regle-ci, plus bas dans
   le fichier, la remplacait — les rouleaux de la slot s'empilaient. */
.open-reels{display:flex;flex-direction:column;gap:10px}
.open-reels .roll-wrap{transition:border-color .3s}
/* Plusieurs rouleaux : chacun devient plus bas, sinon cinq ne tiennent
   pas dans un ecran. */
.open-reels .roll-wrap:not(:only-child) .roll{height:132px}
.open-reels .roll-wrap:not(:only-child) .roll-track .item{flex:0 0 116px}
.open-reels .roll-wrap:not(:only-child) .roll-track .item-art svg{width:40px;height:40px}
/* A l'arret, le cadre prend la couleur de ce qui est tombe. */
.roll-wrap.posed{border-color:var(--r)}

/* L'ecran d'achat : combien, et qu'en faire. */
.buy-box{padding:4px 0 2px}
.buy-head{display:flex;align-items:center;gap:14px}
.buy-art{display:grid;place-items:center;width:64px;height:64px;flex:none;
  border-radius:12px;background:var(--bg-2)}
.buy-art .obj{width:42px;height:42px}
.buy-head h3{font-size:17px}
.buy-head p{font-size:12.5px;margin-top:2px}
.buy-total{font-size:15px;color:var(--muted)}
.buy-total b{color:var(--text);font-size:19px}
.buy-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.buy-acts .btn-lg{flex:1 1 200px;justify-content:center}

/* Le recapitulatif d'un lot ouvert. */
.lot{margin-top:14px;padding:16px 15px;border:1px solid var(--line-2);
  border-radius:var(--radius-lg);background:var(--surface-2)}
.lot-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:12px}
.lot-head h3{font-size:16px}
.lot-head .mono{color:var(--win);font-size:14px;font-weight:600}
.lot-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}

/* =============== CAISSES GARDEES =============== */
.crate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.crate{position:relative;display:flex;align-items:center;gap:13px;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2)}
.crate-art{display:grid;place-items:center;width:56px;height:56px;flex:none;
  border-radius:10px;background:var(--bg-2);color:var(--accent)}
.crate-art .obj{width:38px;height:38px}
.crate-n{position:absolute;top:-8px;left:52px;padding:2px 7px;border-radius:99px;
  background:var(--accent);color:#120800;font-family:var(--mono);font-size:11px;font-weight:700}
.crate-body{min-width:0;flex:1}
.crate-body h3{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crate-body p{font-size:11.5px;margin:1px 0 8px}
.crate-act{display:flex;flex-wrap:wrap;gap:6px}
.crate-act .btn{padding:5px 10px;font-size:12px}

/* Les deux gestes de la boutique : ouvrir tout de suite, ou mettre de cote. */
.case-buy{display:flex;gap:7px;margin-top:10px}
.case-buy .btn{flex:1;justify-content:center;white-space:nowrap}
.case-buy .btn-ghost{flex:0 0 auto}

/* Les objets d'une ouverture groupee arrivent en cascade. */
@keyframes pop-in{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
.item.pop{animation:pop-in .32s both}

/* =============== PASS DE COMBAT =============== */
.pass-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pass-lvl{display:flex;flex-direction:column;align-items:center;flex:none;
  min-width:96px;padding:12px 16px;border:1px solid var(--line-2);
  border-radius:var(--radius);background:var(--surface-2)}
.pass-lvl b{font-family:var(--mono);font-size:40px;line-height:1;color:var(--accent)}
.pass-lvl small{font-family:var(--mono);font-size:11px;color:var(--muted-2);margin-top:3px}

.pass-bar-box{flex:1 1 320px;min-width:0}
.pass-bar{height:12px;margin:9px 0 8px;border-radius:99px;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line)}
.pass-bar>span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),#ffb066);
  transition:width .6s cubic-bezier(.2,.8,.3,1)}
.pass-next{font-size:12.5px}
.pass-next b{color:var(--text)}

/* La piste : une bande qui defile, avec les paliers franchis eteints. */
.pass-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px}
.pass-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:13px 8px 11px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);text-align:center;opacity:.55;transition:opacity .2s}
.pass-step.big{border-color:var(--line-2)}
.pass-step.done{opacity:1;border-color:var(--accent);background:var(--accent-soft)}
.pass-step-n{font-family:var(--mono);font-size:11px;color:var(--muted-2)}
.pass-step.done .pass-step-n{color:var(--accent)}
.pass-step-art{display:grid;place-items:center;height:38px}
.pass-step-art .obj{width:32px;height:32px}
/* L'icone des jetons est une icone de trait, pas un objet :
   elle se dimensionne a part. */
.pass-ic{width:28px;height:28px;color:var(--accent)}
.pass-step-lot{font-size:11.5px;color:var(--muted);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.pass-step.done .pass-step-lot{color:var(--text)}

/* =============== LA ROUE QUOTIDIENNE =============== */
/* Pas de fleche ici : sur une roue de lots elle ne designe rien que le
   joueur puisse verifier. La case gagnante s'allume a l'arret, et le lot
   s'ecrit au centre — les deux disent la meme chose. */
.wedge{transition:opacity .25s,filter .25s}
.wheel-spin.showing .wedge{opacity:.32}
.wheel-spin.showing .wedge.on{opacity:1;filter:brightness(1.45) saturate(1.2)}
.wedge.on{stroke:rgba(255,255,255,.75);stroke-width:1.2}

/* =============== PLINKO =============== */
/* La planche est un cadre a proportions fixes : la bille se place en
   pourcentage, jamais en pixels, pour qu'un redimensionnement ne la
   decale pas au milieu d'une chute. */
.plinko-box{--p:#2f9e8f;padding:4px 0 0}
.plinko-board{position:relative;width:100%;aspect-ratio:5/4;
  border-radius:var(--radius);background:var(--bg-2);
  border:1px solid var(--line);overflow:hidden}
.plinko-pegs{position:absolute;inset:0;width:100%;height:100%;
  fill:var(--line-2)}

/* Les billes vivent dans cette couche, creees au lancer et retirees a
   l'arrivee. Une bille reutilisee repartait en glissant depuis sa case
   precedente : on la voyait « remonter » au milieu avant chaque lancer. */
.plinko-balls{position:absolute;inset:0;z-index:2;pointer-events:none}
.plinko-ball{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:var(--p);
  box-shadow:0 0 0 3px rgba(47,158,143,.22),0 0 14px rgba(47,158,143,.55);
  transition:left .12s linear,top .12s cubic-bezier(.45,0,.9,.6),
             opacity .26s,transform .26s}
.plinko-ball.done{opacity:0;transform:scale(.4)}

.plinko-slots{display:flex;gap:3px;margin-top:8px}
.pslot{flex:1 1 0;min-width:0;padding:7px 2px;text-align:center;
  border-radius:6px;background:var(--surface-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background .15s,color .15s,transform .15s}
.pslot.hot{color:var(--win);border-color:rgba(57,184,119,.3)}
.pslot.cold{color:var(--muted-2)}
.pslot.hit{background:var(--p);border-color:var(--p);color:#06100e;
  font-weight:700;transform:translateY(-3px)}

@media (prefers-reduced-motion:reduce){
  .plinko-ball{transition:opacity .26s}
}

/* =============== ROULETTE : TROIS COULEURS =============== */
.c-rouge{--c:#c3313d}
.c-noir {--c:#2a2b31}
.c-vert {--c:#2f9e63}

.colors{display:flex;flex-direction:column;gap:9px}
.color-bet{position:relative;display:grid;grid-template-columns:34px 1fr auto auto 22px;
  align-items:center;gap:12px;width:100%;padding:13px 14px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius);
  font:inherit;text-align:left;transition:border-color .15s,background .15s,transform .1s}
.color-bet:hover{border-color:var(--c);transform:translateY(-1px)}
.color-bet.on{border-color:var(--c);background:var(--surface-2)}
@supports (background:color-mix(in srgb,red 10%,blue)){
  .color-bet.on{background:color-mix(in srgb,var(--c) 18%,var(--surface-2))}
}
/* La pastille de confirmation n'apparait que sur la couleur choisie :
   sans elle, sur un ecran sans couleur fidele, rien ne dit laquelle est prise. */
.color-tick{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--c);color:#fff;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.color-tick .ic{width:13px;height:13px}
.color-bet.on .color-tick{opacity:1;transform:none}
.color-swatch{width:30px;height:30px;border-radius:7px;background:var(--c);
  border:1px solid rgba(255,255,255,.14)}
.color-name{font-weight:600;font-size:15px}
.color-pays{font-family:var(--mono);font-size:14px;color:var(--text)}
.color-odds{font-family:var(--mono);font-size:11.5px;color:var(--muted-2);min-width:52px;text-align:right}

/* La bille. Elle vit dans une piste qui tourne : la bille elle-meme ne
   bouge pas, c'est son bras qui pivote. Une seule transform a animer, donc,
   et aucune trigonometrie en JavaScript. */
.ball-track{position:absolute;inset:0;z-index:3;pointer-events:none;
  transition:transform 5.4s cubic-bezier(.12,.72,.15,1)}
.ball-arm{position:absolute;left:50%;top:0;width:0;height:50%;
  transform-origin:50% 100%}
.ball-arm .ball{position:absolute;left:-6px;top:7%;width:12px;height:12px;
  border-radius:50%;background:#f4f4f6;
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.55),
             inset -2px -2px 3px rgba(0,0,0,.28)}
.ball-track.rolling .ball-arm .ball{top:2%}
.ball-arm .ball{transition:top 5.4s ease-in}

/* Le lot de la roue : une carte qui apparait sous le disque. */
.prize{display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:14px;padding:16px 14px;border:1px solid var(--line-2);
  border-radius:var(--radius);background:var(--surface-2);text-align:center}
.prize>b{font-size:15px}
.prize .item{width:min(190px,70%)}
.prize .muted{font-family:var(--mono);font-size:12px}
.prize-chips{font-family:var(--mono);font-size:30px;font-weight:700;color:var(--win)}
/* La caisse gagnee : on la montre fermee, elle s'ouvrira ailleurs. */
.prize-crate{display:grid;place-items:center;width:84px;height:84px;
  border-radius:14px;background:var(--bg-2)}
.prize-crate .obj{width:58px;height:58px}

/* Frise des dernieres couleurs : des pastilles, pas des numeros. */
.hist.dots{gap:7px}
.dot{width:16px;height:16px;border-radius:50%;background:var(--c);
  border:1px solid rgba(255,255,255,.14);flex:none}

.wheel-out{font-size:17px;letter-spacing:.02em;text-align:center;line-height:1.2;padding:0 8px}
.wheel-out.c-rouge{color:#e8636e}
.wheel-out.c-vert {color:#4ed18c}
.wheel-out.c-noir {color:var(--muted)}

/* =============== ECHANGE ENTRE JOUEURS =============== */
.trade-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.trade-side{border-top:3px solid var(--line)}
.trade-side[data-side="moi"]{border-top-color:var(--accent)}
.trade-side[data-side="lui"]{border-top-color:var(--r-peu-commun,#3d7fd1)}

.trade-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px;
  min-height:150px;padding:11px;border:1px dashed var(--line-2);border-radius:var(--radius);
  background:var(--bg-2);align-content:start}
.trade-slots .item-art svg{width:40px;height:40px}
.trade-slots .item-obj{font-size:11.5px}
.trade-empty{grid-column:1/-1;align-self:center;text-align:center;font-size:13px}
.trade-chips{font-size:19px;font-weight:600}

/* Acceptation : lisible d'un coup d'oeil, des deux cotes. */
.ok-badge{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted-2)}
.ok-badge.on{color:var(--win);border-color:rgba(57,184,119,.5);background:rgba(57,184,119,.12)}

.trade-bar{align-items:center}
.trade-status{font-size:14px;color:var(--muted)}
.trade-status .count{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;
  border-radius:50%;background:var(--accent);color:#120800;font-family:var(--mono);font-size:15px}
.counting .trade-bar{border-color:var(--accent)}
.counting .trade-slots{border-color:var(--accent)}

/* Un objet que l'autre a demande se signale sans crier. */
.trade-pick .item-pick.asked{border-color:var(--r-tres-rare,#c247b6)}
.trade-pick .item-pick.asked::before{content:"demandé";position:absolute;top:8px;left:8px;z-index:2;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  background:#c247b6;color:#120014;border-radius:4px;padding:2px 6px}
.trade-pick .item-pick.asked .item-wear{opacity:0}

/* =============== RESPONSIVE =============== */

/* --- Tablette --- */
@media (max-width:920px){
  .grid-2{grid-template-columns:minmax(0,1fr)}
}

/* --- Telephone --- */
@media (max-width:680px){
  /* La barre du haut se resume a l'identite et au solde : les outils
     descendent dans la barre basse, ou le pouce les atteint. */
  .cas-top-in{padding:0 12px;gap:8px}
  .cas-brand{font-size:14px}
  .cas-logo{width:27px;height:27px;font-size:14px}
  .cas-wallet{margin-left:auto;gap:6px}
  .cas-wallet .btn-ghost{display:none}      /* remplaces par la barre basse */
  .cas-who{display:none}
  .chip-pill{padding:6px 11px;font-size:13.5px}

  .cas-main{padding:18px 12px 24px}
  .page-head{gap:14px;margin-bottom:18px}
  .page-head p{font-size:14px}
  .panel{padding:15px 14px;border-radius:10px}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  /* Une case seule sur sa ligne prend toute la largeur, sinon la moitie
     vide laissait voir le fond gris de la grille. */
  .stat-row>.stat:last-child:nth-child(odd){grid-column:1/-1}
  .sep{margin:13px 0}

  /* La barre basse : cinq cibles larges, collees au bas de l'ecran. */
  .cas-bottom{
    display:grid;grid-template-columns:repeat(6,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(10,10,11,.97);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .cas-bottom a{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:54px;padding:8px 1px;color:var(--muted-2);
    font-family:var(--mono);font-size:10px;letter-spacing:0;text-transform:uppercase}
  .cas-bottom a .ic{width:20px;height:20px}
  .cas-bottom a.on{color:var(--text)}
  .cas-bottom a.on .ic{color:var(--accent)}
  .cas-bottom a:active{background:rgba(255,255,255,.05)}

  /* Le pied de page et le dernier bloc ne passent pas sous la barre. */
  .cas-foot{margin-bottom:calc(54px + env(safe-area-inset-bottom))}
  .cas-foot-in{padding:20px 14px;gap:14px}
  .toast-zone{right:12px;left:12px;bottom:calc(66px + env(safe-area-inset-bottom));max-width:none}

  /* L'action principale (Lancer, Encaisser, Valider...) vit dans une barre
     FIXE, juste au-dessus de la barre basse : toujours sous le pouce, ou
     qu'on soit dans la page. En position:sticky, elle restait prisonniere
     de son bloc parent et n'apparaissait qu'une fois descendu sous la
     grille — aux Mines, on ne voyait jamais la grille et le bouton ensemble.
     Les reglages (mise, bombes...) restent dans la page. */
  .act:not(.bar),.act.bar .bar-act{
    position:fixed;left:0;right:0;bottom:calc(54px + env(safe-area-inset-bottom));z-index:50;
    display:flex;align-items:center;gap:10px;width:auto;margin:0;
    padding:8px 12px;background:rgba(14,14,16,.97);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:0;border-top:1px solid var(--line-2);border-radius:0;
    box-shadow:0 -10px 24px -14px #000}
  .act:not(.bar) .btn,.act.bar .bar-act .btn{flex:1;min-height:48px}
  .act.row-between .btn{flex:none}
  .act.row-between>.mono{font-size:13px}
  /* Inventaire : la barre de vente se fixe des qu'un objet est choisi. */
  .sell-bar:has([data-sell]:not(:disabled)){
    position:fixed;left:0;right:0;bottom:calc(54px + env(safe-area-inset-bottom));z-index:50;
    flex-wrap:nowrap;gap:8px;padding:8px 12px;background:rgba(14,14,16,.97);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--line-2);box-shadow:0 -10px 24px -14px #000}
  .sell-bar:has([data-sell]:not(:disabled)) [data-sel-all]{display:none}
  .sell-bar:has([data-sell]:not(:disabled))>.mono{flex:1;min-width:0;font-size:12px}
  .sell-bar:has([data-sell]:not(:disabled)) .btn{min-height:44px}
  body:has(.sell-bar [data-sell]:not(:disabled)) .cas-foot{margin-bottom:calc(54px + 64px + env(safe-area-inset-bottom))}
  /* La place de cette barre est reservee sous le pied de page. */
  body:has(.act) .cas-foot{margin-bottom:calc(54px + 64px + env(safe-area-inset-bottom))}
  body:has(.act) .toast-zone{bottom:calc(66px + 64px + env(safe-area-inset-bottom))}

  /* Champs a 16 px : en dessous, iOS zoome tout seul a la saisie. */
  input.input{font-size:16px;padding:12px 13px}
  .btn{min-height:42px}
  .btn-sm{min-height:36px}

  /* Mines : cases plus larges, grille pleine largeur. */
  .mines-grid{gap:7px;max-width:none}
  .cell svg{width:24px;height:24px}
  .ladder{max-height:210px}

  /* Machine a sous */
  .reels{gap:5px;padding:6px}
  .reel{gap:5px}
  .sym svg{width:30px;height:30px}
  .paytable td,.paytable th{padding:5px 4px;font-size:11.5px}
  .paytable td:first-child{gap:6px;font-size:12px}
  .paytable svg{width:18px;height:18px}

  /* Crash : courbe plus basse, chiffre toujours lisible. */
  .crash-box,.crash-box.tall{height:230px}
  .crash-mult b{font-size:clamp(34px,11vw,48px)}

  /* Roulette : le tapis defile, le cylindre retrecit. */
  .wheel{width:min(255px,72vw)}
  .wheel-out{font-size:24px}
  .num{padding:11px 0}
  .outs2{grid-template-columns:repeat(3,1fr)}
  .table-felt{padding:10px}

  /* Loto : 5 x 5, des boules qu'on touche sans viser. */
  .balls{grid-template-columns:repeat(5,1fr);gap:7px}
  .ball{font-size:15px}
  .grid-line{flex-wrap:wrap;gap:8px}

  /* Caisses et objets */
  .roll-track .item{flex:0 0 132px}
  .roll,.roll-idle{height:168px}
  .roll-wrap::before,.roll-wrap::after{width:44px}
  .roll-track .item-art svg{width:46px;height:46px}
  .split,.split-lg,.trade-grid{grid-template-columns:minmax(0,1fr)}
  .trade-slots{grid-template-columns:repeat(3,minmax(0,1fr));min-height:110px;padding:9px}
  .trade-bar{align-items:stretch}
  .game-art{height:96px}
  .float-item .obj{width:38px;height:38px}
  .color-bet{grid-template-columns:28px 1fr auto 22px;gap:10px;padding:14px 12px}
  .color-odds{display:none}
  .color-bet .color-swatch{width:26px;height:26px}
  .bar .input{min-width:0;width:100%}
  .bar-hint{display:none}
  .board-head,.board-foot{gap:8px}
  /* Le bandeau ne garde que le titre et le bouton de son : il prenait un
     tiers de l'ecran a chaque visite, description et solde en double compris. */
  .hero{margin-bottom:14px}
  .hero-in{padding:12px 14px;min-height:0;flex-wrap:nowrap;align-items:center}
  .hero::after{background:linear-gradient(90deg,var(--surface) 0%,rgba(20,20,22,.8) 55%,rgba(20,20,22,.35))}
  .hero .eyebrow,.hero p{display:none}
  .hero h1{font-size:22px}
  /* La barre de commandes des jeux : la mise sur toute la largeur, les
     reglages deux par ligne, l'action en dernier. Avant, chaque champ
     prenait sa largeur naturelle et la barre faisait six lignes. */
  .bar{padding:12px 13px;gap:12px}
  .bar .field{flex:1 1 calc(50% - 6px);min-width:0}
  .bar .bar-grow{flex:1 1 100%}
  .bar .input{min-width:0;width:100%}
  .bar-sep{display:none}
  .bar-act{margin-left:0;width:100%}
  .bar-act .btn{flex:1;justify-content:center}
  .bar-hint{text-align:left;margin-top:10px}

  /* Les plateaux de jeu prennent toute la largeur utile. */
  .play,.play-lg{max-width:100%}
  .open-reels .roll-wrap:not(:only-child) .roll{height:104px}
  .open-reels .roll-wrap:not(:only-child) .roll-track .item{flex:0 0 92px}
  .buy-acts .btn-lg{flex:1 1 100%}
  .pass-head{gap:14px}
  .pass-lvl{flex-direction:row;align-items:baseline;gap:8px;width:100%;min-width:0}
  .pass-lvl b{font-size:30px}
  .pass-track{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:7px}
  .pass-step{padding:10px 5px 9px}
  .crate{padding:11px 12px;gap:11px}
  .crate-art{width:48px;height:48px}
  .crate-art .obj{width:32px;height:32px}
  .crate-n{left:44px}
  .case-buy{flex-direction:column}
  .case-buy .btn{flex:1 1 auto}
  .bar-sep{display:none}
  .verify-bar{margin:12px 12px -4px;font-size:13px}
  .verify-bar .btn{margin-left:0;width:100%}
  .invite-bar{font-size:13px}
  .invite-act{margin-left:0;width:100%}
  .invite-act .btn{flex:1}
  /* Sur telephone, le mot disparait : il ne reste que le point. */
  .col-etat{width:1%}
  .presence{font-size:0;gap:0}
  .presence::before{width:9px;height:9px}
  .reveal{grid-template-columns:1fr;text-align:center;gap:10px;padding:14px}
  .reveal-art{height:78px}
  .reveal-art svg{width:64px;height:64px}
  .reveal-tags,.reveal-acts{justify-content:center}
  .inv-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px}
  .item-art svg{width:50px;height:50px}
  .case-art .obj{width:70px;height:70px}

  /* Classement */
  .board td{padding:10px 8px;font-size:13.5px}
  .board th{padding:0 8px 8px}
  .board .rk{width:36px}

  /* Equite : les empreintes tiennent sur une colonne. */
  .kv{grid-template-columns:1fr;gap:4px 0}
  .kv dd{font-size:11.5px}

  /* Porte d'entree : dvh pour ne pas etre coupee par la barre du navigateur. */
  /* La roulette n'a plus de tapis : le cylindre peut prendre la place. */
  .wheel{width:min(300px,82vw)}
  .wheel-out{font-size:15px}
  .colors{gap:8px}
  /* Les groupes de boutons prennent toute la largeur et se partagent
     la place, plutot que de deborder. */
  .seg{width:100%}
  .seg>*{flex:1 1 auto;min-width:0;text-align:center;justify-content:center}
  .seg button,.seg .btn{padding:8px 6px;font-size:12.5px}
  .pslot{font-size:10px;padding:6px 1px}
  .plinko-slots{gap:2px}
  /* Table dense (plus de treize cases) : le chiffre se lit a la verticale,
     seule facon de faire tenir « 0.85 » dans vingt pixels. */
  .plinko-slots.dense .pslot{writing-mode:vertical-rl;transform:rotate(180deg);
    padding:5px 0;height:40px;text-overflow:clip;line-height:1}
  .plinko-slots.dense .pslot.hit{transform:rotate(180deg) translateY(3px)}
  .plinko-ball{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}

  /* Le gros lot du loto reste lisible sans deborder. */
  .jackpot{padding:20px 14px}
  .jackpot b{font-size:clamp(28px,9vw,40px)}
  .jackpot small{font-size:12.5px}

  /* Les vignettes de caisses : deux par ligne plutot qu'une colonne etiree. */
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .case-body{padding:12px 12px 13px}
  .case-body h3{font-size:14.5px}
  .case-body p{font-size:12.5px;margin:6px 0 10px}
  .case-art{padding:18px 0 12px}
  .case-art .obj{width:58px;height:58px}
  .odd .rar-name{font-size:11.5px}
  .odd .pc{width:44px;font-size:10.5px}

  .hero-side{flex:none}
  .split-lg,.split{gap:14px}
  .kv dd{font-size:11px}

  .gate{height:100dvh;padding:16px;align-items:flex-start;padding-top:12vh}
  .gate-card{padding:22px 18px}
}

/* --- Tres petits telephones --- */
@media (max-width:380px){
  .mines-grid{gap:6px}
  .inv-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:minmax(0,1fr)}
  .colors{gap:7px}
  .color-name{font-size:14px}
  .roll-track .item{flex:0 0 118px}
  .stat-row{grid-template-columns:1fr}
}

/* --- Paysage bas de plafond : on rend de la hauteur a la table --- */
@media (max-height:520px) and (orientation:landscape){
  .crash-box,.crash-box.tall{height:180px}
  .roll,.roll-idle{height:150px}
}

/* =================================================================
   CORRECTIFS D'INTERFACE — OCTOBRE 2026
   Audit mobile et ordinateur : ce qui suit corrige ce qu'il a releve.
   ================================================================= */

/* Barre du haut : le logo a gauche, le solde et les outils a droite.
   Tout etait tasse a gauche, avec un grand vide a droite. */
.cas-wallet{margin-left:auto}

/* Etiquettes secondaires (« 3 bombes », « 500 la grille », « deux sources,
   pas une »...) : elles etaient plus grosses que le titre qu'elles
   accompagnent et passaient sur deux lignes. Idem pour les lignes d'etat. */
.panel-t>.mono,.panel-t>span.muted{font-size:12.5px;line-height:1.35;text-align:right}
.board-head .mono,.board-foot .mono,p.board-foot,
.row-between>.mono.muted,.row>.mono.muted{font-size:13px}

/* Un historique vide dit qu'il est vide, au lieu de laisser un trou. */
.hist-empty{font-size:13px}

/* Boutique : le panneau d'ouverture est cache au repos, son separateur aussi. */
[data-zone][hidden]+.sep{display:none}

/* Tuiles d'objet : les pastilles d'usure et de prix ne mordent plus sur le
   dessin, et le nom tient sur deux lignes au lieu de finir en « ... ». */
.item-art{padding-top:32px}
.item-obj{white-space:normal;text-overflow:clip;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;min-height:2.5em}

/* Mythique : un objet a plusieurs millions ressemblait a un Commun gris (sa
   couleur est presque blanche). Il a desormais son propre habit, irise,
   que rien d'autre ne porte. La CLE de rarete ne change pas. */
.item.rar-mythique{border-bottom:1px solid var(--line);
  background:
    linear-gradient(90deg,#ff7ad9,#8fb4ff,#6ff2cf,#ffd36a) left bottom/100% 3px no-repeat,
    linear-gradient(160deg,rgba(255,122,217,.22),rgba(143,180,255,.18) 45%,rgba(111,242,207,.14) 75%,rgba(255,211,106,.14)),
    #0f1012}
.item.rar-mythique .item-val{color:#fff;border-color:rgba(255,255,255,.3)}

/* Plinko : le « x » s'efface quand la table est dense. */
.pslot i{font-style:normal;opacity:.65}
.plinko-slots.dense .pslot i{display:none}
.plinko-slots.dense .pslot{letter-spacing:-.03em;text-overflow:clip}

/* Pass de combat : une fenetre autour du niveau en cours, le reste a deplier. */
.pass-track:not(.all) .pass-step.far{display:none}
.pass-step.next{opacity:1;border-color:var(--accent);border-style:dashed}
.pass-more{margin-top:12px}

/* Echange : les joueurs en ligne, a toucher pour les inviter. */
.online-list{display:flex;flex-wrap:wrap;gap:8px}
.online-pick{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 13px;
  border:1px solid var(--line-2);border-radius:99px;background:var(--surface-2);
  cursor:pointer;font-size:13.5px;transition:border-color .15s}
.online-pick b{font-weight:600;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-pick .ic{width:15px;height:15px;color:var(--muted)}
.online-pick:hover{border-color:var(--win)}
.online-pick .presence{font-size:0;gap:0}
.online-none{font-size:13.5px}
/* Le bouton « Fermer » arme : le second appui ferme pour de bon. */
.btn.armed{border-color:var(--lose);color:var(--lose)}

/* Listes deroulantes : le menu natif suit le theme sombre. */
select.input{color-scheme:dark;cursor:pointer}

/* Administration : le journal des dons. */
.admin-log td:last-child{color:var(--win)}
.panel-t>.ic{color:var(--muted)}

/* Navigation au clavier : un contour net, absent jusqu'ici. Il n'apparait
   pas au clic de souris ni au toucher, seulement au clavier. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.input:focus-visible{outline:none}

/* Ecrans tactiles : pas d'effet de survol « colle ». Apres un appui, la
   case ou la carte restait soulevee comme si le doigt etait encore dessus. */
@media (hover:none){
  .cell:hover:not(:disabled){transform:none;background:var(--surface-2)}
  .color-bet:hover{transform:none}
  .color-bet:not(.on):hover{border-color:var(--line-2)}
  .num:hover{transform:none}
  .game-card:hover{transform:none;border-color:var(--line)}
  .game-card:hover .game-go{background:none;border-color:var(--line-2);color:var(--muted)}
  .cas-menu-grid a:hover{transform:none}
  .case-card:hover{border-color:var(--line)}
}

/* Ordinateur : les plateaux se dimensionnent sur la HAUTEUR de l'ecran,
   pour que le jeu et ses commandes tiennent ensemble sans defiler. */
@media (min-width:681px){
  .mines-grid{max-width:clamp(300px,calc(100vh - 430px),460px)}
  .crash-box.tall{height:clamp(240px,calc(100vh - 500px),360px)}
  .play-lg>.reels{max-width:clamp(420px,calc((100vh - 420px) * 1.5),920px);margin-inline:auto}
  .plinko-box{max-width:clamp(320px,calc((100vh - 434px) * 1.25),560px);margin-inline:auto}
}

/* Ordinateur large : le plateau a gauche, les commandes dans une colonne a
   droite qui suit le defilement. (La machine a sous se vise par
   [data-symbols] : la rangee de cases du plinko porte aussi data-slots.) Empilees sous le plateau, la mise et le
   bouton Lancer tombaient sous le bord de l'ecran des 860 px de haut. */
@media (min-width:1000px){
  [data-mines],[data-crash],[data-slots][data-symbols],[data-plinko],[data-blackjack]{
    display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:24px;align-items:start}
  [data-mines]>*,[data-crash]>*,[data-slots][data-symbols]>*,[data-plinko]>*,[data-blackjack]>*{grid-column:1/-1}
  /* Le second bloc s'efface : ses enfants deviennent des cases de la grille. */
  [data-mines]>.play-lg:nth-child(2),[data-crash]>.play-lg:nth-child(2),
  [data-slots][data-symbols]>.play-lg:nth-child(2),[data-plinko]>.play-lg:nth-child(2),[data-blackjack]>.play-lg:nth-child(2){display:contents}
  [data-mines]>.play-lg:nth-child(2)>*,[data-crash]>.play-lg:nth-child(2)>*,
  [data-slots][data-symbols]>.play-lg:nth-child(2)>*,[data-plinko]>.play-lg:nth-child(2)>*,[data-blackjack]>.play-lg:nth-child(2)>*{grid-column:1/-1}
  /* Le plateau, colonne de gauche. */
  [data-mines]>:first-child,[data-crash]>:first-child,
  [data-slots][data-symbols]>:first-child,[data-plinko]>:first-child,[data-blackjack]>:first-child{grid-column:1;grid-row:1 / span 2;width:100%}
  /* Les commandes, colonne de droite, en pile. */
  [data-mines] .bar.act,[data-crash] .bar.act,[data-slots][data-symbols] .bar.act,[data-plinko] .bar.act,[data-blackjack] .bar.act{
    grid-column:2;grid-row:1;margin-top:0;position:sticky;top:calc(var(--h-top) + 16px);
    flex-direction:column;align-items:stretch;gap:14px}
  [data-mines] .bar.act .field,[data-crash] .bar.act .field,
  [data-slots][data-symbols] .bar.act .field,[data-plinko] .bar.act .field,[data-blackjack] .bar.act .field{width:100%}
  [data-mines] .bar.act .seg,[data-crash] .bar.act .seg,
  [data-slots][data-symbols] .bar.act .seg,[data-plinko] .bar.act .seg,[data-blackjack] .bar.act .seg{display:flex;width:100%}
  [data-mines] .bar.act .seg>*,[data-crash] .bar.act .seg>*,
  [data-slots][data-symbols] .bar.act .seg>*,[data-plinko] .bar.act .seg>*,[data-blackjack] .bar.act .seg>*{flex:1 1 auto;text-align:center;justify-content:center}
  .bar.act .bar-sep{display:none}
  .bar.act .bar-act{margin-left:0;width:100%}
  .bar.act .bar-act .btn{width:100%}
  .bar-hint{grid-column:2 !important;grid-row:2;text-align:left;margin-top:10px}
  /* La description du bandeau tient sur deux lignes au lieu de trois. */
  .hero p{max-width:78ch}
}

@media (max-width:680px){
  /* Classement : quatre onglets en deux colonnes egales. */
  .seg-tabs{display:grid;grid-template-columns:1fr 1fr}
}

/* =================================================================
   NOUVEAUTES DE JEU — OCTOBRE 2026
   Fil en direct, celebrations, blackjack, duels, objectifs, atelier,
   profil public, evenements, mode compact.
   ================================================================= */

/* ---------- Fil en direct (bandeau defilant) ---------- */
.ticker{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;
  background:var(--bg-2);border-bottom:1px solid var(--line);
  font-size:12.5px;overflow:hidden;white-space:nowrap}
.ticker-jp,.ticker-ev{display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:3px 10px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface)}
.ticker-jp{color:var(--r-relique);border-color:rgba(224,163,46,.45)}
.ticker-jp .ic{width:14px;height:14px}
.ticker-jp b{font-family:var(--mono);color:var(--text)}
.ticker-ev{color:var(--accent-2);border-color:rgba(255,90,31,.4)}
.ticker-ev b{font-family:var(--mono)}
.ticker-rail{flex:1;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker-track{display:inline-flex;gap:34px;animation:tickerRun 60s linear infinite;padding-left:12px}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tickerRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{color:var(--muted)}
.tk b{color:var(--text);font-weight:600}
.tk.rar-relique{color:var(--r-relique)}
.tk.rar-mythique{color:#d9c8ff}
.tk-win{color:var(--win)}
.tk-jackpot{color:var(--r-relique)}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .ticker-rail{overflow-x:auto;scrollbar-width:none}
  .ticker-rail::-webkit-scrollbar{display:none}
}

/* ---------- Celebration d'un gros gain ---------- */
.celebrate{position:fixed;inset:0;z-index:130;display:grid;place-items:center;pointer-events:none;
  animation:celebIn .25s ease-out}
.celebrate.out{opacity:0;transition:opacity .45s}
@keyframes celebIn{from{opacity:0}to{opacity:1}}
.celebrate-ring{position:absolute;width:260px;height:260px;border-radius:50%;
  border:3px solid var(--win);opacity:0;animation:celebRing 1.4s ease-out .05s 2}
.celebrate.jackpot .celebrate-ring{border-color:var(--r-relique)}
@keyframes celebRing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.celebrate-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:22px 34px;border-radius:16px;background:rgba(14,14,16,.94);
  border:1px solid rgba(57,184,119,.6);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 6px rgba(57,184,119,.12);
  animation:celebPop .5s cubic-bezier(.2,1.4,.4,1)}
.celebrate.jackpot .celebrate-card{border-color:rgba(224,163,46,.7);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 6px rgba(224,163,46,.14)}
@keyframes celebPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.celebrate-t{font-family:var(--mono);font-size:16px;letter-spacing:.08em;color:var(--win)}
.celebrate.jackpot .celebrate-t{color:var(--r-relique)}
.celebrate-n{font-family:var(--mono);font-size:clamp(36px,9vw,58px);font-weight:700;line-height:1.05}
.celebrate-card small{color:var(--muted);font-size:13px}
.celebrate-bit{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:2px;
  background:var(--win);opacity:0;animation:celebBit 1.1s ease-out forwards}
.celebrate-bit:nth-child(3n){background:var(--r-relique)}
.celebrate-bit:nth-child(3n+1){background:var(--accent);width:6px;height:12px}
@keyframes celebBit{0%{transform:translate(-50%,-50%) scale(.4);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(220deg) scale(1);opacity:0}}

/* ---------- Ouverture d'un Mythique ---------- */
.roll-wrap.mythic{border-color:transparent;
  background:linear-gradient(#0b0b0d,#0b0b0d) padding-box,
             linear-gradient(90deg,#ff7ad9,#8fb4ff,#6ff2cf,#ffd36a,#ff7ad9) border-box;
  border:2px solid transparent;animation:mythicGlow 2.4s ease-out}
@keyframes mythicGlow{0%{box-shadow:0 0 0 0 rgba(230,236,255,.0)}30%{box-shadow:0 0 0 10px rgba(200,190,255,.25),0 0 60px rgba(160,180,255,.45)}100%{box-shadow:0 0 0 0 rgba(230,236,255,0)}}

/* ---------- Blackjack ---------- */
body[data-page="blackjack"]{--game:#c2418e;--game-soft:rgba(194,65,142,.15)}
.g-blackjack{--g:#c2418e;--gs:rgba(194,65,142,.14)}
.bj-table{display:flex;flex-direction:column;gap:14px;padding:18px 16px;min-height:330px;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:radial-gradient(ellipse at 50% 120%,rgba(194,65,142,.12),transparent 60%),var(--bg-2)}
.bj-side{display:flex;flex-direction:column;gap:10px}
.bj-label{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--muted)}
.bj-label b{font-size:17px;color:var(--text)}
.bj-sep{height:1px;background:var(--line)}
.bj-hand{display:flex;flex-wrap:wrap;gap:8px;min-height:112px}
.card{position:relative;width:76px;height:108px;border-radius:9px;background:#f4f2ee;color:#16161a;
  border:1px solid rgba(0,0,0,.2);box-shadow:0 6px 16px rgba(0,0,0,.4);
  display:grid;place-items:center;animation:cardIn .32s cubic-bezier(.2,.8,.3,1) both}
.card.red{color:#c3313d}
.card-r{position:absolute;top:6px;left:8px;font-family:var(--mono);font-weight:700;font-size:17px;line-height:1}
.card-r2{top:auto;left:auto;bottom:6px;right:8px;transform:rotate(180deg)}
.card-s{width:30px;height:30px;fill:currentColor}
.card.back{background:repeating-linear-gradient(45deg,#2a1730 0 6px,#341c3b 6px 12px);
  border-color:rgba(194,65,142,.5)}
@keyframes cardIn{from{transform:translateY(-18px) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
.chip-pill.win{border-color:var(--win);color:var(--win)}
.chip-pill.lose{border-color:var(--lose);color:var(--lose)}
.rules{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--muted)}
.rules b{color:var(--text)}
.bj-acts{flex-wrap:wrap}

/* ---------- Rouleaux : une ligne de nom suffit, la place est comptee ---------- */
.roll-track .item-art{padding-top:26px}
.roll-track .item-obj{-webkit-line-clamp:1;min-height:0}

/* ---------- Duels ---------- */
.duel-reel-name{font-size:12.5px;color:var(--muted);margin-bottom:-4px}
.duel-kind{width:100%;margin-bottom:14px}
.duel-kind button{flex:1}
.duel-vs{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 14px;flex-wrap:wrap}
.duel-name{font-weight:700;font-size:17px}
.duel-x{color:var(--muted-2);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.coin-box{display:grid;place-items:center;padding:12px 0 18px;perspective:800px}
.coin{position:relative;width:150px;height:150px;transform-style:preserve-3d}
.coin-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  font-family:var(--mono);font-weight:700;font-size:22px;letter-spacing:.08em;text-transform:uppercase}
.coin-pile{background:radial-gradient(circle at 35% 30%,#ffd98a,#c8952a 70%);color:#3a2604;
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.18),inset 0 0 0 9px rgba(0,0,0,.18)}
.coin-faceb{background:radial-gradient(circle at 35% 30%,#d9dde8,#8b93ad 70%);color:#1b1e28;transform:rotateY(180deg);
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.2),inset 0 0 0 9px rgba(0,0,0,.18)}
.duel-reels{margin:6px 0 12px}
.duel-result{margin-top:12px;padding:12px 14px;border-radius:var(--radius);text-align:center;font-weight:600;
  border:1px solid var(--line-2);background:var(--surface-2)}
.duel-result.win{border-color:var(--win);color:var(--win)}
.duel-result.lose{border-color:rgba(208,65,78,.5);color:var(--lose)}
.duel-proof{margin-top:12px}
.duel-inv{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.duel-inv:last-child{border-bottom:none}
.duel-hist a.grid-line:hover{color:var(--text)}

/* ---------- Objectifs ---------- */
.missions{display:flex;flex-direction:column;gap:10px}
.mission{display:flex;align-items:center;gap:13px;padding:12px 13px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface-2)}
.mission.done{border-color:rgba(57,184,119,.45)}
.mission-ic{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:50%;
  background:var(--bg-2);color:var(--accent)}
.mission.done .mission-ic{color:var(--win);background:rgba(57,184,119,.12)}
.mission-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mission-body b{font-size:14.5px}
.mission-body .pass-bar{height:7px;margin:5px 0 3px}
.mission.done .pass-bar>span{background:var(--win)}
.mission-body .mono{font-size:12px}
.mission-bonus{margin-top:12px}
.mission-bonus.win{color:var(--win)}
.code-form{display:flex;gap:8px}
.code-form .input{flex:1;min-width:0}

.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.badge-a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;text-align:center;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);opacity:.45}
.badge-a.on{opacity:1;border-color:rgba(224,163,46,.45);
  background:linear-gradient(180deg,rgba(224,163,46,.1),transparent),var(--surface-2)}
.badge-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--bg-2);color:var(--muted)}
.badge-a.on .badge-ic{color:var(--r-relique)}
.badge-a b{font-size:13.5px}
.badge-a small{font-size:11.5px;color:var(--muted);line-height:1.35}
.badges-sm{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}

.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.albums:not(.all) .album.far{display:none}
.album{display:flex;align-items:center;gap:12px;padding:11px 12px;text-align:left;width:100%;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);font:inherit;color:inherit}
button.album{cursor:pointer}
button.album:hover{border-color:var(--line-2)}
.album.full{border-color:rgba(224,163,46,.55)}
.album-art{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:10px;background:var(--bg-2)}
.album-art .obj{width:34px;height:34px}
.album-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.album-body b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.album-body .pass-bar{height:6px;margin:4px 0 2px}
.album-body small{font-size:11.5px}
.albums-sm{grid-template-columns:1fr}
.album-detail{margin-bottom:16px;padding:14px;border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--bg-2)}
.album-detail h3{font-size:16px}
.album-grid{margin-top:12px}
.album-grid .item-wear{display:none}
.item.missing{filter:grayscale(1) brightness(.55);opacity:.55}

/* ---------- Atelier ---------- */
.seg-rar{width:100%}
.seg-rar button{display:inline-flex;align-items:center;gap:6px;flex:1 1 auto;justify-content:center}
.seg-rar .rar-dot{background:var(--r)}
.atelier-head{align-items:center}
.atelier-head p{font-size:12.5px;margin-top:3px}
.atelier-result{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px;padding:16px;
  border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--surface-2);text-align:center}
.atelier-result .item{width:min(200px,70%)}
.atelier-result p{font-size:12.5px}
.atelier-empty{grid-column:1/-1}

/* ---------- Profil public ---------- */
.showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.showcase .item-art svg{width:74px;height:74px}

/* ---------- Accueil : evenements et acces rapides ---------- */
.events{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.event-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 15px;
  border:1px solid rgba(255,90,31,.4);border-radius:var(--radius);
  background:linear-gradient(90deg,var(--accent-soft),transparent 70%),var(--surface);font-size:14px}
.event-card .ic{color:var(--accent)}
.event-card>span:nth-child(2){flex:1;min-width:200px}
.event-card .mono{color:var(--accent-2);font-size:13px}
.quick{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:12px;margin-bottom:18px}
.quick-card{display:flex;flex-direction:column;gap:4px;padding:15px 16px;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--surface);transition:border-color .15s}
a.quick-card:hover{border-color:var(--line-2)}
.quick-card b{font-size:15px}
.quick-card small{font-size:12.5px;line-height:1.45}
.quick-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg-2);color:var(--accent);margin-bottom:4px}
.quick-jp{border-color:rgba(224,163,46,.45);background:linear-gradient(160deg,rgba(224,163,46,.12),transparent 70%),var(--surface)}
.quick-jp b{font-size:clamp(24px,3vw,32px);color:var(--r-relique)}

/* ---------- Boutique : promo ---------- */
.price-old{margin-left:8px;font-size:12.5px;color:var(--muted-2);font-weight:500}

/* ---------- Crash : tournoi ---------- */
.tournament{border-color:rgba(125,90,210,.5)}

/* ---------- Classement par jeu ---------- */
.seg-games{width:100%}
.seg-games>*{flex:1 1 auto;justify-content:center}

/* ---------- Administration ---------- */
.field-t{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
[data-ev-prizes]{margin-bottom:14px}
.admin-list .grid-line{font-size:13.5px}

/* ---------- Mode compact (ordinateur) ---------- */
.cas-compact{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-bottom:9px;background:none;cursor:pointer;font:inherit;font-size:13px}
@media (min-width:681px){
  body.compact .cas-main{padding-top:16px;padding-bottom:30px}
  body.compact .hero{margin-bottom:12px}
  body.compact .hero-in{padding:12px 18px}
  body.compact .hero p,body.compact .hero .eyebrow,
  body.compact .page-head p,body.compact .notice,body.compact .bar-hint,
  body.compact .panel-note{display:none}
  body.compact .page-head{margin-bottom:12px}
  body.compact .sep{margin:10px 0}
  body.compact .panel{padding:14px 16px}
  body.compact .hero h1{font-size:24px}
}

/* ---------- Telephone ---------- */
@media (max-width:680px){
  .cas-compact{display:none}
  .ticker{height:30px;font-size:12px;gap:8px;padding:0 10px}
  .ticker-ev{display:none}
  .quick{grid-template-columns:1fr 1fr;gap:8px}
  .quick-jp{grid-column:1/-1}
  .quick-card{padding:12px 13px}
  .bj-table{min-height:280px;padding:14px 12px}
  .bj-hand{min-height:92px;gap:6px}
  .card{width:62px;height:88px}
  .card-r{font-size:15px}
  .card-s{width:24px;height:24px}
  .coin{width:120px;height:120px}
  .badges{grid-template-columns:repeat(2,1fr);gap:8px}
  .albums{grid-template-columns:1fr}
  .showcase{grid-template-columns:repeat(2,1fr);gap:9px}
  .atelier-head{flex-direction:column;align-items:stretch}
  .duel-name{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .wheel-spin{transition:none}
}