/* Kafblindtest : studio néon. Platine avec bras, anneau de chrono, pastilles de manches, réponses en verre. */

#hubBlindtestGame { --blind-left: 1; --blind-glow: #ff6a3d; overflow: hidden; border-color: rgba(255, 106, 61, .25); background: radial-gradient(ellipse at 50% 0%, rgba(255, 106, 61, .18), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(143, 92, 255, .2), transparent 60%), linear-gradient(180deg, #120d17, #0a0a10); isolation: isolate; }
#hubBlindtestGame:not(.is-immersive) { position: relative; }
#hubBlindtestGame::before { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 100% 26px, linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 26px 100%; -webkit-mask: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%); mask: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%); pointer-events: none; }
#hubBlindtestGame.is-correct { --blind-glow: #3ecf8e; }
#hubBlindtestGame.is-wrong { --blind-glow: #ff4d5e; }

/* En-tête : manche et score façon tableau lumineux. */
#hubBlindtestGame .hub-blindtest-topline { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
#hubBlindtestGame .hub-blindtest-topline strong { padding: 4px 10px; border: 1px solid rgba(255, 106, 61, .45); border-radius: 999px; background: rgba(255, 106, 61, .12); color: #ffb08f; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(255, 106, 61, .7); }

/* Pastilles des manches. */
#hubBlindtestGame .blind-rounds { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
#hubBlindtestGame .blind-rounds i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: background .3s ease, transform .3s ease, box-shadow .3s ease; }
#hubBlindtestGame .blind-rounds i.is-now { background: #ffd46a; box-shadow: 0 0 10px #ffd46a; transform: scale(1.3); animation: blind-now 1s ease-in-out infinite; }
#hubBlindtestGame .blind-rounds i.is-good { background: #3ecf8e; box-shadow: 0 0 8px rgba(62, 207, 142, .8); }
#hubBlindtestGame .blind-rounds i.is-bad { background: #ff4d5e; box-shadow: 0 0 8px rgba(255, 77, 94, .7); }

/* Série de bonnes réponses. */
#hubBlindtestGame .blind-streak { position: absolute; top: 46px; left: 50%; z-index: 4; padding: 5px 12px; border-radius: 999px; background: linear-gradient(90deg, #ff6a3d, #ffb347); color: #1d0a00; font-size: .72rem; font-weight: 900; box-shadow: 0 6px 22px rgba(255, 106, 61, .55); transform: translateX(-50%); }
#hubBlindtestGame .blind-streak[hidden] { display: none; }
#hubBlindtestGame .blind-streak.is-bump { animation: blind-bump .45s cubic-bezier(.2, 1.5, .4, 1); }

