/* casino-ui.css — 01/10/2026 — l'habillage COMMUN des tables du casino (Hirondors de jeu) : jetons, feutre, barre
   d'actions toujours visible, boutons. Une seule source : chaque table la charge au lieu de recopier ces règles
   (roulette, blackjack, puis les autres tables au fil de leur refonte). */

/* le feutre : vert profond, grain par bruit SVG, liseré doré */
.feutre-vert{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E"),
  radial-gradient(130% 90% at 50% 0%,#16904f 0%,#0c6a37 55%,#07461f 100%)}
/* le même feutre dans une autre couleur : --feutre = le dégradé (ex. bordeaux du baccara) */
.feutre{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E"),
  var(--feutre,radial-gradient(130% 90% at 50% 0%,#16904f 0%,#0c6a37 55%,#07461f 100%))}
/* le liseré des tables : filet doré, bord en bois, filet doré */
.bord-table{box-shadow:inset 0 0 0 3px rgba(212,175,55,.8),inset 0 0 0 9px #4a2511,inset 0 0 0 11px rgba(212,175,55,.5),inset 0 0 50px rgba(0,0,0,.45),0 10px 26px rgba(0,0,0,.5)}

/* les jetons : bord rayé, cœur uni, liseré pointillé — comme de vrais jetons de casino. --c = la couleur */
.chip{--c:#dc2626;position:relative;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;
  background:repeating-conic-gradient(#f8fafc 0 9deg,var(--c) 9deg 45deg);box-shadow:0 3px 0 rgba(0,0,0,.35),0 4px 8px rgba(0,0,0,.35)}
.chip::before{content:"";position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 70%);border:1.5px dashed rgba(255,255,255,.85)}
.chip>i{position:relative;font-style:normal;text-shadow:0 1px 1px rgba(0,0,0,.6)}
.chip.pile{box-shadow:0 3px 0 rgba(0,0,0,.35),0 -3px 0 color-mix(in srgb,var(--c) 70%,#000),0 -6px 0 rgba(255,255,255,.6),0 8px 12px rgba(0,0,0,.45)}
.jetons{display:flex;gap:10px;justify-content:center;align-items:center}
.jt{width:46px;height:46px;font-size:.85rem;border:0;cursor:pointer;transition:transform .12s}
.jt.sel{transform:translateY(-6px) scale(1.08);box-shadow:0 0 0 3px #fbbf24,0 8px 14px rgba(0,0,0,.5)}
.jetons.off{opacity:.35;pointer-events:none}   /* pendant un coup : la mise ne se change pas, la barre ne saute pas */

/* la barre du bas : message, jetons, actions — toujours visible, même quand on fait défiler la table */
.barre{position:sticky;bottom:0;z-index:20;width:calc(100% + 16px);margin:6px -8px 0;padding:10px 10px calc(76px + env(safe-area-inset-bottom));
  background:var(--barre,linear-gradient(180deg,#0a3a22,#05200f));border-top:1px solid rgba(212,175,55,.45);border-radius:18px 18px 0 0;box-shadow:0 -10px 22px rgba(0,0,0,.5);
  display:flex;flex-direction:column;align-items:center;gap:8px}

/* les boutons d'action */
.act{font:inherit;font-weight:900;font-size:.92rem;border:0;border-radius:14px;padding:11px 16px;min-width:76px;cursor:pointer;color:#fff;box-shadow:0 4px 0 rgba(0,0,0,.35),0 6px 12px rgba(0,0,0,.35)}
.act:active{transform:translateY(2px)}.act:disabled{opacity:.35;cursor:default}
.act.vert{background:linear-gradient(180deg,#22c55e,#15803d)}.act.rouge{background:linear-gradient(180deg,#ef4444,#991b1b)}
.act.or{background:linear-gradient(180deg,#fde68a,#d97706);color:#3b2506}.act.bleu{background:linear-gradient(180deg,#60a5fa,#1d4ed8)}
.act.neutre{background:rgba(255,255,255,.14)}
.act.grand,.lancer{font:inherit;font-weight:900;font-size:1rem;letter-spacing:.06em;padding:12px 26px;border-radius:999px;border:0;cursor:pointer;color:#3b2506;
  background:linear-gradient(180deg,#fde68a,#f59e0b 60%,#b45309);box-shadow:0 4px 0 #78350f,0 8px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.7)}
.act.grand:active,.lancer:active{transform:translateY(2px);box-shadow:0 2px 0 #78350f,0 4px 10px rgba(0,0,0,.45)}
.act.grand:disabled,.lancer:disabled{filter:grayscale(.7) brightness(.8);cursor:default;opacity:1}

/* le bandeau de résultat qui « tombe » sur la table */
.bandeau-res{position:absolute;left:50%;transform:translate(-50%,-50%) rotate(-4deg);padding:8px 22px;border-radius:12px;font-weight:900;font-size:1.5rem;letter-spacing:.04em;
  color:#3b2506;background:linear-gradient(180deg,#fde68a,#f59e0b);box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 0 3px #fff;animation:casino-pop .5s cubic-bezier(.2,1.6,.4,1) both;white-space:nowrap;z-index:5;pointer-events:none}
.bandeau-res.ko{background:linear-gradient(180deg,#fca5a5,#b91c1c);color:#fff}.bandeau-res.eg{background:linear-gradient(180deg,#e5e7eb,#9ca3af)}
@keyframes casino-pop{from{transform:translate(-50%,-50%) rotate(-4deg) scale(.3);opacity:0}}

/* la carte à jouer du casino (classe .cc, pour ne pas heurter les .carte propres à chaque page) : coins, figure
   encadrée, dos travaillé. Taille = --w (la hauteur suit). Marquage :
   <div class="cc r|n [fig]"><span class="coin h">10<i>♥</i></span><span class="coin b">…</span><span class="centre">♥</span></div>
   .neuve = arrive de --dx/--dy (le sabot, le haut de l'écran…) ; .retourne = se retourne sur place. */
.cc{--w:60px;position:relative;flex:none;width:var(--w);height:calc(var(--w) * 1.43);border-radius:calc(var(--w) * .13);font-family:Georgia,"Times New Roman",serif;font-weight:700;line-height:1;
  font-size:calc(var(--w) * .26);background:linear-gradient(160deg,#ffffff,#f4efe4);box-shadow:0 1px 0 #d9cbb0,0 4px 10px rgba(0,0,0,.45);transform-style:preserve-3d}
.cc .coin{position:absolute;display:flex;flex-direction:column;align-items:center;font-size:1em}
.cc .coin i{font-style:normal;font-size:.85em;margin-top:1px}
.cc .coin.h{left:8%;top:5%}.cc .coin.b{right:8%;bottom:5%;transform:rotate(180deg)}
.cc .centre{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.1em}
.cc.fig .centre{font-size:1.3em;font-weight:900;border:1.5px solid currentColor;inset:21% 22%;border-radius:4px;opacity:.85}
.cc.r{color:#c0262d}.cc.n{color:#111827}
.cc.dos{background:radial-gradient(circle at 50% 50%,#b91c1c 0 30%,transparent 31%) center/14px 14px,
  repeating-linear-gradient(45deg,#7f1d1d 0 5px,#991b1b 5px 10px);box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #d4af37,0 4px 10px rgba(0,0,0,.45)}
.cc.neuve{animation:casino-donne .42s cubic-bezier(.2,.8,.25,1) both}
@keyframes casino-donne{from{transform:translate(var(--dx,0px),var(--dy,-160px)) rotate(var(--dr,0deg));opacity:0}to{transform:none;opacity:1}}
.cc.retourne{animation:casino-retourne .45s ease-out both}
@keyframes casino-retourne{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}

/* LES RÉUSSITES (solitaire, freecell, spider…) : elles placent leurs cartes .cd au pixel près — on ne touche qu'à
   l'aspect, activé par <body class="reussite"> : feutre texturé, face et dos COMMUNS (le même dos que .cc), emplacements
   vides lisibles, fin de partie dorée. */
.reussite #wrap{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 70px rgba(0,0,0,.35)}
.reussite .cd{background:linear-gradient(160deg,#ffffff,#f4efe4);border:1px solid rgba(0,0,0,.1);box-shadow:0 1px 0 #d9cbb0,0 3px 7px rgba(0,0,0,.38)}
.reussite .cd .corner .r{font-family:Georgia,"Times New Roman",serif}
.reussite .cd.down,.reussite .cd.dos{background:radial-gradient(circle at 50% 50%,#b91c1c 0 30%,transparent 31%) center/14px 14px,repeating-linear-gradient(45deg,#7f1d1d 0 5px,#991b1b 5px 10px);
  border:0;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #d4af37,0 2px 5px rgba(0,0,0,.4)}
.reussite .slot{background:rgba(0,0,0,.14);border-color:rgba(255,255,255,.26)}
.reussite .card2{background:radial-gradient(120% 90% at 50% 0%,#17924f,#0a4a27 70%,#05301a);border:2px solid #d4af37;
  box-shadow:0 0 0 6px rgba(0,0,0,.25),0 20px 40px rgba(0,0,0,.6);animation:casino-fin .45s cubic-bezier(.2,1.5,.4,1) both}
.reussite .card2 h2{font-family:Georgia,"Times New Roman",serif;color:#fde68a}
@keyframes casino-fin{from{transform:scale(.7);opacity:0}}