/* MINUIT — kit 3D : cadre des vues 3D/2D, voile « La table s'installe… », ancres DOM, sélecteur « 2D | 3D » de la table.
   Mouvements : opacité seulement, sortie en ease-out, ≤ 280 ms ; le voile n'apparaît que si l'installation dure (> 300 ms) ;
   « Animations réduites » (html.reduce-motion) : aucune transition. */
.trois-cadre { position: relative; width: 100%; height: 100%; overflow: hidden; }
.trois-couche { position: absolute; inset: 0; }
/* la 3D s'installe AU-DESSUS de la 2D, qui reste visible et cliquable tant qu'elle n'est pas prête */
.trois-couche.trois-3d { pointer-events: none; }
.trois-couche.trois-3d.est-active { pointer-events: auto; }
.trois-scene { position: absolute; inset: 0; overflow: hidden; }
.trois-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 280ms cubic-bezier(.23, 1, .32, 1); }
.trois-scene.est-prete .trois-canvas { opacity: 1; }

/* voile : art déco, or sur nuit ; invisible si la table s'installe en moins de 300 ms */
.trois-voile {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: 14px; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 45%, rgba(26, 32, 64, .82), rgba(5, 6, 11, .9));
  color: var(--gold-hi, #f7dd8f); opacity: 0;
  animation: trois-voile-entree 220ms cubic-bezier(.23, 1, .32, 1) 300ms forwards;
}
.trois-voile-texte { font: 400 22px/1.2 var(--font-display, Georgia, serif); letter-spacing: .06em; text-shadow: 0 0 18px rgba(247, 221, 143, .35); }
.trois-voile-motif {
  width: 44px; height: 44px; transform: rotate(45deg);
  background: radial-gradient(circle, var(--gold-hi, #f7dd8f) 0 22%, var(--gold, #deb85c) 23% 40%, #0a1027 41%);
  border: 2px solid var(--gold, #deb85c); box-shadow: 0 0 22px rgba(247, 221, 143, .35);
  animation: trois-voile-souffle 1600ms ease-in-out infinite;
}
.trois-scene.est-prete .trois-voile { animation: none; opacity: 0; transition: opacity 160ms ease-out; }
@keyframes trois-voile-entree { from { opacity: 0; } to { opacity: 1; } }
@keyframes trois-voile-souffle { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* éléments du DOM tenus au-dessus d'un point 3D (noms, totaux, zones de mise) : accessibles au clavier et aux lecteurs */
.trois-ancre { position: absolute; left: 0; top: 0; will-change: transform; z-index: 3; }

/* sélecteur « 2D | 3D » : posé par le kit au coin haut-droit de la scène, au même endroit dans chaque table. Même matière que les .seg
   du casino (pilule, l'actif en or). Au-dessus des vues (z 30), sous les couvertures plein cadre des jeux (≥ 40 : annonces, salon).
   Un jeu qui aurait un résultat dans ce coin le décale chez lui : .g-<jeu> .trois-coin { --trois-coin-haut: …; --trois-coin-droite: …; }
   En ligne, quand la réglette des potes flotte sous la barre du haut et couvre ce coin, le kit le descend juste sous elle : chaque
   « top » ci-dessous ajoute --trois-coin-pousse (mesurée par js/3d/socle.js, 0 sinon). */
.trois-coin { position: absolute; inset: 0 0 auto 0; height: 0; z-index: 30; pointer-events: none; container: trois-coin / inline-size; }
.trois-coin-boite {
  position: absolute; top: calc(var(--trois-coin-haut, 16px) + var(--trois-coin-pousse, 0px)); right: var(--trois-coin-droite, 16px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
/* trois classes : passe devant ce que les jeux donnaient à l'ancien bouton (.rl-bvue, .pk-bvue, .cr-bvue : marges, hauteur, largeur) */
.trois-cadre .trois-coin .trois-vue {
  display: inline-flex; align-items: center; gap: 2px; flex: none; margin: 0; padding: 3px; border-radius: 999px;
  width: auto; height: auto; min-width: 0; min-height: 0;
  border: 1px solid var(--line-strong, rgba(222, 184, 92, .45)); background: rgba(5, 6, 11, .82); box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
  pointer-events: auto;
}
.trois-vue-choix {
  position: relative; min-width: 40px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent;
  color: var(--text-dim, #a9a28e); font: 600 12px/1 var(--font-num, monospace); letter-spacing: .08em; cursor: pointer;
  transition: background-color 180ms cubic-bezier(.23, 1, .32, 1), color 180ms cubic-bezier(.23, 1, .32, 1);
}
.trois-vue-choix:hover { color: var(--text, #f4ecd8); }
.trois-vue-choix.is-on {
  background: linear-gradient(180deg, var(--gold-hi, #f7dd8f), var(--gold, #deb85c)); color: #241904; cursor: default;
  box-shadow: 0 2px 10px rgba(222, 184, 92, .3);
}
.trois-vue-choix:focus-visible { outline: 2px solid var(--gold-hi, #f7dd8f); outline-offset: 2px; }
/* la 3D s'installe : un fil d'or respire sous son libellé */
.trois-vue.est-en-cours .trois-vue-choix[data-vue="3d"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .55; animation: trois-vue-attente 900ms ease-in-out infinite;
}
@keyframes trois-vue-attente { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
/* la 3D est impossible ici : barrée ; la raison en infobulle, et dite sous le sélecteur après un repli ou un essai manqué */
.trois-vue-choix[data-indispo] { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.trois-vue-raison {
  margin: 0; max-width: min(280px, calc(100cqw - 32px)); padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--line, rgba(222, 184, 92, .2)); background: rgba(5, 6, 11, .9); color: var(--text, #f4ecd8);
  font: 500 12px/1.35 var(--font-ui, sans-serif); text-align: right; text-wrap: pretty; pointer-events: none;
  opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.trois-vue-raison:empty { display: none; }
.trois-coin-boite.est-dite .trois-vue-raison { opacity: 1; transform: none; }
/* au doigt : des cibles de 44 px (avec la marge du groupe) */
@media (pointer: coarse) { .trois-vue-choix { height: 38px; min-width: 44px; } }
/* scène étroite (les colonnes du téléphone) : compact, les deux choix l'un sous l'autre, près du bord */
@container trois-coin (max-width: 240px) {
  .trois-coin-boite { top: calc(6px + var(--trois-coin-pousse, 0px)); right: 6px; }
  .trois-cadre .trois-coin .trois-vue { flex-direction: column; border-radius: 16px; }
  .trois-vue-choix { min-width: 34px; height: 30px; padding: 0 6px; }
}
/* scène plus étroite que le sélecteur (le Plinko au téléphone : 30 px) : il n'y tiendrait que rogné, on ne le montre pas */
@container trois-coin (max-width: 60px) { .trois-coin-boite { display: none; } }
/* décalages par jeu. Blackjack, scène ≤ 800 px (téléphone, tablette) : le sabot occupe le coin et les cartes de la place de droite
   commencent juste dessous. Le sélecteur, compact en colonne, se range le long du bord droit, à côté du sabot, à la même place en 2D
   et en 3D (vérifié main distribuée : vue-donne). Décalé sous le sabot, il couvrait les cartes et le total de cette place. */
@container trois-coin (max-width: 800px) {
  .g-blackjack .trois-coin-boite { top: calc(6px + var(--trois-coin-pousse, 0px)); right: 4px; }
  .g-blackjack .trois-cadre .trois-coin .trois-vue { flex-direction: column; border-radius: 16px; }
  .g-blackjack .trois-vue-choix { min-width: 30px; height: 30px; padding: 0 4px; }
}
/* Fusée, colonne étroite (téléphone) : sous l'étiquette du haut de l'axe (« 1,8× ») que la toile dessine dans ce coin */
@container trois-coin (max-width: 240px) { .g-crash .trois-coin-boite { top: calc(40px + var(--trois-coin-pousse, 0px)); } }
/* scène étroite poussée sous la réglette des potes (Pile ou face au téléphone, en ligne) : en ligne et bas (30 px), pour tenir entre la
   réglette et le jeu ; des choix de 24 px de haut, le minimum de WCAG 2.5.8 */
@container trois-coin (max-width: 240px) {
  .trois-coin.est-pousse .trois-vue { flex-direction: row; border-radius: 999px; padding: 2px; }
  .trois-coin.est-pousse .trois-vue-choix { min-width: 28px; height: 24px; padding: 0 5px; }
}

html.reduce-motion .trois-canvas, html.reduce-motion .trois-scene.est-prete .trois-voile { transition: none; }
html.reduce-motion .trois-voile { animation: none; opacity: 1; }
html.reduce-motion .trois-voile-motif { animation: none; }
html.reduce-motion .trois-vue-choix, html.reduce-motion .trois-vue-raison { transition: none; }
html.reduce-motion .trois-vue.est-en-cours .trois-vue-choix[data-vue="3d"]::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .trois-vue.est-en-cours .trois-vue-choix[data-vue="3d"]::after { animation: none; }
  .trois-vue-raison { transform: none; }
}
/* TÉLÉPHONE — N5 (annexe B remesurée sur d1cc705) : le sélecteur 2D | 3D, ramené à 30 px par les scènes étroites (ce fichier,
   games/blackjack.css, coinflip.css, roulette.css) : 32 px au moins. Bornée au téléphone. */
@media (orientation: portrait) and (max-width: 480px), (orientation: landscape) and (max-height: 560px) {
  .trois-coin-boite .trois-vue .trois-vue-choix { min-width: 32px; min-height: 32px; }
}