@import url("_tokens.css");
main { max-width: 32rem; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; }
h1 { font-size: 2rem; margin: .5rem 0; }
h2 { font-size: 1.5rem; margin: .75rem 0 1rem; }
.lead, .hint, .qnum { color: var(--muted); font-weight: 600; }
.qnum { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.stage { animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* inscription */
.join { padding-top: 2rem; }
.join form { display: grid; gap: 1rem; margin-top: 1.25rem; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
label { display: grid; gap: .4rem; font-weight: 700; }
input[name=name] { font: inherit; font-size: 1.25rem; padding: .8rem 1rem; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--card-alt); color: var(--fg); }
input[name=name]:focus { outline: 3px solid var(--blue-soft); border-color: var(--blue); }
.photo-label { border: 1.5px dashed var(--ink); border-radius: var(--radius); padding: 1rem; text-align: center; cursor: pointer; background: var(--yellow-soft); }
.photo-label small { color: var(--muted); font-weight: 500; }
.preview img { width: 8rem; height: 8rem; object-fit: cover; border-radius: 50%; display: block; margin: 0 auto; border: 2px solid var(--ink); box-shadow: var(--shadow-sm); }
.primary { font-size: 1.25rem; padding: 1rem; min-height: 64px; }

/* avatars */
.avatar { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }
.avatar.big { width: 7.5rem; height: 7.5rem; font-size: 2.4rem; margin: 0 auto 1rem; border-width: 3px; box-shadow: var(--shadow); }
.avatar.small { width: 2.5rem; height: 2.5rem; font-size: .9rem; box-shadow: none; }

/* lobby */
.lobby { text-align: center; padding-top: 2rem; }
.pulse { display: inline-block; animation: pulse 1.6s infinite; font-weight: 700; background: var(--yellow-soft); border: 1.5px solid var(--ink); border-radius: 999px; padding: .4rem 1rem; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* question */
.timer { margin: .5rem 0 1rem; }
.timer .secs { font-size: 1.4rem; }
.qimage { width: 100%; max-height: 40vh; object-fit: contain; border: 1.5px solid var(--ink); border-radius: var(--radius); margin-bottom: 1rem; background: var(--card); }
.choices { display: grid; gap: .9rem; }
.choice {
  display: flex; align-items: center; gap: .9rem; text-align: left; min-height: 68px; padding: .9rem 1rem; font: inherit; font-size: 1.15rem; font-weight: 700;
  color: var(--fg); background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); cursor: pointer;
  transition: transform .06s, box-shadow .06s, background .15s;
}
.choice:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.choice.selected { background: var(--blue); color: #fff; }
.choice.selected .letter { background: #fff; }
.letter { width: 2.2rem; height: 2.2rem; }
.hint { margin-top: 1rem; }

/* résultat */
.reveal { text-align: center; padding-top: 1rem; }
.verdict { font-size: 2rem; font-weight: 800; margin: 1rem auto; display: inline-block; padding: .6rem 1.2rem; border: 1.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card); }
.reveal.good .verdict { background: var(--green-soft); }
.reveal.bad .verdict { background: var(--red-soft); }
.reveal.none .verdict { background: var(--card-alt); }
.reveal .answer, .reveal .score { font-size: 1.2rem; }
.reveal .score strong { color: var(--orange); }

/* classement */
.leaderboard { text-align: center; }
.myrank { font-size: 1.3rem; }
.myrank strong { color: var(--orange); }
.ranking { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .6rem; counter-reset: rank; }
.ranking li { display: flex; align-items: center; gap: .75rem; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: .5rem .75rem; counter-increment: rank; }
.ranking li::before { content: counter(rank); font-family: var(--mono); font-weight: 800; color: var(--muted); width: 1.5ch; }
.ranking li.me { background: var(--yellow-soft); }
.ranking .name { flex: 1; text-align: left; font-weight: 700; }
.ranking .pts { font-family: var(--mono); font-weight: 800; color: var(--orange); }