/* MINUIT — l'hôte animateur (js/animateur.js) : Roue du destin plein écran, carte du Rassemblement, outils 🎡 📣 de l'hôte.
   Couches (échelle de css/base.css) : .an-tools 900 (hall, hôte seul, comme .rp-tools) · .an-pop 1090 (comme .rp-pop) ·
   .an-roue 1140 (moment de groupe : au-dessus des modales 1100, sous le podium 1150) · .an-card 1145 (rassemblement, 5 s). */

/* ---------- la Roue du destin ---------- */
.an-roue {
  position: fixed; inset: 0; z-index: 1140; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-items: center;
  padding: 18px 16px 22px; overflow: hidden; color: var(--text);
  background:
    radial-gradient(60% 55% at 50% 56%, rgba(222,184,92,.16), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, rgba(10,8,24,.9), rgba(3,3,8,.985) 72%);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .35s ease;
}
.an-roue.is-open { opacity: 1; }
.an-roue.is-out { opacity: 0; pointer-events: none; }
.an-roue::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: .09; mix-blend-mode: overlay; }
.an-rays { position: absolute; left: 50%; top: 56%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(247,221,143,.10) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 55%); mask: radial-gradient(circle, #000 0 18%, transparent 55%);
  animation: an-rayons 26s linear infinite; }
@keyframes an-rayons { to { transform: rotate(360deg); } }
.an-head { position: relative; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center;
  transform: translateY(-14px); opacity: 0; transition: transform .6s cubic-bezier(.2,.9,.3,1.2) .1s, opacity .5s .1s; }
