:root {
  --fond: #12141c;
  --texte: #f2f3f7;
  --sourdine: #9aa0b4;
  --accent: #ffd166;
  --bord: #2b2f3d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 18px 16px 32px;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 100vh;
}

h1 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

main {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* --- Roue --- */

#scene { position: relative; width: 100%; aspect-ratio: 1; max-width: min(420px, 58vh); margin-inline: auto; }

#roue { width: 100%; height: 100%; display: block; }

#pointeur {
  position: absolute;
  top: -2px; left: 50%;
  translate: -50% 0;
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 26px solid var(--accent);
  filter: drop-shadow(0 2px 3px #0008);
  z-index: 2;
}

#tourner {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 26%; aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid var(--fond);
  background: var(--accent);
  color: #12141c;
  font: inherit;
  font-weight: 700;
  font-size: clamp(11px, 2.6vw, 14px);
  letter-spacing: .06em;
  cursor: pointer;
  z-index: 1;
  box-shadow: 0 6px 20px #0007;
}
#tourner:hover:not(:disabled) { filter: brightness(1.08); }
#tourner:active:not(:disabled) { scale: .96; }
#tourner:disabled { cursor: default; opacity: .55; }

#resultat {
  margin: 0;
  min-height: 2.4rem;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}
#resultat.gagne { animation: apparait .45s ease-out; }
@keyframes apparait {
  from { opacity: 0; scale: .8; }
  to   { opacity: 1; scale: 1; }
}

/* --- Saisie --- */

.etiquette { align-self: flex-start; color: var(--sourdine); font-size: .85rem; }

textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--bord);
  background: #191c27;
  color: var(--texte);
  font: inherit;
  resize: vertical;
}
textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Panneau de réglages --- */

#panneau {
  position: fixed;
  inset: 0;
  background: #000a;
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 10;
}
#panneau[hidden] { display: none; }

#panneau-boite {
  width: min(460px, 100%);
  max-height: 85vh;
  overflow: auto;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--bord);
  background: #191c27;
}

#panneau-boite header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

#fermer, .discret {
  background: none;
  border: 1px solid var(--bord);
  border-radius: 8px;
  color: var(--sourdine);
  font: inherit;
  padding: 4px 10px;
  cursor: pointer;
}
.discret { width: 100%; padding: 8px; }
#fermer:hover, .discret:hover { color: var(--texte); border-color: var(--sourdine); }

.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > span { font-size: .85rem; color: var(--sourdine); }

select, input[type="number"] {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--bord);
  background: #12141c;
  color: var(--texte);
  font: inherit;
}

.ligne { display: flex; align-items: center; gap: 8px; font-size: .9rem; }

.aide { font-size: .8rem; color: var(--sourdine); margin: 8px 0; }
.sourdine { opacity: .6; margin-top: 14px; }

hr { border: none; border-top: 1px solid var(--bord); margin: 16px 0; }

table { width: 100%; border-collapse: collapse; }
td { padding: 5px 0; }
td:first-child { width: 100%; }
td.chance { color: var(--sourdine); font-variant-numeric: tabular-nums; text-align: right; padding-right: 10px; white-space: nowrap; }
input[type="number"] { width: 70px; }
tr.exclue td:first-child { text-decoration: line-through; color: var(--sourdine); }

@media (prefers-reduced-motion: reduce) {
  #resultat.gagne { animation: none; }
}