/* ===========================================================
   LA SALLE DE JEUX — kit graphique commun (chargé par tous les jeux)
   Cible les classes partagées (.btn .stat header .overlay .card2 …)
   + polit les pièces de jeu (.die .domino .cell .pc .fall .tile).
   100% cosmétique : n'altère aucune dimension/position posée en JS.
   =========================================================== */

/* --- Rendu texte plus net + chiffres alignés --- */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:
  radial-gradient(120% 90% at 50% -10%, var(--bg2), var(--bg1) 60%, #000 140%) !important;}
.stat, .stat b, .grand, #time, #best, #score, #streak, #total, #moves, #found, #bone, #lives{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* --- Ambiance de fond : aurore douce + vignette + grain --- */
body::before{content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 44% at 22% 18%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%),
    radial-gradient(42% 48% at 82% 78%, color-mix(in srgb, var(--accent2, var(--accent)) 24%, transparent), transparent 72%);
  filter:blur(38px);opacity:.5;animation:kit-aurora 22s ease-in-out infinite alternate;}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity:.035;mix-blend-mode:overlay;
  box-shadow:inset 0 0 200px 40px rgba(0,0,0,.55);}
@keyframes kit-aurora{0%{transform:translate3d(-3%,-2%,0) scale(1)}100%{transform:translate3d(4%,3%,0) scale(1.12)}}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}

/* --- En-tête glassy --- */
header{backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 8%, transparent), transparent) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.05), 0 6px 20px -12px rgba(0,0,0,.6);}
.title{letter-spacing:.2px;text-shadow:0 1px 8px color-mix(in srgb, var(--accent) 30%, transparent);}

/* --- Chips de stats : verre + reflet --- */
.stat{background:linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) !important;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px -2px rgba(0,0,0,.5);
  border-radius:999px;}

/* --- Boutons : profondeur, reflet, lift, focus --- */
button.btn, select.btn{position:relative;overflow:hidden;
  background:linear-gradient(170deg, rgba(255,255,255,.15), rgba(255,255,255,.05)) !important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px -3px rgba(0,0,0,.55);
  transition:transform .12s cubic-bezier(.2,.8,.3,1.4), box-shadow .15s, filter .15s, background .15s;}
button.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
button.btn:active{transform:translateY(1px) scale(.97)}
button.btn:focus-visible, select.btn:focus-visible{outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.18);}
button.btn.primary{
  background:linear-gradient(170deg, color-mix(in srgb, var(--accent) 86%, #fff 14%), var(--accent)) !important;
  border:1px solid color-mix(in srgb, var(--accent) 60%, #000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent);
  color:#04120c !important;}
button.btn.primary:hover{filter:brightness(1.06) saturate(1.1)}

/* Ondulation (ripple) injectée par le JS */
.kit-ripple{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  pointer-events:none;animation:kit-rip .55s ease-out forwards;mix-blend-mode:screen}
@keyframes kit-rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* --- Overlays / cartes de fin : entrée animée + halo --- */
.overlay{background:rgba(6,16,13,.62) !important;
  backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);}
.overlay.on .card2{animation:kit-pop .38s cubic-bezier(.2,.9,.3,1.35)}
.card2{position:relative;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12) !important;}
.card2::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 60%, transparent), transparent 55%, color-mix(in srgb, var(--accent2, var(--accent)) 45%, transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}
.card2 .big{filter:drop-shadow(0 4px 12px color-mix(in srgb, var(--accent) 45%, transparent));animation:kit-bounce .6s .1s both}
@keyframes kit-pop{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:none}}
@keyframes kit-bounce{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

/* --- Barres de défilement fines et thémées --- */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb, var(--accent) 45%, transparent) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--accent) 45%, transparent);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* ===========================================================
   POLISSAGE DES PIÈCES DE JEU (ombres/reflets/gradients seulement)
   =========================================================== */
/* Yatzé — dés */
.die{background:linear-gradient(160deg, #fff, var(--face) 70%, #eadfce) !important;
  box-shadow:0 4px 8px -1px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.6) inset, 0 -3px 6px rgba(0,0,0,.12) inset !important;}
.die.held{box-shadow:0 0 0 3px var(--accent2), 0 6px 12px -2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.6) inset !important;}
/* Dominos */
.domino{background:linear-gradient(160deg,#fff,var(--face) 75%) !important;
  box-shadow:0 3px 7px -1px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.6) inset !important;}
.half{background:radial-gradient(120% 120% at 50% 0%, #fff, #f3ece0) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05), inset 0 2px 4px rgba(0,0,0,.06) !important;}
/* Puzzle — pièces */
.pc{box-shadow:1px 2px 6px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.2) inset !important;}
/* Différences — cases */
.cell{background:linear-gradient(160deg,#fff,var(--face)) !important;
  box-shadow:0 2px 5px -1px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.14) inset !important;}
.cell:hover{filter:brightness(1.04)}
/* Arcade — icônes qui tombent (halo doux + rebond d'apparition) */
.fall img{filter:drop-shadow(0 4px 7px rgba(0,0,0,.4)) !important}
.fall{animation:kit-drop .25s ease-out}
@keyframes kit-drop{from{transform:scale(.5);opacity:0}}

/* Home — tuiles du lanceur : reflet + lift plus marqué */
a.tile{position:relative;overflow:hidden;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06)}
a.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.10), transparent 40%);opacity:.7}
a.tile:hover .ico img{transform:translateY(-3px) scale(1.06);transition:transform .2s}
a.tile .ico img{transition:transform .2s}