.an-roue.is-open .an-head { transform: none; opacity: 1; }
.an-kick { font: 600 11px/1.4 var(--font-ui); letter-spacing: .5em; text-transform: uppercase; color: var(--gold); padding-left: .5em; }
.an-q { margin: 0; font: 400 clamp(30px, 4.4vw, 58px)/1 var(--font-display); letter-spacing: .01em;
  background: linear-gradient(180deg, #fff4cf 0%, var(--gold-hi) 38%, var(--gold) 62%, #9c7424 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(222,184,92,.25)); }
.an-sub { font: 500 14px/1.3 var(--font-ui); color: var(--text-dim); max-width: min(760px, 92vw); }
.an-stage { position: relative; display: grid; place-items: center; transform: scale(.86) rotate(-8deg); opacity: 0;
  transition: transform .8s cubic-bezier(.2,.9,.25,1.15) .15s, opacity .5s .15s; }
.an-roue.is-open .an-stage { transform: none; opacity: 1; }
.an-wheel { display: block; filter: drop-shadow(0 26px 50px rgba(0,0,0,.65)) drop-shadow(0 0 40px rgba(222,184,92,.18)); }
.an-roue.is-stopped .an-stage { transform: scale(.92); transition: transform .9s cubic-bezier(.2,.9,.3,1); }
.an-roue.is-stopped .an-wheel { filter: drop-shadow(0 26px 50px rgba(0,0,0,.65)) brightness(.55) saturate(.8); transition: filter .8s ease; }

/* le verdict, posé sur la roue arrêtée */
.an-verdict { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%) scale(.8); opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: min(760px, 92vw); padding: 22px 26px 24px;
  border-radius: 22px; border: 1px solid rgba(247,221,143,.55);
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--pc, #deb85c) 30%, transparent), transparent 60%), linear-gradient(180deg, rgba(20,16,36,.94), rgba(6,6,14,.96));
  box-shadow: 0 0 0 6px rgba(222,184,92,.08), 0 30px 80px rgba(0,0,0,.7), 0 0 60px color-mix(in srgb, var(--pc, #deb85c) 35%, transparent); }
.an-roue.is-stopped .an-verdict { animation: an-verdict .9s cubic-bezier(.2,.9,.25,1.3) .35s forwards; }
@keyframes an-verdict { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.an-choisi { font: 500 15px/1.3 var(--font-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.an-nom { display: flex; align-items: center; justify-content: center; gap: 14px; font: 400 clamp(40px, 6vw, 84px)/1.05 var(--font-display); color: #fff4cf;
  text-shadow: 0 4px 0 rgba(0,0,0,.45), 0 0 30px color-mix(in srgb, var(--pc, #deb85c) 60%, transparent); }
.an-av { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; font-size: .78em; line-height: 1;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc, #deb85c) 55%, #fff 10%), color-mix(in srgb, var(--pc, #deb85c) 40%, #000 60%));
  box-shadow: 0 0 0 3px var(--gold), 0 0 24px color-mix(in srgb, var(--pc, #deb85c) 70%, transparent); }
.an-ligne { font: 600 clamp(17px, 1.8vw, 24px)/1.25 var(--font-ui); color: var(--text); max-width: 680px; }
.an-detail { font: 700 18px/1.2 var(--font-num); color: var(--win); min-height: 1.2em; }
.an-detail:empty { display: none; }
.an-roue[data-usage="gage"] .an-ligne { color: var(--gold-hi); font-style: italic; }
.an-close { position: absolute; right: 18px; top: 16px; z-index: 2; }
.an-roue:not(.is-stopped) .an-close { opacity: .5; }

/* ---------- la carte du Rassemblement ---------- */
.an-card { position: fixed; left: calc(50% - 220px); top: 84px; z-index: 1145; width: min(440px, calc(100vw - 24px));
  display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: center; padding: 14px 16px 14px 14px; border-radius: 18px;
  border: 1px solid rgba(247,221,143,.6); color: var(--text);
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--pc, #deb85c) 22%, transparent), transparent 55%), linear-gradient(180deg, #1c1834, #0b0c18);
  box-shadow: 0 0 0 5px rgba(222,184,92,.10), 0 24px 60px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(-16px) scale(.96); transition: opacity .3s, transform .45s cubic-bezier(.2,.9,.25,1.3); }
.an-card.is-on { opacity: 1; transform: none; }
.an-card.is-out { opacity: 0; transform: translateY(-10px) scale(.97); pointer-events: none; }
.an-c-ring { position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--gold-hi) calc(var(--p, 1) * 360deg), rgba(222,184,92,.15) 0); }
.an-c-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #0b0c18; }
.an-c-n { position: relative; font: 700 24px/1 var(--font-num); color: var(--gold-hi); }
.an-card.is-busy .an-c-ring { background: conic-gradient(var(--text-dim) calc(var(--p, 1) * 360deg), rgba(255,255,255,.08) 0); }
.an-c-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.an-c-k { font: 600 11px/1.4 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.an-c-t { font: 400 26px/1.1 var(--font-display); color: #fff4cf; }
.an-c-s { font-size: 12.5px; color: var(--text-dim); }
.an-card.is-busy .an-c-s { color: var(--warn); }
.an-c-row { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
/* rappel compact d'un pote engagé dans une manche : petit, à une place libre, jamais sur son jeu */
.an-card.is-mini { display: flex; align-items: center; gap: 8px; width: auto; max-width: min(560px, calc(100vw - 24px)); padding: 5px 6px 5px 14px;
  border-radius: 999px; box-shadow: 0 0 0 3px rgba(222,184,92,.08), 0 12px 30px rgba(0,0,0,.5); }
.an-mini-t { font: 600 13px/1.2 var(--font-ui); color: #fff4cf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.an-mini-s { font-size: 11.5px; color: var(--warn); white-space: nowrap; }
.an-card.is-mini .btn { height: 28px; padding: 0 10px; }

/* ---------- chez l'hôte ---------- */
.an-tools { position: fixed; left: 118px; bottom: 10px; z-index: 900; display: flex; gap: 6px; padding: 4px; border-radius: 14px;
  background: rgba(10,13,24,.72); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.an-tools[hidden] { display: none; }
.an-tool { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line-strong); background: rgba(5,6,11,.6); color: var(--gold-hi);
  font-size: 19px; line-height: 1; cursor: pointer; transition: border-color .2s, transform .12s, background .2s; }
.an-tool:hover { border-color: var(--gold); background: rgba(222,184,92,.12); transform: translateY(-1px); }
.an-pop { position: fixed; left: 12px; top: 80px; z-index: 1090; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 20px); overflow: auto; padding: 14px; border-radius: 16px;
  border: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(26,32,64,.97), rgba(10,13,24,.98)); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 10px; }
.an-pop-t { font: 400 20px/1.1 var(--font-display); color: var(--gold-hi); }
.an-pop-sub { font-size: 12px; color: var(--text-dim); }
.an-pop-info { font-size: 12.5px; color: var(--text); }
.an-pop-row { display: flex; gap: 8px; }
.an-choix { display: flex; flex-direction: column; gap: 6px; }
.an-opt { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
  padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5,6,11,.45); color: var(--text); cursor: pointer; }
.an-opt:hover { border-color: var(--line-strong); }
.an-opt.is-on { border-color: var(--gold); background: rgba(222,184,92,.12); box-shadow: 0 0 0 1px rgba(222,184,92,.35) inset; }
.an-opt-i { grid-row: 1 / 3; font-size: 20px; text-align: center; }
.an-opt-t { font: 600 14px/1.2 var(--font-ui); }
.an-opt-s { font-size: 11.5px; color: var(--text-dim); }
.an-gage[hidden] { display: none; }
.an-jeux { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.an-jeu { position: relative; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px; border-radius: 11px; border: 1px solid var(--line);
  background: rgba(5,6,11,.45); color: var(--text); font: 600 13px/1 var(--font-ui); cursor: pointer; text-align: left; }
.an-jeu:hover { border-color: var(--gold); background: rgba(222,184,92,.10); }
.an-jeu-i { width: 22px; height: 22px; flex: none; }
.an-jeu-i:empty { display: none; }
.an-jeu-i svg { width: 100%; height: 100%; display: block; }
.an-jeu-c { margin-left: auto; font-size: 11px; color: var(--win); }

/* qualité allégée et animations réduites */
.perf-low .an-rays { animation: none; opacity: .3; }
.perf-low .an-roue { -webkit-backdrop-filter: none; backdrop-filter: none; }
.perf-low .an-wheel { filter: none; }
.perf-low .an-roue.is-stopped .an-wheel { filter: brightness(.55); }
.reduce-motion .an-rays { animation: none; }
.reduce-motion .an-stage, .reduce-motion .an-head { transition: opacity .2s; transform: none; }
.reduce-motion .an-roue.is-stopped .an-verdict { animation: none; opacity: 1; transform: translate(-50%, -50%); }