/* Platine : vinyle avec sillons, bras qui se pose pendant la lecture, anneau = temps restant. */
#hubBlindtestGame .blind-deck { position: relative; display: grid; place-items: center; width: min(280px, 78%); aspect-ratio: 1; margin: 18px auto 10px; }
#hubBlindtestGame .blind-deck > .hub-blindtest-stage { width: 86%; margin: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 0 6px #18151f, 0 0 0 7px rgba(255, 255, 255, .06); }
#hubBlindtestGame .blind-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--blind-glow) calc(var(--blind-left) * 360deg), rgba(255, 255, 255, .07) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); filter: drop-shadow(0 0 8px var(--blind-glow)); opacity: 0; transition: opacity .3s ease; }
#hubBlindtestGame.is-playing .blind-ring,
#hubBlindtestGame.is-revealed:not(.is-finished) .blind-ring { opacity: 1; }
#hubBlindtestGame .blind-arm { position: absolute; top: -4%; right: -2%; z-index: 4; width: 34%; height: 62%; transform-origin: 82% 10%; transform: rotate(-26deg); transition: transform .7s cubic-bezier(.3, 1.2, .5, 1); pointer-events: none; }
#hubBlindtestGame .blind-arm::before { position: absolute; top: 4%; right: 10%; width: 18px; height: 18px; content: ""; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3f3f3, #8a8a92); box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
#hubBlindtestGame .blind-arm::after { position: absolute; top: 10%; right: 18%; width: 5px; height: 82%; content: ""; border-radius: 3px; background: linear-gradient(90deg, #9a9aa3, #f1f1f4, #9a9aa3); transform: rotate(14deg); transform-origin: top; }
#hubBlindtestGame .blind-arm b { position: absolute; bottom: 4%; left: 30%; width: 16px; height: 24px; border-radius: 3px; background: linear-gradient(#cfcfd6, #6f6f78); transform: rotate(14deg); }
#hubBlindtestGame.is-playing .blind-arm { transform: rotate(4deg); }
#hubBlindtestGame .hub-blindtest-disc { inset: 0; border: 0; background: repeating-radial-gradient(circle at 50% 50%, #111 0 2px, #1b1b1f 2px 3px), #111; }
#hubBlindtestGame .hub-blindtest-disc::before { position: absolute; inset: 0; content: ""; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, .12) 25%, transparent 32% 70%, rgba(255, 255, 255, .08) 75%, transparent 82%); }
#hubBlindtestGame .hub-blindtest-disc::after { width: 34%; border: 0; background: radial-gradient(circle, #111 0 9%, #ff6a3d 10% 100%); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25); }
#hubBlindtestGame .hub-blindtest-disc span { position: relative; z-index: 3; margin: 0; color: #1d0a00; font-size: 1.6rem; }
#hubBlindtestGame.is-revealed .hub-blindtest-stage > img { animation: blind-reveal .6s cubic-bezier(.2, .9, .3, 1) both; }
#hubBlindtestGame.is-revealed .hub-blindtest-stage { box-shadow: 0 0 0 4px var(--blind-glow), 0 0 40px var(--blind-glow); }

/* Égaliseur néon sous la platine. */
#hubBlindtestGame .hub-blindtest-bars { right: 18%; bottom: 8%; left: 18%; gap: 3px; height: 26%; }
#hubBlindtestGame .hub-blindtest-bars i { width: 6px; background: linear-gradient(0deg, #ff6a3d, #ffd46a); box-shadow: 0 0 8px rgba(255, 140, 60, .7); }

/* Chrono linéaire masqué : l'anneau le remplace. */
#hubBlindtestGame .hub-blindtest-timer { opacity: 0; }

/* Question et retour. */
#hubBlindtestGame h2 { font-size: 1.35rem; letter-spacing: .01em; text-shadow: 0 0 18px rgba(255, 106, 61, .35); }
#hubBlindtestGame.is-revealed h2 { color: var(--blind-glow); text-shadow: 0 0 22px var(--blind-glow); }

/* Réponses : boutons en verre, lettre en pastille, vert / rouge au verdict. */
#hubBlindtestGame .hub-blindtest-options button { position: relative; overflow: hidden; min-height: 54px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); color: #fff; text-align: left; transition: transform .15s ease, border-color .2s ease, background .2s ease; }
#hubBlindtestGame .hub-blindtest-options button:not(:disabled):active { transform: scale(.97); }
#hubBlindtestGame .hub-blindtest-options button > span { background: linear-gradient(135deg, #ff6a3d, #ffb347); color: #1d0a00; font-weight: 900; }
#hubBlindtestGame .hub-blindtest-options button strong { font-size: .78rem; }
#hubBlindtestGame .hub-blindtest-options button.is-answer { border-color: #3ecf8e; background: linear-gradient(135deg, rgba(62, 207, 142, .35), rgba(62, 207, 142, .1)); box-shadow: 0 0 22px rgba(62, 207, 142, .5); animation: blind-good .6s ease; }
#hubBlindtestGame .hub-blindtest-options button.is-answer > span { background: #3ecf8e; }
#hubBlindtestGame .hub-blindtest-options button.is-wrong-answer { border-color: #ff4d5e; background: rgba(255, 77, 94, .18); opacity: 1; animation: blind-shake .45s ease; }
#hubBlindtestGame .hub-blindtest-options button.is-wrong-answer > span { background: #ff4d5e; color: #fff; }

