/* Zone du jeu Roue de la fortune. Les ecrans communs (accueil, fin) viennent
   de jeu.css ; ici, la roue et son habillage « fete foraine » : jante metal,
   ampoules, aiguille et bouton central en relief. Les couleurs viennent du
   rendu (variables --rw-*), calculees depuis les reglages de la campagne. */
.rw-jeu { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; box-sizing: border-box; background-color: var(--fond, #030062); background-image: radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .45)); background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--jeu-hud-texte, #ffffff); text-align: center; }
.rw-jeu[hidden] { display: none; }
.rw-logo { max-width: 140px; max-height: 60px; object-fit: contain; }
.rw-logo[hidden] { display: none; }
.rw-consigne { margin: 0; font-size: clamp(15px, 4vw, 19px); font-weight: 600; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.rw-tour { margin: 0; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; opacity: .85; }
.rw-tour[hidden] { display: none; }

/* La roue : halo colore par la jante, ombre portee sous le disque. */
.rw-roue { position: relative; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 18px 40px rgba(0, 0, 0, .55), 0 0 70px var(--rw-halo, rgba(242, 193, 78, .35)); }
.rw-disque { display: block; border-radius: 50%; will-change: transform; touch-action: none; cursor: grab; }
.rw-ampoules { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
/* A la fin du tour, la roue s assombrit sous le resultat pour le rendre lisible. */
.rw-disque, .rw-ampoules { transition: filter .5s ease; }
.rw-fin .rw-disque, .rw-fin .rw-ampoules { filter: brightness(.4) saturate(.7); }
.rw-fin .rw-centre { opacity: .5; }

/* Aiguille en relief : triangle en degrade metal, reflet en bord d attaque,
   ombre portee ; elle rebondit a chaque secteur franchi. */
.rw-aiguille { position: absolute; top: -14px; left: 50%; width: 40px; height: 54px; margin-left: -20px; background: linear-gradient(105deg, var(--rw-aiguille-clair, #fbe7a9) 0%, var(--rw-aiguille, #f2c14e) 45%, var(--rw-aiguille-sombre, #916f21) 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5)); transform-origin: 50% 12%; transition: transform 80ms ease-out; z-index: 3; pointer-events: none; }
.rw-aiguille::after { content: ''; position: absolute; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff, var(--rw-aiguille, #f2c14e) 70%); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.rw-aiguille-tic { transform: rotate(-12deg); }

/* Bouton central : bossage metal (anneau dans la couleur de la jante),
   fond dans la couleur des boutons du theme, ombre interne. */
.rw-centre { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 5px solid var(--rw-jante, #f2c14e); background-color: var(--jeu-bouton-fond, #111111); background-image: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, .35)); color: var(--jeu-bouton-texte, #ffffff); font: inherit; font-weight: 900; font-size: clamp(12px, 3.2vw, 16px); letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); cursor: pointer; box-shadow: 0 0 0 2px var(--rw-jante-clair, #fbe7a9) inset, 0 8px 18px rgba(0, 0, 0, .5), 0 0 0 3px rgba(0, 0, 0, .25); z-index: 4; display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; }
.rw-centre:disabled { cursor: default; opacity: .85; }
.rw-centre img { width: 100%; height: 100%; object-fit: cover; }
.rw-centre img[hidden], .rw-centre span[hidden] { display: none; }
.rw-centre:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }