:root {
  --pink: #ff2d95;
  --pink-deep: #d1006b;
  --blush: #ffd1e8;
  --cream: #fff6fb;
  --lilac: #c58bff;
  --gold: #ffd95e;
  --ink: #5a1239;
  --muted: #a24f7c;
  --radius: 24px;
  --script: 'Pacifico', cursive;
  --sans: 'Fredoka', system-ui, sans-serif;
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgb(255 255 255 / .8) 0 2px, transparent 3px) 0 0 / 90px 90px,
    radial-gradient(circle at 70% 60%, rgb(255 255 255 / .6) 0 1.5px, transparent 2.5px) 0 0 / 130px 130px,
    radial-gradient(ellipse 70% 50% at 50% 0%, #fff8 0%, transparent 70%),
    linear-gradient(160deg, #ffe3f1, #ffc4e1 45%, #f3b8ff);
  background-attachment: fixed;
  overflow-x: hidden;
}

main { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }

/* --- En-tête --- */
.top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 760px; margin: 0 auto; padding: 18px 16px;
}
.logo {
  margin: 0; font: 400 2rem var(--script); color: var(--pink);
  text-shadow: 2px 2px 0 #fff, 4px 4px 0 rgb(209 0 107 / .25);
  display: flex; align-items: center; gap: 6px;
}
.logo em {
  font-style: normal;
  background: linear-gradient(90deg, var(--pink-deep), var(--lilac), var(--pink), var(--pink-deep));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(2px 2px 0 #fff);
  animation: shimmer-text 4s linear infinite;
}
.tiara { display: inline-block; font-size: 1.6rem; animation: bob 2.4s ease-in-out infinite; }
.tools { display: flex; gap: 8px; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-8deg); } }
@keyframes shimmer-text { to { background-position: 300% 0; } }

h2, h3 { font-weight: 600; margin: 0 0 12px; color: var(--pink-deep); }
h2 { font-size: 1.5rem; }
.sub { color: var(--muted); margin: 0 0 12px; font-size: .95rem; }

/* --- Boutons --- */
button {
  position: relative; overflow: hidden;
  font: 600 1rem var(--sans);
  border: 0; border-radius: 999px; padding: 12px 24px; cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #ff6fb5, var(--pink) 50%, var(--pink-deep));
  box-shadow: 0 6px 0 #a8005a, 0 10px 24px rgb(255 45 149 / .4);
  text-shadow: 0 1px 0 rgb(0 0 0 / .15);
  transition: transform .2s var(--bounce), box-shadow .2s;
}
/* Reflet glossy + éclat qui balaie au survol */
button::after {
  content: ''; position: absolute; inset: 2px 10% 55%; border-radius: 999px;
  background: linear-gradient(rgb(255 255 255 / .55), transparent); pointer-events: none;
}
button::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .7), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
button:hover:not(:disabled) { transform: translateY(-2px) scale(1.03); }
button:hover:not(:disabled)::before { animation: sweep .7s ease-out; }
button:active:not(:disabled) { transform: translateY(4px) scale(.96); box-shadow: 0 2px 0 #a8005a, 0 4px 10px rgb(255 45 149 / .3); }
button:disabled { opacity: .45; cursor: not-allowed; }
@keyframes sweep { to { left: 120%; } }

button.ghost, .chip {
  color: var(--pink-deep); background: #fff; text-shadow: none;
  box-shadow: 0 4px 0 var(--blush), 0 6px 16px rgb(255 45 149 / .15);
  border: 2px solid var(--pink);
}
button.ghost:active:not(:disabled), .chip:active { box-shadow: 0 1px 0 var(--blush); }
.chip { padding: 7px 14px; font-size: .85rem; }
.chip.round { padding: 7px 10px; }
:focus-visible { outline: 3px solid var(--lilac); outline-offset: 3px; }

/* --- Champs --- */
label { display: grid; gap: 6px; font-weight: 500; margin-bottom: 14px; }
input:not([type=checkbox]) {
  font: 1rem var(--sans); padding: 12px 16px; border-radius: 16px; color: var(--ink);
  border: 2px solid var(--blush); background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
input:not([type=checkbox]):focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 5px rgb(255 45 149 / .18); }
input::placeholder { color: #e0a3c4; }

.panel {
  background: rgb(255 255 255 / .72);
  border: 2px solid #fff;
  border-radius: var(--radius); padding: 22px; margin: 18px 0;
  box-shadow: 0 10px 30px rgb(209 0 107 / .15), inset 0 0 0 1px rgb(255 45 149 / .15);
  backdrop-filter: blur(8px);
  animation: rise .5s var(--bounce) both;
}
.panel + .panel { animation-delay: .08s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.error { color: var(--pink-deep); margin: 10px 0 0; min-height: 1em; font-weight: 500; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 22px 0; }

/* --- Accueil --- */
.tagline { font: 400 1.6rem/1.35 var(--script); color: var(--pink-deep); text-align: center; margin: 20px 0 8px; text-shadow: 2px 2px 0 #fff; }
.tagline span { font: 500 1rem var(--sans); color: var(--muted); text-shadow: none; }

/* --- Duel --- */
.progress { margin: 4px 0 18px; text-align: center; }
.bar {
  position: relative; height: 16px; border-radius: 99px;
  background: #fff; box-shadow: inset 0 2px 4px rgb(209 0 107 / .2);
}
.bar span {
  position: relative; display: block; height: 100%; width: 0; min-width: 16px; border-radius: inherit;
  background:
    repeating-linear-gradient(-45deg, rgb(255 255 255 / .35) 0 8px, transparent 8px 16px),
    linear-gradient(90deg, var(--lilac), var(--pink));
  background-size: 22px 22px, 100% 100%;
  animation: stripes 1s linear infinite;
  transition: width .5s var(--bounce);
}
.bar span::after { content: '👑'; position: absolute; right: -10px; top: 50%; transform: translateY(-55%); font-size: 20px; }
@keyframes stripes { to { background-position: 22px 0, 0 0; } }
#progress-text { color: var(--muted); font-size: .9rem; margin: 10px 0 0; font-weight: 500; }
.question { text-align: center; font: 400 1.7rem var(--script); color: var(--pink); text-shadow: 2px 2px 0 #fff; }

.arena { max-width: 620px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; perspective: 900px; }
.vs { font-size: 1.8rem; animation: heartbeat 1.1s ease-in-out infinite; filter: drop-shadow(0 2px 6px rgb(255 45 149 / .5)); }
@keyframes heartbeat { 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }

.card {
  display: flex; flex-direction: column; overflow: visible;
  padding: 0; border-radius: var(--radius);
  background: #fff; color: var(--ink); text-shadow: none;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px var(--pink), 0 16px 40px rgb(209 0 107 / .3);
  text-align: center;
  transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
  transition: transform .25s var(--bounce), box-shadow .25s, opacity .35s, filter .35s;
  animation: enter .45s var(--bounce);
}
.card::after { display: none; }
/* Reflet holographique qui suit la baguette */
.card::before {
  content: ''; position: absolute; inset: 0; left: 0; width: auto; transform: none; border-radius: inherit; z-index: 2;
  background: radial-gradient(circle at var(--gx, 50%) 30%, rgb(255 255 255 / .45), transparent 45%),
    linear-gradient(115deg, transparent 30%, rgb(197 139 255 / .18), rgb(255 217 94 / .15), transparent 70%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.card:hover:not(:disabled)::before { opacity: 1; animation: none; }
.card:hover:not(.lose) { box-shadow: 0 0 0 3px var(--pink), 0 0 0 9px rgb(255 45 149 / .2), 0 22px 50px rgb(209 0 107 / .35); }
.card:active:not(:disabled) { transform: scale(.97); }
.card.win { transform: scale(1.06); box-shadow: 0 0 0 4px var(--gold), 0 0 50px rgb(255 217 94 / .9), 0 0 90px rgb(255 45 149 / .5); }
.card.win .photo::after {
  content: '👑'; position: absolute; top: -34px; left: 50%; font-size: 48px; z-index: 3;
  transform: translateX(-50%); animation: crown .5s var(--bounce) both;
}
.card.lose { opacity: .4; filter: grayscale(.8) blur(1px); transform: scale(.92) rotate(-2deg); }
@keyframes enter { from { opacity: 0; transform: translateY(20px) scale(.9) rotate(-3deg); } }
@keyframes crown { from { opacity: 0; transform: translate(-50%, -30px) scale(.3) rotate(-30deg); } }

.photo {
  position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; width: 100%;
  border-radius: 20px 20px 0 0;
  font: 700 3rem var(--sans); color: #fff; text-shadow: 0 3px 10px rgb(0 0 0 / .2);
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / .5), transparent 40%),
    linear-gradient(160deg, hsl(calc(290 + var(--h) * .2) 90% 75%), hsl(calc(310 + var(--h) * .15) 75% 52%));
}
.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Écharpe de Miss en satin rose */
.sash {
  position: absolute; left: -10px; right: -10px; bottom: 70px; z-index: 1;
  transform: rotate(-8deg);
  padding: 7px 0;
  font: 400 clamp(.75rem, 2.6vw, 1rem) var(--script);
  color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .25);
  background: linear-gradient(180deg, #ff7cbf, var(--pink) 45%, var(--pink-deep));
  border-block: 2px solid var(--gold);
  box-shadow: 0 6px 12px rgb(168 0 90 / .35);
  transition: transform .3s var(--bounce);
}
.card:hover .sash { transform: rotate(-5deg) scale(1.04); }
.name { padding: 16px 8px 18px; font-weight: 500; font-size: .95rem; color: var(--muted); }
.hint { text-align: center; color: var(--muted); font-size: .85rem; }

/* --- Classement --- */
#list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
#list li {
  display: grid; grid-template-columns: 2.2em 46px 1fr auto; align-items: center; gap: 12px;
  padding: 8px 16px; border-radius: 18px; background: rgb(255 255 255 / .7);
  box-shadow: 0 4px 12px rgb(209 0 107 / .08);
  animation: row-in .45s var(--bounce) both;
  animation-delay: calc(var(--i) * 35ms);
  transition: transform .2s var(--bounce);
}
#list.static li { animation: none; }
#list li:hover { transform: translateX(6px) scale(1.01); }
#list li.podium { background: linear-gradient(90deg, #ffe0f0, #fff); border: 2px solid var(--blush); }
#list li:first-child {
  background: linear-gradient(90deg, #fff1b8, #ffd1e8, #fff1b8);
  background-size: 200% 100%; animation-name: row-in, shimmer-bg; animation-duration: .45s, 3s;
  animation-iteration-count: 1, infinite; animation-timing-function: var(--bounce), linear;
  border-color: var(--gold);
}
#list li:nth-child(10) { margin-bottom: 16px; }
@keyframes row-in { from { opacity: 0; transform: translateX(-24px) scale(.95); } }
@keyframes shimmer-bg { to { background-position: -200% 0; } }
#list .photo { width: 46px; aspect-ratio: 1; border-radius: 14px; font-size: 1rem; }
.rank { font: 400 1.3rem var(--script); color: var(--pink); text-align: center; }
#list li:not(.podium) .rank { color: var(--muted); font-size: 1.1rem; }
.who { display: grid; }
.who b { font-weight: 600; }
.who small { color: var(--muted); }
.odds {
  font-size: .8rem; font-weight: 600; color: var(--pink-deep); white-space: nowrap;
  background: var(--blush); padding: 3px 10px; border-radius: 99px;
}
.odds:empty { display: none; }
.odds[data-tip] { position: relative; cursor: help; }
.odds[data-tip]::after {
  content: attr(data-tip);
  position: absolute; z-index: 5; right: 0; bottom: calc(100% + 10px); width: 240px;
  padding: 10px 14px; border-radius: 16px;
  font-weight: 500; font-size: .85rem; line-height: 1.35; white-space: normal; text-align: left;
  color: #fff; background: linear-gradient(135deg, var(--lilac), var(--pink));
  box-shadow: 0 0 0 2px #fff, 0 10px 24px rgb(209 0 107 / .35);
  opacity: 0; transform: translateY(6px) scale(.9); transform-origin: bottom right;
  transition: opacity .2s, transform .25s var(--bounce); pointer-events: none;
}
.odds[data-tip]:hover::after, .odds[data-tip]:focus::after { opacity: 1; transform: none; }
#list li:has(.odds:hover, .odds:focus) { z-index: 5; position: relative; }

/* Bottom 3 : cases en cœur */
.pick {
  display: flex; align-items: center; gap: 12px; margin: 0 0 8px;
  padding: 10px 14px; border-radius: 16px; background: #fff; cursor: pointer;
  border: 2px solid transparent; transition: transform .2s var(--bounce), background .2s, border-color .2s;
}
.pick:hover { transform: scale(1.02); }
.pick input {
  appearance: none; margin: 0; width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border: 2px solid var(--pink); border-radius: 50%; background: #fff;
}
.pick input::after { content: '♥'; color: var(--pink); font-size: 16px; transform: scale(0); transition: transform .3s var(--bounce); }
.pick input:checked::after { transform: scale(1.2); }
.pick:has(input:checked) { background: #ffe3f1; border-color: var(--pink); }
.pick:has(input:disabled) { opacity: .45; }

/* --- Dialogue code --- */
dialog {
  max-width: min(420px, calc(100vw - 32px)); overflow: visible;
  border: 3px solid #fff; border-radius: 28px;
  box-shadow: 0 0 0 3px var(--pink), 0 30px 80px rgb(168 0 90 / .4);
  background: linear-gradient(180deg, #fff, #ffeef7); color: var(--ink); padding: 26px; text-align: center;
}
dialog[open] { animation: pop-in .5s var(--bounce); }
dialog::backdrop { background: rgb(255 140 198 / .45); backdrop-filter: blur(4px); }
@keyframes pop-in { from { opacity: 0; transform: scale(.6) rotate(-4deg); } }
.code {
  font: 600 1.5rem var(--sans); color: var(--pink-deep); letter-spacing: .03em;
  padding: 14px; border: 2px dashed var(--pink); border-radius: 16px; background: #fff; user-select: all;
}

/* --- Effets --- */
.twinkle {
  position: fixed; z-index: 0; pointer-events: none; color: #fff;
  text-shadow: 0 0 8px #fff, 0 0 14px var(--pink);
  animation: twinkle ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .1; transform: scale(.5) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }

.sparkle {
  position: fixed; z-index: 9999; pointer-events: none;
  text-shadow: 0 0 6px currentColor, 0 0 2px #fff;
  transform: translate(-50%, -50%);
  animation: sparkle .9s ease-out forwards;
}
.sparkle.burst { animation: burst 1.1s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes sparkle {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2) rotate(180deg); opacity: 0; }
}
@keyframes burst {
  0% { transform: translate(-50%, -50%) scale(.3); }
  60% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 60px)) scale(.6) rotate(var(--r)); opacity: 0; }
}

.toast {
  position: fixed; z-index: 10000; top: 18px; left: 50%; transform: translateX(-50%);
  padding: 12px 24px; border-radius: 99px; font-weight: 600; color: #fff; white-space: nowrap;
  background: linear-gradient(90deg, var(--lilac), var(--pink));
  box-shadow: 0 0 0 3px #fff, 0 12px 30px rgb(209 0 107 / .4);
  animation: toast 2.6s var(--bounce) forwards;
}
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, -40px) scale(.6); }
  12%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -20px) scale(.9); }
}

