/* ===========================================================
   LA BOUTEILLE — salon de velours, bouteille au centre du cercle
   =========================================================== */
body.bouteille-jeu {
  --theme: #c2185b;
  --theme-2: #e8a33d;
  --or: #e8c26a;
  --panneau: rgba(22, 10, 26, 0.9);
  background: #120a1a;
}
.velours {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(194, 24, 91, 0.28), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(232, 163, 61, 0.16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 6px),
    #120a1a;
}
.affiche { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or); }

/* ---------- Jeu ---------- */
.ecran.jeu { gap: 10px; }
.chaleur-jauge { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; flex: none; }
.chaleur-jauge span { display: block; height: 100%; background: linear-gradient(90deg, #e8a33d, #c2185b, #ff2e4d); transition: width 0.8s ease; }

.cercle {
  --r: min(36vw, 150px, 18dvh);
  position: relative; flex: none; align-self: center;
  width: calc(var(--r) * 2 + 76px); height: calc(var(--r) * 2 + 86px);
  border-radius: 50%;
}
.cercle::before {
  content: ''; position: absolute; inset: 38px 38px 48px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 163, 61, 0.14), rgba(194, 24, 91, 0.06) 60%, transparent 70%);
  border: 1px dashed rgba(232, 194, 106, 0.25);
}
.place {
  --a: 0deg;
  position: absolute; left: 50%; top: calc(50% - 5px); width: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
  transition: filter 0.3s;
}
.place .perso { width: 44px; height: 56px; transition: transform 0.3s; }
.place .nom {
  max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px 7px; border-radius: 999px; font-size: 0.7rem; font-weight: 800;
  background: rgba(0, 0, 0, 0.5); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
}
.place.designe .perso { transform: scale(1.22); filter: drop-shadow(0 0 10px var(--c)); }
.place.designe .nom { background: var(--c); color: #fff; }
.place.cible .perso { transform: scale(1.15); filter: drop-shadow(0 0 10px #fff); }
.place.cible .nom { background: #fff; color: #1a0f1f; }

.bouteille {
  position: absolute; left: 50%; top: calc(50% - 5px); width: 34px; height: 102px;
  transform: translate(-50%, -50%) rotate(0deg); transform-origin: 50% 50%;
  transition: transform 2s cubic-bezier(0.17, 0.67, 0.21, 1);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}
.bouteille svg { width: 100%; height: 100%; }

.tableau {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center;
  padding: 16px; border-radius: 22px; background: var(--panneau);
  border: 1px solid rgba(232, 194, 106, 0.25); box-shadow: 0 20px 60px -20px rgba(194, 24, 91, 0.5);
  overflow-y: auto;
}
.tableau.entree { animation: entree 0.35s ease; }
@keyframes entree { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.t-titre { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--or); text-align: center; }
.t-texte { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(1.25rem, 5.6vw, 1.6rem); line-height: 1.25; text-align: center; color: #fff; }
.t-texte:empty { display: none; }
.t-actions { display: grid; gap: 8px; margin-top: auto; position: sticky; bottom: 0; }
.t-actions.deux { grid-template-columns: 1fr 1fr; }
.t-actions .btn { margin: 0; }

/* ---------- Fin ---------- */
.fin { justify-content: safe center; gap: 12px; overflow-y: auto; text-align: center; }
.fin h2 { font-family: var(--serif); font-size: clamp(1.8rem, 8vw, 2.4rem); margin: 0; }
.palmares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 400px; align-self: center; }
.palmares li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.35); border-left: 4px solid var(--c); text-align: left; }
.palmares span { color: var(--muted); font-size: 0.85rem; }
.fin .actions-fin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 400px; align-self: center; }
.fin .actions-fin .primary { grid-column: 1 / -1; }
.fin .actions-fin .btn { margin: 0; }

@media (max-height: 700px) {
  .cercle { --r: min(32vw, 110px, 15dvh); }
  .place .perso { width: 34px; height: 44px; }
  .t-texte { font-size: clamp(1.1rem, 5vw, 1.35rem); }
}
@media (prefers-reduced-motion: reduce) {
  .bouteille { transition-duration: 0.3s; }
  .tableau.entree { animation: none; }
}