/* Compte à rebours néon. */
#hubBlindtestGame .hub-blindtest-countdown { background: radial-gradient(circle, rgba(255, 106, 61, .25), rgba(10, 10, 16, .96) 60%); }
#hubBlindtestGame .hub-blindtest-countdown strong { color: #fff; text-shadow: 0 0 20px #ff6a3d, 0 0 60px #ff6a3d; }

/* Fin de partie : note et étoiles. */
#hubBlindtestGame.is-finished h2 { font-size: 3rem; line-height: 1; }
#hubBlindtestGame.is-finished h2::after { display: block; margin-top: 6px; content: var(--blind-stars, ""); color: #ffd46a; font-size: 1.4rem; letter-spacing: .2em; text-shadow: 0 0 14px rgba(255, 212, 106, .8); }
#hubBlindtestGame.is-finished > p::before { display: block; margin-bottom: 4px; content: attr(data-grade); color: #ffb08f; font-size: .8rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
#hubBlindtestGame.is-finished .blind-arm { transform: rotate(-26deg); }

/* Bouton de lancement. */
#hubBlindtestGame .hub-blindtest-start:not(:disabled) { border: 0; background: linear-gradient(90deg, #ff6a3d, #ffb347); color: #1d0a00; font-weight: 900; box-shadow: 0 10px 30px rgba(255, 106, 61, .45); animation: blind-pulse 2.2s ease-in-out infinite; }

/* Confettis. */
#hubBlindtestGame .blind-confetti { position: absolute; top: -10px; left: var(--x); z-index: 8; width: 7px; height: 12px; border-radius: 2px; pointer-events: none; animation: blind-confetti 2.2s cubic-bezier(.25, .6, .45, 1) var(--delay) both; }

/* Plein écran : nouvelle grille avec les pastilles et la platine. */
#hubBlindtestGame.is-immersive { grid-template-rows: auto auto minmax(150px, 1fr) 0 auto auto minmax(190px, auto) auto; background: radial-gradient(ellipse at 50% 0%, rgba(255, 106, 61, .2), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(143, 92, 255, .22), transparent 60%), #0b0a10; }
#hubBlindtestGame.is-immersive .blind-deck { align-self: center; width: min(32dvh, 240px, 62vw); margin: 0; }
#hubBlindtestGame.is-immersive .blind-deck > .hub-blindtest-stage { width: 86%; }

/* Classement : podium. */
#hubBlindtestLeaderboard > article.is-podium-1 b,
#hubBlindtestLeaderboard > article.is-podium-2 b,
#hubBlindtestLeaderboard > article.is-podium-3 b { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #1d1200; font-weight: 900; }
#hubBlindtestLeaderboard > article.is-podium-1 b { background: linear-gradient(135deg, #ffe08a, #d9a21b); box-shadow: 0 0 12px rgba(255, 210, 90, .6); }
#hubBlindtestLeaderboard > article.is-podium-2 b { background: linear-gradient(135deg, #f1f3f7, #9aa1ad); }
#hubBlindtestLeaderboard > article.is-podium-3 b { background: linear-gradient(135deg, #f0b27a, #a8642c); }
#hubBlindtestLeaderboard > article.is-podium-1 { border-color: rgba(255, 210, 90, .45); background: linear-gradient(90deg, rgba(255, 210, 90, .1), transparent); }

@keyframes blind-now { 50% { transform: scale(1.6); } }
@keyframes blind-bump { 0% { transform: translateX(-50%) scale(.6); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes blind-reveal { 0% { opacity: 0; transform: rotateY(90deg) scale(.9); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes blind-good { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes blind-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
@keyframes blind-pulse { 0%, 100% { box-shadow: 0 10px 30px rgba(255, 106, 61, .35); } 50% { box-shadow: 0 10px 40px rgba(255, 106, 61, .75); } }
@keyframes blind-confetti { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--drift), 110vh) rotate(var(--spin)); } }

@media (prefers-reduced-motion: reduce) {
  #hubBlindtestGame .blind-rounds i, #hubBlindtestGame .hub-blindtest-start, #hubBlindtestGame .blind-streak, #hubBlindtestGame .hub-blindtest-options button { animation: none !important; }
}