/* MINUIT — Roulette, en plein écran (SCENE, 01/10) : la scène (3D, ou la roue 2D sur son feutre) occupe toute la zone de jeu ; des
   plaques de laque nuit cerclées de laiton se posent dans ses coins, le tapis se pose en perspective sur son bas pendant les mises
   et se couche au « Rien ne va plus », une barre de commandes court en bas. Le coin haut-droit reste libre (sélecteur 2D | 3D).
   Couches internes (sous 100) : scène 0 · plaques 9-10 · tapis 12 · annonce 14 · barre 16 · « Rien ne va plus » 40 · « Plein ! » 41
   · connexion perdue 50. Mouvements : transformée et opacité ; « Animations réduites » : instantané (html.reduce-motion). */
.g-roulette { overflow: hidden; }
.g-roulette .rl {
  --rl-barre-h: 76px; --rl-marge: 12px; --rl-tapis-vu: 320px; --rl-haut: 0px;
  --rl-laiton: #b8913b; --rl-acajou: #5a2a17; --rl-acajou-bas: #2a0f06;
  --rl-laque: linear-gradient(180deg, rgba(26, 32, 64, .93), rgba(10, 13, 24, .95));
  --rl-filet: rgba(184, 145, 59, .55);
  --rl-sortie: cubic-bezier(.55, 0, .8, .2); --rl-entree: cubic-bezier(.22, 1, .36, 1);
  --rl-tilt: 24deg;
  /* tableau horizontal : sa hauteur suit la place (≤ 41 % de la scène) et la largeur de sa colonne (58 % du tapis) */
  --rl-grille-h: min(calc((100vh - var(--topbar-h, 64px) - var(--rl-barre-h)) * .41), calc((100vw - 2 * var(--rl-marge) - 60px) * .58 * 5.1 / 14));
  position: relative; height: 100%; overflow: hidden; isolation: isolate; box-sizing: border-box;
  background: var(--bg-0); color: var(--text); font-family: var(--font-ui);
}

/* la réglette des potes, quand elle flotte sous la barre du haut (js/social.js), garde sa place (convention de css/social.css) ; la
   sonde (haute de --rl-haut, invisible) prévient le contrôleur que les plaques ont bougé : la place de la roue est remesurée */
body:has(.so-dock.is-float) .g-roulette .rl { --rl-haut: var(--so-float-h, 58px); }
.g-roulette .rl-haut-sonde { position: absolute; left: 0; top: 0; width: 1px; height: var(--rl-haut); visibility: hidden; pointer-events: none; }

/* ================= la scène plein cadre ================= */
.g-roulette .rl-scene { position: absolute; inset: 0; z-index: 0; }
.g-roulette .rl-vue { position: absolute; inset: 0; }
.g-roulette .rl-uxroue { position: absolute; pointer-events: none; }
/* la roue 2D, posée sur un feutre éclairé comme la table 3D ; la toile est placée par une transformée (games/roulette-2d.js) */
.g-roulette .rl-vue2d { position: absolute; inset: 0; display: block; overflow: hidden;
  background: radial-gradient(56% 50% at 50% 34%, rgba(255, 217, 160, .13), transparent 70%),
    radial-gradient(120% 90% at 50% 40%, var(--felt-hi) 0%, var(--felt) 38%, var(--felt-lo) 66%, #04140f 84%, var(--bg-0) 100%); }
.g-roulette .rl-vue2d::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: .16; mix-blend-mode: soft-light; }
.g-roulette .rl-vue2d .rl-wheel { position: absolute; left: 0; top: 0; z-index: 1; transform-origin: 0 0; will-change: transform; transition: transform 640ms var(--rl-entree);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .62), 0 0 0 1px rgba(222, 184, 92, .25); }
.g-roulette .rl.is-replie .rl-vue2d .rl-wheel { transition-duration: 720ms; }
html.perf-low .g-roulette .rl-vue2d::after { display: none; }
.g-roulette .rl-wheel { display: block; border-radius: 50%; }

/* ================= les plaques (laque nuit, filet de laiton) ================= */
.g-roulette .rl-plaque { background: var(--rl-laque); border: 1px solid var(--rl-filet); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(247, 221, 143, .10), 0 4px 8px rgba(0, 0, 0, .45); }
.g-roulette .rl-colg { position: absolute; z-index: 10; left: var(--rl-marge); top: calc(var(--rl-marge) + var(--rl-haut)); width: clamp(250px, 22vw, 310px);
  bottom: calc(var(--rl-barre-h) + var(--rl-tapis-vu) + 10px); display: flex; flex-direction: column; gap: 10px; min-height: 0; pointer-events: none; }
.g-roulette .rl-colg > * { pointer-events: auto; }
.g-roulette .rl-top { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 11px; }
.g-roulette .rl-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.g-roulette .rl-logo { flex: none; line-height: 0; }
.g-roulette .rl-logo svg { width: 30px; height: 30px; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.g-roulette .rl-title h1 { margin: 0; flex: none; font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1; letter-spacing: .04em; color: var(--gold-hi); }
/* la règle de la variante : une ligne de texte sous le titre (plus de pastille tronquée) */
.g-roulette .rl-rules { flex: 1 1 100%; order: 3; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; font: 500 11.5px/1.3 var(--font-ui);
  letter-spacing: .02em; text-transform: none; color: var(--text-dim); white-space: normal; }
.g-roulette .rl-rules.is-partage { color: var(--gold-hi); background: none; }
.g-roulette .rl-tablebtn { display: none; margin-left: auto; }
.g-roulette .rl-opts { display: flex; flex-direction: column; gap: 6px; }
.g-roulette .rl-opts2 { display: flex; align-items: center; gap: 6px; }
.g-roulette .rl-seg { display: flex; width: 100%; }
.g-roulette .rl-seg > button { flex: 1 1 0; min-width: 0; height: 28px; padding: 0 8px; font-size: 12.5px; white-space: nowrap; }
.g-roulette .rl-seg > button[disabled] { opacity: .4; cursor: not-allowed; }
.g-roulette .rl-lim { display: none; margin-left: 4px; font-size: 10.5px; opacity: .75; }
.g-roulette .rl-voix, .g-roulette .rl-bvue { flex: none; min-width: 36px; height: 34px; padding: 0 9px; }
.g-roulette .rl-voix { font-size: 15px; opacity: .55; }
.g-roulette .rl-voix.is-on { opacity: 1; border-color: var(--gold); box-shadow: 0 0 8px rgba(222, 184, 92, .35); }
.g-roulette .rl-lab, .g-roulette .rl-anlab { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); }

