/* Application participant. CSS écrit à la main plutôt que Tailwind par CDN :
   50 téléphones n'ont pas à télécharger et compiler Tailwind sur le wifi de
   l'école, la page s'affiche instantanément. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&display=swap');

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body.pq { margin: 0; min-height: 100%; }
body.pq {
    font-family: 'Nunito', system-ui, sans-serif; color: #fff;
    background:
        radial-gradient(ellipse at 10% 0%, rgba(45, 212, 191, .35), transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(129, 140, 248, .35), transparent 55%),
        linear-gradient(160deg, #0b1026, #111a3d 55%, #0f3b47);
    background-attachment: fixed;
    min-height: 100vh; min-height: 100dvh;
    overscroll-behavior: none;
}
.hidden { display: none !important; }

.pq-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: rgba(11, 16, 38, .6); backdrop-filter: blur(8px); font-weight: 800; }
.pq-top-code { color: #5eead4; letter-spacing: 1px; }
.pq-top-me { flex: 1; text-align: right; font-size: 15px; }
.pq-top-net { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; }
.pq-top-net.is-live { background: #22c55e; box-shadow: 0 0 6px #22c55e; }

.pq-screen { min-height: calc(100dvh - 52px); padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.pq-center { align-items: center; justify-content: center; text-align: center; }
.pq-logo { font-size: 30px; font-weight: 900; margin-bottom: 22px; color: #5eead4; }
.pq-card { width: 100%; max-width: 420px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 22px 20px; text-align: left; animation: pq-in .4s ease both; }
.pq-h1 { font-size: 26px; font-weight: 900; margin: 0 0 6px; text-align: center; }
.pq-sub { text-align: center; color: #99f6e4; margin: 0 0 14px; font-weight: 700; }
.pq-label { display: block; font-size: 14px; font-weight: 800; color: #cbd5e1; margin: 14px 0 6px; }
.pq-input { width: 100%; height: 54px; border-radius: 14px; border: 2px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: #fff; font: 800 20px 'Nunito', sans-serif; padding: 0 16px; outline: none; }
.pq-input:focus { border-color: #5eead4; }
.pq-input--code { text-align: center; letter-spacing: 8px; text-transform: uppercase; font-size: 30px; height: 64px; }
.pq-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; margin-top: 20px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #2dd4bf, #0d9488); color: #fff; font: 900 20px 'Nunito', sans-serif; box-shadow: 0 6px 0 #115e59; cursor: pointer; transition: transform .08s, box-shadow .08s; }
.pq-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #115e59; }
.pq-btn[disabled] { opacity: .6; }
.pq-error { background: rgba(244, 63, 94, .2); color: #fecdd3; border-radius: 12px; padding: 10px 12px; font-weight: 700; text-align: center; }
.pq-foot { margin-top: 18px; color: #94a3b8; font-size: 14px; }
.pq-foot a { color: #5eead4; }

.pq-avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pq-avatar { aspect-ratio: 1; border-radius: 12px; border: 2px solid transparent; background: rgba(255,255,255,.08); font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pq-avatar.is-on { border-color: #5eead4; background: rgba(94, 234, 212, .2); transform: scale(1.08); }

.pq-big-emoji { font-size: 84px; line-height: 1; animation: pq-float 2.4s ease-in-out infinite; }
.pq-title { font-size: 24px; font-weight: 900; line-height: 1.25; margin: 14px 0 6px; }
.pq-text { color: #cbd5e1; font-weight: 700; font-size: 17px; }
.pq-pill { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 99px; background: rgba(255,255,255,.1); font-weight: 800; }

/* Question */
.pq-q { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; flex: 1; }
.pq-q-head { text-align: left; }
.pq-q-kicker { font-size: 13px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #5eead4; }
.pq-q-title { font-size: 21px; font-weight: 900; line-height: 1.25; margin: 6px 0 10px; }
.pq-timebar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin-bottom: 14px; }
.pq-timebar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #2dd4bf, #818cf8); transform-origin: left; }
.pq-timebar.is-urgent span { background: linear-gradient(90deg, #fb7185, #f43f5e); }
.pq-options { display: grid; gap: 10px; flex: 1; align-content: start; }
.pq-options--grid { grid-template-columns: 1fr 1fr; }
.pq-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 14px; border: 0; border-radius: 18px; color: #fff; font: 800 17px/1.2 'Nunito', sans-serif; text-align: left; cursor: pointer; box-shadow: 0 5px 0 rgba(0,0,0,.3); transition: transform .08s, box-shadow .08s, opacity .3s, filter .3s; animation: pq-pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.pq-options--grid .pq-opt { flex-direction: column; justify-content: center; text-align: center; min-height: 110px; }
.pq-opt:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.pq-opt i.pq-shape { font-size: 22px; opacity: .95; }
.pq-opt.is-picked { outline: 4px solid #fff; outline-offset: 2px; }
.pq-opt.is-dim { opacity: .35; filter: saturate(.3); }
.pq-opt .pq-tick { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #0f766e; display: none; align-items: center; justify-content: center; font-size: 14px; }
.pq-opt.is-picked .pq-tick { display: flex; }
.c0 { background: linear-gradient(135deg, #f43f5e, #be123c); } .c1 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.c2 { background: linear-gradient(135deg, #f59e0b, #c2410c); } .c3 { background: linear-gradient(135deg, #22c55e, #15803d); }
.c4 { background: linear-gradient(135deg, #a855f7, #7e22ce); } .c5 { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.pq-opt:nth-child(2) { animation-delay: .05s; } .pq-opt:nth-child(3) { animation-delay: .1s; } .pq-opt:nth-child(4) { animation-delay: .15s; }

/* Compte à rebours */
.pq-count { font-size: 120px; font-weight: 900; color: #fde047; text-shadow: 0 0 40px rgba(253, 224, 71, .6); animation: pq-zoom 1s ease-out both; }

/* Résultat */
.pq-result { width: 100%; max-width: 420px; border-radius: 26px; padding: 28px 20px; animation: pq-in .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.pq-result--ok { background: linear-gradient(160deg, #22c55e, #15803d); box-shadow: 0 0 60px rgba(34, 197, 94, .45); }
.pq-result--ko { background: linear-gradient(160deg, #f43f5e, #9f1239); box-shadow: 0 0 60px rgba(244, 63, 94, .4); }
.pq-result--partial { background: linear-gradient(160deg, #f59e0b, #b45309); }
.pq-result--none { background: rgba(255,255,255,.1); }
.pq-result .pq-result-icon { font-size: 66px; animation: pq-spin-in .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.pq-result .pq-result-title { font-size: 30px; font-weight: 900; margin: 8px 0; }
.pq-result .pq-points { font-size: 40px; font-weight: 900; }
.pq-result .pq-rank { margin-top: 10px; font-weight: 800; font-size: 18px; opacity: .95; }
.pq-streak { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 99px; background: rgba(0,0,0,.25); font-weight: 900; animation: pq-pulse 1.2s ease-in-out infinite; }
.pq-correct-answer { margin-top: 14px; font-weight: 800; background: rgba(0,0,0,.2); border-radius: 12px; padding: 10px; }

.pq-textform { width: 100%; }
.pq-waiting-dots span, .pq-loader span { display: inline-block; width: 12px; height: 12px; margin: 0 4px; border-radius: 50%; background: #5eead4; animation: pq-bounce 1.2s infinite; }
.pq-waiting-dots span:nth-child(2), .pq-loader span:nth-child(2) { animation-delay: .15s; }
.pq-waiting-dots span:nth-child(3), .pq-loader span:nth-child(3) { animation-delay: .3s; }

.pq-final-rank { font-size: 64px; font-weight: 900; color: #fde047; }

@keyframes pq-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pq-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes pq-zoom { from { transform: scale(2.2); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); } }
@keyframes pq-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes pq-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-10px); opacity: 1; } }
@keyframes pq-spin-in { from { transform: scale(0) rotate(-180deg); } to { transform: none; } }
@keyframes pq-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes pq-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.pq-shake { animation: pq-shake .5s; }

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

/* Avatars Twemoji : l'image suit la taille du texte, comme un emoji. */
img.emo { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; pointer-events: none; }