/* --- Baguette de princesse --- */
@media (pointer: fine) {
  html, button, label, .card, .chip {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cline x1='8' y1='8' x2='29' y2='29' stroke='%23a8005a' stroke-width='5' stroke-linecap='round'/%3E%3Cline x1='8' y1='8' x2='29' y2='29' stroke='%23ff6fb5' stroke-width='3' stroke-linecap='round' stroke-dasharray='3 2'/%3E%3Cline x1='8' y1='8' x2='29' y2='29' stroke='white' stroke-width='3' stroke-linecap='round' stroke-dasharray='2 3' stroke-dashoffset='3'/%3E%3Cpath d='M7 0.5 L9 5 L13.5 7 L9 9 L7 13.5 L5 9 L0.5 7 L5 5 Z' fill='%23ffd95e' stroke='%23ff2d95'/%3E%3C/svg%3E") 7 7, auto;
  }
  button:disabled { cursor: not-allowed; }
}

@media (hover: none) { .hint { display: none; } }

@media (max-width: 480px) {
  .logo { font-size: 1.6rem; }
  .arena { gap: 6px; }
  .vs { font-size: 1.3rem; }
  .sash { bottom: 62px; }
  .name { font-size: .8rem; padding: 12px 4px; }
  .photo { font-size: 2rem; }
  .card.win .photo::after { font-size: 36px; top: -26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}