/* statistiques (rail gauche), repliables */
.g-roulette .rl-rail { display: flex; flex-direction: column; min-height: 0; }
.g-roulette .rl-rail-g { flex: 0 1 auto; }
.g-roulette .rl-statsbox { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.g-roulette .rl-railbtn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  color: var(--text-dim); font: 600 11px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; text-align: left; border-radius: 12px; }
.g-roulette .rl-railbtn:hover { color: var(--text); }
.g-roulette .rl-railbtn .rl-statsn { margin-left: auto; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--text-dim); }
.g-roulette .rl-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 180ms var(--rl-entree); }
.g-roulette .rl-rail-g.is-ouvert .rl-chev { transform: rotate(225deg) translate(-2px, 0); }
.g-roulette .rl-stats { display: none; flex-direction: column; gap: 5px; min-height: 0; overflow: auto; padding: 0 12px 12px; scrollbar-width: thin; scrollbar-color: var(--gold-lo) transparent; }
.g-roulette .rl-rail-g.is-ouvert .rl-stats { display: flex; }
.g-roulette .rl-empty { margin: 2px 0; font-size: 12px; line-height: 1.4; }
.g-roulette .rl-bar { display: flex; height: 17px; border-radius: 5px; overflow: hidden; font-size: 10px; flex: none; }
.g-roulette .rl-bar span { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; color: #fff; min-width: 0; }
.g-roulette .rl-seg-r { background: var(--red); } .g-roulette .rl-seg-n { background: #2a2c36; } .g-roulette .rl-seg-z { background: #13804f; }
.g-roulette .rl-seg-a { background: #3b3f63; } .g-roulette .rl-seg-b { background: #5b4a7c; } .g-roulette .rl-seg-c { background: #6b5a2a; }
.g-roulette .rl-hotcold { display: flex; gap: 14px; flex-wrap: wrap; }
.g-roulette .rl-hotcold small { font-size: 11px; color: var(--text-dim); }
.g-roulette .rl-hc { display: flex; gap: 3px; margin-top: 2px; }
.g-roulette .rl-hc.hot .rl-ball { box-shadow: 0 0 6px rgba(255, 120, 60, .7); }
.g-roulette .rl-hc.cold .rl-ball { opacity: .75; box-shadow: 0 0 6px rgba(59, 232, 255, .4); }

/* joueurs (rail droit, sous le coin du sélecteur 2D | 3D) */
.g-roulette .rl-rail-d { position: absolute; z-index: 9; right: var(--rl-marge); top: calc(72px + var(--rl-haut)); width: clamp(220px, 19vw, 290px);
  bottom: calc(var(--rl-barre-h) + var(--rl-tapis-vu) + 10px); pointer-events: none; }
.g-roulette .rl-rail-d > * { pointer-events: auto; }
.g-roulette .rl-joueurs { min-height: 0; overflow: auto; padding: 10px; scrollbar-width: thin; scrollbar-color: var(--gold-lo) transparent; }
.g-roulette .rl-players { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.g-roulette .rl-players > .rl-anlab { padding: 0 2px 2px; }
.g-roulette .rl-ptab { position: relative; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 5px 10px 5px 6px; border-radius: 99px; cursor: pointer;
  background: rgba(5, 6, 11, .55); border: 1px solid var(--line); color: var(--text); font-family: var(--font-ui); text-align: left; }
.g-roulette .rl-ptab.is-on { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc), 0 0 10px color-mix(in srgb, var(--pc) 40%, transparent); background: rgba(26, 32, 64, .9); }
.g-roulette .rl-pem { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pc); font-size: 16px; }
.g-roulette .rl-pinfo { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.g-roulette .rl-pinfo b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-roulette .rl-pinfo small { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-roulette .rl-px { margin-left: auto; padding: 0 4px; color: var(--text-dim); font-size: 16px; }
.g-roulette .rl-px:hover { color: var(--lose); }
.g-roulette .rl-sel { padding: 4px 26px 4px 10px; font-size: 12px; height: 30px; width: auto; }
.g-roulette .rl-add { align-self: flex-start; }

/* ================= le tapis par-dessus la scène, en perspective ================= */
.g-roulette .rl-tapis { position: absolute; z-index: 12; left: 0; right: 0; bottom: var(--rl-barre-h); display: flex; justify-content: center; align-items: flex-end;
  padding: 0 var(--rl-marge) 10px; perspective: 1150px; perspective-origin: 50% 0%; pointer-events: none; }
.g-roulette .rl-felt { position: relative; pointer-events: auto; box-sizing: border-box; width: 100%; max-width: 1880px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 18px; padding: 14px 20px 16px; border-radius: 22px;
  /* feutre sous le spot chaud de la table (même lecture que la 3D), bord d'acajou verni, filet de laiton, liseré or intérieur */
  background:
    radial-gradient(60% 90% at 50% 8%, rgba(255, 217, 160, .12), transparent 70%),
    radial-gradient(130% 120% at 50% 0%, var(--felt-hi) 0%, var(--felt) 46%, var(--felt-lo) 100%);
  border: 7px solid var(--rl-acajou);
  box-shadow: inset 0 0 0 1px var(--rl-laiton), inset 0 0 0 3px rgba(5, 6, 11, .55), inset 0 0 0 4px rgba(247, 221, 143, .32), inset 0 0 70px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(247, 221, 143, .28), 0 8px 8px rgba(0, 0, 0, .55);
  transform-origin: 50% 100%; transform: rotateX(var(--rl-tilt));
  transition: transform 560ms var(--rl-entree), opacity 320ms var(--rl-entree), visibility 0s linear 0s; }
/* le bord d'acajou : un cadre peint par-dessus le bord, avec son reflet chaud en haut */
.g-roulette .rl-felt::after { content: ''; position: absolute; inset: -7px; border-radius: 22px; pointer-events: none;
  border: 7px solid transparent; background: linear-gradient(180deg, #9a5b26 0%, var(--rl-acajou) 30%, var(--rl-acajou-bas) 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.g-roulette .rl-felt::before { border-radius: 15px; }
.g-roulette .rl.is-replie .rl-felt { transform: rotateX(80deg) translateY(16%); opacity: 0; visibility: hidden;
  transition: transform 420ms var(--rl-sortie), opacity 300ms var(--rl-sortie) 120ms, visibility 0s linear 420ms; }
.g-roulette .rl.is-lecture .rl-felt { filter: saturate(.9); }
.g-roulette .rl.is-lecture .rl-hot { cursor: default; }
html.perf-low .g-roulette .rl-felt { box-shadow: inset 0 0 0 1px var(--rl-laiton), inset 0 0 0 4px rgba(247, 221, 143, .25), 0 6px 8px rgba(0, 0, 0, .5); }
.g-roulette .rl-mat-g { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.g-roulette .rl-mat-d { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.g-roulette .rl-tableau { position: relative; flex: none; height: var(--rl-grille-h); width: calc(var(--rl-grille-h) * 14 / 5.1); }

/* tableau de mise (cases et zones de mise, en % des unités du tapis) */
.g-roulette .rl-grid { position: relative; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.g-roulette .rl-grid::before { content: ''; position: absolute; inset: -7px; pointer-events: none; border: 1px solid rgba(247, 221, 143, .5); outline: 1px solid rgba(247, 221, 143, .22); outline-offset: 4px; }
.g-roulette .rl-cell { position: absolute; box-sizing: border-box; border: 1px solid rgba(247, 221, 143, .55); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-num); font-size: clamp(12px, calc(var(--rl-grille-h) * .085), 22px); color: #fff; transition: box-shadow .12s, background-color .12s; }
.g-roulette .rl-cell span { pointer-events: none; }
.g-roulette .rl-cell.is-rouge:not(.is-out) span, .g-roulette .rl-cell.is-noir:not(.is-out) span, .g-roulette .rl-cell.is-vert span { width: 68%; aspect-ratio: 1; max-height: 78%; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.g-roulette .rl-cell.is-rouge:not(.is-out) span { background: var(--red); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.g-roulette .rl-cell.is-noir:not(.is-out) span { background: var(--black); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .08); }
.g-roulette .rl-cell.is-zero span { background: #13804f; width: 70%; aspect-ratio: auto; height: 38%; border-radius: 40% / 50%; }
.g-roulette .rl-cell.is-out { font-family: var(--font-ui); font-size: clamp(10px, calc(var(--rl-grille-h) * .05), 15px); letter-spacing: .08em; color: var(--gold-hi); text-transform: uppercase; }
.g-roulette .rl-cell.is-hl { box-shadow: inset 0 0 0 3px var(--gold-hi), 0 0 14px rgba(247, 221, 143, .55); background: rgba(247, 221, 143, .16); z-index: 2; }
.g-roulette .rl-diamond { display: block; width: 34%; height: 58%; transform: rotate(45deg) scale(.72, .72); border: 1px solid var(--gold-hi); }
.g-roulette .rl-diamond.is-rouge { background: var(--red); } .g-roulette .rl-diamond.is-noir { background: var(--black); }
.g-roulette .rl-hot { position: absolute; cursor: pointer; border-radius: 4px; }
.g-roulette .rl-hot.z1 { z-index: 3; } .g-roulette .rl-hot.z3 { z-index: 5; } .g-roulette .rl-hot.z4 { z-index: 6; border-radius: 50%; }
.g-roulette .rl-hot:hover { background: rgba(247, 221, 143, .18); }
.g-roulette .rl-hot.z3:hover, .g-roulette .rl-hot.z4:hover { background: rgba(247, 221, 143, .55); }
.g-roulette .rl.is-spinning .rl-hot { cursor: not-allowed; }
/* tableau vertical (téléphone) : colonnes des douzaines et des chances simples écrites de bas en haut */
.g-roulette .rl-grid.is-vert .rl-cell.is-dz span, .g-roulette .rl-grid.is-vert .rl-cell.is-ch span { writing-mode: vertical-rl; transform: rotate(180deg); }
.g-roulette .rl-grid.is-vert .rl-cell.is-rouge:not(.is-out) span, .g-roulette .rl-grid.is-vert .rl-cell.is-noir:not(.is-out) span { width: auto; height: 80%; max-height: none; }
.g-roulette .rl-grid.is-vert .rl-cell.is-zero span { width: 30%; height: 70%; border-radius: 50% / 40%; }
.g-roulette .rl-grid.is-vert .rl-diamond { width: 46%; height: 26%; }

/* piles de jetons, dolly, bulle */
.g-roulette .rl-chips { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.g-roulette .rl-pile { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; --chip-size: 26px; transition: opacity .5s, filter .5s; animation: rl-drop .22s ease-out; }
.g-roulette .rl-pile .chip { font-size: 0; }
.g-roulette .rl-pile b { margin-top: -3px; font-size: 10px; background: rgba(0, 0, 0, .72); color: var(--gold-hi); padding: 0 4px; border-radius: 4px; }
.g-roulette .rl-pile.is-win { filter: drop-shadow(0 0 8px var(--win)); animation: rl-glow 0.9s ease-in-out 3; }
.g-roulette .rl-pile.is-lose { opacity: .18; filter: grayscale(1); }
@keyframes rl-drop { from { transform: translate(-50%, -90%) scale(1.3); opacity: 0; } }
@keyframes rl-glow { 50% { filter: drop-shadow(0 0 16px var(--win)) brightness(1.3); } }
.g-roulette .rl-dolly { position: absolute; z-index: 9; pointer-events: none; opacity: 0; transition: opacity .3s; }
.g-roulette .rl-dolly.is-on { opacity: 1; }
.g-roulette .rl-dolly::after { content: ''; position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1 / 1.25; max-width: 30px; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 30%, #fff, #d9d4c5 55%, #8f8a7a); border-radius: 50% 50% 45% 45%; box-shadow: 0 6px 12px rgba(0, 0, 0, .55), 0 0 0 2px var(--gold); animation: rl-dolly .5s cubic-bezier(.2, .9, .3, 1); }
@keyframes rl-dolly { from { transform: translate(-50%, -160%); opacity: 0; } }
.g-roulette .rl-tip { position: absolute; z-index: 10; pointer-events: none; transform: translate(-50%, calc(-100% - 22px)); white-space: nowrap; margin-left: 14px; margin-top: 14px;
  background: var(--bg-0); border: 1px solid var(--gold); color: var(--gold-hi); font-size: 12px; padding: 4px 9px; border-radius: 8px; opacity: 0; transition: opacity .12s; box-shadow: 0 4px 8px rgba(0, 0, 0, .45); }
.g-roulette .rl-tip.is-on { opacity: 1; }
/* rituel 2D : le gain poussé par le croupier jusqu'à la mise gagnante (transform et opacité seulement, piloté à l'heure) */
.g-roulette .rl-gain2d { position: absolute; left: 0; top: 0; z-index: 9; display: flex; flex-direction: column; align-items: center; pointer-events: none; --chip-size: 22px; opacity: 0; will-change: transform; }
.g-roulette .rl-gain2d .chip { font-size: 0; }
.g-roulette .rl-gain2d b { margin-top: -2px; font-size: 10px; background: rgba(0, 0, 0, .72); color: var(--win); padding: 0 4px; border-radius: 4px; }

/* le champ de course et les annonces, sur le même feutre */
.g-roulette .rl-ptabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 28px; }
.g-roulette .rl-matseg { flex: none; }
.g-roulette .rl-matseg > button { height: 30px; padding: 0 12px; font-size: 12.5px; }
.g-roulette .rl-ks { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; }
.g-roulette .rl-ks small { font-size: 10.5px; color: var(--gold-hi); opacity: .8; margin-right: 4px; letter-spacing: .08em; text-transform: uppercase; }
.g-roulette .rl-kb { min-width: 34px; height: 26px; padding: 0 6px; border-radius: 7px; border: 1px solid rgba(247, 221, 143, .35); background: rgba(5, 6, 11, .35); color: var(--text); font-size: 11.5px; cursor: pointer; }
.g-roulette .rl-kb:hover { border-color: var(--gold); }
.g-roulette .rl-kb.is-on { color: #241904; background: var(--gold); border-color: var(--gold-hi); }
.g-roulette .rl-track { position: relative; min-width: 0; }
.g-roulette .rl-trk { display: block; width: 100%; height: auto; max-height: calc(var(--rl-grille-h) * .62); margin: 0 auto; user-select: none; -webkit-user-select: none; }
.g-roulette .rl-trk-rim { fill: rgba(0, 0, 0, .28); stroke: var(--gold); stroke-width: 1.6; }
.g-roulette .rl-trk-in { fill: rgba(0, 0, 0, .14); stroke: rgba(247, 221, 143, .55); stroke-width: 1.2; }
.g-roulette .rl-trk-n { cursor: pointer; }
.g-roulette .rl-trk-n path { stroke: rgba(247, 221, 143, .6); stroke-width: 1; transition: filter .12s; }
.g-roulette .rl-trk-n.is-rouge path { fill: #b3202c; } .g-roulette .rl-trk-n.is-noir path { fill: #17181f; } .g-roulette .rl-trk-n.is-vert path { fill: #13804f; }
.g-roulette .rl-trk-n text { fill: #fff; font: 600 15px var(--font-num); text-anchor: middle; pointer-events: none; }
.g-roulette .rl-trk-n:hover path, .g-roulette .rl-trk-n.is-hl path { filter: brightness(1.55) drop-shadow(0 0 4px rgba(247, 221, 143, .9)); stroke: var(--gold-hi); stroke-width: 2; }
.g-roulette .rl-trk-n.is-win path { fill: var(--gold); stroke: #fff6d6; stroke-width: 2.5; filter: drop-shadow(0 0 8px rgba(247, 221, 143, .95)); }
.g-roulette .rl-trk-n.is-win text { fill: #1a1206; }
.g-roulette .rl-trk-zone { cursor: pointer; }
.g-roulette .rl-trk-zone path { fill: rgba(0, 0, 0, .001); stroke: rgba(247, 221, 143, .45); stroke-width: 1; transition: fill .12s; }
.g-roulette .rl-trk-zone.z-jeuzero path { fill: rgba(19, 128, 79, .35); }
.g-roulette .rl-trk-zone:hover path { fill: rgba(247, 221, 143, .2); }
.g-roulette .rl-trk-zl { fill: var(--gold-hi); font: 400 14px var(--font-display); letter-spacing: .04em; text-anchor: middle; pointer-events: none; }
.g-roulette .rl-trk-zone.z-jeuzero .rl-trk-zl { font-size: 12px; }
.g-roulette .rl-annonces { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.g-roulette .rl-annonces > .rl-anlab { display: none; }
.g-roulette .rl-annonces .btn-sm { height: 28px; padding: 0 10px; font-size: 12px; color: var(--text); border-color: rgba(247, 221, 143, .35); background: rgba(5, 6, 11, .3); }
.g-roulette .rl-annonces .btn-sm:hover { border-color: var(--gold); background: rgba(222, 184, 92, .14); }
.g-roulette .rl-an .rl-u { margin-left: 5px; font-size: 10px; color: var(--gold-hi); }
.g-roulette .rl-group { display: inline-flex; gap: 4px; align-items: center; padding-left: 6px; border-left: 1px solid rgba(247, 221, 143, .3); }
.g-roulette .rl-group .rl-sel { height: 28px; padding: 0 22px 0 8px; background-color: rgba(5, 6, 11, .45); }
.g-roulette .rl-annote { font-size: 12px; color: var(--gold-hi); opacity: .8; }
/* bascule (tapis étroit) : le tapis montre le tableau OU le champ de course */
.g-roulette .rl.is-bascule .rl-felt { grid-template-columns: minmax(0, 1fr); }
.g-roulette .rl.is-bascule .rl-mat-g { order: -1; }
.g-roulette .rl.is-bascule .rl-felt:not(.is-ovale) .rl-track, .g-roulette .rl.is-bascule .rl-felt:not(.is-ovale) .rl-annonces { display: none; }
.g-roulette .rl.is-bascule .rl-felt.is-ovale .rl-mat-d { display: none; }
.g-roulette .rl.is-bascule .rl-mat-d { justify-content: center; }

/* ================= l'annonce du croupier, au bord du tapis (sur la barre quand il est couché) ================= */
.g-roulette .rl-appel { position: absolute; z-index: 14; left: 50%; bottom: calc(var(--rl-barre-h) + var(--rl-tapis-vu) + 4px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; max-width: calc(100% - 2 * var(--rl-marge));
  transition: transform 520ms var(--rl-entree); }
.g-roulette .rl.is-replie .rl-appel { transform: translateX(-50%) translateY(calc(var(--rl-tapis-vu) - 6px)); transition-timing-function: var(--rl-entree); }
.g-roulette .rl-call { display: flex; align-items: center; min-height: 30px; padding: 2px 18px; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  font-family: var(--font-display); font-size: 22px; line-height: 1.2; letter-spacing: .05em; color: var(--gold-hi);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .9); background: radial-gradient(closest-side, rgba(5, 6, 11, .55), transparent); }
.g-roulette .rl-call.is-rnvp { color: var(--warn); animation: rl-pulse 1s ease-in-out infinite; }
.g-roulette .rl-call.is-last { color: var(--lose); animation: rl-pulse .5s ease-in-out infinite; }
.g-roulette .rl-call.is-res.is-rouge { color: #ff6b75; } .g-roulette .rl-call.is-res.is-vert { color: var(--win); }
@keyframes rl-pulse { 50% { opacity: .45; } }
/* la médaille du numéro, dans l'annonce, à gauche du texte */
.g-roulette .rl-appel-l { display: flex; align-items: center; gap: 12px; max-width: 100%; min-width: 0; }
.g-roulette .rl-medal { display: none; width: 64px; height: 64px; flex: none; border-radius: 50%; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--gold); background: var(--black); box-shadow: 0 0 0 3px rgba(0, 0, 0, .4), 0 6px 8px rgba(0, 0, 0, .55); }
.g-roulette .rl-medal.is-on { display: flex; animation: rl-medal 260ms var(--rl-entree); }
@keyframes rl-medal { from { opacity: 0; transform: scale(.88); } }
.g-roulette .rl-medal.is-rouge { background: radial-gradient(circle at 35% 30%, #e0505b, var(--red) 60%, #7d141c); }
.g-roulette .rl-medal.is-noir { background: radial-gradient(circle at 35% 30%, #3a3c48, var(--black) 70%); }
.g-roulette .rl-medal.is-vert { background: radial-gradient(circle at 35% 30%, #37d68d, #13804f 70%); }
.g-roulette .rl-medal b { font-size: 26px; line-height: 1; color: #fff; }
.g-roulette .rl-medal small { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .88); }

/* ================= la barre du bas ================= */
.g-roulette .rl-controls { position: absolute; z-index: 16; left: 0; right: 0; bottom: 0; height: var(--rl-barre-h); box-sizing: border-box;
  display: flex; align-items: center; gap: 16px; padding: 0 var(--rl-marge) 0 16px;
  background: linear-gradient(180deg, rgba(26, 32, 64, .95) 0%, rgba(10, 13, 24, .97) 60%, rgba(5, 6, 11, .98) 100%);
  border-top: 1px solid var(--rl-filet); box-shadow: inset 0 1px 0 rgba(247, 221, 143, .10), 0 -4px 8px rgba(0, 0, 0, .35); }
.g-roulette .rl-hist { flex: 0 1 auto; min-width: 0; max-width: 24%; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.g-roulette .rl-hist > .rl-anlab { font-size: 10px; }
.g-roulette .rl-hrow { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; align-items: center; }
.g-roulette .rl-hvide { font-size: 12px; white-space: nowrap; }
.g-roulette .rl-ball { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; border: 1px solid rgba(255, 255, 255, .15); }
.g-roulette .rl-ball.is-last { width: 30px; height: 30px; font-size: 13px; border: 2px solid var(--gold); }
.g-roulette .rl-ball.is-rouge { background: var(--red); } .g-roulette .rl-ball.is-noir { background: var(--black); } .g-roulette .rl-ball.is-vert { background: #13804f; }
.g-roulette .rl-ball.sm { width: 21px; height: 21px; font-size: 10px; }
.g-roulette .rl-controls .chip-rack { flex: none; flex-wrap: nowrap; gap: 3px; }
.g-roulette .rl-controls .chip-rack .chip { --chip-size: 40px; }
.g-roulette .rl-btns { flex: none; display: flex; gap: 6px; }
.g-roulette .rl-btns .btn-sm { height: 34px; padding: 0 11px; gap: 5px; }
.g-roulette .rl-btns .rl-bico { font-size: 13px; line-height: 1; }
.g-roulette .rl-btns .btn-sm:not(:first-child) .rl-bico { display: none; }
.g-roulette .rl-total { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 18px; line-height: 1.1; }
.g-roulette .rl-tot { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.g-roulette .rl-tot small { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.g-roulette .rl-tot b { font-size: 21px; color: var(--gold-hi); white-space: nowrap; }
.g-roulette .rl-tot-solde b { color: var(--text); }
.g-roulette .rl-tot .rl-tot-lim { text-transform: none; letter-spacing: 0; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.g-roulette .rl-spin { flex: none; white-space: nowrap; }
.g-roulette .rl-spin .kbd { margin-left: 6px; font-size: 10px; }
.g-roulette .rl-go { display: flex; align-items: center; gap: 10px; flex: none; }

/* ================= EN LIGNE : table commune ================= */
.g-roulette .rl-prow { display: flex; flex-direction: column; gap: 8px; }
.g-roulette .rl-prow .rl-players { min-width: 0; }
.g-roulette .rl-feed { min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; padding: 0 4px; }
.g-roulette .rl-fline { max-width: 100%; display: flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); animation: rl-feed-in .35s ease-out; }
.g-roulette .rl-fline + .rl-fline { opacity: .55; font-size: 11.5px; animation: none; }
.g-roulette .rl-fline i { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; background: var(--pc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.g-roulette .rl-fline span { overflow: hidden; text-overflow: ellipsis; }
@keyframes rl-feed-in { from { transform: translateY(8px); opacity: 0; } }
.g-roulette .rl-np { cursor: default; padding-right: 8px; transition: opacity .3s, box-shadow .3s; flex-wrap: nowrap; }
.g-roulette .rl-np.is-away { opacity: .5; }
.g-roulette .rl-np.is-me .rl-pinfo b { color: var(--gold-hi); }
.g-roulette .rl-np.is-ready { box-shadow: 0 0 0 1px var(--win), 0 0 12px rgba(62, 224, 143, .35); }
.g-roulette .rl-ok { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: var(--win); color: #06140d; animation: rl-pop .3s cubic-bezier(.2, .9, .3, 1); }
.g-roulette .rl-delta, .g-roulette .rl-soir { flex: none; margin-left: auto; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: rgba(0, 0, 0, .35); }
.g-roulette .rl-soir { font-size: 11px; font-weight: 500; opacity: .8; }
.g-roulette .rl-delta { animation: rl-pop .45s cubic-bezier(.2, .9, .3, 1); }
.g-roulette .is-plus { color: var(--win); } .g-roulette .is-minus { color: var(--lose); }
@keyframes rl-pop { from { transform: scale(.3); opacity: 0; } }
.g-roulette .rl.is-net .rl-pile { animation: none; }
.g-roulette .rl.is-net .rl-pile.is-new { animation: rl-drop .22s ease-out; }
.g-roulette .rl.is-net .rl-pile.is-win { animation: rl-glow .9s ease-in-out 3; }
.g-roulette .rl-pile.is-mine .chip { box-shadow: 0 0 0 2px var(--gold-hi), 0 3px 8px rgba(0, 0, 0, .5); border-radius: 50%; }
.g-roulette .rl-pav { position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translate(-50%, 4px) scale(.4); opacity: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; background: var(--pc); box-shadow: 0 0 0 2px var(--bg-0), 0 4px 8px rgba(0, 0, 0, .6);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1), opacity .15s; }
.g-roulette .rl-pile.is-peek { z-index: 3; }
.g-roulette .rl-pile.is-peek .rl-pav { opacity: 1; transform: translate(-50%, 0) scale(1); }
.g-roulette .rl-flychip { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; --chip-size: 26px; will-change: transform; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .55)); }
.g-roulette .rl-copy { flex: none; margin-left: auto; padding: 3px 8px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--pc) 70%, transparent); background: color-mix(in srgb, var(--pc) 18%, transparent);
  color: var(--text); font: 600 10.5px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.g-roulette .rl-copy:hover { background: color-mix(in srgb, var(--pc) 40%, transparent); }
/* compte à rebours */
.g-roulette .rl-ring { position: relative; flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
.g-roulette .rl-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.g-roulette .rl-ring-bg { fill: rgba(0, 0, 0, .35); stroke: rgba(222, 184, 92, .18); stroke-width: 4; }
.g-roulette .rl-ring-fg { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke .3s; filter: drop-shadow(0 0 4px rgba(222, 184, 92, .6)); }
.g-roulette .rl-ring b { position: relative; font-size: 17px; color: var(--gold-hi); }
.g-roulette .rl-ring.is-idle .rl-ring-fg { stroke: rgba(222, 184, 92, .45); filter: none; }
.g-roulette .rl-ring.is-idle b { color: var(--text-dim); font-size: 14px; }
.g-roulette .rl-ring.is-hot .rl-ring-fg { stroke: var(--lose); filter: drop-shadow(0 0 7px rgba(255, 90, 103, .8)); }
.g-roulette .rl-ring.is-hot { animation: rl-beat 1s ease-in-out infinite; }
.g-roulette .rl-ring.is-hot b { color: #fff; }
.g-roulette .rl-ring.is-locked .rl-ring-fg { stroke: transparent; }
.g-roulette .rl-ring.is-locked b { color: var(--warn); animation: rl-pulse .8s ease-in-out infinite; }
.g-roulette .rl-ring.is-next .rl-ring-fg { stroke: var(--neon-cyan); filter: drop-shadow(0 0 5px rgba(59, 232, 255, .6)); }
@keyframes rl-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } }
/* bouton Prêt */
.g-roulette .rl.is-net .rl-spin { min-width: 150px; }
.g-roulette .rl.is-net .rl-spin.is-ready { background: linear-gradient(180deg, #45e89a, #16a45f); color: #04130b; border-color: #7dffc0; box-shadow: 0 0 0 1px #7dffc0, 0 0 8px rgba(62, 224, 143, .45); }
.g-roulette .rl.is-net .rl-spin.is-ready .kbd { background: rgba(0, 0, 0, .2); color: #04130b; }
.g-roulette .rl.is-net .rl-spin.is-wait .kbd { display: none; }
/* pendant le lancer, on mise encore : le tapis garde un liseré d'or */
.g-roulette .rl.is-net.is-lancee .rl-felt { box-shadow: inset 0 0 0 1px var(--rl-laiton), inset 0 0 0 3px rgba(5, 6, 11, .55), inset 0 0 0 4px rgba(247, 221, 143, .32), inset 0 0 70px rgba(0, 0, 0, .5),
  0 0 0 2px rgba(247, 221, 143, .6), 0 8px 8px rgba(0, 0, 0, .55); }
/* bandeau des gagnants (avec l'annonce du numéro) */
.g-roulette .rl-banner { display: none; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 99px; white-space: nowrap; max-width: 100%; overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 13, 24, .96), rgba(5, 6, 11, .96)); border: 1px solid var(--gold); box-shadow: 0 6px 8px rgba(0, 0, 0, .6); }
.g-roulette .rl-banner.is-on { display: flex; animation: rl-medal 320ms var(--rl-entree); }
.g-roulette .rl-banner.is-house { border-color: var(--line-strong); }
.g-roulette .rl-bn-lab { font-family: var(--font-display); font-size: 16px; color: var(--gold-hi); letter-spacing: .06em; }
.g-roulette .rl-banner.is-house .rl-bn-lab { color: var(--text-dim); }
.g-roulette .rl-bn-p { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: 99px; background: color-mix(in srgb, var(--pc) 22%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 70%, transparent); }
.g-roulette .rl-bn-p i { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; background: var(--pc); }
.g-roulette .rl-bn-p b { font-size: 13px; }
.g-roulette .rl-bn-p em { font-style: normal; font-weight: 700; color: var(--win); font-size: 14px; }
.g-roulette .rl-bn-p.is-flat { background: rgba(255, 255, 255, .05); }
.g-roulette .rl-bn-p.is-flat em { color: var(--text-dim); }
.g-roulette .rl-bn-more { color: var(--text-dim); font-size: 12px; }
/* « Rien ne va plus » : l'annonce du croupier (animée en JS par element.animate, pour survivre au réglage « moins d'animations ») */
.g-roulette .rl-rnvp { position: absolute; inset: 0; z-index: 40; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: 0; }
.g-roulette .rl-rnvp::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(5, 6, 11, .55), rgba(5, 6, 11, .1) 70%); }
.g-roulette .rl-rnvp span { position: relative; font-family: var(--font-display); font-size: clamp(44px, 6.4vw, 96px); letter-spacing: .08em; white-space: nowrap; color: var(--gold-hi);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .85)); padding: 0 .4em; }
.g-roulette .rl-rnvp span::before, .g-roulette .rl-rnvp span::after { content: ''; position: absolute; left: 50%; width: 110%; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); transform: translateX(-50%) scaleX(1); }
.g-roulette .rl-rnvp span::before { top: -6px; } .g-roulette .rl-rnvp span::after { bottom: -2px; }
/* annonce plein écran (« Plein ! ») */
.g-roulette .rl-ann { position: absolute; inset: 0; z-index: 41; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; }
.g-roulette .rl-ann::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, rgba(247, 221, 143, .22), rgba(5, 6, 11, .55) 60%, rgba(5, 6, 11, .15)); }
.g-roulette .rl-ann b { position: relative; font-family: var(--font-display); font-weight: 400; font-size: clamp(64px, 9vw, 96px); line-height: 1; letter-spacing: .06em; color: var(--gold-hi);
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .8)); }
.g-roulette .rl-ann small { position: relative; font-size: clamp(18px, 1.9vw, 28px); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .9); letter-spacing: .03em; }
/* connexion perdue */
.g-roulette .rl-offline { position: absolute; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(5, 6, 11, .72); }
.g-roulette .rl-offline span { padding: 12px 22px; border-radius: 99px; border: 1px solid var(--warn); color: var(--warn); background: var(--bg-1); font-size: 15px; animation: rl-pulse 1.4s ease-in-out infinite; }
.g-roulette .rl.is-offline .rl-offline { display: flex; }
/* qualité allégée (html.perf-low : PC sans accélération graphique ou lent, voir Casino.perf) : annonces sans ombre floue */
html.perf-low .g-roulette .rl-rnvp span, html.perf-low .g-roulette .rl-ann b { filter: none; }

/* ================= tailles d'écran ================= */
@media (min-width: 1600px) { .g-roulette .rl-title h1 { font-size: 26px; } }
@media (max-width: 1250px) {
  .g-roulette .rl { --rl-barre-h: 70px; }
  .g-roulette .rl-hist { max-width: 18%; }
  .g-roulette .rl-controls { gap: 10px; }
  .g-roulette .rl-controls .chip-rack .chip { --chip-size: 36px; }
  .g-roulette .rl-btns .btn-sm { padding: 0 8px; font-size: 12px; }
  .g-roulette .rl-tot b { font-size: 18px; }
  .g-roulette .rl-tot .rl-tot-lim { display: none; }
  .g-roulette .rl-spin.btn-lg { height: 46px; padding: 0 20px; font-size: 14px; }
}
@media (max-width: 1000px) {
  .g-roulette .rl-controls .rl-hist { display: none; }
  .g-roulette .rl-colg { width: 220px; }
  .g-roulette .rl-rail-d { width: 200px; }
}
/* N8 (Q2-DERNIERS de D6, dev/audit/DECISIONS-TEL-2-1310.md) : sous 1 000 px, la barre n'a plus la place des derniers numéros (ci-dessus,
   la règle ne cache plus que la barre) ; games/roulette.js (placerDerniers) pose le nœud dans la rangée de tête du tapis, après la bascule
   « Tableau | Champ de course », avant « voisins » : la place du tableau d'affichage d'une vraie table. Une rangée de boules ENTIÈRES,
   autant qu'il en tient (8 au plus), la dernière cerclée d'or ; elle prend la place qui reste et ne fait jamais passer la rangée à la
   ligne ; le libellé « Derniers » est lu, pas vu ; affichage seul (le title garde les 20 derniers). Jamais au PC : le nœud n'y quitte pas
   la barre. --rl-derniers-tapis : la borne dite au JS (une seule borne, ici). */
@media (max-width: 1000px) {
  .g-roulette .rl { --rl-derniers-tapis: 1; }
  .g-roulette .rl-ptabs .rl-hist { flex: 1 1 0; min-width: 0; max-width: 193px; display: flex; flex-direction: row; align-items: center; gap: 0;
    padding-left: 7px; border-left: 1px solid rgba(247, 221, 143, .3); }
  .g-roulette .rl-ptabs .rl-hist > .rl-anlab { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
    clip-path: inset(50%); white-space: nowrap; border: 0; }
  .g-roulette .rl-ptabs .rl-hrow { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; height: 24px; overflow: hidden; gap: 0 3px; }
  .g-roulette .rl-ptabs .rl-ball { width: 20px; height: 20px; font-size: 12px; }
  .g-roulette .rl-ptabs .rl-ball.is-last { width: 24px; height: 24px; font-size: 13px; }
  .g-roulette .rl-ptabs .rl-hvide { font-size: 12px; }
}
/* ----- téléphone en portrait : roue en haut, tapis vertical par-dessus en bas, commandes au pouce ----- */
.g-roulette .rl.is-tel { --rl-barre-h: 118px; --rl-marge: 8px; --rl-tilt: 14deg; }
.g-roulette .rl.is-tel .rl-colg { left: 8px; right: auto; top: calc(8px + var(--rl-haut)); bottom: auto; width: auto; max-width: calc(100% - 16px); max-height: calc(100% - var(--rl-barre-h) - 16px - var(--rl-haut)); }
.g-roulette .rl.is-tel .rl-top { flex-direction: row; align-items: center; padding: 4px 6px; gap: 6px; min-height: 44px; box-sizing: border-box; }
.g-roulette .rl.is-tel .rl-colg:not(.is-ouvert) .rl-title h1 { display: none; }
.g-roulette .rl.is-tel .rl-title { flex: 1; gap: 8px; }
.g-roulette .rl.is-tel .rl-logo svg { width: 26px; height: 26px; }
.g-roulette .rl.is-tel .rl-title h1 { font-size: 19px; }
.g-roulette .rl.is-tel .rl-rules { display: none; }
.g-roulette .rl.is-tel .rl-tablebtn { display: inline-flex; height: 32px; }
.g-roulette .rl.is-tel .rl-opts, .g-roulette .rl.is-tel .rl-rail-g { display: none; }
.g-roulette .rl.is-tel .rl-colg.is-ouvert { right: 8px; z-index: 30; }
.g-roulette .rl.is-tel .rl-colg.is-ouvert .rl-top { flex-wrap: wrap; }
.g-roulette .rl.is-tel .rl-colg.is-ouvert .rl-rules { display: block; order: 3; width: 100%; white-space: normal; }
.g-roulette .rl.is-tel .rl-colg.is-ouvert .rl-opts { display: flex; order: 4; width: 100%; }
.g-roulette .rl.is-tel .rl-colg.is-ouvert .rl-rail-g { display: flex; }
.g-roulette .rl.is-tel .rl-colg.is-ouvert .rl-stats { display: flex; }
.g-roulette .rl.is-tel .rl-rail-d { left: 112px; right: 122px; top: calc(8px + var(--rl-haut)); bottom: auto; width: auto; }
.g-roulette .rl.is-tel.is-seul .rl-rail-d { display: none; }
.g-roulette .rl.is-tel .rl-joueurs { padding: 6px; overflow-x: auto; overflow-y: hidden; }
.g-roulette .rl.is-tel .rl-players, .g-roulette .rl.is-tel .rl-prow { flex-direction: row; align-items: center; flex-wrap: nowrap; }
.g-roulette .rl.is-tel .rl-players > .rl-anlab, .g-roulette .rl.is-tel .rl-feed { display: none; }
.g-roulette .rl.is-tel .rl-ptab { flex: none; min-height: 32px; padding: 2px 6px 2px 2px; gap: 5px; }
.g-roulette .rl.is-tel .rl-pem { width: 26px; height: 26px; font-size: 14px; }
.g-roulette .rl.is-tel .rl-pinfo b { font-size: 12px; max-width: 64px; }
.g-roulette .rl.is-tel .rl-copy { padding: 2px 5px; font-size: 9.5px; }
.g-roulette .rl.is-tel .rl-soir, .g-roulette .rl.is-tel .rl-delta { padding: 1px 5px; font-size: 10px; }
.g-roulette .rl.is-tel .rl-pinfo small { max-width: 76px; font-size: 10px; }
.g-roulette .rl.is-tel .rl-joueurs { padding: 4px 5px; }
.g-roulette .rl.is-tel .rl-tapis { padding: 0 6px 6px; perspective: 900px; }
.g-roulette .rl.is-tel .rl-felt { padding: 10px 10px 12px; gap: 8px; border-radius: 16px; }
.g-roulette .rl.is-tel .rl-felt::after { border-radius: 16px; }
.g-roulette .rl.is-tel .rl-tableau { width: min(100%, 360px); height: min(calc((100vh - var(--topbar-h, 64px) - var(--rl-barre-h)) * .5), 440px); }
.g-roulette .rl.is-tel .rl-cell { font-size: 15px; }
.g-roulette .rl.is-tel .rl-cell.is-out { font-size: 11px; }
.g-roulette .rl.is-tel .rl-trk { max-height: none; }
.g-roulette .rl.is-tel .rl-ptabs { justify-content: space-between; }
.g-roulette .rl.is-tel .rl-ks { margin-left: 0; }
.g-roulette .rl.is-tel .rl-kb { min-width: 38px; height: 32px; }
.g-roulette .rl.is-tel .rl-appel { bottom: calc(var(--rl-barre-h) + var(--rl-tapis-vu) + 2px); }
.g-roulette .rl.is-tel .rl-call { font-size: 18px; min-height: 26px; }
.g-roulette .rl.is-tel .rl-medal { width: 52px; height: 52px; }
.g-roulette .rl.is-tel .rl-medal b { font-size: 21px; }
/* la barre en deux rangées, seul comme en ligne : les jetons et la mise ; puis Annuler, Effacer, Rejouer, ×2 et LANCER (en ligne,
   l'anneau et Prêt) sous le pouce. Le pseudo-élément pleine largeur force le passage à la ligne. */
.g-roulette .rl.is-tel .rl-controls { flex-wrap: wrap; align-content: center; row-gap: 4px; column-gap: 8px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
.g-roulette .rl.is-tel .rl-controls::after { content: ''; order: 2; flex: 0 0 100%; height: 0; }
.g-roulette .rl.is-tel .rl-controls .rl-hist { display: none; }
.g-roulette .rl.is-tel .rl-controls .chip-rack { order: 1; flex: 1 1 0; width: auto; min-width: 0; justify-content: space-between; gap: 0; }
/* sept jetons et la mise sur une rangée : le jeton se règle sur la largeur (40 px au plus ; la mise en garde ~80 px, le pas 4 px) */
.g-roulette .rl.is-tel .rl-controls .chip-slot { padding: 2px; }
.g-roulette .rl.is-tel .rl-controls .chip-rack .chip { --chip-size: min(40px, calc((100vw - 104px) / 7 - 4px)); }
.g-roulette .rl.is-tel .rl-btns { order: 3; gap: 4px; }
.g-roulette .rl.is-tel .rl-btns .btn-sm { min-width: 44px; height: 44px; padding: 0 8px; font-size: 14px; }
.g-roulette .rl.is-tel .rl-btns .rl-bico { display: inline; font-size: 16px; }
.g-roulette .rl.is-tel .rl-btns .rl-blab:not(.is-seul), .g-roulette .rl.is-tel .rl-spin .rl-blab { display: none; }
.g-roulette .rl.is-tel .rl-total { order: 1; flex: none; gap: 8px; }
.g-roulette .rl.is-tel .rl-tot-solde { display: none; }
.g-roulette .rl.is-tel .rl-tot b { font-size: 16px; }
.g-roulette .rl.is-tel .rl-tot .rl-tot-lim { display: none; }
.g-roulette .rl.is-tel .rl-spin, .g-roulette .rl.is-tel .rl-go { order: 4; margin-left: auto; }
.g-roulette .rl.is-tel .rl-spin.btn-lg { height: 44px; padding: 0 14px; font-size: 13px; letter-spacing: .06em; }
.g-roulette .rl.is-tel .rl-spin .kbd { display: none; }
.g-roulette .rl.is-tel .rl-ring { width: 44px; height: 44px; }
/* en ligne, le libellé change (Prêt, Prêt ✓ 2/2, La bille roule, Tour suivant) : largeur fixe, deux lignes au besoin, la rangée tient */
.g-roulette .rl.is-tel.is-net .rl-spin.btn-lg { width: 108px; min-width: 0; padding: 0 8px; white-space: normal; line-height: 1.1; font-size: 12px; text-align: center; }
/* téléphones étroits (360-380 px) : boutons un peu plus petits, toujours deux rangées */
@media (max-width: 380px) {
  .g-roulette .rl.is-tel .rl-btns .btn-sm { min-width: 40px; height: 40px; padding: 0 6px; }
  .g-roulette .rl.is-tel.is-net .rl-spin.btn-lg { width: 96px; }
  .g-roulette .rl.is-tel .rl-ring { width: 40px; height: 40px; }
}
/* téléphone en 3D : au-dessus de la roue, la caméra des mises voit au loin le tableau 3D et le bras du croupier ; le haut de la scène
   retombe dans la pénombre sous les plaques (et la réglette quand elle flotte), comme une table sous son spot */
.g-roulette .rl.is-tel .rl-vue:has(.trois-3d.est-active)::after { content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 1;
  height: calc(var(--rl-haut) + 64px); pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 6, 11, .94) 0%, rgba(5, 6, 11, .8) 45%, rgba(5, 6, 11, 0) 100%); }
/* la réglette des potes, quand elle flotte (téléphone, barre du haut trop pleine), se pose dans le coin haut-droit : le sélecteur
   2D | 3D du kit (css/trois.css, 16 px du bord) descend d'autant, comme les plaques */
.g-roulette .rl .trois-coin { --trois-coin-haut: calc(16px + var(--rl-haut)); }

/* ---------- TÉLÉPHONE COUCHÉ (N1b, 13/10 ; revue au téléphone, défaut n° 12) ----------
   Couché (844 × 390), la plaque de gauche gardait sa forme du PC : la variante (« Européenne »), la limite (« Club 5–2 500 ») et la
   voix 🎙 passaient sous le tapis, « Statistiques » était rogné à 0 %. Comme au portrait (.rl.is-tel), la plaque se réduit au titre et
   à « Table », qui ouvre les réglages de la table par-dessus le tapis (variante, limite, voix, statistiques) ; le tapis se resserre
   pour que sa tête passe sous la plaque sans la toucher. La réglette des potes, quand elle flotte, se pose en haut à DROITE : la plaque
   de gauche reste en haut (elle descendait de 58 px dans le tapis) ; le sélecteur 2D | 3D se range en colonne le long du bord droit,
   sous la réglette, dans une voie que le tapis lui laisse (comme le blackjack couché, games/blackjack.css). Règle bornée au téléphone
   (paysage ≤ 560 px de haut) : le PC ne change pas (s5-tel-jeux.mjs, D). */
@media (orientation: landscape) and (max-height: 560px) {
  .g-roulette .rl:not(.is-tel) .rl-colg { top: var(--rl-marge); bottom: auto; width: auto; max-width: min(330px, calc(100% - 24px));
    max-height: calc(100% - var(--rl-barre-h) - 16px); }
  .g-roulette .rl:not(.is-tel) .trois-coin { --trois-coin-droite: 10px; }
  .g-roulette .rl:not(.is-tel) .trois-cadre .trois-coin .trois-vue { flex-direction: column; border-radius: 16px; }
  .g-roulette .rl:not(.is-tel) .trois-vue-choix { min-width: 30px; height: 30px; padding: 0 4px; }
  .g-roulette .rl:not(.is-tel) .rl-tapis { padding-right: 58px; }
  /* la plaque des joueurs n'a pas de place entre la barre et le tapis couchés (sa hauteur tombait à rien, cachée sous le tapis) : elle
     dépassait en lambeau dans la voie du sélecteur ; elle s'efface comme avant */
  .g-roulette .rl:not(.is-tel) .rl-rail-d { display: none; }
  .g-roulette .rl:not(.is-tel) .rl-top { flex-direction: row; align-items: center; gap: 6px; min-height: 44px; padding: 4px 6px; box-sizing: border-box; }
  .g-roulette .rl:not(.is-tel) .rl-title { flex: 1; gap: 8px; }
  .g-roulette .rl:not(.is-tel) .rl-logo svg { width: 26px; height: 26px; }
  .g-roulette .rl:not(.is-tel) .rl-title h1 { font-size: 19px; }
  .g-roulette .rl:not(.is-tel) .rl-rules, .g-roulette .rl:not(.is-tel) .rl-opts, .g-roulette .rl:not(.is-tel) .rl-rail-g { display: none; }
  .g-roulette .rl:not(.is-tel) .rl-tablebtn { display: inline-flex; height: 32px; }
  .g-roulette .rl:not(.is-tel) .rl-colg.is-ouvert { z-index: 30; overflow-y: auto; }
  .g-roulette .rl:not(.is-tel) .rl-colg.is-ouvert .rl-top { flex-wrap: wrap; }
  .g-roulette .rl:not(.is-tel) .rl-colg.is-ouvert .rl-rules { display: block; order: 3; width: 100%; white-space: normal; }
  .g-roulette .rl:not(.is-tel) .rl-colg.is-ouvert .rl-opts { display: flex; order: 4; width: 100%; }
  .g-roulette .rl:not(.is-tel) .rl-colg.is-ouvert .rl-rail-g { display: flex; }
  .g-roulette .rl:not(.is-tel) .rl-felt { padding: 8px 12px 10px; gap: 8px; }
}
/* TÉLÉPHONE — N5 (annexe B remesurée sur d1cc705) : « Tableau | Champ de course », posé à 30 px sur le tapis incliné (rotateX : 26,5 à
   28,5 px à l'écran) : une zone de toucher de 42 px posés (≈ 37 px à l'écran) par un cadre transparent de 6 px en haut et en bas ; la
   grille ne bouge pas, la pastille d'or ne change pas. Bornée au téléphone. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .g-roulette .rl-matseg > button { position: relative; }
  .g-roulette .rl-matseg > button::after { content: ""; position: absolute; inset: -6px 0; border-radius: 999px; }
}
/* TÉLÉPHONE COUCHÉ — N8 (DECISIONS-TEL-2-1310.md:395-396 ; mesuré d'abord sur bc16bc2, s5-tel-rl-derniers.mjs, k) : à 844 × 390, la
   barre du bas ne tenait pas : la boîte du total tombait à 0 px et le texte de « Solde / Mes mises » débordait, peint par-dessus
   « Rejouer » et « ×2 ». Comme au portrait (.rl.is-tel) : les boutons gardent leur icône seule (leur nom reste lu : aria-label), le solde se lit dans
   la barre du haut, la touche « Espace » se retire (sans objet au doigt). Bornée au téléphone couché : le PC ne change pas. */
@media (orientation: landscape) and (max-height: 560px) {
  .g-roulette .rl:not(.is-tel) .rl-btns .btn-sm { min-width: 36px; }
  .g-roulette .rl:not(.is-tel) .rl-btns .rl-bico { display: inline; font-size: 15px; }
  .g-roulette .rl:not(.is-tel) .rl-btns .rl-blab:not(.is-seul), .g-roulette .rl:not(.is-tel) .rl-spin .kbd,
  .g-roulette .rl:not(.is-tel) .rl-tot-solde { display: none; }
}
/* TÉLÉPHONE EN PORTRAIT — N20 (revue finale R2, n° 5) : les cartes des joueurs tenaient dans une bande de 126 à 156 px entre « Table » et le
   sélecteur 2D | 3D, une rangée sans retour dans une plaque à défilement horizontal : la carte du 2e joueur (son nom, son état, son Σ,
   « Copier ») passait sous le sélecteur et hors de l'écran, et à 360 px même celle du joueur était rognée. La bande va du bord de « Table »
   au bord droit ; ses cartes vont à la ligne (aucune ne se cache) et peuvent prendre sa largeur : le nom et l'état ne se coupent que si la
   bande est trop étroite. Sa hauteur s'arrête au-dessus de l'annonce du croupier (au-delà, à beaucoup de joueurs, elle défile). « Copier »
   prend 32 px de haut (au doigt). Le sélecteur 2D | 3D se range sous « Table », à gauche (la voie par jeu de css/trois.css). La roue des
   mises se replace seule (games/roulette.js, mesurerCadre : sous le plus bas de « Table » et de la bande). Le PC et le couché ne changent pas. */
@media (orientation: portrait) and (max-width: 480px) {
  .g-roulette .rl.is-tel .rl-rail-d { right: 8px; max-height: calc(100% - var(--rl-haut) - var(--rl-barre-h) - var(--rl-tapis-vu) - 42px); }
  .g-roulette .rl.is-tel .rl-joueurs { overflow-x: hidden; overflow-y: auto; }
  .g-roulette .rl.is-tel .rl-players { flex-wrap: wrap; }
  .g-roulette .rl.is-tel .rl-ptab { flex: 0 1 auto; max-width: 100%; }
  .g-roulette .rl.is-tel .rl-pinfo b, .g-roulette .rl.is-tel .rl-pinfo small { max-width: none; }
  .g-roulette .rl.is-tel .rl-copy { min-height: 32px; }
  .g-roulette .rl.is-tel:not(.is-seul) .trois-coin { --trois-coin-haut: calc(58px + var(--rl-haut)); }
  .g-roulette .rl.is-tel:not(.is-seul) .trois-coin-boite { right: auto; left: 8px; }
}
/* TÉLÉPHONE COUCHÉ ÉTROIT — N30 (question n° 3 de N28 ; mesuré d'abord sur 5edb7f5, s5-tel-rl-couche.mjs) : sous 844 px de large, la barre
   du bas ne tenait plus sur sa rangée : « Prêt » (150 px) sortait de l'écran par la droite à 640 et 667 (« La bille roule », 167,5 px : à
   740 aussi), « Lancer la bille » (seul) à 640 et 667, et la boîte du total tombait à 0 px : « Mes mises » et son montant se peignaient sur
   « Rejouer » et « ×2 ». Comme au portrait (.rl.is-tel) : « Prêt » prend 108 px et deux lignes au besoin, « Lancer » perd « la bille »,
   les jetons font 34 px et se répartissent la place ; le total garde sa largeur et se rogne plutôt que de
   déborder ; l'anneau du compte quitte la rangée et se pose juste au-dessus de « Prêt », dans la voie que le tapis laisse au bord droit
   (celle du sélecteur 2D | 3D, plus haut). Au Champ de course, le tapis montait de 38 px (deux rangées d'annonces) sur la plaque
   (« Table » recouvert) et « Faites vos jeux » passait sous la barre du haut : les deux groupes (voisins d'un numéro, finale) se rangent à
   côté de l'ovale, les quatre annonces dessous, les rangées à 4 px : le tapis n'y est plus plus haut qu'au Tableau. À 844 × 390 (que
   s5-tel-rl-derniers.mjs fige) et au PC, rien ne change. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 843px) {
  .g-roulette .rl:not(.is-tel) .rl-controls { gap: 8px; padding: 0 8px; }
  .g-roulette .rl:not(.is-tel) .rl-controls .chip-rack { flex: 1 0 auto; justify-content: space-between; gap: 0; }
  .g-roulette .rl:not(.is-tel) .rl-controls .chip-slot { padding: 2px; }
  .g-roulette .rl:not(.is-tel) .rl-controls .chip-rack .chip { --chip-size: 34px; }
  .g-roulette .rl:not(.is-tel) .rl-btns { gap: 4px; }
  .g-roulette .rl:not(.is-tel) .rl-total { flex: 0 1 auto; overflow: hidden; }
  .g-roulette .rl:not(.is-tel) .rl-tot b { font-size: 16px; }
  .g-roulette .rl:not(.is-tel) .rl-spin.btn-lg { height: 44px; padding: 0 14px; font-size: 13px; letter-spacing: .06em; }
  .g-roulette .rl:not(.is-tel) .rl-spin .rl-blab { display: none; }
  .g-roulette .rl:not(.is-tel).is-net .rl-spin.btn-lg { width: 108px; min-width: 0; padding: 0 8px; white-space: normal; line-height: 1.1; font-size: 12px; text-align: center; }
  .g-roulette .rl:not(.is-tel) .rl-ring { position: absolute; right: 8px; bottom: calc(100% + 8px); width: 44px; height: 44px; border-radius: 50%;
    background: rgba(5, 6, 11, .6); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-mat-g { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-ptabs { flex: 0 0 100%; }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-track { flex: none; width: calc(var(--rl-grille-h) * .62 * 650 / 170); }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-annonces { display: contents; }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-an, .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-annote { order: 1; }
}
/* TÉLÉPHONE COUCHÉ — N31, point 2 (question n° 2 de N30 ; mesuré d'abord sur 673679d, dev/tests-client/s5-tel-rl-couche2.mjs, C) : à 844 × 390,
   au Champ de course, le tapis (l'ovale, puis deux rangées d'annonces) montait de 38 px : il couvrait les 6 px du bas de « Table » et
   poussait « Faites vos jeux » sous la petite roue des mises (23,2 px sur son texte). La disposition de N30 (les deux groupes à côté de
   l'ovale, les quatre annonces dessous, rangées à 4 px) vaut désormais pour tout le téléphone couché, 844 px et plus : le tapis du Champ
   de course n'y est plus plus haut que celui du Tableau, « Table » est libre, l'annonce reste à sa place et la petite roue au-dessus d'elle
   (la règle de N23, qui retirerait la roue le temps des mises, n'est pas étendue : elle l'ôterait aussi à 640 et 740, où elle ne couvre pas
   l'encre de l'annonce). Changement délibéré de ce que s5-tel-rl-derniers.mjs fige à 844 × 390 au Champ de course (sa référence reprise :
   voir dev/audit/nuit/N31-JOURNAL.md). Le Tableau, sous 844 px et le PC : rien ne change. */
@media (orientation: landscape) and (max-height: 560px) and (min-width: 844px) {
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-mat-g { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-ptabs { flex: 0 0 100%; }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-track { flex: none; width: calc(var(--rl-grille-h) * .62 * 650 / 170); }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-annonces { display: contents; }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-an, .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-annote { order: 1; }
}
/* TÉLÉPHONE COUCHÉ — N31, point 3 (limite n° 3 de N30 ; mesuré d'abord sur 673679d, s5-tel-rl-couche2.mjs, P et S) : sous 640 px de large
   (568 × 320), « Prêt » restait entier, mais la barre ne tenait pas pour autant : la boîte du total tombait à 0 px, « Mes mises » et son
   montant rognés à rien (leur texte sous « Rejouer » et « ×2 »). Les jetons à 28 px (case de 32, le minimum de N5), les boutons d'icône à
   32 px, les écarts de la barre à 6 px : le total retrouve sa largeur (61 px en ligne, « Mes mises » ; 72,5 seul, « Sur le tapis »). 640 px
   et plus : rien ne change. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 639px) {
  .g-roulette .rl:not(.is-tel) .rl-controls { gap: 6px; padding: 0 6px; }
  .g-roulette .rl:not(.is-tel) .rl-controls .chip-rack .chip { --chip-size: 28px; }
  .g-roulette .rl:not(.is-tel) .rl-btns .btn-sm { min-width: 32px; padding: 0 6px; }
}
/* TÉLÉPHONE COUCHÉ — N34, point 2 (question n° 3 de N31 ; mesuré d'abord sur 0bbeab4, dev/tests-client/s5-tel-rl-couche2.mjs, P et S) : sous
   640 px de large (568 × 320), la plaque (44 px), l'annonce (30 px) et le tapis (142 px au Tableau) ne tenaient pas ensemble dans les 186 px
   que laisse la barre : le centre de « Table » sous le tapis, « Faites vos jeux » sur la plaque (« Table ») et sous la petite roue ; au Champ
   de course, trop étroit, le tapis passait sur cinq rangées (225 px) et montait sous la barre du haut (« Tableau », « Champ de course » et
   l'annonce hors de l'écran) ; « Table » ouvert, le panneau, borné au-dessus de la barre, écrasait la rangée des statistiques à 9 px
   (« Statistiques » rogné, son centre sous la barre). Ce qui change, sous 640 px seulement :
   - la plaque : son titre se lit dans « Table » ouvert (comme au portrait) ; 40 px de haut, à 4 px du haut : le logo et « Table » ;
   - « Table » ouvert : le panneau peut descendre jusqu'à 12 px du bas, par-dessus la barre, le temps des réglages ;
   - le tapis : à 2 px de la barre, ses marges et ses rangées resserrées (4 px) : il passe sous la plaque, l'annonce entre les deux ;
   - le Champ de course sur trois rangées, comme au-delà de 640 px : la bascule et « voisins » (les derniers numéros, qui n'y tiennent
     plus qu'à 18 px, s'y retirent : ils se lisent au Tableau) ; l'ovale (un peu plus petit) et les deux groupes ; les quatre annonces,
     leurs unités (« 9 u ») lues, pas vues ;
   - la petite roue des mises n'a plus de place au-dessus de l'annonce : elle se retire le temps des mises, au-dessus de la scène, et
     revient à sa grande place au tirage — la règle de N23 au portrait, que games/roulette.js (mesurerCadre) applique quand la feuille
     pose --rl-roue-retrait (une seule borne, ici).
   640 px et plus, le portrait et le PC : rien ne change. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 639px) {
  .g-roulette .rl:not(.is-tel) { --rl-roue-retrait: 1; }
  .g-roulette .rl:not(.is-tel) .rl-colg { top: 4px; }
  .g-roulette .rl:not(.is-tel) .rl-colg:not(.is-ouvert) .rl-title h1 { display: none; }
  .g-roulette .rl:not(.is-tel) .rl-top { min-height: 40px; }
  .g-roulette .rl:not(.is-tel) .rl-colg.is-ouvert { max-height: calc(100% - 16px); }
  .g-roulette .rl:not(.is-tel) .rl-tapis { padding-bottom: 2px; }
  .g-roulette .rl:not(.is-tel) .rl-felt { padding: 4px 10px 6px; gap: 4px; }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-ptabs .rl-hist { display: none; }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-mat-g { gap: 4px 6px; }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-track { width: calc(var(--rl-grille-h) * .58 * 650 / 170); }
  .g-roulette .rl:not(.is-tel) .rl-felt.is-ovale .rl-an .rl-u { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}