/* ==========================================================================
   LANCEUR DE DÉS — /yams/lanceur-de-des.html et /yams/en/dice-roller.html
   Mis en ligne le 23/10/2026 d'après la maquette validée. Complète legal.css et
   yams.css. Une feuille À PART (et non un bloc <style>) : la page du guide refuse les
   styles écrits dans le document (style-src 'self').
   ⚠️ Servie par le service worker RÉSERVE D'ABORD : la modifier impose de changer
   VERSION dans service-worker.js, sinon les visiteurs gardent l'ancienne.
   ========================================================================== */

/* Le grain des matières : un bruit fin, dessiné une fois, posé par-dessus les dégradés. */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-gros:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap.ld-wrap{padding-top:10px}
.ld-wrap header{margin-bottom:6px}
.ld-h1{font-size:1.35rem; margin:0 0 8px}

/* ---------- la zone de jeu : le plateau et la réserve ----------
   La hauteur suit l'écran : le plateau, le compteur et les boutons tiennent ensemble
   sans défiler. Le texte pour Google vient APRÈS, on y descend si on veut. */
.ld-box{display:flex; gap:8px; height:clamp(290px, calc(100svh - 268px), 560px)}
/* Mode contraste élevé (certains Samsung) : le navigateur repeindrait les fonds — le voile
   noir de l'éclairage blanchirait les dés. On garde nos couleurs sur le plateau et la réserve. */
.ld-box{forced-color-adjust:none}
.ld-box{flex-direction:column}
.ld-stage{position:relative; flex:1; min-width:0; min-height:0;
  perspective-origin:50% 50%; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none; cursor:pointer}
.ld-plane{position:absolute; transform-style:preserve-3d; transform-origin:50% 50%}

/* le tapis */
.ld-felt{position:absolute; inset:0; border-radius:3px}
.ld-cast{position:absolute; border-radius:5px; transform:translateZ(-1px); background:rgba(0,0,0,.45);
  box-shadow:0 26px 34px -8px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.45)}

/* les rebords : murs debout et bandes posées dessus */
.ld-wall,.ld-rim{position:absolute; backface-visibility:visible}
.ld-wall.ld-in.ld-n,.ld-wall.ld-in.ld-s{background:linear-gradient(to bottom, var(--mur-bas), var(--mur-haut))}
.ld-wall.ld-in.ld-w,.ld-wall.ld-in.ld-e{background:linear-gradient(to right, var(--mur-bas), var(--mur-haut))}
.ld-wall.ld-out{background:linear-gradient(to bottom, var(--bord-ext-bas), var(--bord-ext-haut))}
.ld-wall.ld-out.ld-w,.ld-wall.ld-out.ld-e{background:linear-gradient(to right, var(--bord-ext-bas), var(--bord-ext-haut))}
/* LE CADRE, D'UNE SEULE PIÈCE. Un seul élément couvre tout le plateau, et un masque
   évide son centre (la zone du contenu) : il ne reste que l'anneau. Sa matière est donc
   peinte en une fois et fait le tour sans joint ni croisement aux coins.
   Le masque « exclude / xor » est la technique classique du bord en dégradé : elle
   fonctionne sur Chrome, Safari et Firefox. */
