/* =================================================================
   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}

/* =============== 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}
.odd .bar{flex:1;height:4px;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)}
details[open] summary::before{content:"‘2"}
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:26px 26px 24px;min-height:152px}
.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). */
.strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.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:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;margin:14px auto 0;max-width:var(--max);padding:11px 15px;
  border:1px solid var(--win);border-radius:var(--radius);
  background:var(--surface-2);font-size:14px}
.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)}
  .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:9px;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 colle juste au-dessus de la barre basse. */
  .act{
    position:sticky;bottom:calc(62px + env(safe-area-inset-bottom));z-index:30;
    background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);
    padding:10px;margin:14px -2px 2px;
    box-shadow:0 -12px 26px -16px #000;
  }
  .act .btn{min-height:48px}

  /* 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}
  .hero-in{padding:18px 16px 16px;min-height:120px}
  .hero::after{background:linear-gradient(180deg,rgba(20,20,22,.6),rgba(20,20,22,.92) 60%)}
  .hero p{font-size:13.5px}
  /* 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{margin:12px 12px 0;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:9px;padding:6px 1px}
  .plinko-slots{gap:2px}
  .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{width:100%;justify-content:space-between}
  .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){
  .cas-top{position:static}
  .crash-box{height:180px}
  .roll,.roll-idle{height:150px}
}

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