.ld-rim{box-sizing:border-box; border-radius:5px;
  background:var(--rebord-fil, none), var(--rebord);
  box-shadow:inset 0 0 0 1px var(--rebord-filet), inset 0 -2px 0 rgba(0,0,0,.18);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
/* le filet intérieur : un trait continu tout autour du tapis */
.ld-rim-in{position:absolute; inset:calc(var(--rim, 12px) - 1px); border:1px solid var(--rebord-filet); border-radius:1px; pointer-events:none}

/* ---- les quatre plateaux ---- */
[data-tray="vert"]{
  --mur-bas:#2a170a; --mur-haut:#6a4022;
  --bord-ext-bas:#2a170a; --bord-ext-haut:#5b351a;
  --rebord:linear-gradient(135deg,#8a5a32,#5e3818 55%,#3f230e); --rebord-filet:rgba(255,220,170,.18);
  --rebord-fil:repeating-linear-gradient(118deg, rgba(255,220,170,0) 0 5px, rgba(255,220,170,.07) 5px 6px, rgba(40,20,5,0) 6px 11px, rgba(40,20,5,.12) 11px 12px);
}
[data-tray="vert"] .ld-felt{background:
  radial-gradient(ellipse 80% 70% at 32% 28%, rgba(120,220,150,.20), rgba(0,0,0,0) 60%),
  radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.35) 100%),
  var(--grain), #1d6a43}
[data-tray="bois"]{
  --mur-bas:#21120a; --mur-haut:#4a2b17;
  --bord-ext-bas:#1d1009; --bord-ext-haut:#3e2413;
  --rebord:linear-gradient(135deg,#5c3a22,#3a2213 60%,#26150b); --rebord-filet:rgba(255,220,170,.14);
  --rebord-fil:repeating-linear-gradient(118deg, rgba(255,220,170,0) 0 5px, rgba(255,220,170,.06) 5px 6px, rgba(0,0,0,0) 6px 11px, rgba(0,0,0,.14) 11px 12px);
}
[data-tray="bois"] .ld-felt{background:
  radial-gradient(ellipse 80% 70% at 30% 25%, rgba(255,235,200,.28), rgba(0,0,0,0) 60%),
  radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(60,30,5,.35) 100%),
  repeating-linear-gradient(92deg, rgba(110,62,22,0) 0 7px, rgba(110,62,22,.16) 7px 9px, rgba(110,62,22,0) 9px 17px, rgba(255,230,190,.10) 17px 18px),
  var(--grain), #c99556}
[data-tray="cuir"]{
  --mur-bas:#0b0b0c; --mur-haut:#2a2a2d;
  --bord-ext-bas:#0a0a0b; --bord-ext-haut:#232326;
  --rebord:linear-gradient(135deg,#3a3a3e,#1c1c1f 55%,#0f0f11); --rebord-filet:rgba(214,176,92,.75);
}
[data-tray="cuir"] .ld-felt{background:
  radial-gradient(ellipse 80% 70% at 32% 28%, rgba(255,140,140,.20), rgba(0,0,0,0) 60%),
  radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,.45) 100%),
  var(--grain-gros), #7d1622}
[data-tray="ardoise"]{
  --mur-bas:#3c2a17; --mur-haut:#9a7349;
  --bord-ext-bas:#3a2814; --bord-ext-haut:#8a6540;
  --rebord:linear-gradient(135deg,#c09466,#9a7146 55%,#76532f); --rebord-filet:rgba(255,240,210,.25);
  --rebord-fil:repeating-linear-gradient(118deg, rgba(255,240,210,0) 0 5px, rgba(255,240,210,.10) 5px 6px, rgba(60,30,5,0) 6px 11px, rgba(60,30,5,.12) 11px 12px);
}
[data-tray="ardoise"] .ld-felt{background:
  radial-gradient(ellipse 80% 70% at 30% 25%, rgba(200,215,230,.20), rgba(0,0,0,0) 60%),
  radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.40) 100%),
  var(--grain-gros), var(--grain), #3a4148}

/* ---------- les dés (même construction que .pl-* dans le jeu) ---------- */
.ld-die{position:absolute; left:0; top:0; width:0; height:0; transform-style:preserve-3d; pointer-events:none}
.ld-cube{position:absolute; width:var(--cs); height:var(--cs);
  left:calc(var(--cs) / -2); top:calc(var(--cs) / -2); transform-style:preserve-3d}
.ld-face{position:absolute; border-radius:12%; backface-visibility:hidden; overflow:hidden;
  background-color:#f4eddb; background-size:100% 100%; background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(70,56,30,.42)}
.ld-core{position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none}
.ld-core i{position:absolute; inset:6%; border-radius:14%; background:#ece4d2; display:block}
.ld-core i.ld-cy{transform:rotateY(90deg)}
.ld-core i.ld-cx{transform:rotateX(90deg)}
/* L'éclairage : un voile noir (la face se détourne de la lampe) et un reflet blanc
   (la face renvoie la lampe vers l'œil). Leur opacité est calculée à chaque image. */
.ld-shade,.ld-spec{position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none}
.ld-shade{background:#000}
.ld-spec{background:radial-gradient(circle at 36% 32%, rgba(255,255,255,.95), rgba(255,255,255,.25) 38%, rgba(255,255,255,0) 66%)}
.ld-sh{position:absolute; left:0; top:0; border-radius:50%; background:#000; pointer-events:none}
.ld-gone,.ld-lift{visibility:hidden}
/* invisible à l'écran, mais lu par les lecteurs d'écran (technique standard) */
.ld-sr{position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
/* …sauf pour qui navigue au CLAVIER (touche Tab, sur ordinateur) : arrivé sur ces boutons,
   il doit voir où il est. Au doigt, ils ne reçoivent jamais le focus et restent invisibles. */
#sr-des:focus-within{position:static !important; width:auto; height:auto; margin:8px 0 0; clip:auto;
  clip-path:none; white-space:normal; overflow:visible; display:flex; flex-wrap:wrap; gap:6px}
#sr-des:focus-within button{border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:10px; padding:6px 10px; font:600 13px 'Plus Jakarta Sans',sans-serif}

[data-skin="casino"] .ld-face{border-radius:5%; background-color:#b5141d; box-shadow:inset 0 0 0 1px rgba(60,0,4,.55)}
[data-skin="casino"] .ld-core i{background:#9e1219; border-radius:6%}
[data-skin="onyx"] .ld-face{background-color:#202227; box-shadow:inset 0 0 0 1px rgba(0,0,0,.7)}
[data-skin="onyx"] .ld-core i{background:#1a1c20}
[data-skin="bois"] .ld-face{border-radius:16%; background-color:#b98446; box-shadow:inset 0 0 0 1px rgba(70,38,10,.5)}
[data-skin="bois"] .ld-core i{background:#a8763f; border-radius:18%}

/* un Yam's : le doré, comme dans le jeu */
@keyframes ld-glow{
  0%  {box-shadow:inset 0 0 0 1px rgba(78,64,38,.22)}
  28% {box-shadow:inset 0 0 0 2px rgba(255,226,150,.95), 0 0 20px 7px rgba(255,190,70,.95)}
  100%{box-shadow:inset 0 0 0 2px rgba(255,222,140,.85), 0 0 12px 4px rgba(255,190,70,.62)}
}
.ld-die.win .ld-face{animation:ld-glow .55s ease-out both}
.ld-sh.win{background:radial-gradient(closest-side, rgba(255,196,80,.60), rgba(255,175,45,.22) 58%, rgba(255,175,45,0))}
.ld-kd.win{box-shadow:0 0 0 2px #ffd873, 0 0 13px 3px rgba(255,175,45,.65)}
@keyframes ld-burst{
  from{width:14px;height:14px;opacity:.85;border-width:3px}
  to  {width:400px;height:400px;opacity:0;border-width:1px}
}
.ld-burst{position:fixed; z-index:47; border-radius:50%; border:3px solid rgba(255,208,96,.85);
  transform:translate(-50%,-50%); pointer-events:none; animation:ld-burst .95s cubic-bezier(.15,.7,.3,1) both}

/* ---------- la réserve : les dés gardés, posés sur le côté ---------- */
/* La réserve est taillée dans la même matière que le rebord du plateau choisi. */
.ld-rail{flex:none; display:flex; gap:6px; padding:8px; border-radius:14px;
  background:var(--rebord, linear-gradient(135deg,#7a4e2b,#4f2f17 60%,#3a210f));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45), inset 0 0 0 1px var(--rebord-filet, rgba(255,220,170,.14)), 0 6px 14px -6px rgba(0,0,0,.4)}
.ld-rail{flex-direction:row; height:60px; justify-content:center}
.ld-slot{position:relative; width:42px; height:42px; flex:none; padding:0; border:0; background:none;
  border-radius:9px; cursor:pointer; -webkit-tap-highlight-color:transparent}
.ld-slot::before{content:""; position:absolute; inset:3px; border-radius:8px;
  border:1.5px dashed rgba(255,232,200,.28)}
.ld-kd{position:absolute; inset:0; border-radius:12%; background-size:100% 100%;
  box-shadow:0 3px 5px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.25); z-index:2}
.ld-kd[data-skin="casino"]{border-radius:5%}
.ld-kd[data-skin="bois"]{border-radius:16%}
.ld-kd.vole{z-index:60}
/* Le dé de la réserve ne capte JAMAIS le toucher : c'est sa case (le bouton) qui le reçoit.
   Correctif du 23/10/2026, constaté sur téléphone : au doigt, le navigateur envoie son
   « clic » un instant APRÈS le lâcher, à ce qui se trouve alors sous le doigt — c'est-à-dire
   le dé qui vient de partir vers la réserve, encore à l'endroit touché. Ce clic tombait
   donc sur sa case, et le dé repartait aussitôt sur le plateau. */
.ld-kd{pointer-events:none}

/* ---------- sous le plateau : le compteur, puis les boutons ---------- */
.ld-status{display:flex; align-items:center; gap:8px; min-height:32px; margin:8px 2px 4px; font-size:15px}
.ld-jet{font-family:'Outfit',sans-serif; font-weight:700; color:var(--ink)}
.ld-jet.trop{color:#b45309}
.ld-combo{font-weight:700; color:var(--accent-ink); background:var(--accent-soft);
  padding:2px 10px; border-radius:999px; font-size:14px}
.ld-combo:empty{display:none}
.ld-total{margin-left:auto; color:var(--muted)}
.ld-total b{color:var(--ink); font-family:'Outfit',sans-serif; font-size:18px}

.ld-actions{display:flex; gap:8px}
.ld-go{position:relative; overflow:hidden; flex:1; height:54px; border:0; border-radius:16px;
  background:var(--accent-fill); color:#fff; font:700 18px 'Outfit',sans-serif; cursor:pointer;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none;
  -webkit-tap-highlight-color:transparent; box-shadow:var(--shadow)}
/* la charge : une jauge qui monte du clair au rouge, comme le bouton du jeu */
.ld-go::before{content:""; position:absolute; left:0; top:0; bottom:0; width:calc(var(--u,0) * 100%);
  background:linear-gradient(90deg, rgba(255,214,120,.35), rgba(214,64,54,.55))}
.ld-go span{position:relative}
.ld-go small{display:block; font:500 11px 'Plus Jakarta Sans',sans-serif; opacity:.8; position:relative}
.ld-go:disabled{opacity:.6}
.ld-new{flex:none; height:54px; padding:0 14px; border-radius:16px; border:1.5px solid var(--accent);
  background:var(--card); color:var(--accent-ink); font:700 14px 'Outfit',sans-serif; cursor:pointer}
.ld-new:disabled{opacity:.45; cursor:default}

.ld-tools{display:flex; align-items:center; gap:8px; margin:10px 0 4px}
.ld-step{display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; background:var(--card)}
.ld-step button{width:36px; height:38px; border:0; background:none; color:var(--ink); font-size:20px; cursor:pointer}
.ld-step button:disabled{opacity:.3}
.ld-step span{min-width:52px; text-align:center; font-weight:700; font-size:14px}
.ld-tbtn{display:flex; align-items:center; gap:6px; height:40px; padding:0 12px; border-radius:12px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); font:600 14px 'Plus Jakarta Sans',sans-serif; cursor:pointer}
.ld-tbtn svg{width:18px; height:18px}
/* l'attribut hidden ne cache pas un <svg> partout : on le dit explicitement */
.ld-tbtn svg[hidden]{display:none}
.ld-tbtn.ico{width:40px; padding:0; justify-content:center; margin-left:auto}
.ld-son{margin-left:auto; min-width:84px; justify-content:center}
/* son coupé : grisé, barré, et le mot « Muet » — visible d'un coup d'œil */
.ld-son.off{background:var(--paper); color:var(--muted); border-style:dashed}

/* ---------- l'historique ---------- */
.ld-hist{margin-top:14px}
.ld-hist summary{cursor:pointer; font-family:'Outfit',sans-serif; font-weight:700; font-size:1.05rem; list-style:none;
  display:flex; align-items:center; gap:8px}
.ld-hist summary::-webkit-details-marker{display:none}
.ld-hist summary::after{content:"›"; margin-left:auto; transform:rotate(90deg); color:var(--muted); font-size:22px}
.ld-hist[open] summary::after{transform:rotate(-90deg)}
.ld-hist summary .n{font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:13px; color:var(--muted)}
.ld-hl{list-style:none; margin:10px 0 0; padding:0}
.ld-hl li{display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--line)}
.ld-hl li.tour{border-top:2px solid var(--line-strong); padding-top:10px}
.ld-hl .q{width:82px; flex:none; font-size:12.5px; color:var(--muted); line-height:1.25; white-space:nowrap}
.ld-hl .q b{display:block; color:var(--ink); font-size:13px}
.ld-hl .dd{display:flex; gap:3px}
.ld-hl .dd img{width:22px; height:22px; border-radius:4px; display:block; box-shadow:0 1px 2px rgba(0,0,0,.3)}
.ld-hl .dd img.k{outline:2px solid var(--accent); outline-offset:1px}
.ld-hl .r{margin-left:auto; text-align:right; font-size:12.5px; color:var(--muted); line-height:1.25}
.ld-hl .r b{display:block; color:var(--ink); font-size:15px}
.ld-hempty{color:var(--muted); font-size:14px; margin:10px 0 0}
.ld-hclear{margin-top:8px; border:0; background:none; color:var(--muted); text-decoration:underline; font-size:13px; cursor:pointer; padding:4px 0}

/* ---------- la fenêtre « Apparence » ---------- */
.ld-sheet{position:fixed; inset:0; z-index:80; display:none}
.ld-sheet.on{display:block}
.ld-sheet .bg{position:absolute; inset:0; background:rgba(0,0,0,.45)}
.ld-sheet .box{position:absolute; left:0; right:0; bottom:0; max-height:86%; overflow:auto;
  background:var(--card); border-radius:22px 22px 0 0; padding:14px 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.3)}
.ld-sheet h2{font-family:'Outfit',sans-serif; font-size:1.15rem; margin:4px 0 10px; display:flex; align-items:center}
.ld-sheet h2 button{margin-left:auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink); font-size:16px; cursor:pointer}
.ld-sheet h3{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:14px 0 8px}
.ld-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px}
.ld-pick{display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; border-radius:14px;
  border:2px solid var(--line); background:var(--paper); color:var(--ink); font:600 12px 'Plus Jakarta Sans',sans-serif; cursor:pointer}
.ld-pick[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.ld-sw{width:56px; height:44px; border-radius:8px; position:relative; box-shadow:inset 0 0 0 5px var(--rebord-c, #5e3818), 0 2px 5px rgba(0,0,0,.3)}
.ld-sw[data-tray="vert"]{background:var(--grain), #1d6a43; --rebord-c:#5e3818}
.ld-sw[data-tray="bois"]{background:repeating-linear-gradient(92deg, rgba(110,62,22,0) 0 5px, rgba(110,62,22,.2) 5px 7px), #c99556; --rebord-c:#3a2213}
.ld-sw[data-tray="cuir"]{background:var(--grain-gros), #7d1622; --rebord-c:#1c1c1f}
.ld-sw[data-tray="ardoise"]{background:var(--grain-gros), #3a4148; --rebord-c:#9a7146}
.ld-pick img{width:44px; height:44px; border-radius:12%; box-shadow:0 2px 5px rgba(0,0,0,.35)}
.ld-pick img[data-skin="casino"]{border-radius:5%}
.ld-pick img[data-skin="bois"]{border-radius:16%}
.ld-sheet .note{font-size:12.5px; color:var(--muted); margin:12px 0 0}